/*
 * V3 기본. reset · 타이포 램프 · 레이아웃 뼈대.
 *
 * 폰트 크기는 램프(32·24·20·18·16·15·14·13)에 있는 값만 쓴다.
 * 그 밖의 값이 나오면 설계가 샌 것이다.
 */

/* ── reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text-primary);
  background:var(--page-bg);
  font-size:14px; line-height:1.5; letter-spacing:-0.35px;
}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{margin:0;padding:0;border:0;background:none;}
table{border-collapse:collapse;}

/*
 * 누를 수 있는 것에는 손가락 커서. 요소마다 붙이면 빠뜨린 곳을 찾을 방법이 없다.
 * 누를 수 없는 것에는 disabled 를 달면 이 규칙이 알아서 비껴간다.
 */
button,[role="button"],label[for],summary{cursor:pointer;}
button:disabled,[aria-disabled="true"]{cursor:default;}

:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;}

/* 읽기 보조기에만 보이는 글 */
.v3_sr_only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── 타이포 램프 ─────────────────────────────────────────── */
.t1{font-size:32px;font-weight:700;line-height:1.6;letter-spacing:-0.8px;}
.t2{font-size:24px;font-weight:700;line-height:1.5;letter-spacing:-0.6px;}
.t3{font-size:20px;font-weight:700;line-height:1.6;letter-spacing:-0.5px;}
.t4{font-size:18px;font-weight:700;line-height:1.5;letter-spacing:-0.45px;}
.b2m{font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-0.4px;}
.b3m{font-size:15px;font-weight:500;line-height:1.6;letter-spacing:-0.375px;}
.b4{font-size:14px;font-weight:400;line-height:1.5;letter-spacing:-0.35px;}
.b4m{font-size:14px;font-weight:500;line-height:1.5;letter-spacing:-0.35px;}
.b5{font-size:13px;font-weight:400;line-height:1.5;letter-spacing:-0.325px;}
.b5m{font-size:13px;font-weight:500;line-height:1.5;letter-spacing:-0.325px;}

/* 자주 쓰는 색 — 글자 색만. 배경·테두리는 그 자리 CSS 에서 건다 */
.is_secondary{color:var(--text-secondary);}
.is_tertiary{color:var(--text-tertiary);}
.is_up{color:var(--status-up);}
.is_down{color:var(--status-down);}

/* 줄 수 제한 — 카드 제목·요약에 쓴다 */
.v3_clamp_1,.v3_clamp_2,.v3_clamp_3{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.v3_clamp_1{-webkit-line-clamp:1;}
.v3_clamp_2{-webkit-line-clamp:2;}
.v3_clamp_3{-webkit-line-clamp:3;}

/* ── 레이아웃 뼈대 ───────────────────────────────────────── */
/*
 * 브레이크포인트 — v5 가 실제로 쓰는 분기를 세어 맞췄다(lg 1024 가 주 분기).
 *
 *   ~767      한 단. 모바일
 *   768~1023  한 단 + 여백 확대 (태블릿)
 *   1024~     두 단. 사이드 등장
 *   1280~     콘텐츠 1280 고정 + 스카이스크래퍼 자리
 *   ~360      소형 단말 보정
 *
 * 기기 판정(isMobile)은 레이아웃에 쓰지 않는다. 창 크기를 모르기 때문이다.
 */
.base_v3_wrap{min-height:100vh;display:flex;flex-direction:column;}
.v3_main{flex:1 1 auto;}

.v3_container{--page-gutter:var(--sp-4);width:100%;max-width:var(--page-w);margin:0 auto;padding:0 var(--page-gutter);}
/*
 * 컨테이너 좌우 여백을 걷어 내고 화면 끝까지 가는 블록(모바일 사이드바의 흰 블록 · 띠).
 * 여백이 화면 폭마다 달라서(12/16/24) 값을 직접 적지 않고 --page-gutter 를 따른다.
 */
.v3_bleed{margin-left:calc(var(--page-gutter) * -1);margin-right:calc(var(--page-gutter) * -1);}

/* 본문 + 사이드 두 단. 1024 아래에서는 한 단으로 떨어진다 */
.v3_cols{display:flex;flex-direction:column;gap:var(--sp-6);}
.v3_cols_main{min-width:0;flex:1 1 auto;}
.v3_cols_side{min-width:0;}

@media (min-width:768px){
  .v3_container{--page-gutter:var(--sp-6);}
}
@media (min-width:1024px){
  .v3_cols{flex-direction:row;gap:var(--sp-8);}
  .v3_cols_side{flex:0 0 300px;width:300px;}
}
@media (max-width:360px){
  .v3_container{--page-gutter:var(--sp-3);}
  .t1{font-size:24px;letter-spacing:-0.6px;}
  .t2{font-size:20px;letter-spacing:-0.5px;}
}