/* ═══════════════════════════════════════════════════════════════
   SOON:MOOD — 시안 D 「活字 ＋ 檔案」
   규칙: 서술(주장·이야기)은 명조 편집, 증거(기준·데이터)는 문서 표.
   팔레트는 Framer 원본 계승 (#9C2A13 / #FBF1EA).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --brand:#9C2A13; --brand-d:#7A2010;
  --ink:#171310; --ink2:#4B4038; --ink3:#8A7C72;
  --paper:#FBF7F2; --cream:#FBF1EA;
  --line:#EADFD3; --line2:#E2D6C9;
  --serif:"Songti TC","Noto Serif TC","Source Han Serif TC","MingLiU",serif;
  --sans:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:"SF Mono","JetBrains Mono","Menlo","Consolas",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.9 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.w{max-width:1120px;margin:0 auto;padding:0 40px}

/* ── 어떤 폭에서도 한 글자만 떨어지지 않게 / 가로 스크롤 방지 ── */
h1,h2,h3,h4,.hero h1,.sec h2,.qa .q,.pull q,.end p,.arts b,.plist b{
  word-break:keep-all;line-break:strict;text-wrap:balance;overflow-wrap:break-word}
img,table,figure,pre,iframe,video{max-width:100%}
.foot,.cp{overflow-wrap:anywhere}
.nowrap{white-space:nowrap}

/* ── 헤더 ───────────────────────────────────────────── */
.nav{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px 28px;
  padding:34px 0 0;font-size:13px;letter-spacing:.08em}
.nav b{font:700 15px/1 var(--sans);letter-spacing:.14em;margin-right:auto}
.nav b i{font-style:normal;color:var(--brand)}
.nav a{text-decoration:none;color:var(--ink2);white-space:nowrap}
.nav a:hover{color:var(--brand)}
.nav a.on{color:var(--brand);font-weight:700}
.nav a.cta{background:var(--brand);color:#fff;padding:8px 16px;border-radius:99px;
  font-weight:700;letter-spacing:.04em}
.nav a.cta:hover{background:var(--brand-d)}

/* ── 히어로 ─────────────────────────────────────────── */
.hero{padding:118px 0 92px}
.hero h1{font:400 clamp(22px,6.6vw,88px)/1.24 var(--serif);margin:0;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .sub{margin:38px 0 0;font-size:19px;color:var(--ink2);max-width:30em;line-height:1.95}
.hero .meta{margin-top:52px;display:flex;gap:34px;flex-wrap:wrap;
  font:600 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--ink3)}

/* 히어로 영상 도판 — 주장은 활자로, 증거는 도판으로.
   테두리는 .doc 과 같은 선을 써서 '배너'가 아니라 '끼워 넣은 도판'으로 읽히게 한다.
   포스터를 배경으로 깔아 디코딩 전 흰 깜빡임을 막는다. */
.hv{margin:60px 0 0;border:1px solid var(--line2);overflow:hidden;line-height:0;
  aspect-ratio:21/9;background:var(--cream) url(/assets/media/hero-loop-poster.jpg) center/cover}
.hv video{width:100%;height:100%;object-fit:cover;display:block}

/* ── 섹션 ───────────────────────────────────────────── */
.sec{border-top:1px solid var(--line2);padding:76px 0}
.lab{font:700 11.5px/1 var(--mono);letter-spacing:.22em;color:var(--brand);margin:0 0 34px}
.sec h2{font:400 clamp(19px,5.2vw,40px)/1.4 var(--serif);margin:0 0 40px;
  letter-spacing:-.01em;max-width:22em}
.sec h2:first-child{margin-top:0}

/* ── 증거 구역: 크림 바탕에 삽입된 문서 ── */
.doc{border:1px solid #DFD2C4;background:#FEFCF9}
.doc table{border-collapse:collapse;width:100%;font-size:16px}
.doc th,.doc td{text-align:left;padding:15px 20px;border-bottom:1px solid #EDE3D8;
  vertical-align:top;line-height:1.75}
.doc thead th{background:#F5EDE4;border-bottom:1.5px solid var(--ink);
  font:700 11px/1.5 var(--mono);letter-spacing:.2em;color:var(--ink3)}
.doc tbody tr:last-child td{border-bottom:0}
.doc tbody tr:hover{background:#FAF5EF}
.doc td.n{width:60px;font:700 12.5px/1.9 var(--mono);color:#BCA894;white-space:nowrap}
.doc td.p{width:64px;text-align:center;color:var(--brand);font-weight:800}
.doc td.sm{font-size:14.5px;color:#5B4F46}
.doc td .mu{display:block;font:600 11.5px/1.7 var(--mono);color:#A29386;margin-top:5px}
.doc td .pd{display:block;font-size:14.5px;color:#5B4F46;margin-top:5px;line-height:1.75}
.docnote{margin:20px 0 0;font-size:15px;color:var(--ink2);line-height:1.85}
.docnote b{color:var(--brand)}
.docnote a{color:var(--brand)}
.scroll{overflow-x:auto}
.scroll table{min-width:760px}

/* ── 該勸退 문답 ────────────────────────────────────── */
.qa{border-top:1px solid var(--line);padding:34px 0}
.qa .q{font:400 clamp(18px,4.6vw,27px)/1.55 var(--serif);margin:0 0 16px}
.qa .q:before{content:"Q.";font:700 12px/1 var(--mono);color:var(--brand);
  vertical-align:6px;margin-right:11px;letter-spacing:.08em}
.qa .a{margin:0;color:#3D342E;max-width:42em}
.qa .a b{font-weight:700;box-shadow:inset 0 -9px 0 #F3DED2}

/* ── 후기 인용 ──────────────────────────────────────── */
.pull{margin:0;padding:0}
.pull li{list-style:none;border-top:1px solid var(--line);padding:40px 0;display:grid;
  grid-template-columns:170px 1fr;gap:38px}
.pull q{font:400 clamp(17px,4.4vw,26px)/1.6 var(--serif);quotes:"「" "」";display:block}
.pull .who{font:600 13px/1.8 var(--mono);color:var(--ink3);letter-spacing:.04em}
.pull .sat{margin:16px 0 0;font-size:15.5px;color:#5B4F46}

/* ── 원본 캡처 타일 ─────────────────────────────────── */
.wall{display:grid;gap:7px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));margin:34px 0 0}
.wall img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:5px;cursor:zoom-in;
  background:#EFE6DB;border:1px solid var(--line2);display:block}
.wall img:hover{border-color:var(--brand)}
.lb{position:fixed;inset:0;background:rgba(15,10,7,.93);z-index:200;display:none;
  align-items:center;justify-content:center;padding:22px;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:92vh;object-fit:contain;border-radius:5px}
.lb .x{position:absolute;top:14px;right:20px;color:#fff;font-size:34px;line-height:1}

/* ── 목록 ───────────────────────────────────────────── */
.arts,.plist{margin:0;padding:0;list-style:none}
.arts a,.plist a{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:26px 0;
  border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline}
.arts time,.plist time{font:600 12px/1 var(--mono);color:#A29386;letter-spacing:.04em}
.arts b,.plist b{font:400 20px/1.6 var(--serif)}
.arts a:hover b,.plist a:hover b{color:var(--brand)}
.pdate{font:600 12px/1 var(--mono);color:#A29386;letter-spacing:.04em;margin:-10px 0 30px}

/* ── 홈 진입 카드 ───────────────────────────────────── */
.cards{display:grid;gap:0;border-top:1px solid var(--line2);margin:0}
.ncard{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:baseline;
  padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none}
.ncard b{font:400 24px/1.4 var(--serif)}
.ncard span{font-size:15px;color:var(--ink2);line-height:1.85}
.ncard:hover b{color:var(--brand)}

/* ── 일반 문서 페이지 (약관·아티클·브랜드스토리) ───────── */
/* 이 페이지들의 마크업은 <article class="w doc art"> 다. 여기서 .doc 의 표 상자
   장식(테두리·바탕)만 지우면 되는데, 예전엔 padding:0 까지 같이 걸려 있었다.
   .doc.art(클래스 2개)가 .w(클래스 1개)보다 우선순위가 높아서 .w 의 좌우 여백이
   통째로 죽었고, 모바일에서 본문이 화면 끝에 붙었다. .doc 자체는 padding 을
   주지 않으므로 여기서 지울 것도 없다 → 좌우 여백은 .w 에 맡긴다. */
.doc.art{border:0;background:transparent}
.art h1{font:400 clamp(22px,5.6vw,42px)/1.42 var(--serif);margin:0 0 26px;letter-spacing:-.015em}
.art h2{font:400 clamp(19px,4.4vw,28px)/1.5 var(--serif);margin:56px 0 18px;
  padding-top:26px;border-top:1px solid var(--line)}
.art h2:first-of-type{border-top:0;padding-top:0}
.art h3{font:700 17px/1.7 var(--sans);margin:34px 0 10px;color:var(--brand-d)}
.art h4{font:700 15.5px/1.7 var(--sans);margin:24px 0 8px}
.art p{margin:0 0 18px;color:#2A2522}
.art ul,.art ol{margin:0 0 20px;padding-left:1.2em}
.art li{margin:0 0 8px;color:#2A2522}
.art figure{margin:30px 0}
.art figure img{border-radius:10px;display:block;margin:0 auto;
  width:auto;max-width:100%}   /* 원본보다 크게 늘리지 않는다 — 인물 사진이 흐려지는 원인이었다 */
.art figure.vid video{width:100%;border-radius:10px;display:block;background:#000}
.art a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.art .tw{overflow-x:auto;margin:0 0 26px;border:1px solid #DFD2C4;background:#FEFCF9}
.art .tw table{border-collapse:collapse;width:100%;min-width:640px;font-size:14.5px}
.art .tw th,.art .tw td{padding:12px 15px;text-align:left;border-bottom:1px solid #EDE3D8;
  vertical-align:top;line-height:1.7}
.art .tw thead th{background:#F5EDE4;font:700 11px/1.5 var(--mono);letter-spacing:.16em;
  color:var(--ink3);white-space:nowrap;border-bottom:1.5px solid var(--ink)}

/* ── FAQ ────────────────────────────────────────────── */
.faq{border:1px solid #DFD2C4;background:#FEFCF9;margin:0 0 26px}
.faq details{border-bottom:1px solid #EDE3D8}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:18px 20px;font:700 16px/1.6 var(--sans);
  list-style:none;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";margin-left:auto;color:var(--brand);font-weight:800;flex:0 0 auto}
.faq details[open] summary{background:#F5EDE4}
.faq details[open] summary::after{content:"－"}
.faq .ans{padding:4px 20px 22px;font-size:15.5px;color:#3D342E;background:#F5EDE4}
.faq .ans p{margin:0 0 13px}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans ol{margin:0 0 13px;padding-left:1.35em}
.faq .ans li{margin:0 0 7px}

/* ── 새로 쓰는 글(content/articles/*.md)이 쓰는 요소 ──────────
   一句話結論 = 글 맨 위의 답. 사람도 여기서 읽고 끝낼 수 있어야 하고,
   AI 답변이 인용해 가는 것도 대개 이 한 덩어리다. 그래서 맨 위·눈에 띄게. */
.lede{border-left:3px solid var(--brand);background:#FBF1EA;
  padding:18px 22px;margin:0 0 30px}
.lede b{display:block;font:700 11px/1 var(--mono);letter-spacing:.18em;
  color:var(--brand);margin:0 0 9px}
.lede p{margin:0;font:400 18px/1.75 var(--serif);color:var(--ink)}

.toc{border:1px solid #DFD2C4;background:#FEFCF9;padding:18px 24px;margin:0 0 34px}
.toch{font:700 11px/1 var(--mono);letter-spacing:.16em;color:var(--ink3);margin:0 0 12px}
.toc ol{margin:0;padding-left:1.3em}
.toc li{margin:0 0 7px;font-size:15px}
.toc a{color:var(--ink2);text-decoration:none}
.toc a:hover{color:var(--brand);text-decoration:underline}

.art blockquote{margin:0 0 24px;padding:2px 0 2px 20px;border-left:2px solid var(--line2)}
.art blockquote p{margin:0;color:var(--ink2);font:400 17px/1.85 var(--serif)}
.art figcaption{margin:10px 0 0;text-align:center;font-size:13.5px;color:var(--ink3)}
.art code{font:400 .92em/1 var(--mono);background:#F5EDE4;padding:2px 6px;border-radius:4px}
.art hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.pdate .upd{color:var(--ink3)}

/* ── 하단 CTA ───────────────────────────────────────── */
.end{border-top:2px solid var(--ink);padding:86px 0 104px;text-align:center;margin-top:0}
.end p{font:400 clamp(20px,5vw,38px)/1.5 var(--serif);margin:0 0 40px}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;
  padding:19px 50px;font:700 16px/1 var(--sans);letter-spacing:.06em}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}

/* ── 푸터 ───────────────────────────────────────────── */
.foot{border-top:1px solid var(--line2);padding:40px 0 56px;
  display:grid;gap:28px;grid-template-columns:1.4fr 1fr 1.5fr;
  font:400 12.5px/1.95 var(--mono);color:var(--ink3)}
.foot a{color:var(--ink2);text-decoration:none}
.foot a:hover{color:var(--brand)}
.foot .fh{font:700 10.5px/1 var(--mono);letter-spacing:.2em;color:var(--brand);
  margin:0 0 14px;text-transform:uppercase}
.foot p{margin:0 0 6px}
.cp{border-top:1px solid var(--line);padding:18px 0 40px;
  font:400 11.5px/1.8 var(--mono);color:#A29386}

@media(max-width:820px){
  body{font-size:15.5px}
  .w{padding:0 22px}
  .nav{gap:10px 18px;font-size:12.5px;padding-top:24px}
  .nav b{font-size:14px;letter-spacing:.1em}
  .nav a.cta{padding:7px 13px}
  .hero{padding:58px 0 50px}
  .hero .sub{font-size:16.5px;margin-top:26px}
  .hero .meta{margin-top:34px;gap:14px 22px;font-size:11.5px}
  .hv{margin-top:34px;aspect-ratio:16/9}
  .sec{padding:50px 0}
  .lab{margin-bottom:24px}
  .sec h2{margin-bottom:28px}
  .pull li,.arts a,.plist a,.ncard{grid-template-columns:1fr;gap:12px}
  .pull li{padding:28px 0}
  .doc th,.doc td{padding:13px 15px;font-size:14.5px}
  /* 모바일은 가로 스크롤 대신 행을 카드로 접는다 — 표를 옆으로 미는 사람은 없다 */
  .scroll{overflow:visible}
  .scroll table{min-width:0}
  .scroll thead{display:none}
  .scroll tr{display:block;border-bottom:1px solid var(--line2);padding:20px 16px}
  .scroll tr:last-child{border-bottom:0}
  .scroll td{display:block;border:0;padding:0 0 14px}
  .scroll td:last-child{padding-bottom:0}
  .scroll td[data-l]:before{content:attr(data-l);display:block;
    font:700 10px/1 var(--mono);letter-spacing:.2em;color:#B0A08F;margin-bottom:7px}
  .scroll td.n{width:auto;color:var(--brand)}
  .wall{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:5px}
  .end{padding:56px 0 68px}
  .foot{grid-template-columns:1fr;gap:22px}
}

/* ── 로고 워드마크 ──────────────────────────────────── */
.nav .lg{display:inline-flex;align-items:center;margin-right:auto;line-height:0}
.nav .lg img{height:34px;width:auto;display:block}
.nav .lg:hover{opacity:.72}

/* ── 陪同翻譯 ─────────────────────────────────────────── */
.glab{font:700 12.5px/1 var(--mono);letter-spacing:.16em;color:var(--ink3);
  margin:34px 0 12px;padding-left:2px}
.glab:first-of-type{margin-top:0}
.doc td .ex{display:block;margin-top:7px;font-size:13.5px;line-height:1.75;color:var(--ink3)}
.doc td .ex:before{content:"▸ ";color:#C6B39F}

.pfs{display:grid;grid-template-columns:1fr 1fr;gap:40px 46px}
.pf{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start}
.pf img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;display:block;
  background:#EFE6DB}
.pf .nm{margin:0 0 10px;font:400 23px/1.3 var(--serif)}
.pf .nm span{display:block;margin-top:6px;font:600 11.5px/1 var(--mono);
  letter-spacing:.16em;color:var(--brand)}
.pf .bio{margin:0 0 14px;font-size:14.5px;line-height:1.85;color:#3D342E}
.pf .tags{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.pf .tags span{font:600 12px/1.7 var(--mono);color:var(--ink3);
  border:1px solid var(--line2);border-radius:99px;padding:2px 10px}

.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;margin:24px 0 0}
.faces figure{margin:0;display:flex;align-items:center;gap:15px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.faces img{flex:0 0 auto;width:62px;height:62px;border-radius:50%;display:block;
  object-fit:cover;object-position:center 20%;background:#EFE6DB}
.faces figcaption{font:600 13px/1.5 var(--mono);color:var(--ink2);letter-spacing:.04em}

/* ── 브랜드 스토리 ──────────────────────────────────── */
.art .vow{margin:0 0 22px;padding-left:14px;border-left:2px solid var(--brand);
  font-size:15.5px;color:var(--brand-d)}

@media(max-width:1000px){.faces{grid-template-columns:repeat(2,1fr);gap:0 24px}}
@media(max-width:820px){
  .nav .lg img{height:28px}
  .pf .nm{font-size:20px}
  .pf .bio{font-size:14.5px}
  .faces{grid-template-columns:repeat(2,1fr);gap:0 16px}
  .faces img{width:52px;height:52px}
  .faces figcaption{font-size:12px}
  .pfs{grid-template-columns:1fr;gap:26px}
  .pf{grid-template-columns:110px 1fr;gap:16px}
}

/* 정책 문서 상·하단 브랜드 마크 (구 codime 로고 자리) */
.art figure.brandmark{margin:0 0 34px}
.art figure.brandmark img{width:132px;height:auto;border-radius:0;margin:0}

/* 모션 최소화 설정을 켠 사용자에겐 영상 대신 포스터(.hv 배경)만 보여준다 */
@media(prefers-reduced-motion:reduce){
  .hv video{display:none}
}