/*
 * 오호이 × LOPI 구조 전략(내부 검토용) 웹 슬라이드. task9 마이너 제안 덱(site_brand)의 시각 체계를 이어 쓴다. 색: 흰 바탕·검정 글자, 파랑은 작은 상태 표시(.status)에만. 주황·라임 없음.
 * 넓은 화면(768px~): 16:9 장이 세로로 이어진다. 장 안의 크기는 장 너비 기준 단위 --u(1333u = 장 너비)로 맞춘다.
 * 좁은 화면(~767px): 한 장 = 화면 한 장, 가로로 밀어 넘긴다(scroll-snap). 장 안 글이 길면 그 장 안에서 세로로 내린다.
 * 인쇄: 넘김 줄을 숨기고 장마다 A4 가로 한 쪽.
 */
@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; }

/* 표지 */
.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); }

/* 좁은 화면: 한 장 = 화면 한 장, 가로로 밀어 넘김. 장 안 글은 세로로 흐른다 */

/* ---- task12 추가: 내부 표시·상태 꼬리표·글머리·인용·비교·구조도·질문 ---- */
.head .int { color: var(--ink); font-weight: 700; }
.tag { display: inline-block; margin-left: 0.35em; padding: 0 0.4em; border: 1px solid var(--ink); font-size: 0.72em; font-weight: 600; line-height: 1.45; vertical-align: 0.12em; white-space: nowrap; }
.tag.est { border-style: dashed; color: var(--muted); border-color: var(--muted); }
.tag.ex { background: var(--soft); border-color: var(--soft); color: var(--ink); }
.tag.adv { background: var(--ink); color: #fff; }
.tag.chk { border-style: dotted; }

.pts { list-style: none; }
.pts li { position: relative; padding-left: calc(18 * var(--u)); font-size: calc(17.4 * var(--u)); line-height: 1.5; margin-bottom: calc(10 * var(--u)); }
.pts li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: calc(6 * var(--u)); height: calc(6 * var(--u)); background: var(--ink); border-radius: 50%; }
.pts b { font-weight: 700; }
.dense .pts li { font-size: calc(15.6 * var(--u)); margin-bottom: calc(7 * var(--u)); line-height: 1.45; }
.dense .title { font-size: calc(34 * var(--u)); }
.pts.two { columns: 2; column-gap: calc(40 * var(--u)); }
.pts.two li { break-inside: avoid; }

.lead { font-size: calc(19.4 * var(--u)); font-weight: 700; line-height: 1.45; margin-bottom: calc(16 * var(--u)); }

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(36 * var(--u)); }
.vs > div { border-top: calc(2.5 * var(--u)) solid var(--ink); padding-top: calc(12 * var(--u)); min-width: 0; }
.vs .cap { font-size: calc(14 * var(--u)); color: var(--muted); margin-bottom: calc(10 * var(--u)); }
.vs h3 { font-size: calc(22 * var(--u)); font-weight: 700; line-height: 1.3; margin-bottom: calc(12 * var(--u)); }
.vs .pts li { font-size: calc(15.6 * var(--u)); margin-bottom: calc(7 * var(--u)); }
.quote { border-left: calc(4 * var(--u)) solid var(--ink); padding: calc(8 * var(--u)) calc(14 * var(--u)); background: var(--soft); font-size: calc(15.6 * var(--u)); line-height: 1.5; margin-bottom: calc(10 * var(--u)); }
.quote .who { display: block; margin-top: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--muted); }

.callout { margin-top: auto; background: var(--ink); color: #fff; padding: calc(14 * var(--u)) calc(22 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.5; }
.callout .k { display: block; font-size: calc(13 * var(--u)); color: #bbb; margin-bottom: calc(4 * var(--u)); }
.callout.soft { background: var(--soft); color: var(--ink); }
.callout.soft .k { color: var(--muted); }
.mt { margin-top: calc(14 * var(--u)); }

/* 구조도 */
.tree { display: grid; grid-template-columns: 1fr; gap: calc(14 * var(--u)); }
.tree .node { border: 1px solid var(--ink); padding: calc(10 * var(--u)) calc(14 * var(--u)); font-size: calc(14.6 * var(--u)); line-height: 1.45; background: var(--bg); }
.tree .node b { display: block; font-size: calc(17 * var(--u)); margin-bottom: calc(3 * var(--u)); }
.tree .root { background: var(--ink); color: #fff; }
.tree .root .muted { color: #ccc; }
.tree .row { display: grid; gap: calc(14 * var(--u)); position: relative; }
.tree .r4 { grid-template-columns: repeat(4, 1fr); }
.tree .r2 { grid-template-columns: 1fr 1fr; }
.tree .link { text-align: center; font-size: calc(13 * var(--u)); color: var(--muted); line-height: 1; }
.tree .node.opt { border-style: dashed; }
.tree .muted { color: var(--muted); }

/* 질문 목록 */
.qlist { list-style: none; counter-reset: q; }
.qlist li { counter-increment: q; display: grid; grid-template-columns: calc(52 * var(--u)) 1fr; font-size: calc(15.6 * var(--u)); line-height: 1.45; padding: calc(7 * var(--u)) 0; border-top: 1px solid var(--line); }
.qlist li::before { content: "Q" counter(q); font-weight: 700; }
.qlist li.key { font-weight: 700; }

.legend { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(18 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }
.cover .legend { margin-top: calc(22 * var(--u)); }
.stamp { display: inline-block; border: calc(2 * var(--u)) solid var(--ink); padding: calc(4 * var(--u)) calc(12 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 800; letter-spacing: 0.04em; }
.tbl.plain.sm th, .tbl.plain.sm td { font-size: calc(13.6 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)); }
.tbl.fix th, .tbl.fix td { font-size: calc(12.6 * var(--u)); padding: calc(5 * var(--u)) calc(7 * var(--u)); line-height: 1.38; }
.tbl.src td.url { word-break: break-all; }

@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 screen and (max-width: 767px) {
  .vs, .tree .r4, .tree .r2 { grid-template-columns: 1fr; }
  .pts.two { columns: 1; }
  .pts li, .dense .pts li, .vs .pts li { font-size: 14.5px; }
  .dense .title { font-size: 22px; }
  .qlist li { font-size: 14px; grid-template-columns: 40px 1fr; }
  .callout { margin-top: 18px; font-size: 14.5px; }
  .quote { font-size: 14px; }
  .lead { font-size: 16px; }
  .tree .node { font-size: 13.5px; }
}

@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; }
}