/* 연담(戀談) 사무소 — 먹색+금박 감정 서류 디자인 시스템 */
:root{
  --paper:#fbf9f4; --ink:#201c15; --ink-soft:#5a5344; --gold:#a8813a;
  --gold-line:rgba(168,129,58,.4); --card:#ffffff; --rule:#e4ddcd;
  --thead:#f3efe4; --quote:#f6f2e8;
  --o-mok:#4a7a4e; --o-hwa:#b0523f; --o-to:#a8813a; --o-geum:#8a8f98; --o-su:#3f5f7a;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#171410; --ink:#e9e3d3; --ink-soft:#a89e88; --gold:#c9a256;
    --gold-line:rgba(201,162,86,.45); --card:#1f1b15; --rule:#383226;
    --thead:#211d16; --quote:#1d1913;
    --o-mok:#6f9e73; --o-hwa:#c97862; --o-to:#c9a256; --o-geum:#a7adb8; --o-su:#6f8fab; }
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:15.5px; line-height:1.8; }
.serif, h1, h2, h3{ font-family:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo",Batang,Georgia,serif; }
h1{ font-size:clamp(26px,5.2vw,40px); line-height:1.3; margin:12px 0 10px; text-wrap:balance; }
h2{ font-size:21px; margin:0 0 14px; }
h3{ font-size:16.5px; margin:24px 0 8px; }
a{ color:var(--gold); text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.wrap{ max-width:820px; margin:0 auto; padding:0 20px; }
section{ padding:52px 0; }
.eyebrow{ color:var(--gold); font-size:12.5px; letter-spacing:.32em; }
.chapter{ display:flex; align-items:baseline; gap:12px; border-bottom:2px solid var(--gold-line); padding-bottom:10px; margin-bottom:20px; }
.chapter .no{ font-family:"Noto Serif KR",Batang,serif; color:var(--gold); font-size:13px; letter-spacing:.18em; white-space:nowrap; }
.note{ font-size:13px; color:var(--ink-soft); }

/* 히어로 — 레터헤드 */
.hero{ padding:64px 0 56px; }
.letterhead{ border:1px solid var(--gold-line); padding:38px 32px 32px; position:relative; background:var(--card); }
.letterhead::after{ content:""; position:absolute; inset:6px; border:1px solid var(--rule); pointer-events:none; }
.hero p.lead{ color:var(--ink-soft); max-width:560px; font-size:16px; }
.seal{ display:inline-block; border:1.5px solid var(--gold); color:var(--gold); border-radius:50%;
  width:58px; height:58px; text-align:center; font-family:"Noto Serif KR",Batang,serif;
  font-size:14px; line-height:1.25; padding-top:13px; }
.cta{ display:inline-block; background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  padding:13px 26px; font-size:15px; letter-spacing:.06em; cursor:pointer; text-decoration:none;
  font-family:inherit; }
.cta:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.cta.gold{ background:var(--gold); border-color:var(--gold); color:#fff; }
.cta[disabled]{ opacity:.55; cursor:default; }

/* 파트너 명함 */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; }
.card{ background:var(--card); border:1px solid var(--gold-line); padding:20px 22px 16px; position:relative; }
.card::after{ content:"戀談"; position:absolute; top:14px; right:16px; color:var(--gold); opacity:.5;
  font-size:11px; letter-spacing:.3em; font-family:"Noto Serif KR",Batang,serif; }
.card .role{ font-size:11.5px; color:var(--gold); letter-spacing:.22em; }
.card .name{ font-family:"Noto Serif KR",Batang,serif; font-size:22px; font-weight:700; margin:6px 0 2px; }
.card .name small{ font-size:13px; color:var(--ink-soft); font-weight:400; }
.card .cred{ font-size:12.5px; color:var(--ink-soft); border-bottom:1px solid var(--rule); padding-bottom:10px; margin-bottom:10px; }
.card q{ display:block; font-size:13px; line-height:1.7; quotes:"“" "”"; }
.card q::before,.card q::after{ color:var(--gold); }

/* 접수 폼 */
.reception{ background:var(--card); border:1px solid var(--rule); padding:28px 26px; }
.field{ margin:14px 0; }
.field label{ display:block; font-size:13px; color:var(--ink-soft); margin-bottom:6px; letter-spacing:.04em; }
.field input[type="date"], .field input[type="time"], .field input[type="text"], .field select{
  width:100%; max-width:340px; padding:11px 12px; font-size:15px; font-family:inherit;
  background:var(--paper); color:var(--ink); border:1px solid var(--rule); }
.field .check{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-soft); margin-top:8px; }
.field .check input{ width:16px; height:16px; accent-color:var(--gold); }
.privacy{ font-size:12.5px; color:var(--ink-soft); border-top:1px dashed var(--rule); padding-top:12px; margin-top:18px; }

/* 예비 소견 결과 */
#opinion{ display:none; }
#opinion.show{ display:block; }
.docsheet{ background:var(--card); border:1px solid var(--gold-line); padding:30px 26px; position:relative; }
.docsheet::after{ content:""; position:absolute; inset:6px; border:1px solid var(--rule); pointer-events:none; }
.dochead{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;
  border-bottom:2px solid var(--gold-line); padding-bottom:14px; margin-bottom:20px; }
.dochead .t{ font-family:"Noto Serif KR",Batang,serif; font-size:20px; font-weight:700; }
.dochead .meta{ text-align:right; font-size:12px; color:var(--ink-soft); line-height:1.7; }
.dochead .meta b{ color:var(--gold); letter-spacing:.06em; }

.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; }
.pillar{ text-align:center; border:1px solid var(--rule); background:var(--paper); padding:12px 6px 10px; }
.pillar .lab{ font-size:11px; color:var(--gold); letter-spacing:.2em; }
.pillar .hj{ font-family:"Noto Serif KR",Batang,serif; font-size:clamp(22px,4.5vw,30px); line-height:1.3; margin:6px 0 2px; }
.pillar .kr{ font-size:12.5px; color:var(--ink-soft); }
.pillar .sip{ font-size:11px; color:var(--gold); margin-top:6px; min-height:1.2em; }
.pillar.empty .hj{ color:var(--ink-soft); opacity:.5; }

.obars{ margin:20px 0 6px; }
.obar{ display:grid; grid-template-columns:3.2em 1fr 2.4em; align-items:center; gap:10px; margin:7px 0; font-size:13px; }
.obar .track{ height:12px; background:var(--paper); border:1px solid var(--rule); position:relative; }
.obar .fill{ position:absolute; inset:0 auto 0 0; }
.obar .cnt{ font-variant-numeric:tabular-nums; color:var(--ink-soft); text-align:right; }
.f-mok{ background:var(--o-mok); } .f-hwa{ background:var(--o-hwa); } .f-to{ background:var(--o-to); }
.f-geum{ background:var(--o-geum); } .f-su{ background:var(--o-su); }

.oplines{ margin:20px 0; }
.opline{ border-left:2px solid var(--gold); background:var(--quote); padding:12px 16px; margin:10px 0; font-size:14.5px; }
.opline .basis{ display:block; font-size:12px; color:var(--gold); margin-top:5px; }
.warnbox{ border:1px dashed var(--gold); padding:10px 14px; font-size:12.5px; color:var(--ink-soft); margin:14px 0; }

/* 티저 (블러) */
.teaser{ position:relative; margin-top:26px; border:1px solid var(--rule); padding:20px 22px; overflow:hidden; }
.teaser ul{ margin:8px 0 0; padding-left:18px; font-size:13.5px; color:var(--ink-soft);
  filter:blur(4px); user-select:none; pointer-events:none; }
.teaser .veil{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; background:linear-gradient(to bottom, transparent, var(--card) 78%); padding:20px; text-align:center; }
.teaser .veil .serif{ font-size:16px; }

/* FAQ / 푸터 */
.faq details{ border:1px solid var(--rule); background:var(--card); padding:14px 18px; margin:10px 0; }
.faq summary{ cursor:pointer; font-weight:600; font-size:14.5px; }
.faq p{ font-size:14px; color:var(--ink-soft); margin:10px 0 2px; }
footer{ border-top:2px solid var(--gold-line); padding:26px 0 60px; font-size:12.5px; color:var(--ink-soft); }
footer .wrap{ display:flex; flex-direction:column; gap:6px; }

@media (max-width:560px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
html{ scroll-behavior:smooth; }