/* block 1 <style> */
:root {

            --bg:      #080b12;

            --surface: #0d1119;

            --panel:   #111620;

            --panel2:  #161c28;

            --border:  #1e2535;

            --border2: #252e42;



            --blue:    #4d9eff;

            --blue-d:  #1a5cbf;

            --cyan:    #33a8c4;

            --green:   #15b98a;

            --yellow:  #f5c842;

            --pink:    #ff5fa0;

            --purple:  #a78bfa;

            --red:     #ff4d6d;

            --orange:  #ff8c42;



            --txt:  #e8edf5;

            --sub:  #5a6680;

            --mute: #3a4255;



            --glow-blue:   0 0 20px rgba(77,158,255,.15);

            --glow-green:  0 0 20px rgba(0,229,160,.15);

            --glow-yellow: 0 0 20px rgba(245,200,66,.12);

            --glow-pink:   0 0 20px rgba(255,95,160,.15);

        }



        /* ===== Company toggle + SK하이닉스 calculator (added) ===== */
        #samsungApp.hidden, #hynixApp.hidden { display: none; }
        .company-tabs { display: flex; gap: 8px; justify-content: center; margin: 0 0 14px; }
        .company-tab { flex: 1; max-width: 200px; display: flex; align-items: center; justify-content: center; gap: 7px;
            padding: 11px 10px; border-radius: 14px; border: 1px solid var(--border2); background: var(--surface);
            color: var(--sub); font-weight: 800; font-size: 14px; cursor: pointer; transition: all .15s; }
        .company-tab .ct-logo { font-size: 15px; }
        .company-tab.active.samsung { border-color: var(--blue); color: var(--blue); background: rgba(77,158,255,.08); box-shadow: var(--glow-blue); }
        .company-tab.active.hynix  { border-color: var(--green); color: var(--green); background: rgba(21,185,138,.08); box-shadow: var(--glow-green); }
        .topbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
        /* 현황/요약 카드의 큰 숫자도 입력칸·결과와 동일한 Space Mono로 통일 (삼성·하닉) */
        #hynixApp [style*="font-weight:900"], #samsungApp [style*="font-weight:900"] { font-family: 'Pretendard', 'Noto Sans KR', sans-serif; }
        /* ①②③ 흐름 카드 제거 (삼성·하닉) */
        .quick-flow-card { display: none !important; }
        /* 하닉 간편/상세: 간편 모드에선 상세 항목 숨김 */
        #hxBonusPanel:not(.calc-detail) .hx-detail-only { display: none !important; }
        /* 간편 모드: 회사기준 그룹이 숨겨지면 개인변수 그룹 점선·여백 제거 */
        #hxBonusPanel:not(.calc-detail) .setup-group:not(.hx-detail-only) { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
        /* 하닉 숫자는 전부 Space Mono로 (가이드·차트 포함) */
        #hxGuideBody .cs-fml strong, #hxGuideBody .cs-fml span { font-family: 'Space Mono', monospace; }
        .hx-accum-bar-row { display: grid; grid-template-columns: 52px 1fr 96px; align-items: center; gap: 8px; margin: 6px 0; }
        .hx-accum-bar-row .yr { font-size: 11px; color: var(--sub); font-weight: 700; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; }
        .hx-accum-bar-wrap { background: var(--panel2); border-radius: 6px; height: 16px; overflow: hidden; }
        .hx-accum-bar { height: 100%; border-radius: 6px; background: linear-gradient(90deg, rgba(245,200,66,.5), var(--yellow)); }
        .hx-accum-bar-row .v { font-size: 11px; font-weight: 800; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; text-align: right; color: var(--yellow); }
        .hx-trend-row { display: grid; grid-template-columns: 52px 1fr 64px; align-items: center; gap: 8px; margin: 7px 0; }
        .hx-trend-yr { font-size: 11px; color: var(--sub); font-weight: 700; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; }
        .hx-trend-bar-wrap { background: var(--panel2); border-radius: 6px; height: 18px; position: relative; overflow: hidden; }
        .hx-trend-bar { height: 100%; border-radius: 6px; }
        .hx-trend-bar.pos { background: linear-gradient(90deg, rgba(21,185,138,.5), var(--green)); }
        .hx-trend-bar.neg { background: linear-gradient(90deg, var(--red), rgba(255,77,109,.5)); }
        .hx-trend-val { font-size: 12px; font-weight: 800; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; text-align: right; }
        .hx-yr3 { grid-template-columns: repeat(3, 1fr) !important; }
        @media (max-width: 430px) { .hx-yr3 { gap: 5px; } .hx-yr3 .var-cell { padding: 6px 5px; } .hx-yr3 .var-cell label { font-size: 9px; } .hx-yr3 .var-in input { font-size: 11px; } .hx-yr3 .var-in { padding: 3px 8px 3px 7px; } }
        .hx-hint { font-size: 11px; color: var(--mute); margin-top: 2px; padding-left: 2px; }
        .hx-result { background: transparent; border: none; border-radius: 0; padding: 0; }
        .hx-break { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-bottom: 6px; }
        .hx-break-item { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); }
        .hx-break-item span { font-size: 11px; color: var(--sub); white-space: nowrap; }
        .hx-break-item b { font-family: 'Pretendard', 'Noto Sans KR', sans-serif; font-weight: 800; font-size: 13px; }
        /* 수령 패키지 숫자 Space Mono 강제 고정 */
        #hxBonusPanel .hx-break-item b, #hxBonusPanel .hx-hero .big, #hxBonusPanel .hx-takehome .big { font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important; }
        .hx-res-line { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); }
        .hx-res-line:last-of-type { border-bottom: none; }
        .hx-res-line .k { font-size: 12px; color: var(--sub); }
        .hx-res-line .formula { font-size: 10px; color: var(--mute); display: block; margin-top: 2px; }
        .hx-res-line .vv { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 15px; }
        .hx-hero { text-align: center; margin: 16px 0 8px; padding: 16px; background: rgba(21,185,138,.07); border: 1px solid rgba(21,185,138,.25); border-radius: 14px; }
        .hx-hero .lab { font-size: 12px; color: var(--green); font-weight: 700; margin-bottom: 4px; }
        .hx-hero .big { font-family: 'Pretendard', 'Noto Sans KR', sans-serif; font-size: 32px; font-weight: 900; color: var(--green); letter-spacing: -1px; }
        .hx-hero .big small { font-size: 17px; }
        .hx-hero .meta { font-size: 11px; color: var(--sub); margin-top: 4px; }
        .hx-takehome { text-align: center; margin-top: 10px; padding: 12px; background: rgba(77,158,255,.06); border: 1px solid rgba(77,158,255,.22); border-radius: 12px; }
        .hx-takehome .lab { font-size: 11px; color: var(--blue); font-weight: 700; }
        .hx-takehome .big { font-family: 'Pretendard', 'Noto Sans KR', sans-serif; font-size: 25px; font-weight: 900; color: var(--blue); }
        .hx-takehome .meta { font-size: 10px; color: var(--sub); margin-top: 3px; }
        .hx-tax { margin-top: 12px; font-size: 11px; }
        .hx-tax summary { cursor: pointer; color: var(--sub); font-weight: 600; }
        .hx-tax-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--sub); }
        .hx-tax-row .mono { color: var(--txt); font-family: 'Space Mono', monospace; }
        .hx-defer { font-size: 10px; color: var(--mute); margin-top: 8px; text-align: center; line-height: 1.5; }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }



        body {

            background: var(--bg);

            color: var(--txt);

            font-family: 'Noto Sans KR', sans-serif;

            min-height: 100vh;

            padding: 20px 16px 40px;

            display: flex;

            justify-content: center;

        }



        /* Subtle grid background */

        body::before {

            content: '';

            position: fixed;

            inset: 0;

            background-image:

                linear-gradient(rgba(77,158,255,.025) 1px, transparent 1px),

                linear-gradient(90deg, rgba(77,158,255,.025) 1px, transparent 1px);

            background-size: 40px 40px;

            pointer-events: none;

            z-index: 0;

        }



        .wrap { max-width: 740px; width: 100%; position: relative; z-index: 1; }



        /* ── Header ── */

        .hdr {

            text-align: center;

            padding: 32px 0 28px;

        }

        .hdr-chip {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            background: rgba(77,158,255,.08);

            border: 1px solid rgba(77,158,255,.2);

            border-radius: 100px;

            padding: 5px 14px;

            font-size: 11px;

            font-weight: 700;

            color: var(--blue);

            letter-spacing: 1.5px;

            text-transform: uppercase;

            margin-bottom: 16px;

        }

        .hdr-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: pulse 2s ease infinite; }

        @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }



        .hdr h1 {

            font-size: clamp(22px, 5vw, 32px);

            font-weight: 900;

            letter-spacing: -1px;

            margin-bottom: 8px;

            background: linear-gradient(135deg, #fff 30%, var(--blue) 100%);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        .hdr-sub {

            font-size: 12px;

            color: var(--sub);

            letter-spacing: .3px;

        }

        .hdr-alert {

            display: inline-flex;

            align-items: flex-start;

            gap: 8px;

            background: rgba(255,77,109,.07);

            border: 1px solid rgba(255,77,109,.2);

            color: rgba(255,77,109,.85);

            font-size: 11.5px;

            line-height: 1.5;

            padding: 10px 14px;

            border-radius: 10px;

            margin-top: 16px;

            word-break: keep-all;

            text-align: left;

        }



        /* ── Sections / Cards ── */

        .section { margin-bottom: 10px; }



        .card {

            background: var(--panel);

            border: 1px solid var(--border);

            border-radius: 16px;

            padding: 14px 16px 12px;

            position: relative;

            overflow: hidden;

        }

        .card::before {

            content: '';

            position: absolute;

            top: 0; left: 0; right: 0;

            height: 1px;

            background: linear-gradient(90deg, transparent, rgba(77,158,255,.3), transparent);

        }



        .card-hdr {

            display: flex;

            align-items: center;

            gap: 8px;

            font-size: 11px;

            font-weight: 700;

            color: var(--sub);

            letter-spacing: 1px;

            text-transform: uppercase;

            margin-bottom: 12px;

            padding-bottom: 9px;

            border-bottom: 1px solid var(--border);

        }

        .card-hdr-icon {

            width: 26px; height: 26px;

            border-radius: 7px;

            display: flex; align-items: center; justify-content: center;

            font-size: 13px;

            flex-shrink: 0;

        }

        .card-hdr-icon.blue  { background: rgba(77,158,255,.12); }

        .card-hdr-icon.green { background: rgba(0,229,160,.12); }

        .card-hdr-icon.purple{ background: rgba(167,139,250,.12); }

        .card-hdr-icon.yellow{ background: rgba(245,200,66,.12); }



        /* ── Grid ── */

        .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

        .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }



        /* ── Input Group ── */

        .ig label {

            display: block;

            font-size: 10.5px;

            font-weight: 700;

            color: var(--sub);

            letter-spacing: .8px;

            text-transform: uppercase;

            margin-bottom: 6px;

        }

        .ig .wrap-in { position: relative; }

        .ig .wrap-in::after {

            content: attr(data-u);

            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);

            color: var(--mute); font-size: 11px; pointer-events: none;

            font-family: 'Space Mono', monospace;

        }

        .ig .wrap-in.left::before {

            content: attr(data-u);

            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);

            color: var(--sub); font-size: 11px; pointer-events: none;

        }

        .ig input, .ig select {

            width: 100%;

            background: var(--surface);

            border: 1px solid var(--border2);

            color: var(--txt);

            padding: 10px 12px;

            border-radius: 10px;

            font-size: 13px;

            font-family: 'Space Mono', monospace;

            outline: none;

            transition: border-color .15s, box-shadow .15s;

        }

        .ig input { text-align: right; padding-right: 40px; }

        .ig .wrap-in[data-u="명"] input { padding-right: 28px; }

        .ig .wrap-in[data-u="개월"] input { padding-right: 40px; }

        .ig .wrap-in[data-u="%"] input { padding-right: 24px; }

        .ig .wrap-in.left input { padding-left: 28px; }

        .ig input:focus, .ig select:focus {

            border-color: rgba(77,158,255,.5);

            box-shadow: 0 0 0 3px rgba(77,158,255,.08);

        }

        .ig select {

            cursor: pointer;

            color: var(--yellow);

            border-color: rgba(245,200,66,.25);

            font-family: 'Noto Sans KR', sans-serif;

            font-weight: 700;

            font-size: 12px;

            appearance: none;

            padding-right: 32px;

            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a6680'/%3E%3C/svg%3E");

            background-repeat: no-repeat;

            background-position: right 12px center;

        }

        .ig select:focus { border-color: rgba(245,200,66,.45); box-shadow: 0 0 0 3px rgba(245,200,66,.06); }



        /* Full-width select inside g2 */

        .span-full { grid-column: 1 / -1; }



        /* ── Unified Setup Card ── */

        .setup-card { padding: 12px 14px 10px; }

        .setup-group { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); }

        .setup-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

        .setup-label {

            display: flex; justify-content: space-between; align-items: center;

            font-size: 9.5px; font-weight: 700;

            color: var(--sub); letter-spacing: 1.2px; text-transform: uppercase;

            margin-bottom: 5px;

            padding: 0 2px;

        }

        .setup-total { font-size: 10px; color: var(--sub); letter-spacing: .3px; text-transform: none; }

        .setup-total b { color: var(--txt); font-family: 'Space Mono', monospace; font-weight: 700; }



        /* Headcount row — compact pills, 4 columns in one line */

        .headcount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }

        .hc-cell {

            background: var(--surface);

            border: 1px solid var(--border2);

            border-radius: 9px;

            padding: 7px 6px 6px;

            display: flex; flex-direction: column; gap: 3px;

            position: relative;

            min-width: 0;

        }

        .hc-dot {

            position: absolute; top: 8px; right: 7px;

            width: 4px; height: 4px; border-radius: 50%;

        }

        .hc-name { font-size: 9.5px; font-weight: 700; letter-spacing: .2px; padding-left: 1px; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .hc-input {

            position: relative;

            display: flex; align-items: center;

        }

        .hc-input input {

            width: 100%;

            min-width: 0;

            background: transparent;

            border: none;

            color: var(--txt);

            padding: 0 14px 0 0;

            font-size: 13px;

            font-family: 'Space Mono', monospace;

            font-weight: 700;

            outline: none;

            text-align: right;

        }

        .hc-input input:focus { color: var(--blue); }

        .hc-input .hc-unit {

            position: absolute; right: 0; top: 50%; transform: translateY(-50%);

            font-size: 9px; color: var(--mute);

            pointer-events: none;

            font-family: 'Space Mono', monospace;

        }



        /* Compact select */

        .sel-compact {

            padding: 9px 28px 9px 12px !important;

            font-size: 11.5px !important;

        }



        /* Vars grid — 4 columns wide */

        .vars-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 6px;

        }

        .var-cell {

            background: var(--surface);

            border: 1px solid var(--border2);

            border-radius: 9px;

            padding: 7px 8px 6px;

            min-width: 0;

        }

        .var-cell label {

            display: block;

            font-size: 9.5px; font-weight: 700;

            color: var(--sub); letter-spacing: .2px;

            margin-bottom: 3px;

            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

        }

        .var-in {
            position: relative; display: flex; align-items: center;
            background: var(--surface); border: 1px solid var(--border2);
            border-radius: 8px; padding: 3px 12px 3px 11px; cursor: text;
            transition: border-color .15s, box-shadow .15s;
        }
        .var-in:hover { border-color: var(--blue); }
        .var-in:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(77,158,255,.14); }

        .var-in input {

            width: 100%;

            background: transparent;

            border: none;

            color: var(--txt);

            padding: 0 14px 0 0;

            font-size: 12.5px;

            font-family: 'Space Mono', monospace;

            font-weight: 700;

            outline: none;

            text-align: right;

        }

        .var-in input:focus { color: var(--blue); }

        .var-in span {

            position: absolute; right: 11px; top: 50%; transform: translateY(-50%);

            font-size: 9.5px; color: var(--mute);

            font-family: 'Space Mono', monospace;

            pointer-events: none;

        }



        /* CL Grade Selector — toggle pill buttons */

        .grade-grid {

            display: grid;

            grid-template-columns: repeat(5, 1fr);

            gap: 4px;

        }

        .grade-btn {

            background: var(--surface);

            border: 1px solid var(--border2);

            border-radius: 8px;

            padding: 8px 4px 6px;

            cursor: pointer;

            text-align: center;

            transition: all .12s ease;

            position: relative;

            min-width: 0;

        }

        .grade-btn:hover { border-color: var(--border2); background: var(--panel2); }

        .grade-btn.active {

            background: linear-gradient(135deg, rgba(77,158,255,.12), rgba(77,158,255,.04));

            border-color: var(--blue);

            box-shadow: var(--glow-blue);

        }

        .grade-btn .gb-name {

            font-size: 10px; font-weight: 700;

            letter-spacing: .2px;

            color: var(--sub);

            margin-bottom: 2px;

            white-space: nowrap;

        }

        .grade-btn.active .gb-name { color: var(--blue); }

        .grade-btn .gb-mul {

            font-size: 10px; font-weight: 700;

            color: var(--mute);

            font-family: 'Space Mono', monospace;

        }

        .grade-btn.active .gb-mul { color: var(--cyan); }

        .grade-btn .gb-tier {

            font-size: 7.5px; color: var(--mute);

            margin-bottom: 1px; letter-spacing: .3px;

        }



        /* Salary type toggle (2-column wide toggle) */

        .salary-toggle {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 4px;

        }

        .salary-toggle .grade-btn { padding: 7px 6px 6px; }

        .salary-toggle .grade-btn .gb-name { font-size: 10.5px; margin-bottom: 2px; }

        .salary-toggle .grade-btn .gb-mul { font-size: 9px; }



        /* Condition row: year-select + salary-toggle in one line */

        .cond-row {

            display: grid;

            grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);

            gap: 6px;

            align-items: stretch;

        }

        .cond-row > .sel-compact { width: 100%; }

        .cond-row > .salary-toggle { height: 100%; }

        /* 학술연수 토글 */
        .academic-row {
            display: flex; align-items: center; gap: 8px;
            margin-top: 7px; padding: 8px 10px;
            border: 1px solid var(--border); border-radius: 8px;
            background: var(--panel2); cursor: pointer;
            transition: border-color .15s, background .15s;
        }
        .academic-row:hover { border-color: var(--border2); }
        .academic-row input[type="checkbox"] {
            width: 15px; height: 15px; accent-color: var(--cyan);
            cursor: pointer; flex-shrink: 0; margin: 0;
        }
        .academic-row .academic-text { font-size: 10.5px; color: var(--sub); line-height: 1.35; }
        .academic-row .academic-text b { color: var(--cyan); font-weight: 700; }
        .academic-row.on { border-color: rgba(0,212,255,.55); background: rgba(0,212,255,.06); }
        .academic-row.on .academic-text { color: var(--text); }
        /* 상세 모드에선 simple-only 숨김 (detail-only는 기존 규칙으로 simple에서 숨김) */
        #bonusPanel:not(.calc-simple) .simple-only { display: none !important; }
        /* 학술연수 연도별 버튼 */
        #academicYearRow { cursor: default; }
        .academic-yr-btns { display: flex; gap: 5px; margin-left: auto; flex-shrink: 0; }
        .ayr-btn {
            padding: 4px 10px; border: 1px solid var(--border); border-radius: 7px;
            background: var(--panel); color: var(--sub); font-size: 10.5px; font-weight: 700;
            font-family: 'Space Mono', monospace; cursor: pointer; transition: all .15s;
        }
        .ayr-btn:hover { border-color: var(--border2); color: var(--text); }
        .ayr-btn.on {
            border-color: rgba(0,212,255,.7); background: rgba(0,212,255,.14);
            color: var(--cyan); box-shadow: 0 0 0 1px rgba(0,212,255,.25) inset;
        }



        /* Force dark style on selects inside cond-row (override browser default) */

        .cond-row select.sel-compact {

            background: var(--surface);

            color: var(--txt);

            border: 1px solid var(--border2);

            border-radius: 9px;

            font-family: 'Noto Sans KR', sans-serif;

            font-weight: 700;

            appearance: none;

            -webkit-appearance: none;

            padding-right: 28px !important;

            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a6680'/%3E%3C/svg%3E");

            background-repeat: no-repeat;

            background-position: right 10px center;

        }

        .cond-row select.sel-compact:focus {

            outline: none;

            border-color: var(--blue);

        }

        .cond-row select.sel-compact option {

            background: var(--panel);

            color: var(--txt);

        }

        @media (max-width: 560px) {

            .card { padding: 11px 12px 10px; }

            .card-hdr { margin-bottom: 9px; padding-bottom: 7px; }

            .setup-card { padding: 10px 12px 9px; }

            .setup-group { margin-bottom: 8px; padding-bottom: 8px; }

            .setup-label { font-size: 8.5px; margin-bottom: 4px; }

            .setup-total { font-size: 9.5px; }

            .headcount-grid { gap: 3px; }

            .hc-cell { padding: 6px 5px 5px; border-radius: 8px; }

            .hc-name { font-size: 9px; padding-right: 6px; }

            .hc-input input { font-size: 12px; padding-right: 11px; }

            .hc-input .hc-unit { font-size: 8px; }

            .sel-compact { font-size: 10.5px !important; padding: 8px 26px 8px 10px !important; }

            .vars-grid { gap: 5px; }

            .var-cell { padding: 6px 6px 5px; }

            .var-cell label { font-size: 8.5px; margin-bottom: 2px; }

            .var-in input { font-size: 11px; padding-right: 12px; }

            .var-in span { font-size: 8.5px; }

            .grade-grid { gap: 3px; }

            .grade-btn { padding: 6px 2px 5px; border-radius: 7px; }

            .grade-btn .gb-name { font-size: 9px; }

            .grade-btn .gb-mul { font-size: 9px; }

            .grade-btn .gb-tier { font-size: 7px; }

        }

        @media (max-width: 400px) {

            .vars-grid { grid-template-columns: repeat(2, 1fr); }

        }



        /* ── Total count chip ── */

        .total-chip {

            display: flex;

            align-items: center;

            justify-content: flex-end;

            gap: 6px;

            font-size: 11.5px;

            color: var(--sub);

            margin-top: 12px;

        }

        .total-chip span { color: var(--txt); font-weight: 700; font-family: 'Space Mono', monospace; }



        /* ── OPI Summary Card ── */

        .opi-card {

            background: var(--panel);

            border: 1px solid rgba(0,229,160,.2);

            border-radius: 14px;

            padding: 14px 14px 12px;

            margin-bottom: 12px;

            position: relative;

            overflow: hidden;

            box-shadow: var(--glow-green);

        }

        .opi-card::before {

            content: '';

            position: absolute;

            top: 0; left: 0; right: 0; height: 1px;

            background: linear-gradient(90deg, transparent, rgba(0,229,160,.4), transparent);

        }

        .opi-hdr {

            display: flex;

            align-items: center;

            gap: 8px;

            font-size: 11px;

            font-weight: 700;

            color: var(--green);

            letter-spacing: 1px;

            text-transform: uppercase;

            margin-bottom: 10px;

            padding-bottom: 8px;

            border-bottom: 1px solid rgba(0,229,160,.1);

        }

        .opi-badge {

            margin-left: auto;

            font-size: 9.5px;

            background: rgba(0,229,160,.1);

            border: 1px solid rgba(0,229,160,.2);

            color: var(--green);

            padding: 2px 8px;

            border-radius: 100px;

            font-weight: 700;

        }

        .opi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }

        .opi-stat {

            background: var(--surface);

            border: 1px solid var(--border);

            border-radius: 9px;

            padding: 7px 6px 6px;

            text-align: center;

            min-width: 0;

        }

        .opi-stat .lbl {

            font-size: 9.5px; color: var(--sub);

            margin-bottom: 4px;

            word-break: keep-all;

            letter-spacing: .2px;

            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

        }

        .opi-stat .val {

            font-size: 13px; font-weight: 700;

            font-family: 'Space Mono', monospace;

            letter-spacing: -.5px;

            white-space: nowrap;

        }



        /* ── Banner ── */

        .banner {

            display: flex; align-items: center; gap: 8px;

            padding: 10px 14px; border-radius: 10px;

            font-size: 12px; font-weight: 700; margin-top: 12px;

            letter-spacing: .3px;

        }

        .banner.ok  { background: rgba(0,229,160,.07); border: 1px solid rgba(0,229,160,.22); color: var(--green); }

        .banner.no  { background: rgba(255,77,109,.07); border: 1px solid rgba(255,77,109,.22); color: var(--red); }



        /* ── Fixed rule box ── */

        .rule-box {

            background: rgba(255,255,255,.025);

            border: 1px dashed var(--border2);

            border-radius: 10px;

            padding: 8px 14px;

            font-size: 11px;

            color: var(--sub);

            text-align: center;

            margin-bottom: 10px;

            letter-spacing: .3px;

        }

        .rule-box strong { color: var(--txt); }



        /* ── Dept OP inputs ── */

        .dept-op-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }

        .dept-op-card {

            background: var(--surface);

            border: 1px solid var(--border2);

            border-radius: 12px;

            padding: 9px 11px 8px;

        }

        .dept-op-title {

            font-size: 11px; font-weight: 700;

            letter-spacing: .5px;

            margin-bottom: 6px;

        }

        .dept-op-title .dept-dot {

            display: inline-block;

            width: 6px; height: 6px;

            border-radius: 50%;

            margin-right: 6px;

            vertical-align: middle;

        }

        .sign-toggle {

            display: flex;

            gap: 4px;

            margin-bottom: 5px;

        }

        .sign-btn {

            flex: 1;

            padding: 4px 0;

            border-radius: 6px;

            border: 1px solid var(--border2);

            background: var(--panel);

            color: var(--sub);

            font-size: 13px;

            font-weight: 700;

            cursor: pointer;

            transition: all .12s;

            line-height: 1;

        }

        .sign-btn.active-pos { background: rgba(0,229,160,.12); border-color: var(--green); color: var(--green); }

        .sign-btn.active-neg { background: rgba(255,77,109,.12); border-color: var(--red);   color: var(--red); }



        /* ── Weight Dashboard ── */

        .weight-dash {

            background: var(--surface);

            border: 1px solid var(--border);

            border-radius: 12px;

            padding: 9px 10px 8px;

            margin-bottom: 4px;

        }

        .weight-dash-title {

            font-size: 10px; color: var(--sub);

            margin-bottom: 7px; font-weight: 700;

            text-align: center; letter-spacing: 1px; text-transform: uppercase;

        }

        .weight-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }

        .wg-col {

            background: var(--panel);

            border: 1px solid var(--border);

            border-radius: 8px;

            padding: 6px 8px;

            text-align: center;

        }

        .wg-name { font-size: 10px; font-weight: 700; margin-bottom: 3px; letter-spacing: .5px; }

        .wg-val { font-size: 10.5px; color: #aaa; line-height: 1.5; font-family: 'Space Mono', monospace; }

        .wg-val span { font-weight: 700; color: #ddd; }

        .wg-val .alert { color: var(--red); }


        /* ── Section heading ── */

        .sec-heading {

            display: flex; align-items: center; gap: 10px;

            font-size: 11px; font-weight: 700;

            color: var(--sub); letter-spacing: 1.2px; text-transform: uppercase;

            margin: 14px 0 8px;

        }

        .sec-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); }



        /* ── Results Grid ── */

        .res-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 12px; }

        .res-card {

            background: var(--panel);

            border: 1px solid var(--border);

            border-radius: 14px;

            padding: 14px 12px;

            position: relative; overflow: hidden;

        }

        .res-card.mem { border-top: 2px solid var(--blue); }

        .res-card.com { border-top: 2px solid var(--yellow); }

        .res-card.fnd { border-top: 2px solid var(--pink); }

        .res-title { font-size: 11px; font-weight: 700; text-align: center; margin-bottom: 10px; letter-spacing: .5px; }

        .dr { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--sub); padding: 3px 0; }

        .dr span:last-child { font-family: 'Space Mono', monospace; color: #aaa; }

        .dr.tax span:last-child { color: var(--red); }

        .dr.rate span:last-child { color: var(--purple); font-weight: 700; }

        .stk-box {

            background: rgba(77,158,255,.06);

            border: 1px solid rgba(77,158,255,.14);

            border-radius: 10px;

            padding: 9px 5px;

            text-align: center;

            margin-top: 8px;

        }

        .stk-lbl { font-size: 9px; color: var(--blue); font-weight: 700; margin-bottom: 4px; display: block; letter-spacing: 1px; text-transform: uppercase; }

        .stk-shares { font-size: 16px; font-weight: 700; color: var(--cyan); font-family: 'Space Mono', monospace; }

        .stk-val { font-size: 10px; color: var(--sub); margin-top: 2px; font-family: 'Space Mono', monospace; }

        .split-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.05); padding-top: 8px; }

        .sp { background: var(--surface); border-radius: 7px; padding: 6px 3px; text-align: center; }

        .sp.now { border: 1px solid rgba(77,158,255,.25); }

        .sp .sp-t { font-size: 9px; color: var(--sub); margin-bottom: 2px; }

        .sp .sp-s { font-size: 11px; font-weight: 700; font-family: 'Space Mono', monospace; color: #ccc; }

        .sp.now .sp-s { color: var(--blue); }

        .sp .sp-v { font-size: 8.5px; color: var(--mute); font-family: 'Space Mono', monospace; }



        /* ── Totals Grid ── */

        .tot-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px; }

        .tot-card {

            background: var(--panel);

            border: 1px solid var(--border);

            border-radius: 14px;

            padding: 14px 12px;

        }

        .tot-card.mem { border-top: 2px solid var(--blue); }

        .tot-card.com { border-top: 2px solid var(--yellow); }

        .tot-card.fnd { border-top: 2px solid var(--pink); }

        .tot-lbl { font-size: 10px; color: var(--sub); margin-bottom: 10px; font-weight: 700; word-break: keep-all; letter-spacing: .5px; text-transform: uppercase; }

        .tot-det { font-size: 11px; font-weight: 700; line-height: 1.5; word-break: keep-all; }

        .tot-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }

        .tot-row .tr-label { font-size: 9.5px; color: var(--sub); }

        .tot-row .tr-val { font-family: 'Space Mono', monospace; font-size: 11px; }

        .tot-divider { height: 1px; background: var(--border); margin: 6px 0; }

        .tot-row.sum .tr-label { color: #aaa; font-weight: 700; font-size: 10px; }

        .tot-row.sum .tr-val { font-size: 12px; color: var(--txt); font-weight: 700; }

        .tot-row.sub-row .tr-label { color: var(--mute); font-size: 9px; }

        .tot-row.sub-row .tr-val { font-size: 10px; color: #666; }



        /* ── Formula Guide ── */
        .calc-sec { margin-top: 24px; }
        .calc-sec h3 { font-size: 11px; font-weight: 700; color: var(--sub); letter-spacing: 1.2px; text-transform: uppercase; text-align: center; margin-bottom: 14px; }
        .calc-toggle {
            width: 100%;
            display: flex; align-items: center; justify-content: center; gap: 7px;
            background: var(--panel);
            border: 1px solid var(--border2);
            border-radius: 12px;
            color: var(--sub);
            padding: 11px 14px;
            font-size: 11px; font-weight: 800;
            letter-spacing: .8px;
            cursor: pointer;
            transition: border-color .15s, background .15s, color .15s;
            margin-bottom: 12px;
        }
        .calc-toggle:hover {
            border-color: rgba(77,158,255,.34);
            background: rgba(77,158,255,.06);
            color: var(--blue);
        }
        .calc-toggle .calc-caret { font-size: 11px; transition: transform .15s; }
        .calc-toggle.open .calc-caret { transform: rotate(180deg); }
        .calc-guide-body.hidden { display: none; }
        .calc-guide-body { animation: calcFade .16s ease; }
        @keyframes calcFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

        .cb {
            background: var(--panel);

            border: 1px solid var(--border);

            border-radius: 14px;

            padding: 16px;

            margin-bottom: 12px;

            overflow: hidden;

        }

        .cb-title {

            font-size: 12px; font-weight: 700;

            margin-bottom: 14px; text-align: center;

            letter-spacing: .5px;

        }

        .cs-wrap {

            padding: 7px 0;

            border-bottom: 1px solid var(--border);

        }

        .cs-wrap:last-child { border-bottom: none; padding-bottom: 0; }

        .cs-head { font-size: 11px; color: var(--txt); margin-bottom: 4px; font-weight: 700; }

        .cs-fml-desc { font-size: 10px; color: var(--sub); margin-bottom: 4px; word-break: keep-all; line-height: 1.45; padding-left: 2px; }

        .cs-fml-desc b { color: #7a8aaa; }

        .cs-fml {

            font-size: 11px;

            font-family: 'Space Mono', monospace;

            color: #c5cfe0;

            background: var(--surface);

            padding: 7px 10px;

            border-radius: 8px;

            letter-spacing: -0.3px;

            word-break: keep-all;

            line-height: 1.5;

            border-left: 2px solid var(--border2);

        }

        .cs-fml b { color: var(--sub); }

        .cs-fml strong { font-size: 12.5px; font-family: 'Noto Sans KR', sans-serif; margin-left: 4px; }

        .cs-sub-row {

            font-size: 10.5px;

            font-family: 'Space Mono', monospace;

            color: #8899aa;

            display: flex; align-items: center; flex-wrap: wrap; gap: 4px;

            margin-top: 3px;

            background: var(--surface);

            padding: 5px 10px;

            border-radius: 8px;

            letter-spacing: -0.3px;

            line-height: 1.45;

            border-left: 2px solid var(--border);

        }

        .cs-sub-row strong { font-size: 11.5px; font-family: 'Noto Sans KR', sans-serif; margin-left: auto; color: var(--txt); }



        .lbl-mem { color: var(--blue);   font-weight: 700; font-family: 'Noto Sans KR', sans-serif; width: 45px; }

        .lbl-com { color: var(--yellow); font-weight: 700; font-family: 'Noto Sans KR', sans-serif; width: 45px; }

        .lbl-fnd { color: var(--pink);   font-weight: 700; font-family: 'Noto Sans KR', sans-serif; width: 45px; }



        /* ── Package Card (통합) ── */

        .pkg-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 22px; }

        .pkg-card {

            background: var(--panel);

            border: 1px solid var(--border);

            border-radius: 14px;

            padding: 12px 10px;

            position: relative; overflow: hidden;

        }

        .pkg-card.mem { border-top: 2px solid var(--blue); }

        .pkg-card.com { border-top: 2px solid var(--yellow); }

        .pkg-card.fnd { border-top: 2px solid var(--pink); }

        .pkg-card.lsi { border-top: 2px solid var(--purple); }

        .pkg-title {

            font-size: 12px; font-weight: 700; text-align: center;

            letter-spacing: .5px; margin-bottom: 12px;

            padding-bottom: 10px; border-bottom: 1px solid var(--border);

        }

        .pkg-section { margin-bottom: 10px; }

        .pkg-sec-hdr {

            display: flex; align-items: center; gap: 6px;

            font-size: 9.5px; font-weight: 700;

            color: var(--sub); letter-spacing: .8px; text-transform: uppercase;

            margin-bottom: 6px;

            white-space: nowrap;

        }

        .pkg-sec-hdr .tag {

            font-size: 9px; padding: 1px 5px; border-radius: 4px;

            font-weight: 700; letter-spacing: .3px;

        }

        .pkg-sec-hdr .tag.opi1 { background: rgba(0,229,160,.12); color: var(--green); border: 1px solid rgba(0,229,160,.25); }

        .pkg-sec-hdr .tag.opi2 { background: rgba(0,212,255,.12); color: var(--cyan); border: 1px solid rgba(0,212,255,.3); }

        .pkg-row {

            display: flex; justify-content: space-between; align-items: baseline;

            font-size: 9.5px; padding: 1.5px 0;

            gap: 4px;

        }

        .pkg-row .pr-label { color: var(--sub); white-space: nowrap; }

        .pkg-row .pr-val { font-family: 'Space Mono', monospace; color: #bcc5d4; font-size: 10px; white-space: nowrap; }

        .pkg-row.tax .pr-val { color: var(--sub); }

        .pkg-row.post {

            padding: 4px 7px;

            margin-top: 4px;

            border-radius: 7px;

            background: rgba(255,255,255,.02);

            gap: 2px;

        }

        .pkg-row.post .pr-label { color: #ccc; font-weight: 700; font-size: 9.5px; flex-shrink: 0; }

        .pkg-row.post .pr-val { font-weight: 700; font-size: 11.5px; text-align: right; }

        .pkg-row.post.opi1 { background: rgba(0,229,160,.06); }

        .pkg-row.post.opi2 { background: rgba(0,212,255,.06); }

        .pkg-row.post.opi1 .pr-val { color: var(--green); }

        .pkg-row.post.opi2 .pr-val { color: var(--cyan); }

        .pkg-shares {

            background: rgba(77,158,255,.06);

            border: 1px solid rgba(77,158,255,.14);

            border-radius: 8px;

            padding: 6px 8px;

            margin-top: 6px;

            text-align: center;

        }

        .pkg-shares-num { font-size: 12.5px; font-weight: 700; color: var(--cyan); font-family: 'Space Mono', monospace; }

        .pkg-shares-sub { font-size: 8.5px; color: var(--sub); margin-top: 1px; font-family: 'Space Mono', monospace; }

        .pkg-split { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.05); }

        .pkg-sp { background: var(--surface); border-radius: 5px; padding: 4px 2px; text-align: center; }

        .pkg-sp.now { border: 1px solid rgba(77,158,255,.2); }

        .pkg-sp-t { font-size: 8px; color: var(--sub); white-space: nowrap; }

        .pkg-sp-s { font-size: 10px; font-weight: 700; font-family: 'Space Mono', monospace; color: #ccc; margin: 1px 0; white-space: nowrap; }

        .pkg-sp.now .pkg-sp-s { color: var(--blue); }

        .pkg-sp-v { font-size: 8px; color: var(--mute); font-family: 'Space Mono', monospace; white-space: nowrap; }



        .pkg-divider {

            height: 1px;

            background: linear-gradient(90deg, transparent, var(--border2), transparent);

            margin: 10px 0;

        }

        .pkg-total {

            background: linear-gradient(135deg, rgba(77,158,255,.05), rgba(0,229,160,.04));

            border: 1px solid rgba(77,158,255,.18);

            border-radius: 12px;

            padding: 10px 10px 8px;

            position: relative;

        }

        .pkg-total-hdr {

            font-size: 9px; font-weight: 700;

            color: var(--sub); letter-spacing: 1.2px; text-transform: uppercase;

            text-align: center; margin-bottom: 8px;

        }

        .pkg-compose {

            display: flex; align-items: center; justify-content: center;

            gap: 4px;

            margin-bottom: 8px;

        }

        .pkg-compose-item {

            flex: 1;

            text-align: center;

        }

        .pc-tag {

            display: inline-block;

            font-size: 8.5px; font-weight: 700;

            padding: 1px 6px; border-radius: 100px;

            border: 1px solid;

            letter-spacing: .5px;

            margin-bottom: 3px;

        }

        .pc-val {

            font-size: 11.5px; font-weight: 700;

            font-family: 'Space Mono', monospace;

            letter-spacing: -.3px;

            line-height: 1.2;

        }

        .pkg-compose-plus {

            font-size: 12px; color: var(--mute);

            font-weight: 700;

            padding: 0 1px;

            margin-top: 14px;

        }

        .pkg-total-sum {

            display: flex; justify-content: center; align-items: baseline;

            padding: 5px 0 4px;

            border-top: 1px dashed rgba(77,158,255,.2);

        }

        .pts-val {

            font-size: 12.5px; font-weight: 700; color: var(--txt);

            font-family: 'Space Mono', monospace;

            letter-spacing: -.5px;

        }

        .pkg-total-pre {

            text-align: center;

            font-size: 9px; color: var(--mute);

            padding-top: 5px;

            border-top: 1px dashed rgba(255,255,255,.05);

        }

        .pkg-total-pre span {

            font-family: 'Space Mono', monospace;

            color: var(--sub);

            margin-left: 3px;

        }



        /* 내년 4월 건보 정산 박스 */

        .pkg-future {

            margin-top: 10px;

            padding: 8px 8px 7px;

            background: rgba(245,200,66,.05);

            border: 1px dashed rgba(245,200,66,.25);

            border-radius: 10px;

            text-align: center;

        }

        .pkg-deduct { text-align: left; }
        .pkg-deduct > summary {
            list-style: none; cursor: pointer;
            display: flex; justify-content: space-between; align-items: center; gap: 4px;
            font-size: 9px; font-weight: 700; color: var(--yellow); letter-spacing: 0;
        }
        .pkg-deduct .pd-sum-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
        .pkg-deduct .pd-sum-lbl em { font-style: normal; font-weight: 400; font-size: 7.5px; opacity: .65; }
        .pkg-deduct > summary::-webkit-details-marker { display: none; }
        .pkg-deduct > summary::after { content: '▾'; font-size: 8px; opacity: .6; margin-left: 4px; }
        .pkg-deduct[open] > summary::after { content: '▴'; }
        .pkg-deduct .pd-sum-val { font-family: 'Space Mono', monospace; white-space: nowrap; flex-shrink: 0; }
        .pkg-deduct .pd-body { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
        .pkg-deduct .pd-row {
            display: flex; justify-content: space-between; gap: 6px;
            font-size: 9px; color: var(--sub); font-family: 'Space Mono', monospace;
            white-space: nowrap;
        }
        .pkg-deduct .pd-row > span:first-child { overflow: hidden; text-overflow: ellipsis; }
        .pkg-deduct .pd-row > span:last-child { flex-shrink: 0; }
        .pkg-deduct .pd-row em { font-style: normal; color: var(--green); font-size: 7.5px; }
        .pkg-deduct .pd-net {
            border-top: 1px dashed var(--border); margin-top: 2px; padding-top: 3px;
            color: var(--txt); font-weight: 700;
        }
        .pkg-deduct .pd-later { opacity: .65; }
        .pkg-deduct .pd-foot { font-size: 7.5px; color: var(--mute); margin-top: 4px; line-height: 1.3; }
        .pkg-future .pf-hdr {

            font-size: 8.5px; font-weight: 700;

            color: var(--yellow); letter-spacing: .3px;

            margin-bottom: 4px;

        }

        .pkg-future .pf-val {

            font-size: 12px; font-weight: 700;

            font-family: 'Space Mono', monospace;

            color: var(--yellow);

            letter-spacing: -.3px;

            line-height: 1;

            margin-bottom: 3px;

        }

        .pkg-future .pf-month {

            font-size: 8.5px;

            font-family: 'Space Mono', monospace;

            color: var(--yellow);

            opacity: .75;

            margin-bottom: 4px;

        }

        .pkg-future .pf-note {

            font-size: 7.5px; color: var(--mute);

            line-height: 1.3;

        }



        @media (max-width: 560px) {

            .pkg-grid { grid-template-columns: repeat(2,1fr); gap: 5px; }

            .pkg-card { padding: 9px 5px; }

            .pkg-title { font-size: 10.5px; padding-bottom: 8px; margin-bottom: 9px; }

            .pkg-sec-hdr { font-size: 8.5px; gap: 4px; margin-bottom: 5px; }

            .pkg-sec-hdr .tag { font-size: 7.5px; padding: 1px 4px; letter-spacing: 0; }

            .pkg-row { font-size: 9px; gap: 2px; padding: 1.5px 0; }

            .pkg-row .pr-label { letter-spacing: -.4px; }

            .pkg-row .pr-val { font-size: 9.5px; letter-spacing: -.6px; }

            .pkg-row.post { padding: 4px 5px; margin-top: 3px; }

            .pkg-row.post .pr-label { font-size: 9.5px; }

            .pkg-row.post .pr-val { font-size: 11px; letter-spacing: -.6px; }

            .pkg-shares-num { font-size: 12px; }

            .pkg-shares-sub { font-size: 8px; }

            .pkg-split { gap: 2px; margin-top: 4px; padding-top: 4px; }

            .pkg-sp { padding: 3px 1px; border-radius: 4px; }

            .pkg-sp-t { font-size: 7px; letter-spacing: -.3px; }

            .pkg-sp-s { font-size: 9.5px; letter-spacing: -.5px; }

            .pkg-sp-v { font-size: 7.5px; letter-spacing: -.5px; }

            .pkg-total { padding: 7px 5px 5px; }

            .pkg-total-hdr { font-size: 7.5px; margin-bottom: 5px; letter-spacing: 0; }

            .pkg-compose { gap: 2px; margin-bottom: 5px; }

            .pc-tag { font-size: 7.5px; padding: 1px 5px; margin-bottom: 2px; }

            .pc-val { font-size: 10px; letter-spacing: -.6px; }

            .pkg-compose-plus { font-size: 11px; margin-top: 11px; }

            .pkg-total-sum { padding: 4px 0 4px; }

            .pts-val { font-size: 11.5px; letter-spacing: -.6px; }

            .pkg-total-pre { font-size: 7.5px; padding-top: 3px; }

            .pkg-total-pre span { font-size: 8px; }

            .pkg-divider { margin: 7px 0; }

        }



        /* ── Comment Section ── */

        .cmt-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; max-height: none; overflow: visible; scrollbar-width: none; }
        .cmt-list::-webkit-scrollbar { display: none; }

        .cmt-empty { text-align: center; color: var(--sub); padding: 20px 0; font-size: 12px; }

        .cmt-loading { text-align: center; color: var(--sub); font-size: 12px; padding: 20px 0; }

        .cmt-item {

            display: flex; gap: 8px; align-items: flex-start;

            background: var(--surface); border: 1px solid var(--border);

            border-radius: 8px; padding: 7px 10px;

        }

        /* 대댓글 스타일 */

        .cmt-item.reply {

            margin-left: 16px;

            background: rgba(77,158,255,.03);

            border-color: rgba(77,158,255,.12);

            border-radius: 7px;

            padding: 6px 9px;

        }

        .cmt-reply-tag {

            font-size: 9.5px; color: var(--blue);

            background: rgba(77,158,255,.1);

            border-radius: 4px; padding: 1px 5px;

            margin-right: 2px; font-weight: 700;

        }

        .cmt-dot {

            width: 24px; height: 24px; border-radius: 7px;

            background: rgba(77,158,255,.1); border: 1px solid rgba(77,158,255,.2);

            display: flex; align-items: center; justify-content: center;

            font-size: 10px; color: var(--blue); font-weight: 700;

            flex-shrink: 0;

        }

        .cmt-item.reply .cmt-dot {

            width: 19px; height: 19px; border-radius: 5px; font-size: 8px;

        }

        .cmt-main { flex: 1; min-width: 0; }

        .cmt-meta { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; flex-wrap: wrap; }

        .cmt-name { font-size: 12px; font-weight: 700; color: var(--blue); }

        .cmt-time { font-size: 10px; color: var(--sub); }

        .cmt-del { background: none; border: none; color: rgba(255,77,109,.35); font-size: 10px; cursor: pointer; padding: 0; margin-left: auto; transition: color .15s; }

        .cmt-del:hover { color: var(--red); }

        .cmt-reply-btn { background: none; border: none; color: var(--sub); font-size: 10px; cursor: pointer; padding: 0 4px; transition: color .15s; letter-spacing: .2px; }

        .cmt-reply-btn:hover { color: var(--blue); }

        .cmt-text { font-size: 12px; color: #bcc5d4; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }



        /* 인라인 답글 폼 */

        .reply-form {

            margin-left: 20px; margin-top: 2px;

            background: rgba(77,158,255,.04);

            border: 1px dashed rgba(77,158,255,.2);

            border-radius: 9px; padding: 9px;

            display: flex; flex-direction: column; gap: 6px;

        }

        .reply-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

        .reply-form input, .reply-form textarea {

            background: var(--surface); border: 1px solid var(--border2);

            border-radius: 7px; color: var(--txt); font-size: 11px;

            padding: 7px 9px; outline: none; width: 100%; box-sizing: border-box;

            font-family: 'Noto Sans KR', sans-serif; transition: border-color .15s;

        }

        .reply-form input:focus, .reply-form textarea:focus { border-color: rgba(77,158,255,.4); }

        .reply-form textarea { resize: none; height: 52px; }

        .reply-form-btns { display: flex; gap: 6px; justify-content: flex-end; }

        .reply-cancel-btn {

            background: none; border: 1px solid var(--border2);

            color: var(--sub); font-size: 11px; border-radius: 7px;

            padding: 5px 12px; cursor: pointer;

        }

        .reply-submit-btn {

            background: rgba(77,158,255,.1); border: 1px solid rgba(77,158,255,.3);

            color: var(--blue); font-size: 11px; font-weight: 700; border-radius: 7px;

            padding: 5px 14px; cursor: pointer; transition: background .15s;

        }

        .reply-submit-btn:hover { background: rgba(77,158,255,.2); }





        /* 대댓글 토글 */

        .cmt-reply-row { padding: 1px 0 1px 32px; }

        .cmt-reply-toggle {

            background: none; border: none; color: var(--sub); font-size: 10px;

            cursor: pointer; padding: 2px 7px; border-radius: 4px;

            transition: color .12s, background .12s; letter-spacing: .2px;

        }

        .cmt-reply-toggle:hover { color: var(--blue); background: rgba(77,158,255,.07); }
        .cmt-reply-toggle.open { color: var(--blue); }
        .cmt-new-badge {
            display: inline-flex; align-items: center; justify-content: center;
            margin-left: 5px; padding: 1px 5px;
            border-radius: 999px;
            background: rgba(255,77,109,.14);
            border: 1px solid rgba(255,77,109,.32);
            color: var(--red);
            font-size: 8.5px; font-weight: 800;
            line-height: 1.2;
        }
        .cmt-replies-block { display: flex; flex-direction: column; gap: 3px; padding-left: 2px; }
        .cmt-form { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }

        .cmt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

        .cmt-input {

            width: 100%; background: var(--surface);

            border: 1px solid var(--border2); border-radius: 9px;

            color: var(--txt); padding: 9px 11px; font-size: 12px;

            font-family: 'Noto Sans KR', inherit; outline: none; transition: border-color .15s;

        }

        .cmt-input:focus { border-color: rgba(77,158,255,.4); }

        .cmt-textarea {

            width: 100%; background: var(--surface);

            border: 1px solid var(--border2); border-radius: 9px;

            color: var(--txt); padding: 9px 11px; font-size: 12px;

            font-family: 'Noto Sans KR', inherit; outline: none; resize: none; height: 60px; transition: border-color .15s;

        }

        .cmt-textarea:focus { border-color: rgba(77,158,255,.4); }

        .cmt-submit {

            padding: 10px;

            background: rgba(77,158,255,.1);

            border: 1px solid rgba(77,158,255,.25);

            border-radius: 9px;

            color: var(--blue);

            font-weight: 700; font-size: 12px;

            cursor: pointer; transition: all .15s;

            letter-spacing: .5px;

        }

        .cmt-submit:hover { background: rgba(77,158,255,.18); }

        .cmt-submit:disabled { opacity: .3; cursor: not-allowed; }



        .cmt-pages { display: flex; justify-content: center; gap: 4px; margin: 8px 0 12px; }

        .pg-btn {

            padding: 4px 10px;

            background: var(--surface); border: 1px solid var(--border2);

            border-radius: 6px; color: var(--sub); font-size: 11px; cursor: pointer;

            transition: all .12s;

        }

        .pg-btn.active { background: rgba(77,158,255,.15); border-color: rgba(77,158,255,.35); color: var(--blue); font-weight: 700; }

        .pg-btn:disabled { opacity: .25; cursor: not-allowed; }



        /* ── Delete Modal ── */

        .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }

        .modal-overlay.show { display: flex; }

        .modal-box {

            background: var(--panel2);

            border: 1px solid var(--border2);

            border-radius: 16px;

            padding: 24px 20px 20px;

            width: 88%; max-width: 300px;

            text-align: center;

        }

        .modal-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }

        .modal-desc { font-size: 11.5px; color: var(--sub); margin-bottom: 14px; line-height: 1.5; }

        .modal-input {

            width: 100%; background: var(--surface);

            border: 1px solid var(--border2); border-radius: 9px;

            color: var(--txt); padding: 9px 12px; font-size: 13px;

            font-family: inherit; outline: none; margin-bottom: 12px; text-align: center;

        }

        .modal-input:focus { border-color: rgba(77,158,255,.4); }

        .modal-btns { display: flex; gap: 8px; }

        .modal-btn { flex: 1; padding: 9px; border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid; transition: all .12s; }

        .modal-btn.cancel { background: rgba(255,255,255,.04); border-color: var(--border2); color: var(--sub); }

        .modal-btn.confirm { background: rgba(255,77,109,.1); border-color: rgba(255,77,109,.3); color: var(--red); }

        .modal-btn.cancel:hover { background: rgba(255,255,255,.07); }

        .modal-btn.confirm:hover { background: rgba(255,77,109,.18); }



        /* ── Responsive ── */

        @media (max-width: 560px) {

            body { padding: 12px 10px 40px; }

            .hdr { padding: 20px 0 20px; }

            .opi-card { padding: 12px 11px 10px; }

            .opi-hdr { font-size: 10px; margin-bottom: 9px; padding-bottom: 7px; }

            .opi-badge { font-size: 8.5px; padding: 1px 6px; }

            .opi-grid { gap: 4px; }

            .opi-stat { padding: 6px 4px 5px; border-radius: 8px; }

            .opi-stat .lbl { font-size: 8.5px; margin-bottom: 3px; letter-spacing: -.2px; }

            .opi-stat .val { font-size: 11px; letter-spacing: -.5px; }

            .res-grid { grid-template-columns: repeat(3,1fr); gap: 6px; }

            .tot-grid { grid-template-columns: repeat(3,1fr); gap: 6px; }

            .res-card { padding: 8px 6px; }

            .res-title { font-size: 9.5px; }

            .dr { font-size: 9.5px; }

            .stk-shares { font-size: 12px; }

            .stk-val { font-size: 8px; }

            .sp .sp-t { font-size: 7px; }

            .sp .sp-s { font-size: 9px; }

            .sp .sp-v { font-size: 7px; }

            .tot-card { padding: 8px 6px; }

            .tot-row .tr-val { font-size: 10px; }

            .tot-row.sum .tr-val { font-size: 11px; }

        }

        @media (max-width: 400px) {

            .dept-op-grid { grid-template-columns: 1fr; }

            .g3 { grid-template-columns: 1fr 1fr; }

        }



        /* ── 라이트 모드 ── */
        :root[data-theme="light"] {
            --bg:      #e6ebf3;
            --surface: #f4f7fb;
            --panel:   #edf2f8;
            --panel2:  #e2e9f3;
            --border:  #b8c4d8;
            --border2: #94a7c2;
            --blue:    #176fd6;
            --cyan:    #007f9c;
            --green:   #008768;
            --yellow:  #b97700;
            --pink:    #c43e78;
            --purple:  #6f55d8;
            --red:     #c93650;
            --orange:  #c45f00;
            --txt:  #101827;
            --sub:  #33425c;
            --mute: #68758d;
            --glow-blue:   0 0 14px rgba(23,111,214,.08);
            --glow-green:  0 0 14px rgba(0,135,104,.08);
            --glow-yellow: 0 0 14px rgba(185,119,0,.07);
            --glow-pink:   0 0 14px rgba(196,62,120,.08);
        }
        :root[data-theme="light"] body::before {
            background-image:
                linear-gradient(rgba(23,111,214,.055) 1px, transparent 1px),
                linear-gradient(90deg, rgba(23,111,214,.055) 1px, transparent 1px);
        }
        /* 라이트 모드 전용 오버라이드 */
        :root[data-theme="light"] .hdr h1 {
            background: linear-gradient(135deg, #0f172a 30%, var(--blue) 100%);
            -webkit-background-clip: text; background-clip: text;
        }
        :root[data-theme="light"] .card,
        :root[data-theme="light"] .pkg-card,
        :root[data-theme="light"] .opi-card,
        :root[data-theme="light"] .dept-op-card,
        :root[data-theme="light"] .cb {
            box-shadow: 0 10px 28px rgba(30,45,70,.08);
        }
        :root[data-theme="light"] .accum-table td { color: #24344f; }
        :root[data-theme="light"] .accum-table td:first-child { color: var(--sub); }
        :root[data-theme="light"] .accum-table .ar-sum td { color: var(--txt); }
        :root[data-theme="light"] .cs-fml,
        :root[data-theme="light"] .cs-fml-desc { color: #40516c; }
        :root[data-theme="light"] .con-btn-sub { color: #53647e; }
        :root[data-theme="light"] .accum-note-txt { color: #566781; }
        :root[data-theme="light"] .rule-box { color: #394960; background: rgba(23,111,214,.06); border-color: rgba(23,111,214,.22); }
        :root[data-theme="light"] .pkg-pre-lbl,
        :root[data-theme="light"] .pr-label { color: var(--sub); }
        :root[data-theme="light"] .tax-row .tax-note,
        :root[data-theme="light"] .accum-grow-note { color: #5c6d86; }
        :root[data-theme="light"] input,
        :root[data-theme="light"] textarea,
        :root[data-theme="light"] select,
        :root[data-theme="light"] .cmt-input,
        :root[data-theme="light"] .cmt-textarea {
            background: #f8fafc !important;
            color: var(--txt) !important;
            border-color: var(--border2) !important;
        }
        :root[data-theme="light"] input::placeholder,
        :root[data-theme="light"] textarea::placeholder { color: #7b879b; }
        :root[data-theme="light"] .cmt-item {
            background: rgba(255,255,255,.42);
            border-color: rgba(148,167,194,.62);
        }
        :root[data-theme="light"] .cmt-name,
        :root[data-theme="light"] .cmt-text,
        :root[data-theme="light"] .pkg-title,
        :root[data-theme="light"] .pkg-row .pr-val { color: var(--txt); }
        :root[data-theme="light"] .cmt-time,
        :root[data-theme="light"] .cmt-del { color: #62738d; }
        :root[data-theme="light"] .cmt-submit {
            background: rgba(23,111,214,.11);
            border-color: rgba(23,111,214,.36);
            color: var(--blue);
        }
        :root[data-theme="light"] #chatFab {
            background: rgba(23,111,214,.14);
            border-color: rgba(23,111,214,.38);
            box-shadow: 0 10px 28px rgba(30,45,70,.18);
        }
        :root[data-theme="light"] #chatPopup {
            background: #edf2f8;
            border-color: #94a7c2;
            box-shadow: 0 18px 44px rgba(30,45,70,.22);
        }
        :root[data-theme="light"] #chatPopupHdr,
        :root[data-theme="light"] #chatInputArea {
            background: #e4ebf5;
            border-color: #b8c4d8;
        }
        :root[data-theme="light"] .cp-bubble {
            background: #f8fafc;
            border-color: #b8c4d8;
            color: var(--txt);
        }
        :root[data-theme="light"] .cp-time,
        :root[data-theme="light"] .cp-empty,
        :root[data-theme="light"] .cp-loading { color: var(--mute); }
        :root[data-theme="light"] .modal-box {
            background: var(--panel);
            color: var(--txt);
        }
        /* prefers-color-scheme 자동감지 없음 — 다크 기본, 버튼으로 전환 */


        /* ── 사업부 선택 버튼 ── */

        .accum-dept-btn {

            flex:1; padding:5px 4px; border-radius:8px; cursor:pointer;

            text-align:center; font-size:10px; font-weight:700;

            background:var(--surface); border:1px solid var(--border2);

            color:var(--sub); transition:all .12s;

        }

        .accum-dept-btn.active {

            background:rgba(245,200,66,.24); border-color:rgba(245,200,66,.82);

            color:var(--yellow);
            box-shadow:0 0 0 1px rgba(245,200,66,.22) inset, 0 0 14px rgba(245,200,66,.08);

        }

        .accum-dept-btn:hover { background:rgba(245,200,66,.06); border-color:rgba(245,200,66,.3); color:var(--yellow); }



        /* ── 연도 선택 소형 버튼 ── */

        .con-yr-btn {

            padding:3px 8px; border-radius:6px; cursor:pointer;

            font-size:9.5px; font-weight:700; letter-spacing:.2px;

            background:var(--surface); border:1px solid var(--border2);

            color:var(--sub); transition:all .12s; white-space:nowrap;

        }

        .con-yr-btn.active { background:rgba(245,200,66,.24); border-color:rgba(245,200,66,.82); color:var(--yellow); box-shadow:0 0 0 1px rgba(245,200,66,.22) inset, 0 0 14px rgba(245,200,66,.08); }
        .con-yr-btn.has-custom:not(.active) { border-color:rgba(245,200,66,.34); color:var(--yellow); }
        .con-yr-btn.active.scene-bull { background:rgba(0,229,160,.24); border-color:rgba(0,229,160,.82); color:var(--green); box-shadow:0 0 0 1px rgba(0,229,160,.22) inset, 0 0 14px rgba(0,229,160,.08); }
        .con-yr-btn.active.scene-mid  { background:rgba(77,158,255,.28); border-color:rgba(77,158,255,.86); color:var(--blue); box-shadow:0 0 0 1px rgba(77,158,255,.24) inset, 0 0 14px rgba(77,158,255,.10); }
        .con-yr-btn.active.scene-bear { background:rgba(255,77,109,.24); border-color:rgba(255,77,109,.82); color:var(--red); box-shadow:0 0 0 1px rgba(255,77,109,.22) inset, 0 0 14px rgba(255,77,109,.08); }
        .con-yr-btn.active.scene-manual { background:rgba(245,200,66,.28); border-color:rgba(245,200,66,.88); color:var(--yellow); box-shadow:0 0 0 1px rgba(245,200,66,.24) inset, 0 0 14px rgba(245,200,66,.10); }

        .con-yr-btn:hover  { border-color:rgba(245,200,66,.3); color:var(--yellow); }



        /* ── 시장 컨센서스 버튼 ── */

        .con-scene-row { display:flex; gap:5px; margin-bottom:8px; }

        .con-btn {

            flex:1; padding:7px 4px 6px;

            border-radius:8px; cursor:pointer; text-align:center;

            font-size:10.5px; font-weight:700; letter-spacing:.2px;

            background:var(--surface); border:1px solid var(--border2);

            color:var(--sub); transition:all .12s; line-height:1;

        }

        .con-btn.bull { color:var(--green); border-color:rgba(0,229,160,.2); }

        .con-btn.mid  { color:var(--blue);  border-color:rgba(77,158,255,.2); }

        .con-btn.bear { color:var(--red);   border-color:rgba(255,77,109,.2); }

        .con-btn.bull:hover,.con-btn.bull.active { background:rgba(0,229,160,.24); border-color:rgba(0,229,160,.82); box-shadow:0 0 0 1px rgba(0,229,160,.22) inset, 0 0 14px rgba(0,229,160,.08); }

        .con-btn.mid:hover, .con-btn.mid.active  { background:rgba(77,158,255,.28); border-color:rgba(77,158,255,.86); box-shadow:0 0 0 1px rgba(77,158,255,.24) inset, 0 0 14px rgba(77,158,255,.10); }

        .con-btn.bear:hover,.con-btn.bear.active { background:rgba(255,77,109,.24); border-color:rgba(255,77,109,.82); box-shadow:0 0 0 1px rgba(255,77,109,.22) inset, 0 0 14px rgba(255,77,109,.08); }

        .con-btn-sub { font-size:8.5px; color:var(--mute); display:block; margin-top:3px; font-weight:400; }



        /* ── 세율 직접입력 ── */

        .tax-row {

            display:flex; align-items:center; gap:8px; flex-wrap:wrap;

            margin-top:6px; padding:7px 10px;

            background:var(--surface); border:1px solid var(--border2);

            border-radius:9px;

        }

        .tax-row-lbl { font-size:9.5px; color:var(--sub); font-weight:700; flex-shrink:0; white-space:nowrap; }

        .tax-row input {

            width:62px; background:transparent; border:none;

            color:var(--txt); font-size:13px; font-weight:700;

            font-family:'Space Mono',monospace;

            text-align:right; outline:none;

        }

        .tax-row input:focus { color:var(--blue); }

        .tax-row .tax-unit { font-size:10px; color:var(--mute); }

        .tax-row .tax-auto-tag {

            font-size:8.5px; color:var(--green); font-weight:700;

            background:rgba(0,229,160,.08); border:1px solid rgba(0,229,160,.2);

            border-radius:4px; padding:1px 6px; white-space:nowrap; margin-left:2px;

        }

        .tax-row .tax-note { font-size:9px; color:var(--mute); margin-left:auto; }



        /* ── 3개년 누적 카드 ── */

        .accum-grow-row {

            display:flex; align-items:center; gap:8px; flex-wrap:wrap;

            margin-bottom:7px; font-size:10px; color:var(--sub);

        }

        .accum-grow-row label { font-weight:700; flex-shrink:0; }

        .accum-grow-wrap { position:relative; }

        .accum-grow-wrap input {

            width:70px; background:var(--surface); border:1px solid var(--border2);

            border-radius:7px; color:var(--txt); padding:5px 22px 5px 9px;

            font-size:12px; font-weight:700; font-family:'Space Mono',monospace;

            outline:none; text-align:right; transition:border-color .15s;

        }

        .accum-grow-wrap input:focus { border-color:rgba(77,158,255,.5); }

        .accum-grow-unit {

            position:absolute; right:8px; top:50%; transform:translateY(-50%);

            font-size:9.5px; color:var(--mute); pointer-events:none;

        }

        .accum-grow-note { font-size:9.5px; color:var(--mute); flex:1; line-height:1.4; }

        .accum-sal-in {
            width:58px; background:var(--surface); border:1px dashed var(--border2);
            border-radius:6px; color:var(--blue); padding:3px 5px;
            font-size:10px; font-weight:700; font-family:'Space Mono',monospace;
            text-align:right; outline:none;
        }
        .accum-sal-in:focus { border-color:rgba(77,158,255,.6); border-style:solid; }
        .accum-sal-in::placeholder { color:var(--mute); font-weight:400; }
        .accum-pay-cell {
            display:flex; align-items:center; justify-content:flex-end; gap:3px;
            min-width:112px;
        }
        .accum-type-select {
            width:48px; background:var(--surface); border:1px solid var(--border2);
            border-radius:6px; color:var(--sub); padding:3px 2px;
            font-size:9px; font-weight:700; outline:none;
        }
        .accum-type-select:focus { border-color:rgba(77,158,255,.55); color:var(--blue); }
        .accum-pay-read {
            display:flex; align-items:center; justify-content:flex-end; gap:4px;
            color:var(--blue);
        }
        .accum-pay-badge {
            display:inline-flex; align-items:center; justify-content:center;
            min-width:30px; padding:2px 4px; border-radius:6px;
            background:rgba(77,158,255,.12); border:1px solid rgba(77,158,255,.28);
            color:var(--blue); font-size:8px; font-weight:800; font-family:'Noto Sans KR',sans-serif;
        }
        .accum-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

        .accum-table { width:100%; border-collapse:collapse; font-size:10.5px; }

        .accum-table th, .accum-table td { padding:4px 7px; text-align:right; white-space:nowrap; }

        .accum-table th:first-child, .accum-table td:first-child { text-align:left; }

        .accum-table thead th {

            font-size:8.5px; font-weight:700; color:var(--sub);

            letter-spacing:.4px; text-transform:uppercase;

            padding-bottom:5px; border-bottom:1px solid var(--border);

        }

        .accum-table thead th.ayr { color:var(--yellow); font-size:10px; }

        .accum-table thead th.atot { color:var(--orange); }

        .accum-table tbody tr { border-bottom:1px solid rgba(255,255,255,.03); }

        .accum-table td { font-family:'Space Mono',monospace; color:#bcc5d4; }

        .accum-table td:first-child { font-family:'Noto Sans KR',sans-serif; font-size:10px; color:var(--sub); font-weight:700; }

        .accum-table .ar-salary td:first-child { color:var(--blue); }

        .accum-table .ar-opi    td:first-child { color:var(--green); }

        .accum-table .ar-stock  td:first-child { color:var(--cyan); }

        .accum-table .ar-vest   td:first-child { color:var(--purple); font-size:9.5px; padding-left:14px; }

        .accum-table .ar-sum td {

            font-weight:700; font-size:11px; color:var(--txt);

            border-top:1px solid var(--border); padding-top:6px;

        }

        .accum-table .ar-sum td:first-child { color:var(--yellow); }
        .accum-table .atot-val { color:var(--orange) !important; font-weight:700 !important; }
        .accum-note-txt { font-size:9px; color:var(--mute); margin-top:8px; line-height:1.55; }

        /* ── Public Updates ── */
        .update-card {
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--panel);
            margin-bottom: 10px;
            overflow: hidden;
        }
        .update-card summary {
            cursor: pointer;
            list-style: none;
            padding: 10px 12px;
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
            color: var(--sub);
            font-size: 10.5px; font-weight: 800;
            letter-spacing: .4px;
            user-select: none;
        }
        .update-card summary::-webkit-details-marker { display: none; }
        .update-card summary::after {
            content: '▼';
            color: var(--mute);
            font-size: 9px;
            transition: transform .15s;
        }
        .update-card[open] summary::after { transform: rotate(180deg); }
        .update-body {
            border-top: 1px solid var(--border);
            padding: 10px 12px 11px;
            color: var(--sub);
            font-size: 10px;
            line-height: 1.65;
        }
        .update-body b { color: var(--yellow); }
        .update-body ul { margin: 6px 0 0 14px; padding: 0; }
        .update-body li { margin: 2px 0; }

        /* ── Floating Chat ── */
        #chatFab {
            position: fixed; bottom: 24px; right: 24px; z-index: 900;
            height: 42px; min-width: 86px; padding: 0 14px;
            border-radius: 999px;
            background: rgba(77,158,255,.18); border: 1px solid rgba(77,158,255,.35);
            color: var(--blue); font-size: 13px; font-weight: 800;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,.35);
            transition: transform .15s, background .15s;
            user-select: none;
        }
        #chatFab:hover { transform: translateY(-1px); background: rgba(77,158,255,.28); }
        .chat-fab-badge {

            position: absolute; top: -4px; right: -4px;

            background: #4ade80; color: #0d1117;

            font-size: 9px; font-weight: 700; border-radius: 10px;

            padding: 1px 5px; min-width: 16px; text-align: center;

            display: none;

        }

        .chat-fab-badge.show { display: block; }



        #chatPopup {

            --cp-scale: 1;

            position: fixed; bottom: 88px; right: 24px; z-index: 901;

            width: 320px; height: 420px;

            min-width: 240px; min-height: 260px;

            max-width: 520px; max-height: 680px;

            background: var(--panel2);

            border: 1px solid var(--border2);

            border-radius: 14px;

            box-shadow: 0 8px 40px rgba(0,0,0,.5);

            display: flex; flex-direction: column;

            overflow: hidden;

            resize: none;

            transition: opacity .18s, transform .18s;

            transform-origin: bottom right;

        }
        .cp-rz { position: absolute; z-index: 6; touch-action: none; }
        .cp-rz-t  { top: -4px; left: 10px; right: 10px; height: 9px; cursor: ns-resize; }
        .cp-rz-l  { left: -4px; top: 10px; bottom: 10px; width: 9px; cursor: ew-resize; }
        .cp-rz-tl { top: -4px; left: -4px; width: 18px; height: 18px; cursor: nwse-resize; border-top-left-radius: 14px; }
        .cp-rz-tl::after { content: ''; position: absolute; left: 4px; top: 4px; width: 9px; height: 9px; border-left: 2px solid var(--sub); border-top: 2px solid var(--sub); border-top-left-radius: 3px; opacity: .8; transition: opacity .12s, border-color .12s; }
        .cp-rz-t:hover, .cp-rz-l:hover { background: rgba(77,158,255,.16); border-radius: 4px; }
        .cp-rz-tl:hover::after { opacity: 1; border-color: var(--blue); }

        #chatPopup.hidden { opacity: 0; pointer-events: none; transform: scale(.92); }



        #chatPopupHdr {

            display: flex; align-items: center; gap: 8px;

            padding: 10px 14px 9px;

            border-bottom: 1px solid var(--border);

            background: var(--panel2);

            cursor: move;

            flex-shrink: 0;

            user-select: none;

        }

        #chatPopupHdr .cp-icon { font-size: 16px; }

        #chatPopupHdr .cp-title { font-size: 13px; font-weight: 700; color: var(--txt); flex: 1; }
        #chatPopupHdr .cp-online { font-size: 10px; color: #4ade80; font-weight: 500; }

        #chatPopupHdr .cp-close {

            background: none; border: none; color: var(--sub); font-size: 16px;

            cursor: pointer; padding: 0 2px; line-height: 1;

            transition: color .12s;

        }

        #chatPopupHdr .cp-close:hover { color: var(--txt); }


        #chatMsgList {

            flex: 1; overflow-y: auto; padding: 10px 10px 4px;

            display: flex; flex-direction: column; gap: 6px;

            scroll-behavior: smooth;

        }

        #chatMsgList::-webkit-scrollbar { width: 4px; }

        #chatMsgList::-webkit-scrollbar-track { background: transparent; }

        #chatMsgList::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }



        .cp-msg { display: flex; align-items: flex-start; gap: 7px; }

        .cp-avatar {

            width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;

            background: rgba(77,158,255,.15); color: var(--blue);

            font-size: 10px; font-weight: 700;

            display: flex; align-items: center; justify-content: center;

        }

        .cp-body { flex: 1; min-width: 0; }

        .cp-meta { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }

        .cp-nick { font-size: calc(11px * var(--cp-scale)); font-weight: 700; color: var(--blue); }

        .cp-time { font-size: calc(9px * var(--cp-scale)); color: var(--mute); }

        .cp-bubble {

            background: var(--surface); border: 1px solid var(--border);

            border-radius: 0 9px 9px 9px;

            padding: 5px 9px; font-size: calc(12px * var(--cp-scale)); color: var(--txt);
            line-height: 1.5; word-break: break-word;

            display: inline-block; max-width: 100%;

        }

        .cp-empty { text-align: center; color: var(--sub); padding: 30px 0; font-size: 12px; }

        .cp-loading { text-align: center; color: var(--sub); font-size: 11px; padding: 30px 0; }



        #chatInputArea {

            border-top: 1px solid var(--border);

            padding: 8px 10px; display: flex; gap: 6px;

            align-items: center; flex-shrink: 0;

        }

        #chatNickInput {

            width: 72px; flex-shrink: 0;

            background: var(--surface); border: 1px solid var(--border2);

            border-radius: 7px; color: var(--txt);
            padding: 6px 8px; font-size: 11px; outline: none; box-sizing: border-box;

        }

        #chatNickInput:focus { border-color: rgba(77,158,255,.4); }

        #chatTextInput {

            flex: 1; background: var(--surface); border: 1px solid var(--border2);

            border-radius: 7px; color: var(--txt);
            padding: 6px 8px; font-size: calc(12px * var(--cp-scale)); outline: none; box-sizing: border-box;

        }

        #chatTextInput:focus { border-color: rgba(77,158,255,.4); }

        #chatSendBtn {

            background: rgba(77,158,255,.12); border: 1px solid rgba(77,158,255,.3);

            color: var(--blue); border-radius: 7px;

            padding: 6px 10px; font-size: 11px; font-weight: 700;

            cursor: pointer; transition: background .12s; flex-shrink: 0;

        }

        #chatSendBtn:hover { background: rgba(77,158,255,.22); }

        #chatSendBtn:disabled { opacity: .3; cursor: not-allowed; }



        @media (max-width: 560px) {
            #chatPopup { right: 10px; bottom: 80px; width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
            #chatFab { bottom: 16px; right: 16px; height: 40px; min-width: 80px; padding: 0 12px; }
        }
        @media (max-width: 760px) { .cp-rz { display: none; } }
        /* ── Readability skin: calmer finance-style UI ── */
        :root {
            --bg: #0f131a;
            --surface: #151a23;
            --panel: #191f2a;
            --panel2: #1e2531;
            --border: #2a3444;
            --border2: #38465a;
            --blue: #6aa9ff;
            --cyan: #41b8d5;
            --green: #35c692;
            --yellow: #e6b34a;
            --pink: #df6f9d;
            --purple: #a394f5;
            --red: #f06b7f;
            --orange: #f29a4a;
            --txt: #eef3f9;
            --sub: #a8b4c5;
            --mute: #748197;
        }
        * { letter-spacing: 0 !important; }
        body {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--bg);
            line-height: 1.45;
        }
        body::before {
            background-image:
                linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
        }
        .wrap { max-width: 820px; }
        .hdr { padding: 22px 0 20px; }
        .hdr-chip {
            background: transparent;
            border-color: var(--border2);
            color: var(--sub);
            margin-bottom: 12px;
        }
        .hdr-chip::before { display: none; }
        .hdr h1 {
            font-size: clamp(25px, 4.5vw, 38px);
            letter-spacing: 0 !important;
            background: linear-gradient(135deg, #fff 20%, #91bdff 100%);
            -webkit-background-clip: text;
            background-clip: text;
        }
        .hdr-sub { font-size: 13px; color: var(--sub); }
        .hdr-alert {
            background: rgba(255,255,255,.035);
            border-color: var(--border);
            color: var(--sub);
            max-width: 620px;
        }
        .card,
        .pkg-card,
        .cb,
        .opi-card,
        .dept-op-card,
        .update-card {
            border-radius: 12px;
            border-color: var(--border);
            background: var(--panel);
            box-shadow: none;
        }
        .card::before,
        .pkg-card::before { display: none; }
        .card-hdr {
            color: var(--txt);
            font-size: 13px;
            text-transform: none;
            padding-bottom: 10px;
            border-bottom-color: var(--border);
            margin-bottom: 12px;
        }
        .card-hdr-icon {
            width: 28px;
            height: 28px;
            border-radius: 8px;
        }
        .setup-label,
        .ig label,
        .var-cell label,
        .dept-op-title,
        .pkg-sec-hdr,
        .res-title,
        .tot-row .tr-label {
            color: var(--sub);
            font-size: 11px;
            text-transform: none;
            font-weight: 700;
        }
        .headcount-grid,
        .vars-grid,
        .dept-op-grid,
        .pkg-grid {
            gap: 8px;
        }
        .hc-cell,
        .var-cell,
        .dept-op-card,
        .opi-stat,
        .tax-row,
        .accum-dept-btn,
        .con-btn,
        .con-yr-btn,
        .sel-compact,
        .cond-row select.sel-compact,
        .cmt-input,
        .cmt-textarea,
        .modal-input,
        input,
        select,
        textarea {
            border-radius: 9px !important;
            border-color: var(--border2) !important;
            background: var(--surface) !important;
            color: var(--txt) !important;
        }
        input,
        select,
        textarea,
        .var-in input,
        .hc-input input,
        .ig input {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
            font-size: 13px;
            font-variant-numeric: tabular-nums;
        }
        .var-cell { padding: 9px 10px 8px; }
        .var-in input,
        .hc-input input {
            font-size: 15px;
            font-weight: 800;
        }
        .rule-box {
            background: rgba(106,169,255,.055);
            border-color: rgba(106,169,255,.18);
            color: var(--sub);
            font-size: 12px;
            line-height: 1.7;
        }
        .con-scene-row,
        .con-year-row {
            gap: 8px;
        }
        .con-btn,
        .con-yr-btn,
        .accum-dept-btn {
            font-size: 12px;
            padding: 9px 8px;
            line-height: 1.25;
        }
        .con-btn-sub {
            font-size: 10px;
            color: var(--mute);
            margin-top: 4px;
        }
        .con-yr-btn.active,
        .con-btn.active,
        .accum-dept-btn.active {
            font-weight: 800 !important;
            transform: translateY(-1px);
        }
        .accum-dept-btn.active,
        .con-yr-btn.active.scene-manual {
            background: rgba(245,200,66,.25) !important;
            border-color: rgba(245,200,66,.85) !important;
            color: var(--yellow) !important;
            box-shadow: 0 0 0 1px rgba(245,200,66,.24) inset, 0 0 14px rgba(245,200,66,.08) !important;
        }
        .con-yr-btn.active.scene-bull,
        .con-btn.bull.active {
            background: rgba(0,229,160,.24) !important;
            border-color: rgba(0,229,160,.84) !important;
            color: var(--green) !important;
            box-shadow: 0 0 0 1px rgba(0,229,160,.22) inset, 0 0 14px rgba(0,229,160,.08) !important;
        }
        .con-yr-btn.active.scene-mid,
        .con-btn.mid.active {
            background: rgba(77,158,255,.28) !important;
            border-color: rgba(77,158,255,.88) !important;
            color: var(--blue) !important;
            box-shadow: 0 0 0 1px rgba(77,158,255,.24) inset, 0 0 14px rgba(77,158,255,.10) !important;
        }
        .con-yr-btn.active.scene-bear,
        .con-btn.bear.active {
            background: rgba(255,77,109,.24) !important;
            border-color: rgba(255,77,109,.84) !important;
            color: var(--red) !important;
            box-shadow: 0 0 0 1px rgba(255,77,109,.22) inset, 0 0 14px rgba(255,77,109,.08) !important;
        }
        .sec-heading {
            color: var(--txt);
            font-size: 14px;
            margin: 20px 0 10px;
        }
        .pkg-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .pkg-card {
            padding: 14px 14px 12px;
            border-top-width: 1px;
        }
        .pkg-title {
            font-size: 14px;
            color: var(--txt) !important;
            margin-bottom: 12px;
        }
        .pkg-row {
            font-size: 11.8px;
            padding: 3.5px 0;
            line-height: 1.45;
        }
        .pkg-row .pr-label {
            color: var(--sub);
        }
        .pkg-row .pr-val,
        .pkg-shares-num,
        .pkg-sp-s,
        .accum-table td,
        .tot-row .tr-val,
        .setup-total b,
        .total-chip span,
        .wg-val {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
            font-variant-numeric: tabular-nums;
            color: var(--txt);
        }
        .pkg-row .pr-val {
            font-size: 12.4px;
            font-weight: 650;
        }
        .pkg-row.post {
            padding: 7px 8px;
            margin-top: 6px;
        }
        .pkg-row.post .pr-label {
            font-size: 11.2px;
            color: var(--sub);
        }
        .pkg-row.post .pr-val,
        .pkg-shares-num {
            font-size: 14.5px;
            font-weight: 850;
        }
        .pkg-shares-sub,
        .pkg-sp-t,
        .pkg-sp-v {
            font-size: 10.8px;
            color: var(--sub);
            line-height: 1.35;
        }
        .pkg-sp-s {
            font-size: 12.4px;
            font-weight: 750;
        }
        .pkg-deduct > summary {
            padding: 8px 9px;
            font-size: 12px;
            line-height: 1.35;
            color: var(--txt);
            background: rgba(255,255,255,.035);
            border-radius: 8px;
        }
        .pkg-deduct .pd-sum-lbl em {
            font-size: 10px;
            color: var(--sub);
            opacity: .9;
        }
        .pkg-deduct > summary::after {
            font-size: 10px;
            opacity: .8;
        }
        .pkg-deduct .pd-sum-val {
            color: var(--red);
            font-weight: 800;
            font-size: 12.2px;
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
            font-variant-numeric: tabular-nums;
        }
        .pkg-deduct .pd-body {
            gap: 5px;
            margin-top: 8px;
        }
        .pkg-deduct .pd-row {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
            font-size: 11.4px;
            line-height: 1.45;
            color: var(--sub);
        }
        .pkg-deduct .pd-row > span:last-child {
            color: var(--txt);
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }
        .pkg-deduct .pd-row em {
            font-size: 10px;
            color: var(--green);
            opacity: .95;
        }
        .pkg-deduct .pd-foot {
            font-size: 10.5px;
            line-height: 1.5;
            color: var(--sub);
            margin-top: 6px;
        }
        .pkg-points {
            background: rgba(255,255,255,.035);
            border-color: var(--border);
        }
        .accum-table { font-size: 12px; }
        .accum-table th,
        .accum-table td {
            padding: 7px 8px;
        }
        .accum-table td:first-child {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
            font-size: 11px;
        }
        .accum-table .ar-sum td {
            font-size: 13px;
        }
        .update-card summary {
            font-size: 12px;
            color: var(--txt);
            padding: 12px 14px;
        }
        .update-body {
            font-size: 11.5px;
            color: var(--sub);
        }
        .cmt-list {
            gap: 8px;
        }
        .cmt-item {
            border-radius: 10px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,.025);
            padding: 10px;
        }
        .cmt-name,
        .cmt-text,
        .cp-bubble {
            color: var(--txt);
            font-size: 12.5px;
        }
        .cmt-submit,
        #chatSendBtn {
            border-radius: 9px;
            font-size: 12px;
        }
        .calc-toggle {
            background: var(--panel);
            color: var(--txt);
            font-size: 13px;
            padding: 13px 16px;
        }
        .cs-fml,
        .cs-sub-row {
            background: var(--surface);
            border-left-color: var(--border2);
            color: var(--txt);
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            font-size: 12.5px;
            line-height: 1.65;
        }
        .cs-fml-desc,
        .cs-head {
            color: var(--sub);
            font-size: 12.4px;
            line-height: 1.6;
        }
        .tax-note,
        .tax-auto-tag,
        .accum-grow-note,
        .accum-note-txt,
        .con-btn-sub,
        .update-body,
        .rule-box {
            font-size: 12px;
            line-height: 1.65;
        }
        .main-tabs {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin: -4px 0 14px;
        }
        .main-tab-btn {
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--sub);
            border-radius: 12px;
            padding: 11px 12px;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            transition: border-color .15s, background .15s, color .15s;
        }
        .main-tab-btn.active {
            border-color: rgba(106,169,255,.45);
            background: rgba(106,169,255,.10);
            color: var(--blue);
        }
        .tab-panel.hidden { display: none; }
        .psu-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .psu-grant-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-top: 8px;
        }
        .psu-grant {
            border: 1px solid var(--border);
            background: var(--surface);
            border-radius: 10px;
            padding: 10px;
            color: var(--sub);
            font-size: 12px;
            font-weight: 700;
        }
        .psu-grant b {
            display: block;
            color: var(--txt);
            font-size: 16px;
            margin-top: 3px;
            font-variant-numeric: tabular-nums;
        }
        .psu-result {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            margin-top: 12px;
        }
        .psu-stat {
            border: 1px solid var(--border);
            background: var(--surface);
            border-radius: 10px;
            padding: 11px 10px;
        }
        .psu-stat span {
            display: block;
            color: var(--sub);
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        .psu-stat b {
            color: var(--txt);
            font-size: 18px;
            line-height: 1.35;
            white-space: pre-line;
            font-variant-numeric: tabular-nums;
        }
        .psu-rule-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
            font-size: 12px;
        }
        .psu-rule-table th,
        .psu-rule-table td {
            padding: 7px 8px;
            border-bottom: 1px solid var(--border);
            text-align: right;
            white-space: nowrap;
        }
        .psu-rule-table th:first-child,
        .psu-rule-table td:first-child {
            text-align: left;
        }
        .psu-rule-table .active td {
            color: var(--yellow);
            font-weight: 800;
            background: rgba(230,179,74,.06);
        }
        .psu-table-wrap {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-top: 12px;
        }
        .psu-table-wrap .psu-rule-table {
            margin-top: 0;
            min-width: 620px;
        }
        .psu-split-title {
            color: var(--txt);
            font-size: 13px;
            font-weight: 800;
            margin: 14px 0 6px;
        }
        .psu-note {
            color: var(--sub);
            font-size: 12px;
            line-height: 1.65;
            margin-top: 10px;
        }
        :root[data-theme="light"] {
            --bg: #eef2f7;
            --surface: #ffffff;
            --panel: #f8fafc;
            --panel2: #f2f5f9;
            --border: #d7dfeb;
            --border2: #b9c6d8;
            --txt: #172033;
            --sub: #4e5f78;
            --mute: #7a8799;
        }
        :root[data-theme="light"] .card,
        :root[data-theme="light"] .pkg-card,
        :root[data-theme="light"] .cb,
        :root[data-theme="light"] .update-card {
            box-shadow: 0 10px 30px rgba(23,32,51,.06);
        }
        :root[data-theme="light"] .pkg-deduct > summary {
            background: rgba(23,32,51,.035);
        }
        :root[data-theme="light"] .pkg-deduct .pd-row,
        :root[data-theme="light"] .pkg-deduct .pd-foot,
        :root[data-theme="light"] .pkg-shares-sub,
        :root[data-theme="light"] .pkg-sp-t,
        :root[data-theme="light"] .pkg-sp-v {
            color: #43536a;
        }
        @media (max-width: 560px) {
            .wrap { max-width: 100%; }
            .pkg-grid { grid-template-columns: 1fr; }
            .card { padding: 13px 13px 12px; }
            .hdr h1 { font-size: 25px; }
            .vars-grid { grid-template-columns: repeat(2, 1fr); }
            .cond-row { grid-template-columns: 1fr; }
            .con-year-line {
                display: grid !important;
                grid-template-columns: 1fr repeat(3, minmax(48px, 58px));
                gap: 4px !important;
            }
            .con-year-line > span {
                font-size: 8.5px !important;
                min-width: 0;
            }
            .con-yr-btn {
                padding: 5px 3px;
                font-size: 9px;
            }
            .con-scene-row {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 4px;
            }
            .con-btn {
                padding: 7px 2px 6px;
                font-size: 9.5px;
            }
            .con-btn-sub {
                font-size: 7.5px;
                line-height: 1.25;
            }
            .main-tabs {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 5px;
            }
            .main-tab-btn {
                padding: 9px 4px;
                font-size: 11px;
            }
            .psu-grid,
            .psu-grant-row {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 5px;
            }
            .psu-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 5px;
            }
            .psu-grid .var-cell,
            .psu-grant-row .var-cell,
            .psu-grant {
                padding: 8px 7px;
            }
            .psu-grid .var-cell label,
            .psu-grant-row .var-cell label {
                font-size: 9.5px;
            }
            .psu-grid .var-in input,
            .psu-grant-row .var-in select {
                font-size: 11px;
                padding-top: 7px;
                padding-bottom: 7px;
            }
            .psu-grant {
                font-size: 10px;
                line-height: 1.25;
            }
            .psu-grant b {
                font-size: 13px;
                margin-top: 2px;
            }
            .psu-result {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 4px;
            }
            .psu-stat {
                padding: 7px 4px;
                border-radius: 8px;
            }
            .psu-stat span {
                font-size: 9.5px;
                line-height: 1.2;
                margin-bottom: 3px;
            }
            .psu-stat b {
                font-size: 11px;
                line-height: 1.25;
            }
            .psu-table-wrap {
                margin-left: -4px;
                margin-right: -4px;
                padding-bottom: 4px;
            }
            .psu-rule-table {
                font-size: 11.5px;
            }
            .psu-rule-table th,
            .psu-rule-table td {
                padding: 8px 9px;
            }
            .pkg-card { padding: 14px 13px 12px; }
            .pkg-row { font-size: 11.5px; }
            .pkg-row .pr-val { font-size: 12px; }
            .pkg-row.post .pr-val { font-size: 14px; }
            .pkg-deduct > summary { font-size: 11.5px; }
            .pkg-deduct .pd-row { font-size: 11px; }
            .pkg-deduct .pd-foot { font-size: 10.5px; }
            .cs-fml,
            .cs-sub-row,
            .cs-fml-desc,
            .cs-head {
                font-size: 12px;
            }
        }

        @media (max-width: 560px) {
            .cons-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
            .cons-detail-grid { grid-template-columns:minmax(0,1fr) !important; }
            .cons-source-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
        }
        .news-filter {
            display:inline-flex;align-items:center;height:25px;padding:0 9px;border:1px solid var(--border);
            border-radius:999px;color:var(--sub);font-size:9px;font-weight:800;background:var(--panel2);
        }
        .news-filter.active { color:var(--blue);border-color:rgba(77,158,255,.34);background:rgba(77,158,255,.09); }
        .news-list { display:flex;flex-direction:column; }
        .news-item { display:block;text-decoration:none;padding:10px 2px;border-bottom:1px solid var(--border); }
        .news-item:hover .news-title { color:var(--blue); }
        .news-meta { display:flex;align-items:center;gap:6px;color:var(--mute);font-size:9px;line-height:1.2; }
        .news-tag { display:inline-flex;padding:2px 6px;border-radius:4px;font-size:8px;font-weight:900;color:var(--blue);background:rgba(77,158,255,.1); }
        .news-tag.loss { color:var(--purple);background:rgba(176,112,255,.1); }
        .news-tag.bonus { color:var(--yellow);background:rgba(245,200,66,.1); }
        .news-tag.mobile { color:var(--green);background:rgba(0,229,160,.09); }
        .news-title { margin-top:5px;color:var(--txt);font-size:12px;font-weight:850;line-height:1.42;transition:color .15s; }
        .news-summary { margin-top:3px;color:var(--sub);font-size:10px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
        .news-more summary { display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 0;color:var(--blue);font-size:10px;font-weight:850;cursor:pointer;list-style:none; }
        .news-more summary::-webkit-details-marker { display:none; }
        .news-more-close { display:none; }
        .news-more[open] .news-more-open { display:none; }
        .news-more[open] .news-more-close { display:inline; }
        .news-more[open] .news-caret { transform:rotate(180deg); }
        .news-caret { display:inline-block;transition:transform .15s; }
        .news-more-body .news-item:first-child { border-top:1px solid var(--border); }
        .news-preview-note { margin-top:8px;color:var(--mute);font-size:9px;line-height:1.45; }
        @media (max-width:560px) {
            .news-item { padding:9px 1px; }
            .news-title { font-size:11.5px; }
            .news-summary { font-size:10px; }
        }

/* block 2 <style id="ui-refresh"> */
:root {
    --bg: #0c1017;
    --surface: #121720;
    --panel: #171d27;
    --panel2: #1c2430;
    --border: #293342;
    --border2: #3a485c;
    --blue: #5b9cf6;
    --cyan: #55b7d2;
    --green: #35bd8b;
    --yellow: #d9ab4b;
    --pink: #d8739b;
    --purple: #9f93e8;
    --red: #ed7082;
    --orange: #ee9a50;
    --txt: #f3f6fa;
    --sub: #b2bdcb;
    --mute: #8390a2;
}

html {
    scroll-padding-top: 16px;
}

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    background: var(--bg);
}

body::before {
    opacity: .34;
    background-size: 48px 48px;
}

button,
input,
select,
textarea {
    font-family: inherit !important;
}

.wrap {
    width: min(1040px, calc(100% - 32px));
    max-width: 1040px;
}

.hdr {
    padding: 34px 0 25px;
}

.hdr-chip {
    margin-bottom: 13px;
}

.hdr h1 {
    font-size: clamp(29px, 4vw, 42px);
    line-height: 1.18;
    margin-bottom: 9px;
}

.hdr-sub {
    font-size: 13px;
    font-weight: 500;
}

.hdr-alert {
    max-width: 720px;
    margin-top: 17px;
    padding: 9px 14px;
    font-size: 11.5px;
}

.main-tabs {
    gap: 8px;
    margin: 0 0 18px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(0, 0, 0, .12);
}

.main-tab-btn {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    color: var(--sub);
    box-shadow: none;
}

.main-tab-btn.active {
    border: 0;
    background: var(--panel2);
    color: var(--txt);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

.card,
.pkg-card,
.cb,
.opi-card,
.dept-op-card,
.update-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: none;
}

.section.card,
.card {
    padding: 18px;
}

.card-hdr {
    min-height: 32px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    font-size: 15px;
    font-weight: 800;
}

.card-hdr-icon {
    width: 28px;
    height: 28px;
    background: var(--surface) !important;
    border: 1px solid var(--border);
}

/* Bring personal inputs forward and keep organization assumptions secondary. */
.setup-card {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(420px, 1.2fr);
    gap: 15px 18px;
}

.setup-card > .card-hdr {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.setup-card > .setup-group {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(0, 0, 0, .08);
}

.setup-card > .setup-group:nth-child(2) {
    order: 3;
    grid-column: 1 / -1;
}

.setup-card > .setup-group:nth-child(3) {
    order: 1;
}

.setup-card > .setup-group:nth-child(3) .cond-row {
    grid-template-columns: 1fr;
}

.setup-card > .setup-group:nth-child(4) {
    order: 2;
}

.setup-card > .setup-group:nth-child(4) .vars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-label {
    margin-bottom: 9px;
    font-size: 11.5px;
    color: var(--sub);
}

.headcount-grid,
.vars-grid,
.cond-row {
    gap: 8px;
}

.hc-cell,
.var-cell,
.dept-op-card,
.tax-row {
    border-color: var(--border) !important;
    background: var(--surface) !important;
}

.var-cell {
    min-height: 59px;
    padding: 9px 11px;
}

.var-cell label,
.dept-op-title,
.ig label {
    font-size: 11px;
    color: var(--sub);
}

.var-in input,
.hc-input input,
.ig input {
    font-size: 16px;
    font-weight: 800;
    color: var(--txt);
}

.sel-compact,
.cond-row select.sel-compact {
    min-height: 44px;
    padding: 0 12px;
    font-size: 12.5px;
}

.tax-row {
    min-height: 42px;
    margin-top: 8px;
    padding: 7px 10px;
}

.rule-box {
    margin-bottom: 13px;
    padding: 10px 13px;
    border-style: solid;
    background: rgba(91, 156, 246, .055);
    color: var(--sub);
    font-size: 11.5px;
    line-height: 1.6;
}

.con-year-line {
    margin-bottom: 8px !important;
}

.con-year-line > span {
    font-size: 10.5px !important;
}

.con-yr-btn {
    min-width: 64px;
    min-height: 31px;
    font-size: 11px;
}

.con-scene-row {
    gap: 8px;
    margin-bottom: 12px;
}

.con-btn {
    min-height: 58px;
    padding: 9px 8px;
    font-size: 12px;
}

.con-btn-sub {
    margin-top: 4px;
    font-size: 9.5px;
    color: var(--mute);
}

.con-btn.active,
.con-yr-btn.active,
.accum-dept-btn.active {
    transform: none;
    box-shadow: 0 0 0 2px rgba(91, 156, 246, .18) inset !important;
}

.dept-op-grid {
    gap: 9px;
}

.dept-op-card {
    padding: 11px;
}

.weight-dash {
    margin-top: 12px;
    padding: 9px 11px;
    border-color: var(--border);
    background: rgba(0, 0, 0, .08);
}

.sec-heading {
    margin: 27px 0 11px;
    font-size: 16px;
    color: var(--txt);
}

.result-dept-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.result-dept-btn {
    min-height: 42px;
    font-size: 12px;
}

.pkg-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.pkg-card {
    width: 100%;
    margin: 0;
    padding: 17px;
    border-top: 1px solid var(--border) !important;
}

.pkg-title {
    margin-bottom: 13px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.pkg-row {
    padding: 4px 0;
    font-size: 12px;
}

.pkg-row .pr-val {
    font-size: 13px;
}

.pkg-row.post {
    margin-top: 8px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(91, 156, 246, .07);
}

.pkg-row.post .pr-val,
.pkg-shares-num {
    font-size: 17px;
    color: var(--txt);
}

.pkg-shares-sub,
.pkg-sp-t,
.pkg-sp-v,
.pkg-deduct .pd-foot {
    font-size: 11px;
    color: var(--sub);
}

.pkg-deduct > summary {
    padding: 9px 10px;
    font-size: 12px;
}

.accum-table {
    font-size: 12px;
}

.accum-table th,
.accum-table td {
    padding: 9px 10px;
}

.accum-note-txt,
.accum-grow-note,
.tax-note,
.update-body {
    color: var(--sub);
}

#chatPopup {
    width: 310px;
    border-color: var(--border2) !important;
    background: var(--panel2) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .34) !important;
}

#chatPopupHdr,
#chatInputArea {
    background: var(--panel) !important;
}

#chatFab {
    min-width: 86px;
    height: 42px;
    border-radius: 9px !important;
    background: var(--panel2) !important;
}

@media (min-width: 761px) {
    .wrap {
        width: min(1040px, calc(100% - 32px));
        margin-right: auto;
        margin-left: auto;
    }
}

:root[data-theme="light"] {
    --bg: #f2f5f8;
    --surface: #ffffff;
    --panel: #fbfcfe;
    --panel2: #eef3f8;
    --border: #d9e1eb;
    --border2: #b8c5d5;
    --txt: #152033;
    --sub: #4d5e74;
    --mute: #718096;
    --blue: #176fd6;
    --cyan: #137e99;
    --green: #087f5b;
    --yellow: #9a6800;
    --pink: #b13768;
    --purple: #6552bf;
    --red: #c93851;
    --orange: #b85d12;
}

:root[data-theme="light"] body::before {
    opacity: .25;
}

:root[data-theme="light"] .main-tabs,
:root[data-theme="light"] .setup-card > .setup-group,
:root[data-theme="light"] .weight-dash {
    background: rgba(20, 45, 75, .025);
}

@media (max-width: 760px) {
    .wrap {
        width: min(calc(100% - 22px), 680px);
    }

    .hdr {
        padding: 24px 0 19px;
    }

    .hdr h1 {
        font-size: 27px;
    }

    .section.card,
    .card {
        padding: 14px;
    }

    .setup-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .setup-card > .card-hdr,
    .setup-card > .setup-group:nth-child(2) {
        grid-column: 1;
    }

    .setup-card > .setup-group {
        padding: 12px;
    }

    .headcount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pkg-card {
        width: 100%;
        padding: 12px;
    }

    .pkg-row.post .pr-val,
    .pkg-shares-num {
        font-size: 15px;
    }
}

@media (max-width: 460px) {
    body {
        font-size: 12.5px;
    }

    .wrap {
        width: calc(100% - 16px);
    }

    .hdr h1 {
        font-size: 24px;
    }

    .main-tabs {
        gap: 4px;
    }

    .main-tab-btn {
        min-height: 41px;
        padding: 8px 4px;
        font-size: 12px;
    }

    .result-dept-row {
        gap: 5px;
    }

    .result-dept-btn {
        min-height: 39px;
        padding: 7px 3px;
        font-size: 10.5px;
    }

    .var-cell label {
        white-space: normal;
    }

    .dept-op-grid {
        grid-template-columns: 1fr;
    }

    .dept-op-card {
        display: grid;
        grid-template-columns: 84px 78px 1fr;
        align-items: center;
        gap: 7px;
    }

    .dept-op-title,
    .sign-toggle,
    .dept-op-card .ig {
        margin: 0;
    }

    .pkg-card {
        padding: 10px;
    }

    .pkg-row .pr-label {
        font-size: 10.5px;
    }

    .pkg-row .pr-val {
        font-size: 11.5px;
    }

    #chatPopup {
        width: calc(100vw - 20px) !important;
    }
}

/* block 3 <style id="package-ui"> */
body,
button,
input,
select,
textarea {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-feature-settings: 'tnum' 1;
}

body {
    font-size: 14px;
    line-height: 1.55;
}

.hdr-sub,
.main-tab-btn {
    font-size: 14px;
}

.card-hdr {
    font-size: 16px;
}

.setup-label,
.var-cell label,
.dept-op-title,
.ig label,
.tax-row-lbl,
.weight-dash-title {
    font-size: 12px;
}

.tax-note,
.accum-grow-note,
.accum-note-txt,
.rule-box,
.psu-note,
.update-body {
    font-size: 12px;
}

.con-year-line > span {
    font-size: 11px !important;
}

.con-btn {
    font-size: 12.5px;
}

.con-btn-sub {
    font-size: 10px;
}

.wg-val {
    font-family: inherit !important;
    font-size: 10.5px;
}

.result-dept-row {
    margin-bottom: 12px;
}

.result-dept-btn {
    font-size: 12.5px;
}

.pkg-card {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 12px;
    align-items: start;
    padding: 16px;
}

.pkg-card[hidden] {
    display: none !important;
}

.pkg-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 0 12px;
    text-align: left;
    font-size: 17px;
    font-weight: 800;
}

.share-result-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 34px;
    margin-left: auto;
    padding: 6px 10px;
    border: 1px solid var(--border2);
    border-radius: 7px;
    background: var(--surface);
    color: var(--sub);
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.share-result-btn:hover {
    border-color: rgba(91, 156, 246, .5);
    color: var(--blue);
}

.share-result-btn.copied {
    border-color: rgba(53, 189, 139, .45);
    color: var(--green);
}

@media (min-width: 761px) {
    #chatPopup {
        height: 360px;
    }
}

.pkg-card > .pkg-divider {
    display: none;
}

.pkg-card > .pkg-section {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}

.pkg-cash {
    grid-column: 1;
    grid-row: 2;
    height: 100%;
}

.pkg-stock {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
}

.pkg-sec-hdr {
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.pkg-sec-hdr .tag {
    font-size: 9.5px;
}

.pkg-row {
    padding: 4px 0;
    font-size: 12px;
}

.pkg-row .pr-label {
    font-size: 12px;
}

.pkg-row .pr-val {
    font-family: inherit !important;
    font-size: 13px;
    font-weight: 650;
}

.pkg-row.post {
    margin-top: 7px;
    padding: 9px 10px;
}

.pkg-row.post .pr-label {
    font-size: 11.5px;
}

.pkg-row.post .pr-val {
    font-size: 17px;
}

.pkg-shares {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    margin: 0;
    padding: 11px 12px;
}

.pkg-shares-num {
    grid-column: 1;
    grid-row: 1;
    font-family: inherit !important;
    font-size: 18px;
    line-height: 1.25;
    text-align: left;
}

.pkg-shares-label {
    display: block;
    margin-bottom: 2px;
    color: var(--sub);
    font-size: 10px;
    font-weight: 650;
}

.pkg-shares-num strong {
    color: var(--txt);
    font-size: inherit;
    font-weight: 850;
}

.pkg-shares-sub {
    grid-column: 1;
    grid-row: 2;
    font-family: inherit !important;
    margin-top: 2px;
    font-size: 11px;
    text-align: left;
}

.pkg-split {
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: 6px;
    margin: 0;
    padding: 0;
    border-top: 0;
}

.pkg-sp {
    padding: 7px 4px;
}

.pkg-sp-t {
    font-size: 10px;
}

.pkg-sp-s {
    font-family: inherit !important;
    font-size: 13px;
}

.pkg-sp-v {
    font-family: inherit !important;
    font-size: 10px;
}

.pkg-total {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr);
    align-items: center;
    gap: 10px 20px;
    padding: 14px 16px 12px;
    border-radius: 9px;
    background: var(--surface);
}

.pkg-total-hdr {
    grid-column: 1 / -1;
    margin: 0;
    text-align: left;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.pkg-compose {
    justify-content: flex-start;
    margin: 0;
}

.pkg-compose-item {
    flex: 0 1 auto;
    min-width: 110px;
    text-align: left;
}

.pc-tag {
    font-size: 10px;
}

.pc-val {
    font-family: inherit !important;
    font-size: 15px;
    letter-spacing: 0;
}

.pkg-compose-plus {
    margin-top: 15px;
}

.pkg-total-sum {
    justify-content: flex-start;
    min-height: 48px;
    padding: 0 0 0 20px;
    border-top: 0;
    border-left: 1px solid var(--border);
}

.pts-val {
    font-family: inherit !important;
    font-size: 22px;
    font-weight: 850;
    letter-spacing: 0;
    white-space: nowrap;
}

.pkg-total-pre {
    grid-column: 1 / -1;
    padding-top: 9px;
    text-align: right;
    font-size: 11px;
}

.pkg-total-pre span {
    font-family: inherit !important;
}

.pkg-future {
    grid-column: 1 / -1;
    grid-row: 5;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.pkg-deduct > summary {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 12px;
}

.pkg-deduct .pd-row,
.pkg-deduct .pd-foot {
    font-size: 11.5px;
}

@media (max-width: 560px) {
    body {
        font-size: 13px;
    }

    .pkg-card {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 8px;
        padding: 10px;
    }

    .pkg-cash {
        grid-column: 1;
        grid-row: 2;
        height: 100%;
    }

    .pkg-stock {
        grid-column: 2;
        grid-row: 2;
        height: 100%;
    }

    .pkg-shares {
        grid-column: 1 / -1;
        grid-row: 3;
        grid-template-columns: 92px minmax(0, 1fr);
        column-gap: 7px;
        padding: 8px;
    }

    .pkg-title {
        display: flex;
        align-items: center;
        padding-bottom: 9px;
        font-size: 15px;
    }

    .share-result-btn {
        min-height: 32px;
        padding: 5px 8px;
        font-size: 10px;
    }

    .pkg-card > .pkg-section {
        padding: 10px 8px;
    }

    .pkg-sec-hdr {
        gap: 4px;
        margin-bottom: 7px;
        font-size: 11px;
    }

    .pkg-row,
    .pkg-row .pr-label {
        font-size: 10.5px;
    }

    .pkg-row .pr-val {
        font-size: 11.5px;
    }

    .pkg-row.post {
        display: block;
        padding: 7px;
    }

    .pkg-row.post .pr-label {
        display: block;
        margin-bottom: 2px;
        font-size: 10px;
    }

    .pkg-row.post .pr-val {
        display: block;
        font-size: 15px;
    }

    .pkg-shares {
        padding: 8px 6px;
    }

    .pkg-shares-num {
        font-size: 17px;
    }

    .pkg-split {
        gap: 3px;
    }

    .pkg-sp {
        padding: 6px 2px;
    }

    .pkg-sp-t,
    .pkg-sp-v {
        font-size: 9px;
    }

    .pkg-sp-s {
        font-size: 12px;
    }

    .pkg-total {
        grid-column: 1 / -1;
        grid-row: 4;
        grid-template-columns: minmax(0, 1fr) minmax(125px, .72fr);
        gap: 8px;
        padding: 11px;
    }

    .pkg-future {
        grid-column: 1 / -1;
        grid-row: 5;
    }

    .pkg-compose-item {
        min-width: 0;
    }

    .pc-val {
        font-size: 12.5px;
    }

    .pkg-total-sum {
        min-height: 42px;
        padding-left: 10px;
    }

    .pts-val {
        font-size: 18px;
    }

    .pkg-total-pre {
        text-align: center;
        font-size: 10px;
    }
}

/* block 4 <style id="visual-cleanup"> */
/* Reduce visual nesting while preserving the calculator flow. */
body::before {
    display: none;
}

.wrap {
    width: min(980px, calc(100% - 32px));
}

.hdr {
    position: relative;
    padding: 25px 0 18px;
}

.hdr > div:first-child {
    position: absolute;
    top: 18px;
    right: 0;
    margin: 0 !important;
}

.hdr-chip {
    margin-bottom: 9px;
    border-color: var(--border);
    background: transparent;
    color: var(--mute);
}

.hdr h1 {
    margin-bottom: 6px;
    font-size: clamp(27px, 3.6vw, 38px);
    letter-spacing: 0;
}

.hdr-sub {
    color: var(--sub);
}

.hdr-alert {
    max-width: 660px;
    margin-top: 10px;
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: var(--mute);
}

.main-tabs {
    margin-bottom: 14px;
    padding: 3px;
    border-color: color-mix(in srgb, var(--border) 72%, transparent);
    background: color-mix(in srgb, var(--surface) 54%, transparent);
}

.main-tab-btn {
    min-height: 42px;
}

.main-tab-btn.active {
    background: color-mix(in srgb, var(--blue) 13%, var(--surface));
    color: var(--blue);
    box-shadow: none;
}

.section.card,
.card,
.pkg-card,
.cb,
.opi-card,
.dept-op-card,
.update-card {
    border-color: color-mix(in srgb, var(--border) 78%, transparent);
    box-shadow: none !important;
}

.section.card,
.card {
    padding: 16px;
}

.card-hdr {
    min-height: 29px;
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.card-hdr-icon {
    width: 26px;
    height: 26px;
    border: 0;
    background: color-mix(in srgb, var(--blue) 10%, var(--surface)) !important;
}

.setup-card {
    grid-template-columns: minmax(220px, .72fr) minmax(420px, 1.28fr);
    gap: 10px 18px;
}

.setup-card > .card-hdr {
    display: flex;
    align-items: center;
}

.setup-detail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin-left: auto;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: transparent;
    color: var(--sub);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.setup-detail-toggle:hover {
    border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
    color: var(--blue);
}

.setup-detail-toggle .setup-chevron {
    transition: transform .16s ease;
}

.setup-card.org-open .setup-detail-toggle .setup-chevron {
    transform: rotate(180deg);
}

.setup-card > .setup-group {
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
}

.setup-card > .setup-group:nth-child(2) {
    display: none;
    margin-top: 2px;
    padding-top: 13px !important;
    border-top: 1px solid var(--border) !important;
}

.setup-card.org-open > .setup-group:nth-child(2) {
    display: block;
}

.setup-card > .setup-group:nth-child(4) {
    padding-left: 18px !important;
    border-left: 1px solid var(--border) !important;
}

.setup-label {
    margin-bottom: 7px;
    color: var(--mute);
    font-size: 11px;
}

.var-cell,
.hc-cell {
    border-color: transparent !important;
    background: color-mix(in srgb, var(--surface) 78%, var(--panel2)) !important;
}

.var-cell {
    min-height: 56px;
    padding: 8px 10px;
}

.tax-row {
    min-height: 38px;
    margin-top: 6px;
    padding: 6px 2px 0;
    border: 0 !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0;
    background: transparent !important;
}

.rule-box {
    padding: 8px 11px;
    border: 0;
    border-left: 3px solid color-mix(in srgb, var(--blue) 55%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--blue) 5%, transparent);
}

.con-btn,
.con-yr-btn,
.result-dept-btn,
.accum-dept-btn {
    box-shadow: none !important;
}

.con-btn.active,
.con-yr-btn.active,
.result-dept-btn.active,
.accum-dept-btn.active {
    border-color: color-mix(in srgb, var(--blue) 68%, var(--border)) !important;
    background: color-mix(in srgb, var(--blue) 12%, var(--surface)) !important;
    color: var(--blue) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 22%, transparent) inset !important;
}

.weight-dash {
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
}

#chatFab {
    opacity: .9;
    border-color: color-mix(in srgb, var(--blue) 35%, var(--border)) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
}

@media (max-width: 760px) {
    .wrap {
        width: min(calc(100% - 18px), 680px);
    }

    .hdr {
        padding: 20px 0 14px;
    }

    .hdr > div:first-child {
        top: 13px;
    }

    .hdr-chip {
        margin-bottom: 8px;
    }

    .hdr h1 {
        font-size: 25px;
    }

    .hdr-alert {
        margin-top: 7px;
        font-size: 10.5px;
        line-height: 1.45;
    }

    .section.card,
    .card {
        padding: 13px;
    }

    .setup-card {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .setup-card > .card-hdr,
    .setup-card > .setup-group:nth-child(2),
    .setup-card > .setup-group:nth-child(3),
    .setup-card > .setup-group:nth-child(4) {
        grid-column: 1 / -1;
    }

    .setup-card > .setup-group:nth-child(4) {
        padding: 10px 0 0 !important;
        border-left: 0 !important;
        border-top: 1px solid var(--border) !important;
    }

    #chatFab {
        min-width: 76px;
        height: 38px;
        right: 10px;
        bottom: 10px;
        padding: 0 10px;
    }
}

@media (max-width: 460px) {
    .hdr > div:first-child {
        top: 11px;
    }

    .hdr-chip {
        margin-right: 88px;
    }

    .hdr h1 {
        font-size: 22px;
    }

    .main-tabs {
        margin-bottom: 11px;
    }

    .main-tab-btn {
        min-height: 39px;
    }
}

/* block 5 <style> */
/* 간편/상세 계산 프리뷰 */
    .calc-mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0 0 10px;padding:4px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--panel2) 72%,transparent)}
    .calc-mode-btn{min-height:42px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--sub);font-weight:800;cursor:pointer}
    .calc-mode-btn.active{border-color:color-mix(in srgb,var(--blue) 52%,var(--border));background:color-mix(in srgb,var(--blue) 13%,var(--surface));color:var(--blue);box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 16%,transparent) inset}
    .calc-mode-help{grid-column:1/-1;padding:1px 7px 3px;color:var(--mute);font-size:10.5px;text-align:center}
    .simple-scenario-card{display:block}
    .simple-scenario-copy{margin:-3px 0 11px;color:var(--sub);font-size:11.5px}
    .simple-scenario-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
    .simple-scene-btn{min-height:52px;padding:8px 5px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--sub);font-weight:800;cursor:pointer}
    .simple-scene-btn span{display:block;margin-top:3px;color:var(--mute);font-size:9px;font-weight:500}
    .simple-scene-btn.active{border-color:color-mix(in srgb,var(--blue) 68%,var(--border));background:color-mix(in srgb,var(--blue) 12%,var(--surface));color:var(--blue);box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 20%,transparent) inset}
    .simple-mode-note{margin-top:9px;color:var(--mute);font-size:10px;line-height:1.5}
    .simple-reset-btn{margin-left:auto;padding:5px 9px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--blue);font-size:10.5px;font-weight:750;cursor:pointer}
    .simple-op-grid{display:grid;grid-template-columns:70px repeat(3,minmax(0,1fr));gap:6px;align-items:center}
    .simple-op-head{padding:0 4px 3px;color:var(--mute);font-size:10px;font-weight:750;text-align:center}
    .simple-op-year{color:var(--txt);font-family:'Space Mono',monospace;font-size:11px;font-weight:800}
    .simple-op-input{display:flex;align-items:center;min-width:0;height:40px;padding:0 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface)}
    .simple-op-input:focus-within{border-color:color-mix(in srgb,var(--blue) 65%,var(--border));box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 12%,transparent)}
    .simple-op-input input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--txt);font-family:'Space Mono',monospace;font-size:14px;font-weight:800;text-align:right}
    .simple-op-input span{margin-left:4px;color:var(--mute);font-size:9px}
    #bonusPanel.calc-simple .advanced-calculation{display:none}
    #bonusPanel.calc-simple .setup-detail-toggle,#bonusPanel.calc-simple .setup-card>.setup-group:nth-child(2),#bonusPanel.calc-simple .detail-only{display:none!important}
    #bonusPanel.calc-simple .setup-card{grid-template-columns:minmax(220px,.8fr) minmax(390px,1.2fr)}
    #bonusPanel.calc-simple .setup-card>.setup-group:nth-child(4) .vars-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    #bonusPanel.calc-simple .setup-card>.setup-group:nth-child(4){padding-left:18px!important}
    .advanced-calculation .con-year-line,.advanced-calculation .con-scene-row,.advanced-calculation .legacy-op-label,.advanced-calculation .dept-op-grid{display:none!important}
    .quick-flow-card{display:grid;grid-template-columns:1.1fr .95fr .95fr;gap:8px;margin:0 0 10px}
    .quick-flow-item{min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 88%,transparent),color-mix(in srgb,var(--surface) 92%,transparent))}
    .quick-flow-k{display:flex;align-items:center;gap:5px;color:var(--mute);font-size:9.5px;font-weight:800}
    .quick-flow-v{margin-top:5px;color:var(--txt);font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .quick-flow-v strong{color:var(--blue);font-family:'Space Mono',monospace}
    .quick-flow-s{margin-top:3px;color:var(--sub);font-size:9.5px;line-height:1.35}
    .result-insight{margin:-10px 0 18px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--blue) 24%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--blue) 8%,var(--panel));color:var(--sub);font-size:11px;line-height:1.65}
    .result-insight b{color:var(--txt)}
    .result-insight .ri-money{color:var(--green);font-weight:900}
    .result-insight .ri-stock{color:var(--cyan);font-weight:900}
    .accum-month-in{width:54px;height:29px;padding:0 5px;border:1px dashed var(--border2);border-radius:6px;outline:0;background:var(--surface);color:var(--txt);font-family:'Space Mono',monospace;font-size:11px;font-weight:750;text-align:right}
    .accum-month-in:focus{border-style:solid;border-color:color-mix(in srgb,var(--blue) 65%,var(--border))}
    .accum-earned-note{display:block;margin-top:2px;color:var(--mute);font-size:8.5px;white-space:nowrap}
    .advanced-calculation .dept-op-card .wrap-in input{text-align:right}
    @media(min-width:960px){
        body:has(#chatPopup:not(.hidden)) .wrap{width:min(900px,calc(100% - var(--chat-dock-width,310px) - 55px));margin-left:18px;margin-right:calc(var(--chat-dock-width,310px) + 27px)}
        #chatPopup:not(.hidden){right:12px!important;left:auto!important}
    }
    .site-footer{margin:22px 0 84px;padding:15px 4px 0;border-top:1px solid var(--border);color:var(--mute);font-size:10.5px;line-height:1.65;text-align:center}
    .site-footer nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px}
    .site-footer a{color:var(--sub);font-weight:750;text-decoration:none}
    .site-footer a:hover{color:var(--blue)}
    .faq-card{margin:18px 0 12px;border:1px solid var(--border);border-radius:14px;background:var(--panel);overflow:hidden}
    .faq-card>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;cursor:pointer;color:var(--txt);font-size:13px;font-weight:900;list-style:none}
    .faq-card>summary::-webkit-details-marker{display:none}
    .faq-card>summary::after{content:'▼';font-size:10px;color:var(--sub);transition:transform .16s ease}
    .faq-card[open]>summary::after{transform:rotate(180deg)}
    .faq-body{display:grid;gap:8px;padding:0 16px 15px}
    .faq-item{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:10px 11px}
    .faq-item b{display:block;margin-bottom:4px;color:var(--txt);font-size:11.5px}
    .faq-item p{margin:0;color:var(--sub);font-size:10.5px;line-height:1.65}
    @media(max-width:760px){#bonusPanel.calc-simple .setup-card{grid-template-columns:1fr}#bonusPanel.calc-simple .setup-card>.setup-group:nth-child(4){padding:10px 0 0!important}.calc-mode-help{font-size:10px}.quick-flow-card{grid-template-columns:1fr}.quick-flow-item{padding:10px 12px}.result-insight{margin-top:-8px}}
    @media(max-width:460px){.calc-mode-btn{min-height:39px}.simple-op-grid{grid-template-columns:44px repeat(3,minmax(0,1fr));gap:4px}.simple-op-input{height:38px;padding:0 5px}.simple-op-input input{font-size:12px}.simple-op-year{font-size:10px}.simple-reset-btn{padding:4px 7px;font-size:9.5px}.advanced-calculation .dept-op-card{grid-template-columns:84px minmax(0,1fr)}.advanced-calculation .dept-op-card .ig{margin:0}.accum-month-in{width:46px;height:27px;font-size:10px}.site-footer{font-size:10px;margin-bottom:78px}.faq-card>summary{padding:13px 14px}.faq-body{padding:0 12px 13px}.faq-item{padding:9px 10px}.quick-flow-v{font-size:12.5px}.result-insight{font-size:10.5px;padding:11px 12px}}