:root {
        --r-ground: #eeede8;
        --r-drum: #f8f7f3;
        --r-cement: #e2e0d9;
        --r-ink: #1c1f22;
        --r-ink-2: #4f5357;
        --r-line: #a7a9a6;
        --r-white: #ffffff;
        --r-yellow: #f2b705;
        --r-ok: #2e9a63;
        --r-wait: #c98a12;
        --r-over: #c8352b;
        --r-back: #2e6fbf;

        /* ── 리뉴얼(다크 인더스트리얼) 테마 토큰 ──
           위 --r-* 는 S4 인라인 SVG 목업과 S3 캔버스가 그대로 쓰므로 값을
           바꾸지 않는다. 페이지 면·글자·카드는 아래 --t-* 만 쓴다.
           기본은 다크, section.light 가 밝은 면으로 뒤집는다. */
        --t-bg: #0f1215;
        --t-bg-2: #12161a;
        --t-card: #1a1f25;
        --t-card-2: #1f252c;
        --t-line: rgba(255, 255, 255, 0.08);
        --t-line-2: rgba(255, 255, 255, 0.16);
        --t-text: #f4f3ef;
        --t-mute: #9aa1a9;
        --t-mute-2: #7d858e;
        --t-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
        --t-yellow: #f5b800;
        --t-yellow-2: #ffc93d;
        --t-yellow-tint: rgba(245, 184, 0, 0.12);
        --t-yellow-ink: #f5b800;
        --t-radius: 22px;
      }
      section.light,
      .light {
        --t-bg: #f4f3ef;
        --t-bg-2: #f4f3ef;
        --t-card: #ffffff;
        --t-card-2: #f4f3ef;
        --t-line: #e6e3db;
        --t-line-2: #d5d1c6;
        --t-text: #15181c;
        --t-mute: #5b6068;
        --t-mute-2: #8a8f96;
        --t-shadow: 0 12px 32px rgba(21, 24, 28, 0.07);
        --t-yellow-tint: #fff3c8;
        --t-yellow-ink: #7a5a00;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--t-bg);
        color: var(--t-text);
        font-family:
          "Noto Sans KR", system-ui, "Apple SD Gothic Neo", "Malgun Gothic",
          sans-serif;
        font-size: 17px;
        line-height: 1.65;
        word-break: keep-all;
        -webkit-font-smoothing: antialiased;
      }
      h1,
      h2,
      h3 {
        margin: 0;
        text-wrap: balance;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        color: inherit;
      }
      p {
        margin: 0;
      }
      .num {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .wrap {
        max-width: 1480px;
        margin: 0 auto;
        padding: 0 32px;
      }
      .lab {
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 13px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--t-mute);
      }
      /* 아이콘 상자 — 카드·기능·절차 머리에 하나씩. 옐로 틴트 위 옐로 선. */
      .icb {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--t-yellow-tint);
        color: var(--t-yellow-ink);
        flex: none;
      }
      .icb svg {
        display: block;
      }
      /* 섹션은 각자 면을 가진다 — 기본은 다크, .light 가 밝은 면.
         구분은 면의 명도 교차와 섹션 간격이 맡는다. */
      section {
        background: var(--t-bg);
        color: var(--t-text);
        padding: 128px 0;
      }
      section.light {
        background: var(--t-bg);
      }

      .h2 {
        font-size: 52px;
        font-weight: 900;
        line-height: 1.16;
        letter-spacing: -0.025em;
        margin-top: 16px;
        max-width: 17em;
      }
      .sub {
        color: var(--t-mute);
        max-width: 26em;
        margin-top: 18px;
        font-size: 18px;
        line-height: 1.7;
      }
      /* 섹션 머리 — 눈썹(옐로 4px 밑줄) 바로 아래 큰 제목.
         히어로 눈썹과 같은 형태라 페이지 전체가 한 어법을 쓴다.
         밑줄이 있어 13px 라벨도 52px 제목 옆에서 밀리지 않는다. */
      .shead {
        display: grid;
        margin-bottom: 56px;
      }
      /* 눈썹 — 옐로 글자 앞에 28px 옐로 선 하나. 히어로와 같은 어법. */
      .shead .lab,
      .hero .eb {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 13px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--t-yellow);
      }
      .shead .lab::before,
      .hero .eb::before {
        content: "";
        width: 28px;
        height: 2px;
        background: var(--t-yellow);
        display: block;
        flex: none;
      }
      /* 히어로 눈썹만 잉크다 — 막을 걷어 드럼 영상이 제 색으로 서는 자리라
         13px 옐로는 1.26:1 로 아예 안 보인다(잉크는 7.34:1). 앞 선도 같이
         잉크로 뒤집는다. 섹션 눈썹은 어두운 면 위에 얹히므로 옐로 그대로다. */
      .hero .eb {
        color: var(--r-ink);
      }
      .hero .eb::before {
        background: var(--r-ink);
      }
      .shead .lab {
        justify-self: start;
        margin-bottom: 22px;
      }
      .shead .h2 {
        margin-top: 0;
      }
      .shead .sub {
        margin-top: 20px;
      }
      /* 리드문이 있으면 제목 오른쪽에 아래 맞춤 — 넓은 폭은 여기서 쓴다 */
      .shead.has-lead {
        grid-template-columns: 1.15fr 0.85fr;
        column-gap: 64px;
        align-items: end;
      }
      .shead.has-lead .lab {
        grid-column: 1 / -1;
      }
      .shead.has-lead .sub {
        margin-top: 0;
        padding-bottom: 10px;
        justify-self: end;
        max-width: 24em;
      }
      /* 자체 2단 안(S3·S9)에서는 아래 여백을 바깥 그리드에 맡긴다 */
      .s3 .shead,
      .contact .shead {
        margin-bottom: 0;
      }
      /* 좁은 단 안에 들어가는 제목은 한 단계 낮춘다 */
      .s3 .h2,
      .contact .h2 {
        font-size: 42px;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 52px;
        padding: 0 26px;
        border-radius: 12px;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 16px;
        line-height: 1.2;
        cursor: pointer;
        border: 1px solid transparent;
        text-decoration: none;
        transition:
          background 0.18s ease,
          color 0.18s ease,
          border-color 0.18s ease;
      }
      .btn svg {
        width: 18px;
        height: 18px;
        flex: none;
      }
      /* 주 버튼 — 옐로 면에 잉크 글자 */
      .btn-a {
        background: var(--t-yellow);
        color: #15181c;
      }
      .btn-a:hover {
        background: var(--t-yellow-2);
      }
      /* 보조 버튼 — 면을 살짝 채운 유리 + 옅은 윤곽 */
      .btn-b {
        background: rgba(255, 255, 255, 0.06);
        color: var(--t-text);
        border-color: var(--t-line-2);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
      }
      .btn-b:hover {
        background: rgba(255, 255, 255, 0.12);
      }
      .light .btn-b {
        background: rgba(21, 24, 28, 0.04);
        border-color: rgba(21, 24, 28, 0.22);
      }
      .light .btn-b:hover {
        background: rgba(21, 24, 28, 0.08);
      }
      .btn:focus-visible {
        outline: 2px solid var(--r-back);
        outline-offset: 2px;
      }
      .btn-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
      }
      .card {
        background: var(--t-card);
        border: 1px solid var(--t-line);
        border-radius: var(--t-radius);
        padding: 34px;
        box-shadow: var(--t-shadow);
      }
      .chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 30px;
        padding: 0 12px;
        border-radius: 999px;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-size: 13px;
        font-weight: 800;
        border: 1px solid var(--t-line-2);
        color: var(--t-text);
        margin: 0 6px 6px 0;
        background: rgba(255, 255, 255, 0.06);
      }
      .light .chip {
        background: var(--t-card-2);
      }
      .chip i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
      }
      /* 단위 — 큰 숫자 옆에 옐로 글자로만. 박스를 씌우지 않는다. */
      .unit {
        color: var(--t-yellow);
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 18px;
        margin-left: 8px;
        vertical-align: baseline;
      }
      .note {
        font-size: 12px;
        color: var(--t-mute-2);
      }
      /* hero */
      .hero {
        position: relative;
        overflow: hidden;
        background: var(--t-bg);
        color: #ffffff;
        /* 쉴 때 막의 알파. 0 이면 첫 화면에 검정이 한 점도 없다 —
           영상이 제 색 그대로 선다. 히어로 카피 대비(흰 2.26:1)를
           되돌리려면 이 한 값만 올린다(0.12–0.18 이면 3:1 을 넘는다). */
        --veil-rest: 0;
        /* 차오르는 어둠에서 검정이 꽉 차는 높이. 쉴 때 144% 인 것이 핵심이다 —
           가장 위 정지점(edge − 44%)이 딱 100% 라 히어로 안에 검정이 0 이다.
           100% 로 내리면 아래 44% 에 그늘이 깔린다. 스크립트가 −20% 까지
           끌어올리고, 스크립트가 죽으면 이 기본값으로 서서 막이 사라진다. */
        --edge: 144%;
      }
      /* 쉴 때 막 — 지금은 알파 0 이라 아무것도 그리지 않는다. */
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: rgba(15, 18, 21, var(--veil-rest));
      }
      /* 스크롤로 차오르는 어둠 — 굴리는 만큼 바닥에서 위로 자라 아래
         다크 섹션과 같은 #0F1215 로 닫힌다. 전체를 opacity 로 덮지 않는다:
         그러면 히어로 밑변이 화면 한가운데 올 때 막이 아직 절반이라
         S2 와의 이음매가 반쯤 열린 채 지나간다. 바닥부터 닫는 이 방식이라야
         어느 스크롤 위치에서도 경계선이 뜨지 않는다.
         <video> 뒤·.inner 앞에 두므로 z-index 를 새로 잡을 일이 없다. */
      .hero .hveil {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
          to bottom,
          rgba(15, 18, 21, 0) calc(var(--edge) - 44%),
          #0f1215 var(--edge)
        );
      }
      .hero .drum {
        display: block;
        width: 100%;
        /* 가로는 항상 꽉 채우고, 한 화면을 넘는 만큼만 위아래를 잘라낸다.
           높이 상한은 하단 고정 nav 66px을 뺀 뷰포트 높이 */
        aspect-ratio: 16 / 9;
        max-height: calc(100vh - 70px);
        max-height: calc(100svh - 70px);
        object-fit: cover;
        object-position: center;
        /* 사진 드럼: 어두운 막 아래서 옐로 차체가 살아 있게 채도는 두고 명도만 조금 */
        filter: brightness(0.96) contrast(1.02) saturate(0.9);
        /* 첫 프레임 디코드 전 검은 박스 방지 */
        background: var(--t-bg);
        position: relative;
        z-index: 0;
      }
      .hero .inner {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: grid;
        place-items: center;
        text-align: center;
        padding: 24px;
      }
      .hero .inner > div {
        max-width: 940px;
      }
      .hero h1 {
        /* 시안 A 기준 88px — 강조 단어가 옐로라 하한은 64px */
        font-size: clamp(64px, 6.1vw, 88px);
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -0.03em;
        margin-top: 22px;
        color: #ffffff;
        /* §2·§4 의 "그림자 없음" 예외 한 곳 — 밝기가 오르내리는 드럼 영상 위라
           글자가 바탕에서 떨어져 나와야 읽힌다. 번지는 느낌이 나지 않게
           잉크색으로 짧게만 준다(넓은 블러·오프셋 금지). */
        text-shadow:
          0 1px 2px rgba(28, 31, 34, 0.18),
          0 2px 10px rgba(28, 31, 34, 0.22);
      }
      .hero h1 em {
        font-style: normal;
        color: var(--t-yellow);
        /* 옐로는 드럼 화이트 위 대비가 1.8:1 뿐 — 강조 단어만 한 단계 진하게 */
        text-shadow:
          0 1px 3px rgba(28, 31, 34, 0.3),
          0 2px 12px rgba(28, 31, 34, 0.38);
      }
      .hero p {
        max-width: 40em;
        margin: 26px auto 40px;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.82);
      }
      .hero .btn-b {
        color: #ffffff;
      }

      /* 히어로 하단 가운데 — 아래로 내려가라는 표시. 누르는 요소가 아니다.
         중앙 정렬을 margin 으로 잡는다. transform 은 애니메이션이 쓰므로
         translateX(-50%) 로 가운데를 맞추면 서로 덮어쓴다. */
      .scrolldown {
        position: absolute;
        z-index: 2;
        left: 50%;
        bottom: 26px;
        width: 36px;
        height: 36px;
        margin-left: -18px;
        color: rgba(255, 255, 255, 0.85);
        pointer-events: none;
      }
      .scrolldown svg {
        display: block;
        width: 36px;
        height: 36px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      @keyframes bob {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(7px);
        }
      }
      @media (prefers-reduced-motion: no-preference) {
        .scrolldown {
          animation: bob 1.9s ease-in-out infinite;
        }
        .shot {
          transition:
            opacity 0.35s ease,
            visibility 0.35s;
        }
      }

      /* S2 */
      .g3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 48px;
      }
      .pain .big {
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-size: 64px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums;
        margin-top: 26px;
      }
      .pain .q {
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 22px;
        line-height: 1.35;
        margin-top: 18px;
        letter-spacing: -0.01em;
      }
      .pain .a {
        color: var(--t-mute);
        font-size: 16px;
        line-height: 1.7;
        margin-top: 12px;
      }

      /* S3 — 트럭이 멈춰 서는 자리마다 기록 한 줄.
         핀은 스크립트가 살아 있을 때만 건다. 꺼져 있으면 트랙도 없고
         일곱 줄이 처음부터 다 보이는 평범한 섹션으로 남는다.
         **트랙에서 한 화면을 뺀 만큼이 진행도 0 → 1 에 쓰는 스크롤 거리다** —
         360vh 면 2.6화면을 굴려야 하루가 다 지나간다(220vh 는 1.2화면이라
         조금만 굴려도 장면이 확확 넘어갔다).
         속도를 바꾸려면 이 360vh 하나만 만지면 된다. */
      .js #s3 {
        padding: 0;
      }
      .js .s3track {
        height: 440vh;
      }
      .js .s3stick {
        position: sticky;
        top: 0;
        min-height: 100vh;
        min-height: 100svh;
        display: grid;
        align-items: center;
        padding: 72px 0 80px;
      }

      /* S3 */
      /* 한 단이다 — 장면이 칸 전체를 쓰고 기록은 그 위에 얹힌다.
         오른쪽에 기록 카드를 세워 두던 2단은 걷어냈다 — 그림과 기록이
         따로 읽혀서, 한 줄이 그림 위에서 일어나게 바꿨다. */
      .s3 {
        display: block;
      }
      /* 기록 — 붙박이가 걸린 곳에서는 장면 위에 뜨는 기록 카드 한 줄,
         그 밖에서는 장면 아래에 놓이는 흰 카드 목록. 마크업은 하나다.
         목록 쪽이 기본값이라 스크립트가 꺼져도 일곱 줄이 그대로 남는다. */
      .s3rec {
        margin-top: 26px;
        background: var(--t-card);
        border: 1px solid var(--t-line);
        border-radius: 22px;
        padding: 22px 26px;
        box-shadow: 0 20px 44px rgba(21, 24, 28, 0.1);
      }
      .s3meta {
        display: flex;
        justify-content: space-between;
        gap: 12px;
      }
      .s3caps {
        display: grid;
        font-size: 17px;
        margin-top: 6px;
      }
      .cap {
        /* 등장 시점은 스크롤이 정한다. 지연은 0 */
        --dy: 10px;
        padding: 12px 0;
        border-bottom: 1px dashed var(--t-line-2);
      }
      .cap:last-child {
        border-bottom: none;
      }
      .capin {
        display: grid;
        grid-template-columns: 58px 1fr auto;
        gap: 10px;
        align-items: baseline;
      }
      .cap .t {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .cap .d {
        color: var(--t-mute);
        font-size: 14px;
      }
      .cap b {
        color: #b84a1f;
      }
      /* 운반시간 게이지 — 가로 막대. 원형은 132px 을 차지해 카드가 길어졌다.
         막대는 알약형(§4)이고 옐로로 기준 대비 경과 비율을 채운다. */
      .cap-sum .t {
        font-size: 22px;
      }
      .cap-sum .d {
        grid-column: 1 / -1;
      }
      .bar {
        display: block;
        grid-column: 1 / -1;
        margin-top: 12px;
        height: 8px;
        background: rgba(21, 24, 28, 0.12);
        border-radius: 999px;
        overflow: hidden;
      }
      .bar span {
        display: block;
        height: 100%;
        background: var(--t-yellow);
        border-radius: 999px;
      }
      /* 공사장 장면 — construction 위에 rebar → cement-floor → 레미콘을
         캔버스 한 장에 겹친다. 3:2 는 원본 비율이라 늘어나지 않는다.
         붙박이 안에 들어가야 하므로 폭을 화면 높이로도 묶는다 — 이 값을
         키우면 세로 예산을 넘겨 스테이지 아래가 잘린다(§4). */
      .s3scene {
        margin: 30px 0 0;
        width: 100%;
      }
      /* 높이는 캔버스의 고유 비율(1536×1024)이 정한다 — aspect-ratio 를 쓰지
         않아 오래된 사파리에서도 3:2 가 유지된다. 스크립트가 배킹 스토어를
         키울 때도 같은 비율을 지킨다. */
      .s3scene canvas {
        display: block;
        width: 100%;
        height: auto;
      }

      /* 붙박이가 걸리는 구간에서만 — 제목 아래 남는 세로를 장면이 직접
         먹는다. 여기서만 캔버스가 높이로 서고 폭이 따라온다(3:2 고정).
         상수로 빼두면 제목이 한 줄 늘 때마다 다시 재야 해서 flex 로 둔다.
         조건은 핀 해제 조건을 그대로 뒤집은 값이고, 「움직임 줄이기」에서도
         핀을 푸므로 no-preference 까지 같이 본다. 스크립트의 `over` 질의가
         이 세 조건을 그대로 본다 — 한쪽만 고치지 않는다. */
      @media (min-width: 901px) and (min-height: 721px) and (prefers-reduced-motion: no-preference),
        (max-width: 900px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
        /* 장면이 남는 세로를 먹으려면 위에서부터 높이가 확정돼 있어야 한다:
           붙박이 → .wrap.s3 → .s3col → .s3scene → 캔버스. 한 군데라도
           auto 면 캔버스가 고유 크기로 부풀어 붙박이를 넘긴다. */
        .js .s3stick {
          height: 100vh;
          height: 100svh;
          align-items: stretch;
          /* 행이 auto 면 내용만큼 자라 컨테이너를 넘는다 — 행을 묶어야
             align-items:stretch 가 "남는 만큼 채우기"로 동작한다 */
          grid-template-rows: minmax(0, 1fr);
        }
        /* 장면이 화면을 채우고 제목과 기록이 그 위에 얹힌다. .wrap.s3 는
           제목만 담는 틀로 남는다 — 본문 폭(1480)을 지키는 것은 제목이고,
           장면과 기록은 화면 끝까지 간다.
           **width:100% 가 필수다** — .wrap 의 margin:0 auto 때문에 그리드
           항목이 stretch 되지 않고 max-content(제목 길이 726px)로 줄어든다. */
        .js .s3 {
          display: block;
          width: 100%;
        }
        /* 장면은 붙박이(.s3stick)를 기준으로 자리를 잡는다 — 1480px 본문
           폭에 갇히지 않고 화면 좌우 끝까지 간다. 그러려면 사이에 있는
           .wrap.s3 · .s3col 이 positioned 가 아니어야 한다. 100vw + 음수
           마진은 쓰지 않는다(스크롤바 폭만큼 가로 스크롤이 생긴다 — §9). */
        .js .s3col {
          position: static;
        }
        /* 원본은 둘레가 빈 아이소메트릭 한 덩어리다 — 블록이 든 띠는
           y 64–984 이고 위 64 · 아래 40 은 투명하다. **아래 40 은 비워 두지
           않는다** — 바닥 그림자가 블록 밑(y 994)에서 번져 y 1022 까지
           가므로, 내용 띠를 y 64–1024(1024 중 960)로 잡아 그림자 끝까지
           화면에 들어오게 한다. 위만 여백을 건너뛰는 셈이다.
           그래서 상자를 그만큼 키우고(1024/960 = 106.7%) 위로 끌어올려
           (-64/960 = -6.667%), **내용 띠가 화면 높이에 딱 맞게** 한다.
           넘치는 부분은 투명한 여백이라 아무것도 가리지 않는다.
           이 두 값과 위 귀퉁이 여백(6.25%)은 같은 y 64 · 1024 에서 나온다 —
           그림이나 그림자를 갈면 셋을 같이 다시 잰다(아래는 0 이다). */
        .js .s3scene {
          /* 위쪽 여백 — 그림이 화면 끝에 닿으면 답답하다. 내용 띠를
             이만큼 내려 놓고 아래는 그대로 화면 끝에 맞춘다.
             여백을 조절하려면 이 값 하나만 만지면 된다. */
          --s3-top: 6%;
          position: absolute;
          left: 0;
          right: 0;
          /* (화면 - 여백)이 내용 띠(960/1024)가 되도록 상자를 키우고,
             그만큼 위로 끌어올린다. 1.0667 = 1024/960, 0.06667 = 64/960. */
          height: calc((100% - var(--s3-top)) * 1.0667);
          top: calc(var(--s3-top) - (100% - var(--s3-top)) * 0.06667);
          margin: 0;
          /* 상자가 붙박이 위아래로 조금 넘치므로(투명한 여백) 이웃 섹션의
             클릭을 가로채지 않게 한다. 장식이라 잃을 것이 없고, 안쪽
             기록 층도 pointer-events 를 받지 않는다. */
          pointer-events: none;
        }
        /* 제목을 좁게 잡아 둬야 기록 카드가 오른쪽으로 지나갈 수 있다 —
           가로로 겹치는 자리에서는 스크립트가 카드를 제목 아래로 내린다. */
        .js .s3col > .shead {
          position: relative;
          z-index: 2;
          max-width: min(760px, 60%);
        }
        /* 기록을 장면 위로 — is-over 는 스크립트가 캔버스를 잡았을 때만
           붙인다. 그러지 못한 브라우저에서는 목록 그대로 남는다.
           이 층의 자리(left/top/width/height)는 스크립트가 **그려진 그림의
           사각형**에 맞춰 넣는다 — 그래야 장면 좌표를 그대로 쓸 수 있고,
           네 귀퉁이에 붙는 것들(차량 라벨·운반시간)이 그림 모서리에 선다. */
        .js .s3rec.is-over {
          position: absolute;
          margin: 0;
          padding: 0;
          background: none;
          border: 0;
          border-radius: 0;
          /* 면·윤곽만 풀고 그림자를 남겨 두면 이미지 둘레에 사각 그늘이
             진다 — 캔버스 안 바닥 그림자와 헷갈리기 쉬운 자리다.
             목록일 때는 진짜 카드이므로 그림자를 그대로 둔다. */
          box-shadow: none;
          z-index: 2;
          pointer-events: none;
        }
        .js .is-over .s3caps {
          display: block;
          margin: 0;
        }
        /* 귀퉁이에 붙는 것들은 그림의 **내용 띠** 모서리 기준이다 —
           층은 빈 여백까지 포함한 그림 전체라, 위로는 여백(6.25%)을
           건너뛰어야 화면 모서리에 선다. 아래는 건너뛸 여백이 없다 —
           내용 띠가 그림 바닥(y 1024)까지라 층 아래 끝이 곧 화면 끝이다.
           오른쪽 위에는 아무것도 두지 않는다 — 상자 하나가 하늘을 가려
           답답해 보였다. 목업 표시(§6)만 왼쪽 아래에 한 줄로 남기고,
           차량·기사 줄은 붙박이가 풀린 목록 쪽에 그대로 있다. */
        .js .is-over .s3meta {
          position: absolute;
          left: 24px;
          bottom: 24px;
        }
        .js .is-over .s3meta .lab {
          display: none;
        }
        /* 목업 표시 — 작은 알약 태그 */
        .js .is-over .s3meta .note {
          font-size: 11px;
          color: var(--t-mute-2);
          border: 1px solid var(--t-line-2);
          border-radius: 999px;
          padding: 3px 10px;
          background: rgba(255, 255, 255, 0.6);
        }
        /* 한 줄씩 뜨는 기록 — 스크립트가 트럭 위에 세운다. left/top 은
           카드의 가운데 아래 끝이다(transform 으로 잡는다).
           떠오르는 움직임은 안쪽 .capin 이 맡는다 — 바깥 .cap 은 transform
           을 자리 잡는 데 쓰고 있어 건드리지 않는다. **.cap 에는 보이는
           것을 붙이지 않는다**: 사라지는 것은 .capin 뿐이라, 여기 그린
           것(점·점선 따위)은 줄이 바뀌어도 장면에 남는다. */
        .js .is-over .cap {
          position: absolute;
          left: 50%;
          top: 60%;
          padding: 0;
          border: 0;
          /* 자리값이 화면 끝에 가까우면 절대 위치 상자는 남는 폭에 맞춰
             줄어든다 — max-content 로 묶어 폭이 자리에 따라 흔들리지 않게 한다.
             스크립트가 offsetWidth 로 가운데를 잡으므로 이 값이 어긋나면
             카드가 한쪽으로 밀린다. */
          width: max-content;
          transform: translate(-50%, -100%);
          /* 트럭은 48px 칸 단위로 끊겨 움직인다(GPS 는 점으로 찍힌다).
             카드가 그 걸음을 그대로 밟으면 튀어 보이므로 미끄러져 따라가게
             한다 — 끊기는 것은 트럭 쪽만 남긴다. 줄이 바뀌는 프레임에는
             스크립트가 이 미끄러짐을 한 번 끊는다(transition:none). */
          transition:
            left 0.3s cubic-bezier(0.22, 0.7, 0.26, 1),
            top 0.3s cubic-bezier(0.22, 0.7, 0.26, 1);
        }
        /* 시각 → 구간 한 줄, 그 아래 근거 한 줄. **밝은 면의 카드 어법
           그대로다** — --t-card(흰색) · 1px --t-line · 22px 곡률 · --t-shadow.
           S3 가 .light 라 장면 위에서 흰 카드가 그대로 읽힌다. 글자·게이지
           색도 목록일 때와 같은 값을 쓰므로 따로 덮어쓰지 않는다
           (초과 숫자 #B84A1F, 근거 줄 --t-mute, 막대 바탕 rgba(21,24,28,.12)). */
        .js .is-over .capin {
          display: grid;
          grid-template-columns: auto 1fr;
          align-items: baseline;
          gap: 1px 12px;
          background: var(--t-card);
          color: var(--t-text);
          border: 1px solid var(--t-line);
          border-radius: 22px;
          padding: 14px 20px 15px;
          box-shadow: var(--t-shadow);
        }
        .js .is-over .cap .t {
          font-size: 20px;
          white-space: nowrap;
        }
        .js .is-over .cap .e {
          font-family: "Pretendard", "Noto Sans KR", sans-serif;
          font-weight: 800;
          font-size: 16px;
          white-space: nowrap;
        }
        .js .is-over .cap .d {
          grid-column: 1 / -1;
          font-size: 13px;
        }
        /* 총 운반시간 — 그림 오른쪽 아래. 트럭이 떠난 자리를 대신한다. */
        .js .is-over .cap-sum {
          left: auto;
          top: auto;
          right: 24px;
          bottom: 24px;
          width: 340px;
          transform: none;
        }
        .js .is-over .cap-sum .capin {
          gap: 2px 12px;
          padding: 16px 20px 18px;
        }
        .js .is-over .cap-sum .t {
          font-size: 30px;
          font-weight: 900;
          font-family: "Pretendard", "Noto Sans KR", sans-serif;
        }
        /* 상자는 화면 전체이고 그림은 **잘리지 않는다**(contain) — 가로로
           넓은 화면에서는 세로가 화면에 꽉 차고 좌우에 바탕 결이 남는다.
           cover 로 바꾸면 위아래(도로 앞자락과 뒤 건물)가 잘려 나간다.
           스크립트도 같은 계산으로 트럭 좌표를 옮기므로 한쪽만 고치지 않는다. */
        .js .s3scene canvas {
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
        }
      }

      /* 세로로 긴 화면(폰·태블릿 세로)의 붙박이 — 동작은 데스크톱과 같고
         자리 잡는 법만 다르다. 장면은 3:2 라 좁은 화면에서는 **폭에 묶인다**:
         화면 높이를 채우려고 절대 배치를 쓰면 위아래로 빈 띠만 커진다.
         그래서 장면을 흐름에 두고 붙박이가 세로 가운데로 모은다.
         **`position: relative` 는 필수다** — 기록 층(`.s3rec.is-over`)의
         자리값이 캔버스 상자 기준이라, 여기가 positioned 가 아니면 층이
         붙박이 전체를 기준으로 잡혀 카드가 엉뚱한 데 선다. */
      @media (max-width: 900px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
        .js .s3scene {
          position: relative;
          inset: auto;
          height: auto;
          margin: 22px 0 0;
        }
        .js .s3scene canvas {
          height: auto;
        }
        /* 제목이 장면 위가 아니라 **위쪽에** 있으므로 폭을 줄일 이유가 없다 */
        .js .s3col > .shead {
          max-width: none;
        }
        /* 데스크톱은 장면이 남는 세로를 먹으려고 행을 1fr 로 묶지만,
           여기서는 장면 높이가 폭으로 정해지므로 내용만큼만 쓰고
           붙박이가 세로 가운데로 모은다. */
        .js .s3stick {
          align-items: center;
          grid-template-rows: auto;
          padding: 24px 0 28px;
        }
        /* 폰에서 4.4화면은 너무 길다 — 2화면이 진행도 0 → 1 에 쓰인다 */
        .js .s3track {
          height: 300vh;
        }
        /* 흰 쪽지는 장면 폭이 360px 남짓이라 한 단계 줄인다 */
        .js .is-over .capin {
          gap: 1px 9px;
          border-radius: 16px;
          padding: 9px 13px 10px;
        }
        .js .is-over .cap .t {
          font-size: 17px;
        }
        .js .is-over .cap .e {
          font-size: 13px;
        }
        .js .is-over .cap .d {
          font-size: 11px;
        }
        .js .is-over .cap-sum {
          right: 10px;
          bottom: 10px;
          width: min(230px, 64%);
        }
        .js .is-over .cap-sum .capin {
          padding: 10px 12px 12px;
        }
        .js .is-over .cap-sum .t {
          font-size: 19px;
        }
        .js .is-over .s3meta {
          left: 10px;
          bottom: 10px;
        }
      }

      /* S4 */
      /* 탭 — 한 틀 안에 든 분할 버튼. 선택은 옐로 면. */
      .tabs {
        display: inline-flex;
        gap: 6px;
        margin-top: 40px;
        flex-wrap: wrap;
        background: var(--t-card);
        border: 1px solid var(--t-line);
        border-radius: 14px;
        padding: 6px;
      }
      .tabs button {
        background: transparent;
        border: 0;
        border-radius: 10px;
        color: var(--t-mute);
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 15px;
        min-height: 44px;
        padding: 0 20px;
        cursor: pointer;
        transition:
          background 0.18s ease,
          color 0.18s ease;
      }
      .tabs button:hover {
        color: var(--t-text);
      }
      .tabs button[aria-current="true"] {
        background: var(--t-yellow);
        color: #15181c;
      }
      .tabs button:focus-visible {
        outline: 2px solid var(--r-back);
        outline-offset: 2px;
      }
      /* 왼쪽 화면 자리는 붙박이로 두고, 오른쪽 묶음이 스크롤로 지나간다 */
      .s4grid {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 40px;
        align-items: start;
        margin-top: 0;
      }
      .stage {
        position: sticky;
        top: 40px;
      }
      .stage .tabs {
        margin: 0 0 22px;
      }
      /* 화면을 브라우저 창 틀에 넣는다 — 빈 4:3 사각형만 놓으면 허전하고
         "이건 화면이다"가 읽히지 않는다. 틀은 카드 어법 그대로다:
         2px 잉크 윤곽 · 22px 곡률 · 그림자 없음(§4). */
      .browser {
        border: 1px solid var(--t-line-2);
        border-radius: 18px;
        background: var(--t-card);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
        /* 안의 화면 모서리를 틀 곡률로 자른다 */
        overflow: hidden;
      }
      /* macOS 창 어법 — 왼쪽 신호등 셋뿐이다. 주소 칸은 두지 않는다:
         도메인이 미확정이라 자리표시(`fms.[회사명].co.kr`)를 넣어 뒀는데,
         화면을 설명하지 않으면서 눈만 끌었다. 창 머리는 "이건 브라우저
         화면이다"만 말하면 된다. */
      .chrome {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 42px;
        padding: 0 12px 0 16px;
        background: var(--t-card);
        border-bottom: 1px solid var(--t-line);
      }
      /* 신호등 — 맥의 원색을 그대로 쓰지 않고 §2 차량 상태 세 색을 쓴다.
         같은 색상환인데 채도가 눌려 있어 페이지에서 튀지 않는다.
         (--r-yellow 가 아니라 --r-wait 다 — 옐로 여섯 자리는 그대로다.) */
      .chrome .dots {
        display: inline-flex;
        gap: 8px;
      }
      .chrome .dots i {
        width: 11px;
        height: 11px;
        border-radius: 999px;
        background: #3a4149;
      }
      /* 이 화면이 무엇인지 말하는 뱃지 — **창 머리 안**이다.
         틀 아래 12px 캡션 하나로는 놓치기 쉬웠고, 세 칸이 같은 창 틀·같은
         4:3·같은 자리라 구별할 단서가 그것뿐이었다. 여기 두면 그림과 함께
         움직여 빠르게 굴려도, 캡처해서 퍼가도 따라간다.
         뱃지는 화면마다 **다른 말을 한다** — 같은 말이면 아무것도 구별하지
         못한다(예전에는 실제 제품 캡처에까지 「예시 화면」이 붙어 있었다). */
      .shotbadge {
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 11px;
        letter-spacing: 0.06em;
        line-height: 1;
        border-radius: 999px;
        padding: 5px 10px;
        white-space: nowrap;
      }
      /* 실제 캡처 — 사실을 적는 줄이라 조용하게 둔다 */
      .shotbadge[data-kind="real"] {
        color: var(--t-mute);
      }
      /* 목업 — 눈에 **걸려야** 하므로 아이콘 상자와 같은 틴트 알약으로
         세운다(§2.4 · §6). 목업 쪽만 소리를 내는 것이 이 짝의 요점이다. */
      .shotbadge[data-kind="mock"] {
        background: var(--t-yellow-tint);
        color: var(--t-yellow-ink);
      }
      .shotbox {
        position: relative;
        aspect-ratio: 4 / 3;
        background: var(--r-drum);
        overflow: hidden;
      }
      .shotnote {
        display: block;
        margin-top: 10px;
        text-align: right;
      }
      /* 묶음 안으로 옮겨 심은 화면(좁은 화면 전용, 스크립트가 만든다).
         여기서는 세 화면이 각자 제 자리에 있으므로 겹쳐 두지 않는다. */
      .gshot {
        margin-top: 18px;
      }
      .gshot .shot {
        opacity: 1;
        visibility: visible;
      }
      .stage[hidden] {
        display: none;
      }
      /* 이미지가 들어오면 .shot 안의 안내 문구를 <img> 로 갈아끼우기만 하면 된다 */
      .shot {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        text-align: center;
        padding: 24px;
        font-size: 14px;
        line-height: 1.6;
        color: var(--r-ink-2);
        opacity: 0;
        visibility: hidden;
      }
      .shot.on {
        opacity: 1;
        visibility: visible;
      }
      /* 화면이 들어간 칸은 여백 없이 꽉 채운다 — "틀 없이 화면만"(§4) */
      .shot.media {
        padding: 0;
        display: block;
      }
      .shot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      /* 아직 관제 화면이 없는 두 칸은 같은 팔레트로 그린 목업이다.
         viewBox 로 그려 두면 칸 크기가 어떻게 변해도 비례가 유지된다 —
         컨테이너 질의나 스크립트가 필요 없다. */
      .shotsvg {
        width: 100%;
        height: 100%;
        display: block;
      }
      /* 색은 CSS 로만 준다 — presentation attribute 에 var() 를 넣지 않는다
         (브라우저에 따라 먹지 않는다). 쓰는 색은 §2 토큰뿐. */
      /* 기본값은 <svg> 에 걸어 **상속**시킨다. text 선택자에 걸면 CSS 가
         presentation attribute 를 이겨서 font-size="22" 같은 값이 전부
         무시된다(상속은 attribute 에 진다 — 그래서 여기 둔다). */
      .shotsvg {
        font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
        font-size: 15px;
        fill: var(--r-ink);
      }
      .shotsvg .n {
        font-family: "Noto Sans KR", sans-serif;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .shotsvg .hd {
        font-weight: 800;
      }
      .shotsvg .lb {
        font-weight: 800;
        font-size: 11px;
        letter-spacing: 0.12em;
        fill: var(--r-ink-2);
      }
      .shotsvg .sm {
        font-size: 13px;
        fill: var(--r-ink-2);
      }
      .shotsvg .over {
        fill: var(--r-over);
      }
      .shotsvg .paper {
        fill: var(--r-white);
      }
      .shotsvg .rule {
        fill: var(--r-ink);
      }
      .shotsvg .track {
        fill: var(--r-cement);
      }
      .shotsvg .bar {
        fill: var(--r-ink);
      }
      .shotsvg .bar-over {
        fill: var(--r-over);
      }
      .shotsvg .unitbox {
        fill: var(--r-yellow);
      }
      /* 상태 점 — 오른쪽 카드의 칩과 같은 색을 쓴다(주행·정차·종료) */
      .shotsvg .d-ok {
        fill: var(--r-ok);
      }
      .shotsvg .d-wait {
        fill: var(--r-wait);
      }
      .shotsvg .d-end {
        fill: var(--r-line);
      }
      .shotsvg .gring {
        fill: none;
        stroke: var(--r-ink);
        stroke-width: 3;
      }
      .shotsvg .arc {
        fill: none;
        stroke: var(--r-yellow);
        stroke-width: 12;
      }
      .shotsvg .dl {
        stroke: var(--r-line);
        stroke-dasharray: 3 4;
      }
      .shotsvg .mark {
        stroke: var(--r-ink);
        stroke-width: 2;
        stroke-dasharray: 4 4;
      }
      .shotsvg .card {
        fill: var(--r-white);
        stroke: var(--r-ink);
        stroke-width: 2;
      }
      .fgroup {
        scroll-margin-top: 40px;
      }
      .fgroup + .fgroup {
        margin-top: 64px;
      }
      .fgroup > .lab {
        color: var(--t-yellow);
      }
      .gtitle {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.015em;
        margin: 10px 0 0;
      }
      .gnote {
        color: var(--t-mute);
        font-size: 15px;
        margin-top: 6px;
      }
      .fgroup .card {
        margin-top: 16px;
      }
      /* 기능 카드 — 아이콘 상자 + 글 두 단 */
      .feat {
        display: flex;
        gap: 20px;
        padding: 26px 28px;
        border-radius: 18px;
        box-shadow: none;
      }
      .feat .icb {
        width: 44px;
        height: 44px;
      }
      .feat > div {
        min-width: 0;
      }
      .feat .lab {
        color: var(--t-yellow);
        font-size: 12px;
        letter-spacing: 0.08em;
      }
      .feat h4 {
        margin: 0;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        color: inherit;
        font-size: 20px;
        font-weight: 800;
        line-height: 1.3;
        margin-top: 6px;
        letter-spacing: -0.01em;
      }
      .feat p {
        color: var(--t-mute);
        font-size: 15px;
        margin-top: 8px;
      }
      .feat .stat {
        margin-top: 14px;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-size: 30px;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        line-height: 1;
      }
      .feat .stat .unit {
        font-size: 13px;
        margin-left: 6px;
      }
      .feat .chips {
        margin-top: 14px;
      }

      /* S5 — 규칙 카드 4장 + 구축 절차 카드 4장 */
      .wall {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 0;
      }
      .signcard {
        background: var(--t-card);
        border: 1px solid var(--t-line);
        border-radius: var(--t-radius);
        box-shadow: var(--t-shadow);
        padding: 28px;
        display: grid;
        grid-template-rows: auto 1fr;
      }
      .signcard .top .k {
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 12px;
        letter-spacing: 0.04em;
        color: var(--t-yellow-ink);
        background: var(--t-yellow-tint);
        border-radius: 999px;
        padding: 4px 10px;
        display: inline-block;
      }
      .signcard .top b {
        display: block;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 22px;
        line-height: 1.2;
        margin-top: 12px;
        letter-spacing: -0.01em;
      }
      .signcard .opt {
        padding: 20px 0 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      /* 규칙 줄은 눌러서 바꿔 보는 버튼이다 — 44px 터치 타깃을 지킨다 */
      .signcard .opt button {
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        padding: 0 16px;
        min-height: 44px;
        border: 1px solid transparent;
        border-radius: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        color: var(--t-text);
        background: var(--t-card-2);
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition:
          background 0.18s ease,
          color 0.18s ease;
      }
      .signcard .opt button:hover {
        border-color: var(--t-line-2);
      }
      .signcard .opt button:focus-visible {
        outline: 2px solid var(--r-back);
        outline-offset: 2px;
      }
      .signcard .opt button.more {
        background: transparent;
        border: 1px dashed var(--t-line-2);
        color: var(--t-mute-2);
      }
      .signcard .opt button.more::after {
        content: "+";
        font-weight: 700;
        margin-left: 10px;
      }
      .signcard .opt button.on,
      .signcard .opt button.on:hover {
        background: #15181c;
        color: #ffffff;
        border-color: #15181c;
      }
      .signcard .opt button.on::after {
        content: "✓";
        font-weight: 700;
        margin-left: 10px;
        color: var(--t-yellow);
      }
      .rail {
        margin-top: 64px;
      }
      .rail .title {
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 13px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--t-mute);
        margin-bottom: 18px;
      }
      .rail .steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
      .rail .steps > div {
        background: var(--t-card);
        border: 1px solid var(--t-line);
        border-radius: 20px;
        box-shadow: var(--t-shadow);
        padding: 28px;
        position: relative;
      }
      .rail .steps .n {
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 900;
        font-size: 13px;
        letter-spacing: 0.1em;
        color: var(--t-yellow-ink);
        display: inline-block;
      }
      .rail .steps .n::before {
        content: "STEP ";
      }
      .rail .steps .icb {
        position: absolute;
        right: 24px;
        top: 22px;
        width: 40px;
        height: 40px;
      }
      .rail .steps b {
        display: block;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 20px;
        margin-top: 14px;
        line-height: 1.35;
        padding-right: 40px;
      }
      .rail .steps p {
        font-size: 15px;
        line-height: 1.65;
        color: var(--t-mute);
        margin-top: 10px;
      }
      .rail .steps .arrow {
        display: none;
      }
      .quoteline {
        margin-top: 28px;
        display: flex;
        align-items: center;
        gap: 14px;
        background: #15181c;
        color: #ffffff;
        padding: 20px 26px;
        border-radius: 16px;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-size: 17px;
        font-weight: 800;
      }
      .quoteline i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--t-yellow);
        display: inline-block;
        flex: none;
      }

      /* S8 — 왼쪽에 머리와 전화, 오른쪽에 질문 목록. 다크 면 위 선 구분. */
      .faqgrid {
        display: grid;
        grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
        gap: 60px;
        align-items: start;
      }
      .faqgrid .shead {
        margin-bottom: 0;
      }
      .faqgrid .h2 {
        font-size: 46px;
      }
      .faqgrid .sub {
        margin-top: 20px;
      }
      .faqgrid .btn {
        margin-top: 28px;
      }
      .faq {
        margin-top: 0;
        border-top: 1px solid var(--t-line-2);
      }
      .faq details {
        border-bottom: 1px solid var(--t-line-2);
      }
      .faq summary {
        cursor: pointer;
        list-style: none;
        padding: 26px 4px;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
      }
      .faq summary::-webkit-details-marker {
        display: none;
      }
      .faq summary::after {
        content: "+";
        width: 36px;
        height: 36px;
        border: 1px solid var(--t-line-2);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 20px;
        font-weight: 500;
        line-height: 1;
        color: var(--t-yellow);
        flex: none;
      }
      .faq details[open] summary::after {
        content: "−";
      }
      /* 답변은 보조 설명이 아니라 **읽으러 온 글**이다 — 질문이 21px/800 인데
         답변까지 --t-mute 16px 으로 내리면 크기·굵기·색이 한꺼번에 떨어져
         캡션처럼 묻힌다. 본문 값(--t-text 17px, §3)으로 올리고 위계는
         크기와 굵기로만 낸다. 색으로 한 번 더 누르지 않는다. */
      .faq .ans {
        /* 질문과 답변을 가르는 선은 **세로**다. 가로선으로 그으면 행을
           나누는 선과 모양이 같아 한 항목이 거기서 끝난 것처럼 보인다 —
           질문 4개가 8줄로 읽혔다. 가로선은 행 경계에만 남기고, 답변은
           왼쪽 2px 선과 들여쓰기로 떼어 낸다. 떼어 놓으면서 동시에 제
           질문에 매달아 두는 모양이라 둘을 한 덩어리로 묶는다. */
        border-left: 2px solid var(--t-line-2);
        /* **아래 여백은 이 상자 밖에 둔다.** 세로선은 상자 높이를 그대로
           따라가므로, 여기에 아래 패딩을 주면 선이 그만큼 길어져 행을
           나누는 가로선에 가서 닿는다. 두 선이 만나면 ㄴ 자로 꺾여 보여
           세로선이 답변에 딸린 표시가 아니라 테두리 조각처럼 읽힌다.
           선은 글 바로 아래(6px)에서 끝내고, 가로선까지의 거리는
           `.faq details[open]` 의 padding-bottom 이 벌린다. */
        padding: 0 4px 6px 20px;
        color: var(--t-text);
        font-size: 17px;
        line-height: 1.75;
      }
      .faq .ans p {
        max-width: 40em;
      }
      /* 열렸을 때 질문 아래 여백 — 답변 덩어리가 제 질문에 붙어 읽히게
         짧게 둔다. */
      .faq details[open] summary {
        padding-bottom: 16px;
      }
      /* 세로선이 끝난 자리부터 다음 행의 가로선까지 — 이 여백이 두 선을
           떼어 놓는다. `.ans` 의 아래 패딩으로 주면 선이 같이 길어진다. */
      .faq details[open] {
        padding-bottom: 26px;
      }

      /* S9 — 스플릿 카드. 둥근 카드 하나를 반으로 나눠 왼쪽은 옐로 패널
         (카피·전화·삽화), 오른쪽은 잉크 패널(폼). 섹션 자체는 다크다. */
      .contact {
        background: var(--t-bg);
      }
      .contact .wrap {
        display: block;
      }
      .contact .split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
        border-radius: 32px;
        overflow: hidden;
        border: 1px solid var(--t-line);
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
      }
      .contact .side {
        position: relative;
        overflow: hidden;
        background: var(--t-yellow);
        color: #15181c;
        padding: 56px 56px 0;
        min-height: 760px;
        --t-mute: #5b4a12;
      }
      .contact .side .shead {
        position: relative;
        z-index: 3;
      }
      .contact .shead .lab {
        color: #15181c;
      }
      .contact .shead .lab::before {
        background: #15181c;
      }
      .contact .h2 {
        font-size: 42px;
      }
      .contact .side .sub {
        position: relative;
        z-index: 3;
        margin-top: 18px;
        max-width: 22em;
      }
      /* 전화 알약 — 잉크 면, 옐로 원 안의 수화기. 번호는 누를 것이라 크게. */
      .telpill {
        position: relative;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 14px;
        margin-top: 28px;
        background: #15181c;
        color: #ffffff;
        border-radius: 999px;
        padding: 12px 24px 12px 14px;
        text-decoration: none;
        box-shadow: 0 14px 30px rgba(21, 24, 28, 0.25);
        transition: background 0.18s ease;
      }
      .telpill:hover {
        background: #2a2f38;
      }
      .telpill:focus-visible {
        outline: 2px solid var(--r-back);
        outline-offset: 2px;
      }
      .telpill .ic {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--t-yellow);
        color: #15181c;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
      }
      .telpill .ic svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }
      .telpill .num {
        display: block;
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 900;
        font-size: 26px;
        line-height: 1.1;
        letter-spacing: -0.01em;
        font-variant-numeric: tabular-nums;
      }
      .telpill .hrs {
        display: block;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.65);
        margin-top: 2px;
      }
      /* 삽화 — 패널 바닥에 깔린다. 파일 하나만 갈아끼우면 된다:
         assets/images/cta-illust.webp (알파 포함, 가로 1600px 안팎, 옐로 위에 얹힘). */
      .contact .illust {
        position: absolute;
        left: -40px;
        right: -40px;
        bottom: -140px;
        pointer-events: none;
        z-index: 1;
      }
      .contact .illust img {
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 30px 40px rgba(21, 24, 28, 0.35));
      }
      .contact .illust .bubble {
        position: absolute;
        left: 42%;
        top: 44%;
        display: flex;
        gap: 12px;
        align-items: baseline;
        background: #15181c;
        color: #ffffff;
        border-radius: 14px;
        padding: 12px 16px;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
        white-space: nowrap;
      }
      .contact .illust .bubble b {
        font-size: 20px;
        font-variant-numeric: tabular-nums;
      }
      .contact .illust .bubble span {
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 800;
        font-size: 15px;
      }
      .contact .illust .bubble small {
        font-size: 12px;
        color: var(--t-yellow);
        font-weight: 700;
      }
      /* 오른쪽 — 잉크 패널의 폼 */
      form {
        display: grid;
        gap: 16px;
      }
      .contact form {
        padding: 48px 52px;
        background: #15181c;
        color: #ffffff;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        --t-mute: rgba(255, 255, 255, 0.65);
      }
      .contact .gets {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 6px;
      }
      .contact .gets span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 34px;
        padding: 0 12px;
        border-radius: 10px;
        background: rgba(245, 184, 0, 0.12);
        color: var(--t-yellow);
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-size: 13px;
        font-weight: 800;
      }
      .contact .ftitle {
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-weight: 900;
        font-size: 20px;
      }
      .contact .fsub {
        font-size: 14px;
        color: var(--t-mute);
        margin-top: 4px;
      }
      .f2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .field {
        display: grid;
        gap: 8px;
      }
      .field label {
        font-family: "Pretendard", "Noto Sans KR", sans-serif;
        font-size: 13px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.75);
      }
      .field input,
      .field select,
      .field textarea {
        font: inherit;
        font-size: 16px;
        min-height: 52px;
        padding: 12px 16px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        background: #1f252c;
        color: #ffffff;
        width: 100%;
      }
      .field textarea {
        border-radius: 12px;
        resize: vertical;
        line-height: 1.5;
        min-height: 104px;
      }
      .field input::placeholder,
      .field textarea::placeholder {
        color: rgba(255, 255, 255, 0.35);
      }
      .field input:focus,
      .field select:focus,
      .field textarea:focus {
        outline: 2px solid var(--t-yellow);
        outline-offset: 2px;
      }
      .contact form .btn-a {
        min-height: 58px;
        font-size: 17px;
      }
      .agree {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
        display: flex;
        gap: 10px;
        align-items: flex-start;
      }
      .agree input {
        accent-color: var(--t-yellow);
        margin-top: 4px;
      }
      .agree a {
        color: #ffffff;
      }

      /* ── 반응형 사다리 ─────────────────────────────────────────
         1180 노트북 · 1024 태블릿 가로 · 900 태블릿 세로
         820 모바일 · 620 좁은 폰 · 480 최소 폭
         원칙: 글자 크기보다 칸 수를 먼저 줄인다.                      */

      /* 노트북 — 좌우 여백과 제목만 한 단계 */
      @media (max-width: 1180px) {
        .wrap {
          padding: 0 24px;
        }
        .h2 {
          font-size: 44px;
        }
        .s3 .h2,
        .contact .h2 {
          font-size: 36px;
        }
        .shead.has-lead {
          column-gap: 44px;
        }
      }

      /* 태블릿 가로 — 칸 수를 먼저 줄인다 */
      @media (max-width: 1024px) {
        section {
          padding: 96px 0;
        }
        .shead.has-lead .sub {
          max-width: none;
        }
        .h2 {
          font-size: 40px;
        }
        .g3,
        .wall {
          grid-template-columns: repeat(2, 1fr);
        }
        .rail .steps {
          grid-template-columns: repeat(2, 1fr);
        }
        .faqgrid {
          gap: 40px;
        }
      }

      /* 태블릿 세로 — 2단 조판을 푼다 */
      @media (max-width: 900px) {
        .shead {
          margin-bottom: 44px;
        }
        .shead.has-lead {
          grid-template-columns: 1fr;
        }
        .shead.has-lead .sub {
          margin-top: 20px;
          padding-bottom: 0;
        }
        .contact .split {
          grid-template-columns: 1fr;
        }
        .contact .side {
          min-height: 0;
          padding: 44px 40px 0;
        }
        /* 삽화를 흐름에 두고 패널 바닥에 붙인다 */
        .contact .illust {
          position: relative;
          left: 0;
          right: 0;
          bottom: 0;
          margin: 20px -40px -60px;
        }
        .contact .illust .bubble {
          display: none;
        }
        .contact form {
          padding: 36px 40px;
        }
        /* 한 단이 되면 붙박이도 풀리므로 세로 예산을 지킬 이유가 없다 */
        .s3scene {
          max-width: 100%;
          margin-top: 26px;
        }
        .h2,
        .s3 .h2,
        .contact .h2 {
          font-size: 36px;
        }
        .faqgrid {
          grid-template-columns: 1fr;
        }
        .faqgrid .shead {
          margin-bottom: 8px;
        }
        .faqgrid .h2 {
          font-size: 40px;
        }
        /* 좁아지면 붙박이를 풀고 화면 자리를 묶음 위에 한 번만 보인다 */
        .s4grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .stage {
          position: static;
        }
        .fgroup + .fgroup {
          margin-top: 44px;
        }
      }

      /* 모바일 */
      @media (max-width: 820px) {
        .wrap {
          padding: 0 20px;
        }
        .shead {
          margin-bottom: 36px;
        }
        .shead .lab {
          margin-bottom: 16px;
        }
        section {
          padding: 76px 0;
        }
        .card {
          padding: 22px;
        }
        .contact form {
          padding: 28px 22px;
        }
        .contact .side {
          padding: 36px 22px 0;
        }
        .contact .illust {
          margin: 16px -22px -40px;
        }
        .contact .split {
          border-radius: 22px;
        }
        .h2,
        .s3 .h2,
        .contact .h2 {
          font-size: 30px;
        }
        .sub {
          font-size: 18px;
          margin-top: 14px;
        }
        .hero .drum {
          /* 모바일: 가운데를 정사각으로 크롭 — contain이면 위아래가 비어 버린다 */
          aspect-ratio: 1 / 1;
          object-fit: cover;
        }
        .hero h1 {
          font-size: clamp(42px, 10vw, 54px);
        }
        .hero p {
          font-size: 16px;
          margin: 16px auto 20px;
        }
        .hero .btn {
          font-size: 15px;
          min-height: 46px;
          padding: 0 20px;
        }
        .scrolldown {
          bottom: 16px;
          width: 30px;
          height: 30px;
          margin-left: -15px;
        }
        .scrolldown svg {
          width: 30px;
          height: 30px;
        }
        .pain .big {
          font-size: 52px;
        }
        .pain .q {
          font-size: 21px;
        }
        .feat h4 {
          font-size: 22px;
        }
        .gtitle {
          font-size: 23px;
        }
        .tabs button {
          font-size: 14px;
          padding: 0 14px;
        }
        .faq summary {
          font-size: 18px;
          padding: 20px 2px;
        }
        .faq details[open] summary {
          padding-bottom: 12px;
        }
        /* 질문이 18px 로 내려오므로 답변도 한 칸 낮춘다 — 17px 그대로 두면
           둘이 거의 같은 크기가 되어 위계가 굵기 하나에만 걸린다.
           16px 이 본문 하한이다(§9). */
        .faq .ans {
          font-size: 16px;
          padding: 0 2px 5px 14px;
        }
        .faq details[open] {
          padding-bottom: 21px;
        }
        .faqgrid .h2 {
          font-size: 30px;
        }
        .f2 {
          grid-template-columns: 1fr;
        }
      }
      /* 세로로 세운 화면에서만 정사각 크롭의 최소 높이를 준다.
         가로로 눕힌 폰에서는 min-height 가 max-height 를 이겨 넘친다. */
      @media (max-width: 820px) and (orientation: portrait) {
        .hero .drum {
          min-height: 480px;
        }
      }

      /* 좁은 폰 — 남은 2단을 모두 1단으로 */
      @media (max-width: 620px) {
        section {
          padding: 64px 0;
        }
        /* 창 머리도 한 단계 좁힌다 */
        .chrome {
          padding: 10px 12px;
        }
        .g3,
        .wall {
          grid-template-columns: 1fr;
        }
        .rail .steps {
          grid-template-columns: 1fr;
        }
        .h2,
        .s3 .h2,
        .contact .h2,
        .faqgrid .h2 {
          font-size: 27px;
        }
        .pain .big {
          font-size: 46px;
        }
        .feat .stat {
          font-size: 26px;
        }
        .feat {
          gap: 14px;
          padding: 22px;
        }
        .telpill .num {
          font-size: 22px;
        }
        .quoteline {
          align-items: flex-start;
        }
      }

      /* 최소 폭 */
      @media (max-width: 480px) {
        .wrap {
          padding: 0 14px;
        }
        .hero .inner {
          padding: 18px;
        }
        .btn-row .btn {
          width: 100%;
        }
        .h2,
        .s3 .h2,
        .contact .h2 {
          font-size: 25px;
        }
        .pain .big {
          font-size: 42px;
        }
        /* 기록 목록: 근거를 시각 아래 줄로 내린다 */
        .capin {
          grid-template-columns: 62px 1fr;
          gap: 10px;
        }
        .cap .d {
          grid-column: 2;
        }
        .signcard .top b {
          font-size: 20px;
        }
        .tabs {
          display: flex;
        }
        .tabs button {
          flex: 1 1 auto;
        }
      }

      /* 낮은 화면 — S3 붙박이 전용.
         글자 크기는 두고 여백만 줄인다(§4 — 칸 수·크기보다 여백이 먼저).
         여기서 아낀 세로는 전부 장면이 가져간다. */
      @media (min-width: 901px) and (max-height: 880px) {
        .js .s3stick {
          padding: 40px 0 48px;
        }
        .s3scene {
          margin-top: 22px;
        }
      }

      /* 더 낮은 화면 — 붙박이를 아예 푼다. 일곱 줄이 쌓인 카드가 여백을
         줄여도 618px 라 여기서는 100vh 안에 들어가지 않는다. 억지로 붙여두면
         링 게이지가 화면 밖에서 잘린다. 푸는 편이 낫다 — 핀 없이도 줄은
         전부 보이고 장면은 섹션이 화면을 지나는 비율로 계속 움직인다.
         1366×768 이 여기 걸린다. 스크립트의 `flat` 질의가 이 조건(폭 900px
         이하 또는 여기)과 같은 값을 봐야 한다 — 어긋나면 핀은 걸려 있는데
         스크립트가 줄을 안 채운다. */
      @media (min-width: 901px) and (max-height: 720px) {
        .js .s3track {
          height: auto;
        }
        .js .s3stick {
          position: static;
          min-height: 0;
          padding: 0;
        }
        .js #s3 {
          padding: 76px 0;
        }
        .s3scene {
          max-width: 100%;
          margin-top: 26px;
        }
      }

      /* 낮은 화면 — 가로로 눕힌 폰처럼 세로가 640px 이 안 되면 붙박이를 푼다.
         장면과 제목이 한 화면에 같이 들어가지 못한다. **스크립트의 `flat`
         질의가 이 조건과 폭 901px 이상의 낮은 화면을 합친 값이어야 한다.** */
      @media (max-width: 900px) and (max-height: 639px) {
        .js .s3track {
          height: auto;
        }
        .js .s3stick {
          position: static;
          min-height: 0;
          padding: 0;
        }
        .js #s3 {
          padding: 76px 0;
        }
      }

      /* 「움직임 줄이기」에서도 붙박이를 푼다 — 기록 카드는 한 번에 한 줄만
         보이므로, 멈춰 세운 화면에서는 일곱 줄을 목록으로 전부 보여줘야
         한다. 스크립트는 이 경우를 이미 flat 과 같게 다룬다(showAll +
         0.47 한 장면). */
      @media (prefers-reduced-motion: reduce) {
        .js .s3track {
          height: auto;
        }
        .js .s3stick {
          position: static;
          min-height: 0;
          padding: 0;
        }
        .js #s3 {
          padding: 76px 0;
        }
      }

      /* ── 스크롤 등장 ───────────────────────────────────────────
         숨김 상태를 CSS 가 직접 들고 있어서 깜빡임이 없다.
         스크립트가 꺼져 있으면(.js 없음), 「움직임 줄이기」를 켰으면
         이 블록 자체가 적용되지 않아 전부 처음부터 보인다.
         움직임은 위로 떠오르며 밝아지는 것 하나뿐이다.
         --dy 는 떠오르는 거리, --dstep 은 형제 사이 간격. 묶음마다 바꾼다. */
      @media (prefers-reduced-motion: no-preference) {
        .js
          :is(
            .shead,
            .g3 > *,
            .stage,
            .fgroup > *,
            .band,
            .wall > *,
            .rail .steps > *,
            .quoteline,
            .swatchline,
            .faq,
            .contact .side,
            .contact form
          ) {
          opacity: 0;
          transform: translateY(var(--dy, 18px));
          transition:
            opacity 0.5s ease,
            transform 0.5s cubic-bezier(0.22, 0.7, 0.26, 1);
          /* 같은 줄의 카드들이 차례로 — --d 는 스크립트가 형제 순서로 넣는다 */
          transition-delay: calc(var(--d, 0) * var(--dstep, 70ms));
        }
        /* 위 :is() 목록 중 가장 긴 것이 .js .contact .side (클래스 3개)라
           같은 무게를 만들려고 .is-in 을 두 번 적는다. */
        .js .is-in.is-in {
          opacity: 1;
          transform: none;
        }
        /* S3 기록 — 기록 카드든 목록이든 안쪽 상자만 떠오른다.
           바깥 .cap 은 기록 카드 자리를 잡는 데 transform 을 쓰므로 비워 둔다. */
        .js .cap > .capin {
          opacity: 0;
          transform: translateY(var(--dy, 10px));
          transition:
            opacity 0.4s ease,
            transform 0.4s cubic-bezier(0.22, 0.7, 0.26, 1);
        }
        .js .cap.is-in > .capin {
          opacity: 1;
          transform: none;
        }
      }

      @media (prefers-reduced-motion: no-preference) {
        .btn-a {
          transition: transform 0.15s;
        }
        .btn-a:hover {
          transform: translateY(-1px);
        }
      }
    

/*
하단 고정 헤더 컴포넌트 — 구조와 마크업은 header.html 을 그대로 쓰고
        색·서체·형태만 RMC 규칙(CLAUDE.md)으로 다시 잡았다. 
*/

   /* 토큰
색은 페이지의 --r-* 만 가져다 쓰고 (§2) 곡률과 여백은 .wrap 사다리를 따른다 (§4)
톤을 바꾸려면 이 블록만 고치면 된다 */
   .hdr {
     --hdr-ink: #f4f3ef;
     --hdr-ink-2: #9aa1a9;
     /* 흰색을 아주 옅게 깐 면 — hover 한 곳에만 쓴다 */
     --hdr-wash: rgba(255, 255, 255, 0.08);
     /* 다크 유리 — 뒤 내용이 살짝 비친다 */
     --hdr-surface: rgba(15, 18, 21, 0.86);
     --hdr-on-ink: #15181c;
     --hdr-focus: var(--r-back);
     --hdr-radius: 12px;
     /* 터치 타깃은 44px 아래로 내리지 않는다 (§9) */
     --hdr-btn-h: 44px;
     --hdr-h: 68px;
     --hdr-gutter: 32px;
     --hdr-page: 1480px;
     /* 서체는 두 종뿐이다 (§3) — 본문은 Noto Sans KR, 버튼은 Pretendard */
     --hdr-sans:
       "Noto Sans KR", system-ui, "Apple SD Gothic Neo", "Malgun Gothic",
       sans-serif;
     --hdr-display: "Pretendard", "Noto Sans KR", sans-serif;
     --hdr-ease: cubic-bezier(0.4, 0, 0.2, 1);

     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 50;
     box-sizing: border-box;
     height: calc(var(--hdr-h) + env(safe-area-inset-bottom));
     padding: 0 var(--hdr-gutter) env(safe-area-inset-bottom);
     color: var(--hdr-ink);
     font-family: var(--hdr-sans);
     line-height: 1.5;
     background: var(--hdr-surface);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     transition:
       transform 0.3s var(--hdr-ease),
       opacity 0.3s var(--hdr-ease);
   }

   /* 안쪽 리셋
호스트 페이지에 리셋이 없어도 무너지지 않게 바 안쪽만 정리한다 */
   .hdr *,
   .hdr *::before,
   .hdr *::after {
     box-sizing: border-box;
   }
   .hdr img {
     display: block;
     max-width: 100%;
   }
   .hdr a {
     text-decoration: none;
     color: inherit;
   }
   .hdr :focus-visible {
     outline: 2px solid var(--hdr-focus);
     outline-offset: 2px;
     border-radius: var(--hdr-radius);
   }

   /* 숨김 상태
푸터와 만나는 구간에서만 물러난다 */
   .hdr.is-hidden {
     transform: translateY(100%);
     opacity: 0;
     pointer-events: none;
   }

   /* 레이아웃 */
   .hdr .hdr-wrap {
     max-width: var(--hdr-page);
     margin: 0 auto;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
   }
   .hdr-logo {
     display: flex;
     align-items: center;
     border-radius: var(--hdr-radius);
   }
   .hdr-logo img {
     height: 28px;
     width: auto;
     /* 다크 바 위에서는 흰 로고 */
     filter: brightness(0) invert(1);
   }
   .hdr-cta {
     display: flex;
     align-items: center;
     gap: 10px;
   }

   /* 대표번호
버튼이 아니라 읽히는 정보이므로 면을 채우지 않고 숫자만 세운다
숫자는 Noto Sans KR 700 에 tabular 로 고정해 폭이 흔들리지 않게 한다 (§3) */
   .hdr-tel {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     height: var(--hdr-btn-h);
     padding: 0 12px;
     border-radius: var(--hdr-radius);
     color: var(--hdr-ink);
     white-space: nowrap;
     transition: background 0.18s var(--hdr-ease);
   }
   .hdr-tel:hover {
     background: var(--hdr-wash);
   }
   .hdr-tel svg {
     width: 16px;
     height: 16px;
     flex: none;
     fill: var(--hdr-ink-2);
     transition: fill 0.18s var(--hdr-ease);
   }
   .hdr-tel:hover svg {
     fill: var(--hdr-ink);
   }
   .hdr-tel .num {
     font-family: var(--hdr-sans);
     font-size: 17px;
     font-weight: 700;
     letter-spacing: 0;
     font-variant-numeric: tabular-nums;
   }

   /* 버튼
알약형에 2px 잉크 윤곽 (§4) — 주는 잉크를 채우고 보조는 면을 비운다 (§6)
18px 34px 은 본문용 치수라 68px 바에 들어가지 않는다
바 안에서는 한 단계 줄인 15px 로 쓰되 높이 44px 는 지킨다
hover 에서 자리를 옮기지 않으므로 고정 바에서 흔들림이 없다 */
   .hdr .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     height: var(--hdr-btn-h);
     padding: 0 22px;
     border-radius: var(--hdr-radius);
     font-family: var(--hdr-display);
     font-size: 15px;
     font-weight: 800;
     letter-spacing: 0;
     white-space: nowrap;
     cursor: pointer;
     transition: background 0.18s var(--hdr-ease);
   }
   /* 보조 동선은 면을 비우고 테두리만 둔다 */
   .hdr .btn-store {
     background: rgba(255, 255, 255, 0.06);
     color: var(--hdr-ink);
     border: 1px solid rgba(255, 255, 255, 0.22);
   }
   .hdr .btn-store:hover {
     background: var(--hdr-wash);
   }
   .hdr .btn-store img {
     width: 18px;
     height: 18px;
     flex: none;
     /* 이 폴더의 심볼은 정사각이 아니다 (네이버 40x20) — 비율을 지켜 담는다 */
     object-fit: contain;
   }
   /* 주 행동은 잉크를 채운 면 하나로 끝낸다
  페이지의 .btn-a 와 같은 어법이라 hover 에서 색을 바꾸지 않는다 */
   .hdr .btn-primary {
     background: var(--t-yellow);
     color: var(--hdr-on-ink);
     border: 1px solid var(--t-yellow);
   }
   .hdr .btn-primary:hover {
     background: var(--t-yellow-2);
   }

   /* 반응형
좁은 화면에서도 네 요소가 한 줄에 들어와야 한다
페이지의 브레이크포인트 사다리를 그대로 쓰고 (§4) 라벨부터 순서대로 접는다 */
   @media (max-width: 1180px) {
     .hdr {
       --hdr-gutter: 24px;
     }
   }
   @media (max-width: 820px) {
     .hdr {
       --hdr-h: 60px;
       --hdr-gutter: 20px;
     }
     .hdr .hdr-wrap {
       gap: 10px;
     }
     .hdr-logo img {
       height: 22px;
     }
     .hdr-cta {
       gap: 8px;
     }
     .hdr-tel {
       padding: 0 8px;
       gap: 6px;
     }
     .hdr-tel .num {
       font-size: 16px;
     }
     .hdr .btn {
       padding: 0 18px;
       font-size: 14px;
     }
     .hdr .btn-store {
       padding: 0 13px;
     }
     .hdr .btn-store .label {
       display: none;
     }
   }
   /* 아주 좁은 화면에서는 대표번호도 심볼만 남긴다 */
   @media (max-width: 480px) {
     .hdr {
       --hdr-gutter: 14px;
     }
     .hdr .hdr-wrap {
       gap: 6px;
     }
     .hdr-cta {
       gap: 6px;
     }
     .hdr-tel {
       padding: 0 9px;
     }
     .hdr-tel .num {
       display: none;
     }
     .hdr-tel svg {
       width: 19px;
       height: 19px;
     }
     .hdr .btn {
       padding: 0 16px;
     }
   }
   /* 모션을 줄이기로 한 사용자에게는 전환 없이 즉시 바뀐다 */
   @media (prefers-reduced-motion: reduce) {
     .hdr,
     .hdr .btn,
     .hdr-tel,
     .hdr-tel svg {
       transition: none;
     }
   }

/*
사이트 푸터 컴포넌트 — 구조와 마크업은 footer.html 을 그대로 쓰고
        색·서체·형태만 RMC 규칙(CLAUDE.md)으로 다시 잡았다. 
*/

   /* 토큰
섹션은 반투명 덮개라 시멘트 결이 비치지만, 푸터는 불투명 --r-ground 한 겹으로
바탕 이미지를 완전히 덮는다. 페이지가 바닥에서 한 번 닫히는 자리다.
알파를 넣지 않는다 — 넣는 순간 이미지가 다시 비친다. */
   .ftr {
     --ftr-ink: #c9cdd2;
     --ftr-ink-2: #8a8f96;
     --ftr-focus: var(--r-back);
     --ftr-surface: #0a0d10;
     --ftr-radius: 999px;
     --ftr-gutter: 32px;
     --ftr-page: 1480px;
     /* 고정 바 높이 — 바 68px + 윤곽선 2px
  스크립트가 살아 있으면 푸터가 보이는 순간 바가 물러나므로 자리를 비울 일이 없다
  꺼져 있을 때만 아래에서 이만큼 띄운다 */
     --ftr-bar: 70px;
     --ftr-sans:
       "Noto Sans KR", system-ui, "Apple SD Gothic Neo", "Malgun Gothic",
       sans-serif;
     --ftr-display: "Pretendard", "Noto Sans KR", sans-serif;
     --ftr-ease: cubic-bezier(0.4, 0, 0.2, 1);

     box-sizing: border-box;
     padding: 48px var(--ftr-gutter) calc(48px + env(safe-area-inset-bottom));
     color: var(--ftr-ink-2);
     font-family: var(--ftr-sans);
     font-size: 13px;
     letter-spacing: 0;
     background: var(--ftr-surface);
     /* 경계선을 두지 않는다 (§2) — 섹션의 반투명 덮개와 이 불투명 바탕의
        차이가 경계를 낸다 */
   }

   /* 스크립트가 꺼져 있으면 바가 물러나지 않는다 — 그때만 마지막 줄 자리를 비운다 */
   html:not(.js) .ftr {
     padding-bottom: calc(
       48px + var(--ftr-bar) + env(safe-area-inset-bottom)
     );
   }

   /* 안쪽 리셋
호스트 페이지에 리셋이 없어도 무너지지 않게 푸터 안쪽만 정리한다 */
   .ftr *,
   .ftr *::before,
   .ftr *::after {
     box-sizing: border-box;
   }
   .ftr img {
     display: block;
     max-width: 100%;
   }
   .ftr p {
     margin: 0;
   }
   .ftr nav,
   .ftr div {
     margin: 0;
     padding: 0;
   }
   .ftr :focus-visible {
     outline: 2px solid var(--ftr-focus);
     outline-offset: 2px;
     border-radius: var(--ftr-radius);
   }

   /* 레이아웃
회사 정보를 왼쪽에 두고 채널과 약관을 오른쪽 끝으로 보낸다
폭이 모자라면 감싸서 두 줄이 된다 */
   .ftr .ftr-wrap {
     max-width: var(--ftr-page);
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 28px;
     flex-wrap: wrap;
   }

   /* 회사 정보
행간을 넉넉히 벌려 주소와 연락처가 한 덩어리로 뭉치지 않게 한다 */
   .ftr-info img {
     height: 26px;
     width: auto;
     margin-bottom: 14px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
   }
   .ftr-info p {
     line-height: 1.85;
   }
   /* 링크는 색을 바꾸지 않는다 — 포인트색은 옐로 다섯 자리뿐이고 (§2)
  푸터는 그 다섯에 들지 않는다. 구분은 잉크 농도와 밑줄로만 낸다 */
   .ftr-info a {
     color: var(--ftr-ink);
     text-decoration: none;
   }
   .ftr-info a:hover {
     text-decoration: underline;
     text-underline-offset: 3px;
   }

   /* 채널과 약관
심볼은 흰 알약 위에 2px 잉크 윤곽 — 카드와 같은 어법이다 (§4·§6) */
   .ftr-side {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 18px;
   }
   .ftr-sym {
     display: flex;
     gap: 10px;
   }
   .ftr-sym a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: var(--ftr-radius);
   }
   .ftr-sym img {
     width: 18px;
     height: 18px;
     /* 이 폴더의 심볼은 정사각이 아니다 (네이버 40x20, 블로그 924x1000) */
     object-fit: contain;
   }
   .ftr-links {
     display: flex;
     gap: 16px;
   }
   .ftr-links a {
     color: var(--ftr-ink);
     font-family: var(--ftr-display);
     font-weight: 800;
     text-decoration: none;
   }
   .ftr-links a:hover {
     text-decoration: underline;
     text-underline-offset: 3px;
   }

   /* 반응형
페이지의 브레이크포인트 사다리를 그대로 쓴다 (§4) */
   @media (max-width: 1180px) {
     .ftr {
       --ftr-gutter: 24px;
     }
   }
   /* 좁은 화면에서는 두 덩어리를 세로로 쌓고 오른쪽 정렬을 푼다 */
   @media (max-width: 820px) {
     .ftr {
       --ftr-gutter: 20px;
       --ftr-bar: 62px;
       padding-top: 36px;
     }
     .ftr .ftr-wrap {
       flex-direction: column;
       gap: 24px;
     }
     .ftr-side {
       align-items: flex-start;
     }
   }
   @media (max-width: 480px) {
     .ftr {
       --ftr-gutter: 14px;
     }
   }

/* 개인정보 수집·이용 동의 — 내용 보기 */
.agree label {
  cursor: pointer;
}
.agree .terms summary {
  display: inline-block;
  margin-top: 4px;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agree .terms summary::-webkit-details-marker {
  display: none;
}
.agree .terms .full {
  margin-top: 8px;
  font-size: 0.92em;
  line-height: 1.7;
  word-break: keep-all;
}

/* 개인정보 동의 내용: 항목과 내용을 두 열로 맞춰 구분 (homepage cs.html과 같은 방식) */
.agree .terms .full dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
}
.agree .terms .full dt {
  font-weight: 400;
}
.agree .terms .full dd {
  margin: 0;
}
.agree .terms .full p {
  margin: 10px 0 0;
  font-size: inherit;
  line-height: inherit;
}
@media (max-width: 560px) {
  .agree .terms .full dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .agree .terms .full dd {
    margin-bottom: 8px;
  }
}

/* 개인정보 동의: '내용 보기'를 동의 문구와 같은 줄 오른쪽에 둔다 */
.agree > div {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.agree > div > label {
  display: block;
  padding-right: 5.5em;
}
.agree .terms summary {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}