@charset "utf-8";
/* ============================================================
   LINKHUB — 공통 스타일시트
   디자인 토큰 근거 : _스펙_co3_kakaocorp.md (kakaocorp.com 실측 2026-08-09)
   주조색 #FAE100 / 버튼 radius 6px / 카드 24px / 컨테이너 1296px
   ============================================================ */

:root{
  --brand:#FAE100;          /* 브랜드 옐로 (원본 .btn_download 배경) */
  --brand-cta:#FEE500;      /* 주 CTA 배경 (원본 .btn_submit 배경) */
  --brand-ink:#111111;      /* 옐로 위 글자 — 대비 16.1:1 */
  --ink:#111111;
  --ink-2:#333333;
  --text:#3A3A3A;           /* 본문 (원본 #333 계열, 대비 10.7:1) */
  --muted:#666666;          /* 보조 (대비 5.7:1) */
  --caption:#5E5E5E;        /* 캡션 (원본 #888 은 3.5:1 이라 상향) */
  --line:#E5E5E5;
  --line-2:#EEEEEE;
  --bg:#FFFFFF;
  --bg-2:#F9F9F9;
  --bg-3:#F3F3F3;
  --link:#2439DF;           /* 원본 링크색 */
  --danger:#FF0919;
  --dark:#111111;

  --wrap:1296px;            /* 원본 본문 컨테이너 실측 */
  --wrap-wide:1712px;       /* 원본 와이드 레일 */
  --wrap-text:808px;        /* 원본 --wrap-tit-width */
  --gut:24px;

  --r-btn:6px;              /* 원본 .btn_submit */
  --r-card:24px;            /* 원본 최다 선언 */
  --r-img:12px;
  --r-pill:36px;            /* 원본 .btn_download */

  --pad-sec:120px;          /* 원본 섹션 패딩 최빈 */
  --pad-sec-lg:160px;
  --ease:cubic-bezier(.54,.01,.47,1);
  --header-h:72px;          /* 원본 .layer_head height */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.75; letter-spacing:-.5px;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--link); outline-offset:2px; border-radius:2px;
}
h1,h2,h3,h4,h5{margin:0; font-weight:700; color:var(--ink); letter-spacing:-1px; line-height:1.28}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
.wrap-wide{width:100%; max-width:var(--wrap-wide); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
.skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--brand-cta); color:var(--brand-ink); padding:12px 20px; font-weight:700}
.skip:focus{left:12px; top:12px}

/* ---------- 헤더 ---------- */
.hd{position:sticky; top:0; z-index:200; background:rgba(255,255,255,.94); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line-2)}
.hd-in{display:flex; align-items:center; gap:32px; height:var(--header-h); max-width:var(--wrap-wide); margin:0 auto; padding:0 var(--gut)}
.logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:19px; color:var(--ink); letter-spacing:-.8px; flex:0 0 auto}
.logo .mark{width:26px; height:26px; flex:0 0 auto}
.gnb{display:flex; gap:6px; flex:1 1 auto}
.gnb > li > a{display:block; padding:0 16px; line-height:var(--header-h); font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.6px; position:relative}
.gnb > li > a::after{content:""; position:absolute; left:16px; right:16px; bottom:0; height:3px; background:var(--brand); transform:scaleX(0); transition:transform .3s var(--ease)}
.gnb > li > a:hover::after,.gnb > li.on > a::after{transform:scaleX(1)}
.hd-util{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.btn-mini{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; color:var(--ink); font-size:14px; font-weight:700; letter-spacing:-.4px}
.btn-mini:hover{background:var(--bg-3)}
.btn-mini.pri{background:var(--brand-cta); border-color:var(--brand-cta); color:var(--brand-ink)}
.btn-mini.pri:hover{background:var(--brand)}
.nav-toggle{display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:#fff; align-items:center; justify-content:center; cursor:pointer}

/* 드로어 */
.drawer{display:none; border-top:1px solid var(--line-2); background:#fff; padding:16px var(--gut) 28px}
.drawer.open{display:block}
.drawer h3{font-size:13px; color:var(--caption); letter-spacing:0; margin:16px 0 6px; font-weight:700}
.drawer a{display:block; padding:7px 0; font-size:15px; color:var(--ink-2); font-weight:500}
.drawer a:hover{color:var(--link)}
.drawer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0 24px; max-width:var(--wrap-wide); margin:0 auto}

/* ---------- 히어로 ---------- */
.hero{position:relative; background:var(--dark); color:#fff; overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.44}
.hero-in{position:relative; max-width:var(--wrap); margin:0 auto; padding:120px var(--gut) 108px}
.hero h1{color:#fff; font-size:60px; line-height:70px; letter-spacing:-2px}
.hero .lead{margin-top:24px; max-width:var(--wrap-text); font-size:19px; line-height:1.72; color:rgba(255,255,255,.9); letter-spacing:-.6px}
.crumb{display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:rgba(255,255,255,.72); letter-spacing:-.2px; margin-bottom:22px}
.crumb li+li::before{content:"›"; margin-right:8px; opacity:.6}
.hero.plain{background:var(--bg-2); color:var(--ink)}
.hero.plain h1{color:var(--ink)}
.hero.plain .lead{color:var(--text)}
.hero.plain .crumb{color:var(--caption)}

/* 홈 히어로 */
.hero-home .hero-in{padding:168px var(--gut) 150px}
.hero-home h1{font-size:70px; line-height:1.14; letter-spacing:-2px}
.hero-home .kicker{display:inline-block; padding:7px 18px; border-radius:var(--r-pill); background:var(--brand-cta); color:var(--brand-ink); font-size:14px; font-weight:700; letter-spacing:-.4px; margin-bottom:24px}

/* ---------- 섹션 ---------- */
.sec{padding:var(--pad-sec) 0; border-top:1px solid var(--line-2)}
.sec:first-of-type{border-top:0}
.sec.alt{background:var(--bg-2)}
.sec.dark{background:var(--dark); color:rgba(255,255,255,.86); border-top:0}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec-head{margin-bottom:48px; max-width:var(--wrap-text)}
.sec-head h2{font-size:40px; letter-spacing:-1.6px; line-height:1.3}
.sec-head .sub{margin-top:16px; font-size:17px; color:var(--muted); line-height:1.78}
.sec.dark .sec-head .sub{color:rgba(255,255,255,.72)}
.eyebrow{display:block; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--muted); margin-bottom:12px; text-transform:uppercase}
.sec.dark .eyebrow{color:var(--brand)}
.prose p{margin:0 0 18px; font-size:17px; line-height:1.85; color:var(--text)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink); font-weight:700}

/* 어두운 섹션 안의 모든 텍스트 — WCAG AA 이상 확보 */
.sec.dark .prose p,
.sec.dark .blist li,
.sec.dark .tl-item li,
.sec.dark .step p,
.sec.dark .faq .a,
.sec.dark .form-note{color:rgba(255,255,255,.84)}
.sec.dark .prose strong,
.sec.dark .blist li b,
.sec.dark .quote,
.sec.dark .faq summary,
.sec.dark .tl-item .y{color:#fff}
.sec.dark .blist li{border-bottom-color:rgba(255,255,255,.16)}
.sec.dark .blist li::before{background:var(--brand); border-color:var(--brand)}
.sec.dark .step{background:#1B1B1B; border-color:#2C2C2C}
.sec.dark .step h3{color:#fff}
.sec.dark .badge{background:transparent; border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.9)}
.sec.dark .tbl-scroll{border-color:rgba(255,255,255,.2)}
.sec.dark .tbl{background:#1B1B1B}
.sec.dark .tbl caption{background:#202020; color:rgba(255,255,255,.78); border-bottom-color:rgba(255,255,255,.2)}
.sec.dark .tbl thead th{background:#252525; color:#fff}
.sec.dark .tbl th,.sec.dark .tbl td{color:rgba(255,255,255,.86); border-bottom-color:rgba(255,255,255,.14)}
.sec.dark .tbl tbody th{color:#fff}
.sec.dark .tbl tbody tr:hover{background:#202020}
.sec.dark .posts{border-top-color:rgba(255,255,255,.55)}
.sec.dark .post{border-bottom-color:rgba(255,255,255,.14)}
.sec.dark .post .cat{background:#2A2A2A; color:#fff}
.sec.dark .post p{color:rgba(255,255,255,.72)}
.sec.dark .post .d{color:rgba(255,255,255,.68)}
.sec.dark .faq{border-top-color:rgba(255,255,255,.55)}
.sec.dark .faq details{border-bottom-color:rgba(255,255,255,.16)}
.sec.dark .faq summary::after{border-color:var(--brand)}
.sec.dark .figure figcaption{color:rgba(255,255,255,.72)}
.sec.dark .tl::before{background:rgba(255,255,255,.22)}
.sec.dark .tl-item::before{border-color:#111}
.sec.dark .sign{color:rgba(255,255,255,.78)}
.sec.dark .sign b{color:#fff}
.sec.dark .icard{background:#1B1B1B; border-color:#2C2C2C}
.sec.dark .icard h3{color:#fff}
.sec.dark .icard p{color:rgba(255,255,255,.72)}
.sec.dark .card .tag{background:#2A2A2A; color:#fff}

/* ---------- 카드 ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:36px 32px; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.08)}
.sec.alt .card{background:#fff}
.sec.dark .card{background:#1B1B1B; border-color:#2C2C2C}
.card .ico{width:40px; height:40px; margin-bottom:20px; color:var(--ink)}
.sec.dark .card .ico{color:var(--brand)}
.card h3{font-size:21px; letter-spacing:-.8px; margin-bottom:12px}
.card p{font-size:15px; line-height:1.78; color:var(--muted)}
.sec.dark .card p{color:rgba(255,255,255,.68)}
.card .tag{display:inline-block; margin-bottom:14px; padding:5px 14px; border-radius:var(--r-pill); background:var(--bg-3); font-size:12px; font-weight:700; color:var(--ink-2); letter-spacing:-.2px}

/* 이미지 카드 */
.icards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.icards.c2{grid-template-columns:repeat(2,1fr)}
.icard{border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); background:#fff}
.icard img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s var(--ease)}
.icard:hover img{transform:scale(1.04)}
.icard .bd{padding:26px 26px 30px}
.icard h3{font-size:19px; letter-spacing:-.7px; margin-bottom:10px}
.icard p{font-size:15px; color:var(--muted); line-height:1.75}

/* ---------- 지표 ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.stat{padding:34px 28px; border-radius:var(--r-card); background:var(--bg-2); border:1px solid var(--line-2)}
.sec.dark .stat{background:#1B1B1B; border-color:#2C2C2C}
.stat .n{display:block; font-size:48px; font-weight:700; color:var(--ink); letter-spacing:-2px; line-height:1.1}
.sec.dark .stat .n{color:var(--brand)}
.stat .n .u{font-size:20px; letter-spacing:-.6px; margin-left:4px}
.stat .l{display:block; margin-top:10px; font-size:15px; color:var(--muted)}
.sec.dark .stat .l{color:rgba(255,255,255,.7)}

/* ---------- 표 ---------- */
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-img); border:1px solid var(--line)}
.tbl{min-width:640px; font-size:15px}
.tbl caption{text-align:left; padding:16px 20px; font-size:14px; color:var(--muted); background:var(--bg-2); border-bottom:1px solid var(--line)}
.tbl th,.tbl td{padding:15px 20px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top; line-height:1.7}
.tbl thead th{background:var(--bg-2); color:var(--ink); font-weight:700; white-space:nowrap; letter-spacing:-.3px}
.tbl tbody th{font-weight:700; color:var(--ink-2); white-space:nowrap}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#FCFCFC}

/* ---------- 목록 ---------- */
.blist li{position:relative; padding:14px 0 14px 26px; border-bottom:1px solid var(--line-2); font-size:16px; line-height:1.8; color:var(--text)}
.blist li::before{content:""; position:absolute; left:2px; top:26px; width:9px; height:9px; border-radius:50%; background:var(--brand); border:1px solid #E0C800}
.blist li:last-child{border-bottom:0}
.blist li b{color:var(--ink)}

/* ---------- 단계 ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:st}
.steps.s3{grid-template-columns:repeat(3,1fr)}
.steps.s5{grid-template-columns:repeat(5,1fr)}
.step{position:relative; padding:32px 26px; border-radius:var(--r-card); border:1px solid var(--line); background:#fff; counter-increment:st}
.step::before{content:counter(st,decimal-leading-zero); display:block; font-size:14px; font-weight:700; color:var(--ink); background:var(--brand-cta); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:18px; letter-spacing:0}
.step h3{font-size:18px; margin-bottom:9px; letter-spacing:-.6px}
.step p{font-size:14px; color:var(--muted); line-height:1.75}

/* ---------- 타임라인 ---------- */
.tl{position:relative; padding-left:34px}
.tl::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-item{position:relative; padding:0 0 40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:-31px; top:8px; width:18px; height:18px; border-radius:50%; background:var(--brand); border:3px solid #fff; box-shadow:0 0 0 1px var(--line)}
.tl-item .y{display:block; font-size:26px; font-weight:700; color:var(--ink); letter-spacing:-1px; margin-bottom:10px}
.tl-item li{position:relative; padding:5px 0 5px 15px; font-size:16px; color:var(--text); line-height:1.75}
.tl-item li::before{content:""; position:absolute; left:0; top:16px; width:5px; height:5px; border-radius:50%; background:#BBB}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex; gap:14px; align-items:flex-start; padding:22px 44px 22px 0; font-size:17px; font-weight:700; color:var(--ink); cursor:pointer; position:relative; letter-spacing:-.5px; line-height:1.6; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:31px; width:11px; height:11px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg); transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary .q{flex:0 0 auto; color:#B79C00; font-weight:700}
.faq .a{padding:0 0 26px 30px; font-size:16px; color:var(--text); line-height:1.85}

/* ---------- 2단 ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split.rev > *:first-child{order:2}
.split img{border-radius:var(--r-card); width:100%; aspect-ratio:4/3; object-fit:cover}
.figure{margin:0}
.figure figcaption{margin-top:12px; font-size:14px; color:var(--caption); letter-spacing:-.2px}

/* ---------- 인용 ---------- */
.quote{border-left:4px solid var(--brand); padding:6px 0 6px 28px; font-size:22px; line-height:1.65; color:var(--ink); font-weight:700; letter-spacing:-1px}
.sign{margin-top:26px; font-size:16px; color:var(--muted)}
.sign b{color:var(--ink); font-size:19px; letter-spacing:-.6px; margin-left:8px}

/* ---------- 게시판 ---------- */
.posts{border-top:2px solid var(--ink)}
.post{display:grid; grid-template-columns:110px 1fr 120px; gap:20px; align-items:center; padding:24px 8px; border-bottom:1px solid var(--line-2)}
.post .cat{font-size:13px; font-weight:700; color:var(--ink); background:var(--bg-3); border-radius:var(--r-pill); padding:5px 12px; text-align:center; letter-spacing:-.2px}
.post h3{font-size:18px; letter-spacing:-.6px; line-height:1.5}
.post p{font-size:14px; color:var(--muted); margin-top:6px; line-height:1.7}
.post .d{font-size:14px; color:var(--caption); text-align:right; white-space:nowrap}
.post:hover h3{color:var(--link)}

/* ---------- 코드 ---------- */
.codebox{background:#14161A; color:#E6E8EB; border-radius:var(--r-img); padding:22px 24px; overflow-x:auto; font-size:14px; line-height:1.85; font-family:"Cascadia Mono",Consolas,"D2Coding",Menlo,monospace; letter-spacing:0}
.codebox .cm{color:#8A94A6}
.codebox .kw{color:#FFD84D}
.codebox .st{color:#7FD1B9}

/* ---------- CTA 밴드 ---------- */
.band{background:var(--brand-cta); padding:72px 0}
.band .in{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.band h2{font-size:32px; letter-spacing:-1.4px; color:var(--brand-ink)}
.band p{margin-top:10px; font-size:16px; color:#4A4200}
.btn{display:inline-flex; align-items:center; gap:9px; height:56px; padding:0 30px; border-radius:var(--r-btn); background:var(--ink); color:#fff; font-size:16px; font-weight:700; letter-spacing:-.4px; border:1px solid var(--ink); cursor:pointer; transition:opacity .2s var(--ease)}
.btn:hover{opacity:.86}
.btn.line{background:#fff; color:var(--ink)}
.btn.brand{background:var(--brand-cta); color:var(--brand-ink); border-color:#E8CF00}

/* ---------- 폼 ---------- */
.form{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.fld{display:flex; flex-direction:column; gap:8px}
.fld.full{grid-column:1/-1}
.fld label{font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.3px}
.fld input,.fld select,.fld textarea{height:52px; padding:0 16px; border:1px solid var(--line); border-radius:8px; font-size:15px; font-family:inherit; color:var(--ink); background:#fff}
.fld textarea{height:160px; padding:14px 16px; line-height:1.7; resize:vertical}
.req{color:var(--danger); margin-left:4px}
.form-note{grid-column:1/-1; font-size:14px; color:var(--caption); line-height:1.8}

/* ---------- 푸터 ---------- */
.ft{background:#141414; color:rgba(255,255,255,.62); padding:76px 0 42px; font-size:14px; letter-spacing:-.3px}
.ft-top{display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:40px; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.ft h3{font-size:14px; color:#fff; margin-bottom:16px; letter-spacing:-.3px}
.ft a{color:rgba(255,255,255,.62)}
.ft a:hover{color:var(--brand)}
.ft li{padding:5px 0}
.ft-brand .logo{color:#fff; margin-bottom:18px}
.ft-brand p{font-size:14px; line-height:1.85}
.ft-bot{max-width:var(--wrap); margin:52px auto 0; padding:26px var(--gut) 0; border-top:1px solid #262626; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between}
.ft-legal{display:flex; flex-wrap:wrap; gap:8px 22px}
.ft-legal a{font-weight:700; color:rgba(255,255,255,.8)}
.ft-addr{font-size:13px; line-height:1.9; color:rgba(255,255,255,.5)}
.notice{margin-top:26px; padding:16px 20px; border:1px dashed #3A3A3A; border-radius:10px; font-size:13px; color:rgba(255,255,255,.72); line-height:1.8; max-width:var(--wrap); margin-left:auto; margin-right:auto}
.notice b{color:var(--brand)}

/* ---------- 사이트맵 ---------- */
.smap{display:grid; grid-template-columns:repeat(4,1fr); gap:36px 28px}
.smap h3{font-size:17px; padding-bottom:12px; border-bottom:2px solid var(--ink); margin-bottom:12px}
.smap a{display:block; padding:7px 0; font-size:15px; color:var(--text); border-bottom:1px solid var(--line-2)}
.smap a:hover{color:var(--link)}

/* ---------- 유틸 ---------- */
.mt40{margin-top:40px}
.mt56{margin-top:56px}
.center{text-align:center}
.sec-head.center{margin-left:auto; margin-right:auto}
.badge{display:inline-block; padding:5px 13px; border-radius:var(--r-pill); border:1px solid var(--line); font-size:13px; color:var(--ink-2); font-weight:700; margin:0 6px 6px 0; background:#fff}

/* ---------- 반응형 (원본 브레이크포인트 1439/1023/767/411) ---------- */
@media (max-width:1439px){
  :root{--wrap:1160px}
  .hero-home h1{font-size:60px}
}
@media (max-width:1023px){
  :root{--wrap:952px; --pad-sec:88px; --pad-sec-lg:104px}
  .gnb{display:none}
  .nav-toggle{display:flex}
  .hero h1{font-size:42px; line-height:1.22}
  .hero-home h1{font-size:46px}
  .hero-in{padding:80px var(--gut) 72px}
  .hero-home .hero-in{padding:104px var(--gut) 96px}
  .sec-head h2{font-size:32px}
  .cards,.icards,.stats,.steps,.steps.s5{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr; gap:32px}
  .split.rev > *:first-child{order:0}
  .ft-top{grid-template-columns:repeat(2,1fr); gap:32px}
  .drawer-grid{grid-template-columns:repeat(2,1fr)}
  .smap{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  :root{--gut:20px; --pad-sec:64px; --pad-sec-lg:76px; --r-card:18px}
  body{font-size:15px}
  .hd-in{gap:12px}
  .hd-util .btn-mini{display:none}   /* 좁은 화면에서는 전체메뉴 버튼만 남긴다 */
  .logo{font-size:17px}
  .hero h1{font-size:32px; letter-spacing:-1.2px}
  .hero-home h1{font-size:34px}
  .hero .lead{font-size:16px}
  .sec-head h2{font-size:26px; letter-spacing:-1px}
  .sec-head{margin-bottom:32px}
  .cards,.cards.c4,.icards,.stats,.steps,.steps.s3,.steps.s5,.form,.smap{grid-template-columns:1fr}
  .card{padding:28px 24px}
  .stat .n{font-size:38px}
  .post{grid-template-columns:1fr; gap:8px}
  .post .cat{justify-self:start}
  .post .d{text-align:left}
  .band{padding:52px 0}
  .band h2{font-size:24px}
  .ft-top{grid-template-columns:1fr}
  .drawer-grid{grid-template-columns:1fr}
  .quote{font-size:18px}
  .tl{padding-left:26px}
  .tl-item::before{left:-25px; width:14px; height:14px}
}
@media (max-width:411px){
  .hero h1{font-size:27px}
  .hero-home h1{font-size:29px}
  .btn{height:50px; padding:0 22px; font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ---------- 렌더러 보조 클래스 ---------- */
.split-h3{font-size:26px; margin-bottom:18px; letter-spacing:-1px}
.hero-btns{margin-top:36px; display:flex; gap:12px; flex-wrap:wrap}
.codecap{font-size:14px; color:var(--caption); margin-bottom:10px}
.note-line{margin-top:24px}
.sec.dark .split-h3{color:#fff}
.sec.dark .codecap,.sec.dark .note-line{color:rgba(255,255,255,.78)}
@media (max-width:767px){ .split-h3{font-size:21px} }


/* ===== 참고사 문법 v1 — 미래에셋 실측 (2026-08-16) =========================
   컨테이너 1200 · 히어로 72 : 섹션제목 38 : 본문 16 · 섹션패딩 100/110 · 라운드 8px
   주색 #04456F (hue 205 · 흰 배경 AA 통과) · 오버레이는 rgba(0,0,0,.55) 단색
   되돌리려면 이 블록만 지운다. */
:root{
  --pri:#04456F; --pri-d:#033556; --pri-soft:#EAF0F3; --acc:#04456F; --focus:#04456F;
  --cw:1200px; --gut:24px; --bd:#dddddd; --bg2:#F5F5F5;
  --r:8px; --r-btn:8px;
  --hero-scrim:rgba(0,0,0,.55);
  --h1-max:72px; --h2-max:38px;
}
.wrap{max-width:var(--cw);padding:0 var(--gut)}

/* LNB 탭바 */
.lnb{position:sticky;top:64px;z-index:50;background:#fff;border-bottom:1px solid #e5e5e5}
.lnb-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;
  gap:28px;height:56px;overflow-x:auto;scrollbar-width:none}
.lnb-in::-webkit-scrollbar{display:none}
.lnb .ttl{flex:0 0 auto;font-size:15px;font-weight:700;letter-spacing:-.02em;color:#111;
  padding-right:28px;border-right:1px solid #e5e5e5;white-space:nowrap}
.lnb a{flex:0 0 auto;display:inline-flex;align-items:center;height:56px;font-size:14px;
  font-weight:500;color:#666;white-space:nowrap;border-bottom:2px solid transparent}
.lnb a:hover{color:#111}
.lnb a.on{color:#111;font-weight:700;border-bottom-color:#111}

/* 히어로 : 다크 이미지 + 단색 오버레이 */
.phero.has-img,.hero{min-height:520px;display:flex;align-items:center}
.phero.has-img .wrap,.hero .wrap{padding-top:0;padding-bottom:0;width:100%}
.phero .wrap{padding-top:72px;padding-bottom:72px}
.phero h1,.hero h1{margin-top:16px;font-size:clamp(28px,3.2vw,72px);line-height:1.28;
  font-weight:700;letter-spacing:-.02em}
.phero .hlead,.hero .hlead{margin-top:14px;max-width:44em;font-size:clamp(16px,1.5vw,21px);
  line-height:1.55;font-weight:600;letter-spacing:-.02em}
.phero.has-img .hlead,.hero .hlead{color:rgba(255,255,255,.94)}

/* 섹션 리듬 */
.sec{padding:100px 0 110px}
.sec.alt{background:var(--bg2);padding:100px 0 110px}
.sec.tight{padding:72px 0 79px}
.sec+.sec{border-top:0}

/* 제목 2단계 */
h2{font-size:clamp(22px,2.4vw,38px);line-height:1.4;letter-spacing:-.02em}
.blk>h2,.prose>h2{padding-top:0}
.blk>h2::before,.prose>h2::before{display:none}
.eyebrow{margin:0 0 12px;font-size:18px;line-height:1.2;font-weight:700;letter-spacing:-.02em;
  text-transform:none;color:#111}
.phero .eyebrow,.hero .eyebrow,.sec.dark .eyebrow{color:#fff;opacity:.86;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase}
.lead{margin-top:16px;font-size:16px;line-height:1.8;color:#555}
.prose p{font-size:16px;line-height:1.85;color:#333}

/* 카드 */
.card,.lcard{border-radius:8px;border:1px solid var(--bd);background:#fff;padding:30px 28px}
.card:hover,.lcard:hover{border-color:#111}
.card h3{font-size:18px;line-height:1.2;letter-spacing:-.02em}
.card p{margin-top:12px;font-size:16px;line-height:1.75;color:#555}
.card .meta{margin-top:14px;padding-top:14px;font-size:13px;color:#6F7378}
.card .ic{border-radius:8px;width:50px;height:50px;margin-bottom:16px;background:var(--pri-soft)}
.cards{gap:20px;margin-top:34px}
.gal img,.split-i img,.card.pf .pfi img{border-radius:8px}
.tw{margin-top:30px}
.tw table{border-top:2px solid #111}
.pull{border-top:2px solid #111;padding-top:34px}
.stat .v{font-size:clamp(30px,3.2vw,44px);font-weight:700;color:var(--pri)}

/* 하단 CTA */
.cta{border-radius:0;padding:54px 56px;background:#262A2E}
.cta h2{font-size:clamp(20px,2vw,26px);line-height:1.6;font-weight:700}
.cta p{font-size:15px;line-height:1.8}

@media (max-width:1024px){
  .sec,.sec.alt{padding:60px 0 68px}
  .phero.has-img,.hero{min-height:360px}
  .cta{padding:38px 26px}
}
@media (max-width:720px){
  .sec,.sec.alt{padding:46px 0 52px}
  .lnb-in{gap:20px}.lnb .ttl{padding-right:20px}
}

/* ===== 참고사 문법 v2 — KCC(kccworld.co.kr) 서브 실측 · 2026-08-16 ==========
   실측 뷰포트 1440(body 1425) · 4쪽 교차확인
     about-kcc/company · esg/overview · about-kcc/greeting · materials/window/general
   컨테이너 : 내용폭 1296 · 좌우 여백 64 (.inner 1332 = 1296 + 18*2)
   타이포   : h1 68.4 / h2 45 / h3 28.8 / 본문 18 / 보조 14.4  (h1:본문 = 3.8배)
   서브히어로: «사진 없음» 흰 바탕 · 브레드크럼 우측정렬 · 제목 아래 전폭 사진띠 365px
              (esg/overview 실측 : location 108(pb72) → titleArea 208(mb126) → 띠 465 h365)
   리듬     : 블록 간격 144 · 문서 하단 180
   라운드   : 탭·밴드·본문대형이미지 0 · 카드/패널 30 · imgWrap 16
   패널     : bg #F7F7F7 · padding 36 · 테두리 없음
   ★서브 전용. 홈(.hero-home)은 팀A 담당이라 :not(.hero-home) 으로 전부 비켜간다.
   ★되돌리려면 이 블록만 지운다.
   ------------------------------------------------------------------------ */

/* ── ① 컨테이너 통일 : 내용 1296 · 좌우 64 ─────────────────────────────
   결함이었다 — 한 쪽 안에서 히어로 856 / 섹션 1200 / 밴드·푸터 1296 세 폭이 섞였다.
   KCC 는 헤더·본문·밴드·푸터가 전부 같은 1296 이다. */
:root{
  --cw:1344px; --wrap:1344px; --wrap-wide:1344px; --gut:24px;  /* 1344 − 24*2 = 1296 */
  --kcc-ink:#222222;      /* KCC 본문 먹 — 흰 배경 15.9:1 */
  --kcc-sub:#444444;      /*  보조       — 9.7:1 */
  --kcc-dim:#6E6E6E;      /*  흐림 : KCC 원본 #888(3.5:1) 은 미달 → 같은 무채색 명도만 낮춤 5.0:1 */
  --kcc-panel:#F7F7F7;
  --kcc-line:#DDDDDD;
  --r-card:30px;          /* KCC .item 실측 */
  --r-img:0px;            /* KCC 본문 대형 이미지 실측 */
}
@media (max-width:1439px){ :root{--cw:1200px; --wrap:1200px; --wrap-wide:1200px} }
@media (max-width:1023px){ :root{--cw:100%;   --wrap:100%;   --wrap-wide:100%} }
@media (max-width:767px){  :root{--gut:20px; --r-card:20px} }

/* ── ② 한국어 줄바꿈 · 모바일 넘침 방지 ────────────────────────────────
   기존 시트에 word-break 선언이 아예 없었다(어절 중간 끊김이 난다).
   ★모바일 1fr 은 min-content 에 밀려 넘치고 overflow-x:hidden 이 그걸 감춘다 → minmax(0,1fr) */
body,h1,h2,h3,h4,h5,p,li,td,th,summary,figcaption,dt,dd{word-break:keep-all; overflow-wrap:break-word}
.cards,.icards,.stats,.steps,.form,.smap,.split,.post,.ft-top,.drawer-grid{
  grid-template-columns:none}          /* 아래에서 다시 준다 — minmax(0,1fr) 로 */
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.icards{grid-template-columns:repeat(3,minmax(0,1fr))}
.icards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps.s5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.form{grid-template-columns:repeat(2,minmax(0,1fr))}
.smap{grid-template-columns:repeat(4,minmax(0,1fr))}
.post{grid-template-columns:110px minmax(0,1fr) 120px}
.ft-top{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}
.drawer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ── ③ LNB = KCC 탭바 문법 (높이 67 · 라운드 0 · 활성 #222 + 2px 밑줄) ──
   결함이었다 — sticky top:64 인데 헤더가 73 이라 스크롤 중 9px 이 헤더 밑으로 숨었다. */
.lnb{top:73px; border-bottom:1px solid var(--kcc-line)}
.lnb-in{max-width:var(--wrap); height:67px; gap:0; padding:0 var(--gut)}
.lnb .ttl{font-size:16px; font-weight:700; color:var(--kcc-ink); letter-spacing:-.02em;
  padding-right:24px; margin-right:24px; border-right:1px solid var(--kcc-line)}
.lnb a{height:67px; padding:0 20px; font-size:16px; font-weight:500; color:#666666;
  border-bottom:2px solid transparent; border-radius:0}
.lnb a:hover{color:var(--kcc-ink)}
.lnb a.on{color:var(--kcc-ink); font-weight:700; border-bottom-color:var(--kcc-ink)}

/* ── ④ 서브 히어로 = KCC 문법 ──────────────────────────────────────────
   바꾼 것 : 다크 사진 위 흰 글자  →  흰 바탕 검정 제목 + 아래 전폭 사진띠 365px
   ★사진 위에 글자가 하나도 안 올라가므로 오버레이 대비 문제 자체가 사라진다.
   ★기존 `.hero{min-height:520px;display:flex}` 가 .hero-in 을 856px 로 찌그러뜨렸다.
     같은-이상 특정도로 다시 쓴다. */
.hero:not(.hero-home){display:block; min-height:0; background:#fff; color:var(--kcc-ink);
  position:relative; overflow:hidden; padding-bottom:0}
.hero:not(.hero-home):has(.hero-bg){padding-bottom:365px}
.hero:not(.hero-home) .hero-bg{inset:auto 0 0 0; top:auto; height:365px; opacity:1}
.hero:not(.hero-home) .hero-in{position:relative; width:100%; max-width:var(--wrap);
  margin:0 auto; padding:16px var(--gut) 126px}
.hero:not(.hero-home) .crumb{justify-content:flex-end; margin:0 0 72px;
  font-size:16px; color:var(--kcc-dim); letter-spacing:-.01em}
.hero:not(.hero-home) .crumb li:last-child{color:var(--kcc-sub)}
.hero:not(.hero-home) h1{color:var(--kcc-ink); font-size:clamp(30px,4.75vw,68px);
  line-height:1.12; letter-spacing:-.5px}
.hero:not(.hero-home) .lead{margin-top:18px; max-width:var(--wrap-text);
  font-size:18px; line-height:1.72; color:var(--kcc-sub)}
.hero:not(.hero-home) .hero-btns{margin-top:30px}

/* ── ⑤ 타이포 사다리 : 68.4 / 45 / 28.8 / 18  (h1:본문 3.8배) ───────────
   결함이었다 — h1 46 : h2 40 = 1.15배. 제목 위계가 거의 없었다(KCC 1.52배). */
.sec-head{margin-bottom:40px}
.sec-head h2{font-size:clamp(24px,3.13vw,45px); line-height:1.16;
  letter-spacing:-.5px; color:var(--kcc-ink)}
.sec.dark .sec-head h2{color:#fff}
.sec-head .sub{margin-top:18px; font-size:18px; line-height:1.78; color:var(--kcc-sub)}
.split-h3{font-size:clamp(20px,2vw,28.8px); line-height:1.25; letter-spacing:-.5px}
.prose p{font-size:18px; line-height:1.85; color:#333333}
.blist li{font-size:17px}
.eyebrow{font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--kcc-dim); margin:0 0 14px}
.sec.dark .eyebrow{color:rgba(255,255,255,.8)}

/* ── ⑥ 섹션 리듬 : KCC 블록 간격 144 (기존 210 은 너무 성겼다) ──────────── */
.sec,.sec.alt,.sec.dark{padding:72px 0}
.sec.alt{background:var(--kcc-panel)}
.sec:first-of-type{padding-top:80px}

/* ── ⑦ 카드·패널 = KCC (#F7F7F7 · 라운드 30 · 패딩 36 · 테두리 없음) ────── */
.card{background:var(--kcc-panel); border:0; border-radius:var(--r-card); padding:36px}
.card:hover{background:#EFEFEF; transform:none; box-shadow:none}
.sec.alt .card{background:#fff}
.card h3{font-size:20px; line-height:1.3; letter-spacing:-.4px}
.card p{margin-top:12px; font-size:16px; line-height:1.75; color:#555555}
.icard{border:0; border-radius:var(--r-card); overflow:hidden; background:var(--kcc-panel)}
.sec.alt .icard{background:#fff}
.icard .bd{padding:28px 30px 32px}
.icard h3{font-size:20px; letter-spacing:-.4px}
.step{background:var(--kcc-panel); border:0; border-radius:var(--r-card); padding:36px 32px}
.sec.alt .step{background:#fff}
.stat{background:var(--kcc-panel); border:0; border-radius:var(--r-card); padding:36px 32px}
.sec.alt .stat{background:#fff}

/* 본문 대형 이미지는 KCC 실측 라운드 0 · 작은 이미지 래퍼만 16 */
.split img,.figure img{border-radius:0}
.icard img{border-radius:0}

/* ── ⑧ 컨트롤 라운드 = KCC 0 ─────────────────────────────────────────── */
.btn,.btn.line,.btn.brand,.btn-mini,.badge,.card .tag,.post .cat,.fld input,.fld select,
.fld textarea,.tbl-scroll{border-radius:0}
.btn{height:60px; padding:0 34px; font-size:17px}
.tbl-scroll{border:0}
.tbl{border-top:2px solid var(--kcc-ink)}
.tbl thead th{background:var(--kcc-panel)}
.sec.dark .tbl{border-top-color:#fff}

/* ── ⑨ 하단 CTA 밴드 = KCC visualText 비례 (제목 36 · 본문 21.6 · 라운드 0) ── */
.band{padding:84px 0}
.band h2{font-size:clamp(22px,2.5vw,36px); line-height:1.4; letter-spacing:-.8px}
.band p{margin-top:14px; font-size:18px}

/* ── ⑩ 반응형 ─────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .sec,.sec.alt,.sec.dark{padding:56px 0}
  .sec:first-of-type{padding-top:60px}
  .hero:not(.hero-home):has(.hero-bg){padding-bottom:240px}
  .hero:not(.hero-home) .hero-bg{height:240px}
  .hero:not(.hero-home) .hero-in{padding:14px var(--gut) 72px}
  .hero:not(.hero-home) .crumb{margin-bottom:40px}
  .lnb-in{height:56px}
  .lnb a,.lnb .ttl{height:56px}
  .cards,.icards,.stats,.steps,.steps.s5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
  .ft-top,.smap,.drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .sec,.sec.alt,.sec.dark{padding:44px 0}
  .sec:first-of-type{padding-top:48px}
  .hero:not(.hero-home):has(.hero-bg){padding-bottom:180px}
  .hero:not(.hero-home) .hero-bg{height:180px}
  .hero:not(.hero-home) .hero-in{padding:12px var(--gut) 52px}
  .hero:not(.hero-home) .crumb{margin-bottom:26px; font-size:14px}
  .hero:not(.hero-home) .lead{font-size:16px}
  .sec-head{margin-bottom:28px}
  .sec-head .sub,.prose p{font-size:16px}
  .cards,.cards.c4,.icards,.stats,.steps,.steps.s3,.steps.s5,.form,.smap,
  .ft-top,.drawer-grid{grid-template-columns:minmax(0,1fr)}
  .post{grid-template-columns:minmax(0,1fr)}
  .card,.step,.stat{padding:26px 22px}
  .band{padding:52px 0}
  .btn{height:52px; padding:0 24px; font-size:16px}
}

/* ── ⑧-1 KCC 문법 v2 보정 (같은 라운드에서 실측으로 잡은 두 건) ─────────
   ① .faq summary .q 가 #B79C00 = 흰 배경 2.70:1 (17px/700 은 4.5:1 필요).
      hue 51° 를 유지한 채 명도만 낮춘다 → #877200 = 4.73:1  (hue 50.7°)
   ② 첫 .sec 만 border-top 1px 이 남아 히어로 사진띠 바로 밑에 실선이 그였다.
      KCC 는 섹션 경계선이 없다. */
.faq summary .q{color:#877200}
.sec{border-top:0}