/* /news 페이지용 공통 스타일 (메인 index.html 스타일에서 가져옴: 기본, 헤더, 메뉴, 섹션 제목, 버튼, 칩, 푸터) */
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{
  --bg:#F7F8FA; --ink:#0B0D10; --ink-2:#5A6270; --line:#D9DDE3; --blue:#1436FF; --white:#FFFFFF; --ember:#FF7A2E; --hot-ink:#FFF4EA; --hot-2:#F3C7A8;
  --f-kr:"Malgun Gothic","맑은 고딕","Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --f-disp:"Bricolage Grotesque","Malgun Gothic","Noto Sans KR",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --hh:60px; color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-kr);-webkit-font-smoothing:antialiased;word-break:keep-all}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.num{font-variant-numeric:tabular-nums}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;height:var(--hh);background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo .sq{width:16px;height:16px;border:2px solid var(--blue);display:grid;place-items:center}
.logo .sq::after{content:"";width:6px;height:6px;background:var(--blue)}
.logo b{font-family:var(--f-disp);font-weight:800;font-size:21px;letter-spacing:-.03em}
.logo .mono{color:var(--ink-2);font-size:10px}
.burger{margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.burger span{display:block;width:24px;height:1.5px;background:var(--ink);box-shadow:0 7px 0 var(--ink)}
@media (max-width:560px){.logo .mono{display:none}}
.gnav{margin-left:auto;display:flex;align-items:stretch;height:100%}
.gnav a{display:flex;align-items:center;gap:8px;padding:0 18px;text-decoration:none;border-left:1px solid var(--line);color:var(--ink);white-space:nowrap;transition:background .15s,color .15s}
.gnav a:last-child{border-right:1px solid var(--line)}
.gnav a i{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--blue)}
.gnav a b{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;font-weight:500}
.gnav a span{font-size:13px;font-weight:700}
.gnav a:hover{background:var(--white)}
.gnav a[aria-current="true"]{background:var(--ink);color:var(--white)}
.gnav a[aria-current="true"] i{color:#7F95FF}
.top{gap:14px}
.top .burger{margin-left:0}
@media (min-width:1101px){.top .burger{display:none}.top{padding-right:0}}
@media (max-width:1100px){.gnav{display:none}.top .burger{margin-left:auto}}
@media (max-width:1280px) and (min-width:1101px){.gnav a span{display:none}}

.menu{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 18px) max(24px,env(safe-area-inset-right,0px)) 32px max(24px,env(safe-area-inset-left,0px))}
.menu[hidden]{display:none}
.menu-head{display:flex;justify-content:space-between;align-items:center}
.menu-x{width:44px;height:44px;border:1px solid var(--ink);background:transparent;font-size:20px;cursor:pointer;color:var(--ink)}
.menu ol{list-style:none;margin:auto 0;padding:0;display:flex;flex-direction:column}
.menu li a{display:grid;grid-template-columns:56px 1fr auto;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.menu li a .n{font-family:var(--f-mono);color:var(--blue);font-size:13px}
.menu li a b{font-family:var(--f-disp);font-weight:800;font-size:clamp(30px,6vw,64px);letter-spacing:-.04em;line-height:1}
.menu li a b small{font-family:var(--f-kr);font-size:15px;font-weight:700;letter-spacing:0;margin-left:12px;color:var(--ink-2)}
.menu li a .soon{color:var(--ink-2)}
.menu li a[aria-current] .soon{color:var(--blue)}

.btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;font-size:14px;font-weight:700;text-decoration:none;border:1px solid var(--ink);background:var(--white);color:var(--ink)}
.btn.solid{background:var(--ink);color:var(--white)}
.btn:hover{border-color:var(--blue)}
.btn.solid:hover{background:var(--blue)}
/* ---------- sections (샘플 ASV 섹션 문법: SEC 라벨 + 큰 영문 제목 + 헤어라인 표 구조) ---------- */
.wrap{max-width:1280px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.sec{border-top:1px solid var(--line);padding-block:clamp(64px,9vw,120px);scroll-margin-top:var(--hh)}
.sec.alt{background:var(--white)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .mono{color:var(--ink-2)}
.sec-head .lab{display:flex;gap:12px;align-items:center;grid-column:1/-1}
.sec-head .lab b{border:1px solid var(--ink);padding:2px 8px;font-weight:500;color:var(--ink)}
.sec-head .lab i{flex:1;height:1px;background:var(--line);font-style:normal}
.sec-title{margin:0;font-family:var(--f-disp);font-weight:800;font-size:clamp(56px,10vw,150px);line-height:.82;letter-spacing:-.055em}
.sec-title small{display:block;font-family:var(--f-kr);font-size:clamp(17px,1.6vw,21px);letter-spacing:-.02em;font-weight:800;margin-top:18px;line-height:1.4}
.sec-head .count{text-align:right;color:var(--ink-2)}
.sec-head .count b{color:var(--blue);font-weight:700}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.75;color:var(--ink-2);max-width:40em;margin:0}
.lead strong{color:var(--ink)}
h3.k{margin:0;font-size:clamp(24px,2.6vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.3;text-wrap:balance;max-width:20em}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border:1px solid currentColor;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;background:currentColor}
.chip.done{color:var(--ink)}
.chip.next{color:var(--blue)}
.foot{background:var(--ink);color:var(--white)}
.foot .wrap{padding-block:56px 40px;display:flex;flex-direction:column;gap:36px}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;font-size:14px;line-height:1.75}
.foot-grid .mono{color:#7F95FF;display:block;margin-bottom:10px}
.foot-grid p{margin:0;color:#C3C8D2}
.foot-grid a{display:block;color:#C3C8D2;text-decoration:none}
.foot-grid a:hover{color:var(--white)}
.foot-end{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:18px;color:#8A909C}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sec-head{grid-template-columns:1fr}.sec-head .count{text-align:left}.foot-grid{grid-template-columns:1fr}}