:root {
    color-scheme: light;

    --bg:      #FFFFFF;
    --paper:   #F4F5F7;
    --sand:    #FBF7F3;
    --tint:    #FFF3F1;

    --ink:     #14141A;
    --ink-2:   #55555F;
    --ink-3:   #5C6270;
    --line:    #E6E7EC;
    --line-2:  #EFEFF3;

    /* 빨강은 흰 바탕에서 4.5:1 대비를 넘기는 짙기다 */
    --red:     #D6332A;
    --red-ink: #B3231C;
    --red-soft:#FFE5E1;
    --green:   #077537;
    --green-soft:#DFF3E7;

    --sans: "Pretendard Variable", Pretendard, "Pretendard 대체", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "Noto Sans KR", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

    --shadow: 0 1px 2px rgba(20,20,26,.04), 0 8px 24px rgba(20,20,26,.05);

    /* 버튼 한 벌이 찾는 이름 — 이 화면은 파랑이 아니라 빨강이 주요 색이다 */
    --surface:  #FFFFFF;
    --subtle:   #F4F5F7;
    --hover:    #FAFAFB;
    --line-3:   #D8D9E0;
    --accent:   #D6332A; --accent-h:#C22B23; --accent-d:#B3231C;
    --danger:   #D6332A; --danger-h:#B3231C; --danger-d:#9C1E18;
    --danger-bg:#FFE5E1; --danger-ln:#F3C6C0;
    --dur: .16s;
    --sh-b:  0 1px 1.5px rgba(20,20,26,.05);
    --sh-bh: 0 1px 3px rgba(20,20,26,.09);
    --sh-bp: 0 1px 2px rgba(179,35,28,.28), inset 0 1px 0 rgba(255,255,255,.2);
    --sh-bph:0 2px 5px rgba(179,35,28,.3), inset 0 1px 0 rgba(255,255,255,.2);
  }
  /* 폰트 대체 시 글자가 내려앉지 않게 세로 수치를 맞춘 얼굴을 Pretendard 뒤에 끼운다 */
  @font-face {
    font-family:"Pretendard 대체";
    src:local("Malgun Gothic"), local("맑은 고딕"), local("Apple SD Gothic Neo"),
        local("Noto Sans KR"), local("Segoe UI");
    ascent-override:102%;
    descent-override:24%;
    line-gap-override:0%;
  }

  * { box-sizing: border-box; }
  html { scroll-snap-type: y proximity; scroll-behavior: smooth; background: var(--bg); }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--sans); font-size: 16px; line-height: 1.6;
    letter-spacing: -.025em; -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  /* 폼 요소에 글꼴 상속을 걸지 않으면 기본 글꼴로 그려져 글자가 아래로 처진다 */
  button, input, select, textarea, optgroup { font: inherit; color: inherit; cursor: pointer; }
  :focus, :focus-visible { outline: none; }

  .scene {
    min-height: 100vh;
    min-height: 100svh;
    scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: center;
    padding: 92px 22px 76px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
  }
  .inner { width: 100%; max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }

  .s-white { background: var(--bg); }
  .s-paper { background: var(--paper); }
  .s-sand  { background: var(--sand); }
  .s-tint  { background: var(--tint); }

  /* 밝은 화면이 심심하지 않도록 아주 옅은 글로우만 깔아둔다 */
  .scene::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    width: 78vmax; height: 78vmax; border-radius: 50%;
    top: -26vmax; right: -24vmax;
    background: radial-gradient(circle, rgba(224,52,43,.07), rgba(224,52,43,0) 62%);
  }
  .scene.glow-b::before {
    top: auto; right: auto; bottom: -30vmax; left: -26vmax;
    background: radial-gradient(circle, rgba(224,52,43,.06), rgba(224,52,43,0) 62%);
  }
  .scene.glow-warm::before {
    background: radial-gradient(circle, rgba(214,142,60,.10), rgba(214,142,60,0) 62%);
  }

  /* ---------- fixed chrome ---------- */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.72) 55%, rgba(255,255,255,0));
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    color: var(--ink);
    pointer-events: none;
  }
  .logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; letter-spacing: -.035em; }
  .logo-mark {
    width: 24px; height: 24px; border-radius: 7px; background: var(--red-ink);
    color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800;
    letter-spacing: -.02em;
  }
  .logo-mark.logo { width: 26px; height: 26px; border-radius: 0; background: #080404;
    -webkit-mask: var(--logo) center/contain no-repeat;
    mask: var(--logo) center/contain no-repeat; }
  .topbar .store { margin-left: auto; font-size: 13px; color: var(--ink-3); }

  .dots {
    position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
    z-index: 60; display: flex; flex-direction: column; gap: 9px;
  }
  /* 점은 작게 보이되 누르는 영역은 넉넉하게 */
  .dots a {
    width: 32px; height: 32px; display: grid; place-items: center;
    background: none; transition: transform .3s ease;
  }
  .dots a::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: rgba(20,20,26,.28); transition: background .3s ease, transform .3s ease;
  }
  .dots a.on::before { background: var(--red); transform: scale(1.5); }

  .scrollhint {
    position: absolute; left: 0; right: 0; bottom: 28px; z-index: 1;
    text-align: center; font-size: 12.5px; letter-spacing: .1em; font-weight: 700;
    color: var(--ink-3);
  }
  .scrollhint i {
    display: block; width: 1px; height: 26px; margin: 10px auto 0;
    background: currentColor; opacity: .6;
    animation: drop 1.9s ease-in-out infinite;
  }
  @keyframes drop { 0%, 100% { transform: scaleY(.3); transform-origin: top; opacity: .25; } 50% { transform: scaleY(1); opacity: .8; } }

  /* ---------- type ---------- */
  .eyebrow {
    display: inline-flex; align-items: center;
    font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
    color: var(--red-ink); background: var(--red-soft);
    border-radius: 100px; padding: 6px 12px;
    margin-bottom: 20px;
  }
  h1 {
    margin: 0; font-size: clamp(36px, 11vw, 76px);
    font-weight: 850; line-height: 1.1; letter-spacing: -.055em;
    text-wrap: balance;
  }
  h2 {
    margin: 0 0 20px; font-size: clamp(27px, 7.4vw, 46px);
    font-weight: 850; line-height: 1.22; letter-spacing: -.05em;
    text-wrap: balance;
  }
  .lead { font-size: clamp(15.5px, 4.2vw, 19px); line-height: 1.66; color: var(--ink-2); max-width: 36ch; margin: 18px 0 0; }
  .hl { color: var(--red); }

  /* ---------- big figure ---------- */
  .figure {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: clamp(56px, 19vw, 148px);
    font-weight: 600; letter-spacing: -.075em; line-height: .95;
    margin: 4px 0 0; color: var(--red);
  }
  .figure small {
    font-family: var(--sans); font-size: .2em; font-weight: 750;
    letter-spacing: -.02em; color: var(--ink-3); margin-left: .08em;
  }
  .figcap { margin-top: 22px; font-size: clamp(19px, 5.4vw, 26px); font-weight: 800; letter-spacing: -.04em; line-height: 1.4; text-wrap: balance; }
  .figsub { margin-top: 14px; font-size: 15.5px; color: var(--ink-3); }

  .compare { display: flex; align-items: flex-end; gap: 14px; margin-top: 34px; }
  .cbar { flex: 1; max-width: 130px; }
  .cbar-v { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink-3); margin-bottom: 8px; }
  .cbar-b { border-radius: 8px 8px 3px 3px; background: #DDDDE4; }
  .cbar.now .cbar-b { background: var(--red); }
  .cbar.now .cbar-v { color: var(--ink); }
  .cbar-l { font-size: 13px; margin-top: 9px; color: var(--ink-3); font-weight: 600; }
  .cbar.now .cbar-l { color: var(--ink); font-weight: 800; }

  .tag {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 100px; padding: 6px 13px;
    font-family: var(--mono); font-size: 14px; font-weight: 700;
    background: var(--green-soft); color: var(--green);
    margin-top: 20px;
  }

  /* ---------- rank list ---------- */
  .ranks {
    display: grid; gap: 0; margin-top: 8px;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: 18px; padding: 4px 20px; box-shadow: var(--shadow);
  }
  .rank {
    display: flex; align-items: center; gap: 14px;
    padding: 17px 0; border-bottom: 1px solid var(--line-2);
  }
  .rank:last-child { border-bottom: 0; }
  .rank-kw { font-size: clamp(16px, 4.6vw, 21px); font-weight: 800; letter-spacing: -.04em; }
  .rank-vol { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
  .rank-r { margin-left: auto; text-align: right; white-space: nowrap; }
  .rank-now { font-family: var(--mono); font-size: clamp(24px, 7vw, 34px); font-weight: 600; letter-spacing: -.06em; }
  .rank-now em { font-style: normal; font-family: var(--sans); font-size: .46em; font-weight: 750; letter-spacing: -.02em; color: var(--ink-3); }
  .rank-was { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
  .rank-up { color: var(--green); font-weight: 700; }

  /* ---------- work ---------- */
  .works { display: grid; gap: 12px; margin-top: 8px; }
  .work {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: 16px; padding: 17px 19px; box-shadow: var(--shadow);
  }
  .work-nm { font-size: 16.5px; font-weight: 800; letter-spacing: -.035em; }
  .work-sb { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
  .work-ct {
    margin-left: auto; white-space: nowrap;
    font-family: var(--mono); font-size: 27px; font-weight: 600; letter-spacing: -.06em;
    color: var(--red);
  }
  .work-ct small { font-family: var(--sans); font-size: .48em; font-weight: 650; color: var(--ink-3); letter-spacing: -.01em; }

  /* ---------- shots ---------- */
  .shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
  .shot {
    position: relative; border-radius: 16px; overflow: hidden;
    aspect-ratio: 1; display: flex; align-items: flex-end; color: var(--ink);
    border: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .shot::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(255,255,255,.94), rgba(255,255,255,.35) 52%, rgba(255,255,255,0));
  }
  .shot-cap { position: relative; z-index: 1; padding: 13px; }
  .shot-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--red-ink); }
  .shot-t { font-size: 14.5px; font-weight: 800; letter-spacing: -.035em; margin-top: 3px; line-height: 1.35; }
  .p1 { background: radial-gradient(70% 80% at 25% 15%, #FFD9B8, transparent 62%), radial-gradient(80% 70% at 85% 80%, #FFC4B4, transparent 60%), #FFF1E6; }
  .p2 { background: radial-gradient(75% 70% at 70% 20%, #CFE6D2, transparent 60%), radial-gradient(70% 80% at 15% 85%, #DCEBD6, transparent 62%), #EFF7EE; }
  .p3 { background: radial-gradient(70% 75% at 30% 80%, #FFE0B0, transparent 60%), radial-gradient(75% 70% at 80% 20%, #FFEFC4, transparent 58%), #FFF8EA; }
  .p4 { background: radial-gradient(80% 70% at 60% 25%, #E8D6EA, transparent 60%), radial-gradient(70% 80% at 20% 90%, #F2DCE4, transparent 62%), #F9F0F6; }

  /* ---------- quotes ---------- */
  .quotes {
    background: var(--bg); border: 1px solid var(--line);
    border-radius: 18px; padding: 26px 22px; box-shadow: var(--shadow);
  }
  .quote {
    font-size: clamp(17px, 4.6vw, 22px); font-weight: 700; line-height: 1.58;
    letter-spacing: -.04em; text-wrap: balance;
  }
  .quote-w { margin-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
  .quote + .quote { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-2); }
  .score-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 26px; }
  .score { font-family: var(--mono); font-size: clamp(46px, 13vw, 76px); font-weight: 600; letter-spacing: -.07em; line-height: 1; color: var(--red); }
  .score-max { font-family: var(--mono); font-size: 16px; color: var(--ink-3); }

  /* ---------- steps ---------- */
  .steps { display: grid; gap: 12px; margin-top: 8px; }
  .step {
    display: flex; gap: 15px; align-items: flex-start;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow);
  }
  .step-n {
    width: 32px; height: 32px; border-radius: 10px; flex: none;
    background: var(--red-soft); color: var(--red-ink);
    display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 700;
  }
  .step-t { font-size: 17.5px; font-weight: 800; letter-spacing: -.04em; }
  .step-d { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }

  /* ---------- final ---------- */
  .mgr { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
  .mgr-av {
    width: 54px; height: 54px; border-radius: 16px; flex: none;
    background: var(--red); color: #fff;
    display: grid; place-items: center; font-size: 17px; font-weight: 800; letter-spacing: -.04em;
  }
  .mgr-nm { font-size: 17.5px; font-weight: 800; letter-spacing: -.04em; }
  .mgr-rl { font-size: 13.5px; color: var(--ink-3); }
  .btns { display: grid; gap: 11px; margin-top: 32px; }
  /* 버튼은 네 화면이 공유하는 한 벌이라 다섯 크기 값으로만 바꾸고 직접 수치를 안 쓴다 */
  .btn {
    --btn-h:34px; --btn-r:9px; --btn-px:14px; --btn-fs:13.5px; --btn-fw:600; --btn-sv:14px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:var(--btn-h); padding:0 var(--btn-px); border-radius:var(--btn-r);
    font-family:inherit; font-size:var(--btn-fs); font-weight:var(--btn-fw);
    letter-spacing:-.011em; line-height:1;
    background:var(--surface); border:1px solid var(--line-3); color:var(--ink);
    cursor:pointer; white-space:nowrap; user-select:none; box-shadow:var(--sh-b);
    transition:background var(--dur) ease, border-color var(--dur) ease,
               box-shadow var(--dur) ease, transform .08s ease;
  }
  .btn:hover { background:var(--hover); border-color:#C2C7D2; box-shadow:var(--sh-bh); }
  .btn:active { background:var(--subtle); box-shadow:none; transform:translateY(1px); }
  /* 정의가 두 곳이면 뒤가 이겨 cursor:not-allowed 가 죽는다. 여기 하나로 둔다 */
  .btn:disabled { opacity:.62; cursor:not-allowed; box-shadow:none; transform:none; }
  .btn svg { width:var(--btn-sv); height:var(--btn-sv); stroke-width:1.85; flex:none; }

  /* 주요 — 한 화면에 하나가 원칙이다 */
  .btn-p { background:var(--accent); border-color:var(--accent-h); color:#fff; box-shadow:var(--sh-bp); }
  .btn-p:hover { background:var(--accent-h); border-color:var(--accent-d); box-shadow:var(--sh-bph); }
  .btn-p:active { background:var(--accent-d); box-shadow:inset 0 1px 2px rgba(0,0,0,.22); transform:translateY(1px); }

  /* 크기 — 값이 아니라 이 다섯 개를 쓴다 */
  .btn-xs { --btn-h:24px; --btn-r:7px; --btn-px:8px; --btn-fs:12px; --btn-sv:12px; }
  .btn-sm { --btn-h:29px; --btn-r:8px; --btn-px:11px; --btn-fs:12.5px; --btn-sv:13px; }
  .btn-lg { --btn-h:44px; --btn-r:11px; --btn-px:20px; --btn-fs:15px; --btn-sv:16px; }
  .btn-xl { --btn-h:52px; --btn-r:13px; --btn-px:26px; --btn-fs:16.5px; --btn-fw:650; --btn-sv:18px; }

  /* 조용한 — 테두리와 그림자를 걷고 올릴 때만 바닥이 생긴다 */
  .btn-gh { background:none; border-color:transparent; box-shadow:none; color:var(--ink-2); }
  .btn-gh:hover { background:var(--subtle); border-color:transparent; color:var(--ink); box-shadow:none; }
  .btn-gh:active { background:var(--subtle); box-shadow:none; transform:translateY(1px); }

  /* 삭제 — 아이콘 대신 글자로, 위험도가 보이되 과하지 않게 */
  /* 삭제 단추는 평소엔 테두리·글자만 붉게 두고 올렸을 때만 물들인다 */
  .btn-del { background:var(--surface); border-color:var(--danger-ln); color:var(--danger-d);
             box-shadow:var(--sh-b); }
  .btn-del:hover { background:var(--danger-bg); border-color:#DCAFA9; color:var(--danger-h);
                   box-shadow:var(--sh-bh); }
  .btn-del:active { background:#F6DEDA; border-color:#D2A099;
                    box-shadow:inset 0 1px 2px rgba(140,39,30,.12); transform:translateY(1px); }
  .btn-del:focus-visible { border-color:var(--danger); }

  /* 아이콘만 — 너비가 높이를 따라가 늘 정사각이다 */
  .btn-ic { --btn-px:0; width:var(--btn-h); }
  .btn-w { width:100%; }

  /* 이 화면의 단추는 격자 한 칸을 통째로 채운다 */
  .btns .btn { width:100%; }
  .final-foot { margin-top: 40px; font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }

  /* 화면 밖 장면은 그리기를 건너뛰되 높이 0 가정으로 스크롤 길이는 안 어긋난다 */
  .scene:not(#s1) { content-visibility: auto; contain-intrinsic-size: auto 0; }

  /* ---------- reveal ---------- */
  .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
  /* 첫 화면은 연출 없이 바로 보인다 — 여기를 감췄다 켜면 첫 렌더가 그만큼 늦어진다 */
  #s1 .rv { opacity: 1; transform: none; transition: none; }
  .scene.seen .rv { opacity: 1; transform: none; }
  .scene.seen .rv:nth-child(2) { transition-delay: .08s; }
  .scene.seen .rv:nth-child(3) { transition-delay: .16s; }
  .scene.seen .rv:nth-child(4) { transition-delay: .24s; }
  .scene.seen .rv:nth-child(5) { transition-delay: .32s; }

  @media (min-width: 760px) {
    .scene { padding: 100px 40px 90px; }
    .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar { padding: 16px 40px; }
    .dots { right: 26px; }
    .quotes { padding: 30px 28px; }
  }
  /* 폭 835px 이하에서 점 내비가 CTA 를 덮어 눌림이 어긋나므로 여기서만 손본다 */
  @media (max-width: 835px) {
    .btns { padding-right: 40px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-snap-type: none; scroll-behavior: auto; }
    .rv { opacity: 1; transform: none; transition: none; }
    .scrollhint i { animation: none; }
  }

  /* 인쇄에서는 스크롤 스냅을 풀고 장면마다 페이지를 나누며 색 대신 테두리로 구분한다 */
  @media print {
    @page { margin: 12mm; }
    html { scroll-snap-type: none !important; scroll-behavior: auto !important; height: auto !important; }
    body { background: #fff !important; }
    .topbar, .dots, .scrollhint, .btns { display: none !important; }
    /* 글로우는 .scene::before 만 지우고 위치 플래그 클래스는 안 건드려 장면이 안 사라지게 한다 */
    .scene::before { display: none !important; }
    .scene {
      min-height: 0 !important; height: auto !important; scroll-snap-align: none !important;
      background: #fff !important; padding: 0 0 16mm !important;
      break-after: page; page-break-after: always;
      /* 인쇄에서는 content-visibility 를 풀어 안 그려진 장면이 빈 상자로 안 남게 한다 */
      content-visibility: visible !important;
      contain-intrinsic-size: none !important;
      overflow: visible !important;
    }
    .scene:last-of-type { break-after: auto; page-break-after: auto; }
    .inner { max-width: none !important; padding: 0 !important; }
    /* 등장 연출은 인쇄 시점에 아직 안 끝났을 수 있다. 전부 보이게 고정한다 */
    .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
    .figure, .compare, .ranks, .works, .shots, .quotes, .steps, .mgr {
      break-inside: avoid; page-break-inside: avoid;
    }
    .cbar-b, .rank, .work, .shot, .quote, .step { border: 1px solid #C9CDD6; }
    .cbar-v, .score, .cbar-b { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* 담당자 이니셜은 바탕을 비우고 빨간 글씨·테두리로 그려 인쇄 여부와 상관없이 읽힌다 */
    .mgr-av { background: none !important; color: var(--red-ink) !important; border: 1px solid #C9CDD6; }
    /* 2열 정사각형이 되면 s7 한 장이 A4 페이지 경계에 걸린다 */
    .shots { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .shot { aspect-ratio: 4 / 3; }
    .final-foot { break-before: avoid; page-break-before: avoid; }
    * { box-shadow: none !important; text-shadow: none !important; }
  }