@font-face {
  font-family: "Pretendard";
  src: url("fonts/Pretendard-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #111;
  --muted: #666;
  --line: #d6d6d6;
  --soft: #f3f3f3;
  --bg: #fff;
  --page: #ececec;
  --live: #1f5fd6;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); }
body { font-family: "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
a { color: inherit; }

.track { display: flex; flex-direction: column; gap: 24px; padding: 32px 48px 104px; max-width: 1600px; margin: 0 auto; }

.slide { position: relative; aspect-ratio: 16 / 9; background: var(--bg); box-shadow: 0 0 0 1px var(--line); container-type: inline-size; overflow: hidden; scroll-margin-top: 16px; }
.inner { --u: calc(100cqw / 1333); position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(28 * var(--u)) calc(60 * var(--u)) calc(26 * var(--u)); }

.head { display: flex; justify-content: space-between; font-size: calc(13.9 * var(--u)); color: var(--muted); padding-bottom: calc(10 * var(--u)); border-bottom: 1px solid var(--ink); letter-spacing: 0.02em; }
.title { margin-top: calc(18 * var(--u)); font-size: calc(41.7 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.title.sm { font-size: calc(30.6 * var(--u)); margin-top: calc(14 * var(--u)); }
.sub { margin-top: calc(10 * var(--u)); font-size: calc(19.4 * var(--u)); color: var(--muted); line-height: 1.45; }
.sub.sm { font-size: calc(13.9 * var(--u)); margin-top: calc(6 * var(--u)); }
.body { flex: 1; min-height: 0; margin-top: calc(30 * var(--u)); display: flex; flex-direction: column; }
.foot { margin-top: calc(10 * var(--u)); font-size: calc(11.1 * var(--u)); color: var(--muted); }
.bottom { margin-top: auto; padding-top: calc(14 * var(--u)); font-size: calc(15.3 * var(--u)); line-height: 1.45; }

.grid { display: grid; gap: calc(30 * var(--u)); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }


.stat { border-top: calc(2.5 * var(--u)) solid var(--ink); padding-top: calc(14 * var(--u)); }
.value { font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.v40 { font-size: calc(55.6 * var(--u)); }
.v32 { font-size: calc(44.4 * var(--u)); }
.v26 { font-size: calc(36.1 * var(--u)); }
.label { margin-top: calc(18 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1.4; min-height: calc(50 * var(--u)); }
.note { margin-top: calc(12 * var(--u)); font-size: calc(14.6 * var(--u)); color: var(--muted); line-height: 1.5; }


.cols .num { display: flex; justify-content: space-between; font-size: calc(15 * var(--u)); color: var(--muted); }
.cols h3 { margin-top: calc(8 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 700; line-height: 1.3; min-height: calc(66 * var(--u)); }
.g5.cols h3 { font-size: calc(22 * var(--u)); }
.cols .big { font-size: calc(44 * var(--u)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: calc(10 * var(--u)); }
.cols ul { border-top: 1px solid var(--ink); padding-top: calc(14 * var(--u)); list-style: none; }
.cols li { position: relative; padding-left: calc(16 * var(--u)); font-size: calc(17.4 * var(--u)); line-height: 1.5; margin-bottom: calc(10 * var(--u)); }
.g5.cols li { font-size: calc(16 * var(--u)); }
.cols li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: calc(5 * var(--u)); height: calc(5 * var(--u)); background: var(--ink); border-radius: 50%; }


.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tbl th { background: var(--ink); color: #fff; font-weight: 700; text-align: left; }
.tbl th, .tbl td { border: 1px solid var(--line); vertical-align: middle; line-height: 1.4; }
.tbl.plain th, .tbl.plain td { font-size: calc(15.3 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); }
.tbl.brands th, .tbl.brands td { font-size: calc(11.1 * var(--u)); padding: calc(4 * var(--u)) calc(6 * var(--u)); line-height: 1.35; }
.tbl.brands td { height: calc(38 * var(--u)); }
.tbl.low td { font-size: calc(12.9 * var(--u)); height: calc(46 * var(--u)); }
.tbl.src td, .tbl.src th { font-size: calc(12.5 * var(--u)); padding: calc(5 * var(--u)) calc(8 * var(--u)); height: auto; }
.tbl.src td.url { color: var(--muted); }
.tbl td.muted { color: var(--muted); }
.tbl td.strong { font-weight: 700; }
.tbl td.c { text-align: center; }

.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; padding: 0.15em 0.4em; font-weight: 700; border: 1px solid var(--ink); }
.badge.fhi { background: var(--ink); color: #fff; }
.badge.fmid { background: #fff; color: var(--ink); }
.badge.flo { background: var(--soft); color: var(--muted); border-color: var(--soft); }


.steps .step { background: var(--soft); padding: calc(24 * var(--u)); min-height: calc(320 * var(--u)); }
.steps .step.last { background: var(--ink); color: #fff; }
.steps .k { font-size: calc(15 * var(--u)); color: var(--muted); }
.steps .last .k { color: #bbb; }
.steps h3 { margin-top: calc(14 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1.3; }
.steps p:last-child { margin-top: calc(18 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.55; }


.brandhead { display: flex; justify-content: space-between; align-items: center; gap: calc(30 * var(--u)); }
.brandhead .title { font-size: calc(38.9 * var(--u)); }
.brandhead .fit { margin-top: calc(18 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(15 * var(--u)); color: var(--muted); white-space: nowrap; }
.brandhead .badge { font-size: calc(19 * var(--u)); padding: 0.3em 0.7em; }
.brand { display: grid; grid-template-columns: 410fr 803fr; gap: calc(60 * var(--u)); margin-top: calc(26 * var(--u)); }
.cap { font-size: calc(15 * var(--u)); color: var(--muted); padding-bottom: calc(8 * var(--u)); border-bottom: 1px solid var(--ink); }
.brand dl { display: grid; grid-template-columns: calc(105 * var(--u)) 1fr; row-gap: calc(18 * var(--u)); margin-top: calc(16 * var(--u)); }
.brand dt { font-size: calc(13.9 * var(--u)); color: var(--muted); }
.brand dd { font-size: calc(14.6 * var(--u)); line-height: 1.5; }
.brand .left { display: flex; flex-direction: column; }
.status { margin-top: auto; margin-bottom: calc(4 * var(--u)); font-size: calc(13.2 * var(--u)); color: var(--live); }
.brand .right { display: flex; flex-direction: column; }
.bens { list-style: none; margin-top: calc(18 * var(--u)); }
.bens li { display: grid; grid-template-columns: calc(60 * var(--u)) 1fr; margin-bottom: calc(22 * var(--u)); }
.bens span { font-size: calc(22 * var(--u)); font-weight: 700; line-height: 1.2; }
.bens p { font-size: calc(18 * var(--u)); line-height: 1.5; }
.chan { font-size: calc(14.6 * var(--u)); color: var(--muted); }
.first { margin-top: auto; background: var(--ink); color: #fff; padding: calc(16 * var(--u)) calc(25 * var(--u)) calc(18 * var(--u)); }
.first .k { font-size: calc(13.9 * var(--u)); color: #bbb; }
.first p:last-child { margin-top: calc(6 * var(--u)); font-size: calc(19.4 * var(--u)); font-weight: 700; line-height: 1.45; }
.first.soft { background: var(--soft); color: var(--ink); }
.first.soft .k { color: var(--muted); }
.first.soft p:last-child { font-size: calc(15.3 * var(--u)); }


.pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)); margin-top: calc(22 * var(--u)); }
.card { display: flex; flex-direction: column; border-top: calc(2.5 * var(--u)) solid var(--ink); padding-top: calc(12 * var(--u)); min-height: 0; }
.cardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(16 * var(--u)); }
.cardhead h3 { font-size: calc(22 * var(--u)); font-weight: 700; line-height: 1.3; }
.cardhead .badge { font-size: calc(14 * var(--u)); }
.card .info { margin-top: calc(8 * var(--u)); font-size: calc(13.9 * var(--u)); color: var(--muted); line-height: 1.45; }
.card .note2 { margin-top: calc(10 * var(--u)); font-size: calc(14.6 * var(--u)); line-height: 1.5; }
.card .cap { margin-top: calc(16 * var(--u)); border: 0; padding: 0; }
.card ul { list-style: none; margin-top: calc(6 * var(--u)); }
.card li { position: relative; padding-left: calc(16 * var(--u)); font-size: calc(14.6 * var(--u)); line-height: 1.5; margin-bottom: calc(6 * var(--u)); }
.card li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: calc(5 * var(--u)); height: calc(5 * var(--u)); background: var(--ink); border-radius: 50%; }
.card .chan { margin-top: calc(8 * var(--u)); font-size: calc(13.2 * var(--u)); }
.card .first { margin-top: auto; }


.cover .inner { padding: calc(50 * var(--u)) calc(60 * var(--u)); }
.dateline { font-size: calc(15.3 * var(--u)); color: var(--muted); padding-bottom: calc(14 * var(--u)); border-bottom: 1px solid var(--ink); }
.cover h1 { margin-top: calc(80 * var(--u)); font-size: calc(75 * var(--u)); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
.coversub { margin-top: calc(40 * var(--u)); font-size: calc(25 * var(--u)); line-height: 1.45; }
.coverfoot { margin-top: auto; padding-top: calc(14 * var(--u)); border-top: 1px solid var(--line); font-size: calc(13.9 * var(--u)); color: var(--muted); line-height: 1.5; }


.bar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); box-shadow: 0 6px 24px hsl(0 0% 0% / 0.12); transform: translateX(-50%); }
.bar button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.bar button:disabled { opacity: 0.3; cursor: default; }
.bar button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .bar button:not(:disabled):hover { background: var(--soft); } }
.count { min-width: 76px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; }
.count .total { color: var(--muted); }


@media screen and (max-width: 767px) {
  .track { position: relative; flex-direction: row; gap: 0; height: 100svh; padding: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: none; }
  .track::-webkit-scrollbar { display: none; }
  .slide { flex: 0 0 100%; aspect-ratio: auto; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; container-type: normal; box-shadow: none; }
  .inner { --u: 0.78px; position: static; min-height: 100%; padding: 20px 20px 96px; }
  .title { font-size: 26px; }
  .brandhead .title { font-size: 24px; }
  .title.sm { font-size: 21px; }
  .sub { font-size: 15px; }
  .g2, .g3, .g4, .g5, .brand, .pair { grid-template-columns: 1fr; }
  .grid { gap: 22px; }
  .label, .cols h3 { min-height: 0; }
  .steps .step { min-height: 0; }
  .cover h1 { margin-top: 48px; font-size: 40px; }
  .coversub { font-size: 18px; }
  .brandhead { flex-direction: column; align-items: flex-start; gap: 0; }
  .first { margin-top: 18px; }
  .card { margin-bottom: 20px; }
  .bottom { margin-top: 18px; }
  .foot { margin-top: 24px; }
  
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl colgroup, .tbl thead { display: none; }
  .tbl tr { border: 1px solid var(--line); margin-bottom: 10px; padding: 8px 10px; }
  .tbl td, .tbl.brands td, .tbl.low td, .tbl.plain td, .tbl.src td { border: 0; height: auto; padding: 3px 0; font-size: 13px; }
  .tbl td::before { content: attr(data-h); display: block; font-size: 11px; color: var(--muted); }
  .tbl td.strong { font-size: 15px; }
}

@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { background: #fff; }
  .bar { display: none; }
  .track { display: block; padding: 0; max-width: none; }
  .slide { width: 297mm; height: 167mm; margin: 21.5mm 0; aspect-ratio: auto; box-shadow: none; break-after: page; page-break-after: always; break-inside: avoid; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
}