/* ============================================================
   AAA — 디자인 체계 (D6, 2026-08-28 · 구조·밀도 개편)

   랜딩(index.html)과 앱(app.html)이 함께 쓰는 공용 스타일시트다.
   ⚠️ app.html은 지금 다른 담당이 «기능»을 고치고 있어 이 라운드에서는
      건드리지 않았다 — 대신 app.html이 실제로 쓰는 클래스/ID 전부를
      여기 미리 채워 뒀다(아래 "APP 화면" 절). app.html 쪽 인라인
      <style>를 지우고 <link rel=stylesheet href=./aaa.css>만 넣으면
      바로 얹힌다. app.html 마크업을 다시 읽고 :has() 선택자로
      header/footer 충돌을 피했다 — 자세한 내용은 "APP 화면" 절 주석.
   ⚠️ 색은 전부 :root 기본값으로 먼저 정의하고, 다크 모드는
      prefers-color-scheme 안에서 "재정의"만 한다.
   ⚠️ 강조색은 #c96442(테라코타) 하나뿐이다. --accent-text는 같은
      색상 계열을 글자 대비 기준(4.5:1)에 맞게 눌러 놓은 텍스트 변형이다.
   ⚠️ 이모지 아이콘은 전부 없앴다 — 남은 아이콘은 획 두께 1.5px로
      통일한 인라인 SVG 하나(저장 배너)뿐이고, 그마저 뜻이 있을 때만 썼다.
   ⚠️ 활자 단계는 --fs-1…--fs-7 7단계뿐이다. 새 크기가 필요하면 이
      7개 중에서 고른다 — 8번째 단계를 만들지 않는다.

   글꼴 — 직접 호스팅, CDN 없음(오프라인 PWA 원칙과 동일):
     · Pretendard (본문·UI 산세리프) — SIL OFL 1.1
     · Noto Serif KR (큰 표제 세리프) — SIL OFL 1.1, Copyright Google
     실제 파일 크기·출처·라이선스 원문은 vendor/fonts/LICENSE-OFL.txt.
   ============================================================ */

/* ── 글꼴: 본문·UI(Pretendard) ─────────────────────────────── */
@font-face{
  font-family:"Pretendard";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("./vendor/fonts/pretendard/Pretendard-Regular.subset.woff2") format("woff2");
}
@font-face{
  font-family:"Pretendard";
  font-style:normal; font-weight:600; font-display:swap;
  src:url("./vendor/fonts/pretendard/Pretendard-SemiBold.subset.woff2") format("woff2");
}

/* ── 글꼴: 큰 표제(Noto Serif KR) — 92자 subset(약 19KB) ────── */
@font-face{
  font-family:"AAA Serif";
  font-style:normal; font-weight:600; font-display:swap;
  src:url("./vendor/fonts/NotoSerifKR-SemiBold.subset.woff2") format("woff2");
}

/* ── 토큰: 색 ───────────────────────────────────────────────── */
:root{
  --bg:#faf9f7; --panel:#f5f4ef; --panel-2:#efeee5;
  --line:#e5e0d3; --line-2:#d2c9b8;
  --ink:#201d19; --ink-2:#6b6259; --ink-3:#726b61;
  /* ⚠️ --btn-fg: 주 단추의 «글자»색. --accent-text 가 배경으로 쓰이는데
     그 색은 모드마다 밝기가 뒤집히므로, 글자색도 같이 뒤집어야 한다
     (2026-08-28: 다크에서 흰 글자 대비 2.38 로 미달했다). */
  --btn-fg:#ffffff;

  --accent:#c96442;
  --accent-text:#a8532e;
  --accent-soft:#f5e8e0;
  --user:#f0ece1;

  --warn:#8a5a2b; --warn-bg:#fbf3e6;
  --ok:#2e7d46; --ok-bg:#eef7f0;
  --todo:#b3261e; --todo-bg:#fdecea;

  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --w:860px; --w-app:720px; --w-narrow:640px;
  --shadow-1:0 1px 2px rgba(32,25,18,.03);
  --ease:cubic-bezier(.2,.7,.3,1); --dur:180ms;

  --font-sans:"Pretendard","Malgun Gothic","Segoe UI",system-ui,sans-serif;
  --font-serif:"AAA Serif","Noto Serif KR","Batang","Georgia",serif;

  /* ── 활자 단계: 딱 7개. 인접 단계가 최소 1.15배 이상 벌어진다 ──
     13 · 15 · 18 · 24 · 34 · 56 · 76 */
  --fs-1:13px; --fs-2:15px; --fs-3:18px; --fs-4:24px;
  --fs-5:34px; --fs-6:56px; --fs-7:76px;

  /* ── 절 사이 세로 리듬: 96~128px ──────────────────────────── */
  --space-section:clamp(72px,10vw,128px);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1f1e1d; --panel:#262624; --panel-2:#30302e;
    --line:#3a3835; --line-2:#4c4944;
    --ink:#f0ece4; --ink-2:#aca79d; --ink-3:#9a9489;
    --btn-fg:#1f1e1d;   /* 밝아진 강조색 배경 위에는 «어두운» 글자 */

    --accent:#c9744f; --accent-text:#e2966d; --accent-soft:#332822;
    --user:#2e2c28;

    --warn:#e0b384; --warn-bg:#2b2318;
    --ok:#7cc491; --ok-bg:#1e2b21;
    --todo:#ff8a80; --todo-bg:#3a201d;

    --shadow-1:0 1px 2px rgba(0,0,0,.35);
  }
}

/* ── 리셋 ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font:var(--fs-2)/1.7 var(--font-sans);
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
h1,h2{font-family:var(--font-serif); font-weight:600; letter-spacing:-.02em; margin:0}
h3{font-family:var(--font-sans); font-weight:600; letter-spacing:-.005em; margin:0}
code{font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:.9em}
b,strong{font-weight:600}
svg{stroke-width:1.5}

a,button,.btn,.faq summary::after,.tab{transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease), transform var(--dur) var(--ease)}

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent-text); outline-offset:2px; border-radius:4px;
}

.wrap{max-width:var(--w); margin:0 auto; padding:0 24px}

/* ── 레거시 호환(법무 문서 4종이 쓰는 맨 태그 선택자) ───────────
   terms/privacy/refund/pricing.html은 아직 자체 인라인 <style>을
   쓴다 — 이 블록은 그 파일들이 지금 안 쓸 때도 깨지지 않게만 얕게
   잡아 둔다. .card·.princ·.flow류 컴포넌트는 "법무 4종 호환" 절에
   따로 갖춰 뒀다(여유가 있을 때 인라인 스타일을 걷어내면 쓸 수 있다). */
header{border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:10}
header .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px}
main{padding:40px 0 60px}
footer{padding:26px 20px 40px; text-align:center}
footer p{font-size:var(--fs-1); color:var(--ink-3); margin:4px 0}
.navlinks{display:flex; gap:18px; align-items:center; font-size:var(--fs-1)}
.navlinks a{text-decoration:none; color:var(--ink-2)}
.navlinks a.cur{color:var(--accent-text); font-weight:600}

/* ── 머리말(랜딩용) — 얇고 조용하게. 스크롤 전엔 거의 안 보인다 ── */
.site-header{
  border-bottom:1px solid transparent; background:transparent;
  position:sticky; top:0; z-index:10;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 1px 2px rgba(32,25,18,.04);
}
.header-row{display:flex; align-items:center; justify-content:space-between; padding:16px 24px}
.brand{
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-3);
  letter-spacing:0; text-decoration:none; color:var(--ink);
}

/* ── 버튼 ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  text-decoration:none; border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-weight:600; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
}
.btn-primary{background:var(--accent-text); color:var(--btn-fg)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:none; border-color:var(--line-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent-text); color:var(--accent-text)}
.btn-sm{padding:8px 16px; font-size:var(--fs-1)}
.btn-lg{padding:15px 30px; font-size:var(--fs-2)}

/* ── 눈썹 라벨(섹션 상단 작은 표시) ───────────────────────────── */
.eyebrow{
  font-size:var(--fs-1); font-weight:600; letter-spacing:.04em; color:var(--accent-text);
  margin:0 0 14px;
}

/* ── 히어로 ─────────────────────────────────────────────────── */
.hero{padding:clamp(64px,11vw,112px) 0 56px}
.hero h1{
  font-size:clamp(40px,7vw,var(--fs-7)); line-height:1.15; margin:0 0 22px;
  max-width:13em;
}
.hero .lede{font-size:var(--fs-3); line-height:1.6; color:var(--ink-2); margin:0; max-width:26em}
.hero .lede.strong{color:var(--ink)}
.hero-actions{display:flex; align-items:center; gap:16px; margin-top:34px}
.hero-link{
  color:var(--ink-2); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-2);
}
.hero-link:hover{color:var(--accent-text); text-decoration-color:var(--accent-text)}
.hero-note{font-size:var(--fs-1); color:var(--ink-3); margin-top:22px}

/* ── 입력 상자(첫 화면 «입구») ─────────────────────────────────
   질문을 묻거나, 파일/촬영으로 사료를 바로 넣는 자리. 둥글기 크게,
   테두리는 아주 옅게, 그림자 하나만. 포커스·드래그 때만 강조색. */
.prompt-box{
  max-width:var(--w-narrow); margin:0; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--panel);
  box-shadow:0 2px 10px rgba(32,25,18,.05);
  padding:18px 18px 12px; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.prompt-box:focus-within{border-color:var(--accent-text); box-shadow:0 2px 14px rgba(169,83,46,.12)}
.prompt-box.dragover{border-color:var(--accent-text); background:var(--accent-soft)}
.prompt-box textarea{
  width:100%; resize:none; border:none; outline:none; background:none;
  color:var(--ink); font:var(--fs-3)/1.5 var(--font-sans); padding:6px 4px 10px;
}
.prompt-box textarea::placeholder{color:var(--ink-3)}
.prompt-row{display:flex; align-items:center; gap:10px}
.prompt-attach{display:flex; gap:4px}
.prompt-ic{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; color:var(--ink-2); cursor:pointer; flex:none;
}
.prompt-ic svg{width:19px; height:19px}
.prompt-ic:hover{background:var(--panel-2); color:var(--accent-text)}
.prompt-filename{
  flex:1; min-width:0; font-size:var(--fs-1); color:var(--accent-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.prompt-send{
  flex:none; width:38px; height:38px; border-radius:50%; border:none;
  background:var(--accent-text); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin-left:auto;
}
.prompt-send svg{width:18px; height:18px}
.prompt-send:hover{filter:brightness(1.08)}
.prompt-examples{
  max-width:var(--w-narrow); margin:16px 0 0; display:flex; gap:8px; flex-wrap:wrap;
}
.chip{
  border:1px solid var(--line-2); background:none; color:var(--ink-2);
  border-radius:20px; padding:7px 14px; font-size:var(--fs-1); cursor:pointer;
}
.chip:hover{border-color:var(--accent-text); color:var(--accent-text)}

/* ── 경고/정직 박스 — 여기 하나만 «경고 상자»로 남긴다 ─────────── */
.honest{
  background:var(--warn-bg); border:1px solid var(--line);
  border-left:3px solid var(--warn); border-radius:var(--radius);
  padding:30px 32px; margin:0 0 var(--space-section);
}
.honest .alert-heading{
  font-family:var(--font-sans); font-weight:700; font-size:var(--fs-2);
  color:var(--warn); margin:0 0 18px; letter-spacing:0;
}
.honest ul{margin:0; padding-left:1.15em; display:flex; flex-direction:column; gap:12px}
.honest li{font-size:var(--fs-2); line-height:1.7; color:var(--ink)}
.honest li b{font-weight:700}

/* ── 로컬 저장 배너 ─────────────────────────────────────────── */
.save-banner{
  display:flex; align-items:flex-start; gap:18px;
  background:var(--ok-bg); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 30px; margin:0 0 var(--space-section);
}
.save-banner .ic{
  flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line); color:var(--ok);
  display:flex; align-items:center; justify-content:center;
}
.save-banner .ic svg{width:18px; height:18px}
.save-banner .tx{font-size:var(--fs-2); line-height:1.7; color:var(--ink)}
.save-banner .tx b{color:var(--ok)}

/* ── 섹션 공통 — 여백으로 나뉜다, 위 두 박스만 예외 ───────────── */
.section{padding:0 0 var(--space-section)}
.section:last-of-type{padding-bottom:calc(var(--space-section) * .6)}
.section-head{margin:0 0 40px; max-width:34em}
.section h2{font-size:var(--fs-5); line-height:1.25; letter-spacing:-.015em}
.section .desc{color:var(--ink-2); font-size:var(--fs-2); line-height:1.7; margin:12px 0 0; max-width:34em}

/* ── 기능 목록 — 테두리 상자 없이, 여백과 위쪽 실선만으로 나눈다 ── */
.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:36px 44px}
.feat{padding-top:20px; border-top:1px solid var(--line)}
.feat h3{font-size:var(--fs-4); margin:0 0 10px; letter-spacing:-.01em}
.feat p{margin:0; font-size:var(--fs-2); line-height:1.7; color:var(--ink-2); max-width:30em}

/* ── 단계 목록(번호 원) ───────────────────────────────────────── */
.steps{display:flex; flex-direction:column; gap:0}
.step{display:flex; gap:20px; padding:22px 0; border-top:1px solid var(--line)}
.step:first-child{border-top:none}
.step .n{
  flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--panel-2); color:var(--accent-text); font-weight:700; font-size:var(--fs-1);
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.step .c{min-width:0}
.step h3{font-size:var(--fs-3); margin:0 0 6px; line-height:1.4}
.step p{margin:0; font-size:var(--fs-2); line-height:1.7; color:var(--ink-2)}

/* ── 더 알아보기(details) — 부가 설명을 접어 둔다 ─────────────── */
details.more{margin-top:32px}
details.more summary{
  cursor:pointer; font-size:var(--fs-1); font-weight:600; color:var(--ink-2);
  list-style:none; display:inline-flex; align-items:center; gap:6px;
}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+"; color:var(--ink-3); font-weight:400}
details.more[open] summary::before{content:"–"}
details.more summary:hover{color:var(--accent-text)}
details.more p{margin:14px 0 0; font-size:var(--fs-2); line-height:1.7; color:var(--ink-2); max-width:34em}

/* ── 핵심 정의 목록(원칙·안내 등) — 표 느낌을 줄인 얇은 dl ──────── */
.deflist{display:flex; flex-direction:column; gap:0}
.deflist>div,.deflist dt,.deflist dd{margin:0}
.deflist dt{
  font-weight:600; color:var(--ink); font-size:var(--fs-3);
  padding-top:26px; margin-top:26px; border-top:1px solid var(--line);
}
.deflist dt:first-of-type{padding-top:0; margin-top:0; border-top:none}
.deflist dd{color:var(--ink-2); font-size:var(--fs-2); line-height:1.7; margin-top:8px; max-width:34em}

/* ── FAQ(details/summary) ─────────────────────────────────────── */
.faq{display:flex; flex-direction:column; gap:0}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:none}
.faq summary{
  cursor:pointer; padding:20px 2px; font-weight:600; font-size:var(--fs-3);
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ink-3); font-size:20px; font-weight:400; flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent-text)}
.faq .a{padding:0 2px 22px; font-size:var(--fs-2); line-height:1.7; color:var(--ink-2); max-width:34em}

/* ── 마무리 CTA ─────────────────────────────────────────────── */
.final-cta{
  text-align:center; padding:96px 24px; border-top:1px solid var(--line);
  background:var(--panel);
}
.final-cta h2{font-size:var(--fs-5); margin:0 0 14px}
.final-cta p{color:var(--ink-2); font-size:var(--fs-2); margin:0 0 30px}

/* ── 바닥글 ─────────────────────────────────────────────────── */
.site-footer{padding:48px 24px 56px; border-top:1px solid var(--line)}
.footer-links{
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  margin:0 0 20px; padding:0; list-style:none;
}
/* ⚠️ 글자는 작아도 «누를 넓이»는 넉넉해야 한다 — 손가락은 44px 를 쓴다.
   2026-08-28 실측: 이 링크들의 높이가 15px 였다. */
.footer-links a{
  font-size:var(--fs-1); color:var(--ink-2); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
}
.footer-links a:hover{color:var(--accent-text); text-decoration:underline}
.footer-note{text-align:center}
.footer-note p{font-size:var(--fs-1); color:var(--ink-3); margin:4px 0}

/* ============================================================
   법무 4종 호환 컴포넌트(terms/privacy/refund/pricing.html)
   ⚠️ 이 파일은 아직 그 네 파일에 링크돼 있지 않다 — 인라인
   <style>이 여전히 우선한다. 나중에 그 인라인 블록을 지우고
   이 파일을 링크해도 아래 이름들로 그대로 얹히도록, 실제로 쓰는
   네 파일의 인라인 정의를 그대로 옮겨 왔다(pricing.html 기준).
   ============================================================ */
.draftBanner{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--todo-bg); border:1px solid var(--todo); border-radius:var(--radius);
  padding:18px 22px; margin:0 0 32px; font-size:var(--fs-2); color:var(--ink);
}
.draftBanner b{color:var(--todo)}
.todo{
  display:inline-block; background:var(--todo-bg); color:var(--todo);
  border:1px solid var(--todo); border-radius:6px; padding:1px 8px;
  font-weight:700; font-size:var(--fs-1);
}
section.art,section.block{padding:8px 0 40px}
section.art h2,section.block h2{font-size:var(--fs-4); margin:0 0 18px; letter-spacing:-.01em}
section.art p,section.block p{font-size:var(--fs-2); color:var(--ink-2); line-height:1.75; margin:0 0 14px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.card{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:22px 20px 24px; text-align:center}
.card h3{margin:0 0 8px; font-size:var(--fs-3)}
.card .price{font-size:var(--fs-4); font-weight:700; color:var(--accent-text); margin:10px 0}
.card p{margin:0; font-size:var(--fs-1); color:var(--ink-2); line-height:1.65; text-align:left}

.flow{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel)}
.flowStep{display:flex; gap:16px; padding:16px 20px; border-bottom:1px solid var(--line)}
.flowStep:last-child{border-bottom:none}
.flowStep .n{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-text); font-weight:700; font-size:var(--fs-1);
  display:flex; align-items:center; justify-content:center;
}
.flowStep .c b{display:block; font-size:var(--fs-2); margin-bottom:3px}
.flowStep .c span{font-size:var(--fs-1); color:var(--ink-2)}

.princ{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel)}
.princRow{display:grid; grid-template-columns:1fr 1.6fr; gap:0; border-bottom:1px solid var(--line)}
.princRow:last-child{border-bottom:none}
.princRow>div{padding:14px 18px; font-size:var(--fs-1)}
.princRow .k{color:var(--ink); font-weight:600; background:var(--bg)}
.princRow .v{color:var(--ink-2); line-height:1.6}

/* ============================================================
   APP 화면 (app.html) — 클래스/ID는 app.html 마크업 그대로 썼다.
   app.html 자체는 이번 라운드에서 건드리지 않았다(다른 담당이 기능
   작업 중). app.html이 지금 쓰는 :root 토큰(--bg 등)과 이름이
   같으므로, 인라인 <style> 블록을 지우고 이 파일을 링크하면
   색·라디우스가 그대로 얹힌다.
   ⚠️ header/footer는 랜딩(.site-header 등)과 이름이 겹치는 «맨 태그»
   라서, app.html 마크업 구조(.tabs가 header 바로 밑에 있음)를 보고
   :has()로만 걸었다 — app.html에 클래스를 추가하지 않고도 구분된다.
   ============================================================ */
body:has(#chatPane){font-size:var(--fs-2); line-height:1.65}

/* STUB_MODE 띠 — 동작(표시/숨김)은 app.html 스크립트가 이미 한다.
   여기서는 배색만 토큰으로 정리한다(app.html의 인라인 style="" 값과
   같은 문구지만, 링크 전환 뒤에는 #stubBanner{}로 옮겨 적으면 된다). */
#stubBanner{
  background:var(--todo); color:#fff; text-align:center;
  padding:8px 12px; font-size:var(--fs-1); font-weight:700;
}

header:has(.tabs){
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 20px;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none}
.dot.on{background:var(--ok)} .dot.off{background:var(--todo)}
.muted{color:var(--ink-2); font-size:var(--fs-1)}
header:has(.tabs) .sp{flex:1}
select,input,button{font:inherit; color:inherit}
select,input[type=text]{
  background:var(--bg); border:1px solid var(--line-2); color:var(--ink);
  border-radius:var(--radius-sm); padding:6px 10px; font-size:var(--fs-1);
}

/* ── 탭 — 선택된 탭은 밑줄 «하나만»으로 드러낸다(채움과 겹치지 않는다) ── */
.tabs{display:flex; gap:2px}
.tab{
  background:none; border:none; border-bottom:2px solid transparent; color:var(--ink-2);
  border-radius:0; padding:7px 12px 6px; font-size:var(--fs-1); font-weight:600; cursor:pointer;
}
.tab:hover{color:var(--ink)}
.tab.on{border-bottom-color:var(--accent-text); color:var(--ink)}

/* ── 대화 ──────────────────────────────────────────────────── */
#chatPane .wrap{max-width:var(--w-app); margin:0 auto; padding:0 16px; display:flex; flex-direction:column; gap:20px}
main#chatPane{flex:1; overflow-y:auto; padding:26px 0 8px}
.turn{display:flex; flex-direction:column; gap:5px}
.turn.me{align-items:flex-end}
.who{font-size:11px; color:var(--ink-3); font-weight:600; letter-spacing:.02em}
.msg{
  max-width:88%; padding:12px 16px; border-radius:var(--radius);
  white-space:pre-wrap; word-break:break-word; font-size:var(--fs-2); line-height:1.65;
}
.turn.me .msg{background:var(--user); border:1px solid var(--line)}
.turn.ai .msg{background:var(--panel); border:1px solid var(--line)}
.turn.sys .msg{
  background:var(--warn-bg); border:1px solid var(--line); color:var(--warn);
  font-size:var(--fs-1); max-width:100%;
}
.meta{font-size:11px; color:var(--ink-3)}
.caret::after{content:"▌"; animation:aaa-blink 1s step-end infinite; color:var(--accent-text)}
@keyframes aaa-blink{50%{opacity:0}}

/* ── 입력 ──────────────────────────────────────────────────── */
#chatFoot{border-top:1px solid var(--line); background:var(--panel); padding:14px 16px 18px; text-align:left}
#chatFoot .box{max-width:var(--w-app); margin:0 auto; padding:0 16px; display:flex; gap:10px; align-items:flex-end}
textarea{
  flex:1; resize:none; min-height:52px; max-height:210px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:13px 15px;
  font:var(--fs-2)/1.5 inherit; outline:none;
}
textarea:focus{border-color:var(--accent-text)}
#send{
  background:var(--accent-text); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:0 22px; height:52px; font-weight:600; cursor:pointer; flex:none; font-size:var(--fs-2);
}
#send:hover{filter:brightness(1.08)}
#send:disabled{background:var(--line-2); cursor:default; filter:none}
#chatFoot .hint{max-width:var(--w-app); margin:10px auto 0; padding:0 16px; font-size:11px; color:var(--ink-3)}

/* ── 화면 전환(대화/볼트/PDF/촬영/구조) ───────────────────────── */
#vault{flex:1; display:none; overflow:hidden}
#vault.on{display:flex}
.vside{
  width:320px; flex:none; border-right:1px solid var(--line);
  background:var(--panel); display:flex; flex-direction:column;
}
.vtop{padding:12px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.vtop .r{display:flex; gap:6px}
.vtop .r .vbtn{flex:1}
#vname{font-weight:600; color:var(--ink); font-size:var(--fs-1)}
.vtop select{flex:none} .vtop input{flex:1; min-width:0}
.vlist{flex:1; overflow-y:auto; padding:6px}
.vitem{padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid transparent}
.vitem:hover{background:var(--bg)}
.vitem.on{background:var(--accent-soft); border-color:var(--line-2)}
.vitem .n{font-size:var(--fs-1); line-height:1.35}
.vitem .d{font-size:11px; color:var(--ink-3); margin-top:2px}
.vitem .h{font-size:11px; color:var(--ink-2); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vmain{flex:1; overflow-y:auto; padding:28px 32px}
.vdoc{max-width:760px; margin:0 auto; font-size:var(--fs-2); line-height:1.75}
.vdoc h1{font-size:var(--fs-4); margin:0 0 6px; font-family:var(--font-serif)}
.vdoc h2{font-size:var(--fs-3); margin:28px 0 8px}
.vdoc h3{font-size:var(--fs-2); margin:20px 0 6px}
.vdoc p{margin:10px 0} .vdoc li{margin:4px 0}
.vdoc code{background:var(--user); padding:1px 5px; border-radius:4px; font-size:.9em}
.vdoc pre{background:var(--user); padding:14px 16px; border-radius:var(--radius-sm); overflow-x:auto}
.vdoc pre code{background:none; padding:0}
.vdoc table{border-collapse:collapse; margin:14px 0; font-size:var(--fs-1); display:block; overflow-x:auto}
.vdoc th,.vdoc td{border:1px solid var(--line-2); padding:6px 10px; text-align:left}
.vdoc th{background:var(--user)}
.vdoc blockquote{border-left:3px solid var(--accent-text); margin:14px 0; padding:2px 0 2px 14px; color:var(--ink-2)}
.vdoc hr{border:none; border-top:1px solid var(--line); margin:22px 0}
.wl{color:var(--accent-text); cursor:pointer; text-decoration:none; border-bottom:1px dotted var(--accent-text)}
.vhead{border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:18px}
.vpath{font-size:11px; color:var(--ink-3); margin-bottom:6px}
.vacts{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.vbtn{
  background:var(--bg); border:1px solid var(--line-2); color:var(--ink);
  border-radius:var(--radius-sm); padding:6px 13px; font-size:var(--fs-1); cursor:pointer;
}
.vbtn:hover{border-color:var(--accent-text); color:var(--accent-text)}
.vback{margin-top:28px; padding-top:16px; border-top:1px solid var(--line)}
.vback h4{margin:0 0 8px; font-size:var(--fs-1); color:var(--ink-2)}

/* ── 설정 ──────────────────────────────────────────────────── */
#cfg{display:none; border-bottom:1px solid var(--line); background:var(--accent-soft); padding:14px 16px}
#cfg .row{max-width:var(--w-app); margin:0 auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
#cfg .row + .row{margin-top:8px}
#cfg label{font-size:var(--fs-1); color:var(--ink-2)}
#cfg input{min-width:210px}
#cfg select:disabled{opacity:.5; cursor:not-allowed}
#engineNote{color:var(--warn); font-size:11px; flex-basis:100%}
.link{background:none; border:none; color:var(--accent-text); cursor:pointer; font-size:var(--fs-1); padding:5px}

/* ── 쓰기 시험 / 맵핑 시험 ────────────────────────────────────── */
#vSaveStatus,#vMapStatus{white-space:pre-wrap; line-height:1.5; font-size:var(--fs-1)}
#vSaveStatus.ok,#vMapStatus.ok{color:var(--ok)}
#vSaveStatus.err,#vMapStatus.err{color:var(--warn)}
#vtestSave:disabled,#vtestMapping:disabled{opacity:.6; cursor:default}

/* ── PDF 처리 화면 ─────────────────────────────────────────── */
#pdfPane{flex:1; display:none; overflow-y:auto; padding:26px 16px 40px}
#pdfPane.on{display:block}
.pdfWrap{max-width:760px; margin:0 auto}
.pdfTop{display:flex; align-items:center; gap:12px; margin-bottom:12px}
#pdfSummary{margin-bottom:18px; line-height:1.6; font-size:var(--fs-1); color:var(--ink-2)}
.pdfPage{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px;
  margin-bottom:10px; background:var(--panel);
}
.pdfPage .ph{display:flex; align-items:center; gap:8px; font-size:var(--fs-2); font-weight:600}
.pdfPage .badge{font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; border:1px solid var(--line-2)}
.pdfPage .badge.text{color:var(--ok); border-color:var(--ok)}
.pdfPage .badge.scan{color:var(--warn); border-color:var(--warn)}
.pdfPage .pn{font-size:11px; color:var(--ink-3)}
.pdfPage .pv{
  margin-top:8px; font-size:var(--fs-1); color:var(--ink-2); white-space:pre-wrap;
  max-height:120px; overflow-y:auto; background:var(--bg); border-radius:var(--radius-sm); padding:8px 10px;
}
.pdfPage canvas{max-width:100%; margin-top:8px; border-radius:var(--radius-sm); border:1px solid var(--line)}
#pdfMapStatus{white-space:pre-wrap; line-height:1.5; margin-top:8px; font-size:var(--fs-1)}
#pdfMapStatus.ok{color:var(--ok)} #pdfMapStatus.err{color:var(--warn)}
#pdfMapRow{margin-top:8px}

/* ── 촬영 화면 ─────────────────────────────────────────────── */
#cameraPane{flex:1; display:none; overflow-y:auto; padding:26px 16px 40px}
#cameraPane.on{display:block}
.camWrap{max-width:760px; margin:0 auto}
.camIntro h2{margin:0 0 8px; font-size:var(--fs-4); font-family:var(--font-serif)}
.camIntro p{margin:0 0 16px; font-size:var(--fs-2); color:var(--ink-2); line-height:1.7}
.camIntro .r{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
label.vbtn{display:inline-block}
#camReadAll:disabled,#camClearAll:disabled{opacity:.55; cursor:default}
.camShot{
  display:flex; gap:14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; margin-bottom:10px; background:var(--panel); align-items:flex-start;
}
.camShot img{width:104px; height:104px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--line); flex:none; background:var(--bg)}
.camShot .ci{flex:1; min-width:0}
.camShot .ct{font-size:var(--fs-2); font-weight:600; margin-bottom:3px}
.camShot .cs{font-size:11px; color:var(--ink-3); margin-bottom:8px}
.camShot .cr{display:flex; gap:6px; flex-wrap:wrap}
.camShot .crd{
  margin-top:8px; font-size:var(--fs-1); color:var(--ink-2); white-space:pre-wrap;
  max-height:200px; overflow-y:auto; background:var(--bg); border-radius:var(--radius-sm);
  padding:8px 10px; display:none;
}
.camShot .crd.on{display:block}
.camShot .crd.err{color:var(--warn)}
.camEmpty{font-size:var(--fs-1); color:var(--ink-3); padding:16px 0}
#camNote{
  background:var(--warn-bg); border:1px solid var(--line); color:var(--warn);
  border-radius:var(--radius-sm); padding:11px 13px; font-size:var(--fs-1); margin:12px 0 16px; display:none;
}
#camNote.on{display:block}
#camMapRow{margin-top:16px; flex-wrap:wrap}
.camMapModeGroup{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:var(--fs-1)}
.camMapModeLabel{display:inline-flex; align-items:center; gap:5px; cursor:pointer}
#camMapStatus{white-space:pre-wrap; line-height:1.5; margin-top:8px; font-size:var(--fs-1)}
#camMapStatus.ok{color:var(--ok)} #camMapStatus.err{color:var(--warn)}

/* ── 구조 탭 ───────────────────────────────────────────────── */
#structPane{flex:1; display:none; overflow-y:auto; padding:26px 16px 40px}
#structPane.on{display:block}
.structWrap{max-width:820px; margin:0 auto}
.structIntro{margin-bottom:22px}
.structIntro h2{margin:0 0 8px; font-size:var(--fs-4); font-family:var(--font-serif)}
.structIntro p{font-size:var(--fs-2); color:var(--ink-2); line-height:1.7}
.structSec{border-top:1px solid var(--line); padding:20px 0; margin-bottom:0}
.structSec:first-of-type{border-top:none}
.structSec h3{margin:0 0 4px; font-size:var(--fs-3); display:flex; align-items:center; gap:8px}
.structSec h3 .cnt{
  font-size:11px; font-weight:600; color:var(--ink-3); background:var(--panel-2);
  border:1px solid var(--line-2); border-radius:20px; padding:1px 9px;
}
.structSec .desc{font-size:var(--fs-1); color:var(--ink-2); margin:0 0 12px}
.structRow{padding:8px 10px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; margin-bottom:3px}
.structRow:hover{background:var(--bg)}
.structRow .t{font-size:var(--fs-1)}
.structRow .s{font-size:11px; color:var(--ink-3); margin-top:2px}
.structEmpty{font-size:var(--fs-1); color:var(--ink-3); padding:6px 0}
.structMore{font-size:11px; color:var(--ink-3); padding:4px 0}

/* ── 360px까지 가로 스크롤 금지 ───────────────────────────────── */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .feats{grid-template-columns:1fr; gap:28px}
  .princRow{grid-template-columns:1fr}
  .prompt-box{padding:14px 14px 10px}
  .honest,.save-banner{padding:20px}
  .header-row, header .wrap{padding:12px 16px}
  .final-cta{padding:64px 18px}
  .hero h1{max-width:none}

  header:has(.tabs){padding:10px 12px}
  .tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
  .vside{width:100%; position:absolute; inset:0; z-index:5}
  #vault.on{position:relative}
  .vmain{padding:20px}
}