/* ===== Block 1: Head styles ===== */
    /* ===== 1. Root variables / theme tokens (consolidated) ===== */
    :root {
      --button-padding: 0.5rem 1rem;
      --base-font-px: 18;
      --line-width: 1.5px; /* 전역 선 두께 */

      /* ── COOL BLUE-GRAY SYSTEM ── */
      /* Backgrounds */
      --bg-main:rgb(244, 244, 244);   /* pale blue-gray — main background */
      --bg-panel:    #c8cfd8;   /* slightly darker — panels, surfaces */
      --bg-deep:     #b4bcc8;   /* deeper panel / pressed state */
      --bg-dark:     #0e1520;   /* dark overlay, mode-map */

      /* Lines / structure — 쨍한 블루 */
      --blue:        rgb(0, 0, 255);
      --slate:       rgb(0, 0, 255);   /* vivid blue — borders, frames, guide marks */
      --slate-mid:   rgb(0, 0, 255);   /* vivid blue — secondary lines */
      --slate-dim:   rgba(0, 0, 255, 0.30);  /* faint blue guide */

      /* Text */
      --txt-primary: #1a2230;   /* deep blue-gray — main labels */
      --txt-muted:   #6a7585;   /* cool gray — secondary / caption */
      --txt-dim:     rgba(26,34,48,0.50);

      /* Accent — 순수 빨강 rgb(255,0,0) */
      --red:         rgb(255, 0, 0);
      --red-soft:    rgba(255, 0, 0, 0.12);

      /* Neon yellow-green */
      --neon:        #d9ff00;

      /* Legacy aliases (keep for backwards compat) */
      --ink:         #1a2230;
      --ink-muted:   #1a2230;
      --ink-dim:     #1a2230;
      --ink-strong:  #0e1520;
      --paper:       #dde2ea;
      --paper-dim:   #c8cfd8;
      --accent:      rgb(255, 0, 0);
      --surface:     #dde2ea;
      --muted:       #c8cfd8;

      --border: 1px solid var(--paper);
      --border-dashed: 1px dashed var(--paper);
      --font: "sincopa", sans-serif;
      --line-weight: 1px;
      --line-thin: 1px;
      --line-dash: 4 4;

      --clock-font: "triplex-sans", sans-serif;
      /* 폰트 스타일 3종: small, body, large */
      --font-s: 0.5rem;
      --font-m: 0.65rem;
      --font-l: 0.9rem;
      --clock-space-1: calc(var(--font-m) * 0.5);
      --clock-space-2: var(--font-m);
      --clock-space-3: calc(var(--font-m) * 1.5);
      --clock-space-4: calc(var(--font-m) * 2);
      --console-h: clamp(16rem, 30vh, 22rem);
      --stage-gap: var(--clock-space-3);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* ===== 2. Global page shell (기준 18px, 반응형) ===== */
    html {
        font-size: clamp(13px, 1.1vw + 0.4rem, 18px);
    }

/* SVG 선 두께 전역 기본값 */
svg line, svg path, svg circle, svg rect, svg polyline, svg polygon, svg ellipse {
    stroke-width: var(--line-width) !important;
}
svg [stroke-width="0"], svg .no-stroke,
svg [stroke="none"], svg [fill="none"][stroke=""] {
    stroke-width: 0 !important;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    font-family: var(--font);
    font-weight: 400;
    font-style: normal;
    color: var(--ink);
    background: #d8ff00;
    -webkit-font-smoothing: antialiased;
    transition: background 1s ease;
}
body.modal-bg-active {
    background: #000;
}

/* Rectangle behind the radial circle: coding club image relay */
/* 사진 박스: 50vh 정사각형, 화면 중앙, page-bg-gradient-wrap(z-index:0) 위 */
.photo-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70vh;
    height: 70vh;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    filter: grayscale(1) contrast(1.6) brightness(0.85);
    transition: opacity 0.3s ease;
}
.clock-overlay.is-open ~ * .photo-box,
body:has(.clock-overlay.is-open) .photo-box,
body.modal-open .photo-box {
    opacity: 0;
    pointer-events: none;
}

/* 모달 열림 시 파티클 + 맵 숨김 */
body:has(.clock-overlay.is-open) #particles-wrap,
body.modal-open #particles-wrap {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
body:has(.clock-overlay.is-open) #bgHexMapWrap,
body.modal-open #bgHexMapWrap {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.photo-box .body-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.8s ease, filter 3s ease;
    pointer-events: none;
}
.photo-box .body-bg-layer.is-visible {
    opacity: 1;
}
@media (max-width: 768px) {
    html { font-size: 20px; }
    .photo-box { display: none; }
    #bgFloatingLogo { width: 15rem !important; }
    .page-bg-svg__gradient { width: 150% !important; }
    #bgLogoGroup { top: 12px; left: 12px; }
    .page-info-toggle.is-spinning { animation: none; }

    /* 맵 타이틀 박스 모바일 축소 */
    #bgHexMap .bgh-node-title {
        font-size: 0.7rem;
        letter-spacing: -0.02rem;
    }
    #bgHexMap .bgh-node-index {
        font-size: 0.75rem;
        letter-spacing: -0.05rem;
    }
    #bgHexMap .bgh-node-fig {
        font-size: 0.45rem;
        letter-spacing: -0.03rem;
    }
    #bgHexMap .bgh-node-ring { r: 5; }
    #bgHexMap .bgh-node-dot  { r: 2; }
}
/* 사진 바깥 떠다니는 파티클 (2~5px, 약 100개) */
.particles-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.3s ease;
}
/* 사진 바깥 배경: 1–12 숫자 날아다니는 박스 (박스 크기 1rem) */
.flying-number-boxes-wrap {
    position: fixed;
    inset: 1rem;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
.flying-number-box {
    position: absolute;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--neon);
    background: #000;
    border: 1px solid var(--neon);
    box-sizing: border-box;
}
/* 해시태그 날아다니기 */
.flying-hashtags-wrap {
    position: fixed;
    inset: 1rem;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
.flying-hashtag {
    position: absolute;
    white-space: nowrap;
    font-size: 0.7rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.02em;
    color: #fff;
    background: #0000ff;
    border: 1px solid #000;
    padding: 0 0.25em;
    line-height: 1.4;
    word-spacing: 0;
    box-sizing: border-box;
}
.particles-wrap .particle {
    position: absolute;
    border-radius: 50%;
    background: var(--neon);
    border: 1px solid #000;
    box-sizing: border-box;
}
.particles-wrap .particle--alt {
    background: #000;
    border: 1px solid var(--neon);
}
/* 사진 뒤 방사형 그리드 (동심원 + 방사선) */
.body-bg-radial-grid {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vw; /* 1:1 ratio */
    pointer-events: none;
    z-index: 1;
}
.body-bg-radial-grid svg {
    width: 100%;
    height: 100%;
}
.body-bg-radial-grid line {
    stroke: currentColor;
    stroke-width: var(--line-width);
    fill: none;
}
.body-bg-radial-grid circle {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--line-width);
}
.body-bg-radial-grid { color: rgba(255,255,255,0.15); }
/* 톤암 CSS 삭제됨 */
.withok-clock-deco { color: inherit; }
#withok-fullscreen-clock .withok-clock-deco { color: #fff; }
.clock-overlay .withok-clock-deco { color: #2b3441; }
/* 배경 시계 기본 hands */
#bgClockSvg { color: rgba(220,230,245,1); }
#bgClockFace * { vector-effect: non-scaling-stroke; pointer-events: none; }

/* ── ring layers ── */
#bgClockFace .bgcf-bezel-outer  { fill: none; stroke: currentColor; stroke-width: var(--line-width); }
#bgClockFace .bgcf-bezel-mid    { fill: none; stroke: currentColor; stroke-width: var(--line-width); }
#bgClockFace .bgcf-chapter-ring { fill: none; stroke: currentColor; stroke-width: var(--line-width); }
#bgClockFace .bgcf-track-ring   { fill: none; stroke: currentColor; stroke-width: var(--line-width); }
#bgClockFace .bgcf-dial-ring    { fill: none; stroke: currentColor; stroke-width: var(--line-width); }
#bgClockFace .bgcf-sub-ring     { fill: none; stroke: currentColor; stroke-width: var(--line-width); }
#bgClockFace .bgcf-hub-ring     { fill: none; stroke: currentColor; stroke-width: var(--line-width); }
#bgClockFace .bgcf-measure-ring { fill: none; stroke: currentColor; stroke-width: var(--line-width); }

/* ── ticks ── */
#bgClockFace .bgcf-tick         { stroke: currentColor; stroke-linecap: butt; stroke-width: var(--line-width); }
#bgClockFace .bgcf-tick--hour   { stroke-width: var(--line-width); }
#bgClockFace .bgcf-tick--quarter{ stroke-width: var(--line-width); }
#bgClockFace .bgcf-tick--minute { stroke-width: var(--line-width); }
#bgClockFace .bgcf-tick--inner-hour    { stroke-width: var(--line-width); }
#bgClockFace .bgcf-tick--inner-quarter { stroke-width: var(--line-width); }
#bgClockFace .bgcf-tick--inner-minute  { stroke-width: var(--line-width); }

/* ── radials ── */
#bgClockFace .bgcf-radial       { stroke: currentColor; stroke-width: var(--line-width); }
#bgClockFace .bgcf-radial--card { stroke-width: var(--line-width); }

/* ── sub-dial ── */
#bgClockFace .bgcf-subdial-tick        { stroke: currentColor; stroke-width: var(--line-width); }
#bgClockFace .bgcf-subdial-tick--major { stroke-width: var(--line-width); }
#bgClockFace .bgcf-label      { fill: currentColor; font-family: 'Courier New', monospace; }
#bgClockFace .bgcf-label--brand { letter-spacing: 0.12em; }
#bgClockFace .bgcf-label--sub  { letter-spacing: 0.07em; }

/* ── degree arc ── */
#bgClockFace .bgcf-deg-arc  { fill: none; stroke: currentColor; stroke-width: 0.6px; }

/* ── crosshair ── */
#bgClockFace .bgcf-cross    { stroke: currentColor; stroke-width: 0.8px; }

/* pivot button */
#bgClockPivot {
    transition: opacity 0.2s;
    transform-origin: 50px 50px;
    transform-box: fill-box;
}

/* photo color flash */
.photo-box.color-flash .body-bg-layer.is-visible {
    filter: saturate(3) hue-rotate(30deg) brightness(1.2);
    transition: filter 0s;
}
#bgHourHand   { stroke: #1a6fff; stroke-width: var(--line-width); stroke-linecap: round; vector-effect: non-scaling-stroke; }
#bgMinuteHand { stroke: #1a6fff; stroke-width: var(--line-width); stroke-linecap: round; vector-effect: non-scaling-stroke; }
#bgSecondHand { stroke: #e63030; stroke-width: var(--line-width); stroke-linecap: round; vector-effect: non-scaling-stroke; }

a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: var(--line-weight);
    text-underline-offset: 4px;
}

    /* ===== 3. 배경 SVG 묶음 (network-graph + fullscreen clock) ===== */
.page-bg-svg,
.page-bg-svg > *,
.page-bg-svg #withok-fullscreen-clock,
.page-bg-svg .withok-fullscreen-clock__svg {
    margin: 0;
    padding: 0;
}
.page-bg-svg {
    position: fixed;
    inset: 0;
    z-index: 3;
}
/* page-bg-svg-wrap: clipping container — 내부 모든 요소가 이 경계 안에 머묾 */
.page-bg-svg-wrap {
    position: fixed;
    inset: 1rem;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.page-bg-gradient-wrap {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    margin: 1rem;
    background: var(--bg-main) !important;
    border: 1px solid black;
    transition: background 1s ease, border-color 1s ease;
}
body.modal-bg-active .page-bg-gradient-wrap {
    background: #000 !important;
    /* border-color: #e63030; */
}
.page-bg-svg__gradient {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    aspect-ratio: 1/1;
    margin: 0;
    background: conic-gradient(from 0deg, #000 35%, #f1f1f1 40%, #aacdff 70%, rgb(255 255 255) 80%, rgb(117, 137, 166) 90%, red 100%);
    border-radius: 50%;
    pointer-events: none;
    transition: background 1s ease;
}
body.modal-bg-active .page-bg-svg__gradient {
    background: conic-gradient(from 0deg, #000000 0%, #000000 30%, #19112c 60%, #000000 80%, #d8ff00 100%);
}
/* 동일 위치·크기: 자식 모두 뷰포트 전체 겹침 */
.page-bg-svg > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.page-bg-svg > #withok-fullscreen-clock {
    z-index: 0;
}
.page-bg-svg #withok-fullscreen-clock {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    transform: scale(0.9);
    transform-origin: center center;
}
.page-bg-svg #withok-fullscreen-clock .withok-fullscreen-clock__svg {
    pointer-events: none;
}
/* floating logo */
/* 로고 그룹: 드래그 가능한 wrapper */
#bgLogoGroup {
    position: fixed;
    top: 32px;
    left: 32px;
    z-index: 1300;
    cursor: grab;
    user-select: none;
    pointer-events: auto;
}
#bgLogoGroup:active { cursor: grabbing; }

#bgFloatingLogo {
    width: 25rem;
    pointer-events: none;
}
#bgFloatingLogo img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), filter 0.35s ease;
    transform-origin: center center;
}
#bgLogoGroup:hover #bgFloatingLogo img {
    transform: scale(1.1);
}
#bgLogoGroup.logo-flash #bgFloatingLogo img {
    filter: invert(1) sepia(1) saturate(10) hue-rotate(50deg) brightness(1.4);
}

/* D3 title map: page-bg-svg 밖 독립 고정 레이어 */
/* bgh-base: 링+장식 호 전용 SVG — 사진 위(z-index:3), hex 맵 노드 아래 */
#bgHexBaseSvg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    overflow: visible;
}
#bgHexMapWrap {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.3s ease;
}
#bgHexMapWrap #bgHexMap {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
#bgHexMapWrap #bgHexMap svg {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    pointer-events: none;
}
#bgHexMapWrap #bgHexMap svg .bgh-interactive {
    pointer-events: auto;
}
/* bgh-interactive: 통합 SVG로 이전됨 — wrap은 유지하되 숨김 */
#bgHexInteractWrap {
    display: none;
}
/* ── bgHexMap: D3 interactive diagram ── */
#bgHexMap svg { display: block; overflow: visible; }
#bgHexMap { color: #dde2ea; }
#bgHexInteractWrap { color: #dde2ea; }
#bgHexBaseSvg { color: #dde2ea; }

/* spokes + ring: normally dim */
#bgHexMap .bgh-spoke {
    display: none;
}
#bgHexMap .bgh-ring,
#bgHexBaseSvg .bgh-ring {
    stroke: #dde2ea;
    stroke-width: var(--line-width);
    fill: none;
    transition: stroke 0.25s;
}
#bgHexMap .bgh-hex {
    stroke: var(--neon);
    stroke-width: var(--line-width);
    fill: none;
    transition: stroke 0.25s;
}

/* node default */
#bgHexMap .bgh-node {
    cursor: pointer;
    pointer-events: auto;
}
@keyframes bgh-dot-pulse {
    0%   { r: 2.5; }
    50%  { r: 4;   }
    100% { r: 2.5; }
}
@keyframes bgh-ring-pulse {
    0%   { r: 7;  }
    50%  { r: 11; }
    100% { r: 7;  }
}
@keyframes bgh-dot-pulse-hover {
    0%   { r: 4;  }
    50%  { r: 6;  }
    100% { r: 4;  }
}
@keyframes bgh-ring-pulse-hover {
    0%   { r: 10; }
    50%  { r: 15; }
    100% { r: 10; }
}
#bgHexMap .bgh-node-dot {
    fill: var(--neon);
    stroke: var(--neon);
    stroke-width: var(--line-width);
    r: 3;
    filter: url(#bgh-node-glow);
    animation: bgh-dot-pulse 2.4s ease-in-out infinite;
}
#bgHexMap .bgh-node-ring {
    fill: none;
    stroke: var(--neon);
    stroke-width: var(--line-width);
    r: 8;
    filter: url(#bgh-node-glow);
    animation: bgh-ring-pulse 2.4s ease-in-out infinite;
}
#bgHexMap .bgh-node-title {
    fill: #000;
    font-family: "triplex-sans", monospace;
    font-size: 1rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: fill 0.2s;
    pointer-events: none;
}
#bgHexMap .bgh-node-title-bg {
    fill: var(--neon);
    stroke: #000;
    stroke-width: var(--line-width);
    pointer-events: all;
    cursor: pointer;
    transition: fill 0.2s, stroke 0.2s;
    filter: url(#bgh-cartoon-shadow);
}
#bgHexMap .bgh-node-fig {
    fill: #000;
    font-family: "triplex-sans", monospace;
    font-size: 0.6rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.05rem;
    transition: fill 0.2s;
    pointer-events: none;
}
#bgHexMap .bgh-node-index {
    fill: #000;
    font-family: "triplex-sans", monospace;
    font-size: 0.75rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.05rem;
    pointer-events: none;
    transition: fill 0.2s;
}
#bgHexMap .bgh-node-index-bg {
    fill: var(--neon);
    stroke: #000;
    stroke-width: var(--line-width);
    pointer-events: none;
    transition: fill 0.2s, stroke 0.2s;
    filter: url(#bgh-cartoon-shadow);
}

/* Bonus node (Fig.06 / clock-5) 강조 */
#bgHexMap [data-clock="6"] .bgh-node-index-bg {
    fill: #ff3a5c;
}
#bgHexMap [data-clock="6"] .bgh-node-index {
    fill: #fff;
}
#bgHexMap .bgh-callout {
    stroke: var(--neon);
    stroke-width: var(--line-width);
    fill: none;
    transition: stroke 0.2s;
}

/* HOVER state */
#bgHexMap .bgh-node:hover .bgh-node-dot,
#bgHexMap .bgh-node:focus .bgh-node-dot,
#bgHexInteractWrap .bgh-node.is-hover .bgh-node-dot {
    fill: var(--neon);
    stroke: var(--neon);
    animation: bgh-dot-pulse-hover 1.4s ease-in-out infinite;
}
#bgHexMap .bgh-node:hover .bgh-node-ring,
#bgHexMap .bgh-node:focus .bgh-node-ring,
#bgHexInteractWrap .bgh-node.is-hover .bgh-node-ring {
    stroke: var(--neon);
    animation: bgh-ring-pulse-hover 1.4s ease-in-out infinite;
}
#bgHexMap .bgh-node:hover .bgh-node-title,
#bgHexMap .bgh-node:focus .bgh-node-title,
#bgHexInteractWrap .bgh-node.is-hover .bgh-node-title {
    fill: var(--neon);
}
#bgHexMap .bgh-node:hover .bgh-node-title-bg,
#bgHexMap .bgh-node:focus .bgh-node-title-bg,
#bgHexInteractWrap .bgh-node.is-hover .bgh-node-title-bg {
    fill: #000;
    stroke: var(--neon);
}
#bgHexMap .bgh-node:hover .bgh-node-index,
#bgHexMap .bgh-node:focus .bgh-node-index,
#bgHexInteractWrap .bgh-node.is-hover .bgh-node-index {
    fill: var(--neon);
}
#bgHexMap .bgh-node:hover .bgh-node-index-bg,
#bgHexMap .bgh-node:focus .bgh-node-index-bg,
#bgHexInteractWrap .bgh-node.is-hover .bgh-node-index-bg {
    fill: #000;
    stroke: var(--neon);
}
#bgHexMap .bgh-node:hover .bgh-node-fig,
#bgHexMap .bgh-node:focus .bgh-node-fig,
#bgHexInteractWrap .bgh-node.is-hover .bgh-node-fig {
    fill: var(--neon);
}
#bgHexMap .bgh-node:hover .bgh-callout,
#bgHexMap .bgh-node:focus .bgh-callout,
#bgHexInteractWrap .bgh-node.is-hover .bgh-callout {
    stroke: var(--neon);
}
#bgHexMap .bgh-spoke.is-hover {
    display: none;
}

/* ACTIVE / is-current state */
#bgHexMap .bgh-node.is-current .bgh-node-dot,
#bgHexInteractWrap .bgh-node.is-current .bgh-node-dot {
    fill: var(--neon);
    stroke: var(--neon);
    animation: bgh-dot-pulse-hover 1.4s ease-in-out infinite;
}
#bgHexMap .bgh-node.is-current .bgh-node-ring,
#bgHexInteractWrap .bgh-node.is-current .bgh-node-ring {
    stroke: var(--neon);
    animation: bgh-ring-pulse-hover 1.4s ease-in-out infinite;
}
#bgHexMap .bgh-node.is-current .bgh-node-title,
#bgHexInteractWrap .bgh-node.is-current .bgh-node-title {
    fill: var(--neon);
}
#bgHexMap .bgh-node.is-current .bgh-node-title-bg,
#bgHexInteractWrap .bgh-node.is-current .bgh-node-title-bg {
    fill: #000;
    stroke: var(--neon);
}
#bgHexMap .bgh-node.is-current .bgh-node-fig,
#bgHexInteractWrap .bgh-node.is-current .bgh-node-fig,
#bgHexMap .bgh-node.is-current .bgh-node-index,
#bgHexInteractWrap .bgh-node.is-current .bgh-node-index {
    fill: var(--neon);
}
#bgHexMap .bgh-node.is-current .bgh-callout,
#bgHexInteractWrap .bgh-node.is-current .bgh-callout {
    stroke: var(--neon);
}
/* active spoke */
#bgHexMap .bgh-spoke.is-active {
    display: none;
}
/* bgHexInteractWrap: force simulation 링크 선 */
#bgHexInteractWrap .bgh-link {
    /* stroke: #dde2ea; */
    stroke-width: var(--line-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.45;
}
#bgHexInteractWrap .bgh-links {
    pointer-events: none;
}
/* 아래는 모달 내 radial용; 배경은 D3 육각형 맵으로 대체됨 */
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    max-width: 22%;
    margin: 0;
    padding: 0.2rem 0.4rem;
    pointer-events: auto;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #dde2ea;
    font-family: var(--font);
    font-size: clamp(0.4rem, 1.2vw, 0.65rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: center center;
}
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item-title,
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item-fig {
    display: block;
    color: #dde2ea;
}
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item-fig {
    font-size: 0.72em;
}
/* 6단위 원형 배치: 중심 기준 60° 간격, 반지름 동일(vmin) */
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="0"] { transform: translate(-50%, -50%) rotate(0deg) translate(0, -40vmin); }
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="60"] { transform: translate(-50%, -50%) rotate(60deg) translate(0, -40vmin); }
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="120"] { transform: translate(-50%, -50%) rotate(120deg) translate(0, -40vmin); }
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="180"] { transform: translate(-50%, -50%) rotate(180deg) translate(0, -40vmin); }
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="240"] { transform: translate(-50%, -50%) rotate(240deg) translate(0, -40vmin); }
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="300"] { transform: translate(-50%, -50%) rotate(300deg) translate(0, -40vmin); }
/* 배경 radial 버튼: 회전 후 텍스트만 수평 유지 */
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item .clock-titles-radial__item-title,
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item .clock-titles-radial__item-fig {
    display: block;
    transform: rotate(var(--item-angle, 0deg));
}
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="0"] { --item-angle: 0deg; }
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="60"] { --item-angle: -60deg; }
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="120"] { --item-angle: -120deg; }
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="180"] { --item-angle: -180deg; }
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="240"] { --item-angle: -240deg; }
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__item[data-angle="300"] { --item-angle: -300deg; }
/* 배경 제목·원·십자선 등 선명히 표시 */
.page-bg-svg #withok-fullscreen-clock .clock-titles-radial__circle {
    stroke: #2b3441;
}
.ui-font-loader,
.font-loading-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(43,52,65,0.08);
    z-index: 99999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}
.font-loading-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.ui-font-loader.is-done,
.font-loading-overlay.is-done {
    pointer-events: none;
}

.ui-font-loader__pct {
    font-variant-numeric: tabular-nums;
}


/* ===== 7. Clock overlay shell (리디자인: 단일 배경, 단순 상단/하단) ===== */
/* ── clock modal: lab instrument chassis ── */
.clock-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
@media (max-width: 768px) {
  .clock-overlay {
    overflow: visible;
  }
}
.clock-overlay.is-open {
    display: block;
}


/* ===== Block 2: Body/overlay styles ===== */
  /* Type: global body; layout minimal */
  .why-do-web-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    display: block;
    word-break: keep-all;
    font-family: var(--font);
    font-weight: 400;
    font-style: normal;
  }

  .why-do-web-page a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
  }

  /* ===== Fullscreen clock & overlay layout (SVG 통일) ===== */
  #withok-fullscreen-clock {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
  }

    /* ── clock intro layer (radial title map, fullscreen clock face) ── */
    .clock-overlay__intro,
    .clock-overlay-stage__intro,
    #clockCarousel #withok-fullscreen-clock-carousel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      color: rgba(200,207,216,0.65);
    }
  /* 시계 스트립이 인트로 레이어 위에 보이도록 메인 영역 z-index 유지 */

  #clockCarousel #withok-fullscreen-clock-carousel .withok-fullscreen-clock__svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  #withok-fullscreen-clock .withok-fullscreen-clock__svg {
    display: block;
    pointer-events: none;
  }
  .withok-hover-clock__tick,
  .withok-hover-clock__hand,
  #withok-fullscreen-clock .withok-hover-clock line {
    stroke: #2b3441;
    stroke-width: 1.5;
  }
  /* 가장자리 꼭지: 파란색, 1.5rem, 효과 없음 */
  .withok-hover-corners {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100000;
  }
  .withok-hover-corner {
    position: absolute;
    width: 1rem;
    height: 1rem;
    color: #0000ff !important;
    display: block !important;
    flex: none !important;
    align-items: unset !important;
    justify-content: unset !important;
    /* fullscreen-clock.css 전역 규칙 opacity:0 / scale(0.7) 무효화 */
    opacity: 1 !important;
    transform: none !important;
    background: none !important;
    overflow: visible;
  }
  .withok-hover-corner polygon,
  .withok-hover-corner rect {
    fill: #0000ff !important;
  }
  .withok-hover-corner[data-corner="0"] { top: 0; left: 0; right: auto; bottom: auto; }
  .withok-hover-corner[data-corner="1"] { top: 0; right: 0; left: auto; bottom: auto; }
  .withok-hover-corner[data-corner="2"] { bottom: 0; left: 0; right: auto; top: auto; }
  .withok-hover-corner[data-corner="3"] { bottom: 0; right: 0; left: auto; top: auto; }
  /* ── top header bar: instrument panel strip ── */
  /* clock-overlay__controls: dock 헤더로 통합됨 — 독립 bar 스타일 해제 */


  /* non-intro poster 스타일: dock 헤더로 통합됨 */

  /* ===== 9. Clock overlay: inner (container, stage) ===== */
    * { box-sizing: border-box; }
    html {
      overflow: hidden;
      height: 100%;
    }
    body::-webkit-scrollbar { display: none; }

    /* ─── clock overlay: container & stage ─── */
    .clock-overlay__container,
    .clock-simulator-container {
      position: relative;
      width: 100%;
      min-height: 100vh;
      height: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      overflow: hidden;
      font-family: var(--clock-font);
      font: inherit;
      color: #c8cfd8;
    }
    .clock-overlay .clock-overlay__container,
    .clock-overlay .clock-simulator-container {
      margin: 0;
      font: inherit;
    }
    .clock-overlay__container::before,
    .clock-simulator-container::before {
      content: none;
    }

    .clock-overlay__stage,
    #clockCarousel {
      position: absolute;
      inset: 1rem;
      margin: 0;
      padding: 0;
      overflow: visible;
      border: none;
      box-sizing: border-box;
    }
    #clockCarousel::before,
    #clockCarousel::after { content: none; }
    /* ── exit / close button ── */
    .clock-exit-btn {
      position: relative;
      top: auto;
      left: auto;
      z-index: 1210;
      border: none;
      background: transparent;
      color: rgba(200,207,216,0.7);
      font: inherit;
      padding: 0.35rem;
      cursor: pointer;
      flex-shrink: 0;
      letter-spacing: 0.05em;
    }
    .clock-overlay.is-open .clock-exit-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }
    .clock-exit-btn:hover { color: #c8cfd8; }
    .clock-exit-btn__icon {
      width: 1.25rem;
      height: 1.25rem;
      display: block;
    }

    /* ══ 모달 고정 버튼 공통 베이스 ══
       .modal-icon-btn : 실버 메탈릭 버튼 — 모달 X, 메뉴(☰/×) 공용, .stage-btn과 동일 디자인 */
    .modal-icon-btn {
      position: fixed;
      z-index: 1300;
      display: none;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      min-width: 2.25rem;
      min-height: 2.25rem;
      padding: 0;
      border-radius: 5px;
      background: linear-gradient(180deg,
        #d8dfe8 0%, #c4ccd6 18%, #aeb8c4 50%, #9aa4b0 82%, #8a939f 100%);
      border: none;
      border-top: 1px solid #e8edf2;
      border-left: 1px solid #d0d8e2;
      border-right: 1px solid #8c959f;
      border-bottom: 1px solid #7a838e;
      box-shadow:
        0 3px 6px rgba(0,0,0,0.45),
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 -1px 0 rgba(0,0,0,0.25) inset;
      color: #2c3540;
      text-shadow: 0 1px 0 rgba(255,255,255,0.5);
      cursor: pointer;
      transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
      overflow: hidden;
    }
    .modal-icon-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%);
      pointer-events: none;
    }
    .modal-icon-btn svg {
      width: 0.9rem;
      height: 0.9rem;
      display: block;
      position: relative;
      flex-shrink: 0;
    }
    .modal-icon-btn:hover {
      background: linear-gradient(180deg,
        #e8eef5 0%, #d4dce8 18%, #bec9d6 50%, #aab5c2 82%, #9aa5b0 100%);
      box-shadow:
        0 4px 8px rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 -1px 0 rgba(0,0,0,0.2) inset;
      transform: translateY(-1px);
      color: #1a2330;
    }
    .modal-icon-btn:active {
      background: linear-gradient(180deg,
        #9aa4b0 0%, #aeb8c4 18%, #c4ccd6 50%, #d0d8e2 100%);
      box-shadow:
        0 1px 2px rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3) inset,
        0 1px 0 rgba(0,0,0,0.2) inset;
      transform: translateY(1px);
    }
    .clock-overlay.is-open .modal-icon-btn { display: inline-flex; }

    /* ── 모달 왼쪽 상단 닫기 버튼 ── */
    .clock-overlay__close-btn {
      top: 1.4rem;
      left: 1.4rem;
    }
    .clock-overlay__close-btn:hover { color: #ff5c5c; }

    /* ── dock 헤더 닫기(패널 토글) 버튼 ── */
    .clock-dock__close-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      margin-left: auto;
      flex-shrink: 0;
      background: transparent;
      border: none;
      color: rgba(200,207,216,0.45);
      cursor: pointer;
      padding: 0;
      border-radius: 2px;
      transition: color 0.12s, background 0.12s;
    }
    .clock-dock__close-btn svg {
      width: 0.85rem;
      height: 0.85rem;
      display: block;
    }
    .clock-dock__close-btn:hover {
      color: rgba(200,207,216,0.9);
      background: rgba(200,207,216,0.08);
    }
    /* ── instrument size readout ── */

    /* ── corner registration marks ── */
    #clockCarousel
    #clockCarousel
    #clockCarousel
    #clockCarousel
    #clockCarousel
    /* ===== 11. Clock toolbar ===== */







    /* ── hardware-style buttons (stage + bottom bar) ── */
    .stage-btn {
      width: 2.25rem;
      height: 2.25rem;
      min-width: 2.25rem;
      min-height: 2.25rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font: inherit;
      font-size: var(--font-m);
      border-radius: 5px;
      position: relative;
      /* brushed steel gradient */
      background: linear-gradient(180deg,
        #d8dfe8 0%, #c4ccd6 18%, #aeb8c4 50%, #9aa4b0 82%, #8a939f 100%);
      border: none;
      border-top: 1px solid #e8edf2;
      border-left: 1px solid #d0d8e2;
      border-right: 1px solid #8c959f;
      border-bottom: 1px solid #7a838e;
      box-shadow:
        0 3px 6px rgba(0,0,0,0.45),
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 -1px 0 rgba(0,0,0,0.25) inset;
      color: #2c3540;
      text-shadow: 0 1px 0 rgba(255,255,255,0.5);
      transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
    }
    /* 상단 glossy highlight */
    .stage-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%);
      pointer-events: none;
    }
    .stage-btn:hover {
      background: linear-gradient(180deg,
        #e8eef5 0%, #d4dce8 18%, #bec9d6 50%, #aab5c2 82%, #9aa5b0 100%);
      box-shadow:
        0 4px 8px rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 -1px 0 rgba(0,0,0,0.2) inset;
      transform: translateY(-1px);
      color: #1a2330;
    }
    .stage-btn:active {
      background: linear-gradient(180deg,
        #9aa4b0 0%, #aeb8c4 18%, #c4ccd6 50%, #d0d8e2 100%);
      box-shadow:
        0 1px 2px rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3) inset,
        0 1px 0 rgba(0,0,0,0.2) inset;
      transform: translateY(1px);
    }
    .stage-btn svg {
      width: 0.9rem;
      height: 0.9rem;
      flex-shrink: 0;
    }

    /* ===== 11b. 모달 하단 고정 바: 왼쪽 뒤집기+디바이스키, 오른쪽 화살표+인덱스 ===== */
    .clock-overlay__bottom-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1210;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin: 1.5rem;
      pointer-events: none;
      background: none;
      visibility: hidden;
    }
    .clock-overlay.is-open .clock-overlay__bottom-bar {
      visibility: visible;
      pointer-events: auto;
    }
    .clock-overlay__bottom-bar::before { display: none; }
    .clock-overlay__bottom-bar__left,
    .clock-overlay__bottom-bar__right {
      display: flex;
      align-items: center;
      gap: 0.52rem;
      padding: 0;
      background: none;
      border: none;
      box-shadow: none;
      pointer-events: auto;
    }
    .clock-overlay__bottom-bar__center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      align-items: center;
      pointer-events: auto;
    }
    .clock-overlay__bottom-bar__left .stage-btn,
    .clock-overlay__bottom-bar__right .stage-btn {
      width: 2.25rem;
      height: 2.25rem;
      min-width: 2.25rem;
      min-height: 2.25rem;
      border-radius: 5px;
    }
    /* ctrl-pill은 width 고정 제외 — 자체 min-width 사용 */
    .clock-overlay__bottom-bar__left .device-row__btn.ctrl-pill {
      width: auto;
      min-width: 3.6rem;
      height: 2rem;
      min-height: 2rem;
      border-radius: 5px;
    }
    .clock-overlay__bottom-bar__left .device-row__btn:not(.ctrl-pill) {
      width: 3rem;
      height: 3rem;
      min-width: 3rem;
      min-height: 3rem;
      border-radius: 5px;
    }
    .clock-overlay__bottom-bar__left .stage-btn:hover,
    .clock-overlay__bottom-bar__right .stage-btn:hover,
    .clock-overlay__bottom-bar__left .device-row__btn:hover {
      /* inherited from .stage-btn:hover */
    }
    .clock-overlay__bottom-bar__left .device-row__btn {
      padding: 0 0.7rem;
      min-width: auto;
      font-size: var(--font-s);
    }
    /* ── ctrl-pill: sensor 버튼 — stage-btn과 같은 밝은 3D 스타일 ── */
    .ctrl-pill {
      height: 2rem;
      min-height: 2rem;
      padding: 0 0.55rem 0 0.4rem;
      min-width: 3.4rem;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      border-radius: 5px;
      font: inherit;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      position: relative;
      /* brushed steel — same as stage-btn */
      background: linear-gradient(180deg,
        #d8dfe8 0%, #ffffff 18%, #282828 50%, #002fff 82%, #8a939f 100%);
      border: none;
      border-top: 1px solid #e8edf2;
      border-left: 1px solid #d0d8e2;
      border-right: 1px solid #8c959f;
      border-bottom: 1px solid #7a838e;
      box-shadow:
        0 3px 6px rgba(0,0,0,0.45),
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 -1px 0 rgba(0,0,0,0.25) inset;
      color: #2c3540;
      text-shadow: 0 1px 0 rgba(255,255,255,0.5);
      transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
    }
    .ctrl-pill::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%);
      pointer-events: none;
    }
    .ctrl-pill svg {
      width: 0.75rem;
      height: 0.75rem;
      flex-shrink: 0;
      opacity: 0.8;
      color: #2c3540;
    }
    .ctrl-pill:hover {
      background: linear-gradient(180deg,
        #e8eef5 0%, #d4dce8 18%, #bec9d6 50%, #aab5c2 82%, #9aa5b0 100%);
      box-shadow:
        0 4px 8px rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 -1px 0 rgba(0,0,0,0.2) inset;
      transform: translateY(-1px);
      color: #1a2330;
    }
    .ctrl-pill:hover svg { opacity: 1; }
    .ctrl-pill:active {
      background: linear-gradient(180deg,
        #8a939f 0%, #282828 18%, #001acc 50%, #002fff 82%, #6a737f 100%);
      box-shadow:
        0 1px 2px rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3) inset,
        0 1px 0 rgba(0,0,0,0.2) inset;
      transform: translateY(1px);
    }
    /* ON 상태: 형광 초록 accent — 전면 채도 유지 */
    .ctrl-pill[data-on="true"] {
      background: linear-gradient(180deg,
        #b8ffcc 0%, #88eeaa 18%, #44cc77 50%, #22aa55 82%, #118840 100%);
      border-top: 1px solid #ccffdd;
      border-left: 1px solid #88ddaa;
      border-right: 1px solid #118840;
      border-bottom: 1px solid #0a6630;
      color: #003318;
      text-shadow: 0 1px 0 rgba(255,255,255,0.4);
      box-shadow:
        0 0 12px rgba(0,220,80,0.35),
        0 3px 6px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,255,255,0.3) inset,
        0 -1px 0 rgba(0,80,30,0.3) inset;
    }
    .ctrl-pill[data-on="true"] svg { opacity: 1; color: #003318; }
    /* ── LED indicator dot ── */
    .btn-led {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-led--red {
      background: radial-gradient(circle at 35% 35%, #ff6666, #cc0000);
      box-shadow: 0 0 6px rgba(220,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.35) inset;
    }
    /* ON 상태에서 LED 초록으로 */
    .ctrl-pill[data-on="true"] .btn-led--red {
      background: radial-gradient(circle at 35% 35%, #ffffff, #44ff88);
      box-shadow: 0 0 8px rgba(0,220,80,0.9), 0 0 0 1px rgba(0,0,0,0.2) inset;
    }
    /* 모바일 전용 top-bar — 데스크탑에서는 숨김 */
    .clock-mobile-topbar { display: none; }

    .clock-overlay__bottom-bar__right .clock-index-dots {
      display: flex;
      gap: 0.3rem;
      align-items: center;
    }
    /* ===== 12. Clock panel strip ===== */
    .clock-overlay__strip-wrap {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(95vw, 95vh);
      height: min(95vw, 95vh);
      max-width: min(95vw, 95vh);
      max-height: min(95vw, 95vh);
      aspect-ratio: 1;
      /* circular instrument face */
      border-radius: 50%;
      overflow: hidden;
      z-index: 1;
      /* subtle engraved ring */
      box-shadow: 0 0 0 1px rgba(200,207,216,0.1), inset 0 0 0 1px rgba(200,207,216,0.05);
    }
    .clock-overlay__panel-strip,
    #clockStrip {
      display: flex;
      width: 600%;
      height: 100%;
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      z-index: 1;
    }
    /* 메인: stage와 동일한 박스, 시계 strip은 정확히 중앙(50%/translate) */
    .clock-overlay__main {
      position: absolute;
      inset: 0;
      bottom: 5.5rem;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      overflow: visible;
      pointer-events: none;
      z-index: 2;
    }
    .clock-overlay__main > * { pointer-events: auto; }
    .clock-overlay__main > .clock-overlay__strip-wrap { pointer-events: none; }
    .clock-overlay__main > .clock-overlay__strip-wrap .clock-panel { pointer-events: auto; }
    /* 모달 열림 시 시계 스트립 기본 표시 (인트로일 때만 아래에서 숨김) */
    .clock-overlay.is-open .clock-overlay__strip-wrap,
    .clock-overlay.is-open #clockStrip {
      visibility: visible;
    }
    /* 패널: 시계만 중앙 기준으로, 타이틀/장식은 흐름에서 분리 */
    .clock-panel {
      position: relative;
      width: 16.666%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 0;
      margin: 0;
      background: transparent;
      overflow: hidden;
      box-sizing: border-box;
    }
    /* 패널 진입 애니메이션: 중앙에서 scale-up */
    @keyframes panel-scale-in {
      from { transform: scale(0.5); opacity: 0; }
      to   { transform: scale(1);   opacity: 1; }
    }
    .clock-panel .flipWrapper.panel-enter {
      animation: panel-scale-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    /* 타이틀(포스터/닫기): 절대 배치로 시계 중앙 정렬에 영향 없음 */
    .clock-panel__title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      flex-shrink: 0;
      width: 100%;
      pointer-events: none;
    }
    .clock-panel__title .clock-overlay__exit-btn { pointer-events: auto; }
    /* 패널 내 포스터는 숨김 — 상단 바에만 제목 표시 */
    body:not(.clock-intro-active) .clock-panel__title .poster-typography { display: none; }
    /* 시계 영역이 패널 전체를 채우고, flipWrapper를 정확히 중앙에 */
    .clock-panel__clock {
      flex: 1;
      min-height: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      container-type: size;
    }
    .clock-panel__clock .flipWrapper {
      width: min(100cqw, 100cqh);
      height: min(100cqw, 100cqh);
      min-width: 180px;
      min-height: 180px;
    }
    .clock-panel[data-index="0"] {
      overflow: visible;
    }
    .clock-panel[data-index="5"] .clock-panel__number::before {
      content: "Bonus";
    }
    /* Dock: direct child of .clock-overlay__main (no wrapper) */
    .clock-overlay__main > .clock-dock {
      z-index: 200000;
    }
    .clock-panel__header {
      text-align: left;
      margin: 0;
      padding: 0;
      max-width: 18rem;
      display: none; /* 타이틀은 왼쪽 도크 헤더에서만 표시 */
    }
    .clock-panel__number {
      display: block;
      font: inherit;
      font-size: var(--font-s);
      font-weight: 600;
      color: var(--ink-muted);
      margin-bottom: 0;
    }
    .clock-panel__number::before {
      content: "Fig. ";
      font-variant-numeric: tabular-nums;
    }
    .clock-panel__title {
      margin: 0;
      font: inherit;
      font-size: var(--font-l);
      font-weight: 400;
      color: var(--ink);
    }
    .clock-panel__title .clock-panel__type {
      display: block;
      margin-left: 0;
      margin-top: 0;
    }
    .flipWrapper {
      aspect-ratio: 1;
      min-width: 180px;
      min-height: 180px;
      perspective: 1200px;
      flex-shrink: 1;
      box-sizing: border-box;
    }
    .panelFlipInner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .panelFlipInner.flipped {
      transform: rotateY(180deg);
    }
    .flipFace {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
    }
    .clock-panel__finger-wrap {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .clock-panel__finger-wrap svg {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .flipFront {
      background: #0a0a0a;
      outline: none;
    }

    .flipFront::before {
      content: none;
    }

    .flipBack {
      background: #0a0a0a;
      transform: rotateY(180deg);
      flex-direction: column;
      padding: 0;
      box-sizing: border-box;
      outline: none;
      overflow: hidden;
      container-type: inline-size;
    }

    /* 그레인 오버레이 */
    .flipBack::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 200px 200px;
      mix-blend-mode: overlay;
      opacity: 0.18;
      pointer-events: none;
      z-index: 0;
    }

    .flipFront > *,
    .flipBack > * {
      position: relative;
      z-index: 1;
    }

    .flipFront::after,
    .flipBack::after {
      content: none;
    }
    .flipFront svg circle[fill="#fff"],
    .flipBack svg circle[fill="#fff"] {
      fill: #dde2ea;
    }
    .flipFront svg circle[stroke="#fff"],
    .flipBack svg circle[stroke="#fff"] {
      stroke: #2b3441;
    }
    .flipFront svg line[stroke="#fff"],
    .flipBack svg line[stroke="#fff"],
    .flipFront .clockHand,
    .flipBack .clockHand {
      stroke: #2b3441;
    }
    .flipFront svg circle.clock-center-dot,
    .flipBack svg circle.clock-center-dot {
      fill: #0a0a0a;
    }
    .flipBack .backRing {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .flipBack .backRing svg {
      width: 100%;
      height: 100%;
    }
    /* 모든 뒷면 테두리 통일 */
    .flipBack .backRing circle {
      stroke: rgba(255,255,255,0.18) !important;
      stroke-width: 2px !important;
      fill: none !important;
    }

    /* ── 뒷면 콘텐츠 레이아웃 ── */
    .flipBack .backContent {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 22% 14% 14%;
      box-sizing: border-box;
      overflow: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .flipBack .backContent::-webkit-scrollbar { display: none; }
    .flipBack .backTitle {
      font-family: "triplex-sans", "Georgia", serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(1rem, 4.5cqi, 2rem);
      line-height: 1.1;
      margin: 0 0 0.5em;
      text-align: center;
      color: #fff;
      letter-spacing: 0.01em;
      flex-shrink: 0;
      white-space: nowrap;
    }
    /* 구분선 */
    .flipBack .backTitle::after {
      content: "";
      display: block;
      width: 2rem;
      height: 1px;
      background: rgba(255,255,255,0.25);
      margin: 0.55em auto 0;
    }
    .flipBack .backBody {
      font-family: "triplex-sans", "Georgia", serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(0.6rem, 2.2cqi, 0.88rem);
      line-height: 1.7;
      margin: 0;
      text-align: center;
      color: rgba(255,255,255,0.72);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      flex: 1;
      min-height: 0;
      max-width: 100%;
      scrollbar-width: none;
      padding-right: 2px;
    }
    .flipBack .backBody::-webkit-scrollbar { display: none; }
    /* 하단 페이드 힌트 */
    .flipBack .backContent::after {
      content: "";
      position: absolute;
      bottom: 14%;
      left: 14%;
      right: 14%;
      height: 2.5rem;
      background: linear-gradient(to bottom, transparent, #000);
      pointer-events: none;
      border-radius: 0 0 2px 2px;
      z-index: 2;
    }

    #clock {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .clock-panel[data-index="2"] #clockFace circle {
      fill: #0a0a0a !important;
      stroke: rgba(255,255,255,0.18) !important;
      stroke-width: 2 !important;
    }
    #clock svg,
    .emptyFront svg {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .emptyFront {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* clock 5 — in process placeholder */
    #eyeClockFront svg { overflow: hidden; }
    /* Matter.js 시계 — 블랙 배경 */
    .clockMatterFront {
      font: inherit;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      background: #0a0a0a;
    }
    .clockMatterFront::after {
      content: none;
    }
    #matterClockContainer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }
    #matterClockContainer canvas {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: auto;
      border-radius: 50%;
    }
    .clockMatterRing {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    /* ===== 9. Clock poster ===== */
    .poster-typography {
      position: absolute;
      top: 3rem;
      left: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
      z-index: 2;
      pointer-events: none;
      text-align: left;
    }
    .poster-typography__kicker {
      font-size: var(--font-s);
      font-weight: 400;
      color: rgba(200,207,216,0.35);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .poster-typography__title {
      margin: 0;
      font: inherit;
      font-size: clamp(1.8rem, 5.5vw, 4.5rem);
      font-weight: 400;
      color: rgba(200,207,216,0.88);
      letter-spacing: -0.01em;
    }
    .poster-typography__meta {
      margin-top: 0;
      font-size: var(--font-s);
      color: rgba(200,207,216,0.3);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .poster-diagram-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      background: rgba(200,207,216,0.1);
      pointer-events: none;
      z-index: 1;
      transform: translateY(-50%);
    }

    /* ===== 10. Clock radial map (D3 diagram; 오버레이 내부만) ===== */
    .clock-overlay .clock-titles-radial-wrap {
      position: absolute;
      inset: 0;
      pointer-events: auto;
      z-index: 2;
    }
    .clock-overlay .clock-titles-radial-wrap .clock-titles-radial {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(78vmin, 46rem);
      height: min(78vmin, 46rem);
      transform: translate(-50%, -50%);
    }
    .clock-overlay .clock-titles-radial--d3 {
      width: 100%;
      height: 100%;
      min-width: 200px;
      min-height: 200px;
    }
    /* Lab instrument: cool-gray on dark surface */
    .clock-overlay .clock-titles-radial__svg {
      color: rgba(200,207,216,0.75);
    }
    .clock-overlay .clock-titles-radial__item {
      fill: currentColor;
      outline: none;
      cursor: pointer;
    }
    .clock-overlay .clock-titles-radial__item:hover {
      fill: #c8cfd8;
    }
    .clock-overlay .clock-titles-radial__spoke {
      pointer-events: none;
      stroke: rgba(200,207,216,0.18);
    }
    .clock-overlay .clock-titles-radial__item.is-current .clock-titles-radial__node-title,
    .clock-overlay .clock-titles-radial__item.is-current {
      fill: #fff;
      font-weight: 400;
    }
    body.clock-intro-active .poster-diagram-line,
    body.clock-intro-active .clock-stage__size,
    body.clock-intro-active
    /* bottom-bar는 인트로 중에도 항상 클릭 가능 */
    body.clock-intro-active .clock-overlay__bottom-bar {
      pointer-events: auto;
      visibility: visible;
    }
    /* 인트로 해제 시: 인트로 뷰 숨기고 스트립·도크·시계 패널 표시 */
    body:not(.clock-intro-active) .clock-overlay.is-open .clock-overlay__intro {
      visibility: hidden;
      pointer-events: none;
    }
    body:not(.clock-intro-active) .clock-overlay.is-open .clock-overlay__strip-wrap,
    body:not(.clock-intro-active) .clock-overlay.is-open #clockStrip,
    body:not(.clock-intro-active) .clock-overlay.is-open .clock-overlay__main > .clock-dock,
    body:not(.clock-intro-active) .clock-overlay.is-open .clock-dock,
    body:not(.clock-intro-active) .clock-overlay.is-open .clock-overlay__bottom-bar {
      visibility: visible;
      pointer-events: auto;
    }
    /* bottom-bar: 모달 열리면 즉시 표시 (인트로 포함) — 개별 자식만 pointer-events 제어 */
    .clock-overlay.is-open .clock-overlay__bottom-bar {
      visibility: visible;
    }
    body.clock-intro-active .clock-exit-btn {
      display: inline-flex;
    }

    /* Dual clock */
    .dualClockWrap {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      clip-path: circle(50% at 50% 50%);
      background: #000;
    }
    .floatClock {
      position: absolute;
      width: 60%;
      height: 60%;
      will-change: transform;
      left: 0;
      top: 0;
    }
    .elseif-clock-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0a0a0a;
      border-radius: 50%;
      overflow: hidden;
    }
    .elseif-camera-layer {
      position: absolute;
      inset: 0;
      clip-path: circle(50% at 50% 50%);
      overflow: hidden;
      z-index: 0;
    }
    .elseif-camera-layer video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 카메라 ON: 시계판 투명화 */
    .elseif-clock-wrap.elseif-camera-on #elseifClockFace {
      fill: transparent;
      stroke: rgba(255,255,255,0.12);
    }
    /* 카메라 ON: SVG를 반투명 오버레이로 */
    .elseif-clock-wrap.elseif-camera-on svg {
      background: transparent;
    }
    /* 카메라 ON: 눈금/다이얼 살짝 투명하게 */
    .elseif-clock-wrap.elseif-camera-on #elseifTicksMinor line,
    .elseif-clock-wrap.elseif-camera-on #elseifTicksMajor line {
      stroke: rgba(255,255,255,0.35);
    }
    .elseif-clock-wrap.elseif-camera-on #elseifDial text {
      fill: rgba(255,255,255,0.5);
    }
    .elseif-clock-wrap.elseif-camera-on #elseifCameraHint {
      display: none;
    }
    /* 카메라 켜져있으면 dark상태에서도 hint 숨김 */
    .elseif-clock-wrap.elseif-dark #elseifCameraHint {
      display: none;
    }

    .elseif-clock-wrap svg {
      position: relative;
      z-index: 1;
      transform-origin: center center;
      transition: transform 0.05s linear;
    }

    /* 시침/분침 바 — 기본 다크 시계 */
    #elseifHourHand line,
    #elseifMinuteHand line,
    #elseifSecondHand line {
      transition: stroke 0.5s ease, opacity 0.5s ease;
    }
    #elseifDial text {
      transition: fill 0.5s ease, opacity 0.5s ease;
    }

    /* 기본: 시계 숫자/바늘 보임, else if/if 텍스트 숨김 */
    #elseifDial text,
    #elseifHourHand line,
    #elseifMinuteHand line,
    #elseifSecondHand line,
    #elseifTicksMinor line,
    #elseifTicksMajor line {
      opacity: 1;
      transition: opacity 1.2s ease-in-out;
    }
    #elseifHourHand text,
    #elseifMinuteHand text,
    #elseifSecondHand text {
      opacity: 0;
      fill: #39ff14;
      filter: drop-shadow(0 0 6px #39ff14);
      transition: opacity 1.2s ease-in-out, fill 1.2s ease-in-out, filter 1.2s ease-in-out;
    }

    /* 어두워지면(elseif-dark): 바늘/눈금/숫자 서서히 숨김 */
    .elseif-clock-wrap.elseif-dark #elseifDial text,
    .elseif-clock-wrap.elseif-dark #elseifHourHand line,
    .elseif-clock-wrap.elseif-dark #elseifMinuteHand line,
    .elseif-clock-wrap.elseif-dark #elseifSecondHand line,
    .elseif-clock-wrap.elseif-dark #elseifTicksMinor line,
    .elseif-clock-wrap.elseif-dark #elseifTicksMajor line {
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
    }
    /* else / else if / if 텍스트 서서히 나타남 — 네온 그린 */
    .elseif-clock-wrap.elseif-dark #elseifHourHand text,
    .elseif-clock-wrap.elseif-dark #elseifMinuteHand text,
    .elseif-clock-wrap.elseif-dark #elseifSecondHand text {
      opacity: 1;
      fill: #39ff14;
      filter: drop-shadow(0 0 8px #39ff14) drop-shadow(0 0 20px rgba(57,255,20,0.4));
    }
    /* elseif-dark: 시계판도 거의 투명하게 */
    .elseif-clock-wrap.elseif-dark #elseifClockFace {
      fill: rgba(0,0,0,0.6);
      stroke: rgba(255,255,255,0.05);
    }

    /* 눈금 스타일 */
    #elseifTicksMinor line {
      stroke: rgba(255,255,255,0.2);
      stroke-width: 1.5;
    }
    #elseifTicksMajor line {
      stroke: rgba(255,255,255,0.5);
      stroke-width: 2.5;
    }
    /* positions are controlled by JS only */
    .floatClock svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .floatClock text {
      font: inherit;
      fill: rgba(255,255,255,0.3);
      text-anchor: middle;
      dominant-baseline: central;
    }
    .floatClock .clockHand {
      stroke-linecap: round;
    }







    .media-controls {
      display: flex;
      flex-direction: row;
      gap: 0.35rem;
      align-items: center;
    }
    /* ═══ 3D 실버 하드웨어 버튼 ═══ */
    /* 레터프레스 잉크 버튼 — 목판 인쇄 스탬프 */
    .gyro-button,
    .media-toggle {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      padding: 0;
      cursor: pointer;
      font: inherit;
      font-size: var(--font-s);
      font-weight: 700;
      color: #ffffff;
      user-select: none;
      flex-shrink: 0;
      transition: transform 0.08s ease;
    }

    /* ctrl-pill 클래스가 있으면 ::before(dot) 숨김 — btn-led로 대체 */
    .gyro-button.ctrl-pill::before,
    .media-toggle.ctrl-pill::before {
      display: none;
    }

    /* 상태 점 — 빈 원 (꺼짐: 잉크 링) */
    .gyro-button::before,
    .media-toggle::before {
      content: "";
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
      border: none;
      background: transparent;
    }

    /* 상태 점 — 채워진 원 (켜짐: 잉크 채움) */
    .gyro-button[data-on="true"]::before,
    .media-toggle[data-on="true"]::before {
      background: #000;
    }

    /* 눌림 */
    .gyro-button:active,
    .media-toggle:active {
      transform: translate(2px, 2px);
      box-shadow: none;
    }

    /* 호버 */
    .gyro-button:hover,
    .media-toggle:hover {
      border-color: #dde2ea;
      color: #ffffff;
    }

    .gyro-button:focus-visible,
    .media-toggle:focus-visible {
      outline: none;
      outline-offset: 2px;
    }

    .media-buttons {
      display: flex;
      gap: 0.35rem;
      align-items: center;
    }
    .media-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
    }
    .media-toggle svg {
      width: 0.9rem;
      height: 0.9rem;
      flex-shrink: 0;
      stroke-width: var(--line-width);
      stroke: #2b3441;
    }
    .gyro-map {
      width: 72px;
      height: 72px;
      border: none;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-m);
      font: inherit;
      color: var(--ink-dim);
    }
    .gyro-map-inner {
      position: relative;
      width: 56px;
      height: 56px;
      border: none;
    }
    .gyro-map-inner::before,
    .gyro-map-inner::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: var(--paper);
    }
    .gyro-map-inner::before {
      width: 1px;
      height: 100%;
    }
    .gyro-map-inner::after {
      width: 100%;
      height: 1px;
    }
    .gyro-map-dot {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--paper);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: transform 0.06s ease-out;
    }
    /* ===== 14. Clock dock (리디자인: 접힌 기본, 부드러운 패널) ===== */
    /* ── instrument panel: dock ── */
    /* ── Clock Dock ──────────────────────────────────────────────────────
     * Desktop (>768px): always visible, no toggle needed
     * Mobile  (≤768px): hidden by default, toggle button in modal top-right
     * ------------------------------------------------------------------ */
    /* ═══════════════════════════════════════════════════
       CLOCK DOCK — full redesign
       ═══════════════════════════════════════════════════ */
    .clock-dock {
      position: fixed;
      top: 1.5rem;
      right: 1.5rem;
      bottom: 1.5rem;
      height: calc(100% - 3rem);
      max-height: calc(100vh - 3rem);
      width: clamp(440px, 36vw, 580px);
      z-index: 200000;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      border-radius: 8px;

      background:
        linear-gradient(160deg,
          rgba(220,225,232,0.18) 0%,
          rgba(180,188,200,0.10) 40%,
          rgba(140,150,165,0.13) 100%);
      backdrop-filter: blur(24px) saturate(1.2);
      -webkit-backdrop-filter: blur(24px) saturate(1.2);

      border: 1px solid rgba(220,226,235,0.18);

      box-shadow:
        -1px 0 0 rgba(0,0,0,0.18),
        -6px 0 32px rgba(0,0,0,0.22),
        -20px 0 60px rgba(0,0,0,0.12),
        inset 1px 0 0 rgba(255,255,255,0.18),
        inset 0 1px 0 rgba(255,255,255,0.22);

      transform: translateX(calc(100% + 2rem));
      visibility: hidden;
      pointer-events: none;
      transition:
        transform 0.34s cubic-bezier(0.32,0,0.08,1),
        visibility 0s linear 0.34s,
        box-shadow 0.34s ease;
    }

    .clock-overlay.is-open .clock-dock {
      transition:
        transform 0.34s cubic-bezier(0.32,0,0.08,1),
        visibility 0s linear 0s,
        box-shadow 0.34s ease;
    }

    .clock-overlay.is-open .clock-dock.clock-dock--open {
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0);
    }

    .clock-dock.clock-dock--open {
      transform: translateX(0);
      visibility: visible;
      pointer-events: auto;
      transition:
        transform 0.34s cubic-bezier(0.32,0,0.08,1),
        visibility 0s linear 0s;
    }

    /* ── DOCK TOGGLE TAB (우측 상단 고정 — 메뉴/닫기 전환) ── */
    #dockToggleTab {
      top: 1.4rem;
      right: 1.4rem;
    }
    /* dock 열림 상태: ☰ → × 전환은 HTML 아이콘 교체로 처리 */
    #dockToggleTab.dock-is-open {
      color: rgba(255,180,180,0.9);
      border-color: rgba(255,90,90,0.22);
    }
    #dockToggleTab.dock-is-open:hover { color: #ff5c5c; }
    /* dock toggle — 모달 열리면 항상 표시 (데스크탑/모바일 공통) */
    .clock-overlay.is-open #dockToggleTab {
      display: inline-flex;
    }
    /* dock header — replaced by .dock-header */
    .clock-dock__header { display: none; }
    .clock-dock__header-title { display: none; }
    .clock-dock__title-block { display: none; }
    .clock-dock__expand-btn { display: none; }
    .clock-dock__close-btn { display: none; }

    .clock-dock__body::-webkit-scrollbar { display: none; }

    /* ─── dock sections (legacy — kept for JS hooks) ─── */
    .clock-dock__section { display: none; }
    .clock-dock__section summary { display: none; }
    .clock-dock__section[open] summary::before { transform: rotate(0deg); }
    .clock-dock__section:not([open]) summary::before { transform: rotate(-90deg); }
    .clock-dock__fig-index { display: none; }
    .clock-dock__nav { display: none; }
    .control-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
      padding: 0.5rem 0.75rem;
      max-width: none;
      border: none;
      border-radius: 0;
    }
    .control-panel::before { display: none; }
    .monitor-status-row {
      display: flex;
      align-items: baseline;
      gap: var(--clock-space-1);
      margin: var(--clock-space-1);
      font-size: var(--font-s);
      color: rgba(200,207,216,0.55);
    }
    .monitor-status-label {
      font-weight: 400;
    }
    .monitor-status-chip {
      padding: 0.04rem 0.42rem;
      border: none;
      background: transparent;
      color: rgba(200,207,216,0.8);
      font-weight: 400;
      font-size: var(--font-s);
      border-radius: 0;
    }
    .monitor-status-time {
      margin-left: auto;
      font-variant-numeric: tabular-nums;
    }
    .monitor-tilt-gyro {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr);
      gap: var(--clock-space-1);
      align-items: stretch;
      width: 100%;
    }
    /* 1단계: 시간 (가장 강조) */
    .control-panel .time-hud {
      margin: 0;
      padding-bottom: var(--clock-space-1);
      border-bottom: none;
    }
    .control-panel .tilt-meter-wrap { flex-shrink: 0; }
    .control-panel .gyro-map {
      flex-shrink: 0;
      /* padding-bottom: var(--clock-space-1); */
      /* border-bottom: 1px solid var(--paper-dim); */
    }
    .control-panel .media-values {
      margin: 0;
    }
    .media-values {
      display: flex;
      flex-direction: column;
      justify-content:center;
      gap: 0.2rem;
      align-items: flex-start;
      font: inherit;
      font-size: var(--font-s);
      font-weight: 400;
      color: var(--ink-muted);
      font-variant-numeric: tabular-nums;
    }
    .media-value-row {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    .media-value-label { color: var(--ink-dim); }
    .media-value-text { min-width: 2.2em; text-align: right; }
    .device-row {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.28rem 0.1rem;
      width: 100%;
      border-bottom: none;
    }
    .device-row:last-child {
      border-bottom: none;
    }

    .device-row__btn {
      flex-shrink: 0;
    }
    .device-row__meta {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.06rem;
    }
    .clock-dock .device-row__label {
      font-size: var(--font-s);
      color: rgba(200,207,216,0.4);
    }
    .clock-dock .device-row__value {
      font-size: var(--font-s);
      font-variant-numeric: tabular-nums;
      color: rgba(200,207,216,0.85);
    }
    .clock-dock .time-hud {
      color: rgba(200,207,216,0.85);
    }
    .clock-dock .media-value-label { color: rgba(200,207,216,0.35); }
    .clock-dock .media-value-text { color: rgba(200,207,216,0.75); }
    .time-hud {
      font: inherit;
      font-size: var(--font-m);
      font-weight: 400;
      color: rgba(200,207,216,0.85);
      text-align: left;
      padding: 0;
      border: none;
      border-radius: 0;
      background: none;
      min-width: 7em;
      font-variant-numeric: tabular-nums;
    }
    .time-hud span { display: block; }
    .tilt-meter-wrap {
      display: flex;
      align-items: center;
      gap: var(--clock-space-2);
      font: inherit;
      font-size: var(--font-s);
      font-weight: 400;
      color: rgba(200,207,216,0.5);
    }
    .tilt-meter-bar {
      width: 3.5rem;
      height: 2px;
      background: rgba(200,207,216,0.12);
      border: none;
      border-radius: 0;
      overflow: hidden;
    }
    .tilt-meter-fill {
      height: 100%;
      width: 0%;
      background: rgba(200,207,216,0.5);
      border-radius: 0;
      transition: width 0.08s ease-out;
    }
    .tilt-values {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
      font-size: var(--font-s);
      color: rgba(200,207,216,0.4);
    }
    .tilt-values span {
      white-space: nowrap;
    }

    /* ═══════════════════════════════════════════════
       DockPanel (dp-*) — DJ console / instrument UI
       ═══════════════════════════════════════════════ */

    /* ── DOCK HEADER ── */
    .dock-header {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.3rem 0.45rem 0.28rem;
      flex-shrink: 0;
      position: relative;
      background:
        linear-gradient(180deg,
          rgba(255,255,255,0.12) 0%,
          rgba(200,210,222,0.06) 100%);
      border-bottom: 1px solid rgba(220,226,235,0.18);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        0 1px 4px rgba(0,0,0,0.1);
    }
    /* silver top line */
    .dock-header::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.55) 30%,
        rgba(210,218,228,0.4) 70%,
        transparent 100%);
    }
    .dock-header__brand {
      display: flex;
      flex-direction: column;
      gap: 0.06rem;
      flex: 1;
      min-width: 0;
    }
    .dock-header__model {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.52rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(150,170,200,0.35);
      font-weight: 600;
    }
    .dock-header__sub {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.66rem;
      letter-spacing: 0.07em;
      color: rgba(205,220,242,0.82);
      font-weight: 500;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dock-header__time {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.68rem;
      font-variant-numeric: tabular-nums;
      color: #00e5ff;
      letter-spacing: 0.05em;
      flex-shrink: 0;
      text-shadow:
        0 0 10px rgba(0,229,255,0.55),
        0 0 4px rgba(0,229,255,0.3);
    }
    .dock-header__close {
      display: none; /* dockToggleTab이 우측 상단에서 동일 역할 수행 */
    }

    /* ── DOCK BODY: 3-column parallel grid ── */
    .clock-dock__body {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr;
      gap: 1px;
      background: rgba(0,0,0,0.7);
      padding: 0;
      overflow: hidden;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    /* ── COLUMN BASE ── */
    .dp-col {
      display: flex;
      justify-content: center;
      flex-direction: column;
      gap: 0;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      position: relative;
      padding: 0 1rem;
      background:
        linear-gradient(160deg,
          rgba(210,218,228,0.10) 0%,
          rgba(185,195,208,0.06) 100%);
    }
    .dp-col::-webkit-scrollbar { display: none; }
    .dp-col::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 80%; height: 35%;
      background: radial-gradient(
        ellipse at 0% 0%,
        rgba(255,255,255,0.08) 0%,
        transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    .dp-col-label {
      flex-shrink: 0;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.5rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(140,160,185,0.38);
      padding: 0.16rem 0.35rem;
      background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
      border-bottom: 1px solid rgba(255,255,255,0.045);
      display: flex;
      align-items: center;
      gap: 0.3rem;
      position: relative;
      z-index: 1;
    }

    /* ── ROW ── */
    .dp-row {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.12rem 0.35rem;
      border-bottom: 1px solid rgba(255,255,255,0.028);
      position: relative;
      z-index: 1;
      min-height: 0;
      flex-shrink: 0;
    }
    .dp-row--wide { flex-wrap: nowrap; }
    .dp-row--index {
      padding: 0.22rem 0.35rem;
      gap: 0.4rem;
      align-items: center;
    }

    /* ── 2-column row grid ── */
    .dp-rows-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      position: relative;
      z-index: 1;
    }
    .dp-rows-2col .dp-row {
      border-right: 1px solid rgba(255,255,255,0.028);
    }
    .dp-rows-2col .dp-row:nth-child(even) {
      border-right: none;
    }
    .dp-big-index__num {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 2.1rem;
      font-weight: 700;
      line-height: 1;
      color: #ffffff;
      text-shadow: none;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.04em;
      flex-shrink: 0;
    }
    .dp-index-meta {
      display: flex;
      flex-direction: column;
      gap: 0.18rem;
    }
    .dp-k {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.5rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(130,150,175,0.38);
      flex-shrink: 0;
      min-width: 2rem;
      font-weight: 500;
    }
    .dp-v {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.64rem;
      color: rgba(195,210,230,0.82);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      font-variant-numeric: tabular-nums;
      font-weight: 400;
    }
    .dp-v--accent {
      color: rgba(255,255,255,0.9);
      font-weight: 600;
      text-shadow: none;
    }
    .dp-v--mono   { font-variant-numeric: tabular-nums; }
    .dp-v--dim    { color: rgba(200,207,216,0.28); }

    /* ── BADGE ── */
    .dp-badge {
      display: inline-block;
      padding: 0.03rem 0.22rem;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.49rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      font-weight: 600;
      border-radius: 2px;
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.12);
      white-space: nowrap;
      flex-shrink: 0;
      box-shadow: none;
    }
    .dp-badge--dim   {
      background: transparent;
      color: rgba(255,255,255,0.22);
      border-color: rgba(255,255,255,0.07);
      box-shadow: none;
    }
    .dp-badge--ok    {
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.7);
      border-color: rgba(255,255,255,0.15);
      box-shadow: none;
    }
    .dp-badge--err   {
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.45);
      border-color: rgba(255,255,255,0.1);
      box-shadow: none;
    }
    .dp-badge--warn  {
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.6);
      border-color: rgba(255,255,255,0.13);
      box-shadow: none;
    }
    .dp-badge--accent {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.75);
      border-color: rgba(255,255,255,0.18);
    }

    /* ── VU METERS ── */
    .dp-vu-row {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.12rem 0.35rem;
      border-bottom: 1px solid rgba(255,255,255,0.028);
      position: relative;
      z-index: 1;
      flex-shrink: 0;
    }
    .dp-vu-label {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.5rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(130,150,175,0.38);
      flex-shrink: 0;
      min-width: 1.7rem;
      font-weight: 500;
    }
    .dp-vu-track {
      flex: 1;
      height: 3px;
      background: rgba(0,0,0,0.5);
      border-radius: 1px;
      overflow: hidden;
      box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.7),
        inset 0 -1px 0 rgba(255,255,255,0.025);
    }
    .dp-vu-fill {
      height: 100%;
      width: 0%;
      transition: width 0.08s linear;
      border-radius: 1px;
    }
    .dp-vu-fill--green  {
      background: linear-gradient(90deg, #00c853, #69ff47);
      box-shadow: 0 0 5px rgba(105,255,71,0.5);
    }
    .dp-vu-fill--red    {
      background: linear-gradient(90deg, #b71c1c, #e63030);
      box-shadow: 0 0 5px rgba(230,48,48,0.5);
    }
    .dp-vu-fill--cyan   {
      background: linear-gradient(90deg, #0077aa, #00e5ff);
      box-shadow: 0 0 5px rgba(0,229,255,0.5);
    }
    .dp-vu-fill--silver {
      background: linear-gradient(90deg, rgba(200,207,216,0.2), rgba(200,207,216,0.55));
    }
    .dp-vu-val {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.52rem;
      font-variant-numeric: tabular-nums;
      color: rgba(195,210,228,0.45);
      min-width: 1.8rem;
      text-align: right;
    }

    /* ── TILT ── */
    .dp-tilt-axis {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.12rem 0.35rem;
      border-bottom: 1px solid rgba(255,255,255,0.028);
      position: relative;
      z-index: 1;
      flex-shrink: 0;
    }
    .dp-tilt-bar {
      flex: 1;
      height: 3px;
      background: rgba(0,0,0,0.5);
      border-radius: 1px;
      overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
    }
    .dp-tilt-bar__fill {
      height: 100%;
      width: 50%;
      background: linear-gradient(90deg, #0099cc, #00e5ff);
      border-radius: 1px;
      transition: width 0.08s linear;
      box-shadow: 0 0 5px rgba(0,229,255,0.4);
    }

    /* ── GYRO WRAP (scope + access leds) ── */
    .dp-gyro-wrap {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.18rem 0.35rem;
      border-bottom: 1px solid rgba(255,255,255,0.028);
      position: relative;
      z-index: 1;
      flex-shrink: 0;
    }
    .dp-gyro-labels {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .dp-gyro-labels .dp-row {
      padding: 0.06rem 0;
      border-bottom: none;
      gap: 0.22rem;
    }
    .dp-gyro-scope {
      position: relative;
      width: 2.4rem;
      height: 2.4rem;
      flex-shrink: 0;
    }
    .dp-gyro-scope__ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(0,229,255,0.18);
      background: radial-gradient(circle,
        rgba(0,229,255,0.025) 0%,
        rgba(0,0,0,0.5) 100%);
      box-shadow:
        0 0 8px rgba(0,229,255,0.05),
        inset 0 0 6px rgba(0,0,0,0.7);
    }
    .dp-gyro-scope__cross {
      position: absolute;
      inset: 0;
    }
    .dp-gyro-scope__cross::before,
    .dp-gyro-scope__cross::after {
      content: "";
      position: absolute;
      background: rgba(0,229,255,0.1);
    }
    .dp-gyro-scope__cross::before { width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
    .dp-gyro-scope__cross::after  { height: 1px; width: 100%; top: 50%; left: 0; transform: translateY(-50%); }
    .dp-gyro-scope__dot {
      position: absolute;
      width: 4px; height: 4px;
      background: #00e5ff;
      border-radius: 50%;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      transition: top 0.08s linear, left 0.08s linear;
      box-shadow: 0 0 7px rgba(0,229,255,0.9);
    }

    /* ── ACCESS LEDs ── */
    .dp-led {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(70,85,105,0.35);
      flex-shrink: 0;
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
      transition: background 0.25s, box-shadow 0.25s;
    }
    .dp-led--on-green {
      background: #00ff88;
      box-shadow: 0 0 7px rgba(0,255,136,0.75), inset 0 1px 1px rgba(255,255,255,0.3);
    }
    .dp-led--on-red {
      background: #e63030;
      box-shadow: 0 0 7px rgba(230,48,48,0.75), inset 0 1px 1px rgba(255,255,255,0.3);
    }

    /* FLOW fader */
    .dp-fader {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 2px;
      background: rgba(255,255,255,0.07);
      border-radius: 1px;
      outline: none;
      cursor: pointer;
      min-width: 1.2rem;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
    }
    .dp-fader::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 8px; height: 8px;
      background: linear-gradient(180deg, rgba(220,230,245,0.92) 0%, rgba(145,160,182,0.82) 100%);
      border-radius: 2px;
      cursor: pointer;
      box-shadow:
        0 1px 4px rgba(0,0,0,0.7),
        0 0 0 1px rgba(255,255,255,0.08);
    }
    .dp-fader::-moz-range-thumb {
      width: 8px; height: 8px;
      background: linear-gradient(180deg, rgba(220,230,245,0.92) 0%, rgba(145,160,182,0.82) 100%);
      border: none;
      border-radius: 2px;
      cursor: pointer;
    }

    /* log count */
    .dp-log-count {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.5rem;
      color: rgba(195,207,216,0.22);
      font-variant-numeric: tabular-nums;
      margin-left: 0.15rem;
    }

    /* ── LOG COLUMN ── */
    .dp-col--log {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 1rem;
    }
    .dp-col--log .clock-terminal {
      flex: 1;
      overflow: hidden;
      padding: 0;
      margin: 0;
      position: relative;
      z-index: 1;
      background: transparent;
    }
    .dp-col--log .clock-terminal__body {
      font-family: "Helvetica Neue", Helvetica, "Courier New", monospace;
      font-size: 0.52rem;
      line-height: 1.55;
      color: rgba(255,255,255,0.7);
      margin: 0;
      padding: 0.15rem 0.35rem;
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }

    /* ── DOCK FOOTER ── */
    .dock-footer {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.18rem 0.35rem;
      flex-shrink: 0;
      background:
        linear-gradient(180deg,
          rgba(18,22,32,0.98) 0%,
          rgba(10,12,18,1) 100%);
      border-top: 1px solid rgba(255,255,255,0.05);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .dock-footer__session {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 0.53rem;
      font-variant-numeric: tabular-nums;
      color: rgba(130,155,185,0.32);
      letter-spacing: 0.09em;
      margin-right: auto;
    }
    .dock-footer__btn {
      padding: 0.12rem 0.3rem;
      font-size: 0.5rem;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 500;
      background:
        linear-gradient(180deg,
          rgba(45,52,68,0.7) 0%,
          rgba(20,25,36,0.9) 100%);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 3px;
      color: rgba(180,196,218,0.45);
      cursor: pointer;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.05),
        0 2px 5px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.06);
      transition: background 0.12s, color 0.12s, box-shadow 0.1s, transform 0.08s;
    }
    .dock-footer__btn:hover {
      background:
        linear-gradient(180deg,
          rgba(62,72,95,0.85) 0%,
          rgba(30,37,52,0.95) 100%);
      color: rgba(216,228,248,0.85);
      border-color: rgba(255,255,255,0.12);
      box-shadow:
        0 1px 0 rgba(255,255,255,0.08),
        0 3px 8px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .dock-footer__btn:active {
      transform: translateY(1px);
      box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    }
    .dock-footer__btn[aria-pressed="true"] {
      background:
        linear-gradient(180deg, rgba(0,210,255,0.14) 0%, rgba(0,130,170,0.07) 100%);
      color: #00e5ff;
      border-color: rgba(0,229,255,0.28);
      box-shadow:
        0 0 8px rgba(0,229,255,0.18),
        inset 0 1px 0 rgba(0,229,255,0.1);
    }
    .dock-footer__btn--warn {
      border-color: rgba(230,48,48,0.18);
      color: rgba(230,48,48,0.45);
    }
    .dock-footer__btn--warn:hover {
      background: linear-gradient(180deg, rgba(160,25,25,0.14) 0%, rgba(70,8,8,0.18) 100%);
      color: #e63030;
      border-color: rgba(230,48,48,0.3);
    }

    /* ════════════════════════════════════════════════ */
    .clock-terminal {
      position: relative;
      width: 100%;
      min-width: 0;
      height: 100%;
      background: rgba(0,0,0,0.2);
      border: none;
      border-radius: 0;
      font: inherit;
      font-size: var(--font-m);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      border-top: none;
      margin: 0.3rem 0.6rem;
    }
    .clock-terminal__title { font-weight: 400; color: rgba(200,207,216,0.65); letter-spacing: 0.05em; }
    .clock-terminal__body {
      margin: 0;
      padding: 0.4rem;
      flex: 1;
      overflow: hidden;
      color: rgba(200,207,216,0.55);
      white-space: pre-wrap;
      word-break: break-word;
      font-size: var(--font-s);
    }
    .clock-terminal__body .log-num { color: rgba(200,207,216,0.25); margin-right: 0.25rem; }
    .clock-terminal__body .log-tag { color: rgba(200,207,216,0.8); font-weight: 400; }
    .clock-terminal__body .log-time { color: rgba(200,207,216,0.25); }
    .clock-index-dots {
      display: flex;
      gap: 0.3rem;
      align-items: center;
      justify-content: center;
      padding: 0.2rem 0.4rem;
      border-radius: 3px;
      background: linear-gradient(180deg, #1a2028 0%, #222a32 100%);
      border: 1px solid #111820;
      box-shadow:
        0 1px 3px rgba(0,0,0,0.5) inset,
        1px 1px 0 rgba(255,255,255,0.05);
    }

    /* ── fixed 독립 dots (모달 하단 중앙) ── */
    #clockIndexDots {
      position: fixed;
      bottom: 1.2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1250;
      gap: 0.45rem;
      padding: 0.35rem 0.65rem;
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s, visibility 0s linear 0.2s;
    }
    .clock-overlay.is-open #clockIndexDots {
      visibility: visible;
      pointer-events: auto;
      opacity: 1;
      transition: opacity 0.2s, visibility 0s linear 0s;
    }
    .clock-index-dot {
      width: 0.7rem;
      height: 5px;
      border-radius: 2px;
      /* inactive: dark recessed cap */
      background: linear-gradient(180deg, #3a434c 0%, #2a333c 100%);
      border: 1px solid #141c24;
      box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
      cursor: pointer;
      transition: background 0.18s ease, width 0.18s ease, box-shadow 0.18s ease;
    }
    .clock-index-dot:hover {
      background: linear-gradient(180deg, #7a8898 0%, #5a6878 100%);
      border-color: #4a5868;
    }
    .clock-index-dot.is-current {
      width: 1.5rem;
      background: linear-gradient(180deg, #d8e0e8 0%, #b0bcc8 50%, #8a98a8 100%);
      border-color: #6a7888;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 0 4px rgba(180,200,220,0.4);
    }
    .clock-panel__type {
      display: inline-block;
      font: inherit;
      font-size: var(--font-m);
      font-weight: 600;
      color: var(--ink-muted);
      margin-top: 0;
      padding-left: 0.5rem;
      border-left: 1px solid #fff;
    }




    /* 모바일/태블릿: 스크롤 없이 좌측 제어판 + 우측 스테이지 */
    .stage-btn--panel {
      display: none;
    }
    /* ─── clock overlay: mobile ─── */
    @media (max-width: 768px) {
      :root {
        --stage-gap: 0.5rem;
        --console-h: min(68vh, 30rem);
      }
      html, body { overflow: hidden; height: 100%; }
      .clock-simulator-container {
        height: 100%;
        padding: 0;
        overflow: visible;
      }
      .clock-dock {
        top: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        width: min(440px, calc(100vw - 1rem));
        height: calc(100% - 1rem);
        max-height: calc(100vh - 1rem);
        border-radius: 8px;
        /* Mobile: hidden by default, slide in when --open */
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
      }
      /* Mobile: dock open state */
      .clock-dock.clock-dock--open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
      }
      /* Mobile: override desktop always-open rule */
      .clock-overlay.is-open .clock-dock {
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
      }
      .clock-overlay.is-open .clock-dock.clock-dock--open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
      }
      /* Mobile: 데스크탑 modal-icon-btn 숨김 — 모바일 전용 topbar가 대체 */
      .clock-overlay.is-open #dockToggleTab,
      .clock-overlay.is-open .clock-overlay__close-btn {
        display: none !important;
      }
      .clock-dock__header { display: none; }
      .clock-dock__title-block { display: none; }
      .clock-dock__expand-btn { display: none; }
      .clock-dock__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
      }
      .dp-col { overflow-y: auto; }
      .shader-tuning__row {
        grid-template-columns: 3.8rem minmax(0, 1fr);
        font-size: var(--font-s);
      }
      .clock-dock__divider { display: none; }
      .clock-terminal { font-size: var(--font-s); }
      .control-panel .time-hud { font-size: var(--font-m); }
      #clockCarousel {
        position: absolute;
        inset: 0;
        margin: 0;
      }
      #clockCarousel::after { display: none; }

      /* 모바일 뒷면 — 더 넓은 패딩, 스크롤 강조 */
      .flipBack .backContent {
        padding: 1.5rem 1.2rem 1.2rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .flipBack .backRing { display: none; }
      .flipBack .backContent::after { display: none; }
      /* 모바일 Safari flip fix: overflow:hidden 조상이 preserve-3d를 flat으로 만드는 문제 해결 */
      .clock-panel {
        overflow: visible;
      }
      .clock-overlay__strip-wrap {
        overflow: visible;
      }
      .flipWrapper {
        -webkit-perspective: 800px;
        perspective: 800px;
        overflow: visible;
      }
      .panelFlipInner {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        overflow: visible;
      }
      .flipFace {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }
      .flipBack {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        border-radius: 50%;
        overflow: hidden;
      }
      .flipFront {
        border-radius: 50%;
        overflow: hidden;
      }
      .flipBack .backTitle {
        font-size: clamp(0.9rem, 5vw, 1.5rem);
        white-space: normal;
      }
      .flipBack .backBody {
        font-size: clamp(0.62rem, 3.2vw, 0.82rem);
        text-align: left;
      }

      /* 모바일: bottom-bar 숨김 — 상단 topbar로 대체 */
      .clock-overlay__bottom-bar {
        display: none !important;
      }

      /* 모바일 전용 bottom-bar (기존 topbar를 하단으로 이동) */
      .clock-mobile-topbar {
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        z-index: 1300;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.45rem 0.6rem;
        padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
        background:
          linear-gradient(0deg,
            rgba(10,12,18,0.92) 0%,
            rgba(10,12,18,0) 100%);
        backdrop-filter: blur(10px) saturate(1.4);
        -webkit-backdrop-filter: blur(10px) saturate(1.4);
        visibility: hidden;
        pointer-events: none;
        transition: visibility 0s linear 0.2s, opacity 0.2s;
        opacity: 0;
      }
      .clock-overlay.is-open .clock-mobile-topbar {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
        transition: visibility 0s linear 0s, opacity 0.2s;
      }
      .clock-mobile-topbar__left,
      .clock-mobile-topbar__right {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        flex-shrink: 0;
      }
      .clock-mobile-topbar__center {
        flex: 1;
        display: none;
      }

      /* 우측 상단 dock 토글 FAB */
      .mob-dock-fab {
        position: fixed;
        top: max(0.7rem, env(safe-area-inset-top));
        right: 0.7rem;
        z-index: 1400;
        width: 3.2rem;
        height: 3.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
          linear-gradient(180deg,
            rgba(50,58,78,0.92) 0%,
            rgba(18,22,32,0.96) 100%);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
        color: rgba(200,216,235,0.7);
        cursor: pointer;
        font-size: 1.1rem;
        box-shadow:
          0 2px 12px rgba(0,0,0,0.6),
          inset 0 1px 0 rgba(255,255,255,0.06);
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        transition: visibility 0s linear 0.2s, opacity 0.2s, background 0.12s;
      }
      .clock-overlay.is-open .mob-dock-fab {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
        transition: visibility 0s linear 0s, opacity 0.2s, background 0.12s;
      }
      .mob-dock-fab:hover {
        background:
          linear-gradient(180deg,
            rgba(70,80,105,0.95) 0%,
            rgba(28,34,48,0.98) 100%);
        color: #d8ff00;
        border-color: rgba(216,255,0,0.25);
      }
      .mob-dock-fab[aria-expanded="true"] {
        background:
          linear-gradient(180deg,
            rgba(216,255,0,0.15) 0%,
            rgba(130,160,0,0.08) 100%);
        color: #d8ff00;
        border-color: rgba(216,255,0,0.3);
        box-shadow:
          0 0 10px rgba(216,255,0,0.15),
          0 2px 12px rgba(0,0,0,0.5),
          inset 0 1px 0 rgba(255,255,255,0.06);
      }
      /* 모바일: dots를 버튼 바 위로 올림 */
      #clockIndexDots {
        bottom: 5.5rem;
      }
      /* ON 상태 센서 버튼 */
      .mob-sensor-btn[data-on="true"] {
        background: linear-gradient(180deg,
          #b8ffcc 0%, #88eeaa 18%, #44cc77 50%, #22aa55 82%, #118840 100%) !important;
        border-top: 1px solid #ccffdd !important;
        border-bottom: 1px solid #0a6630 !important;
        color: #003318 !important;
        box-shadow: 0 0 10px rgba(0,200,80,0.4), 0 2px 5px rgba(0,0,0,0.4) !important;
      }
      /* 모바일: strip-wrap — 하단 바 높이 고려, 원형 클립은 flip fix와 함께 visible로 처리 */
      .clock-overlay__strip-wrap {
        position: fixed;
        aspect-ratio: 1;
        border-radius: 50%;
        /* clip-path로 원형 클리핑 — overflow:hidden은 preserve-3d를 무효화하므로 사용 불가 */
        overflow: visible;
        -webkit-clip-path: circle(50%);
        clip-path: circle(50%);
      }
      /* 모바일: main 영역 — 상단 offset 제거, 하단에 버튼 높이만큼 여유 */
      .clock-overlay__main {
        top: 0;
        bottom: 5rem;
      }
      /* 모바일: 모달 내 인트로 원형 시계 숨김 */
      #clockCarousel .clock-overlay__intro,
      #clockCarousel .clock-overlay-stage__intro {
        display: none !important;
      }
      .clock-stage__size,

      .clock-overlay .clock-titles-radial {
        width: min(82vmin, 22rem);
        height: min(82vmin, 22rem);
      }
      .clock-overlay .clock-titles-radial::before {
        height: 100%;
      }
      .clock-overlay .clock-titles-radial::after {
        width: 100%;
      }
      .clock-overlay .clock-titles-radial__axis-label {
        font-size: var(--font-s);
        max-width: 5.8rem;
      }
      .clock-overlay .clock-titles-radial__axis-label--top {
        top: -1.9rem;
      }
      .clock-overlay .clock-titles-radial__axis-label--bottom {
        bottom: -1.9rem;
      }
      .clock-overlay .clock-titles-radial__axis-label--left {
        left: -2.7rem;
      }
      .clock-overlay .clock-titles-radial__axis-label--right {
        right: -2.7rem;
      }
      .poster-typography {
        top: 0.55rem;
        left: 0.55rem;
      }
      .poster-typography__title {
        font-size: clamp(1rem, 6vw, 1.8rem);
      }
      .poster-typography__meta,
      .poster-typography__kicker {
        font-size: var(--font-s);
      }
      .clock-panel__header {
        max-width: 12rem;
      }
      .flipWrapper {
        aspect-ratio: 1;
        min-width: 180px;
        min-height: 180px;
      }
      /* 모바일: clock-panel 전체 채우기 — aspect-ratio 보장 */
      .clock-panel {
        overflow: visible;
        width: 16.666%;
        min-height: 100%;
      }
      .clock-panel__clock {
        overflow: visible;
        container-type: size;
      }


      .stage-btn {
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        min-height: 2.25rem;
      }
      .stage-btn svg { width: 0.9rem; height: 0.9rem; }
      .clock-overlay__bottom-bar__left .device-row__btn.ctrl-pill {
        height: 2rem;
        min-height: 2rem;
        min-width: 3.5rem;
        font-size: 0.6rem;
        padding: 0 0.5rem;
      }
      .ctrl-pill {
        height: 2rem;
        min-height: 2rem;
        min-width: 3.5rem;
        font-size: 0.6rem;
        padding: 0 0.5rem;
      }
      .mob-top-btn {
        width: 2.25rem !important;
        height: 2.25rem !important;
        min-width: 2.25rem !important;
        min-height: 2.25rem !important;
        border-radius: 4px !important;
        font-size: 0.55rem !important;
      }
      .mob-top-btn svg {
        width: 0.9rem !important;
        height: 0.9rem !important;
      }
      .stage-btn--panel {
        display: inline-flex;
      }
    }

  /* ===== Page background: radial map (원형 6개 선 + 글씨) ===== */
  .page-bg-radial {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
  }
  .page-bg-radial .clock-titles-radial__circle {
    pointer-events: none;
  }
  .page-bg-radial .clock-titles-radial {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(78vmin, 46rem);
    height: min(78vmin, 46rem);
  }
  .page-bg-radial .clock-titles-radial__item {
    cursor: pointer;
    pointer-events: auto;
  }

  /* ══════════════════════════════════════
     COOL BLUE-GRAY SYSTEM — final overrides
  ══════════════════════════════════════ */

  /* Images: grayscale + stronger contrast */
  /* SVG background clock + D3 elements → dark slate */
body.why-do-web-page .withok-hover-clock__tick,
body.why-do-web-page .withok-hover-clock__hand {
    stroke: var(--slate);
    stroke-width: 1.5;
  }
  /* 배경 시계 hand 스타일 (별도 ids) */
body.why-do-web-page #bgHourHand { stroke: #1a6fff; stroke-width: var(--line-width); stroke-linecap: round; vector-effect: non-scaling-stroke; }
body.why-do-web-page #bgMinuteHand { stroke: #1a6fff; stroke-width: var(--line-width); stroke-linecap: round; vector-effect: non-scaling-stroke; }
body.why-do-web-page #bgSecondHand { stroke: #e63030; stroke-width: var(--line-width); stroke-linecap: round; vector-effect: non-scaling-stroke; }





  /* ── 모달 내 모든 SVG 선 1.5px 통일 ── */
body.why-do-web-page .clock-overlay line,
body.why-do-web-page .clock-overlay circle,
body.why-do-web-page .clock-overlay path[stroke],
body.why-do-web-page .clock-overlay rect[stroke],
body.why-do-web-page .clock-overlay polyline[stroke],
body.why-do-web-page .clock-overlay polygon[stroke] {
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  /* exit 버튼 × 아이콘 포함 동일하게 */
body.why-do-web-page .clock-overlay .clock-exit-btn line,
body.why-do-web-page .clock-overlay .clock-exit-btn path { stroke-width: 1.5; }
  /* 시침·분침·초침 */
body.why-do-web-page .clock-overlay .withok-hover-clock__hand--hour { stroke-width: 1.5; }
body.why-do-web-page .clock-overlay .withok-hover-clock__hand--minute { stroke-width: 1.5; }
body.why-do-web-page .clock-overlay .withok-hover-clock__hand--second { stroke-width: 1.5; }
body.why-do-web-page .clock-dock { background: transparent; }
body.why-do-web-page .clock-dock__header,
body.why-do-web-page .clock-dock__footer { border-color: var(--slate-dim); color: var(--txt-muted); }
body.why-do-web-page .clock-dock__section summary { color: var(--txt-primary); }
body.why-do-web-page .clock-dock__section summary::before { color: var(--red); }
body.why-do-web-page .clock-dock__section summary::after { background: var(--slate-dim); }
body.why-do-web-page .clock-terminal { background: var(--bg-deep); }
body.why-do-web-page .clock-terminal__body,
body.why-do-web-page .clock-terminal__title,
body.why-do-web-page .log-num,
body.why-do-web-page .log-tag,
body.why-do-web-page .log-time { color: var(--txt-primary); }
body.why-do-web-page .monitor-status-chip { color: var(--red); }
body.why-do-web-page .tilt-meter-bar { background: var(--bg-deep); }
body.why-do-web-page .tilt-meter-fill { background: var(--slate); }
body.why-do-web-page .gyro-map { border-color: var(--slate-mid); background: var(--bg-deep); }
body.why-do-web-page .gyro-map-inner::before,
body.why-do-web-page .gyro-map-inner::after { background: var(--slate-mid); }
body.why-do-web-page .gyro-map-dot { background: var(--red); }
  /* ctrl-pill이 아닌 gyro/media 버튼에만 다크모드 override 적용 */
body.why-do-web-page .gyro-button:not(.ctrl-pill), body.why-do-web-page .media-toggle:not(.ctrl-pill) {
    border-color: var(--slate-mid);
    color: var(--txt-muted);
  }
body.why-do-web-page .gyro-button:not(.ctrl-pill):hover,
body.why-do-web-page .media-toggle:not(.ctrl-pill):hover,
body.why-do-web-page .gyro-button:not(.ctrl-pill)[data-on="true"],
body.why-do-web-page .media-toggle:not(.ctrl-pill)[data-on="true"] {
    border-color: var(--red);
    color: var(--txt-primary);
  }
body.why-do-web-page .gyro-button[data-on="true"]::before,
body.why-do-web-page .media-toggle[data-on="true"]::before {
    background: var(--red);
    border-color: var(--red);
  }
body.why-do-web-page .stage-btn {
    border-color: var(--slate-mid);
    color: var(--txt-muted);
  }
body.why-do-web-page .stage-btn:hover { border-color: var(--red); color: var(--red); }
body.why-do-web-page .clock-index-dot { background: linear-gradient(180deg, #3a434c 0%, #2a333c 100%); border-color: #141c24; }
body.why-do-web-page .clock-index-dot.is-current { background: linear-gradient(180deg, #d8e0e8 0%, #b0bcc8 50%, #8a98a8 100%); border-color: #6a7888; }
body.why-do-web-page .clock-exit-btn { border-color: var(--slate-mid); color: var(--txt-muted); }
body.why-do-web-page .clock-exit-btn:hover { border-color: var(--red); color: var(--red); }

  /* Clock panel flip faces */
body.why-do-web-page .flipFront .clockHand { stroke: #ffffff; }
body.why-do-web-page .flipBack { background: #0a0a0a; color: #fff; }
body.why-do-web-page .backTitle { color: #fff; }
body.why-do-web-page .backBody { color: rgba(255,255,255,0.72); }
body.why-do-web-page .backRing circle { stroke: rgba(255,255,255,0.18); stroke-width: 2px; }

  /* Ruler ticks */
body.why-do-web-page .ruler-tick, body.why-do-web-page .ruler-tick--minor, body.why-do-web-page .ruler-tick--major, body.why-do-web-page .ruler-tick--hundred {
    stroke: rgba(0,229,255,0.35);
    stroke-width: var(--line-width);
  }
body.why-do-web-page .ruler-tick--hundred { stroke: #00e5ff; }
body.why-do-web-page .ruler-label, body.why-do-web-page .ruler-label--major { fill: #00e5ff; }
body.why-do-web-page .page-resolution-label { color: var(--txt-muted); }
body.why-do-web-page .ruler-baseline { stroke: var(--slate-dim); }

  /* 해상도 라벨: 형광 그린 박스 */
body.why-do-web-page .page-resolution-label {
    position: fixed;
    z-index: 1300;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1;
    pointer-events: none;
    color: #0a0a0a;
    background: var(--neon);
    padding: 0.25em 0.5em;
    border: 1px solid #000;
  }
  /* ! 토글 버튼 */
body.why-do-web-page .page-info-toggle {
    position: fixed;
    z-index: 1300;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--neon);
    color: #0a0a0a;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    padding-bottom: 1px;
    pointer-events: auto;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    will-change: transform;
  }
body.why-do-web-page .page-info-toggle.is-open {
    transform: scale(1) rotate(45deg);
  }
body.why-do-web-page .page-info-toggle.is-open:hover {
    transform: scale(1.6) rotate(45deg);
  }
body.why-do-web-page .page-info-toggle:hover {
    transform: scale(1.6);
  }
  @keyframes spin-once {
    0%   { transform: scale(1.6) rotate(0deg); }
    15%  { transform: scale(1.8) rotate(90deg); }
    40%  { transform: scale(1.5) rotate(200deg); }
    70%  { transform: scale(1.7) rotate(310deg); }
    88%  { transform: scale(1.6) rotate(358deg); }
    100% { transform: scale(1.6) rotate(360deg); }
  }
body.why-do-web-page .page-info-toggle.is-spinning {
    animation: spin-once 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform-origin: center center;
  }

  /* ── 배경 자이로 컨트롤 ── */
body.why-do-web-page .bg-gyro-controls {
    position: fixed;
    bottom: 1.1rem;
    right: 1.1rem;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
  }
body.why-do-web-page .bg-gyro-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.65rem 0.32rem 0.5rem;
    background: rgba(10,12,16,0.88);
    border: 1px solid rgba(200,207,216,0.2);
    border-top-color: rgba(200,207,216,0.32);
    border-radius: 3px;
    color: rgba(200,207,216,0.6);
    font: inherit;
    font-size: var(--font-s);
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
  }
body.why-do-web-page .bg-gyro-btn svg {
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
    opacity: 0.65;
  }
body.why-do-web-page .bg-gyro-btn__label {
    font-size: var(--font-s);
  }
body.why-do-web-page .bg-gyro-btn__led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 35% 35%, #ff5555, #cc0000);
    box-shadow: 0 0 4px rgba(220,0,0,0.7);
    transition: background 0.2s, box-shadow 0.2s;
  }
body.why-do-web-page .bg-gyro-btn:hover {
    background: rgba(20,24,32,0.95);
    border-color: rgba(200,207,216,0.45);
    color: rgba(200,207,216,0.9);
  }
body.why-do-web-page .bg-gyro-btn[aria-pressed="true"] {
    background: rgba(0,18,6,0.92);
    border-color: rgba(0,255,100,0.45);
    border-top-color: rgba(0,255,100,0.65);
    color: #00ff66;
    box-shadow: 0 0 10px rgba(0,255,100,0.18), 0 2px 6px rgba(0,0,0,0.5);
  }
body.why-do-web-page .bg-gyro-btn[aria-pressed="true"] svg { opacity: 1; }
body.why-do-web-page .bg-gyro-btn[aria-pressed="true"] .bg-gyro-btn__led {
    background: radial-gradient(circle at 35% 35%, #80ff80, #00cc44);
    box-shadow: 0 0 7px rgba(0,220,80,0.9);
  }
body.why-do-web-page .bg-gyro-readout {
    display: none;
    gap: 0.5rem;
    font-size: var(--font-s);
    font-variant-numeric: tabular-nums;
    color: rgba(200,207,216,0.45);
    letter-spacing: 0.05em;
    pointer-events: none;
  }
body.why-do-web-page .bg-gyro-btn[aria-pressed="true"] ~ .bg-gyro-readout {
    display: flex;
  }
  /* photo-box filter reveal — click으로 3초간 서서히 제거 후 서서히 복원 */
body.why-do-web-page .photo-box {
    transition: filter 1.5s ease;
  }
body.why-do-web-page .photo-box.filter-off {
    filter: none;
    transition: filter 1.5s ease;
  }
  /* 좌상단 텍스트 블록 — ! 버튼 바로 아래, 기본 숨김 */
body.why-do-web-page .page-intro-text {
    position: fixed;
    z-index: 1300;
    pointer-events: none;
    text-align: left;
    max-width: 20rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: 1px solid #000;
    background: var(--neon);
    padding: 0.6rem 0.75rem;
    display: block;
    visibility: hidden;
    letter-spacing: -0.01em;
    line-height: 1;
  }
body.why-do-web-page .page-intro-text.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
body.why-do-web-page .page-intro-text__title {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0a0a0a;
  }
body.why-do-web-page .page-intro-text__desc {
    display: block;
    margin-top: 0.4rem;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 400;
    color: #0a0a0a;
  }
  /* 룰러: page-bg-svg-wrap과 같은 fixed inset:1rem 레이어로 독립 배치 */
body.why-do-web-page .page-ruler-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
  }
body.why-do-web-page .page-ruler-wrap svg {
    position: absolute;
    overflow: visible;
  }
body.why-do-web-page .page-ruler-wrap .ruler-tick { stroke: rgba(0,229,255,0.25); stroke-width: var(--line-width); }
body.why-do-web-page .page-ruler-wrap .ruler-tick--major { stroke: rgba(0,229,255,0.5); stroke-width: var(--line-width); }
body.why-do-web-page .page-ruler-wrap .ruler-label { fill: #00e5ff; font-size: 0.611rem; font-variant-numeric: tabular-nums; font-family: 'Courier New', monospace; }
body.why-do-web-page .page-ruler-wrap .page-ruler--top { top: 0; left: 0; }
body.why-do-web-page .page-ruler-wrap .page-ruler--bottom { bottom: 0; left: 0; top: auto; }
body.why-do-web-page .page-ruler-wrap .page-ruler--left { top: 0; left: 0; }
body.why-do-web-page .page-ruler-wrap .page-ruler--right { top: 0; right: 0; left: auto; }

  /* Footer */
body.why-do-web-page .page-footer__title { color: var(--txt-primary); }
body.why-do-web-page .page-footer__author { color: var(--red); }
body.why-do-web-page .page-footer__link { color: var(--txt-muted); }
body.why-do-web-page .page-footer__link:hover { color: var(--red); }
body.why-do-web-page .page-footer__ver { color: var(--slate); }