/* 서드플랜(THIRD PLAN) — 정적 사이트 공용 CSS · 2026-09-27 · build.py 가 dist/style.css 로 복사한다 */
:root{
  --ink:#111418; --ink2:#2B3038; --muted:#5F6673; --line:#E4E1D9; --paper:#F7F6F2; --white:#FFFFFF;
  --accent:#3355FF; --accent2:#1F3BD6; --accent-soft:#EDF0FF;
  --dark:#0E1116; --dark2:#171B22; --on-dark:#F3F1EB; --on-dark2:#AAB1BD; --on-dark-accent:#C9D2FF;
  --radius:14px; --maxw:1120px; --textw:760px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  font-size:17px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
a{color:var(--accent2)}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 12px;z-index:10}

/* 시안 띠 · 결정 대기 표시 (indexable=false 일 때만 빌드에 들어간다) */
.draftbar{background:#FFE08A;color:#3A2E00;font-size:13px;line-height:1.5;text-align:center;padding:7px 16px;font-weight:600}
.draft-note{background:#FFF6D6;border:1px dashed #D9B200;color:#5A4600;border-radius:8px;padding:10px 14px;font-size:14px;line-height:1.6;margin:0 0 18px}
.draft-note b{font-weight:800}

/* 머리 */
.site-header{background:var(--dark);color:var(--on-dark);border-bottom:1px solid rgba(255,255,255,.08)}
.site-header .in{max-width:var(--maxw);margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;color:var(--on-dark);text-decoration:none;white-space:nowrap}
.brand b{font-size:21px;font-weight:800;letter-spacing:-.02em}
.brand span{font-size:11px;letter-spacing:.22em;color:var(--on-dark2);font-weight:600}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;font-size:15px}
.nav a{color:var(--on-dark2);text-decoration:none;padding:4px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-dark)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
.nav a.lang{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:2px 10px;font-size:12px;letter-spacing:.08em;color:var(--on-dark)}

/* 홈 첫 화면 */
.hero{background:var(--dark);color:var(--on-dark);position:relative;overflow:hidden}
.hero .in{max-width:var(--maxw);margin:0 auto;padding:92px 20px 100px;position:relative;z-index:1}
.eyebrow{font-size:13px;letter-spacing:.18em;color:var(--on-dark2);text-transform:uppercase;margin:0 0 18px;font-weight:600}
.hero h1{font-size:clamp(34px,5.6vw,62px);line-height:1.16;letter-spacing:-.03em;margin:0 0 20px;font-weight:800;max-width:14em}
.hero .sub{font-size:clamp(19px,2.4vw,25px);color:var(--on-dark-accent);margin:0 0 22px;font-weight:600;line-height:1.5}
.hero .lead{font-size:17px;color:var(--on-dark2);max-width:38em;margin:0 0 34px}
.hero-mark{position:absolute;right:-1%;bottom:-22%;font-size:clamp(240px,36vw,520px);line-height:1;font-weight:900;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.14);z-index:0;user-select:none;pointer-events:none;letter-spacing:-.04em}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:12px 20px;border-radius:10px;font-weight:700;text-decoration:none;font-size:15px;line-height:1.4}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent2)}
.btn.ghost{border:1px solid rgba(255,255,255,.32);color:var(--on-dark)}
.btn.line{border:1px solid var(--ink);color:var(--ink)}

/* 하위 페이지 머리 */
.phero{background:var(--dark);color:var(--on-dark)}
.phero .in{max-width:var(--maxw);margin:0 auto;padding:60px 20px 64px}
.crumb{font-size:13px;color:var(--on-dark2);margin:0 0 16px}
.crumb a{color:var(--on-dark2);text-decoration:none}
.crumb a:hover{color:var(--on-dark)}
.phero h1{font-size:clamp(32px,4.8vw,52px);line-height:1.2;letter-spacing:-.03em;margin:0 0 14px;font-weight:800}
.phero .sub{font-size:clamp(17px,2.2vw,22px);color:var(--on-dark-accent);margin:0 0 16px;font-weight:600;line-height:1.5}
.phero .lead{color:var(--on-dark2);max-width:40em;margin:0}

/* 본문 절 */
.sec{padding:84px 20px;border-top:1px solid var(--line)}
.sec.alt{background:var(--white)}
.sec .in{max-width:var(--maxw);margin:0 auto}
.sec .in.narrow{max-width:var(--textw)}
.sec h2{font-size:clamp(25px,3.3vw,36px);letter-spacing:-.02em;line-height:1.32;margin:0 0 14px;font-weight:800}
.sec h3{letter-spacing:-.01em}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent2);text-transform:uppercase;margin:0 0 10px;font-weight:700}
.intro{color:var(--muted);max-width:var(--textw);margin:0 0 34px}
.prose p{max-width:var(--textw);margin:0 0 16px;color:var(--ink2)}
.after{max-width:var(--textw);margin:28px 0 0;font-weight:600}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:block;color:inherit;text-decoration:none}
.sec.alt .card{background:var(--paper)}
a.card:hover{border-color:var(--accent)}
.card h3{font-size:20px;margin:6px 0 10px;line-height:1.4}
.card p{margin:0 0 10px;color:var(--ink2)}
.card .num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted);margin:0}
.card .basis{font-size:14px;color:var(--muted);margin:14px 0 0;border-top:1px dashed var(--line);padding-top:12px}
.card.hl{border:2px solid var(--accent);background:var(--accent-soft)}
.sec.alt .card.hl{background:var(--accent-soft)}
.card.hl .num{color:var(--accent2)}
.card .more{display:inline-block;margin-top:12px;font-weight:700;color:var(--accent2)}
.closing{max-width:var(--textw);margin:26px 0 0;font-size:18px;font-weight:700}

/* 절차 */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;counter-reset:none}
.steps li{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 22px 18px}
.sec.alt .steps li{background:var(--paper)}
.steps .n{font-family:var(--mono);font-size:13px;color:var(--accent2);font-weight:700}
.steps h3{font-size:18px;margin:4px 0 6px;line-height:1.45}
.steps p{margin:0;color:var(--ink2);font-size:16px}

/* 원문 인용 */
.quotes{display:grid;gap:16px}
.quote{margin:0;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:22px 24px}
.sec.alt .quote{background:var(--paper)}
.quote blockquote{margin:0 0 12px;font-size:16px;line-height:1.7;color:var(--ink);font-style:italic}
.quote .ko{margin:0 0 12px;color:var(--ink2)}
.quote figcaption{font-size:13px;color:var(--muted);line-height:1.6}
.quote figcaption a{color:var(--accent2)}

/* 표 */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:15.5px;line-height:1.6}
.sec.alt .tbl{background:var(--paper)}
.tbl th,.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl th{background:#EFEDE7;font-weight:700;font-size:14px;color:var(--ink2)}
.tbl td:first-child{font-weight:700}

/* 칼럼 목록 · 빈 상태 */
.empty{border:1px dashed #CFCBC0;border-radius:12px;padding:26px 24px;color:var(--muted);background:var(--white)}
.sec.alt .empty{background:var(--paper)}
.empty a{font-weight:700}
.posts{list-style:none;margin:0;padding:0;display:grid;gap:12px}

/* 문의 · 다른 서비스 */
.cta{background:var(--dark);color:var(--on-dark);border-top:0}
.cta h2{color:var(--on-dark)}
.cta .intro{color:var(--on-dark2)}
.cta .draft-note{max-width:var(--textw)}
.links{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0;padding:0;list-style:none}
.links a{font-weight:700;text-decoration:none}

/* 꼬리 */
.site-footer{background:var(--dark2);color:var(--on-dark2);padding:44px 20px 40px;font-size:14px;line-height:1.7}
.site-footer .in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 32px}
.site-footer .fb b{color:var(--on-dark);font-size:17px;font-weight:800;letter-spacing:-.01em}
.site-footer .fb p{margin:4px 0 0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.site-footer a{color:var(--on-dark2);text-decoration:none}
.site-footer a:hover{color:var(--on-dark)}
.site-footer .copy{flex-basis:100%;margin:10px 0 0;font-size:12px;color:#7D8490}

/* 좁은 화면 */
@media (max-width:900px){
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .site-header .in{padding:12px 16px}
  .nav{flex-basis:100%;gap:2px 14px;font-size:14px}
  .hero .in{padding:56px 16px 68px}
  .hero-mark{bottom:-8%;right:-6%;font-size:62vw;-webkit-text-stroke:1px rgba(255,255,255,.10)}
  .phero .in{padding:40px 16px 44px}
  .sec{padding:56px 16px}
  .card{padding:22px 20px}
  .quote{padding:18px 18px}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border-bottom:1px solid var(--line);padding:10px 0}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{border:0;padding:3px 16px}
  .tbl td::before{content:attr(data-label);display:block;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em}
  .site-footer{padding:36px 16px}
}

/* 칼럼 글 한 편 (/column/{slug}/) */
.post h2{font-size:clamp(21px,2.6vw,26px);margin:40px 0 12px;line-height:1.4}
.post h3{font-size:19px;margin:28px 0 8px}
.post p{margin:0 0 16px;color:var(--ink2)}
.post ul,.post ol{padding-left:1.3em;margin:0 0 16px;color:var(--ink2)}
.post li{margin:4px 0}
.post .tbl{margin:8px 0 20px}
.post blockquote{margin:0 0 16px;padding:14px 18px;border-left:4px solid var(--accent);background:var(--white);border-radius:8px;color:var(--ink)}
.src-list{font-size:14px;color:var(--muted)}
.src-list a{overflow-wrap:anywhere}