/* ═══════════════════════════════════════════════════════════════════
   GRID.OS 사이트 공용 디자인킷 — tokens.css
   기준: 출하 중인 GRID.OS 퍼스널 1.3.3 (커밋 746863b2) 의 기본 스킨 «Basic»
         (앱 내부 ID·CSS 값 `natural`, 앱 public/internal-theme.css MAC274 블록).
   출처 주석: `internal-theme.css:줄` · `style.css:줄` · `STYLEGUIDE.md:줄` 은 모두 위 커밋의
   public/ 또는 저장소 루트 파일이다. 값은 앱 CSS 원문 + 헤드리스 크롬 계산값 대조로 확인했다.

   규칙
   · 색 값(hex·rgba)은 이 파일의 토큰 정의 블록(:root / 다크 블록) 안에만 있다. 부품은 var()만 쓴다.
   · 외부 리소스 요청 0건. 글꼴은 앱과 같이 시스템 SF 스택 우선, Pretendard 는 동봉 파일(fonts/).
   · 테마: 기본은 시스템 외관을 따른다(앱 «자동»과 같은 판정). 강제하려면
     <html data-theme="light"> 또는 <html data-theme="dark">.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 글꼴: Pretendard 동봉 (외부 요청 없음) ── 앱과 같은 글꼴 1.3.9를 글자 묶음별 파일로 나눈 판.
   @font-face 는 fonts/pretendard-subset-1.3.9.css 에 있고, 각 페이지가 <link>로 함께 읽는다.
   (fonts/ 경로는 1년 캐시라, 파일 내용을 바꾸면 파일 이름의 버전도 올린다.) */

/* ═══ 1. 토큰 — 라이트(Basic light) + 형태·글자·간격 ═══ */
:root {
  color-scheme: light;

  /* 표면 (층: L0 bg → L1 sur/zoneB → L2 panel → L3 card/raised) */
  --bg: #f1f2f4;            /* internal-theme.css:220 — L0 캔버스 */
  --sur: #e9eaed;           /* internal-theme.css:220 — L1 구조 표면(사이드바·세그먼트 바탕) */
  --zoneB: #e2e3e6;         /* internal-theme.css:220 — L1 한 단 깊은 존 */
  --panel: #ffffff;         /* internal-theme.css:220 (#fff) — L2 작업 서피스·모달 */
  --raised: #ffffff;        /* internal-theme.css:220 (#fff) — 부상 컨트롤·보조 버튼 */
  --card: #ffffff;          /* internal-theme.css:220 (#fff) — L3 카드 */

  /* 선 */
  --line: rgba(0,0,0,.085);   /* internal-theme.css:221 — 헤어라인 */
  --line2: rgba(0,0,0,.16);   /* internal-theme.css:221 — 컨트롤 테두리 */

  /* 글자 (위계는 명도로만) */
  --ink: #202124;           /* internal-theme.css:221 — 제목·본문 */
  --sub: #62656d;           /* internal-theme.css:221 — 2차 라벨 */
  --faint: #72757d;         /* internal-theme.css:221 — 힌트·캡션 */

  /* 강조 (시스템 블루) */
  --acc: #0075dd;           /* internal-theme.css:222 — 작은 글자·선·채움 */
  --acc-raw: #0088ff;       /* internal-theme.css:222 — Apple 블루 표본(스와치 점 전용, internal-theme.css:247) */
  --acc-soft: #e8f3ff;      /* internal-theme.css:222 — 연한 강조 바탕 */
  --acc-line: rgba(0,117,221,.34); /* internal-theme.css:222 — 강조 테두리 */
  --acc-fg: #ffffff;        /* internal-theme.css:222 (#fff) — 강조 채움 위 글자 */
  /* 주요 버튼(CTA) 채움: 라이트는 accent 를 검정 8% 혼합해 낮춘다 — internal-theme.css:4344-4352 */
  --btn-primary-bg: color-mix(in srgb, var(--acc) 92%, #000000);
  --btn-primary-fg: var(--acc-fg); /* internal-theme.css:4315-4317 */

  /* 상태색 (색은 상태에만) */
  --ok: #23834c;            /* internal-theme.css:223 */
  --warn: #96600d;          /* internal-theme.css:223 */
  --err: #be3b43;           /* internal-theme.css:223 */
  --warn-ink: #7a4d08;      /* internal-theme.css:223 */
  --err-ink: #a62f38;       /* internal-theme.css:223 */
  --ok-soft: rgba(61,220,151,.12);   /* internal-theme.css:901 — .int-badge-ok 바탕(두 테마 공통 고정값) */
  --warn-soft: rgba(255,180,94,.14); /* internal-theme.css:902 — .int-badge-warn 바탕(두 테마 공통 고정값) */
  --err-soft: rgba(221,61,85,.06);   /* internal-theme.css:98 — Basic 이 재선언하지 않아 기본 라이트값 상속 */
  --err-line: rgba(221,61,85,.25);   /* internal-theme.css:98 */
  --work: #3d6fd0;          /* internal-theme.css:84 — «작업 중» 상태등(Basic 미재선언 → 기본 라이트값) */

  /* 그림자·고도 */
  --card-sh: 0 1px 3px rgba(0,0,0,.035),0 5px 16px rgba(0,0,0,.025); /* internal-theme.css:224 — 기본 카드/세그먼트 활성 */
  --shadow: var(--card-sh);                                          /* internal-theme.css:224 */
  --float-sh: 0 6px 24px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.045);  /* internal-theme.css:225 — 떠 있는 컨트롤 */
  --panel-float: 0 8px 30px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.055); /* internal-theme.css:225 — 모달·오버레이 */
  /* 대시보드 카드(.d-card) 깊이감 — 라이트는 그림자 두 겹 (internal-theme.css:3086-3089) */
  --dash-card-bg: var(--card);
  --dash-card-line: var(--line);
  --dash-card-sh: 0 6px 18px rgba(28,34,46,.07), 0 1px 3px rgba(28,34,46,.04);
  --usr-bub: rgba(0,0,0,.045);  /* internal-theme.css:224 — 내 말풍선 바탕 */
  --scrim: rgba(0,0,0,.42);     /* style.css:2132 — 모달 뒤 딤(두 테마 공통) */

  /* 조작 영역 glass (툴바·사이드바·메뉴에만) */
  --mac-toolbar: rgba(236,236,236,.63); /* internal-theme.css:226 */
  --glass-filter: blur(18px) saturate(1.12); /* internal-theme.css:348 */
  /* 라이트 상단바는 glass 대신 옅은 가로 그라데이션이 이긴다 — style.css:1673 */
  --topbar-bg: linear-gradient(90deg, rgba(186,195,213,.55) 0%, rgba(186,195,213,.22) 380px, transparent 720px);

  /* 스크롤바 */
  --scroll-track: rgba(0,0,0,.035);      /* internal-theme.css:227 */
  --scroll-thumb: rgba(0,0,0,.20);       /* internal-theme.css:227 */
  --scroll-thumb-hover: rgba(0,0,0,.34); /* internal-theme.css:227 */

  /* 노트 미리보기 표 (스킨 공통 vt- 토큰) */
  --table-head-bg: #55738f;            /* style.css:804 (--vt-navy-mid 라이트) */
  --table-head-fg: #ffffff;            /* style.css:834 (#fff) */
  --table-line: rgba(20,20,30,.08);    /* style.css:796 (--vt-b 라이트) — 행 구분선·짝수 행 바탕 */
  --table-ink: #22232b;                /* style.css:798 (--vt-t1 라이트) */

  /* 스위치 손잡이 */
  --switch-knob: #ffffff;              /* style.css:2180 (#fff, 두 테마 공통) */

  /* ── 글꼴 ── */
  --font-sans: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Apple SD Gothic Neo', system-ui, sans-serif; /* 사이트: 동봉 Pretendard 우선(맥·윈도우 같은 글꼴), 시스템 글꼴은 폴백 — 앱 internal-theme.css:334 은 시스템 우선 (코덱스 교차 검토 반영 2026-11-04) */
  --font-mono: 'SF Mono', Menlo, monospace;  /* internal-theme.css:2382 (.ob-grid) */

  /* ── 글자 단계 (STYLEGUIDE.md R1 표 + 앱 실제 선언) ── */
  --fs-large-title: 26px;  --lh-large-title: 32px;  /* STYLEGUIDE.md:19 — 화면 큰 제목 */
  --fs-modal-title: 17px;  --lh-modal-title: 22px;  /* style.css:2145 (.settings-title, w800) · STYLEGUIDE.md:20 «필요 시 17/22» */
  --fs-title: 15px;        --lh-title: 20px;        /* style.css:233 (.d-title, w800) · STYLEGUIDE.md:20 */
  --fs-body: 13px;         --lh-body: 20px;         /* style.css:40 · STYLEGUIDE.md:21 · internal-theme.css:344 */
  --fs-secondary: 12px;    --lh-secondary: 15px;    /* style.css:2158 (.set-hint) · STYLEGUIDE.md:22 */
  --fs-badge: 10.5px;                               /* internal-theme.css:900 (.int-badge, w700) */
  --fs-caption: 10px;      --lh-caption: 13px;      /* style.css:234 (.d-title .cnt) · STYLEGUIDE.md:22 */
  --lh-base: 1.43;                                   /* style.css:40 — body 기본 줄간격 */
  --fw-regular: 400; --fw-medium: 600; --fw-strong: 650; --fw-bold: 700; --fw-heavy: 800; /* 앱 실제 사용 두께 */

  /* ── 곡률 ── */
  --r-xs: 6px;    /* internal-theme.css:736 (.set-btn-sm) · STYLEGUIDE.md:23 Rg */
  --r-input: 7px; /* internal-theme.css:366 — 입력 기본 · STYLEGUIDE.md:23 Lg */
  --r-sm: 8px;    /* internal-theme.css:849 (.set-nav button) · STYLEGUIDE.md:214 버튼·칩 */
  --r-field: 9px; /* internal-theme.css:5102 (로그인 입력) · STYLEGUIDE.md:23 XL */
  --r-card: 12px; /* internal-theme.css:341 (--mac-card-radius) · STYLEGUIDE.md:214 */
  --r-panel: 16px; /* internal-theme.css:340 (--mac-radius) — 모달·패널, 그리고 대시보드 카드(style.css:230) */
  --r-pill: 999px; /* internal-theme.css:342 — 세그먼트·일반 버튼 */

  /* ── 간격 (4px 그리드) ── STYLEGUIDE.md:213 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ── 컨트롤 치수 ── internal-theme.css:340-344 */
  --control-h: 30px;        /* --mac-general-control-h */
  --control-pad: 6px 13px;  /* --mac-general-pad */
  --control-h-sm: 24px;     /* internal-theme.css:736 */
  --field-h: 28px;          /* internal-theme.css:803 (설정 행 입력) */
  --seg-h: 26px;            /* --mac-segment-control-h */
  --seg-pad: 3px; --seg-gap: 2px; --seg-pad-x: 13px; /* --mac-segment-pad / gap / pad-x */
  --topbar-h: 58px;         /* internal-theme.css:351 */
}

/* ═══ 2. 토큰 — 다크(Basic dark) ═══
   시스템이 다크면 적용(단, data-theme="light" 강제 시 제외), data-theme="dark"면 항상 적용.
   두 블록의 값은 같다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1b1c20;            /* internal-theme.css:230 */
    --sur: #222328;           /* internal-theme.css:230 */
    --zoneB: #17181c;         /* internal-theme.css:230 */
    --panel: #28292e;         /* internal-theme.css:230 */
    --raised: #303137;        /* internal-theme.css:230 */
    --card: #303137;          /* internal-theme.css:230 */
    --line: rgba(255,255,255,.085); /* internal-theme.css:231 */
    --line2: rgba(255,255,255,.17); /* internal-theme.css:231 */
    --ink: #f1f1f3;           /* internal-theme.css:231 */
    --sub: #b4b6bd;           /* internal-theme.css:231 */
    --faint: #9b9da7;         /* internal-theme.css:231 */
    --acc: #75b6ff;           /* internal-theme.css:233 — 작은 글자·선용 밝은 블루 */
    --acc-raw: #0091ff;       /* internal-theme.css:233 */
    --acc-soft: #233d58;      /* internal-theme.css:233 */
    --acc-line: rgba(117,182,255,.52); /* internal-theme.css:233 */
    --acc-fg: #17181b;        /* internal-theme.css:233 — 밝은 --acc 채움 위 글자 */
    --btn-primary-bg: #006edb; /* internal-theme.css:233 (--acc-fill) · 적용 internal-theme.css:4474-4476 */
    --btn-primary-fg: #ffffff; /* internal-theme.css:233 (--acc-fill-fg #fff) */
    --ok: #63d492;            /* internal-theme.css:234 */
    --warn: #e8b765;          /* internal-theme.css:234 */
    --err: #ff9299;           /* internal-theme.css:234 */
    --warn-ink: #ffe0a8;      /* internal-theme.css:234 */
    --err-ink: #ffd8db;       /* internal-theme.css:234 */
    --err-soft: rgba(255,100,120,.07); /* internal-theme.css:49 */
    --err-line: rgba(255,100,120,.22); /* internal-theme.css:49 */
    --work: #8fb5f0;          /* internal-theme.css:34 */
    --card-sh: 0 1px 0 rgba(255,255,255,.03),0 4px 14px rgba(0,0,0,.20); /* internal-theme.css:235 */
    --float-sh: 0 8px 30px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.10); /* internal-theme.css:236 */
    --panel-float: 0 10px 36px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.11); /* internal-theme.css:236 */
    /* 다크 대시보드 카드: 그림자 대신 표면 한 단 밝게 + 진한 테두리 (internal-theme.css:3090-3095) */
    --dash-card-bg: color-mix(in srgb, var(--card) 88%, var(--ink) 4%);
    --dash-card-line: var(--line2);
    --dash-card-sh: none;
    --usr-bub: rgba(255,255,255,.065); /* internal-theme.css:235 */
    --mac-toolbar: rgba(44,44,44,.61); /* internal-theme.css:231 · 346 */
    --topbar-bg: var(--mac-toolbar);   /* 다크 상단바는 glass (internal-theme.css:348 이 style.css:1672 를 덮음) */
    --scroll-track: rgba(0,0,0,.18);        /* internal-theme.css:237 */
    --scroll-thumb: rgba(255,255,255,.19);  /* internal-theme.css:237 */
    --scroll-thumb-hover: rgba(255,255,255,.32); /* internal-theme.css:237 */
    --table-head-bg: #7494af;          /* style.css:784 */
    --table-line: rgba(255,255,255,.08); /* style.css:776 */
    --table-ink: #f2f2f2;              /* style.css:778 */
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1c20; --sur: #222328; --zoneB: #17181c; --panel: #28292e; --raised: #303137; --card: #303137; /* internal-theme.css:230 */
  --line: rgba(255,255,255,.085); --line2: rgba(255,255,255,.17);  /* internal-theme.css:231 */
  --ink: #f1f1f3; --sub: #b4b6bd; --faint: #9b9da7;                 /* internal-theme.css:231 */
  --acc: #75b6ff; --acc-raw: #0091ff; --acc-soft: #233d58; --acc-line: rgba(117,182,255,.52); --acc-fg: #17181b; /* internal-theme.css:233 */
  --btn-primary-bg: #006edb; --btn-primary-fg: #ffffff;             /* internal-theme.css:233 · 4474-4476 */
  --ok: #63d492; --warn: #e8b765; --err: #ff9299; --warn-ink: #ffe0a8; --err-ink: #ffd8db; /* internal-theme.css:234 */
  --err-soft: rgba(255,100,120,.07); --err-line: rgba(255,100,120,.22); /* internal-theme.css:49 */
  --work: #8fb5f0;                                                   /* internal-theme.css:34 */
  --card-sh: 0 1px 0 rgba(255,255,255,.03),0 4px 14px rgba(0,0,0,.20); /* internal-theme.css:235 */
  --float-sh: 0 8px 30px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.10); /* internal-theme.css:236 */
  --panel-float: 0 10px 36px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.11); /* internal-theme.css:236 */
  --dash-card-bg: color-mix(in srgb, var(--card) 88%, var(--ink) 4%); --dash-card-line: var(--line2); --dash-card-sh: none; /* internal-theme.css:3090-3095 */
  --usr-bub: rgba(255,255,255,.065);                                 /* internal-theme.css:235 */
  --mac-toolbar: rgba(44,44,44,.61); --topbar-bg: var(--mac-toolbar); /* internal-theme.css:231 · 348 */
  --scroll-track: rgba(0,0,0,.18); --scroll-thumb: rgba(255,255,255,.19); --scroll-thumb-hover: rgba(255,255,255,.32); /* internal-theme.css:237 */
  --table-head-bg: #7494af; --table-line: rgba(255,255,255,.08); --table-ink: #f2f2f2; /* style.css:776-784 */
}

/* ═══ 3. 기본 ═══ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg); color: var(--ink);               /* style.css:38 */
  font-family: var(--font-sans);                           /* internal-theme.css:333-335 */
  font-size: var(--fs-body); line-height: var(--lh-base);  /* style.css:40 */
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }         /* internal-theme.css:360 */
:where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;      /* internal-theme.css:361-363 */
}
:where(button, input, select, textarea):disabled { opacity: .46; cursor: not-allowed; } /* internal-theme.css:364 */
::selection { background: var(--acc-line); }   /* 앱 internal-theme.css:322 값은 금지된 옛 다크 강조색 계열이라 강조 토큰으로 대체 — 디지스트 참조 */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); } /* internal-theme.css:308 */
*::-webkit-scrollbar { width: 7px; height: 7px; }            /* internal-theme.css:309 */
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid transparent; border-radius: var(--r-pill); background-clip: padding-box; } /* internal-theme.css:311 */
*::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
code, kbd, pre, .mono { font-family: var(--font-mono); }

/* 글자 단계 보조 클래스 */
.t-large-title { font-size: var(--fs-large-title); line-height: var(--lh-large-title); font-weight: var(--fw-heavy); letter-spacing: -.02em; }
.t-modal-title { font-size: var(--fs-modal-title); line-height: var(--lh-modal-title); font-weight: var(--fw-heavy); } /* style.css:2145 */
.t-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-heavy); letter-spacing: -.01em; } /* style.css:233 */
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-secondary { font-size: var(--fs-secondary); line-height: var(--lh-secondary); color: var(--sub); }
.t-hint { font-size: var(--fs-secondary); line-height: var(--lh-secondary); color: var(--faint); } /* style.css:2158 */
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }

/* 워드마크 — 앱 상단 .c-logo (style.css:65) / 표기 «GRID.OS» 하나 (STYLEGUIDE.md:204) */
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 20px; font-weight: var(--fw-bold); letter-spacing: -.03em; color: var(--ink); }
.wordmark svg { width: 18px; height: 18px; flex: none; }

/* ═══ 4. 부품 (앱 값 그대로, var() 참조만) ═══ */

/* 버튼 — 앱 일반 조작은 30px pill (style.css:1349 .ts-btn · internal-theme.css:2393-2399 .ob-btn · 5852-5871 .gos-agent-*) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control-h); padding: var(--control-pad);
  border: 1px solid var(--line2); border-radius: var(--r-pill);
  background: var(--raised); color: var(--ink);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-medium);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--acc); color: var(--acc); }   /* internal-theme.css:2397 (.ob-btn:hover) */
.btn-primary { background: var(--btn-primary-bg); border-color: transparent; color: var(--btn-primary-fg); } /* internal-theme.css:4344-4352 · 4474-4476 */
.btn-primary:hover:not(:disabled) { color: var(--btn-primary-fg); border-color: transparent; opacity: .92; } /* internal-theme.css:2399 */
.btn-secondary { background: var(--raised); border-color: var(--line2); color: var(--sub); }  /* internal-theme.css:5867-5871 (.gos-agent-secondary) */
.btn-secondary:hover:not(:disabled) { color: var(--ink); border-color: var(--line2); background: var(--sur); }
.btn-ghost { background: transparent; border-color: var(--line2); color: var(--faint); }       /* style.css:1350 (.ts-btn.ghost) */
.btn-ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--acc); }               /* style.css:1351 */
.btn-text { background: none; border: 0; padding: 0; min-height: 0; color: var(--acc); font-weight: var(--fw-regular); } /* internal-theme.css:5108 (.lg-fplink) */
.btn-sm { min-height: var(--control-h-sm); padding: 4px 8px; border-radius: var(--r-xs); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-regular); } /* internal-theme.css:736 */
.btn-sm:hover:not(:disabled) { border-color: var(--acc-line); color: var(--acc); }  /* internal-theme.css:737 */
.btn-block { width: 100%; }
.btn-danger { border-color: var(--err-line); background: var(--err-soft); color: var(--err); } /* internal-theme.css:784 */
.btn svg, .btn .ic { width: 16px; height: 16px; flex: none; }

/* 카드 — 대시보드 카드 .d-card (style.css:229-231 + internal-theme.css:3086-3095) */
.card {
  background: var(--dash-card-bg); border: 1px solid var(--dash-card-line); border-radius: var(--r-panel);
  padding: 18px 20px; box-shadow: var(--dash-card-sh); color: var(--ink);
}
.card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-heavy); letter-spacing: -.01em; color: var(--ink); } /* style.css:233 · 1712-1715 */
.card-title .cnt { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-bold); color: var(--acc); } /* style.css:234 */
/* 작은 카드·묶음 상자 — 12px 카드 (internal-theme.css:1242 .auto-run-card · style.css:2167 .set-folder) */
.tile { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow); }
/* L2 작업 서피스 (internal-theme.css:4478-4485 .split-wrap) */
.surface { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-panel); }

/* 입력창 */
.input, .textarea, .select {                      /* XL — 로그인·가입 화면 (internal-theme.css:5100-5106) */
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line2); border-radius: var(--r-field);
  background: var(--sur); color: var(--ink); font-size: 13.5px; outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--acc-line); }
/* 키보드 포커스 윤곽 복원 — 위 outline:none 이 공통 :focus-visible 윤곽을 덮지 않게 (코덱스 교차 검토 반영 2026-11-04) */
.input:focus-visible, .textarea:focus-visible, .select:focus-visible, .input-sm:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.input-sm {                                        /* Lg 28px — 설정 행 입력 (internal-theme.css:802-803) */
  min-height: var(--field-h); padding: 0 8px;
  border: 1px solid var(--line2); border-radius: var(--r-input);
  background: var(--raised); color: var(--ink); font-size: var(--fs-secondary);
}
.input-sm:hover { border-color: var(--acc-line); }  /* internal-theme.css:805 */
.field-label { display: block; margin-bottom: 5px; color: var(--sub); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-strong); } /* internal-theme.css:5596-5603 (.gos-agent-label) */

/* 배지·상태 칩 (internal-theme.css:900-904) */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 20px;
  font-size: var(--fs-badge); font-weight: var(--fw-bold); white-space: nowrap; background: var(--line2); color: var(--faint); }
.badge-ok { color: var(--ok); background: var(--ok-soft); }
.badge-warn { color: var(--warn); background: var(--warn-soft); }
.badge-err { color: var(--err); background: var(--err-soft); }
.badge-off { color: var(--faint); background: var(--line2); }
.badge-acc { color: var(--acc); background: var(--acc-soft); }  /* 칩(포인트) — STYLEGUIDE.md §4 칩: --acc-soft + --acc */
/* 중립 태그 (style.css:2172 .set-tag) */
.tag { display: inline-block; padding: 2px 7px; border-radius: var(--r-sm); font-size: var(--fs-badge); background: var(--raised); color: var(--sub); }

/* 세그먼트(탭 전환) — 앱의 보드·AI·설정 전환이 모두 이 모양 (style.css:2159-2161 · internal-theme.css:1559-1562) */
.seg { display: inline-flex; gap: var(--seg-gap); padding: var(--seg-pad); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--sur); }
.seg > button, .seg > a { min-height: var(--seg-h); padding: 4px var(--seg-pad-x); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--sub); font-size: var(--fs-secondary); line-height: 18px; font-weight: var(--fw-medium);
  text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; }
.seg > .on, .seg > [aria-selected="true"], .seg > [aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }

/* 세로 메뉴 항목 — 설정 왼쪽 탭 (internal-theme.css:849-851) */
.nav-item { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 5px 11px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--sub); font-size: var(--fs-secondary); line-height: var(--lh-secondary); text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav-item:hover { background: var(--raised); color: var(--ink); }
.nav-item.on, .nav-item[aria-current="page"] { background: var(--acc-soft); color: var(--acc); font-weight: var(--fw-bold); border-color: var(--acc-line); }

/* 상단 바 — 앱 .c-top 58px (internal-theme.css:347-351 · style.css:1673) */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar-h); padding-inline: var(--sp-4);
  background: var(--topbar-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
/* 사이드바 — 앱 .c-nav (internal-theme.css:347-352) */
.sidebar { padding: 14px 12px; background: var(--mac-toolbar); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
.sidebar-sec { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-heavy); letter-spacing: .06em; color: var(--faint); padding: 8px 10px 5px; } /* style.css:136 · 1718 · internal-theme.css:356 */
@media (prefers-reduced-transparency: reduce) {   /* internal-theme.css:368-370 */
  .topbar, .sidebar { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 토글 스위치 (style.css:2177-2182) — <label class="switch"><input type="checkbox"><span></span></label> */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--line2); border-radius: 22px; transition: .2s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--switch-knob); border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--acc); }
.switch input:checked + span::before { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }

/* 표 — 노트 미리보기 표 (style.css:833-836) */
.table { border-collapse: collapse; width: 100%; font-size: 12.5px; border-radius: var(--r-sm); overflow: hidden; }
.table th { background: var(--table-head-bg); color: var(--table-head-fg); font-weight: var(--fw-bold); padding: 9px 13px; letter-spacing: .02em; text-align: left; }
.table td { padding: 8px 13px; border-bottom: 1px solid var(--table-line); color: var(--table-ink); line-height: 1.5; }
.table tr:nth-child(even) td { background: var(--table-line); }

/* 설정형 목록 (style.css:2150-2158) */
.list-sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.list-sec:last-child { border-bottom: none; }
.list-sec > h3 { margin: 0 0 12px; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-heavy); }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.list-row > .lbl { color: var(--sub); }

/* 모달 — 설정 창 (style.css:2132 · 2143-2148) */
.scrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow: auto; }
.modal { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-panel); width: min(640px, 100%); box-shadow: var(--panel-float); display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--panel); border-radius: var(--r-panel) var(--r-panel) 0 0; } /* style.css:2144 */
.modal-title { font-size: var(--fs-modal-title); line-height: var(--lh-modal-title); font-weight: var(--fw-heavy); }
.modal-body { padding: 8px 22px 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 22px; }
.modal-x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--sub); cursor: pointer; padding: 0; border-radius: var(--r-sm); } /* style.css:2146-2147 */
.modal-x:hover { background: var(--raised); }

/* 빈 상태 (internal-theme.css:376 .snap-empty · STYLEGUIDE.md §4) */
.empty { text-align: center; padding: 22px 16px; color: var(--faint); font-size: var(--fs-secondary); border: 1px dashed var(--line2); border-radius: var(--r-card); }

/* 진행 바 (STYLEGUIDE.md §4 게이지: 높이 3~4 · radius 2 · 트랙 line2 · 채움 acc) */
.progress { height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--acc); border-radius: 2px; }

/* ═══ 5. 사이트 레이아웃 보조 (최소 — 앱에 없는 사이트 전용) ═══ */
.container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--sp-4); }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.grid-2, .grid-3 { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zone { background: var(--sur); }          /* L1 존 바탕 (STYLEGUIDE.md §12) */
@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .card { padding: 14px 16px; }            /* internal-theme.css:1789 (앱은 컨테이너 600px 기준) */
}