/* find-ref 채팅 화면 CSS — 원본은 src/utilities/ai-chat.html 의 <style>. 빌드(scripts/build/chat-css.js)가 뗀다. 여기를 고치지 않는다 */
        /* ============================================================
         * 색 — find-ref 팔레트 (2026-09-06 이관)
         *
         * 이름의 숫자는 밝기(0=검정, 100=흰색)다. 시안의 차가운 회색 램프로,
         * 이전 값들의 밝기 순서를 그대로 유지하되 잉크(#333)만 의도적으로 더
         * 어둡게 내렸다 — 본문과 강조의 간격이 벌어지면서 위계가 또렷해진다.
         *
         * 다크 모드 규칙은 같은 hex 를 반대 역할로 쓰던 곳이 있어(#222 가 밝은
         * 모드에서는 강조 텍스트, 다크에서는 표면) 문맥별로 다른 토큰을 받았다.
         * 유채색(빨강·초록·Google 브랜드)은 이 램프에 넣지 않았다.
         * ============================================================ */
        :root {
            --tone-0: #000000;
            --tone-4: #08090C;
            --tone-7: #101114;
            --tone-9: #16181D;
            --tone-11: #1A1B1F;
            --tone-12: #1C1E21;
            --tone-13: #1F2125;
            --tone-14: #222428;
            --tone-16: #272A2F;
            --tone-18: #2B2E33;
            --tone-19: #2E3137;
            --tone-21: #30353D;
            --tone-22: #35383E;
            --tone-23: #373B41;
            --tone-27: #40454D;
            --tone-31: #4A5059;
            --tone-39: #5D646D;
            --tone-44: #6B727C;
            --tone-47: #737A84;
            --tone-51: #7D848E;
            --tone-54: #848B95;
            --tone-57: #8B929C;
            --tone-69: #A9B0BA;
            --tone-73: #B6BCC5;
            --tone-78: #C3C8D0;
            --tone-84: #D2D7DE;
            --tone-88: #DDE1E6;
            --tone-90: #E3E6EA;
            --tone-92: #E9EBEF;
            --tone-93: #ECEEF1;
            --tone-95: #F0F1F4;
            --tone-96: #F3F4F7;
            --tone-97: #F7F8F9;
            --tone-99: #FCFCFD;
            --tone-100: #FFFFFF;
        }

        /* 다크 모드에서만 글자용 회색을 한 단계 올린다.
           차가운 회색은 같은 단계에서 중성 회색보다 밝기가 4~7 낮다. 밝은 배경에서는
           그만큼 대비가 늘지만(이관 뒤 밝은 모드 대비는 전부 올라갔다) 어두운 배경에서는
           반대로 줄어든다 — 실측상 다크 모드 대비가 일률적으로 0.2 안팎 떨어졌다.
           셋 다 다크 규칙에서 주로 글자색이다(--tone-57 은 11곳 전부 color). --tone-51 만
           배경 2곳을 겸하는데, 어두운 화면에서 7단계 밝아지는 것은 눈에 잡히지 않는다. */
        body.dark-mode {
            --tone-44: #737A85;
            --tone-51: #848B96;
            --tone-57: #959CA6;
            /* 밝은 모드의 body 와 같은 이유 — 공용 shared.css 의
               body.dark-mode { background: #1a1a1a; color: #e0e0e0 } 를 덮는다.
               안 덮으면 다크 모드에서 자기 색을 정하지 않은 요소만 옛 중성 회색으로 남는다. */
            color: var(--tone-88);
            background-color: var(--tone-9);
        }

        /* 입력창 옆 다크 모드 토글(공용 shared.css 가 칠하던 원형 버튼)은 2026-10-05 뺐다 — 화면 모드는 밝게·어둡게·시스템
           세 칸이 되어 설정 일반 탭과 계정 메뉴로 옮겼다(디자인 시스템 v2, 결정: 기본 시스템). */

        /* Hide shared nav top bar — this page uses its own sidebar.
           Keep .nav-drawer and .nav-overlay alive for hamburger menu. */
        body > nav { display: none !important; }

        /* ============================================================
         * Base / Reset
         * ============================================================ */
        body {
            /* 공용 shared.css 의 color: #333 · background: #ffffff 를 덮는다.
               그 파일은 다른 사이트가 함께 쓰므로 고칠 수 없고, 안 덮으면 자기 색을
               정하지 않은 요소만 옛 회색으로 남아 팔레트가 반만 적용된다. */
            color: var(--fr-ink);
            background-color: var(--fr-paper);
            margin: 0 !important;
            padding: 0 !important;
            width: auto !important;
            max-width: none !important;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            font-size: var(--fr-fs-lg);
            line-height: 1.5;
        }

        .app {
            display: flex;
            height: 100%;
            overflow: hidden;
        }

        /* ============================================================
         * Sidebar
         * ============================================================ */
        .sidebar {
            /* 260px 은 조절한 적 없을 때의 기본값이고, panel-resize.js 가 --sidebar-w 를
               쓰면 그쪽이 이긴다. ≤768px 의 오버레이 규칙은 아래에서 다시 고정 폭으로
               덮으므로, 저장해 둔 데스크톱 폭이 폰 화면으로 새지 않는다. */
            width: var(--sidebar-w, 260px);
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-right: 1px solid var(--fr-rule);
            transition: width var(--fr-dur) var(--fr-ease), opacity var(--fr-dur) var(--fr-ease);
            position: relative;   /* .sidebar-resizer 의 기준 */
        }
        .sidebar.collapsed {
            width: 0;
            border-right: none;
            overflow: hidden;
        }
        body.dark-mode .sidebar { border-color: var(--tone-16); }

        /* Sidebar header */
        .sidebar-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }
        .sidebar-logo {
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sidebar-logo:hover { color: var(--fr-ink); }
        body.dark-mode .sidebar-logo:hover { color: var(--tone-100); }

        .sidebar-close-btn {
            background: none;
            border: none;
            color: var(--fr-ink-3);
            cursor: pointer;
            padding: 4px;
            font-size: var(--fr-fs-base);
            line-height: 1;
            border-radius: var(--fr-radius);
            flex-shrink: 0;
        }

        /* Nav buttons (new chat, search) */
        .sidebar-nav {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex-shrink: 0;
        }
        .sidebar-nav-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            border: none;
            background: none;
            border-radius: var(--fr-radius);
            cursor: pointer;
            text-align: left;
            width: 100%;
            transition: background var(--fr-dur) var(--fr-ease);
        }

        .sidebar-nav-icon {
            font-size: var(--fr-fs-md);
            width: 20px;
            text-align: center;
            flex-shrink: 0;
        }

        /* 단축키 힌트. 평소에는 없고, 마우스를 올렸을 때만 뜬다 — 마우스로 쓰는 동안
           키를 알려 주는 게 목적이라 상시 노출할 이유가 없다. 사이드바가 접히면
           (.sidebar.collapsed 는 width: 0) 통째로 사라지므로 따로 숨길 필요도 없다.
           표기는 ai-chat.js 가 플랫폼을 보고 채운다 — 윈도에 ⌘ 를 보여 주면 거짓말이다. */
        .kbd-hint {
            margin-left: auto;
            flex-shrink: 0;
            font-size: var(--fr-fs-xs);
            border: 1px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            padding: 0 4px;
            line-height: 1.5;
            white-space: nowrap;
            opacity: 0;
            transition: opacity var(--fr-dur) var(--fr-ease);
        }
        .sidebar-nav-btn:hover .kbd-hint,
        .sidebar-nav-btn:focus-visible .kbd-hint { opacity: 1; }

        /* Search */
        .sidebar-search {
            display: none;
            padding: 4px 8px;
            flex-shrink: 0;
        }
        .sidebar-search.active { display: block; }
        .sidebar-search input {
            width: 100%;
            padding: 6px 10px;
            border-radius: var(--fr-radius);
            outline: none;
            box-sizing: border-box;
        }
        body.dark-mode .sidebar-search input {
            border-color: var(--tone-27);
        }

        /* Conversation list */

        .conversation-list {
            flex: 1;
            overflow-y: auto;
        }

        .conversation-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            border-radius: var(--fr-radius);
            margin: 1px 0;
            transition: background var(--fr-dur) var(--fr-ease);
            position: relative;
        }
        /* 삭제 요청을 보낸 줄. 사라질 때까지 흐려 두면 두 번 누르지 않는다 */
        .conversation-item.is-pending { opacity: 0.45; pointer-events: none; }

        .conversation-item-info { flex: 1; min-width: 0; }
        .conversation-item-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* 검색 결과의 첫 질문·날짜(PUX-04) — 제목이 서버가 지은 요약이면 무엇이 걸렸는지 이 줄이 말한다 */
        .conversation-item-preview,
        .conversation-item-date {
            font-size: var(--fr-fs-xs);
            line-height: 1.45;
            color: var(--fr-ink-3);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .conversation-item-date { font-variant-numeric: tabular-nums; font-size: var(--fr-fs-xs); }
        body.dark-mode .conversation-item-preview,
        body.dark-mode .conversation-item-date { color: var(--tone-69); }
        /* 다음 쪽 — 화면에 들어오면 저절로 부르고(IntersectionObserver), 버튼은 그 대체 경로 */
        .conversation-more { padding: 6px 8px 10px; text-align: center; }
        .conversation-more-btn {
            background: none;
            border: 1px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            padding: 4px 12px;
            font-size: var(--fr-fs-xs);
            font-family: inherit;
            color: var(--fr-ink-3);
            cursor: pointer;
        }
        .conversation-more-btn:hover { border-color: var(--fr-ink-3); background: var(--fr-rule); }
        .conversation-more-btn:disabled { cursor: default; opacity: 0.6; }
        body.dark-mode .conversation-more-btn { color: var(--tone-69); }
        body.dark-mode .conversation-more-btn:hover { border-color: var(--tone-44); }
        .conversation-search-note { margin: 4px 12px 12px; font-size: var(--fr-fs-xs); line-height: 1.5; color: var(--fr-ink-3); }
        body.dark-mode .conversation-search-note { color: var(--tone-69); }

        .conversation-actions {
            display: flex;
            gap: 2px;
            opacity: 0;
            flex-shrink: 0;
            transition: opacity var(--fr-dur) var(--fr-ease);
        }
        .conversation-item:hover .conversation-actions,
        .conversation-item:focus-within .conversation-actions { opacity: 1; }
        .conversation-action-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: var(--fr-fs-xs);
            border-radius: var(--fr-radius);
            transition: all var(--fr-dur) var(--fr-ease);
        }

        .conversation-edit-input {
            width: 100%;
            border: 1.5px solid var(--fr-ink-3);
            border-radius: var(--fr-radius);
            padding: 2px 6px;
            font-size: var(--fr-fs-xs);
            outline: none;
            background: var(--fr-paper-3);
            color: var(--fr-ink);
            box-sizing: border-box;
        }
        body.dark-mode .conversation-edit-input { border-color: var(--tone-31); }

        .sidebar-empty {
            padding: 24px 12px;
            text-align: center;
            font-size: var(--fr-fs-xs);
        }
        /* 목록을 못 불러왔을 때. 예전에는 조용히 실패해 "대화가 없습니다" 로 남았다 —
           대화가 있는 사람에게 없다고 말하는 셈이었다. */
        .sidebar-retry {
            margin-top: 10px;
            background: none;
            border: 1px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            padding: 4px 12px;
            font-size: var(--fr-fs-xs);
            font-family: inherit;
            color: var(--fr-ink-3);
            cursor: pointer;
            transition: all var(--fr-dur) var(--fr-ease);
        }
        .sidebar-retry:hover { border-color: var(--fr-ink-3); background: var(--fr-rule); }
        body.dark-mode .sidebar-retry { color: var(--tone-69); }
        body.dark-mode .sidebar-retry:hover { border-color: var(--tone-39); }

        /* Sidebar footer — user profile */
        .sidebar-footer {
            flex-shrink: 0;
            border-top: 1px solid var(--fr-rule);
            position: relative;
        }
        body.dark-mode .sidebar-footer { border-color: var(--tone-16); }

        .sidebar-usage {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        /* 주의 글자는 대비가 나오는 짙은 황토 — 예전 #b9770e 는 사이드바 바탕에서 3.26:1 이었다(진단 PUX-08) */
        .balance-warning {
            padding: 0 10px 6px;
            font-size: var(--fr-fs-xs);
            line-height: 1.5;
        }
        .balance-warning[hidden] { display: none; }
        .balance-warning a { color: inherit; text-decoration: underline; }

        .sidebar-profile {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 8px 10px;
            border: none;
            background: none;
            font: inherit;
            color: inherit;
            text-align: left;
            border-radius: var(--fr-radius);
            cursor: pointer;
            transition: background var(--fr-dur) var(--fr-ease);
        }
        .profile-name, .profile-plan { display: block; }

        .profile-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            flex-shrink: 0;
        }

        .profile-name {
            font-weight: 500;
        }

        .sidebar-login-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 10px;
            border: 1.5px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            background: none;
            color: var(--fr-ink-2);
            font-size: var(--fr-fs-xs);
            cursor: pointer;
            transition: all var(--fr-dur) var(--fr-ease);
        }
        .sidebar-login-btn:hover { border-color: var(--fr-ink-3); background: var(--fr-rule); }
        body.dark-mode .sidebar-login-btn:hover { border-color: var(--tone-39); }

        /* User menu popup */
        .user-menu {
            display: none;
            position: absolute;
            bottom: calc(100% + 4px);
            border-radius: var(--fr-radius);
            z-index: 150;
            overflow: hidden;
        }
        .user-menu.active { display: block; }
        body.dark-mode .user-menu { border-color: var(--tone-19); }

        .user-menu-email {
            border-bottom: 1px solid var(--fr-rule);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.dark-mode .user-menu-email { border-color: var(--tone-19); }

        .user-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: background var(--fr-dur) var(--fr-ease);
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }

        .user-menu-icon { width: 18px; text-align: center; flex-shrink: 0; }

        .user-menu-divider {
            height: 1px;
        }

        /* Mobile sidebar overlay */
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 99;
        }
        .sidebar-overlay.active { display: block; }

        /* ============================================================
         * Main area
         * ============================================================ */
        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            position: relative;
            background: var(--fr-paper-2);
        }

        /* Sidebar open button (when sidebar is collapsed on desktop) */
        .sidebar-open-btn {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 10;
            background: none;
            border: none;
            color: var(--fr-ink-3);
            cursor: pointer;
            padding: 6px;
            font-size: var(--fr-fs-base);
            border-radius: var(--fr-radius);
            display: none;
        }
        .sidebar-open-btn.visible { display: block; }
        .sidebar-open-btn:hover { background: var(--fr-rule); color: var(--fr-ink); }

        /* Chat toolbar (export etc.) */
        .chat-toolbar {
            display: none;
            align-items: center;
            justify-content: flex-end;
            flex-shrink: 0;
        }
        .chat-toolbar.visible { display: flex; }
        .chat-toolbar-btn {
            border-radius: var(--fr-radius);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all var(--fr-dur) var(--fr-ease);
        }
        body.dark-mode .chat-toolbar-btn { border-color: var(--tone-23); }
        .export-dropdown-wrap { position: relative; display: inline-block; }
        .export-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            border-radius: var(--fr-radius);
            z-index: 100;
            min-width: 120px;
            overflow: hidden;
        }
        .export-dropdown.visible { display: block; }
        .export-dropdown-item {
            display: block;
            width: 100%;
            padding: 7px 14px;
            border: none;
            background: none;
            text-align: left;
            font-size: var(--fr-fs-sm);
            color: var(--fr-ink-2);
            cursor: pointer;
            white-space: nowrap;
        }
        .export-dropdown-item:hover { background: var(--fr-rule); color: var(--fr-ink); }
        body.dark-mode .export-dropdown { border-color: var(--tone-23); }
        body.dark-mode .export-dropdown-item { color: var(--tone-57); }
        body.dark-mode .export-dropdown-item:hover { color: var(--tone-78); }

        /* Retry button in error messages */
        .retry-btn {
            display: inline-block;
            margin-top: 8px;
            padding: 6px 14px;
            border: 1px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            background: var(--fr-paper-3);
            color: var(--fr-ink-2);
            font-size: var(--fr-fs-xs);
            cursor: pointer;
            transition: all var(--fr-dur) var(--fr-ease);
        }
        .retry-btn:hover { border-color: var(--fr-ink-4); background: var(--fr-rule); }

        /* 되묻기 카드(ask_user, ai-chat.js appendAskUserCard) — 말풍선 안 확인 질문 + 선택지 2~4개 + 직접 입력.
           고른 것만 강조색으로 남기고 나머지는 잠기면 흐리게. 폰에서는 버튼을 세로로 쌓고 손가락 높이(44px)로. */
        .ask-user-card { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--fr-accent-line); border-radius: var(--fr-radius); background: var(--fr-accent-tint); }
        .ask-user-question { margin: 0 0 10px; font-size: var(--fr-fs-sm); font-weight: 600; line-height: 1.6; color: var(--fr-ink); }
        .ask-user-options { display: flex; flex-wrap: wrap; gap: 8px; }
        .ask-user-option {
            min-height: 36px; padding: 6px 14px;
            border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius);
            background: var(--fr-paper); color: var(--fr-ink);
            font: inherit; font-size: var(--fr-fs-sm); line-height: 1.4; text-align: left; cursor: pointer;
            transition: border-color var(--fr-dur) var(--fr-ease);
        }
        .ask-user-option:hover:not(:disabled) { border-color: var(--fr-accent); }
        .ask-user-option:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        .ask-user-free { border-style: dashed; color: var(--fr-ink-3); }
        .ask-user-card.locked .ask-user-option { cursor: default; opacity: 0.55; }
        .ask-user-card.locked .ask-user-option.chosen { opacity: 1; border-color: var(--fr-accent); color: var(--fr-accent); font-weight: 600; }
        @media (max-width: 640px) {
            .ask-user-options { flex-direction: column; }
            .ask-user-option { width: 100%; min-height: 44px; }
        }

        /* Recovery notice */
        .recovery-notice {
            padding: 8px 12px;
            margin-top: 8px;
            font-size: var(--fr-fs-xs);
            color: var(--fr-ink-3);
            background: var(--fr-rule);
            border-radius: var(--fr-radius);
            border: 1px solid var(--fr-rule);
        }
        .recovery-notice.recovery-failed {
            color: var(--fr-ochre-ink);
            background: var(--fr-ochre-tint);
            border-color: var(--fr-ochre);
        }
        body.dark-mode .recovery-notice { border-color: var(--tone-27); }

        /* Mobile header (hamburger) */
        .mobile-header {
            display: none;
            align-items: center;
            padding: 10px 14px;
            flex-shrink: 0;
        }
        .mobile-hamburger {
            background: none;
            border: none;
            color: var(--fr-ink-2);
            font-size: var(--fr-fs-xl);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: var(--fr-radius);
        }
        .mobile-hamburger:hover { background: var(--fr-rule); }
        /* span 이었는데 눌러서 초기 화면으로 가는 자리라 button 으로 바꿨다.
           기본 버튼 모양은 전부 지운다 — 보이는 건 예전 그대로여야 한다. */
        .mobile-brand {
            font-size: var(--fr-fs-sm);
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--fr-ink);
            margin-left: 4px;
            background: none;
            border: none;
            padding: 0;
            font-family: inherit;
            cursor: pointer;
        }
        .mobile-auth { margin-left: auto; display: flex; align-items: center; }
        .mobile-login-btn {
            border: 1.5px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            background: none;
            color: var(--fr-ink-2);
            font-size: var(--fr-fs-xs);
            padding: 6px 14px;
            cursor: pointer;
        }
        .mobile-login-btn:hover { border-color: var(--fr-ink-3); }
        .mobile-profile-btn {
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 50%;
            font-size: var(--fr-fs-xs);
            font-weight: 600;
            cursor: pointer;
            padding: 0;
        }

        /* Chat scroll area */
        .chat-scroll {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .chat-content {
            min-height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
        }

        .chat-container {
            max-width: 768px;
            width: 100%;
            margin: 0 auto;
            padding: 16px 24px;
            display: flex;
            flex-direction: column;
            gap: 24px;
            box-sizing: border-box;
        }

        /* ============================================================
         * Messages
         * ============================================================ */
        .message {
            display: flex;
            flex-direction: column;
            animation: fadeIn var(--fr-dur) var(--fr-ease);
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .message.ai { align-items: flex-start; }

        /* User bubble */
        .user-bubble {
            word-break: break-word;
            white-space: pre-wrap;
        }

        /* AI content — no bubble */
        .ai-content {
            max-width: 100%;
            word-break: break-word;
        }

        /* AI markdown styles */
        .ai-content p:first-child { margin-top: 0; }
        .ai-content p:last-child { margin-bottom: 0; }
        .ai-content ul, .ai-content ol {
            margin: 8px 0;
        }
        .ai-content code {
            border-radius: var(--fr-radius);
            font-family: var(--fr-mono);
        }

        /* Code block wrapper (for copy button) */
        .code-block-wrapper {
            position: relative;
            margin: 8px 0;
        }
        .code-block-wrapper pre {
            margin: 0;
        }
        .code-copy-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: var(--tone-78);
            border-radius: var(--fr-radius);
            padding: 4px 8px;
            font-size: var(--fr-fs-xs);
            cursor: pointer;
            opacity: 0;
            transition: opacity var(--fr-dur) var(--fr-ease);
        }
        .code-block-wrapper:hover .code-copy-btn { opacity: 1; }
        .code-copy-btn:hover { background: rgba(255,255,255,0.2); color: var(--tone-100); }

        .ai-content pre {
            background: var(--tone-12);
            color: var(--tone-84);
            padding: 14px 16px;
            border-radius: var(--fr-radius);
            overflow-x: auto;
            margin: 8px 0;
            font-size: 0.88em;
            line-height: 1.5;
        }
        .ai-content pre code {
            background: none;
            padding: 0;
            color: inherit;
        }
        .ai-content strong { font-weight: 600; }
        .ai-content a {
            text-decoration: underline;
        }
        body.dark-mode .ai-content blockquote { border-color: var(--tone-31); }

        .ai-content table {
            border-collapse: collapse;
            margin: 8px 0;
        }
        .ai-content th, .ai-content td {
            border: 1px solid var(--fr-rule);
            text-align: left;
        }
        .ai-content th { font-weight: 600; }

        /* AI action bar (copy + feedback) */
        .ai-actions {
            transition: opacity var(--fr-dur) var(--fr-ease);
        }
        .ai-actions:focus-within,
        .ai-actions.voted { opacity: 1; }

        .ai-action-btn {
            transition: all var(--fr-dur) var(--fr-ease);
        }

        /* 피드백 피커 (베타) — /js/feedback-picker.js. 툴바 [피드백] 선택 모드, 답변 드래그 버튼, 폼 */
        .fb-pop[hidden], .fb-hint[hidden], .fb-float[hidden] { display: none !important; }
        body.fb-picking, body.fb-picking * { cursor: crosshair !important; }
        .fb-hover { outline: 2px dashed var(--fr-ink-4) !important; outline-offset: 2px; }
        .fb-selected { outline: 2px solid var(--fr-ink-2) !important; outline-offset: 2px; }
        body.dark-mode .fb-hover { outline-color: var(--tone-51) !important; }
        .fb-hint { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 600; background: var(--tone-9); color: var(--tone-100); padding: 0.5rem 1rem; border-radius: var(--fr-radius); font-size: var(--fr-fs-xs); box-shadow: 0 4px 16px rgba(0,0,0,0.2); white-space: nowrap; }
        .fb-hint-sub { color: var(--tone-73); margin-left: 0.5rem; }
        .fb-float { position: fixed; z-index: 600; background: var(--tone-9); color: var(--tone-100); border: none; border-radius: var(--fr-radius); padding: 0.35rem 0.7rem; font-size: var(--fr-fs-xs); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
        .fb-pop { position: fixed; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); z-index: 600; background: var(--fr-paper-2); border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); box-shadow: 0 8px 28px rgba(0,0,0,0.18); padding: 0.8rem 0.9rem; font-size: var(--fr-fs-xs); color: var(--fr-ink); }
        .fb-pop-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
        .fb-pop-title { font-weight: 600; }
        .fb-pop-region { flex: 1; min-width: 0; color: var(--fr-ink-3); font-size: var(--fr-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .fb-pop-close { background: none; border: none; color: var(--fr-ink-3); cursor: pointer; font-size: var(--fr-fs-sm); padding: 0 0.2rem; }
        .fb-pop-quote { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); background: var(--fr-rule); border-left: 3px solid var(--fr-rule-2); padding: 0.4rem 0.6rem; margin-bottom: 0.6rem; max-height: 4.6em; overflow: hidden; }
        body.dark-mode .fb-pop-quote { border-color: var(--tone-31); color: var(--tone-69); }
        .fb-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6rem; border-radius: var(--fr-radius); transition: box-shadow var(--fr-dur) var(--fr-ease); }
        .fb-chips--need { box-shadow: 0 0 0 2px var(--fr-ochre); }
        .fb-chip { background: none; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); padding: 0.25rem 0.65rem; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); cursor: pointer; }
        .fb-chip:hover { border-color: var(--fr-ink-4); color: var(--fr-ink); }
        .fb-chip.active { background: var(--fr-ink); border-color: var(--fr-ink); color: var(--fr-paper); }
        body.dark-mode .fb-chip { color: var(--tone-69); }
        .fb-pop textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); padding: 0.45rem 0.6rem; font-size: var(--fr-fs-xs); font-family: inherit; resize: vertical; background: var(--fr-paper-3); color: var(--fr-ink); }
        .fb-need { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; }
        .fb-need[hidden] { display: none; }
        .fb-need label { font-size: var(--fr-fs-xs); font-weight: 600; color: var(--fr-ink-2); }
        .fb-need input { box-sizing: border-box; width: 100%; height: 34px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); padding: 0 0.6rem; font: inherit; font-size: var(--fr-fs-xs); background: var(--fr-paper-3); color: var(--fr-ink); }
        .fb-need-hint { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        body.dark-mode .fb-need label { color: var(--tone-88); }
        .fb-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
        .fb-pop-note { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .fb-send { background: var(--fr-ink); color: var(--fr-paper); border: none; border-radius: var(--fr-radius); padding: 0.4rem 0.9rem; font-size: var(--fr-fs-xs); cursor: pointer; white-space: nowrap; }
        .fb-send:disabled { opacity: 0.6; cursor: default; }
        /* 접수 결과(성공만 쓴다 — feedback-picker.js) — 초록 대신 남색 체크(디자인 v2 확정 ③, .form-success 와 같은 표식) */
        .fb-pop-result { margin-top: 0.5rem; font-size: var(--fr-fs-xs); line-height: 1.6; color: var(--fr-accent); }
        .fb-pop-result::before { content: ''; display: inline-block; width: 4px; height: 8px; margin: 0 9px 0 2px; border: solid var(--fr-accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
        body.dark-mode .chat-toolbar-btn.active { border-color: var(--tone-51); color: var(--tone-93); background: var(--tone-19); }
        /* 충전 잠금 안내 (베타) */
        /* 베타 지원 채널 안내 — 잔액 소진 답변·충전 잠금 안내에 붙는다 (막다른 길 방지) */
        .support-link-row { margin-top: 0.7rem; }
        .support-link-note { font-size: var(--fr-fs-xs); line-height: 1.6; margin-bottom: 0.5rem; }
        .support-link-btn { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: none; font-size: var(--fr-fs-xs); color: var(--fr-ink-2); text-decoration: none; cursor: pointer; }
        .support-link-btn:hover { border-color: var(--fr-ink-3); background: var(--fr-rule); }
        body.dark-mode .support-link-btn:hover { border-color: var(--tone-39); }
        @media (max-width: 600px) {
            .fb-pop { left: 8px; right: 8px; bottom: 8px; width: auto; }
            .fb-hint { white-space: normal; width: calc(100vw - 32px); box-sizing: border-box; text-align: center; }
        }

        /* Search status */
        .search-status {
            align-items: center;
            gap: 6px;
        }
        .search-status-dot {
            animation: pulse 1.2s infinite;
            flex-shrink: 0;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        /* System notice (model change etc.) */
        .system-notice {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 6px 12px;
            margin: 8px 0;
            font-size: var(--fr-fs-xs);
            color: var(--fr-ink-3);
            text-align: center;
        }
        .system-notice::before,
        .system-notice::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--fr-rule);
        }

        /* Thinking block */
        .thinking-block {
            margin-bottom: 8px;
        }
        body.dark-mode .thinking-block { border-color: var(--tone-19); }
        .thinking-block summary {
            cursor: pointer;
            user-select: none;
        }
        body.dark-mode .thinking-block summary:hover { color: var(--tone-69); }
        .thinking-content {
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
        }

        /* Search process block (agentic tool calls) */
        .search-process-block {
            margin-bottom: 8px;
        }
        .search-process-block summary {
            cursor: pointer;
            user-select: none;
        }
        .search-process-content {
            max-height: 250px;
            overflow-y: auto;
        }
        .tool-call-item {
            border-bottom: 1px solid var(--fr-rule);
        }
        .tool-call-item:last-child {
            border-bottom: none;
        }
        .tool-call-meta {
            margin-left: 6px;
        }
        .tool-call-status {
            margin-left: 4px;
        }
        body.dark-mode .search-process-block {
            border-color: var(--tone-23);
        }
        body.dark-mode .search-process-block summary:hover {
            color: var(--tone-69);
        }

        /* Fallback notice 배너 */
        .notice-banner {
            margin-bottom: 8px;
        }

        /* Scroll-to-bottom button */
        .scroll-bottom-btn {
            display: none;
            position: absolute;
            bottom: 140px;
            left: 50%;
            transform: translateX(-50%);
            width: 36px;
            height: 36px;
            border-radius: var(--fr-radius);
            border: 1px solid var(--fr-rule-2);
            background: var(--fr-paper-3);
            color: var(--fr-ink-3);
            cursor: pointer;
            font-size: var(--fr-fs-md);
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 10;
            transition: all var(--fr-dur) var(--fr-ease);
        }
        .scroll-bottom-btn.visible { display: flex; }
        .scroll-bottom-btn:hover { background: var(--fr-rule); border-color: var(--fr-ink-4); }
        body.dark-mode .scroll-bottom-btn { color: var(--tone-69); }

        /* ============================================================
         * Input area
         * ============================================================ */
        .input-wrapper {
            flex-shrink: 0;
            padding: 0 24px 16px;
        }
        .input-box {
            max-width: 768px;
            margin: 0 auto;
            border-radius: var(--fr-radius);
            box-sizing: border-box;
        }

        #chatInput {
            width: 100%;
            border: none;
            outline: none;
            resize: none;
            font-size: var(--fr-fs-md);
            font-family: inherit;
            line-height: 1.5;
            max-height: 200px;
            box-sizing: border-box;
            background: transparent;
        }
        body.dark-mode #chatInput { color: var(--tone-88); }
        body.dark-mode #chatInput::placeholder { color: var(--tone-31); }

        .input-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 6px;
        }

        .input-left {
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;   /* 숨긴 날짜 입력(.case-date-input)의 달력이 칩 옆에 뜨게 */
        }
        /* 사안 기준일 칩의 날짜 입력 — 보이지 않게 칩 자리에 둔다(display:none 이면 일부 브라우저가 showPicker 를 거부한다) */
        .case-date-input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
        /* 사안 기준일 칩이 보이면 폰 폭(375·320)에서 세 칩이 한 줄에 안 든다 — 글자를 접지 않고(「웹/검/색」) 칩째 다음 줄로 내린다.
           칩이 숨은 화면(행위시 조회 꺼짐)은 두 칩이 한 줄에 들어 예전과 같다. 2026-10-20 e2e case-date/phone-* */
        .input-left:has(#caseDateChip:not([hidden])) { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
        .input-left:has(#caseDateChip:not([hidden])) .input-chip,
        .input-left:has(#caseDateChip:not([hidden])) .model-dropdown-trigger { white-space: nowrap; }

        /* Custom model dropdown */
        .model-dropdown {
            position: relative;
        }
        .model-dropdown-trigger {
            display: flex;
            align-items: center;
            border-radius: var(--fr-radius);
            cursor: pointer;
            transition: all var(--fr-dur) var(--fr-ease);
        }
        body.dark-mode .model-dropdown-trigger { border-color: var(--tone-23); }

        .model-dropdown-menu {
            display: none;
            position: absolute;
            bottom: calc(100% + 4px);
            left: 0;
            border-radius: var(--fr-radius);
            z-index: 20;
        }
        .model-dropdown-menu.active { display: block; }
        body.dark-mode .model-dropdown-menu { border-color: var(--tone-19); }

        .model-option {
            display: flex;
            flex-direction: column;
            width: 100%;
            border: none;
            background: none;
            font: inherit;
            color: inherit;
            text-align: left;
            cursor: pointer;
            transition: background var(--fr-dur) var(--fr-ease);
        }
        .model-option:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: -2px; }
        .model-option.disabled { opacity: 0.4; cursor: not-allowed; }

        .model-option-name {
            font-weight: 500;
        }


        .input-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #sendBtn {
            border: none;
            border-radius: var(--fr-radius);
            cursor: pointer;
            font-size: var(--fr-fs-md);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background var(--fr-dur) var(--fr-ease);
            flex-shrink: 0;
        }
        #sendBtn:disabled { background: var(--fr-rule-2); cursor: not-allowed; }
        /* 정지 — 빨강을 쓰지 않는다(디자인 시스템). 모양(■)과 접근성 이름(답변 생성 정지)이 성격을 말한다.
           색은 전송과 같은 잉크(디자인 v2 확정 ③ — 남색은 근거로 이어지는 것에만, 2026-10-05 남색 채움에서 바꿈).
           정지 요청 뒤에는 disabled 가 아니라 aria-disabled 라 초점이 남는다(ai-chat.js requestServerStop) */
        #sendBtn.stop-btn, body.dark-mode #sendBtn.stop-btn { background: var(--fr-btn); color: var(--fr-btn-ink); }
        #sendBtn.stop-btn:hover, body.dark-mode #sendBtn.stop-btn:hover { background: var(--fr-btn-hover); }
        #sendBtn.stop-btn[aria-disabled="true"], body.dark-mode #sendBtn.stop-btn[aria-disabled="true"] { background: var(--fr-ink-3); cursor: progress; }
        #sendBtn svg { display: block; }


        /* Info icon + tooltip under input */
        .input-footer-row {
            max-width: 768px;
            margin: 4px auto 0;
            display: flex;
            justify-content: center;
        }
        .info-tooltip-wrap {
            position: relative;
        }
        .info-icon-btn {
            background: none;
            border: none;
            color: var(--fr-ink-3);
            cursor: pointer;
            padding: 5px;
            min-width: 24px;
            min-height: 24px;
            border-radius: var(--fr-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color var(--fr-dur) var(--fr-ease);
        }
        .info-icon-btn:hover { color: var(--fr-ink-3); }
        /* 면책 고지라 잘리면 안 된다. nowrap 이던 시절 390px 폰에서 양쪽이 250px 넘게
           잘렸고 body 가 overflow:hidden 이라 스크롤로도 볼 수 없었다.
           폭: 안내 버튼이 입력창 아래 가운데라 가운데 정렬 그대로 화면 안에 든다. 좌우 여백 8px =
           100vw − 좌우 패딩 24 − 여백 16 (예전 92vw 는 360px 폰에서 여백 2px). 바닥 고정형(@media 600px)은
           홈 화면에서 툴팁이 버튼과 떨어진 바닥에 떠서 지웠다(2026-10-06 실측, ⑥-2). */
        .info-tooltip {
            display: none;
            position: absolute;
            bottom: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--tone-9);
            color: var(--tone-100);
            font-size: var(--fr-fs-xs);
            padding: 8px 12px;
            border-radius: var(--fr-radius);
            white-space: normal;
            width: max-content;
            max-width: min(calc(100vw - 40px), 420px);
            line-height: 1.5;
            text-align: left;
            z-index: 20;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .info-tooltip.visible { display: block; }
        body.dark-mode .info-tooltip { background: var(--tone-27); }

        .policy-links {
            display: flex;
            flex-wrap: wrap;            /* 링크 5개(연결 진단 추가) — 360px 폭에서 가로로 넘치지 않게 줄을 바꾼다 */
            gap: 2px 10px;
            min-width: 0;
            margin-left: 8px;
        }
        .policy-links a {
            font-size: var(--fr-fs-xs);
            color: var(--fr-ink-3);
            text-decoration: none;
        }
        .policy-links a:hover { text-decoration: underline; color: var(--fr-ink-2); }
        body.dark-mode .policy-links a:hover { color: var(--tone-57); }

        .ai-response-disclaimer {
            font-size: var(--fr-fs-xs);
            color: var(--fr-ink-3);
            margin-top: 6px;
        }

        /* Usage dot (in sidebar) */
        .usage-dot {
            width: 6px;
            height: 6px;
        }
        .usage-dot.warn, .usage-dot.empty { background: var(--fr-ochre); }

        .msg-cost-info {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
        }
        body.dark-mode .msg-cost-info { border-top-color: var(--tone-19); }

        /* 정지를 눌렀을 때 — 서버가 실제로 멈추기까지의 안내. 몇 초 걸린다는 사실을 말한다. */
        .stop-notice {
            display: flex;
            align-items: baseline;
            gap: 0.75rem;
            font-size: var(--fr-fs-xs);
            padding: 0.5rem 0.6rem;
            margin-top: 0.4rem;
        }
        .stop-notice-eta {
            margin-left: auto;
            white-space: nowrap;
        }
        body.dark-mode .stop-notice-eta { color: var(--tone-39); }

        /* 잘린 답변 경고. 답변이 결론 → … → 유의사항 순이라, 중간에 멈추면 결론만 남는다.
           그 상태가 완결된 답변처럼 보이면 안 되므로 본문 아래에서 분명히 말한다. */
        .truncation-warning {
            margin-top: 0.5rem;
        }
        /* 근거를 찾지 못한 답변 안내(ai-chat.js appendNoRefsNotice). 실패가 아니라 사실이라 회색 — 빨강·황토를 쓰지 않는다(표식은 v2 블록) */
        .no-refs-notice { text-align: left; }
        .no-refs-notice strong { display: block; margin-bottom: 2px; font-weight: 600; }
        .no-refs-notice a { font-weight: 600; }
        /* 다시 묻는 법 3줄(PUX-22, 시안 NoResults) */
        .no-refs-guide { margin-top: 0.5rem; }
        .no-refs-guide-title { font-weight: 600; }
        .no-refs-guide ul { margin: 2px 0 0; padding-left: 1.1rem; }
        .no-refs-guide li { margin: 1px 0; }
        /* 자료 요청(ai-chat.js buildRequestSheet) — 버튼은 강조색 테두리, 시트는 안내 블록 안에 펼친다 */
        .no-refs-ask { display: block; width: fit-content; margin-top: 0.5rem; border-radius: 2px; font: inherit; font-size: var(--fr-fs-xs); cursor: pointer; }
        body.dark-mode .no-refs-ask { border-color: var(--fr-accent); }
        /* 시트를 열면 버튼을 숨긴다(ai-chat.js ask.hidden) — 위의 display:block 이 [hidden] 을 덮으므로 따로 적는다 */
        .no-refs-ask[hidden] { display: none; }
        .no-refs-sheet { margin-top: 0.6rem; padding: 0.75rem; border: 1px solid var(--fr-rule); border-radius: 2px; background: var(--fr-paper-2); display: flex; flex-direction: column; gap: 0.4rem; }
        .no-refs-sheet-title { font-weight: 600; color: var(--fr-ink); }
        .no-refs-sheet label { font-size: var(--fr-fs-xs); font-weight: 600; color: var(--fr-ink-2); }
        body.dark-mode .no-refs-sheet label { color: var(--tone-88); }
        .no-refs-sheet input[type="text"] { height: 36px; padding: 0 0.6rem; border: 1px solid var(--fr-ink-4); border-radius: 2px; font: inherit; font-size: var(--fr-fs-xs); color: var(--fr-ink); background: var(--fr-paper-2); }
        body.dark-mode .no-refs-sheet input[type="text"] { border-color: var(--tone-44); }
        .no-refs-sheet-check { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; font-weight: 500 !important; }
        .no-refs-sheet-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--fr-accent); }
        .no-refs-sheet blockquote { margin: 0 0 0 1.4rem; padding: 0.4rem 0.6rem; border: 1px solid var(--fr-rule); background: var(--fr-paper-3); font-size: var(--fr-fs-xs); color: var(--fr-ink-2); white-space: pre-wrap; }
        body.dark-mode .no-refs-sheet blockquote { color: var(--tone-88); }
        .no-refs-sheet-hint { margin-left: 1.4rem; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .no-refs-sheet-status { font-size: var(--fr-fs-xs); color: var(--fr-ink-2); min-height: 1em; }
        body.dark-mode .no-refs-sheet-status { color: var(--tone-88); }
        .no-refs-sheet-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
        .no-refs-sheet-actions button { min-height: 34px; padding: 0 0.8rem; border: 1px solid var(--fr-ink-4); border-radius: 2px; background: var(--tone-100); color: var(--fr-ink-2); font: inherit; font-size: var(--fr-fs-xs); cursor: pointer; }
        .no-refs-sheet-actions button.primary { border-color: var(--fr-btn); background: var(--fr-btn); color: var(--fr-btn-ink); font-weight: 600; }
        .no-refs-sheet-actions button:disabled { opacity: 0.6; cursor: default; }
        body.dark-mode .no-refs-sheet-actions button { background: transparent; color: var(--tone-88); border-color: var(--tone-44); }
        .no-refs-sheet-done strong { display: block; color: var(--fr-ink); }
        /* 경고 다음에 올 행동. 입력창을 채우기만 하므로 강조하지 않는다. */
        .truncation-again {
            display: block;
            margin-top: 0.5rem;
            font-weight: 500;
            border-radius: var(--fr-radius);
            cursor: pointer;
        }
        body.dark-mode .truncation-again { border-color: var(--fr-ochre); }

        /* 비용 줄은 조용한 회색이지만, 배지는 회색에 묻히면 안 되는 사실만 올라온다.
           good = 사용자에게 유리한 사실(마진 없이 원가만), 그 외 = 금액의 이유(상한 도달). */
        .msg-cost-badge {
            border-radius: var(--fr-radius);
        }
        .msg-cost-badge.good { border-color: #C9D3DF; }
        body.dark-mode .msg-cost-badge { border-color: var(--tone-23); }
        body.dark-mode .msg-cost-badge.good { border-color: #3A4A5C; }

        .credits-btn {
            background: none;
            border: none;
            font-size: var(--fr-fs-xs);
            cursor: pointer;
            padding: 0;
            text-decoration-style: dotted;
        }
        body.dark-mode .credits-btn.low { color: var(--fr-ochre-ink); }

        .login-prompt-link {
            color: var(--fr-ink-3);
            cursor: pointer;
            text-decoration: underline;
            background: none;
            border: none;
            font-size: var(--fr-fs-xs);
            padding: 0;
        }
        .login-prompt-link:hover { color: var(--fr-ink-2); }

        /* ============================================================
         * Welcome Screen
         * ============================================================ */
        .welcome {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 24px;
            text-align: center;
            flex: 1;
        }
        .welcome-desc {
            margin: 0 0 28px;
        }
        /* 수록 규모 한 줄 — 안내문 바로 아래에 붙인다(안내문의 아래 여백을 이 줄이 대신 갖는다) */
        .welcome-scope { margin: -20px 0 28px; }
        .welcome-scope a { text-decoration: none; }
        .welcome-scope a:hover { text-decoration: underline; }
        /* 수록 규모 문장이 올 자리(ai-chat.js loadCoverageSummary). 같은 길이의 문장을 보이지 않게 앞에 두어 줄바꿈까지
           같게 잡는다 — 높이만 예약하면 화면 폭마다 줄 수가 달라 맞지 않는다. 텍스트가 아니라 CSS content 라
           색인·복사·스크린리더에 걸리지 않는다. 응답이 오거나 실패하면 JS 가 data-pending 을 뗀다. */
        .welcome-scope[data-pending]::before {
            content: '판례·해석례 00,000건 · 법령·행정규칙 000건 · 회계·감사기준 000건에서 찾습니다 · ';
            visibility: hidden;
        }
        body.dark-mode .welcome h1 { color: var(--tone-88); }

        /* 결제 안내 배너 (js/ai-chat.js showPaymentNotice) — 가상계좌 번호·입금 기한, 승인 실패의
           주문번호처럼 토스트로 흘려보내면 안 되는 것. 닫을 때까지 main 맨 위에 남는다. */
        .payment-notice {
            margin: 12px 16px 0;
            padding: 10px 14px;
            border: 1px solid var(--fr-rule-2);
            border-left: 3px solid var(--fr-ink-3);
            background: var(--fr-paper-3);
            font-size: var(--fr-fs-xs);
            line-height: 1.6;
            color: var(--fr-ink-2);
        }
        .payment-notice-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
        .payment-notice-close { background: none; border: none; font-size: var(--fr-fs-base); line-height: 1; color: var(--fr-ink-3); cursor: pointer; padding: 0 4px; }
        .payment-notice-close:hover { color: var(--fr-ink-2); }
        .payment-notice-line { word-break: break-all; }

        /* 사안형 예시 질의는 한 줄이 길다 — 두 열 카드로, 좁은 화면은 한 열 */
        .suggestions {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        @media (max-width: 600px) { .suggestions { grid-template-columns: 1fr; } }

        /* ============================================================
         * 초기 화면 (.main.is-home)
         *
         * 대화가 없을 때는 인사말·입력창·예시가 한 덩어리로 화면 가운데 선다.
         * 가운데 정렬을 .main 의 justify-content 로 하지 않는 이유: 그러면 모바일 헤더와
         * 툴바까지 같이 내려온다. auto 마진은 그 앞 형제들을 위에 남긴 채 남는 세로 공간만
         * 위아래로 나눠 갖는다.
         * 세로 여유가 없으면 auto 마진이 저절로 0 이 되고, 위(.chat-scroll)와
         * 아래(.home-below)가 각자 줄어들며 스크롤한다 — 입력창은 어느 크기에서도
         * 화면에서 밀려나지 않는다.
         * ============================================================ */
        .main.is-home .chat-scroll { flex: 0 1 auto; margin-top: auto; }
        .main.is-home .chat-content { min-height: 0; justify-content: flex-end; }
        .main.is-home .chat-container { padding-bottom: 0; gap: 0; }
        .main.is-home .welcome { flex: none; padding: 8px 24px 0; }
        .main.is-home .welcome h1 { margin-bottom: 10px; }
        .main.is-home .welcome-desc { margin-bottom: 0; max-width: 560px; }
        .main.is-home .input-wrapper { padding-top: 20px; }

        .home-below {
            flex: 0 1 auto;
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 18px 24px 0;
            box-sizing: border-box;
        }
        .home-below[hidden] { display: none; }   /* display:flex 가 [hidden] 을 이기지 않게 */
        .main.is-home .home-below { margin-bottom: auto; }
        /* 데이터 처리 한 줄(MKT-12) — 입력창 바로 아래 곁말. 읽혀야 하는 문장이라 글자색은 캡션 하한(--fr-ink-3) 아래로 내리지 않는다 */
        .home-data-note { max-width: 768px; text-align: center; word-break: keep-all; }
        .home-data-note a { text-decoration: none; white-space: nowrap; }
        .home-data-note a:hover { text-decoration: underline; }

        /* 사업자 정보 (전자상거래법 제10조). 이 앱은 body{height:100dvh;overflow:hidden}
           이라 <footer> 를 붙이면 화면 밖으로 밀린다 — 그래서 초기 화면 안에 둔다.
           면책 문구보다 한 단계 더 조용하게(글자 크기·색·폭은 아래 v2 블록의 .home-business). */
        .home-business {
            margin: 0 auto 20px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            line-height: 1.6;
            text-align: center;
        }

        /* ============================================================
         * 대화를 불러오는 동안 (골격 · 실패)
         *
         * 예전에는 클릭하고 응답이 올 때까지 화면이 그대로였다. 눌린 건지 아닌지
         * 알 수 없어서 사람들이 한 번 더 눌렀다. 골격은 "무엇이" 오는지도 같이 말한다 —
         * 왼쪽 정렬 덩어리는 답변, 오른쪽 짧은 덩어리는 내 질문이다.
         * ============================================================ */
        .chat-skeleton { display: flex; flex-direction: column; gap: 24px; padding: 8px 0; }
        .sk-msg { display: flex; flex-direction: column; gap: 9px; }
        .sk-msg.sk-user { align-items: flex-end; }
        .sk-line {
            height: 11px;
            width: 100%;
            border-radius: var(--fr-radius);
            background: var(--fr-rule);
            animation: sk-pulse 1.4s ease-in-out infinite;
        }
        .sk-msg.sk-user .sk-line { background: var(--fr-rule-2); height: 13px; border-radius: var(--fr-radius); }
        .sk-msg.sk-ai .sk-line:nth-child(2) { animation-delay: 0.12s; }
        .sk-msg.sk-ai .sk-line:nth-child(3) { animation-delay: 0.24s; }
        @keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
        @media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }

        .chat-load-error {
            margin: 24px auto;
            max-width: 480px;
            padding: 16px 18px;
            border: 1px solid var(--fr-rule);
            border-radius: var(--fr-radius);
            background: var(--fr-paper-3);
            text-align: center;
        }
        .chat-load-error p { margin: 0 0 12px; font-size: var(--fr-fs-xs); line-height: 1.55; color: var(--fr-ink-3); }
        .chat-load-retry {
            background: none;
            border: 1px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            padding: 6px 16px;
            font-size: var(--fr-fs-xs);
            color: var(--fr-ink-2);
            cursor: pointer;
            transition: all var(--fr-dur) var(--fr-ease);
        }
        .chat-load-retry:hover { border-color: var(--fr-ink-3); background: var(--fr-rule); }
        body.dark-mode .chat-load-error p { color: var(--tone-69); }
        body.dark-mode .chat-load-retry { border-color: var(--tone-31); }
        body.dark-mode .chat-load-retry:hover { border-color: var(--tone-44); }

        /* 화면에는 없고 스크린리더에만 읽히는 안내 */
        .sr-only {
            position: absolute;
            width: 1px; height: 1px;
            margin: -1px; padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0;
        }

        /* ============================================================
         * Modals
         * ============================================================ */
        /* 모달 바탕(디자인 시스템 v2) — 막은 --fr-scrim, 종이 + 떠 있는 층 그림자, 2px 모서리. 제목은 명조 24/300.
           들어올 때 위로 8px + 불투명도(패널 240ms, 곡선 하나). 색은 토큰이라 다크 모드 덮어쓰기가 없다 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--fr-scrim);
            z-index: 200;
            justify-content: center;
            align-items: center;
        }
        .modal-overlay.active { display: flex; }

        .modal {
            background: var(--fr-paper);
            color: var(--fr-ink);
            border-radius: var(--fr-radius);
            box-shadow: var(--fr-shadow-overlay);
            width: calc(100% - 32px);
            max-width: 420px;
            padding: 32px;
            box-sizing: border-box;
            position: relative;
            max-height: calc(100vh - 48px);
            overflow-y: auto;
        }
        .modal-overlay.active .modal { animation: fr-sheet-in var(--fr-dur-panel) var(--fr-ease) both; }
        @keyframes fr-sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) { .modal-overlay.active .modal { animation: none; } }

        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            background: none;
            border: none;
            border-radius: var(--fr-radius);
            color: var(--fr-ink-3);
            cursor: pointer;
            z-index: 1;
            transition: background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease);
        }
        .modal-close:hover { background: var(--fr-paper-3); color: var(--fr-ink); }
        .modal-close:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }

        .modal-title {
            margin: 0 40px 16px 0;
            font-family: var(--fr-serif);
            font-size: var(--fr-fs-2xl);
            font-weight: 300;
            letter-spacing: -0.02em;
            line-height: 1.3;
            color: var(--fr-ink);
        }
        .modal-title:focus { outline: none; }

        .modal-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 1rem;
            border-bottom: 2px solid var(--fr-rule);
        }
        body.dark-mode .modal-tabs { border-color: var(--tone-19); }

        .modal-tab {
            flex: 1;
            padding: 0.5rem;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            cursor: pointer;
            font-size: var(--fr-fs-xs);
            color: var(--fr-ink-3);
            transition: all var(--fr-dur) var(--fr-ease);
        }
        .modal-tab.active { color: var(--fr-ink); border-bottom-color: var(--fr-ink-2); }
        body.dark-mode .modal-tab { color: var(--tone-44); }

        .modal-form { display: none; }
        .modal-form.active { display: block; }

        .form-field { margin-bottom: 0.8rem; }
        /* 가입 동의 체크 (약관·개인정보처리방침) */
        .consent-row { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.2rem 0 0.8rem; font-size: var(--fr-fs-xs); line-height: 1.5; color: var(--fr-ink-3); cursor: pointer; }
        .consent-row input { margin: 0.2rem 0 0; flex-shrink: 0; }
        .consent-row a { color: var(--fr-ink-2); text-decoration: underline; }
        body.dark-mode .consent-row { color: var(--tone-69); }
        body.dark-mode .consent-row a { color: var(--tone-78); }
        .google-consent-note { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); text-align: center; margin: 0.5rem 0 0; line-height: 1.5; }
        .google-consent-note a { color: var(--fr-ink-3); text-decoration: underline; }
        /* 구글 첫 가입의 동의 창(#consentModal, PUX-07) */
        .consent-lead { font-size: var(--fr-fs-xs); line-height: 1.6; color: var(--fr-ink-2); margin: 0 0 1rem; word-break: keep-all; }
        .consent-lead strong { font-weight: 600; color: var(--fr-ink); word-break: break-all; }
        .consent-decline { display: block; margin: 0.8rem auto 0; background: none; border: none; padding: 0.3rem 0.5rem;
            font-size: var(--fr-fs-xs); font-family: inherit; color: var(--fr-ink-3); text-decoration: underline; cursor: pointer; }
        .consent-decline:hover { color: var(--fr-ink-2); }
        .consent-decline:disabled { opacity: 0.6; cursor: default; }
        body.dark-mode .consent-decline { color: var(--tone-69); }
        body.dark-mode .consent-decline:hover { color: var(--tone-88); }
        .form-field label {
            display: block;
            margin-bottom: 6px;
            font-size: var(--fr-fs-xs);
            font-weight: 500;
            color: var(--fr-ink-2);
        }

        .form-field input:not([type="checkbox"]):not([type="radio"]) {
            width: 100%;
            height: 44px;
            padding: 0 12px;
            border: 1px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            font-family: inherit;
            font-size: var(--fr-fs-md);
            outline: none;
            box-sizing: border-box;
            background: var(--fr-paper);
            color: var(--fr-ink);
            transition: border-color var(--fr-dur) var(--fr-ease), box-shadow var(--fr-dur) var(--fr-ease);
        }
        .form-field input::placeholder { color: var(--fr-ink-4); }
        .form-field input:focus { border-color: var(--fr-accent); box-shadow: 0 0 0 3px var(--fr-accent-tint); }

        /* 주 버튼은 잉크(강조 남색은 근거로 이어지는 것에만 — 색 하나에 의미 하나) */
        .form-submit {
            width: 100%;
            height: 44px;
            padding: 0 16px;
            border: none;
            border-radius: var(--fr-radius);
            background: var(--fr-btn);
            color: var(--fr-btn-ink);
            font-family: inherit;
            font-size: var(--fr-fs-md);
            font-weight: 500;
            cursor: pointer;
            transition: background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease);
        }
        .form-submit:hover { background: var(--fr-btn-hover); }
        .form-submit:disabled { background: var(--fr-paper-3); color: var(--fr-ink-4); cursor: not-allowed; }
        .form-submit:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }

        /* 오류 — 빨강을 쓰지 않는다(2026-10-05 결정 3). 황토 테두리 사각(답변의 "미확인" 표식과 같은 모양) + 짙은 황토 글자 */
        .form-error {
            position: relative;
            padding-left: 15px;
            color: var(--fr-ochre-ink);
            font-size: var(--fr-fs-sm);
            line-height: 1.6;
            margin-top: 8px;
            display: none;
        }
        .form-error::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border: 1px solid var(--fr-ochre); box-sizing: border-box; }
        .form-error.visible { display: block; }
        /* 성공 — 초록 대신 남색 체크 + 문장 */
        .form-success { margin: 8px 0; font-size: var(--fr-fs-sm); line-height: 1.6; color: var(--fr-accent); }
        .form-success::before { content: ''; display: inline-block; width: 4px; height: 8px; margin: 0 9px 0 2px; border: solid var(--fr-accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }

        .divider {
            display: flex;
            align-items: center;
            margin: 1rem 0;
            color: var(--fr-ink-3);
            font-size: var(--fr-fs-xs);
        }
        .divider::before, .divider::after {
            content: '';
            flex: 1;
            border-top: 1px solid var(--fr-rule);
        }
        body.dark-mode .divider::before, body.dark-mode .divider::after { border-color: var(--tone-19); }
        .divider span { margin: 0 0.8rem; }

        .google-btn {
            width: 100%;
            padding: 0.6rem;
            border: 1.5px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            background: var(--fr-paper-3);
            color: var(--fr-ink-2);
            font-size: var(--fr-fs-xs);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: all var(--fr-dur) var(--fr-ease);
        }
        .google-btn:hover { border-color: var(--fr-ink-3); background: var(--fr-rule); }
        body.dark-mode .google-btn:hover { border-color: var(--tone-39); }
        .google-btn svg { width: 18px; height: 18px; }

        /* ============================================================
         * 요금 창 · 충전 창 · 설정(일반·계정·개인정보보호·공유 링크·결제·사용량) — 디자인 시스템 v2 4단계.
         * 시안 SettingsGeneral·SettingsBilling·Modals(canvas LhRdoRo1FMNWuXM2aodf8u).
         * 색은 전부 --fr-* 토큰이라 다크 모드는 토큰이 바꾼다(body.dark-mode 덮어쓰기를 두지 않는다).
         * 빨강·초록 없음(2026-10-05 결정 3): 되돌릴 수 없는 삭제는 잉크 버튼 + 입력 확인, 성공은 남색, 주의는 황토.
         * 숫자(금액·날짜·토큰)는 tabular — 장부처럼 자리가 맞는다. 예전 인라인 style 은 여기 클래스로 옮겼고,
         * 마크업에 남은 style 은 ai-chat.js 가 여닫는 display:none 뿐이다.
         * ============================================================ */

        /* 요금 창 — 칸 상자 대신 위 1px 잉크 선 + 헤어라인 행 */
        .modal--pricing { max-width: 480px; }
        .pricing-tier { margin: 0 0 28px; }
        .pricing-tier-header { padding: 0 0 8px; border-bottom: 1px solid var(--fr-ink); }
        .pricing-tier-name { font-size: var(--fr-fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--fr-ink-3); }
        .pricing-tier-body { padding: 0; }
        .pricing-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--fr-rule); font-size: var(--fr-fs-md); }
        .pricing-label { color: var(--fr-ink-2); }
        .pricing-value { flex-shrink: 0; max-width: 58%; color: var(--fr-ink); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
        .pricing-row-sub { padding: 8px 0 10px; border-bottom: 1px solid var(--fr-rule); font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-3); }
        .pricing-row-sub[hidden] { display: none; }
        .pricing-note { margin: 10px 0; font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-2); }
        .pricing-footer { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--fr-rule); }
        .pricing-footer p { margin: 2px 0; font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-3); }
        .pricing-footer a { color: var(--fr-accent); font-weight: 500; text-decoration: none; }
        .pricing-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

        /* 충전 창 — 금액은 mono, 빠른 금액 네 칸은 고른 칸이 잉크(ai-chat.js updateChargePreview) */
        .modal--credit { max-width: 480px; }
        .credit-lead { margin: 0 0 20px; font-size: var(--fr-fs-md); line-height: 1.7; color: var(--fr-ink-2); }
        .charge-field { margin-bottom: 12px; }
        .charge-label { display: block; margin-bottom: 6px; font-size: var(--fr-fs-xs); font-weight: 500; color: var(--fr-ink-2); }
        .charge-input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: var(--fr-paper); color: var(--fr-ink);
            font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-size: var(--fr-fs-xl); box-sizing: border-box;
            transition: border-color var(--fr-dur) var(--fr-ease), box-shadow var(--fr-dur) var(--fr-ease); }
        .charge-input::placeholder { font-family: var(--fr-sans); font-size: var(--fr-fs-md); color: var(--fr-ink-4); }
        .charge-input:focus { outline: none; border-color: var(--fr-accent); box-shadow: 0 0 0 3px var(--fr-accent-tint); }
        .charge-preview { margin-top: 8px; font-size: var(--fr-fs-sm); line-height: 1.6; color: var(--fr-ink-2); }
        .charge-preview:empty { display: none; }
        .charge-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 20px; }
        .charge-preset { height: 36px; padding: 0; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: var(--fr-paper); color: var(--fr-ink);
            font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-size: var(--fr-fs-sm); cursor: pointer;
            transition: border-color var(--fr-dur) var(--fr-ease), background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease); }
        .charge-preset:hover { border-color: var(--fr-ink-3); background: var(--fr-paper-2); }
        .charge-preset.is-selected, .charge-preset.is-selected:hover { border-color: var(--fr-btn); background: var(--fr-btn); color: var(--fr-btn-ink); }
        .charge-preset:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        .charge-rate { margin-bottom: 12px; }
        .charge-virtual { margin: -4px 0 12px; }
        .charge-rate:empty, .charge-virtual:empty { display: none; }
        .toss-widget { margin-bottom: 12px; }
        .charge-buy { height: 48px; margin-top: 8px; font-size: var(--fr-fs-base); }
        .credit-legal--center { margin: 8px 0 0; text-align: center; }
        .credit-biz { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--fr-rule); text-align: center; }
        /* 베타 충전 닫힘 안내 — 주의라 황토 옅은 면 + 황토 사각 */
        .charge-disabled { position: relative; margin-bottom: 16px; padding: 12px 14px 12px 32px; background: var(--fr-ochre-tint); border: 0; border-radius: var(--fr-radius);
            font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink); }
        .charge-disabled::before { content: ''; position: absolute; left: 14px; top: 19px; width: 7px; height: 7px; background: var(--fr-ochre); }
        .charge-disabled[hidden] { display: none; }

        /* 설정 — 960×680 시트. 왼쪽 208px 탭(paper-2), 오른쪽 본문(제목 명조 28/300). 닫기 단추는 시트 오른쪽 위 */
        .settings-modal { display: flex; flex-direction: row; width: min(960px, calc(100% - 32px)); max-width: none; height: min(680px, calc(100vh - 48px)); max-height: none; padding: 0; overflow: hidden; }
        .settings-sidebar { flex: 0 0 208px; display: flex; flex-direction: column; gap: 2px; padding: 28px 14px; background: var(--fr-paper-2); border-right: 1px solid var(--fr-rule); box-sizing: border-box; overflow-y: auto; }
        .settings-sidebar-title { padding: 0 12px 18px; font-family: var(--fr-serif); font-size: var(--fr-fs-2xl); font-weight: 300; letter-spacing: -0.02em; color: var(--fr-ink); }
        .settings-nav-item { display: flex; align-items: center; flex: none; width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: var(--fr-radius); background: transparent;
            font-family: inherit; font-size: var(--fr-fs-md); color: var(--fr-ink-2); text-align: left; cursor: pointer;
            transition: background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease); }
        .settings-nav-item:hover { background: var(--fr-paper-3); color: var(--fr-ink); }
        .settings-nav-item.active { background: var(--fr-paper-3); color: var(--fr-ink); font-weight: 500; }
        .settings-nav-item:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: -2px; }
        .settings-content { flex: 1; min-width: 0; padding: 36px 48px 48px; overflow-y: auto; box-sizing: border-box; }
        .settings-section-title { margin: 0 40px 12px 0; font-family: var(--fr-serif); font-size: var(--fr-fs-2xl); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; color: var(--fr-ink); }
        .settings-note { margin: 0; max-width: 64ch; font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-2); }
        .settings-caption { margin: -6px 0 10px; font-size: var(--fr-fs-xs); line-height: 1.6; color: var(--fr-ink-3); }
        .settings-h { margin: 32px 0 12px; font-size: var(--fr-fs-base); font-weight: 600; color: var(--fr-ink); }
        .settings-empty { padding: 24px 0; font-size: var(--fr-fs-sm); color: var(--fr-ink-3); text-align: center; }
        /* 「자세히」 — 긴 설명은 첫 문장만 보이고 나머지는 접는다(details, 스크립트 없음). 접어도 DOM 에 그대로 있다 */
        .settings-more { margin: 2px 0 0; max-width: 64ch; }
        .settings-more > summary { display: inline-block; list-style: none; font-size: var(--fr-fs-sm); font-weight: 500; color: var(--fr-accent); cursor: pointer;
            text-decoration: underline; text-decoration-color: var(--fr-accent-line); text-underline-offset: 3px; }
        .settings-more > summary::-webkit-details-marker { display: none; }
        .settings-more > summary:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        .settings-more-close, .settings-more[open] .settings-more-open { display: none; }
        .settings-more[open] .settings-more-close { display: inline; }
        .settings-more-body { margin: 10px 0 0; padding: 12px 14px; background: var(--fr-paper-2); border-radius: var(--fr-radius); font-size: var(--fr-fs-sm); line-height: 1.75; color: var(--fr-ink-2); }
        .settings-subtitle { margin: 36px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--fr-rule); font-size: var(--fr-fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--fr-ink-3); }
        .settings-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 32px; padding: 18px 0; border-bottom: 1px solid var(--fr-rule); }
        .settings-row-main { flex: 1 1 320px; min-width: 0; }
        .settings-row-label { display: block; font-size: var(--fr-fs-base); font-weight: 500; color: var(--fr-ink); }
        .settings-row-desc { margin-top: 4px; max-width: 64ch; font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-2); }
        .settings-row-control { flex: none; padding-top: 2px; }
        /* 선택 상자 — 꺾쇠는 배경 그라디언트 두 조각(이미지·data: 없이, 색은 토큰) */
        .settings-select { height: 36px; max-width: 100%; padding: 0 34px 0 12px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius);
            background-color: var(--fr-paper); color: var(--fr-ink); font-family: inherit; font-size: var(--fr-fs-sm); cursor: pointer; box-sizing: border-box;
            -webkit-appearance: none; appearance: none;
            background-image: linear-gradient(45deg, transparent 50%, var(--fr-ink-3) 50%), linear-gradient(135deg, var(--fr-ink-3) 50%, transparent 50%);
            background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
        .settings-select:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        /* 스위치 — 체크박스는 시각적으로만 숨긴다(키보드 초점·스크린리더는 그대로). 켬 = 잉크 트랙 + 반전 손잡이 */
        .settings-switch { position: relative; display: inline-block; flex: none; width: 36px; height: 20px; vertical-align: middle; }
        .settings-switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
        .settings-switch-track { position: absolute; inset: 0; border-radius: var(--fr-radius); background: var(--fr-rule-2); cursor: pointer; transition: background var(--fr-dur) var(--fr-ease); }
        .settings-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 1px; background: var(--fr-paper);
            transition: transform var(--fr-dur) var(--fr-ease), background var(--fr-dur) var(--fr-ease); }
        .settings-switch input:checked + .settings-switch-track { background: var(--fr-btn); }
        .settings-switch input:checked + .settings-switch-track::after { transform: translateX(16px); background: var(--fr-btn-ink); }
        .settings-switch input:focus-visible + .settings-switch-track { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        .settings-kbd-list { list-style: none; margin: 12px 0 0; padding: 0; font-size: var(--fr-fs-sm); line-height: 2; color: var(--fr-ink-2); }
        .settings-kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--fr-rule-2); border-bottom-width: 2px; border-radius: var(--fr-radius);
            background: var(--fr-paper); font-family: var(--fr-mono); font-size: var(--fr-fs-xs); line-height: 1; color: var(--fr-ink); white-space: nowrap; vertical-align: 1px; box-sizing: border-box; }
        /* 선 버튼(작은) — 설정 안의 이동·보조 동작 */
        .settings-link-btn, .settings-cancel-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border: 1px solid var(--fr-rule-2);
            border-radius: var(--fr-radius); background: var(--fr-paper); font-family: inherit; font-size: var(--fr-fs-sm); font-weight: 500; line-height: 1; color: var(--fr-ink);
            text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box;
            transition: border-color var(--fr-dur) var(--fr-ease), background var(--fr-dur) var(--fr-ease); }
        .settings-link-btn[hidden] { display: none; }   /* display:inline-flex 가 [hidden] 을 이기지 않게 */
        .settings-link-btn:hover, .settings-cancel-btn:hover { border-color: var(--fr-ink-3); background: var(--fr-paper-2); color: var(--fr-ink); }
        .settings-link-btn:focus-visible, .settings-cancel-btn:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        .settings-btn-row { display: flex; gap: 8px; margin-top: 14px; }
        .settings-btn-row > button { flex: 1; }
        /* 인라인 확인 행(초기화). display:flex 가 [hidden] 을 이기지 않게 따로 막는다 */
        .settings-inline-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--fr-rule); font-size: var(--fr-fs-sm); color: var(--fr-ink-2); }
        .settings-inline-confirm[hidden] { display: none; }
        /* 개인정보보호 — 제목 + 본문 블록. 법적 고지라 접지 않고 읽기 좋은 폭(64자)으로만 */
        .settings-block { padding: 18px 0; border-bottom: 1px solid var(--fr-rule); }
        .settings-block:last-child { border-bottom: none; }
        .settings-block-title { margin-bottom: 6px; font-size: var(--fr-fs-base); font-weight: 500; color: var(--fr-ink); }
        .settings-block-body { max-width: 64ch; font-size: var(--fr-fs-sm); line-height: 1.75; color: var(--fr-ink-2); }
        .settings-block-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
        .delete-keep-note { margin-bottom: 14px; }

        /* 계정 탭 */
        .settings-info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--fr-rule); font-size: var(--fr-fs-md); }
        .settings-info-label { flex: none; color: var(--fr-ink-3); }
        .settings-info-value { color: var(--fr-ink); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
        .settings-info-row--stacked { flex-direction: column; align-items: flex-start; gap: 4px; }
        .settings-info-row--stacked .settings-info-value { max-width: 64ch; font-weight: 400; font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-2); text-align: left; }
        .settings-pw { max-width: 380px; margin-top: 32px; }   /* 위 행의 밑줄이 이미 경계라 선을 하나 더 긋지 않는다 */
        .settings-pw-title { margin-bottom: 14px; font-size: var(--fr-fs-base); font-weight: 500; color: var(--fr-ink); }
        .settings-modal .form-field { margin-bottom: 12px; }
        .settings-modal .form-field input:not([type="checkbox"]):not([type="radio"]) { height: 40px; }
        .settings-submit { width: auto; height: 36px; margin-top: 4px; padding: 0 16px; font-size: var(--fr-fs-sm); }

        /* 되돌릴 수 없는 일(계정 삭제·모든 대화 삭제·초기화) — 빨강 대신 잉크. 여는 버튼은 잉크 선,
           확정 버튼은 입력 확인을 마쳐야 켜지고(disabled → 잉크 채움), 경고는 회색 면 + 잉크 사각 */
        .btn-danger { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border: 1px solid var(--fr-ink); border-radius: var(--fr-radius);
            background: var(--fr-paper); font-family: inherit; font-size: var(--fr-fs-sm); font-weight: 500; color: var(--fr-ink); cursor: pointer; box-sizing: border-box;
            transition: background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease), border-color var(--fr-dur) var(--fr-ease); }
        .btn-danger:hover { background: var(--fr-btn); border-color: var(--fr-btn); color: var(--fr-btn-ink); }
        .btn-danger:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        .delete-confirm-section .btn-danger, .settings-inline-confirm .btn-danger { background: var(--fr-btn); border-color: var(--fr-btn); color: var(--fr-btn-ink); }
        .delete-confirm-section .btn-danger:hover, .settings-inline-confirm .btn-danger:hover { background: var(--fr-btn-hover); border-color: var(--fr-btn-hover); }
        .btn-danger:disabled, .btn-danger:disabled:hover,
        .delete-confirm-section .btn-danger:disabled, .delete-confirm-section .btn-danger:disabled:hover { border-color: var(--fr-rule-2); background: var(--fr-paper-2); color: var(--fr-ink-4); cursor: not-allowed; }
        .settings-danger-zone { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--fr-rule); }
        .settings-danger-title { margin-bottom: 6px; font-size: var(--fr-fs-base); font-weight: 500; color: var(--fr-ink); }
        .settings-danger-desc { max-width: 64ch; margin-bottom: 14px; font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-2); }
        .delete-confirm-section { display: none; max-width: 520px; margin-top: 16px; }
        .delete-confirm-section.active { display: block; }
        .delete-warning { position: relative; margin-bottom: 16px; padding: 12px 14px 12px 32px; background: var(--fr-paper-2); border-radius: var(--fr-radius); font-size: var(--fr-fs-sm); line-height: 1.75; color: var(--fr-ink); }
        .delete-warning::before { content: ''; position: absolute; left: 14px; top: 19px; width: 7px; height: 7px; background: var(--fr-ink); }
        .delete-refund-info { margin-bottom: 16px; font-size: var(--fr-fs-sm); }
        .delete-refund-title { padding-bottom: 8px; border-bottom: 1px solid var(--fr-ink); font-size: var(--fr-fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--fr-ink-3); }
        .delete-refund-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--fr-rule); color: var(--fr-ink-2); }
        .delete-refund-row[hidden] { display: none; }
        .delete-refund-row > span:last-child { flex: none; font-variant-numeric: tabular-nums; color: var(--fr-ink); white-space: nowrap; }
        .delete-refund-row.total { border-bottom: 0; font-weight: 500; color: var(--fr-ink); }
        .delete-min-notice { margin-top: 8px; font-size: var(--fr-fs-sm); line-height: 1.6; color: var(--fr-ochre-ink); }
        .delete-small-row { margin-top: 10px; }

        /* 결제 — 잔액은 원화 먼저 크게(mono 44), 달러·환산 근거는 아래 한 줄. 거래 내역은 장부(헤어라인, 날짜·금액 tabular) */
        .billing-balance { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-top: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--fr-rule); }
        .billing-balance-main { min-width: 0; }
        .billing-balance-label { font-size: var(--fr-fs-xs); font-weight: 500; color: var(--fr-ink-3); }
        .billing-balance-value { margin-top: 8px; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-size: var(--fr-fs-4xl); line-height: 1.05; letter-spacing: -0.03em; color: var(--fr-ink); }
        .billing-balance-sub { margin: 10px 0 0; max-width: 440px; font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-3); }
        .billing-balance-sub:empty { display: none; }
        .billing-ledger { border-top: 1px solid var(--fr-rule-2); }
        .billing-tx-row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--fr-rule); font-size: var(--fr-fs-sm); }
        .tx-date { flex: none; min-width: 6.4rem; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .tx-type { flex: none; min-width: 2.6rem; font-weight: 500; color: var(--fr-ink-2); }
        .tx-type.is-money { color: var(--fr-ink); }
        .tx-desc { flex: 1; min-width: 0; color: var(--fr-ink-2); overflow-wrap: anywhere; }
        .tx-amount { flex: none; text-align: right; white-space: nowrap; }
        .tx-amount-main { display: block; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--fr-ink); }
        .tx-amount-sub { display: block; margin-top: 2px; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .tx-status { flex: none; min-width: 3.4rem; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); text-align: center; }
        .tx-status.is-pending { color: var(--fr-ink); font-weight: 500; }
        .tx-btn { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: var(--fr-paper);
            font-family: inherit; font-size: var(--fr-fs-xs); font-weight: 500; color: var(--fr-ink-2); white-space: nowrap; cursor: pointer;
            transition: border-color var(--fr-dur) var(--fr-ease), background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease); }
        .tx-btn:hover { border-color: var(--fr-ink-3); background: var(--fr-paper-2); color: var(--fr-ink); }
        .tx-btn:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        .tx-btn--ink, .tx-btn--ink:hover { border-color: var(--fr-btn); background: var(--fr-btn); color: var(--fr-btn-ink); }
        .tx-btn--ink:hover { border-color: var(--fr-btn-hover); background: var(--fr-btn-hover); }
        .billing-pg { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
        .billing-pg:empty { display: none; }
        .tx-page { order: -1; margin-right: auto; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .refund-inline-form { margin: 0 0 4px; padding: 14px 16px; background: var(--fr-paper-2); border-radius: var(--fr-radius); font-size: var(--fr-fs-sm); }
        .refund-title { margin-bottom: 10px; font-weight: 500; color: var(--fr-ink); }
        .refund-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; color: var(--fr-ink-2); }
        .refund-amount-note { flex-basis: 100%; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .tx-input { width: 8.5rem; height: 32px; padding: 0 10px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: var(--fr-paper); color: var(--fr-ink);
            font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-size: var(--fr-fs-sm); box-sizing: border-box; }
        .tx-textarea { display: block; width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: var(--fr-paper);
            color: var(--fr-ink); font-family: inherit; font-size: var(--fr-fs-sm); line-height: 1.6; resize: vertical; box-sizing: border-box; }
        .tx-input:focus, .tx-textarea:focus { outline: none; border-color: var(--fr-accent); box-shadow: 0 0 0 3px var(--fr-accent-tint); }
        .refund-actions { display: flex; gap: 8px; margin-top: 10px; }
        .refund-error { margin-top: 8px; font-size: var(--fr-fs-sm); font-weight: 500; color: var(--fr-ochre-ink); }
        .refund-error:empty { display: none; }

        /* 사용량 — 기간은 세 칸 세그먼트, 합계는 위 1px 잉크 선 + mono, 표는 헤어라인, 막대는 단일 강조색 */
        .usage-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-right: 40px; }
        .usage-head .settings-section-title { margin: 0; }
        .usage-periods { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); }
        .usage-period-btn { height: 28px; padding: 0 12px; border: 0; border-radius: 1px; background: transparent; font-family: inherit; font-size: var(--fr-fs-sm); color: var(--fr-ink-2); cursor: pointer;
            transition: background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease); }
        .usage-period-btn:hover { color: var(--fr-ink); }
        .usage-period-btn.active { background: var(--fr-btn); color: var(--fr-btn-ink); }
        .usage-period-btn:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        .usage-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 28px 0 8px; }
        .usage-summary-card { min-width: 0; padding: 16px 0 0; border-top: 1px solid var(--fr-ink); }
        .usage-summary-label { font-size: var(--fr-fs-xs); font-weight: 500; color: var(--fr-ink-3); }
        .usage-summary-value { margin-top: 8px; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-size: var(--fr-fs-2xl); line-height: 1.1; letter-spacing: -0.02em; color: var(--fr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .usage-summary-sub { margin-top: 6px; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .usage-summary-sub:empty { display: none; }
        .usage-table { margin-bottom: 8px; font-size: var(--fr-fs-sm); }
        .usage-model-row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--fr-rule); }
        .usage-model-head { padding: 0 0 10px; border-bottom: 1px solid var(--fr-rule-2); font-size: var(--fr-fs-xs); }
        .um-name { flex: 1; min-width: 0; font-weight: 500; color: var(--fr-ink); }
        .um-num { flex: none; width: 56px; text-align: right; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; color: var(--fr-ink-2); }
        .um-wide { width: 72px; }
        .um-cost { width: 84px; color: var(--fr-ink); }
        .usage-model-head .um-name, .usage-model-head .um-num { font-family: inherit; font-weight: 500; color: var(--fr-ink-3); }
        .usage-daily-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--fr-rule); font-size: var(--fr-fs-sm); }
        .ud-day { flex: none; width: 48px; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; color: var(--fr-ink-3); }
        .ud-num { flex: none; width: 32px; text-align: right; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; color: var(--fr-ink-2); }
        .usage-bar-container { flex: 1; height: 8px; background: var(--fr-paper-3); border-radius: 1px; overflow: hidden; }
        .usage-bar { height: 100%; min-width: 1px; background: var(--fr-accent); border-radius: 1px; }
        .ud-cost { flex: none; width: 76px; text-align: right; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; color: var(--fr-ink); }

        /* 폰 — 설정은 화면 전체 시트. 탭은 위 가로 줄(닫기 단추 자리를 비운다), 장부 행은 설명을 둘째 줄로 */
        @media (max-width: 640px) {
            .modal { padding: 24px 20px; }
            /* 탭 줄은 닫기 단추 앞(오른쪽 56px)에서 끊는다 — 스크롤 영역의 padding 은 끝 여백일 뿐 가림이 아니라서 탭이 단추 밑으로 흘렀다.
               줄 끝 24px 는 흐리게(옆으로 더 있다는 표시) */
            .settings-modal { flex-direction: column; width: 100%; height: 100%; max-height: none; padding: 0; border-radius: 0; box-shadow: none; background: var(--fr-paper-2); }
            .settings-sidebar { flex: none; flex-direction: row; gap: 4px; margin-right: 56px; padding: 12px 12px 10px; overflow-x: auto; overflow-y: hidden; border-right: 0;
                -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
            .settings-content { background: var(--fr-paper); border-top: 1px solid var(--fr-rule); }
            .settings-sidebar-title { display: none; }
            .settings-nav-item { width: auto; white-space: nowrap; }
            .settings-content { padding: 24px 16px 40px; }
            .settings-section-title { margin-right: 0; font-size: var(--fr-fs-2xl); }
            .settings-row { gap: 10px; }
            .settings-row-main { flex-basis: 100%; }
            .billing-balance-value { font-size: var(--fr-fs-3xl); }
            .billing-tx-row { flex-wrap: wrap; row-gap: 4px; }
            .tx-desc { order: 9; flex-basis: 100%; }
            .tx-amount { margin-left: auto; }
            .usage-head { padding-right: 0; }
            .usage-tiles { gap: 12px; }
            .usage-summary-value { font-size: var(--fr-fs-xl); }
            .charge-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        /* Toast notification */
        .toast {
            position: fixed;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%) translateY(4rem);
            background: var(--tone-9);
            color: var(--tone-100);
            padding: 0.6rem 1.2rem;
            border-radius: var(--fr-radius);
            font-size: var(--fr-fs-xs);
            z-index: 500;
            opacity: 0;
            transition: all var(--fr-dur-panel) var(--fr-ease);
            pointer-events: none;
            /* 인증 안내처럼 긴 토스트가 폰에서 잘리던 자리 (구 white-space:nowrap) */
            white-space: normal;
            max-width: min(92vw, 420px);
            line-height: 1.5;
            text-align: center;
            box-sizing: border-box;
        }
        .toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
        .toast .toast-link { color: var(--tone-100); text-decoration: underline; white-space: nowrap; }

        /* ============================================================
         * Responsive
         * ============================================================ */
        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                top: 0; left: 0; bottom: 0;
                z-index: 100;
                transform: translateX(-100%);
                transition: transform var(--fr-dur-panel) var(--fr-ease);
                width: 280px;
            }
            .sidebar.visible { transform: translateX(0); }
            .sidebar.collapsed { transform: translateX(-100%); width: 280px; }

            .sidebar-open-btn { display: none !important; }
            .mobile-header { display: flex; }

            .chat-container { padding: 12px 16px; }
            .input-wrapper { padding: 0 12px 12px; }
            .input-box { border-radius: var(--fr-radius); }
        }

        @media (max-width: 480px) {
            .suggestions { align-items: center; }
        }
        /* ============================================================
         * 근거 자료 패널 (Phase 3, refs-panel.js)
         * .app 의 세 번째 flex 자식. 기본 닫힘, .app.refs-open 이면 열림.
         * 폭은 --refs-w 하나로만 정해진다. 아래 두 줄의 420px·380px 은 사용자가 아직
         * 조절한 적 없을 때의 기본값이고, panel-resize.js 가 --refs-w 를 쓰면 그쪽이 이긴다.
         * ≥1100px 420px · 900~1099px 380px · <900px 아래에서 올라오는 시트(72vh).
         *
         * 좁은 쪽 기본값이 360px 이던 때는 .refs-body 가 368px 로 삐져나와 8px 이 잘렸다
         * (min-width: 340px 이 content-box 라 좌우 패딩 28 을 더해야 하고, .refs-panel 이
         *  overflow: hidden 이라 조용히 잘린다). 실측으로 확인하고 바닥인 369px 위로 올렸다.
         * min-width 340 을 낮추는 쪽은 안 된다 — 표 토글 둘과 탭 머리가 한 줄에 들어오는
         * 최소가 그 값이다.
         * ============================================================ */
        .refs-panel {
            width: 0;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-left: 1px solid var(--fr-rule);
            transition: width var(--fr-dur) var(--fr-ease);
            min-height: 0;
            position: relative;   /* .refs-resizer 의 기준 */
        }
        .app.refs-open .refs-panel { width: var(--refs-w, 420px); }
        @media (max-width: 1099px) { .app.refs-open .refs-panel { width: var(--refs-w, 380px); } }
        body.dark-mode .refs-panel { border-color: var(--tone-16); }

        /* 폭 조절 손잡이 — panel-resize.js 가 만들어 붙인다.
           왼쪽 사이드바(오른쪽 모서리)와 오른쪽 근거 패널(왼쪽 모서리)이 같은 모양을 쓴다.
           모양은 .panel-resizer 에, 어느 쪽 모서리인지만 개별 클래스에 둔다.

           처음에는 쉼 상태에 아무것도 그리지 않았다. "테두리와 col-resize 커서면 충분하고
           상시 노출되는 그립은 업무 도구에 군더더기다" 가 근거였는데, 첫 사용자가 기능이
           있는 줄도 몰랐다. 폭 10px 짜리 띠 위에 커서를 정확히 올려야만 존재를 알 수 있으니
           당연한 결과다 — 발견할 방법이 없는 affordance 는 없는 것과 같다.
           그래서 짧은 그립(::after)은 회색으로 항상 남기고, 강조선(::before)만 가리킬 때
           뜬다. 지연 60ms 를 두는 이유는 각주 호버와 같다: 패널로 들어가는 길에 이 띠를
           스쳐 갈 때 깜빡이지 않게. 나갈 때·잡을 때는 즉시. */
        .panel-resizer {
            position: absolute;
            top: 0; bottom: 0;
            width: 12px;
            z-index: 3;
            cursor: col-resize;
            touch-action: none;   /* 포인터 드래그가 스크롤 제스처로 새지 않게 */
        }
        .refs-resizer { left: 0; }
        .sidebar-resizer { right: 0; }
        /* 접힌 사이드바는 폭이 0 이라 잡을 것이 없다 */
        .sidebar.collapsed .sidebar-resizer { display: none; }

        .panel-resizer::before,
        .panel-resizer::after {
            content: '';
            position: absolute;
            transition: opacity var(--fr-dur) var(--fr-ease) 0.06s,
                        background-color 0.16s cubic-bezier(.2, 0, 0, 1) 0.06s,
                        height 0.16s cubic-bezier(.2, 0, 0, 1) 0.06s,
                        margin-top 0.16s cubic-bezier(.2, 0, 0, 1) 0.06s;
        }
        /* 강조선은 테두리를 '덮는다'. 테두리 자체를 굵히면 그 순간 본문이 1px 밀린다 */
        .panel-resizer::before {
            top: 0; bottom: 0; width: 2px;
            background: var(--fr-accent);
            opacity: 0;
        }
        .refs-resizer::before { left: 0; }
        .sidebar-resizer::before { right: 0; }

        /* 그립은 쉼 상태에도 보인다. 조용한 회색이라 눈을 끌지는 않지만
           "여기를 잡을 수 있다" 는 것은 보고 알 수 있다. */
        .panel-resizer::after {
            top: 50%; width: 3px; height: 28px; margin-top: -14px; border-radius: 2px;
            background: var(--fr-rule-2);
            opacity: 1;
        }
        .refs-resizer::after { left: 4px; }
        .sidebar-resizer::after { right: 4px; }

        /* is-dragging 은 잡은 손잡이 하나에만 붙는다. 앱 전체의 is-resizing 으로 켜면
           사이드바를 끄는 동안 근거 패널 손잡이까지 같이 빛난다. */
        .panel-resizer:hover::before, .panel-resizer:hover::after,
        .panel-resizer:focus-visible::before, .panel-resizer:focus-visible::after,
        .panel-resizer.is-dragging::before, .panel-resizer.is-dragging::after {
            opacity: 1;
            background: var(--fr-accent);
            transition-delay: 0s;
        }
        .panel-resizer:hover::after, .panel-resizer:focus-visible::after,
        .panel-resizer.is-dragging::after { height: 40px; margin-top: -20px; }
        .panel-resizer:focus { outline: none; }   /* 초점 표시는 위 강조선이 대신한다 */
        body.dark-mode .panel-resizer::after { background: var(--tone-31); }
        body.dark-mode .panel-resizer:hover::before, body.dark-mode .panel-resizer:hover::after,
        body.dark-mode .panel-resizer:focus-visible::before,
        body.dark-mode .panel-resizer:focus-visible::after,
        body.dark-mode .panel-resizer.is-dragging::before,
        body.dark-mode .panel-resizer.is-dragging::after { background: #8fa6bf; }

        /* 드래그 중. 폭 전이가 켜져 있으면 패널이 커서를 0.2s 늦게 따라와 고무줄처럼 보인다 */
        .app.is-resizing { cursor: col-resize; user-select: none; }
        .app.is-resizing .refs-panel, .app.is-resizing .sidebar { transition: none; }

        .refs-head {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 8px 8px 0 12px;
            border-bottom: 1px solid var(--fr-rule);
            flex-shrink: 0;
            min-width: 340px;
        }
        body.dark-mode .refs-head { border-color: var(--tone-16); }
        .refs-tab {
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            padding: 8px 10px;
            cursor: pointer;
            white-space: nowrap;
        }
        .refs-tab.active { font-weight: 600; }
        body.dark-mode .refs-tab:hover { color: var(--tone-78); }
        body.dark-mode .refs-tab.active { color: var(--tone-93); border-bottom-color: var(--tone-78); }
        .refs-tab-count { margin-left: 3px; }
        .refs-tab-count:empty { display: none; }
        .refs-close {
            margin-left: auto;
            background: none;
            border: none;
            color: var(--fr-ink-3);
            cursor: pointer;
            font-size: var(--fr-fs-md);
            padding: 4px 8px;
            border-radius: var(--fr-radius);
        }
        .refs-close:hover { background: var(--fr-rule); color: var(--fr-ink); }

        /* 답변 전환기 (refs-panel.js renderTurns, 2026-09-28 신고 #15).
           후속 질문을 하면 패널이 새 답변으로 넘어가 "첫 답변의 근거가 사라졌다" 로 보였다. 데이터는 남아 있었고
           되돌아갈 길이 답변 아래 칩뿐이었다. 탭 아래 한 줄에 "답변 N / 전체 · 그 답변의 질문" 을 두고 이전·다음·목록으로
           바꾼다. 강조색은 목록의 현재 답변 하나에만(왼쪽 2px + 연한 바탕) — 단일 강조색 규칙. */
        .refs-turns {
            position: relative;   /* 목록(.refs-turn-list)의 기준 */
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 5px 8px;
            border-bottom: 1px solid var(--fr-rule);
            flex-shrink: 0;
            min-width: 340px;
            font-size: var(--fr-fs-xs);
        }
        .refs-turns[hidden] { display: none; }
        body.dark-mode .refs-turns { border-color: var(--tone-16); }
        .refs-turn-step {
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            padding: 0;
            background: none;
            border: none;
            border-radius: 2px;
            color: var(--fr-ink-3);
            font-size: var(--fr-fs-base);
            line-height: 1;
            cursor: pointer;
            font-family: inherit;
        }
        .refs-turn-step:hover:not(:disabled) { background: var(--fr-rule); color: var(--fr-ink); }
        .refs-turn-step:disabled { color: var(--fr-ink-4); cursor: default; }
        .refs-turn-now {
            flex: 1;
            min-width: 0;
            position: relative;
            display: flex;
            align-items: baseline;
            gap: 8px;
            padding: 4px 22px 4px 6px;
            background: none;
            border: none;
            border-radius: 2px;
            text-align: left;
            cursor: pointer;
            font: inherit;
            color: var(--fr-ink);
        }
        /* 목록이 열린다는 표시 — 아래를 향한 작은 삼각형(접힘 요약의 삼각형과 같은 모양) */
        .refs-turn-now::after {
            content: '';
            position: absolute;
            right: 8px;
            top: 50%;
            margin-top: -2px;
            border-top: 4px solid var(--fr-ink-3);
            border-left: 3.5px solid transparent;
            border-right: 3.5px solid transparent;
            transition: transform var(--fr-dur) var(--fr-ease);
        }
        .refs-turn-now[aria-expanded="true"]::after { transform: rotate(180deg); }
        .refs-turn-now:hover, .refs-turn-now[aria-expanded="true"] { background: var(--fr-rule); }
        .refs-turn-step:focus-visible, .refs-turn-now:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: -2px; }
        .refs-turn-num { flex-shrink: 0; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
        .refs-turn-of { font-weight: 400; color: var(--fr-ink-3); }
        .refs-turn-q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fr-ink-3); }
        body.dark-mode .refs-turn-step { color: var(--tone-73); }
        body.dark-mode .refs-turn-step:disabled { color: var(--tone-31); }
        body.dark-mode .refs-turn-step:focus-visible, body.dark-mode .refs-turn-now:focus-visible { outline-color: #8fa6bf; }

        .refs-turn-list {
            position: absolute;
            left: 8px;
            right: 8px;
            top: calc(100% + 2px);
            z-index: 6;
            max-height: min(320px, 50vh);
            overflow-y: auto;
            padding: 4px 0;
            background: var(--fr-paper-2);
            border: 1px solid var(--fr-rule-2);
            border-radius: 2px;
            box-shadow: 0 6px 18px rgba(22, 24, 29, 0.10);
        }
        .refs-turn-list[hidden] { display: none; }
        .refs-turn-opt {
            display: flex;
            align-items: baseline;
            gap: 8px;
            width: 100%;
            padding: 7px 10px 7px 8px;
            background: none;
            border: none;
            border-left: 2px solid transparent;
            text-align: left;
            cursor: pointer;
            font: inherit;
            font-size: var(--fr-fs-xs);
            color: var(--fr-ink-2);
        }
        .refs-turn-opt:hover { background: var(--fr-rule); }
        .refs-turn-opt:focus-visible { outline: none; background: var(--fr-rule); box-shadow: inset 0 0 0 1px var(--fr-ink-4); }
        .refs-turn-opt.is-current { border-left-color: var(--fr-accent); background: #EDF1F6; color: var(--fr-accent); }
        .refs-turn-opt-num { flex-shrink: 0; min-width: 1.4em; font-variant-numeric: tabular-nums; color: var(--fr-ink-3); }
        .refs-turn-opt.is-current .refs-turn-opt-num { color: var(--fr-accent); font-weight: 600; }
        .refs-turn-opt-q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .refs-turn-opt-count { flex-shrink: 0; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); font-variant-numeric: tabular-nums; }
        /* 근거가 없는 답변 — 고를 수는 있다(무엇이 없는지 확인하는 것도 답이다). 글자만 한 단계 물린다 */
        .refs-turn-opt.is-empty .refs-turn-opt-q, .refs-turn-opt.is-empty .refs-turn-opt-count { color: var(--fr-ink-4); }
        body.dark-mode .refs-turn-list { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
        body.dark-mode .refs-turn-opt.is-current { border-left-color: #8fa6bf; background: #26303b; color: var(--tone-93); }
        body.dark-mode .refs-turn-opt.is-current .refs-turn-opt-num { color: #8fa6bf; }
        body.dark-mode .refs-turn-opt.is-empty .refs-turn-opt-q, body.dark-mode .refs-turn-opt.is-empty .refs-turn-opt-count { color: var(--tone-44); }

        .refs-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 12px 14px 20px;
            font-size: var(--fr-fs-xs);
            color: var(--fr-ink);
            min-width: 340px;
            /* 조문 렌더의 레일/본문 폭 분기(@container 560px). 패널이 넓어지는 날 그대로 살아난다 */
            container-type: inline-size;
        }
        .refs-empty { padding: 24px 8px; text-align: center; color: var(--fr-ink-3); font-size: var(--fr-fs-xs); line-height: 1.5; }
        .refs-empty-act { margin-top: 10px; }
        /* 이월(refs-carry.js) — 이번 답변이 검색 없이 앞 답변의 근거를 다시 인용했을 때 한 번 밝히는 줄. 사실이라 회색 사각 표식
           (개선점 C3 — 예전 회색 왼쪽 2px 띠) */
        .refs-carry-note {
            margin: 0 0 12px;
            font-size: var(--fr-fs-xs);
            line-height: 1.5;
            color: var(--fr-ink-3);
        }
        .refs-carry-note::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; border-radius: 1px; background: var(--fr-ink-4); }
        body.dark-mode .refs-carry-note { color: var(--tone-73); }
        /* 이월한 근거의 출처 라벨 — "답변 N에서" · "DB 대조". 조용한 회색 꼬리표 */
        .refs-origin {
            display: inline-block;
            margin-top: 4px;
            padding: 0 5px;
            border: 1px solid var(--fr-rule-2);
            border-radius: 2px;
            font-size: var(--fr-fs-xs);
            font-weight: 400;
            line-height: 1.5;
            color: var(--fr-ink-3);
        }
        .doc-card-via .refs-origin { margin: 0 6px 0 0; }
        .refs-item-note { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .refs-error { padding: 16px; color: var(--fr-ochre-ink); font-size: var(--fr-fs-xs); }
        .refs-section-title {
            margin: 14px 0 6px;
        }
        .refs-section-title:first-child { margin-top: 0; }

        /* 검색은 됐지만 답변이 인용하지 않은 근거 — 접어 두되 버리지 않는다 */
        .refs-uncited {
            margin-top: 18px;
            padding-top: 12px;
            border-top: 1px solid var(--fr-rule);
        }
        .refs-uncited > summary {
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .refs-uncited > summary::-webkit-details-marker { display: none; }
        .refs-uncited > summary::before {
            content: '';
            width: 0; height: 0;
            border-left: 4px solid currentColor;
            border-top: 3px solid transparent;
            border-bottom: 3px solid transparent;
            transition: transform var(--fr-dur) var(--fr-ease);
        }
        .refs-uncited[open] > summary::before { transform: rotate(90deg); }
        .refs-uncited-note {
            margin: 8px 0 4px;
            line-height: 1.5;
        }
        body.dark-mode .refs-uncited { border-top-color: var(--tone-31); }

        /* 인용 검증 요약 */
        .refs-check--warn { border-color: var(--fr-ochre); }
        .refs-check ul { margin: 6px 0 4px; padding-left: 16px; }
        .refs-check li { margin: 2px 0; }
        .refs-check code { font-size: var(--fr-fs-xs); background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: var(--fr-radius); }
        body.dark-mode .refs-check { border-color: var(--tone-19); }
        body.dark-mode .refs-check--warn { border-color: var(--fr-ochre); }
        body.dark-mode .refs-check code { background: rgba(255,255,255,0.1); }

        /* 근거 항목 (문서 단위) */
        .refs-item {
            margin-bottom: 8px;
        }
        body.dark-mode .refs-item { border-color: var(--tone-19); }
        .refs-item-head {
            display: block;
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            cursor: pointer;
            color: inherit;
            font: inherit;
        }
        .refs-item-title { display: block; }
        .refs-item-case { display: block; margin-top: 3px; line-height: 1.4; }
        .refs-item-sub { display: block; margin-top: 2px; }
        .refs-para { display: flex; gap: 6px; margin: 4px 0; }
        .refs-para-num { flex-shrink: 0; min-width: 1.2em; }
        .refs-para-num:empty { display: none; }
        .refs-para-text, .law-para-text { min-width: 0; overflow-wrap: anywhere; }
        .refs-item-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

        .refs-btn {
            display: inline-block;
            border: 1px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            cursor: pointer;
            text-decoration: none;
            line-height: 1.3;
            font-family: inherit;
        }
        .refs-btn:hover { text-decoration: none; }

        /* 상세 */
        .refs-detail-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
        .refs-back {
            flex-shrink: 0;
            background: none;
            border: 1px solid var(--fr-rule-2);
            border-radius: var(--fr-radius);
            color: var(--fr-ink-3);
            font-size: var(--fr-fs-xs);
            padding: 4px 8px;
            cursor: pointer;
            font-family: inherit;
        }
        .refs-back:hover { border-color: var(--fr-ink-4); color: var(--fr-ink); }
        body.dark-mode .refs-back { color: var(--tone-73); }
        .refs-detail-title { line-height: 1.35; padding-top: 3px; }
        .refs-detail-sub { font-weight: 400; margin-top: 2px; }
        .law-article { border-radius: var(--fr-radius); }
        body.dark-mode .law-article { border-color: var(--tone-19); }
        .law-para { display: flex; gap: 8px; padding: 6px 4px; border-radius: var(--fr-radius); }
        .law-para + .law-para { border-top: 1px solid var(--fr-rule); }
        body.dark-mode .law-para + .law-para { border-color: var(--tone-18); }
        /* 인용된 항: 테두리 없이 배경만. 좌우로 삐져나오는 배경은 box-shadow 라 들여쓰기 계산에 끼지 않는다 */
        .law-para--cited + .law-para, .law-para + .law-para--cited { border-top-color: transparent; }
        .law-para-num { flex-shrink: 0; color: var(--fr-ink-3); min-width: 1.3em; }
        .law-para-num:empty { display: none; }
        .law-para-text { white-space: pre-wrap; word-break: break-word; }
        .law-related { margin: 4px 0 0; padding-left: 18px; font-size: var(--fr-fs-xs); color: var(--fr-ink-2); }
        /* 조 보기 안 "이 조를 가리키는 부칙" — 누르면 그 부칙 조(문단 보기)로 */
        .law-addenda li { margin: 2px 0; }
        .law-addenda-link { background: none; border: 0; padding: 0; font: inherit; color: var(--fr-ink-2); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--fr-rule-2); text-underline-offset: 2px; }
        .law-addenda-link:hover { color: var(--fr-ink); text-decoration-color: var(--fr-ink-3); }
        body.dark-mode .law-addenda-link { color: var(--tone-84); text-decoration-color: var(--tone-39); }
        body.dark-mode .law-addenda-link:hover { color: var(--tone-100); }
        /* 시행 예정 개정 (refs-panel.js pendingFlagHtml·pendingChangesHtml) — "주의" 라 황토 왼쪽 2px. 빨강·초록 금지:
           들어오는 문구는 강조색 밑줄, 빠지는 문구는 흐린 취소선(숫자 강조 mark.ref-num 의 연한 바탕과 겹치지 않게 바탕은 안 쓴다) */
        .law-pending-flag { margin: 0 0 10px; padding: 6px 10px; font-size: var(--fr-fs-xs); line-height: 1.55; }
        .law-pending-flag .law-addenda-link { margin-left: 4px; }
        .law-pending { margin-top: 8px; padding: 8px 10px; }
        /* 답변 이후 바뀐 근거(refs-panel.js answerTimeHtml, 2026-10-10 D-04 ②) — 알림 줄은 시행 예정과 같은 황토, 답변 당시 문구는 .law-pending 블록 */
        .refs-answer-time .law-pending { margin: -4px 0 10px; }
        .refs-answer-time-copy[hidden] { display: none; }
        .law-pending-head { font-size: var(--fr-fs-xs); color: var(--fr-ink-2); margin-bottom: 4px; }
        body.dark-mode .law-pending-head { color: var(--tone-84); }
        ins.law-ins { text-decoration: underline; text-decoration-color: var(--fr-accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; color: inherit; }
        del.law-del { color: var(--fr-ink-3); text-decoration: line-through; text-decoration-color: var(--fr-ink-4); }
        body.dark-mode del.law-del { color: var(--tone-44); text-decoration-color: var(--tone-44); }
        mark.ref-num { padding: 0 1px; border-radius: 2px; }

        /* 조문 줄 단위 렌더(refs-text.js · refs-panel.js paraTextHtml, tax/law 만).
           선행 공백 0/2/4/6 → 깊이 0/1/2/3 의 매달린 들여쓰기(padding-left + 음수 text-indent).
           원문은 명조 14px/1.9(디자인 v2 개선점 B2, 2026-10-05) — 레일·본문 폭 같은 크기, 깊이 간격만 폭에 따라 다르다.
           표의 출처: 처음 사양(디자이너 2026-09-06)은 레일 12px — 깊이 간격 1em, 기호 칸 1.5/1.58/1.75/1.92em,
           본문 폭(560px 이상) 13px — 간격 1.385em, 기호 칸 1.54/1.62/1.77/1.92em. 그 em 을 14px 로 옮긴 값이다.
           명조(Hahmlet) 14px 실측 기호 폭으로 확인했다: 「① 」17.5 · 「1. 」15.5(「10. 」24.6 은 예전처럼 조금 넘친다) ·
           「가. 」21.5 · 「1) 」16.2(「10) 」25.7) — 칸이 기호보다 좁은 자리는 두 자리 호뿐이다(2026-10-05 Chrome 실측, 글꼴 실린 화면의 span 폭). */
        .law-para-text--lines { white-space: normal; font-size: var(--fr-fs-md); line-height: 1.9; }
        .law-line { white-space: normal; overflow-wrap: anywhere; }
        .law-line--d0 { padding-left: 21px; text-indent: -21px; }
        .law-line--d1 { padding-left: 36px; text-indent: -22px; }
        .law-line--d2 { padding-left: 52px; text-indent: -24px; }
        .law-line--d3 { padding-left: 69px; text-indent: -27px; }
        .law-line--gap { margin-top: 0.55em; }

        /* 박스 표·계산식 블록. 원문(<pre>)과 표/테두리 제거를 함께 그려 두고 data-mode 로 하나만 보인다.
           글꼴은 박스 문자를 전각으로 그리는 것이어야 테두리가 맞는다(refs-panel.js 가 첫 박스에서 Nanum Gothic
           Coding 을 주입하고 폭을 잰 뒤에야 원문 모드를 연다). */
        .law-box { margin: 6px 0 4px; text-indent: 0; }
        .law-box-tools { display: flex; justify-content: flex-end; margin-bottom: 4px; }
        .law-box-btn {
            background: var(--fr-paper-3); border: 1px solid var(--fr-rule-2); color: var(--fr-ink-3);
            font-size: var(--fr-fs-xs); line-height: 1.4; padding: 2px 7px; cursor: pointer; font-family: inherit;
        }
        .law-box-btn:first-child { border-radius: var(--fr-radius) 0 0 var(--fr-radius); }
        .law-box-btn:last-child { border-radius: 0 var(--fr-radius) var(--fr-radius) 0; margin-left: -1px; }
        .law-box-btn:hover { color: var(--fr-ink); }
        .law-box-btn.is-active { background: var(--fr-paper-3); color: var(--fr-ink); border-color: var(--fr-rule-2); position: relative; }
        body.dark-mode .law-box-btn { color: var(--tone-69); }
        body.dark-mode .law-box-btn.is-active { background: var(--tone-23); border-color: var(--tone-31); }
        .law-box[data-mode="raw"] .law-box-view--alt, .law-box[data-mode="alt"] .law-box-view--raw { display: none; }
        .law-box-pre {
            margin: 0; padding: 8px 10px;
            background: var(--fr-paper-3); border: 1px solid var(--fr-rule); border-radius: var(--fr-radius);
            overflow-x: auto; white-space: pre; tab-size: 4;
            font-family: 'Nanum Gothic Coding', 'D2Coding', 'IBM Plex Mono', monospace;
            font-size: 11px; /* 단계 밖: 박스 표 — refs-panel.js 가 칸 수에 맞춰 BOX_FONT_SIZES 로 덮어쓴다 */ line-height: 1.25; color: var(--fr-ink);
        }
        .law-box-pre--plain { border-color: transparent; }
        /* 표 모드(박스 글꼴 폴백)의 글자는 원문 줄(14px)을 따르지 않는다 — 칸이 많아 예전 크기(레일 12·본문 13)를 지킨다 */
        .law-box-table { border-collapse: collapse; width: 100%; font-size: var(--fr-fs-xs); line-height: 1.5; }
        .law-box-table th, .law-box-table td { border: 1px solid var(--fr-rule-2); padding: 4px 7px; text-align: left; vertical-align: top; }
        .law-box-table th { background: var(--fr-rule); font-weight: 600; color: var(--fr-ink-2); }
        .law-box-note { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); margin-top: 3px; }
        @container (min-width: 560px) {
            /* 글자는 레일과 같은 14px/1.9, 깊이 간격만 넓게(1.385em = 19px) — 위 주석의 표 출처 */
            .law-line--d0 { padding-left: 22px; text-indent: -22px; }
            .law-line--d1 { padding-left: 42px; text-indent: -23px; }
            .law-line--d2 { padding-left: 64px; text-indent: -25px; }
            .law-line--d3 { padding-left: 85px; text-indent: -27px; }
            .law-box-table { font-size: var(--fr-fs-sm); }
            /* .law-box-pre 의 글꼴은 여기서 키우지 않는다. 박스 아트는 폭이 고정된 콘텐츠라 자리가 넓어졌다고 글자를 키우면
               필요 폭이 뛰어 "넓혔더니 원문이 사라지는" 불연속이 생긴다(90~97셀). 크기는 refs-panel.js 가 "들어오는 가장 큰
               글꼴"(12 → 11px)로 정해 inline 으로 박는다. */
        }

        .refs-ext { margin-top: 12px; font-size: var(--fr-fs-xs); }
        .refs-ext a { color: var(--fr-ink-2); text-decoration: underline; }
        /* 출처 표시(서버 source_attribution — 「출처: 법제처 국가법령정보센터」, 2026-10-09). 원문 링크 줄과 같은 크기·톤, 링크가 아니다 */
        .refs-attr { margin-top: 6px; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); line-height: 1.45; }
        .refs-item-body .refs-attr, .doc-card .refs-attr { margin-top: 4px; }
        .case-title { font-size: var(--fr-fs-xs); font-weight: 600; color: var(--fr-ink); line-height: 1.45; margin-bottom: 6px; }
        .case-summary { border-radius: var(--fr-radius); }
        body.dark-mode .case-summary { border-color: var(--tone-19); }
        .case-summary p { margin: 0 0 6px; }
        .case-summary p:last-child { margin-bottom: 0; }
        .case-content { white-space: normal; }
        .case-content p { margin: 0 0 8px; }
        /* 본문이 없는 사건. 회색 면 — 사실이지 경고가 아니다(빨강·황토를 쓰지 않는 이유, 면은 v2 블록).
           예전에는 「전문」 머리 밑이 그냥 빈칸이라 고장인지 원래 없는 건지 알 수 없었다. */
        .case-empty {
            padding: 10px 12px;
            font-size: var(--fr-fs-xs);
            line-height: 1.55;
        }
        /* 심판결정례 섹션([재결요지] [주문] [청구취지] [이유]) 소제목 칩 */
        .case-section { margin-top: 10px; }
        .case-section:first-child { margin-top: 0; }
        .case-section-head {
            display: inline-block; margin-bottom: 4px; border-radius: var(--fr-radius);
            font-weight: 600; letter-spacing: 0.03em;
        }
        /* 「표시용 정리」(심판결정례, opt-in) */
        .case-tidy { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); cursor: pointer; }
        .case-tidy input { margin: 0; }
        .case-tidy-note { color: var(--fr-ink-3); font-size: var(--fr-fs-xs); }
        body.dark-mode .case-tidy { color: var(--tone-69); }
        /* 접기 — 높이 220ms 전환, 접힌 동안 아래 36% 를 mask 로 가린다 */
        .fold { overflow: hidden; transition: height var(--fr-dur-panel) var(--fr-ease); }
        .fold.is-collapsed {
            -webkit-mask-image: linear-gradient(to bottom, var(--tone-0) 64%, transparent 100%);
            mask-image: linear-gradient(to bottom, var(--tone-0) 64%, transparent 100%);
        }
        .fold-btn {
            display: inline-block; margin-top: 4px; padding: 2px 0; background: none; border: none;
            color: var(--fr-ink-3); font-size: var(--fr-fs-xs); font-family: inherit; cursor: pointer;
            text-decoration: underline; text-underline-offset: 2px;
        }
        .fold-btn:hover { color: var(--fr-ink); }
        body.dark-mode .fold-btn { color: var(--tone-69); }
        @media (prefers-reduced-motion: reduce) { .fold { transition: none; } }
        /* 심판결정례 이유 문단의 깊이(2026-09-06 디자이너 사양, refs-panel.js caseParagraphsHtml).
           들여쓰기만 — 조문의 매달린 들여쓰기는 쓰지 않는다(마커 없는 문단의 첫 줄이 튀어나오고, 깊이 5까지 폭이
           비싸고, 문단이 길다). 간격이 주 신호: 문단 사이 0.55em, 직전 문단보다 얕아진 문단(--up)은 0.9em.
           들여쓰기는 보조로 레일 깊이당 12px, 본문 폭(560px 이상) 깊이당 16px. 정리로 만든 문단은 깊이 0. 레이아웃만, 색 없음. */
        .case-content .case-para { margin: 0.55em 0 0; }
        .case-content .case-para--up { margin-top: 0.9em; }
        .case-content .case-para:first-child, .case-content .case-section-head + .case-para { margin-top: 0; }
        .case-content .case-para--d1 { padding-left: 12px; }
        .case-content .case-para--d2 { padding-left: 24px; }
        .case-content .case-para--d3 { padding-left: 36px; }
        .case-content .case-para--d4 { padding-left: 48px; }
        .case-content .case-para--d5 { padding-left: 60px; }
        @container (min-width: 560px) {
            .case-content .case-para--d1 { padding-left: 16px; }
            .case-content .case-para--d2 { padding-left: 32px; }
            .case-content .case-para--d3 { padding-left: 48px; }
            .case-content .case-para--d4 { padding-left: 64px; }
            .case-content .case-para--d5 { padding-left: 80px; }
        }

        /* 문서 카드 */
        .doc-card { margin-bottom: 8px; }
        body.dark-mode .doc-card { border-color: var(--tone-19); }
        .doc-card-head { display: flex; align-items: flex-start; gap: 7px; }
        .doc-card-title { font-weight: 600; line-height: 1.4; }
        .doc-card-meta, .doc-card-via { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); margin-top: 3px; }
        .doc-card-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
        .doc-badge {
            flex-shrink: 0;
            font-size: var(--fr-fs-xs);
            font-weight: 700;
            letter-spacing: 0.03em;
            padding: 2px 5px;
            border-radius: var(--fr-radius);
            border: 1px solid var(--fr-rule-2);
            margin-top: 2px;
            font-family: var(--fr-mono);
        }
        .doc-badge--excerpt, .doc-badge--index { font-family: inherit; }
        /* 국세청 책자 발췌·목차 색인 (refs-panel.js docExcerptsHtml) — 인용문처럼 왼쪽 선(1px, 아래 v2 블록 「.doc-excerpt, body.dark-mode .doc-excerpt」), 출처는 작게 */
        .doc-excerpt { margin-top: 7px; padding: 5px 0 5px 9px; }
        .doc-excerpt-text { white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
        .doc-excerpt-cite { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); margin-top: 3px; }
        .doc-excerpt-note { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); margin-top: 6px; }
        .doc-index { margin-top: 7px; }
        .doc-index-line { font-size: var(--fr-fs-xs); line-height: 1.5; color: var(--fr-ink-2); padding: 2px 0; }
        body.dark-mode .doc-index-line { color: var(--tone-84); }

        /* 문서 뷰어 (bids.html 의 .doc-* 와 같은 뼈대) */
        .doc-viewer-actions { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
        .doc-viewer { border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); overflow: hidden; }
        .viewer-empty { padding: 2.2rem 1rem; text-align: center; color: var(--fr-ink-3); font-size: var(--fr-fs-xs); }
        .doc-bar {
            display: flex; align-items: center; gap: 0.6rem;
            padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--fr-rule);
            font-size: var(--fr-fs-xs); color: var(--fr-ink-3); background: var(--fr-paper-3);
        }
        body.dark-mode .doc-bar { border-color: var(--tone-22); }
        .doc-count { color: var(--fr-ink-2); }
        .doc-hint { margin-left: auto; color: var(--fr-ink-3); }
        .doc-pages {
            height: calc(100vh - 220px); min-height: 320px; overflow-y: auto; background: var(--fr-paper-3);
            padding: 0.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
        }
        .doc-page { width: 100%; background: var(--tone-100); box-shadow: 0 1px 4px rgba(0,0,0,.14); position: relative; }
        .doc-page svg, .doc-page canvas { display: block; width: 100%; height: auto; }
        /* pdf.js 텍스트 레이어 — canvas 위에 투명 글자를 얹어 선택·복사·Ctrl+F 를 살린다 (pdf_viewer.css 발췌) */
        .doc-page .textLayer {
            position: absolute; inset: 0; overflow: clip; opacity: 1;
            line-height: 1; text-align: initial;
            letter-spacing: normal; word-spacing: normal;
            -webkit-text-size-adjust: none; text-size-adjust: none;
            forced-color-adjust: none; transform-origin: 0 0;
            caret-color: CanvasText; z-index: 0; color-scheme: only light;
            --min-font-size: 1;
            --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
            --min-font-size-inv: calc(1 / var(--min-font-size));
        }
        .doc-page .textLayer span, .doc-page .textLayer br {
            color: transparent; position: absolute; white-space: pre;
            cursor: text; transform-origin: 0% 0%; user-select: text;
        }
        .doc-page .textLayer > :not(.markedContent),
        .doc-page .textLayer .markedContent span:not(.markedContent) {
            z-index: 1; --font-height: 0;
            font-size: calc(var(--text-scale-factor) * var(--font-height));
            --scale-x: 1; --rotate: 0deg;
            transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
        }
        .doc-page .textLayer .markedContent { display: contents; }
        .doc-page .textLayer ::selection { background: rgba(0,90,200,.28); color: transparent; }
        .doc-page .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
        .doc-page .textLayer.selecting .endOfContent { top: 0; }

        /* 웹 카드 */
        .web-card { margin-bottom: 8px; }
        body.dark-mode .web-card { border-color: var(--tone-19); }
        .web-card-title { font-weight: 600; text-decoration: none; line-height: 1.4; }
        .web-card-title:hover { text-decoration: underline; }
        .web-card-snippet { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); margin-top: 4px; line-height: 1.45; }
        body.dark-mode .web-card-snippet { color: var(--tone-69); }

        /* 툴바 토글 */
        .refs-toggle-count {
            display: inline-block;
            line-height: 16px;
            text-align: center;
        }
        .refs-toggle-count[hidden] { display: none; }
        .refs-backdrop { display: none; }

        /* 본문 장식: 인용 링크·칩·결론·면책 */
        .ai-content a.cite-ref {
            cursor: pointer;
        }
        .ai-content a.cite-ref:hover { border-bottom-color: #2b5a8a; }
        body.dark-mode .ai-content a.cite-ref { border-bottom-color: rgba(138, 180, 232, 0.4); }
        .ai-content a.cite-ref--unverified { border-bottom-style: dashed; border-bottom-color: var(--fr-ochre); }
        .refs-chips { display: flex; flex-wrap: wrap; }
        .refs-chip {
            border-radius: var(--fr-radius);
            cursor: pointer;
            font-family: inherit;
        }
        .refs-chips.active .refs-chip { border-color: var(--fr-ink-4); }
        body.dark-mode .refs-chip { border-color: var(--tone-23); }
        .ai-content .answer-conclusion h2, .ai-content .answer-conclusion h3 { margin-top: 0; }
        .ai-content .answer-conclusion > :last-child { margin-bottom: 0; }
        body.dark-mode .ai-content p.answer-disclaimer { border-color: var(--tone-19); }
        .citation-check-inline { margin-top: 8px; }
        .citation-check-inline button { background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

        /* 좁은 화면: 아래에서 올라오는 시트. 높이 86%(개선점 I2 — 72% 일 때는 시트 위로 보이는 답변 줄보다 근거가 잘렸다),
           위에 손잡이 막대(36×4, 끌어내려 닫기). 손잡이는 넓은 화면에서 숨는다 */
        .refs-grip { display: none; }
        @media (max-width: 899px) {
            .refs-grip { display: flex; flex: none; justify-content: center; padding: 8px 0 4px; touch-action: none; cursor: grab; }
            .refs-grip span { width: 36px; height: 4px; border-radius: 2px; background: var(--fr-rule-2); }
            .refs-panel {
                position: fixed;
                left: 0; right: 0; bottom: 0;
                width: 100% !important;
                height: 86vh;
                height: 86dvh;
                transform: translateY(100%);
                transition: transform var(--fr-dur-panel) var(--fr-ease);
                border-left: none;
                border-top: 1px solid var(--fr-rule);
                border-radius: var(--fr-radius) var(--fr-radius) 0 0;
                z-index: 1200;
                box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
            }
            .app.refs-open .refs-panel { transform: translateY(0); }
            .refs-head, .refs-turns, .refs-body { min-width: 0; }
            /* 시트는 화면 전체를 쓴다. 조절할 폭이 없으므로 손잡이도 없다
               (panel-resize.js 도 <900px 에서는 아무 일 안 한다 — 여기는 보험) */
            .refs-resizer, .sidebar-resizer { display: none; }
            .refs-backdrop {
                display: none;
                position: fixed; inset: 0;
                background: rgba(0,0,0,0.3);
                z-index: 1199;
            }
            .app.refs-open .refs-backdrop { display: block; }
            .doc-pages { height: calc(86vh - 130px); height: calc(86dvh - 130px); }
            .refs-head { touch-action: none; }   /* 머리 줄(탭 사이 빈 곳)도 끌어내리기 손잡이 — 브라우저 당겨서 새로고침이 가로채지 않게 */
        }

        /* ============================================================
         * 연결 진단 (net-diag.js) — 단계의 왼쪽 2px 로만 성격을 가른다: 회색=확인됨, 황토=문제, 강조색=확인 중.
         * 빨강·초록은 쓰지 않는다 — "문제" 도 막다른 길이 아니라 할 일(허용 요청·결과 보내기)이 딸린 결과다.
         * 근거 패널 시트(z 1200)·피드백 팝업(600) 위에 선다: 답변 오류 안내에서 바로 열린다.
         * ============================================================ */
        #netDiagModal { z-index: 1300; }
        .nd-modal { max-width: 520px; padding: 1.4rem 1.4rem 1.2rem; }
        .nd-intro { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); line-height: 1.6; margin: -0.4rem 0 0.9rem; }
        .nd-steps { list-style: none; margin: 0 0 0.9rem; padding: 0; }
        /* 단계·판정의 상태는 왼쪽 색띠가 아니라 상태 글자 앞 7px 사각(개선점 C3) — 회색 정상, 황토 문제, 남색 확인 중, 옅은 회색 건너뜀·대기.
           글자(정상·문제·…)가 늘 함께라 색만으로 뜻을 가르지 않는다 */
        .nd-step { padding: 0.45rem 0 0.45rem 0.75rem; margin-bottom: 0.35rem; background: var(--fr-paper-3); }
        .nd-step-state::before, .nd-verdict-label::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px; border-radius: 1px; background: var(--fr-ink-4); }
        .nd-step[data-state="warn"] .nd-step-state::before, .nd-verdict[data-state="warn"] .nd-verdict-label::before { background: var(--fr-ochre); }
        .nd-step[data-state="run"] .nd-step-state::before { background: var(--fr-accent); }
        .nd-step[data-state="skip"] .nd-step-state::before, .nd-step[data-state="wait"] .nd-step-state::before { background: var(--fr-rule-2); }
        .nd-step-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
        .nd-step-label { font-size: var(--fr-fs-xs); font-weight: 600; color: var(--fr-ink); }
        .nd-step-host { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); overflow-wrap: anywhere; }
        .nd-step-state { margin-left: auto; padding-right: 0.6rem; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); white-space: nowrap; }
        .nd-step[data-state="warn"] .nd-step-state { color: #8a5a22; font-weight: 600; }
        .nd-step[data-state="run"] .nd-step-state { color: var(--fr-accent); }
        .nd-step-text { margin-top: 0.15rem; padding-right: 0.6rem; font-size: var(--fr-fs-xs); line-height: 1.55; color: var(--fr-ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
        .nd-verdict { background: var(--fr-paper-3); padding: 0.7rem 0.8rem; margin-bottom: 0.8rem; }
        .nd-verdict-label { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); margin-bottom: 0.15rem; }
        .nd-verdict-title { font-size: var(--fr-fs-sm); font-weight: 600; color: var(--fr-ink); margin-bottom: 0.35rem; }
        .nd-verdict p { font-size: var(--fr-fs-xs); color: var(--fr-ink-2); line-height: 1.6; margin: 0 0 0.35rem; overflow-wrap: anywhere; }
        .nd-verdict-at { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); font-variant-numeric: tabular-nums; }
        .nd-sub { display: block; font-size: var(--fr-fs-xs); font-weight: 600; color: var(--fr-ink-3); margin: 0 0 0.3rem; }
        .nd-it { margin-bottom: 0.8rem; }
        .nd-pre { margin: 0 0 0.5rem; padding: 0.6rem 0.7rem; max-height: 220px; overflow: auto; background: var(--fr-paper-3); border: 1px solid var(--fr-rule-2); border-radius: 2px; font-family: inherit; font-size: var(--fr-fs-xs); line-height: 1.55; color: var(--fr-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
        .nd-link-btn { display: block; background: none; border: none; padding: 0; margin: 0 0 0.8rem; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); text-decoration: underline; cursor: pointer; }
        .nd-link-btn[hidden], .nd-primary[hidden] { display: none; }
        .nd-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
        .nd-primary { padding: 0.35rem 0.8rem; border: 1px solid var(--fr-btn); border-radius: var(--fr-radius); background: var(--fr-btn); color: var(--fr-btn-ink); font-size: var(--fr-fs-xs); line-height: 1.3; cursor: pointer; }
        .nd-primary:hover { border-color: var(--fr-btn-hover); background: var(--fr-btn-hover); }
        .nd-primary:disabled, .nd-modal .settings-link-btn:disabled { opacity: 0.5; cursor: default; }
        .nd-actions .nd-primary { margin-left: auto; }
        .nd-guest, .nd-note { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); line-height: 1.55; margin: 0.6rem 0 0; }
        .nd-guest a, .nd-note a { color: var(--fr-ink-2); text-decoration: underline; }
        .nd-send { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--fr-rule); }
        .nd-send textarea { width: 100%; box-sizing: border-box; margin-bottom: 0.5rem; border: 1px solid var(--fr-rule-2); border-radius: 2px; padding: 0.45rem 0.6rem; font-size: var(--fr-fs-xs); font-family: inherit; resize: vertical; background: var(--fr-paper-3); color: var(--fr-ink); }
        .nd-details summary { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); cursor: pointer; margin-bottom: 0.4rem; }
        .nd-send .nd-note { margin: 0 0 0.6rem; }
        .nd-status { font-size: var(--fr-fs-xs); color: var(--fr-ink-2); line-height: 1.55; margin: 0.6rem 0 0; }
        .nd-status:empty { display: none; }
        body.dark-mode .nd-step[data-state="run"] .nd-step-state { color: #8fa6bf; }
        body.dark-mode .nd-step[data-state="warn"] .nd-step-state { color: #d3a36a; }
        body.dark-mode .nd-send { border-color: var(--tone-19); }
        body.dark-mode .nd-link-btn, body.dark-mode .nd-details summary { color: var(--tone-69); }
        @media (max-width: 480px) {
            .nd-modal { width: calc(100% - 32px); padding: 1.1rem 1rem 1rem; }
            .nd-actions .nd-primary { margin-left: 0; }
        }


        /* ============================================================
         * 2026-10-03 UX·접근성 정합 (진단 PUX-03·05·06·08·13·17·18, 사용자 결정 D5)
         * ============================================================ */
        /* 키보드 초점 — 강조색 2px. 마우스 클릭에는 안 그린다(:focus-visible). 자기 초점 표시를 가진 요소(.refs-*·리사이저)는 그쪽이 이긴다 */
        button:focus-visible, a:focus-visible, [tabindex]:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        body.dark-mode button:focus-visible, body.dark-mode a:focus-visible, body.dark-mode [tabindex]:focus-visible,
        body.dark-mode select:focus-visible, body.dark-mode summary:focus-visible { outline-color: #8fa6bf; }
        .panel-resizer:focus-visible { outline: none; }   /* 리사이저는 자기 강조선이 초점 표시다 */
        .modal-title[tabindex="-1"]:focus { outline: none; }   /* 모달을 열 때 초점을 받는 제목 — 조작하는 요소가 아니다 */
        .conversation-item:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: -2px; }
        body.dark-mode .conversation-item:focus-visible { outline-color: #8fa6bf; }

        /* 베타 표시(PUX-03) — 강조색 테두리의 작은 이름표. 경고가 아니라 사실이라 황토·빨강을 쓰지 않는다 */
        .sidebar-brand { display: flex; align-items: center; gap: 6px; min-width: 0; }
        .beta-badge {
            display: inline-block; flex-shrink: 0;
            font-size: var(--fr-fs-xs); font-weight: 600; line-height: 1; letter-spacing: 0.02em;
            padding: 3px 5px; border: 1px solid var(--fr-accent); border-radius: 2px; 
        }
        .mobile-brand .beta-badge { margin-left: 6px; vertical-align: 2px; }
        body.dark-mode .beta-badge { border-color: var(--fr-accent); color: var(--fr-accent); }
        .modal-beta-note {
            margin: 0 0 0.9rem; padding: 0.5rem 0.7rem;
            background: var(--fr-paper-3);
            font-size: var(--fr-fs-xs); line-height: 1.55; color: var(--fr-ink-2);
        }
        .modal-beta-note strong { color: var(--fr-ink); font-weight: 600; }
        body.dark-mode .modal-beta-note { color: var(--tone-84); }

        /* 충전 모달의 고지·안내 글(진단 PUX-08) — 결제 전 표시라 두 모드 모두 4.5:1 이상 */
        .credit-legal { font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-3); }   /* ink-3: 흰 바탕 4.8:1 · 다크 6.6:1 */
        .credit-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

        /* 가입 요청 뒤 안내(SEC-20) — 메일 확인 */
        .register-sent { padding: 0.4rem 0 0.2rem; }
        .register-sent[hidden] { display: none; }
        .register-sent-title { font-size: var(--fr-fs-md); font-weight: 600; color: var(--fr-ink); margin-bottom: 0.4rem; }
        .register-sent p { font-size: var(--fr-fs-xs); line-height: 1.6; color: var(--fr-ink-2); margin: 0 0 0.5rem; }
        .register-sent .register-sent-sub { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); margin-bottom: 0.9rem; }
        body.dark-mode .register-sent p { color: var(--tone-84); }

        /* 미인증 배너 — 주의 성격이라 굵은 첫 문장 앞 황토 사각(개선점 C3, 예전 왼쪽 2px 띠). 예전 인라인 노랑 바탕(#f5f0e0)·글자(#665)는 팔레트 밖이었다 */
        .verify-banner strong::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; border-radius: 1px; background: var(--fr-ochre); }
        .verify-banner {
            padding: 10px 16px; border-bottom: 1px solid var(--fr-rule);
            background: var(--fr-paper-3); font-size: var(--fr-fs-xs); line-height: 1.55; color: var(--fr-ink-2); text-align: center;
        }
        .verify-banner strong { color: var(--fr-ink); }
        body.dark-mode .verify-banner { color: var(--tone-84); }
        .verify-resend-btn {
            margin-left: 8px; min-height: 28px; padding: 2px 10px; font: inherit; font-size: var(--fr-fs-xs);
            background: var(--fr-ink-2); color: var(--fr-paper-2); border: none; border-radius: 2px; cursor: pointer;
        }

        /* 모바일 헤더 잔액(PUX-17) — 종량제인데 폰 첫 화면에 잔액이 없었다 */
        .mobile-balance { font-size: var(--fr-fs-xs); font-weight: 500; color: var(--fr-ink-2); margin-right: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
        .mobile-balance[hidden] { display: none; }
        .mobile-balance.low { color: var(--fr-ochre-ink); }
        body.dark-mode .mobile-balance { color: var(--tone-84); }

        /* 생성형 AI 고지(인공지능 기본법 제31조) — 입력창 아래·가입 창·답변마다 조용한 한 줄 */
        .ai-made-note { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); white-space: nowrap; margin-right: 8px; align-self: center; }
        .ai-made-note--signup { display: block; white-space: normal; margin: 0.3rem 0 0.7rem; text-align: left; }
        .ai-made-tag { align-self: center; margin-right: 6px; }
        body.dark-mode .ai-made-tag { border-color: var(--tone-23); }
        @media (max-width: 480px) { .input-footer-row { flex-wrap: wrap; justify-content: center; } .ai-made-note:not(.ai-made-note--signup) { width: 100%; text-align: center; margin: 0 0 2px; } }

        /* 근거 0건 안내(PUX-01) — 근거 탭 위 한 줄 */
        .refs-none-cited { padding: 10px 0 4px; text-align: left; }

        /* 답변 공유 창(#shareModal, 진단 MKT-10)·설정 > 공유 링크. 경고는 황토 왼쪽 2px(주의 — 빨강 금지, findref 디자인 시스템) */
        .share-modal { max-width: 520px; }
        /* 공유 직전 경고 — 황토 옅은 면 + 황토 사각(디자인 시스템 v2, 왼쪽 색띠 대신). 접지 않는다 */
        .share-warning { position: relative; margin: 0 0 20px; padding: 12px 14px 12px 32px; background: var(--fr-ochre-tint); border-radius: var(--fr-radius); font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink); word-break: keep-all; }
        .share-warning::before { content: ''; position: absolute; left: 14px; top: 19px; width: 7px; height: 7px; background: var(--fr-ochre); }
        .share-warning strong { color: var(--fr-ink); font-weight: 600; }
        .form-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); font: inherit; font-size: var(--fr-fs-md); line-height: 1.6;
            box-sizing: border-box; background: var(--fr-paper); color: var(--fr-ink); resize: vertical; min-height: 6.5rem; outline: none;
            transition: border-color var(--fr-dur) var(--fr-ease), box-shadow var(--fr-dur) var(--fr-ease); }
        .form-field textarea:focus { border-color: var(--fr-accent); box-shadow: 0 0 0 3px var(--fr-accent-tint); }
        .form-field textarea:disabled { color: var(--fr-ink-3); background: var(--fr-paper-2); }
        .share-hint { margin-top: 6px; font-size: var(--fr-fs-xs); line-height: 1.6; color: var(--fr-ink-3); }
        .share-answer-preview { margin: 0 0 16px; padding: 12px 14px; background: var(--fr-paper-2); border-radius: var(--fr-radius); font-size: var(--fr-fs-sm); line-height: 1.7;
            color: var(--fr-ink-2); max-height: 7.5rem; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
        .share-answer-preview:empty { display: none; }
        .share-expiry { display: flex; align-items: center; gap: 12px; }
        .share-expiry label { margin: 0; }
        .share-note { margin: 0 0 16px; font-size: var(--fr-fs-xs); line-height: 1.7; color: var(--fr-ink-3); }
        .share-done-lead { margin: 0 0 14px; font-size: var(--fr-fs-md); color: var(--fr-ink); }
        .share-link-row { display: flex; gap: 8px; margin-bottom: 14px; }
        .share-link-row input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); font-family: var(--fr-mono); font-size: var(--fr-fs-xs);
            background: var(--fr-paper-2); color: var(--fr-ink); box-sizing: border-box; }
        .shares-head { margin: 16px 0 6px; font-size: var(--fr-fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--fr-ink-3); }
        .shares-empty { padding: 24px 0; text-align: center; font-size: var(--fr-fs-sm); color: var(--fr-ink-3); }
        .share-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--fr-rule); }
        .share-row-main { flex: 1; min-width: 0; }
        .share-row-title { font-size: var(--fr-fs-md); font-weight: 500; color: var(--fr-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .share-row[data-status="expired"] .share-row-title, .share-row[data-status="revoked"] .share-row-title { color: var(--fr-ink-3); font-weight: 400; }
        .share-row-meta { margin-top: 3px; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .share-row-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
        .share-row-actions .settings-link-btn { height: 30px; padding: 0 10px; font-size: var(--fr-fs-xs); }
        #shareDoneView .settings-btn-row > a { flex: 1; }
        .share-row-actions .share-revoke.confirm { border-color: var(--fr-ink-2); color: var(--fr-ink); font-weight: 600; }
        @media (max-width: 480px) { .share-row { flex-direction: column; gap: 0.4rem; } .share-row-actions { justify-content: flex-start; } }

        @media (max-width: 768px) {
            /* 입력 글꼴 16px — 그보다 작으면 iOS Safari 가 초점을 줄 때 화면을 확대한다(헤드리스 실측 14px·12.6px).
               요소를 하나씩 적던 목록은 비밀번호 변경(인라인 0.85rem)·대화 이름 바꾸기·공유 링크·환불 사유(JS 가 그리는 인라인
               0.78rem)를 빠뜨렸다(진단 FE-23). 글자를 치는 입력은 전부 잡는다 — 체크·라디오·범위는 확대와 무관해 뺀다.
               !important 는 인라인 style 의 크기를 이기기 위해서다. */
            input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), textarea, select { font-size: var(--fr-fs-lg) !important; }
            /* 터치 목표 24px 이상(WCAG 2.5.8) */
            .mobile-hamburger { min-width: 40px; min-height: 40px; }
            .conversation-action-btn { min-width: 28px; min-height: 28px; }
            .policy-links a { display: inline-block; padding: 3px 0; }
        }

        /* ============================================================
         * 로그인 전용 첫 화면 (#authGate) — 디자인 시스템 v2 A안
         *
         * html[data-auth] 는 <head> 의 인증 판정이 첫 페인트 전에 적고, 이후는 ai-chat.js syncAuthGate 가 맞춘다.
         * 왼쪽은 할 일 하나(들어오기), 오른쪽은 제품 실물(실제 사안·실제 조문). 원문은 명조, 생성된 답변은 고딕.
         * 값은 시안(claude.ai/artifact/LhRdoRo1FMNWuXM2aodf8u, 1 · A안)과 같다. 색은 전부 --fr-* 토큰(src/findref/findref.css).
         * ============================================================ */
        html[data-auth="out"] #app { display: none !important; }
        html:not([data-auth="out"]) #authGate { display: none; }
        html[data-auth="out"] body { height: auto; overflow: auto; background: var(--fr-paper); }

        .auth-gate { min-height: 100vh; min-height: 100dvh; display: flex; flex-wrap: wrap; background: var(--fr-paper); color: var(--fr-ink); }
        .gate-main { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; padding: clamp(24px, 3.6vw, 52px) clamp(24px, 5.6vw, 80px) 28px; box-sizing: border-box; }
        .gate-top { display: flex; align-items: center; gap: 10px; }
        .gate-wordmark { font-family: var(--fr-serif); font-size: var(--fr-fs-2xl); font-weight: 500; letter-spacing: -0.015em; color: var(--fr-ink); text-decoration: none; }
        .gate-beta { font-size: var(--fr-fs-xs); font-weight: 500; line-height: 1.5; color: var(--fr-ochre-ink); border: 1px solid var(--fr-ochre); border-radius: var(--fr-radius); padding: 0 6px; letter-spacing: 0.02em; }
        .gate-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 520px; padding: 36px 0 28px; animation: frLift 640ms var(--fr-ease) both; }
        .gate-eyebrow { margin: 0 0 18px; font-size: var(--fr-fs-sm); font-weight: 500; color: var(--fr-ink-3); letter-spacing: 0.02em; }
        .gate-title { margin: 0; font-family: var(--fr-serif); font-size: clamp(32px, 3.4vw, 50px); line-height: 1.17; font-weight: 300; letter-spacing: -0.03em; color: var(--fr-ink); word-break: keep-all; }
        .gate-lead { margin: 18px 0 0; max-width: 430px; font-size: var(--fr-fs-lg); line-height: 1.75; color: var(--fr-ink-2); word-break: keep-all; }

        .gate-auth { margin-top: 36px; max-width: 400px; }
        /* 로그인 칸 위 안내(showGateNotice) — 다른 브라우저에서 연 인증 메일처럼 할 일이 남는 경우. 실패가 아니라 다음 할 일이라 회색 상자 */
        .gate-notice { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); background: var(--fr-paper-2); font-size: var(--fr-fs-sm); line-height: 1.65; color: var(--fr-ink); word-break: keep-all; }
        .gate-notice[hidden] { display: none; }
        .gate-step, .gate-form { display: flex; flex-direction: column; gap: 12px; }
        .gate-step[hidden] { display: none; }
        .gate-form.modal-form { display: none; }
        .gate-form.modal-form.active { display: flex; }
        .gate-label { font-size: var(--fr-fs-sm); font-weight: 500; color: var(--fr-ink-2); margin-bottom: -4px; }
        .gate-opt { font-weight: 400; color: var(--fr-ink-3); }
        .gate-input {
            width: 100%; height: 48px; padding: 0 14px; box-sizing: border-box;
            border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: var(--fr-paper); color: var(--fr-ink);
            font-family: inherit; font-size: var(--fr-fs-base);
            transition: border-color var(--fr-dur) var(--fr-ease), box-shadow var(--fr-dur) var(--fr-ease);
        }
        .gate-input::placeholder { color: var(--fr-ink-4); }
        .gate-input:focus { outline: none; border-color: var(--fr-accent); box-shadow: 0 0 0 3px var(--fr-accent-tint); }
        .gate-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; padding: 0 20px; box-sizing: border-box;
            border-radius: var(--fr-radius); font-family: inherit; font-size: var(--fr-fs-base); font-weight: 500; cursor: pointer;
            transition: background var(--fr-dur) var(--fr-ease), border-color var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease);
        }
        .gate-btn--ink { border: 0; background: var(--fr-btn); color: var(--fr-btn-ink); }
        .gate-btn--ink:hover { background: var(--fr-btn-hover); }
        .gate-btn--ink:disabled { opacity: 0.45; cursor: progress; }
        .gate-btn--line { border: 1px solid var(--fr-rule-2); background: var(--fr-paper); color: var(--fr-ink); }
        .gate-btn--line:hover { border-color: var(--fr-ink-3); background: var(--fr-paper-2); }
        .gate-btn:focus-visible, .gate-link:focus-visible, .spec-ref:focus-visible, .gate-links a:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        .gate-or { display: flex; align-items: center; gap: 14px; margin: 8px 0; color: var(--fr-ink-3); font-size: var(--fr-fs-xs); }
        .gate-or::before, .gate-or::after { content: ''; flex: 1; height: 1px; background: var(--fr-rule); }
        .gate-who { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 4px 0 14px; background: var(--fr-paper-2); border-radius: var(--fr-radius); }
        .gate-who-input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--fr-ink); font-family: inherit; font-size: var(--fr-fs-base); text-overflow: ellipsis; outline: none; }
        .gate-link { padding: 8px 10px; border: 0; border-radius: var(--fr-radius); background: none; font-family: inherit; font-size: var(--fr-fs-sm); font-weight: 500; color: var(--fr-accent); cursor: pointer; }
        .gate-link:hover { text-decoration: underline; text-underline-offset: 3px; }
        .gate-link--center { align-self: center; font-weight: 400; color: var(--fr-ink-2); }
        .gate-new { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--fr-rule); }
        .gate-new-q { font-size: var(--fr-fs-sm); color: var(--fr-ink-3); }
        .gate-step-lead { margin: 0; font-size: var(--fr-fs-md); line-height: 1.7; color: var(--fr-ink-2); }
        .auth-gate .consent-row { margin: 0; gap: 10px; font-size: var(--fr-fs-sm); line-height: 1.6; color: var(--fr-ink-2); }
        .auth-gate .consent-row input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--fr-btn); }
        .auth-gate .consent-row a { color: var(--fr-accent); }
        .auth-gate .ai-made-note--signup { margin: 0; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .auth-gate .form-error { margin: 0; }
        .auth-gate .register-sent { display: flex; flex-direction: column; gap: 10px; padding: 0; }
        .auth-gate .register-sent[hidden], #forgotPasswordInput[hidden], #forgotPasswordSent[hidden] { display: none; }
        #forgotPasswordInput, #forgotPasswordSent { display: flex; flex-direction: column; gap: 12px; }
        .auth-gate .register-sent-title { margin: 0; font-family: var(--fr-serif); font-size: var(--fr-fs-2xl); font-weight: 300; letter-spacing: -0.02em; color: var(--fr-ink); }
        .auth-gate .register-sent p { margin: 0; font-size: var(--fr-fs-md); line-height: 1.7; color: var(--fr-ink-2); }
        .auth-gate .register-sent .register-sent-sub { margin-bottom: 8px; font-size: var(--fr-fs-sm); color: var(--fr-ink-3); }

        .gate-notes { display: flex; flex-direction: column; gap: 6px; max-width: 480px; margin-top: 24px; }
        .gate-data-note { margin: 0; font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-2); }
        .gate-data-note a { font-weight: 500; color: var(--fr-accent); text-decoration: none; white-space: nowrap; }
        .gate-data-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
        .auth-gate .modal-beta-note { margin: 0; padding: 0; border: 0; background: none; font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-2); }
        .auth-gate .modal-beta-note strong { font-weight: 600; color: var(--fr-ink); }
        body.dark-mode .auth-gate .modal-beta-note { background: none; color: var(--fr-ink-2); }
        .auth-gate .google-consent-note { margin: 0; text-align: left; font-size: var(--fr-fs-xs); line-height: 1.7; color: var(--fr-ink-3); }
        .auth-gate .google-consent-note a { color: inherit; }

        .gate-foot { display: flex; flex-direction: column; gap: 10px; font-size: var(--fr-fs-xs); line-height: 1.6; color: var(--fr-ink-3);
            margin: 0; padding: 0; border: 0; background: none; text-align: left; max-width: none; }   /* 공용 shared.css 의 footer{…} 가 새어 들지 않게 */
        body.dark-mode .gate-foot { border: 0; background: none; color: var(--fr-ink-3); }
        .gate-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
        .gate-links a { color: var(--fr-ink-3); text-decoration: none; }
        .gate-links a:hover { color: var(--fr-ink); }
        .gate-links .gate-privacy { font-weight: 600; color: var(--fr-ink-2); }   /* 개인정보처리방침은 다른 고지와 구별되게(개인정보 보호법 제30조 공개 지침) */
        .gate-foot .home-business { max-width: none; margin: 0; flex-direction: row; flex-wrap: wrap; gap: 0 14px; font-size: var(--fr-fs-xs); text-align: left; color: var(--fr-ink-3); }
        .gate-foot .home-business a { color: inherit; }

        /* 제품 실물 */
        .gate-specimen { flex: 1 1 640px; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.4vw, 48px); box-sizing: border-box; background: var(--fr-paper-2); border-left: 1px solid var(--fr-rule); }
        .spec-stage { display: flex; flex-direction: column; width: 100%; max-width: 640px; margin: 0 auto; }
        .spec-caption { margin: 0 0 20px; font-size: var(--fr-fs-xs); line-height: 1.6; color: var(--fr-ink-3); }
        .spec-answer { width: min(560px, 100%); box-sizing: border-box; padding: 24px 26px 22px; background: var(--fr-paper); border-radius: var(--fr-radius); box-shadow: var(--fr-shadow-object); animation: frLift 640ms var(--fr-ease) 120ms both; }
        .spec-case { padding: 16px 18px; background: var(--fr-paper-2); border-radius: var(--fr-radius); }
        .spec-k { display: block; margin-bottom: 6px; font-size: var(--fr-fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--fr-ink-3); }
        .spec-case p { margin: 0; font-size: var(--fr-fs-base); line-height: 1.7; color: var(--fr-ink); word-break: keep-all; }
        .spec-conclusion { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fr-rule); }
        .spec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
        .spec-con-k { font-size: var(--fr-fs-xs); font-weight: 600; color: var(--fr-accent); }
        .spec-tag { padding: 0 6px; font-size: var(--fr-fs-xs); line-height: 1.6; color: var(--fr-ink-2); border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); }
        .spec-conclusion p { margin: 0; font-size: var(--fr-fs-base); line-height: 1.75; color: var(--fr-ink); word-break: keep-all; }
        .spec-ref {
            padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--fr-accent); cursor: pointer;
            text-decoration: underline; text-decoration-color: var(--fr-accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px;
            transition: text-decoration-color var(--fr-dur) var(--fr-ease);
        }
        .spec-ref:hover { text-decoration-color: var(--fr-accent); }
        .spec-ref sup {
            display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; margin-left: 3px; padding: 0 3px; box-sizing: border-box;
            border-radius: var(--fr-radius); background: var(--fr-accent); color: var(--fr-paper);
            font-family: var(--fr-mono); font-size: 10px; /* 단계 밖: 시안 .ref sup 10px — 15px 알약 안 근거 번호(표지) */ font-weight: 500; line-height: 1; vertical-align: 4px;
        }
        .spec-ref[aria-pressed="false"] sup { background: transparent; color: var(--fr-accent); box-shadow: inset 0 0 0 1px var(--fr-accent); }
        .spec-calc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 14px; padding: 11px 0; border-top: 1px solid var(--fr-rule); border-bottom: 1px solid var(--fr-rule); font-size: var(--fr-fs-sm); color: var(--fr-ink); }
        .spec-calc-k, .spec-calc-op { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .spec-source { position: relative; width: min(400px, 100%); box-sizing: border-box; margin: -36px 0 0 auto; padding: 20px 24px 18px; background: var(--fr-paper); border-radius: var(--fr-radius); box-shadow: var(--fr-shadow-object); animation: frLift 640ms var(--fr-ease) 240ms both; }
        .spec-card[hidden] { display: none; }
        .spec-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .spec-num { margin-right: 8px; font-weight: 500; color: var(--fr-accent); }
        .spec-verified { display: inline-flex; align-items: center; gap: 6px; }
        .spec-verified i { width: 7px; height: 7px; border-radius: 1px; background: var(--fr-accent); }
        .spec-card-title { margin: 12px 0 2px; font-family: var(--fr-serif); font-size: var(--fr-fs-xl); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--fr-ink); }
        .spec-card-sub { font-size: var(--fr-fs-sm); color: var(--fr-ink-2); }
        .spec-card-meta { margin-top: 6px; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .spec-card-text { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fr-rule); font-family: var(--fr-serif); font-size: var(--fr-fs-md); line-height: 1.85; color: var(--fr-ink); word-break: keep-all; }
        .spec-card-text p { margin: 0; }
        .spec-card-text .spec-sub { margin-left: 1.4em; color: var(--fr-ink-2); }
        .spec-card-text mark { padding: 1px 0; background: var(--fr-accent-tint); color: inherit; }
        .fr-hang { padding-left: 1.4em; text-indent: -1.4em; }
        .spec-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--fr-rule); }
        .spec-stats div { display: flex; flex-direction: column-reverse; gap: 2px; }
        .spec-stats dt { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .spec-stats dd { margin: 0; font-size: var(--fr-fs-2xl); letter-spacing: -0.01em; color: var(--fr-ink); }
        .spec-stats-link { align-self: flex-start; margin-top: 12px; font-size: var(--fr-fs-xs); font-weight: 500; color: var(--fr-accent); text-decoration: none; }
        .spec-stats-link:hover { text-decoration: underline; text-underline-offset: 3px; }
        @keyframes frLift { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
        @media (max-width: 900px) {
            .gate-specimen { border-left: 0; border-top: 1px solid var(--fr-rule); }
            .gate-body { padding: 40px 0 32px; }
        }
        /* ============================================================
         * 로그인 뒤 홈 — 디자인 시스템 v2 (시안 2 · 로그인 후 홈)
         * 인사는 명조, 입력창은 1px·2px·포커스 링, 예시 사안은 상자 칩이 아니라 번호 붙은 목차(헤어라인 행),
         * 면책·정책 링크·사업자 정보는 맨 아래 작은 글. 배치(.main.is-home 의 auto 마진)는 위 주석 그대로다.
         * ============================================================ */
        .welcome h1, .main.is-home .welcome h1 {
            margin: 0 0 12px; font-family: var(--fr-serif); font-size: clamp(26px, 2.5vw, 34px); font-weight: 300;
            line-height: 1.28; letter-spacing: -0.02em; color: var(--fr-ink); word-break: keep-all;
        }
        .welcome-desc { font-size: var(--fr-fs-base); line-height: 1.7; color: var(--fr-ink-2); word-break: keep-all; }
        .welcome-scope { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .welcome-scope a { font-weight: 500; color: var(--fr-accent); }
        .main.is-home .welcome-scope { margin: 10px 0 0; }

        .input-box { border: 1px solid var(--fr-rule-2); background: var(--fr-paper); padding: 14px 16px 10px; transition: border-color var(--fr-dur) var(--fr-ease), box-shadow var(--fr-dur) var(--fr-ease); }
        .input-box:focus-within { border-color: var(--fr-accent); box-shadow: 0 0 0 3px var(--fr-accent-tint); }
        #chatInput { color: var(--fr-ink); }
        #chatInput::placeholder { color: var(--fr-ink-3); }
        .main.is-home #chatInput { min-height: 64px; }
        /* 입력창 예시(ai-chat.js INPUT_HINTS) — 홈의 빈 입력창 둘째 줄. 은은하게 바뀐다(타자 효과 없음), 누르면 입력창으로 간다 */
        .input-box { position: relative; }
        .input-hint {
            position: absolute; left: 16px; right: 16px; top: 44px; display: flex; align-items: baseline; gap: 10px;
            pointer-events: none; white-space: nowrap; overflow: hidden; font-size: var(--fr-fs-md); line-height: 1.6; color: var(--fr-ink-3);
            transition: opacity var(--fr-dur-panel) var(--fr-ease), transform var(--fr-dur-panel) var(--fr-ease);
        }
        .input-hint[hidden] { display: none; }
        .input-hint.is-leaving { opacity: 0; transform: translateY(-3px); }
        .input-hint-tag { flex-shrink: 0; padding: 0 6px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); font-size: var(--fr-fs-xs); font-weight: 600; letter-spacing: 0.02em; line-height: 1.6; color: var(--fr-ink-3); }
        .input-hint-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        /* 좁은 화면은 두 줄까지(풀의 문장은 46자 이하 — scripts/lib/__tests__/input-hints.test.js), 그만큼 홈 입력창을 높인다 */
        @media (max-width: 600px) {
            .input-hint { white-space: normal; align-items: flex-start; }
            .input-hint-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
            .main.is-home #chatInput { min-height: 84px; }
            /* 폰의 홈은 인사·부제·수록 규모가 입력창 위 좁은 칸에 들어와야 한다(.main.is-home 의 auto 마진 배치 — 넘치면 위 칸이 잘린다) */
            .welcome h1, .main.is-home .welcome h1 { font-size: var(--fr-fs-2xl); margin-bottom: 8px; }
            .welcome-desc { font-size: var(--fr-fs-md); line-height: 1.6; }
            .main.is-home .welcome-scope { margin-top: 6px; font-size: var(--fr-fs-xs); }
        }
        #sendBtn { background: var(--fr-btn); color: var(--fr-btn-ink); }
        #sendBtn:hover { background: var(--fr-btn-hover); }

        /* 데이터 처리 한 줄(MKT-12, 다른 작업이 넣은 문장·id 그대로) — v2 토큰으로 옷만. 캡션 하한 ink-3(4.86:1), 링크는 근거로 이어지는 남색 */
        .home-data-note, body.dark-mode .home-data-note { margin: -4px 0 18px; font-size: var(--fr-fs-xs); line-height: 1.6; color: var(--fr-ink-3); }
        .home-data-note a, body.dark-mode .home-data-note a { font-weight: 500; color: var(--fr-accent); }
        .home-label { width: 100%; max-width: 768px; margin: 8px 0 8px; font-size: var(--fr-fs-xs); font-weight: 500; letter-spacing: 0.02em; color: var(--fr-ink-3); text-align: left; }
        .suggestions, .home-below .suggestions { counter-reset: frSugg; display: flex; flex-direction: column; gap: 0; max-width: 768px; width: 100%; border-top: 1px solid var(--fr-rule); }
        .suggestion-chip {
            counter-increment: frSugg; display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; align-items: baseline; gap: 10px;
            width: 100%; padding: 13px 6px; border: 0; border-bottom: 1px solid var(--fr-rule); border-radius: 0; background: none;
            font-family: inherit; font-size: var(--fr-fs-md); line-height: 1.6; color: var(--fr-ink-2); text-align: left; cursor: pointer;
            transition: background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease);
        }
        .suggestion-chip::before { content: counter(frSugg, decimal-leading-zero); font-family: var(--fr-mono); font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .suggestion-chip::after { content: '→'; justify-self: end; color: var(--fr-ink-4); transition: transform var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease); }
        .suggestion-chip:hover { background: var(--fr-paper-2); color: var(--fr-ink); border-color: var(--fr-rule); }
        .suggestion-chip:hover::after { color: var(--fr-accent); transform: translateX(2px); }
        .suggestion-chip:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: -2px; }
        body.dark-mode .suggestion-chip { background: none; border-color: var(--fr-rule); }

        .ai-disclaimer-banner, .home-below .ai-disclaimer-banner {
            max-width: 768px; width: 100%; box-sizing: border-box; margin: 28px auto 12px; padding: 0;
            border: 0; background: none; font-size: var(--fr-fs-xs); line-height: 1.7; color: var(--fr-ink-3); text-align: center;
        }
        body.dark-mode .ai-disclaimer-banner { background: none; }
        .home-below .policy-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0 0 10px; }
        .home-below .policy-links a { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .home-below .policy-links a:hover { color: var(--fr-ink); text-decoration: none; }
        .home-below .policy-links a[href="/privacy/"] { font-weight: 600; color: var(--fr-ink-2); }
        /* 법정 표시라 4.5:1 이상·11px 이상(진단 PUX-08) — ink-3 은 흰 바탕 4.86:1 */
        .home-business { max-width: 768px; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        /* 「사업자정보확인」 링크 — 색 규칙이 없어 브라우저 기본 파랑(#0000ee)이었다. 다크 바탕에서 1.91:1 로 사실상 안 보였다(2026-10-07 운영 실측,
           e2e 빌드에 사업자 블록이 없어 못 잡던 것). 충전 창(.credit-legal a)·공개 페이지 푸터와 같은 처리 — 줄 글자색 + 밑줄 */
        .home-business a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
        @media (max-width: 768px) {
            .suggestions, .home-below .suggestions { align-items: stretch; }
            .suggestion-chip { width: 100%; }
        }
        /* 폰 홈 — 한 화면 압축(2026-10-07 사용자 선택 C안, 시안 비교 https://claude.ai/artifact/YAuXxUZ7LaEJviEPMAAKoQ).
           위 auto 마진 배치는 폰에서 공간이 모자라면 인사 칸(.chat-scroll)과 아래 칸(#homeBelow)을 각자 줄여 각자 스크롤시켰다
           (390×844 인사 107/146px·아래 426/571px, 360×740 인사 109/199px, 키보드면 인사 칸 29~37px — 세 덩어리가 따로 놀았다).
           폰에서는 .main 하나만 스크롤하고(안쪽 스크롤 상자 0), 인사 부제를 빼고(입력창 예시 문장이 같은 안내를 돌려 보인다),
           예시 사안은 입력창 바로 아래 가로로 넘기는 카드 한 줄로 — 360 폰에서도 인사·수록 규모·입력창·예시 첫 장이 한 화면.
           머리줄(잔액·계정)과 맨 아래 면책·정책 링크·사업자 정보는 위치·문구 그대로. 대화가 시작되면 .is-home 이 빠져 대화 화면은 그대로다.
           홈↔대화 전환 때 .main 의 스크롤은 ai-chat.js setHomeMode 가 0 으로 돌린다 */
        @media (max-width: 768px) {
            .main.is-home { overflow-y: auto; -webkit-overflow-scrolling: touch; }
            .main.is-home .mobile-header { position: sticky; top: 0; z-index: 6; background: var(--fr-paper-2); }
            .main.is-home .chat-scroll { flex: none; overflow: visible; margin-top: 0; }
            .main.is-home .chat-content { justify-content: flex-start; }
            .main.is-home .welcome { padding-top: 16px; }
            .main.is-home .welcome-desc { display: none; }
            .main.is-home .welcome h1 { margin-bottom: 4px; }
            .main.is-home .input-wrapper { padding-top: 14px; }
            .main.is-home .home-below { flex: none; overflow: visible; margin-bottom: 0; padding: 12px 24px 24px; align-items: stretch; }
            /* 데이터 처리 한 줄은 입력창 바로 아래 그대로(진단 MKT-12 — 사안을 적는 순간에 보여야 한다, e2e first-screen 이 본다). 예시는 그 다음 */
            .main.is-home .home-data-note { order: -3; margin-bottom: 12px; }
            .main.is-home .home-label { order: -2; margin: 0 0 6px; }
            /* 예시 줄만 화면 끝까지(좌우 −24px) — 넘기는 카드가 가장자리에서 잘려 보여야 옆에 더 있다는 게 읽힌다 */
            .main.is-home .home-below .suggestions { order: -1; display: flex; flex-direction: row; align-items: stretch; gap: 10px; width: calc(100% + 48px); max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; padding: 0 24px 4px; margin: 0 -24px 14px; border: 0; box-sizing: border-box; }
            .main.is-home .home-below .suggestions .suggestion-chip { width: auto; flex: 0 0 80%; scroll-snap-align: start; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); padding: 12px 14px; min-height: 0; }
        }

        /* ============================================================
         * 대화 · 근거 레일 — 디자인 시스템 v2 (시안 2 · 대화 · 근거 레일)
         *
         * - 질문은 말풍선이 아니라 「사안」 블록(실무자의 질문은 사건 기록에 가깝다). 이어진 질문은 「이어서」.
         * - AI 답변은 고딕, 원문(조문·판례 요지·기준서 문단·인용구)은 명조 — 출처와 생성물이 서체로 갈린다.
         * - 결론은 상자 대신 라벨 + 위아래 1px. 인용은 이름 그대로 남색 밑줄 + 끝의 작은 사각(검증 상태: 채움=확인·열람함,
         *   테두리=DB 에 있음(열람 안 함), 황토 테두리=미확인) — 상태가 title 에만 있던 것을 늘 보이게(모양과 색 두 축).
         * - 왼쪽 2px 색띠는 쓰지 않는다 — 회색 면 + 작은 사각 표식 + 문장. 주의(상한·끊김·시행 예정)만 황토.
         * - 근거 레일 카드는 상자가 아니라 헤어라인으로 나뉜 목록. 폭·하한·박스 표 판정 규칙(refs-panel.js·panel-resize.js)은 그대로다.
         * ============================================================ */
        .message.user { align-items: stretch; }
        .user-bubble, body.dark-mode .user-bubble {
            max-width: none; padding: 16px 20px 18px; border-radius: var(--fr-radius);
            background: var(--fr-paper-2); color: var(--fr-ink); font-size: var(--fr-fs-base); line-height: 1.7;
        }
        .user-bubble::before { content: '사안'; display: block; margin-bottom: 6px; font-size: var(--fr-fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--fr-ink-3); white-space: normal; }
        .message.user ~ .message.user .user-bubble::before { content: '이어서'; }

        .ai-content, body.dark-mode .ai-content { font-size: var(--fr-fs-lg); line-height: 1.85; color: var(--fr-ink); }
        .ai-content p { margin: 10px 0; }
        .ai-content h1, .ai-content h2 { margin: 30px 0 8px; font-size: var(--fr-fs-xl); font-weight: 600; line-height: 1.45; letter-spacing: -0.005em; color: var(--fr-ink); }
        .ai-content h3, .ai-content h4 { margin: 22px 0 6px; font-size: var(--fr-fs-base); font-weight: 600; line-height: 1.5; color: var(--fr-ink); }
        .ai-content > h1:first-child, .ai-content > h2:first-child, .ai-content > h3:first-child { margin-top: 0; }
        .ai-content ul, .ai-content ol { padding-left: 1.3em; }
        .ai-content li { margin: 5px 0; }
        .ai-content li::marker { color: var(--fr-ink-3); }
        .ai-content code, body.dark-mode .ai-content code { padding: 1px 5px; background: var(--fr-paper-3); color: var(--fr-ink); font-size: 0.86em; }
        .ai-content a, body.dark-mode .ai-content a { color: var(--fr-accent); text-decoration-color: var(--fr-accent-line); text-underline-offset: 3px; }
        .ai-content blockquote, body.dark-mode .ai-content blockquote {
            margin: 12px 0; padding: 2px 0 2px 16px; border-left: 1px solid var(--fr-rule-2);
            font-family: var(--fr-serif); font-size: var(--fr-fs-base); line-height: 1.9; color: var(--fr-ink-2);
        }
        .ai-content table { font-size: var(--fr-fs-md); font-variant-numeric: tabular-nums; }
        .ai-content th, .ai-content td, body.dark-mode .ai-content th, body.dark-mode .ai-content td { border-color: var(--fr-rule); padding: 7px 11px; }
        .ai-content th, body.dark-mode .ai-content th { background: var(--fr-paper-2); }

        .ai-content .answer-conclusion, body.dark-mode .ai-content .answer-conclusion {
            margin: 0 0 20px; padding: 14px 0 16px; border: 0; border-top: 1px solid var(--fr-rule); border-bottom: 1px solid var(--fr-rule);
            border-radius: 0; background: none;
        }
        .ai-content .answer-conclusion h2, .ai-content .answer-conclusion h3 { margin: 0 0 6px; font-size: var(--fr-fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--fr-accent); }
        /* 맨 앞 한 줄 요약(refs-panel.js markSummary) — 결론 절 위에 굵게 한 줄. 꼬리표는 결론 제목과 같은 작은 강조색 */
        .ai-content p.answer-summary, body.dark-mode .ai-content p.answer-summary { margin: 0 0 14px; font-size: var(--fr-fs-lg); font-weight: 600; line-height: 1.6; color: var(--fr-ink); }
        .ai-content p.answer-summary > strong:first-child { display: block; margin-bottom: 4px; font-size: var(--fr-fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--fr-accent); }
        .ai-content p.answer-disclaimer, body.dark-mode .ai-content p.answer-disclaimer { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--fr-rule); font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }

        /* 인용 — refs-panel.js linkCitations 가 [ · 이름 · ] · 상태 사각 으로 쪼개 그린다. 복사하면 대괄호째 원문 그대로 */
        .ai-content a.cite-ref, body.dark-mode .ai-content a.cite-ref { color: var(--fr-accent); font-size: inherit; font-weight: 500; text-decoration: none; border-bottom: 0; border-radius: var(--fr-radius); }
        .ai-content a.cite-ref .cite-name { text-decoration: underline; text-decoration-color: var(--fr-accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--fr-dur) var(--fr-ease); }
        .ai-content a.cite-ref:hover, body.dark-mode .ai-content a.cite-ref:hover { background: var(--fr-accent-tint); }
        .ai-content a.cite-ref:hover .cite-name { text-decoration-color: var(--fr-accent); }
        .ai-content a.cite-ref .cite-br { font-weight: 400; color: var(--fr-ink-4); }
        .cite-mark { display: inline-block; width: 7px; height: 7px; margin-left: 3px; vertical-align: 1px; border-radius: 1px; background: var(--fr-accent); }
        .cite-ref--indb .cite-mark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fr-accent); }
        .ai-content a.cite-ref--unverified, body.dark-mode .ai-content a.cite-ref--unverified { color: var(--fr-ochre-ink); }
        .ai-content a.cite-ref--unverified .cite-name { text-decoration-color: var(--fr-ochre); text-decoration-style: dashed; }
        .cite-ref--unverified .cite-mark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fr-ochre); }
        .citation-check-inline { color: var(--fr-ochre-ink); font-size: var(--fr-fs-xs); }

        /* 사고 과정 · 검색 과정 — 같은 높이·같은 꺾쇠의 접힘 줄 */
        .thinking-block, .search-process-block, body.dark-mode .thinking-block, body.dark-mode .search-process-block {
            margin: 0; border: 0; border-top: 1px solid var(--fr-rule); border-radius: 0; overflow: visible;
        }
        .thinking-block + .search-process-block, .search-process-block + .thinking-block { border-top: 0; }
        .ai-content > details:last-of-type.search-process-block, .ai-content > details:last-of-type.thinking-block { margin-bottom: 14px; border-bottom: 1px solid var(--fr-rule); }
        .thinking-block summary, .search-process-block summary, body.dark-mode .thinking-block summary, body.dark-mode .search-process-block summary {
            display: flex; align-items: center; gap: 10px; padding: 9px 2px; background: none; list-style: none;
            font-size: var(--fr-fs-sm); color: var(--fr-ink-3); font-variant-numeric: tabular-nums;
        }
        .thinking-block summary::-webkit-details-marker, .search-process-block summary::-webkit-details-marker { display: none; }
        .thinking-block summary::before, .search-process-block summary::before {
            content: ''; flex-shrink: 0; width: 5px; height: 5px; margin: 0 2px;
            border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
            transition: transform var(--fr-dur) var(--fr-ease);
        }
        .thinking-block[open] > summary::before, .search-process-block[open] > summary::before { transform: rotate(45deg); }
        .thinking-block summary:hover, .search-process-block summary:hover { color: var(--fr-ink); }
        .thinking-content, .search-process-content, body.dark-mode .thinking-content, body.dark-mode .search-process-content {
            margin: 0 0 10px; padding: 10px 14px; background: var(--fr-paper-2); border-radius: var(--fr-radius); font-size: var(--fr-fs-sm); line-height: 1.65; color: var(--fr-ink-2);
        }
        .tool-call-item, body.dark-mode .tool-call-item { padding: 4px 0; border-bottom-color: var(--fr-rule); }
        .tool-call-query, body.dark-mode .tool-call-query { font-weight: 500; color: var(--fr-ink); }
        .tool-call-meta { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .tool-call-status { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); font-variant-numeric: tabular-nums; }
        .tool-call-status.done, body.dark-mode .tool-call-status.done { color: var(--fr-ink-2); font-weight: 500; }
        .search-status { font-size: var(--fr-fs-sm); color: var(--fr-ink-3); }
        .search-status-dot, body.dark-mode .search-status-dot { width: 7px; height: 7px; border-radius: 1px; background: var(--fr-accent); }
        .search-status-elapsed, body.dark-mode .search-status-elapsed { color: var(--fr-ink-3); }

        /* 답변 아래 — 칩 한 줄, 비용·행동 한 줄 */
        .refs-chips { margin-top: 14px; gap: 6px; }
        .refs-chip, body.dark-mode .refs-chip { padding: 3px 10px; border: 1px solid var(--fr-rule-2); background: none; color: var(--fr-ink-2); font-size: var(--fr-fs-xs); font-variant-numeric: tabular-nums; }
        .refs-chip:hover, body.dark-mode .refs-chip:hover { border-color: var(--fr-ink-3); color: var(--fr-ink); }
        /* 패널이 열려 있으면 패널이 보여 주는 답변의 칩을 강조색으로 — 대화에서 "지금 어느 답변의 근거인가" 를 찾게 */
        .app.refs-open .refs-chips.active .refs-chip, body.dark-mode .app.refs-open .refs-chips.active .refs-chip { border-color: var(--fr-accent); color: var(--fr-accent); background: var(--fr-accent-tint); }
        .refs-chip-warn { color: var(--fr-ochre-ink); }
        .msg-cost-info, body.dark-mode .msg-cost-info { margin-top: 10px; padding: 0; border-top: 0; gap: 2px 8px; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); font-variant-numeric: tabular-nums; }
        .msg-cost-sep { color: var(--fr-ink-4); }
        .msg-cost-total, body.dark-mode .msg-cost-total { font-weight: 500; color: var(--fr-ink-2); }
        .msg-cost-badge, body.dark-mode .msg-cost-badge { padding: 0 7px; border: 0; background: var(--fr-paper-3); color: var(--fr-ink-2); font-size: var(--fr-fs-xs); font-weight: 500; }
        .msg-cost-badge.good, body.dark-mode .msg-cost-badge.good { background: var(--fr-accent-tint); color: var(--fr-accent); }
        .ai-action-btn.active, .ai-action-btn.active.down, body.dark-mode .ai-action-btn.active, body.dark-mode .ai-action-btn.active.down { color: var(--fr-accent); border-color: var(--fr-accent-line); background: var(--fr-accent-tint); }
        .ai-made-tag { border-color: var(--fr-rule-2); }

        /* 안내 — 왼쪽 색띠 대신 회색 면 + 사각 표식. 주의는 황토 사각 */
        .notice-banner, .notice-banner.warning, .notice-banner.info,
        body.dark-mode .notice-banner.warning, body.dark-mode .notice-banner.info {
            padding: 12px 14px; border: 0; border-radius: var(--fr-radius); background: var(--fr-paper-2); color: var(--fr-ink-2); font-size: var(--fr-fs-md); line-height: 1.65;
        }
        .notice-banner::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; border-radius: 1px; background: var(--fr-ink-4); }
        .notice-banner.warning::before { background: var(--fr-ochre); }
        .no-refs-notice, body.dark-mode .no-refs-notice { margin-top: 12px; padding: 14px 16px; border: 0; border-radius: var(--fr-radius); background: var(--fr-paper-2); color: var(--fr-ink-2); font-size: var(--fr-fs-md); line-height: 1.7; }
        .no-refs-notice strong, body.dark-mode .no-refs-notice strong { color: var(--fr-ink); }
        .no-refs-notice strong::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; border-radius: 1px; background: var(--fr-ink-4); }
        .no-refs-notice a, body.dark-mode .no-refs-notice a { color: var(--fr-accent); }
        .no-refs-guide-title, body.dark-mode .no-refs-guide-title { color: var(--fr-ink); }
        .no-refs-ask, body.dark-mode .no-refs-ask { min-height: 36px; padding: 0 14px; border: 1px solid var(--fr-rule-2); background: var(--fr-paper); color: var(--fr-ink); font-weight: 500; }
        .no-refs-ask:hover { border-color: var(--fr-ink-3); }
        .truncation-warning, body.dark-mode .truncation-warning { padding: 12px 14px; border: 0; border-radius: var(--fr-radius); background: var(--fr-ochre-tint); color: var(--fr-ochre-ink); font-size: var(--fr-fs-md); font-weight: 500; line-height: 1.65; }
        .truncation-again, body.dark-mode .truncation-again { min-height: 34px; padding: 0 12px; border: 1px solid var(--fr-rule-2); background: var(--fr-paper); color: var(--fr-ink); font-size: var(--fr-fs-sm); }
        .truncation-again:hover, body.dark-mode .truncation-again:hover { background: var(--fr-paper-2); }
        .stop-notice, body.dark-mode .stop-notice { border-left: 0; border-radius: var(--fr-radius); background: var(--fr-paper-2); color: var(--fr-ink-2); }
        .stop-notice-eta { font-family: inherit; font-variant-numeric: tabular-nums; color: var(--fr-ink-3); }

        /* 근거 레일 */
        .refs-panel { background: var(--fr-paper); }
        .refs-tab { font-size: var(--fr-fs-sm); color: var(--fr-ink-3); }
        .refs-tab:hover { color: var(--fr-ink); }
        .refs-tab.active { color: var(--fr-ink); border-bottom-color: var(--fr-ink); }
        .refs-tab-count { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); font-variant-numeric: tabular-nums; }
        .refs-check, body.dark-mode .refs-check { margin-bottom: 14px; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--fr-rule); border-radius: 0; background: none; font-size: var(--fr-fs-sm); line-height: 1.6; color: var(--fr-ink-2); }
        .refs-check--warn, body.dark-mode .refs-check--warn { padding: 12px 14px; border: 0; border-radius: var(--fr-radius); background: var(--fr-ochre-tint); color: var(--fr-ochre-ink); }
        /* 「DB 에 있음」 풀이 — 요약 한 줄 아래 접어 둔다(개선점 E2). 주의 상자 안에서는 상자 글자색(황토)을 따른다 */
        .refs-check-more { margin-top: 4px; }
        .refs-check-more > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .refs-check-more > summary::-webkit-details-marker { display: none; }
        .refs-check-more > summary::before { content: ''; width: 0; height: 0; border-left: 4px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent; transition: transform var(--fr-dur) var(--fr-ease); }
        .refs-check-more[open] > summary::before { transform: rotate(90deg); }
        .refs-check-more > summary:hover { color: var(--fr-ink); }
        .refs-check-more > summary:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        .refs-check--warn .refs-check-more > summary, .refs-check--warn .refs-check-more > summary:hover { color: inherit; }
        .refs-check-more .refs-muted { margin-top: 4px; }
        .refs-section-title { font-size: var(--fr-fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--fr-ink-3); }
        .refs-item, body.dark-mode .refs-item { margin: 0; border: 0; border-top: 1px solid var(--fr-rule); border-radius: 0; background: none; overflow: visible; }
        .refs-item-head { padding: 14px 6px 6px; }
        .refs-item-head:hover, body.dark-mode .refs-item-head:hover { background: var(--fr-paper-2); }
        .refs-item-title, body.dark-mode .refs-item-title { font-family: var(--fr-serif); font-size: var(--fr-fs-lg); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--fr-ink); }
        .refs-item-case, body.dark-mode .refs-item-case { font-size: var(--fr-fs-sm); color: var(--fr-ink-2); }
        .refs-item-sub { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); font-variant-numeric: tabular-nums; }
        .refs-item-body { padding: 0 6px 14px; }
        .refs-para, .refs-item-text, body.dark-mode .refs-para, body.dark-mode .refs-item-text { font-family: var(--fr-serif); font-size: var(--fr-fs-md); line-height: 1.9; color: var(--fr-ink); }
        .refs-para-num { color: var(--fr-ink-3); }
        .refs-btn, body.dark-mode .refs-btn { padding: 5px 11px; border-color: var(--fr-rule-2); background: var(--fr-paper); color: var(--fr-ink-2); font-size: var(--fr-fs-sm); }
        .refs-btn:hover, body.dark-mode .refs-btn:hover { border-color: var(--fr-ink-3); color: var(--fr-ink); }
        .refs-btn--primary, body.dark-mode .refs-btn--primary { background: var(--fr-btn); border-color: var(--fr-btn); color: var(--fr-btn-ink); }
        .refs-btn--primary:hover { background: var(--fr-btn-hover); color: var(--fr-btn-ink); }
        .refs-detail-title, body.dark-mode .refs-detail-title { font-family: var(--fr-serif); font-size: var(--fr-fs-xl); font-weight: 500; letter-spacing: -0.01em; color: var(--fr-ink); }
        .refs-detail-sub { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); font-variant-numeric: tabular-nums; }
        .law-article, body.dark-mode .law-article { padding: 2px 0; border: 0; background: none; }
        /* 원문은 명조 14px/1.9 한 가지(개선점 B2) — 레일 미리보기·조문·문단·판례 요지/전문·발췌가 같은 활자. 줄 단위 조문(.law-para-text--lines)도 같은 값 */
        .law-para, body.dark-mode .law-para { font-family: var(--fr-serif); font-size: var(--fr-fs-md); line-height: 1.9; color: var(--fr-ink); }
        .law-para + .law-para, body.dark-mode .law-para + .law-para { border-top-color: var(--fr-rule); }
        .law-para--cited, body.dark-mode .law-para--cited { background: var(--fr-accent-tint); box-shadow: -8px 0 0 var(--fr-accent-tint), 8px 0 0 var(--fr-accent-tint); }
        .law-pending-flag, .law-pending, body.dark-mode .law-pending-flag, body.dark-mode .law-pending { border-left: 0; border-radius: var(--fr-radius); background: var(--fr-ochre-tint); color: var(--fr-ochre-ink); }
        mark.ref-num, body.dark-mode mark.ref-num { background: var(--fr-accent-tint); color: var(--fr-accent); }
        /* 시행 예정 개정 머리(개선점 E3) — 황토 배지(무엇) + 문장, 날짜만 등폭(refs-panel.js pendingFlagHtml·monoDates) */
        .law-pending-badge { display: inline-block; margin-right: 6px; padding: 0 5px; border: 1px solid var(--fr-ochre); border-radius: var(--fr-radius); font-size: var(--fr-fs-xs); font-weight: 600; line-height: 1.6; letter-spacing: 0.02em; vertical-align: 1px; color: var(--fr-ochre-ink); }
        .law-pending-date { font-family: var(--fr-mono); font-size: 0.95em; font-variant-numeric: tabular-nums; }

        /* 근거 순번(개선점 D2·E1·E4) — 본문 인용 끝의 칩과 레일 카드가 같은 번호(refs-panel.js citeIndex).
           칩: 번호는 data-no 를 ::before 로 그린다(글자가 아니라 복사·textContent 에 숫자가 섞이지 않는다).
           확인·열람함 = 남색 채움, DB 에 있음 = 남색 테두리, 미확인 = 황토 테두리 — 모양과 색 두 축(시안 .ref sup) */
        .cite-mark[data-no] { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: auto; min-width: 15px; height: 15px; margin-left: 3px; padding: 0 3px; vertical-align: 3px; border-radius: var(--fr-radius); background: var(--fr-accent); color: var(--fr-paper); font-family: var(--fr-mono); font-size: 10px; /* 단계 밖: 시안 .ref sup 10px — 15px 알약 안 근거 번호(표지) */ font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
        .cite-mark[data-no]::before { content: attr(data-no); }
        .cite-ref--indb .cite-mark[data-no] { background: transparent; color: var(--fr-accent); box-shadow: inset 0 0 0 1px var(--fr-accent); }
        .cite-ref--unverified .cite-mark[data-no] { background: transparent; color: var(--fr-ochre-ink); box-shadow: inset 0 0 0 1px var(--fr-ochre); }
        /* 고른 근거·마우스를 올린 근거의 본문 인용 — 남색 옅은 바탕(시안 .ref.on) */
        .ai-content a.cite-ref.is-on, .ai-content a.cite-ref.is-hover, body.dark-mode .ai-content a.cite-ref.is-on, body.dark-mode .ai-content a.cite-ref.is-hover { background: var(--fr-accent-tint); box-shadow: 0 0 0 2px var(--fr-accent-tint); }
        .ai-content a.cite-ref.is-on .cite-name, .ai-content a.cite-ref.is-hover .cite-name { text-decoration-color: var(--fr-accent); }
        .ai-content a.cite-ref { transition: background var(--fr-dur) var(--fr-ease), box-shadow var(--fr-dur) var(--fr-ease); }
        /* 레일 카드 머리 — 왼쪽 22px 칸 등폭 남색 번호 · 가운데 제목(명조)·부제 · 오른쪽 확인 표식(시안 .card-head) */
        .refs-item.has-no .refs-item-head { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; }
        .refs-item-no { padding-top: 3px; font-family: var(--fr-mono); font-size: var(--fr-fs-xs); font-weight: 500; line-height: 1.6; color: var(--fr-accent); font-variant-numeric: tabular-nums; }
        .refs-item-main { min-width: 0; }
        .refs-item-state { width: 7px; height: 7px; margin-top: 9px; border-radius: 1px; background: var(--fr-accent); }
        .refs-item-state--indb { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fr-accent); }
        .refs-item-state--unverified { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fr-ochre); }
        .refs-item.has-no .refs-item-body { padding-left: 38px; }
        .refs-item { transition: background var(--fr-dur-panel) var(--fr-ease); }
        .refs-item.is-hover, body.dark-mode .refs-item.is-hover { background: var(--fr-paper-2); }
        .refs-item.is-picked, body.dark-mode .refs-item.is-picked { background: var(--fr-accent-tint); }
        .refs-item.is-picked .refs-item-head:hover { background: transparent; }
        .refs-item.is-folded .refs-item-body { display: none; }
        .refs-item.is-folded .refs-item-head { padding-bottom: 12px; }
        .refs-picked-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .refs-picked-no { font-family: var(--fr-mono); font-weight: 500; color: var(--fr-accent); }
        .refs-unpick { padding: 0; border: 0; background: none; font: inherit; color: var(--fr-accent); text-decoration: underline; text-decoration-color: var(--fr-accent-line); text-underline-offset: 3px; cursor: pointer; }
        .refs-unpick:hover { text-decoration-color: var(--fr-accent); }
        .case-summary, body.dark-mode .case-summary { padding: 2px 0; border: 0; background: none; font-family: var(--fr-serif); font-size: var(--fr-fs-md); line-height: 1.9; color: var(--fr-ink); }
        .case-content, body.dark-mode .case-content { font-family: var(--fr-serif); font-size: var(--fr-fs-md); line-height: 1.9; color: var(--fr-ink); }
        .case-empty, body.dark-mode .case-empty { border-left: 0; border-radius: var(--fr-radius); background: var(--fr-paper-2); color: var(--fr-ink-2); }
        .case-section-head, body.dark-mode .case-section-head { background: none; padding: 0; color: var(--fr-ink-3); font-size: var(--fr-fs-xs); }
        .doc-card, .web-card, body.dark-mode .doc-card, body.dark-mode .web-card { margin: 0; padding: 14px 6px; border: 0; border-top: 1px solid var(--fr-rule); border-radius: 0; background: none; }
        .doc-card-title, .web-card-title, body.dark-mode .doc-card-title, body.dark-mode .web-card-title { font-size: var(--fr-fs-md); color: var(--fr-ink); }
        .doc-badge, .doc-badge--pdf, .doc-badge--hwp, .doc-badge--hwpx, .doc-badge--link, .doc-badge--excerpt, .doc-badge--index, body.dark-mode .doc-badge { border-color: var(--fr-rule-2); color: var(--fr-ink-2); }
        .doc-excerpt, body.dark-mode .doc-excerpt { border-left: 1px solid var(--fr-rule-2); }
        .doc-excerpt-text, body.dark-mode .doc-excerpt-text { font-family: var(--fr-serif); font-size: var(--fr-fs-md); line-height: 1.9; color: var(--fr-ink); }

        /* 상단 도구 줄 · 모델 선택 · 웹 검색 칩 — 같은 텍스트 버튼, 기호는 선 그림(▼·▾ 글자 대신 .fr-chev) */
        .fr-chev { display: inline-block; flex-shrink: 0; vertical-align: middle; transition: transform var(--fr-dur) var(--fr-ease); }
        [aria-expanded="true"] > .fr-chev { transform: rotate(180deg); }
        .chat-toolbar { gap: 2px; padding: 8px 16px; }
        .chat-toolbar-btn, body.dark-mode .chat-toolbar-btn { padding: 5px 10px; border: 1px solid transparent; background: none; color: var(--fr-ink-2); font-size: var(--fr-fs-sm); }
        .chat-toolbar-btn:hover, body.dark-mode .chat-toolbar-btn:hover { border-color: var(--fr-rule-2); background: none; color: var(--fr-ink); }
        .chat-toolbar-btn.active, .app.refs-open #refsToggleBtn, body.dark-mode .app.refs-open #refsToggleBtn { border-color: var(--fr-rule-2); background: var(--fr-paper-2); color: var(--fr-ink); }
        .export-dropdown, body.dark-mode .export-dropdown { border: 0; background: var(--fr-paper); box-shadow: var(--fr-shadow-overlay); padding: 4px; }
        .model-dropdown-trigger, body.dark-mode .model-dropdown-trigger { height: 30px; padding: 0 9px; gap: 6px; border: 1px solid var(--fr-rule-2); background: none; color: var(--fr-ink-2); font-size: var(--fr-fs-sm); }
        .model-dropdown-trigger:hover, body.dark-mode .model-dropdown-trigger:hover { border-color: var(--fr-ink-3); background: none; color: var(--fr-ink); }
        .model-dropdown-menu, body.dark-mode .model-dropdown-menu { min-width: 280px; padding: 6px; border: 0; background: var(--fr-paper); box-shadow: var(--fr-shadow-overlay); }
        .model-option { padding: 9px 12px; border-radius: var(--fr-radius); }
        .model-option:hover, .model-option.active, body.dark-mode .model-option:hover, body.dark-mode .model-option.active { background: var(--fr-paper-2); }
        .model-option:focus-visible, body.dark-mode .model-option:focus-visible { outline-color: var(--fr-accent); }
        .model-option-name, body.dark-mode .model-option-name { font-size: var(--fr-fs-sm); color: var(--fr-ink); }
        .model-option-desc, body.dark-mode .model-option-desc { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .input-chip {
            display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px;
            border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: none;
            font-family: inherit; font-size: var(--fr-fs-sm); color: var(--fr-ink-3); cursor: pointer;
            transition: background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease), border-color var(--fr-dur) var(--fr-ease);
        }
        .input-chip::before { content: ''; width: 7px; height: 7px; border-radius: 1px; box-shadow: inset 0 0 0 1.5px currentColor; }
        .input-chip:hover { border-color: var(--fr-ink-3); color: var(--fr-ink); }
        .input-chip[aria-pressed="true"] { border-color: var(--fr-accent-line); background: var(--fr-accent-tint); color: var(--fr-accent); }
        .input-chip[aria-pressed="true"]::before { background: currentColor; box-shadow: none; }
        .input-chip:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
        #sendBtn { width: 36px; height: 36px; }

        /* 사이드바 — 디자인 시스템 v2 (시안 2 · 로그인 후 홈). 명조 워드마크, 날짜 묶음 이름, 조용한 행, 계정 칩, 떠 있는 메뉴 */
        .sidebar, body.dark-mode .sidebar { background: var(--fr-paper-2); border-right-color: var(--fr-rule); }
        .sidebar-top { padding: 16px 14px 10px; }
        .sidebar-logo, body.dark-mode .sidebar-logo { font-family: var(--fr-serif); font-size: 19px; /* 단계 밖: 워드마크 — 글자 단계가 아니라 로고 크기 */ font-weight: 500; letter-spacing: -0.015em; color: var(--fr-ink); }
        .sidebar-close-btn:hover, body.dark-mode .sidebar-close-btn:hover { background: var(--fr-paper-3); color: var(--fr-ink); }
        .sidebar-nav { padding: 4px 10px 8px; }
        .sidebar-nav-btn, body.dark-mode .sidebar-nav-btn { padding: 8px 10px; font-size: var(--fr-fs-md); color: var(--fr-ink-2); }
        .sidebar-nav-btn:hover, body.dark-mode .sidebar-nav-btn:hover { background: var(--fr-paper-3); color: var(--fr-ink); }
        #newChatBtn { border: 1px solid var(--fr-rule-2); background: var(--fr-paper); color: var(--fr-ink); font-weight: 500; }
        #newChatBtn:hover { border-color: var(--fr-ink-3); }
        .kbd-hint, body.dark-mode .kbd-hint { font-family: var(--fr-mono); color: var(--fr-ink-3); border-color: var(--fr-rule-2); }
        .sidebar-search input, body.dark-mode .sidebar-search input { height: 34px; border: 1px solid var(--fr-rule-2); background: var(--fr-paper); color: var(--fr-ink); font-size: var(--fr-fs-md); }
        .sidebar-search input:focus, body.dark-mode .sidebar-search input:focus { border-color: var(--fr-accent); box-shadow: 0 0 0 3px var(--fr-accent-tint); }
        /* 목록 머리 「최근 항목」은 날짜 묶음 이름이 대신한다 — 화면에서는 숨기고 목록(listbox)의 이름으로만 남긴다. 검색 중에는 「검색 결과」로 보인다 */
        .sidebar-section-label { padding: 14px 16px 4px; font-size: var(--fr-fs-xs); font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--fr-ink-3); }
        .sidebar-section-label:not(.is-searching) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        .conversation-list { padding: 0 8px; }
        .conversation-group + .conversation-group { margin-top: 6px; }
        .conversation-group-label { padding: 12px 10px 4px; font-size: var(--fr-fs-xs); font-weight: 500; color: var(--fr-ink-3); }
        .conversation-item { padding: 7px 10px; }
        .conversation-item:hover, body.dark-mode .conversation-item:hover { background: var(--fr-paper-3); }
        .conversation-item.active, body.dark-mode .conversation-item.active { background: var(--fr-paper-3); }
        .conversation-item-title, body.dark-mode .conversation-item-title { font-size: 13.5px; /* 단계 밖: 시안 §7 사이드바 항목 13.5px */ color: var(--fr-ink-2); }
        .conversation-item.active .conversation-item-title { color: var(--fr-ink); font-weight: 500; }
        .conversation-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: var(--fr-ink-3); }
        .conversation-action-btn:hover, .conversation-action-btn.delete:hover, body.dark-mode .conversation-action-btn:hover, body.dark-mode .conversation-action-btn.delete:hover { background: var(--fr-rule); color: var(--fr-ink); }
        .sidebar-empty { color: var(--fr-ink-3); }
        .sidebar-footer, body.dark-mode .sidebar-footer { border-top-color: var(--fr-rule); padding: 8px 10px 10px; }
        /* 사용량 줄 「● Sonnet 5.5 · 체험 질문 N회 남음 · ₩5,178 ($3.74)」 — 사이드바를 줄이면(최소 200px) 둘째 줄로 꺾인다.
           가운뎃점을 글자로 두면 꺾인 줄이 「· ₩5,178」 로 시작해서, 점은 항목 앞 ::before 로 그리고(.su-sep, ai-chat.js updateUsageDisplay)
           줄 첫머리에 온 점은 왼쪽 여백 안이라 clip-path 가 잘라 낸다. 위·아래·오른쪽은 음수 inset 이라 포커스 링이 안 잘린다 */
        .sidebar-usage { padding: 6px 10px; column-gap: 12px; row-gap: 2px; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); font-variant-numeric: tabular-nums; clip-path: inset(-4px -4px -4px 7px); }
        #creditsDisplay, #loginPrompt { display: contents; }
        .sidebar-usage .su-sep { position: relative; }
        .sidebar-usage .su-sep::before { content: '·'; position: absolute; left: -10px; width: 6px; text-align: center; color: var(--fr-ink-3); text-decoration: none; }
        .usage-dot { margin-right: -6px; border-radius: 1px; background: var(--fr-accent); }
        .credits-btn, body.dark-mode .credits-btn { color: var(--fr-ink-2); text-decoration: none; font-variant-numeric: tabular-nums; }
        .credits-btn:hover, body.dark-mode .credits-btn:hover { color: var(--fr-ink); text-decoration: underline; }
        .credits-btn.low, .balance-warning { color: var(--fr-ochre-ink); }
        .sidebar-profile:hover, .sidebar-profile[aria-expanded="true"], body.dark-mode .sidebar-profile:hover, body.dark-mode .sidebar-profile[aria-expanded="true"] { background: var(--fr-paper-3); }
        .profile-avatar { background: var(--fr-ink); color: var(--fr-paper); font-size: var(--fr-fs-sm); }
        .profile-name, body.dark-mode .profile-name { font-size: var(--fr-fs-sm); color: var(--fr-ink); }
        .profile-plan, body.dark-mode .profile-plan { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        /* 눌린·올린 바탕(paper-3) 위에서 ink-3 은 4.29:1 — 한 단계 짙게(2026-10-05 화면 대비 실측) */
        .sidebar-profile:hover .profile-plan, .sidebar-profile[aria-expanded="true"] .profile-plan { color: var(--fr-ink-2); }
        .beta-badge { border-color: var(--fr-ochre) !important; color: var(--fr-ochre-ink) !important; background: none !important; }
        .user-menu, body.dark-mode .user-menu { left: 10px; right: 10px; padding: 6px; border: 0; background: var(--fr-paper); box-shadow: var(--fr-shadow-overlay); }
        .user-menu-email { padding: 8px 10px 10px; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); border-bottom-color: var(--fr-rule); }
        /* box-sizing — 「문의하기」 는 <a> 라 width:100% 에 안쪽 여백이 더해져 메뉴 밖으로 14px 삐졌다(버튼은 UA 가 border-box). 2026-10-05 */
        .user-menu-item, body.dark-mode .user-menu-item { box-sizing: border-box; padding: 9px 10px; border-radius: var(--fr-radius); font-size: var(--fr-fs-sm); color: var(--fr-ink-2); text-decoration: none; }
        .user-menu-item:hover, .user-menu-item:focus-visible, body.dark-mode .user-menu-item:hover { background: var(--fr-paper-2); color: var(--fr-ink); outline: none; }
        .user-menu-divider, body.dark-mode .user-menu-divider { background: var(--fr-rule); margin: 6px 0; }
        /* 화면 모드 줄 — 사이드바를 최소 폭(200px)으로 줄이면 메뉴 안쪽이 154px 라 「화면」과 세 칸이 한 줄에 못 든다.
           예전에는 글자가 한 자씩 꺾였다(「화/면」「밝/게」, 2026-10-05 신고). 이제 칸 묶음이 통째로 다음 줄로 내려가 폭을 채운다 */
        .user-menu-theme { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 4px 4px 4px 10px; }
        .user-menu-theme-label { font-size: var(--fr-fs-sm); color: var(--fr-ink-2); white-space: nowrap; }
        .user-menu-theme-seg { display: inline-flex; flex: 1 0 auto; gap: 2px; padding: 2px; border-radius: var(--fr-radius); background: var(--fr-paper-3); }
        .user-menu-theme-seg button { flex: 1 0 auto; height: 26px; padding: 0 6px; border: 0; border-radius: var(--fr-radius); background: none; font-family: inherit; font-size: var(--fr-fs-xs); white-space: nowrap; color: var(--fr-ink-2); cursor: pointer; }
        .user-menu-theme-seg button[aria-checked="true"] { background: var(--fr-paper); color: var(--fr-ink); font-weight: 500; box-shadow: 0 0 0 1px var(--fr-rule); }
        body.dark-mode .user-menu-theme-seg button[aria-checked="true"] { background: var(--fr-rule-2); box-shadow: none; }
        .user-menu-theme-seg button:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 1px; }

        /* 글자 대비 하한(개선점 J2) — 2026-10-05 화면 실측(장면마다 계산된 글자색 × 겹친 바탕, 밝게·어둡게)에서 4.5:1 에 못 미친 글자.
           옛 규칙(body.dark-mode …)이 v2 보다 구체적이라 이기던 자리는 같은 구체성으로 덮는다. 장식 문장부호([ · – /)는 ink-4 그대로 둔다.
           회귀는 tests/e2e/scenarios/contrast.js 가 본다 */
        .refs-muted, body.dark-mode .refs-muted { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .refs-uncited > summary, body.dark-mode .refs-uncited > summary { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .refs-uncited > summary:hover, body.dark-mode .refs-uncited > summary:hover { color: var(--fr-ink); }
        .refs-uncited-note, body.dark-mode .refs-uncited-note { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .support-link-note, body.dark-mode .support-link-note { color: var(--fr-ink-2); }
        /* 폰 머리의 계정 이니셜 — 연회색 바탕에 흰 글자(3.77:1)였다. 사이드바 .profile-avatar 와 같은 잉크 바탕 */
        .mobile-profile-btn, body.dark-mode .mobile-profile-btn { background: var(--fr-ink); color: var(--fr-paper); }

        /* ── 답변 화면 다듬기(개선점 ④, 2026-10-05) ───────────────────────────────────────────── */
        /* D3 결론 — 라벨(남색 12px) + 17px 500 본문 + 위아래 헤어라인(시안 AppAnswer). 예전 16.5px·굵기 없음 */
        .ai-content .answer-conclusion p, .ai-content .answer-conclusion li { font-size: var(--fr-fs-xl); font-weight: 500; line-height: 1.8; color: var(--fr-ink); }
        /* D4 답변 아래 둘째 줄 — 왼쪽 「생성형 AI 답변」 표지 + 비용, 오른쪽 아이콘 버튼(ai-chat.js addAIActions). 첫 줄은 근거 칩.
           늘 보인다 — 예전에는 마우스를 올려야 보여(opacity 0) 폰에서는 보이지 않는 채로 눌렸고, 이제 비용 줄도 여기 있다 */
        .ai-actions, .message.ai:hover .ai-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; align-self: stretch; box-sizing: border-box; width: 100%; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fr-rule); opacity: 1; }
        .ai-actions-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
        .ai-actions-btns { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
        .ai-made-tag, body.dark-mode .ai-made-tag { margin: 0; padding: 2px 6px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); font-size: var(--fr-fs-xs); line-height: 1.4; color: var(--fr-ink-2); }
        .ai-actions-meta .msg-cost-info, body.dark-mode .ai-actions-meta .msg-cost-info { margin: 0; padding: 0; border: 0; font-size: var(--fr-fs-xs); }
        .ai-action-btn, body.dark-mode .ai-action-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--fr-radius); background: none; font: inherit; font-size: var(--fr-fs-sm); color: var(--fr-ink-3); cursor: pointer; }
        .ai-action-btn svg { flex: none; }
        .ai-action-btn:hover, body.dark-mode .ai-action-btn:hover { border-color: transparent; background: var(--fr-paper-2); color: var(--fr-ink); }
        /* D6 진행 표시 — 답변 칸 바로 아래, 단계 셋(근거 찾기 · 답변 정리 · 인용 확인) + 지금 하는 일·경과 시간(ai-chat.js addSearchStatus) */
        .search-status, body.dark-mode .search-status { display: block; margin: 14px 0 0; padding: 0; animation: none; }
        .search-status-steps { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 8px; padding: 0; list-style: none; font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .search-status-steps li { position: relative; display: inline-flex; align-items: center; gap: 6px; }
        .search-status-steps li::before { content: ''; width: 7px; height: 7px; border-radius: 1px; box-shadow: inset 0 0 0 1.5px var(--fr-rule-2); }
        .search-status-steps li.is-done::before { background: var(--fr-ink-3); box-shadow: none; }
        .search-status-steps li.is-now { color: var(--fr-ink); font-weight: 500; }
        .search-status-steps li.is-now::before { background: var(--fr-accent); box-shadow: none; animation: pulse 1.2s infinite; }
        .search-status-line { display: flex; align-items: center; gap: 8px; font-size: var(--fr-fs-sm); color: var(--fr-ink-2); }
        .search-status-line .search-status-dot { display: none; }
        .search-status-elapsed { font-variant-numeric: tabular-nums; }
        /* 대화를 만드는 동안 잠깐 서는 임시 자리(답변 칸이 생기면 그 아래로 옮긴다) */
        #searchStatusHost .search-status { margin-top: 0; }
        /* D9 도구 줄의 근거 수 — 잉크 배지 대신 등폭 숫자. 눌림 상태(패널 열림)는 버튼 자신이 말한다 */
        .refs-toggle-count, body.dark-mode .refs-toggle-count { min-width: 0; margin-left: 6px; padding: 0; border-radius: 0; background: none; color: var(--fr-ink-3); font-family: var(--fr-mono); font-size: var(--fr-fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
        .app.refs-open #refsToggleBtn .refs-toggle-count { color: var(--fr-accent); }
        /* F2 계정 칩 — 계정 메뉴 버튼(이니셜 · 이름 · 「모델 · 체험」, 오른쪽 펼침 표식) + 그 아래 같은 칸의 잔액 버튼(충전 창).
           두 버튼은 나란한 형제다(버튼 안 버튼 금지). 요금 안내 7절 "왼쪽 사이드바 아래의 잔액 표시를 누르거나 계정 메뉴에서" 의 두 길.
           로그인하면 따로 있던 사용량 줄은 숨는다(같은 내용이 칩에) */
        .sidebar-footer.has-profile .sidebar-usage { display: none; }
        .sidebar-account { display: flex; flex-direction: column; }
        .profile-info { flex: 1; min-width: 0; }
        .profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-plan { white-space: normal; line-height: 1.5; }
        .profile-chev { flex: none; color: var(--fr-ink-3); }
        /* 잔액 버튼 — 칩 글자 줄(왼쪽 10 + 이니셜 32 + 간격 10 = 52px)에 맞춰 칩 바로 아래. 금액은 한 덩어리(말줄임으로 자르지 않는다) */
        .profile-balance { align-self: flex-start; margin: -6px 0 2px 46px; padding: 2px 6px; border: 0; border-radius: var(--fr-radius); background: none;
            font: inherit; font-size: var(--fr-fs-xs); line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fr-ink-2); cursor: pointer; }
        .profile-balance[hidden] { display: none; }
        .profile-balance:hover { color: var(--fr-ink); text-decoration: underline; text-underline-offset: 3px; }
        .profile-balance:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 1px; }
        .profile-balance.is-low { color: var(--fr-ochre-ink); }
        .profile-balance.is-low::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; vertical-align: 1px; border-radius: 1px; background: var(--fr-ochre); }
        /* F4 빈 대화 목록 — 첫 사안을 적어 보라는 한 줄 + [새 대화](시안 States 10) */
        .sidebar-empty--first { padding: 14px 10px; text-align: left; }
        .sidebar-empty--first p { margin: 0; font-size: var(--fr-fs-sm); line-height: 1.7; color: var(--fr-ink-2); }
        .sidebar-empty-new { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin-top: 12px; padding: 0 12px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: var(--fr-paper); font: inherit; font-size: var(--fr-fs-sm); font-weight: 500; color: var(--fr-ink); cursor: pointer; }
        .sidebar-empty-new:hover { border-color: var(--fr-ink-3); }

        /* 손가락으로 누르는 기기(pointer: coarse) — 누름 영역 44px(개선점 I3·I4). 2026-10-05 폰 장면 실측에서 아이콘 버튼이 20~40px,
           입력 줄 칩·도구 줄이 28~30px 였다. 화면 폭이 아니라 입력 장치에 건다 — 좁은 창의 마우스는 키울 이유가 없다. 두 방법:
           ① 모양째 키움(min 44) — 줄·목록·버튼처럼 커져도 되는 것.
           ② 보이는 모양은 두고 투명한 누름 영역(::after)만 넓힘 — 계정 이니셜·ⓘ·창 닫기처럼 작아야 어울리는 아이콘과 입력 줄 칩.
              이웃과 겹치지 않는 방향으로만 넓힌다(입력 줄 칩·도구 줄은 위아래만. 줄이 촘촘한 링크 목록은 겹치므로 ① 로).
              ::after 는 테두리 안쪽(padding 상자) 기준이라 테두리가 있는 요소는 그만큼(1px) 더 넓힌다 — 칩이 아래로 1px 모자랐다(실측).
           회귀는 tests/e2e/scenarios/touch.js 가 hit test(중심 ±21px 네 모서리)로 본다 */
        @media (pointer: coarse) {
            .mobile-hamburger, .scroll-bottom-btn, .refs-close, .sidebar-close-btn, .refs-turn-step { min-width: 44px; min-height: 44px; }
            #sendBtn { width: 44px; height: 44px; }
            #chatInput { min-height: 44px; }
            .mobile-brand, .sidebar-logo, .gate-wordmark { display: inline-flex; align-items: center; min-height: 44px; }
            .sidebar-nav-btn, .user-menu-item, .settings-nav-item, .settings-link-btn, .tx-btn, .refs-tab, .refs-btn, .refs-turn-now { min-height: 44px; }
            .refs-tab { min-width: 44px; justify-content: center; }
            .user-menu-theme-seg button { height: 44px; }
            .settings-row .fr-segment span { height: 44px; }   /* 설정 일반 탭 화면 모드·글씨 크기 — 30px 였다(2026-10-09) */
            /* 글씨 크기 여섯 칸(2026-10-09) — 360 에서 한 줄: 안쪽 여백 12 → 5px, 칸은 44px 아래로 안 좁힌다. 더 좁은 폭(320)은 두 줄로 넘어간다 */
            .settings-row .fr-segment--steps span { min-width: 44px; padding: 0 5px; justify-content: center; box-sizing: border-box; }
            .ai-action-btn, .sidebar-empty-new, .refs-check-more > summary { min-height: 44px; }
            .profile-balance { min-height: 44px; margin-top: -4px; }   /* 칩 아래 여백(8px) 안까지만 — 더 당기면 칩의 누름 영역을 덮는다 */
            .gate-links { row-gap: 0; }
            .gate-links a { display: inline-flex; align-items: center; min-height: 44px; }
            /* 홈 아래 정책 링크 — 로그인 전 첫 화면 바닥 링크(.gate-links)와 같은 처리. 폰 홈이 한 화면에 들어오면서(390) 처음 보이는 자리에 왔다 */
            .home-below .policy-links { row-gap: 0; }
            .home-below .policy-links a { display: inline-flex; align-items: center; min-height: 44px; }
            /* 대화 행 — 이름 바꾸기·삭제는 마우스를 올릴 때만 보였다(opacity 0). 터치에는 올리기가 없어 보이지 않는 채로 눌렸다
               (행 오른쪽 끝을 누르면 보이지 않는 삭제 버튼) — 늘 보이게 하고 44px */
            .conversation-item { min-height: 44px; }
            .conversation-actions { opacity: 1; }
            .conversation-action-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
            /* ② 누름 영역만 — 보이는 크기: 이니셜 30 · ⓘ 24 · 닫기 32 · 칩·모델 30 · 도구 줄 28 · 「모든 근거 펼치기」 19 */
            .mobile-profile-btn, .info-icon-btn, .model-dropdown-trigger, .input-chip, .chat-toolbar-btn, .refs-unpick { position: relative; }
            .mobile-profile-btn::after { content: ''; position: absolute; inset: -7px; }
            .info-icon-btn::after { content: ''; position: absolute; inset: -10px; }
            .modal-close::after { content: ''; position: absolute; inset: -6px; }
            .model-dropdown-trigger::after, .input-chip::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
            .chat-toolbar-btn::after { content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
            /* 사용량 줄의 잔액 — 한 줄 안 글자 버튼(12px)이라 위아래로만 36px 까지. 같은 일(충전 창)을 계정 메뉴 「잔액 충전」(44px)이 한다 */
            .sidebar-usage .credits-btn::after { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
            .refs-unpick::after { content: ''; position: absolute; left: -4px; right: -4px; top: -13px; bottom: -13px; }
        }

        @media (max-width: 520px) {
            .gate-main { min-height: 100vh; min-height: 100dvh; }
            .spec-source { margin-top: 16px; }
            .spec-answer { padding: 20px 18px; }
            .spec-stats { gap: 12px; }
            .spec-stats dd { font-size: var(--fr-fs-xl); }
        }

        /* ============================================================
         * 폰 대화 화면 크롬 — 머리줄 한 줄 · 떠 있는 위·아래 · 몰입 모드 · 글씨 크기 (2026-10-08 사용자 요청 「시원시원하지 않다」)
         *
         * 2026-10-08 실측(390×844, 답변 하나): 위 108px(머리줄 64 + 도구 줄 44) · 아래 187px(입력 상자 127 + AI 고지·ⓘ 두 줄 44) —
         * 읽는 칸이 549px(65%)였다. 360×740 은 445px(60%).
         *
         * 데스크톱(769px~): .mobile-header 는 display: contents — 햄버거·이름·잔액은 숨고 도구 줄(#chatToolbar)만 예전처럼 .main 의 한 줄이다.
         * 폰 대화 화면:
         *   - 머리줄과 도구 줄이 한 줄(52px). 「근거 자료」는 「근거」, 피드백·내보내기는 ⋯ 하나(펼치면 맨 위가 피드백). 잔액·계정은 그 자리 그대로.
         *   - .main.chat-float(js/chat-chrome.js 가 붙인다 — 폭 ≤768 · 홈 아님 · 미인증 배너 없음): 머리줄과 입력창을 본문 위에 겹쳐 띄우고
         *     본문(.chat-content)은 그 높이만큼 위아래를 비운다(--chat-top-h·--chat-bottom-h, ResizeObserver 실측). 겹쳐 두어야 몰입 모드가
         *     transform 하나로 비켜난다 — 흐름 안에 두면 비켜날 때마다 본문이 다시 배치되며 글이 튄다.
         *   - 입력 상자 안쪽 여백과 AI 고지 줄을 줄인다. 고지 문구는 그대로(인공지능 기본법 제31조) — 몰입 중에는 답변마다 붙은 고지가 남는다.
         *   - .immersive: 읽으며 밀어 내리면 위는 위로, 아래는 아래로 비켜나고 「이어서 묻기」 하나만 남는다(js/chat-chrome.js 가 판정).
         * 홈(10-07 C안 한 화면 압축)은 손대지 않는다 — .main.is-home 이면 chat-float 가 붙지 않고, 아래 규칙은 전부 :not(.is-home) 이나 chat-float 아래다.
         * ============================================================ */
        @media (min-width: 769px) {
            .mobile-header { display: contents; }
            .mobile-hamburger, .mobile-brand, .mobile-auth { display: none; }
        }
        .tb-phone { display: none; }
        .settings-row .fr-segment--steps { flex-wrap: wrap; }   /* 글씨 크기 여섯 칸 — 좁은 폭에서는 두 줄로(손가락 기기의 칸 폭은 아래 pointer: coarse 묶음) */
        .settings-row-control { max-width: 100%; }   /* flex: none 이라 내용 폭으로 늘어 여섯 칸이 320 에서 줄을 안 바꾸고 화면 밖으로 잘렸다 — 줄 폭까지만 */
        .text-size-wrap { position: relative; display: inline-flex; }
        .chat-toolbar .text-size-btn { min-width: 32px; justify-content: center; font-weight: 600; }
        .text-size-pop { position: absolute; top: 100%; right: 0; z-index: 100; display: flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px; border-radius: var(--fr-radius); background: var(--fr-paper); box-shadow: var(--fr-shadow-overlay); }
        .text-size-pop[hidden] { display: none; }
        .text-size-step { display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; min-width: 44px; height: 40px; padding: 0 8px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: var(--fr-paper); color: var(--fr-ink); font: inherit; line-height: 40px; cursor: pointer; }
        .text-size-step:hover:not(:disabled) { border-color: var(--fr-ink-3); }
        .text-size-step:disabled { color: var(--fr-ink-4); cursor: default; }
        .text-size-step[data-text-step="-1"] > span:first-child { font-size: var(--fr-fs-sm); }
        .text-size-step[data-text-step="1"] > span:first-child { font-size: var(--fr-fs-xl); }
        .text-size-sign { font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .text-size-now { min-width: 64px; text-align: center; font-size: var(--fr-fs-sm); color: var(--fr-ink-2); white-space: nowrap; }
        .export-dropdown-feedback { display: block; width: 100%; padding: 7px 14px; border: none; background: none; text-align: left; font: inherit; font-size: var(--fr-fs-sm); color: var(--fr-ink); cursor: pointer; white-space: nowrap; }
        .export-dropdown-feedback:hover { background: var(--fr-rule); }
        .export-dropdown-label { padding: 8px 14px 2px; margin-top: 4px; border-top: 1px solid var(--fr-rule); font-size: var(--fr-fs-xs); color: var(--fr-ink-3); }
        .immersive-return { display: none; }

        @media (max-width: 768px) {
            .tb-desk { display: none; }
            .tb-phone { display: inline-flex; align-items: center; }
            .export-dropdown .tb-phone { display: block; }
            #feedbackBtn { display: none; }
            /* 폰 머리줄 안의 도구 줄 — 잔액·계정 앞 */
            .mobile-header .chat-toolbar.visible { margin-left: auto; padding: 0; gap: 0; }
            .mobile-header .chat-toolbar.visible ~ .mobile-auth { margin-left: 4px; }
            /* 누름 영역은 모양째 44 — 투명 ::after 로 넓히는 방법(아래 pointer: coarse 묶음)은 button 안에서 오른쪽 안쪽 여백만큼 못 미쳐
               오른쪽 모서리가 비었다(2026-10-08 hit test, e2e chrome). 머리줄 높이는 그대로 52(위아래 4) */
            .mobile-header .chat-toolbar-btn { min-width: 44px; min-height: 44px; padding: 0 9px; justify-content: center; }
            .mobile-header .export-dropdown { min-width: 168px; }
            .mobile-header .export-dropdown-item, .mobile-header .export-dropdown-feedback { min-height: 44px; }
            .text-size-step { height: 44px; line-height: 44px; }
            .main:not(.is-home) .mobile-header { padding: var(--cc-top-pad, 4px) 8px; }   /* 위아래 여백은 글씨 단계를 따른다(--cc-*, 아래 글씨 크기 묶음) */
            /* 대화 중 폰 머리줄의 「베타」(PUX-03) — 자리가 있으면 이름 옆 그대로, 모자라면 배지만 다음 줄로 접혀 가려진다(이름은 줄지 않는다).
               줄어드는 칸은 이름 하나(min-width: min-content = 「find-ref」 폭), 나머지는 flex-shrink 0. 접히는 폭은 잔액 글자 수에 따라 다르다
               (2026-10-08 실측 — e2e chrome phone-one-row). 접혀도 서랍 위·로그인 전 화면에는 늘 있다 */
            .main:not(.is-home) .mobile-brand { display: inline-flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; align-content: flex-start; min-width: min-content; height: 44px; overflow: hidden; white-space: nowrap; line-height: 44px; }
            .main:not(.is-home) .mobile-hamburger, .main:not(.is-home) .mobile-header .chat-toolbar, .main:not(.is-home) .mobile-auth { flex-shrink: 0; }
            .main:not(.is-home) #refsToggleBtn { padding: 0 6px; }

            .main.chat-float .mobile-header {
                position: absolute; top: 0; left: 0; right: 0; z-index: 8;
                border-bottom: 1px solid var(--fr-rule); background: var(--fr-paper-2);
                transition: transform var(--chat-chrome-dur, 280ms) var(--fr-ease), visibility 0s linear 0s;
            }
            .main.chat-float .input-wrapper {
                position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
                padding: var(--cc-wrap-pad-y, 6px) var(--cc-wrap-pad-x, 10px); background: var(--fr-paper-2);
                transition: transform var(--chat-chrome-dur, 280ms) var(--fr-ease), visibility 0s linear 0s;
            }
            .main.chat-float .chat-content { box-sizing: border-box; padding-top: var(--chat-top-h, 52px); padding-bottom: var(--chat-bottom-h, 140px); }
            .main.chat-float .scroll-bottom-btn { bottom: calc(var(--chat-bottom-h, 140px) + 10px); }
            /* iOS Safari 는 16px 미만 입력창에 초점이 가면 화면을 확대하고 그대로 둔다 — 확대되면 visualViewport 가 줄어 키보드 판정도
               흔들리고, 위아래 크롬이 화면 밖으로 밀린다. 폰에서는 입력 글씨만 16px(홈 입력창 높이는 min-height 라 그대로다) */
            #chatInput { font-size: 16px; }
            .main.chat-float #chatInput { display: block; }   /* inline-block 의 글줄 아래 틈(7px) — 입력 상자 안 두 줄 사이. 높이는 모든 글씨 단계 44px(누름 칸) */
            .main.chat-float .input-box { padding: var(--cc-box-pad-t, 8px) var(--cc-box-pad-x, 12px) var(--cc-box-pad-b, 6px); }
            .main.chat-float .chat-container { padding-left: var(--cc-body-pad-x, 16px); padding-right: var(--cc-body-pad-x, 16px); }   /* 본문 좌우 — 작게 고를수록 넓다 */
            /* 아주 작게·작게·조금 작게(xxs·xs·sm) — 입력창 한 줄(2026-10-09 사용자 결정): 평소엔 글상자 + 전송 한 줄, 펼침(.input-open — js/chat-chrome.js 가 판정)이면
               모델·웹 검색 줄이 그 아래에 선다. .input-bottom 을 contents 로 풀어 왼쪽 묶음·전송을 입력 상자 격자에 바로 놓는다(마크업은 그대로).
               보통·크게·아주 크게는 두 줄 그대로. 글자 16px·글상자와 단추 44px 는 모든 상태에서 같다 */
            html[data-text-size="xxs"] .main.chat-float .input-box, html[data-text-size="xs"] .main.chat-float .input-box, html[data-text-size="sm"] .main.chat-float .input-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: end; }
            html[data-text-size="xxs"] .main.chat-float .input-bottom, html[data-text-size="xs"] .main.chat-float .input-bottom, html[data-text-size="sm"] .main.chat-float .input-bottom { display: contents; }
            html[data-text-size="xxs"] .main.chat-float #chatInput, html[data-text-size="xs"] .main.chat-float #chatInput, html[data-text-size="sm"] .main.chat-float #chatInput { grid-column: 1; grid-row: 1; }
            html[data-text-size="xxs"] .main.chat-float .input-right, html[data-text-size="xs"] .main.chat-float .input-right, html[data-text-size="sm"] .main.chat-float .input-right { grid-column: 2; grid-row: 1; }
            html[data-text-size="xxs"] .main.chat-float .input-left, html[data-text-size="xs"] .main.chat-float .input-left, html[data-text-size="sm"] .main.chat-float .input-left { grid-column: 1 / -1; grid-row: 2; display: none; margin-top: 8px; }   /* 8px — 칩·모델 단추의 누름 영역(위 8px)이 글상자 아래 모서리를 덮지 않게 */
            html[data-text-size="xxs"] .main.chat-float.input-open .input-left, html[data-text-size="xs"] .main.chat-float.input-open .input-left, html[data-text-size="sm"] .main.chat-float.input-open .input-left { display: flex; }
            /* 한 줄이면 전송 단추 바로 아래가 AI 고지 줄이다 — 좁은 폭(320)에서는 ⓘ 가 전송 밑에 와서 ⓘ 의 누름 영역(위 10px)이 전송 아래 모서리를 덮었다.
               고지 줄을 「전송 아래 끝 + 10px」 밑으로 내린다(입력 상자 아래 여백 + 테두리 1 + 이 간격 = 10) */
            html[data-text-size="xxs"] .main.chat-float .input-footer-row, html[data-text-size="xs"] .main.chat-float .input-footer-row, html[data-text-size="sm"] .main.chat-float .input-footer-row { margin-top: calc(9px - var(--cc-box-pad-b, 6px)); }
            .main.chat-float .input-bottom { margin-top: 2px; }
            .main.chat-float .input-footer-row { flex-wrap: nowrap; align-items: center; margin-top: 2px; }
            .main.chat-float .ai-made-note:not(.ai-made-note--signup) { width: auto; margin: 0 2px 0 0; }

            /* 몰입 — 비켜난 뒤에는 visibility: hidden 이라 초점·스크린리더가 화면 밖 입력창으로 가지 않는다(나올 때는 바로 보인다) */
            .main.chat-float.immersive .mobile-header { transform: translateY(-100%); visibility: hidden; transition: transform var(--chat-chrome-dur, 280ms) var(--fr-ease), visibility 0s linear var(--chat-chrome-dur, 280ms); }
            .main.chat-float.immersive .input-wrapper { transform: translateY(100%); visibility: hidden; transition: transform var(--chat-chrome-dur, 280ms) var(--fr-ease), visibility 0s linear var(--chat-chrome-dur, 280ms); }
            /* 몰입 중 「맨 아래로」는 「이어서 묻기」 와 같은 줄 오른쪽 끝 — 가운데 위에 쌓이면 둘이 본문 가운데를 두 겹으로 가렸다(PM 지적) */
            .main.chat-float.immersive .scroll-bottom-btn { left: auto; right: 12px; bottom: 12px; transform: none; }
            .main.chat-float .immersive-return {
                position: absolute; left: 50%; bottom: 12px; z-index: 9;
                display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px;
                border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: var(--fr-paper); box-shadow: var(--fr-shadow-overlay);
                color: var(--fr-ink-2); font: inherit; font-size: var(--fr-fs-sm); cursor: pointer;
                opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 12px);
                transition: opacity var(--fr-dur) var(--fr-ease), transform var(--chat-chrome-dur, 280ms) var(--fr-ease), visibility 0s linear var(--chat-chrome-dur, 280ms);
            }
            .main.chat-float.immersive .immersive-return { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 80ms, 80ms, 0s; }
        }
        @media (max-width: 359px) {
            .main:not(.is-home) .mobile-brand { display: none; }   /* 320 폭 — 햄버거·근거·가·⋯·잔액·계정만(서랍 위에 이름이 있다) */
        }
        @media (prefers-reduced-motion: reduce) {
            .main.chat-float .mobile-header, .main.chat-float .input-wrapper, .main.chat-float .immersive-return { --chat-chrome-dur: 0ms; }
        }

        /* 글씨 크기 — 대화 글(사안·답변)과 근거 자료 패널의 내용(#refsBody — 근거 목록·문단 상세·조 전체·자료 발췌, 2026-10-09 사용자 요청). 탭·닫기·메뉴·버튼
           글씨는 그대로다. 문서 보기의 쪽(pdf·hwp 를 그린 그림)은 원본 그대로 폭에 맞춘다 — 글자를 키우려면 쪽을 확대해 가로로 밀어야 해서다(제목줄·발췌는 따른다).
           단계는 js/chat-chrome.js TEXT_SIZES 와 같다(html[data-text-size]). 첫 화면·메뉴·버튼 글씨는 그대로라
           부팅 뒤에 값을 붙여도 첫 화면이 뛰지 않는다(대화는 그 뒤에 그려진다). 기본 단계 값은 findref.css 의 글자 크기 단계와 같아야 한다
           (scripts/lib/__tests__/chat-chrome.test.js 가 대조) — 크기 단계 변수를 메시지 안에서만 다시 정해 메시지 렌더 코드는 건드리지 않는다.
           단계(2026-10-09, 여섯): 아주 작게 xxs 0.72 · 작게 xs 0.8 · 조금 작게 sm 0.9 · 보통 1 · 크게 lg 1.12 · 아주 크게 xl 1.25 — 한 칸에 약 1.12배.
           답변 본문 11.5 · 12.8 · 14.4 · 16 · 17.9 · 20px. 키는 크기를 뜻하고 밀어 옮기지 않는다(xs 는 처음 「아주 작게」였다 — 이름만 바뀜).
           작은 글자(xs·sm·md·base 단계 변수 — 「사안」 이름표·비용 줄·답변마다 붙는 AI 고지·표·인용)는 11px 아래로 내리지 않는다: AI 고지는 법정 표시라
           11px 이상(진단 PUX-08)인데 0.9 단계에서 이미 10.8px 였다(2026-10-08 판의 빈틈). 0.72 에서는 md·base 도 11px 아래라 같이 묶는다.
           위아래 패널(--cc-*): 폰 대화 화면의 머리줄 위아래 여백 · 입력창 바깥·안쪽 여백 · 본문 좌우 여백이 단계를 따라
           한 칸씩 줄고 는다 — 작게 고를수록 본문이 넓고 패널이 얇다. 입력 글자는 모든 단계 16px(iOS 확대 방지), 단추와 입력 글상자는 모든 단계 모양째 44px
           (글상자도 누르는 칸이다 — 36px 로 줄였더니 누름 영역 검사에 걸렸다) 라
           머리줄은 44px(아주 작게·작게) 아래로 내려가지 않는다 — 아주 작게는 입력창·본문 여백만 더 준다. 큰 쪽은 조금만 는다(단추 글씨는 단계와 무관해 패널을 키우면 읽는 칸만 준다) */
        :root { --cc-top-pad: 4px; --cc-wrap-pad-y: 6px; --cc-wrap-pad-x: 10px; --cc-box-pad-t: 8px; --cc-box-pad-x: 12px; --cc-box-pad-b: 6px; --cc-body-pad-x: 16px; }
        html[data-text-size="xxs"] { --fr-text-scale: 0.72; --cc-top-pad: 0px; --cc-wrap-pad-y: 2px; --cc-wrap-pad-x: 4px; --cc-box-pad-t: 3px; --cc-box-pad-x: 6px; --cc-box-pad-b: 3px; --cc-body-pad-x: 6px; }
        html[data-text-size="xs"] { --fr-text-scale: 0.8; --cc-top-pad: 0px; --cc-wrap-pad-y: 3px; --cc-wrap-pad-x: 6px; --cc-box-pad-t: 4px; --cc-box-pad-x: 8px; --cc-box-pad-b: 4px; --cc-body-pad-x: 8px; }
        html[data-text-size="sm"] { --fr-text-scale: 0.9; --cc-top-pad: 2px; --cc-wrap-pad-y: 4px; --cc-wrap-pad-x: 8px; --cc-box-pad-t: 6px; --cc-box-pad-x: 10px; --cc-box-pad-b: 5px; --cc-body-pad-x: 12px; }
        html[data-text-size="lg"] { --fr-text-scale: 1.12; --cc-top-pad: 5px; --cc-wrap-pad-y: 7px; --cc-wrap-pad-x: 11px; --cc-box-pad-t: 9px; --cc-box-pad-x: 13px; --cc-box-pad-b: 7px; --cc-body-pad-x: 18px; }
        html[data-text-size="xl"] { --fr-text-scale: 1.25; --cc-top-pad: 6px; --cc-wrap-pad-y: 8px; --cc-wrap-pad-x: 12px; --cc-box-pad-t: 10px; --cc-box-pad-x: 14px; --cc-box-pad-b: 8px; --cc-body-pad-x: 20px; }
        .chat-container .message, #refsBody {
            --fr-fs-xs: max(11px, calc(12px * var(--fr-text-scale, 1)));
            --fr-fs-sm: max(11px, calc(13px * var(--fr-text-scale, 1)));
            --fr-fs-md: max(11px, calc(14px * var(--fr-text-scale, 1)));
            --fr-fs-base: max(11px, calc(15px * var(--fr-text-scale, 1)));
            --fr-fs-lg: calc(16px * var(--fr-text-scale, 1));
            --fr-fs-xl: calc(17px * var(--fr-text-scale, 1));
        }