/* ==========================================================================
   기적기획 — 사이트 공통 연출: 커서 · 인트로 · 페이지 전환 (assets/js/site.js, inc/intro.php)
   모두 같은 착시: 깊이가 다른 것들이 정면 시점에서만 하나로(또는 다른 크기로) 맞아떨어짐
   - 깊이 z에 둔 요소를 scale(1 - z / 원근 거리)로 보정하면 정면에선 z = 0과 똑같이 보임
   - 시점(부모 회전)이 틀어지는 순간에만 정체가 드러남
   ========================================================================== */

/* ---------- 커서: 큐브 (마우스 기기만, JS가 .cur 생성) ----------
   위에서 비스듬히 본 속이 찬 정육면체 — 움직이면 기울고, 링크 위에선 정면으로 돌아 사각형 (JS가 보이는 면을 .cur__svg에 그림) */
html.has-cur, html.has-cur * { cursor: none !important; }
html.has-cur :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, [contenteditable="true"]) { cursor: text !important; }

.cur { --cc: var(--y); position: fixed; left: 0; top: 0; z-index: var(--z-cursor); width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cur.is-in { opacity: 1; }
.cur.is-hide, .cur.is-text, .cur.is-away { opacity: 0; }
.cur.is-dark { --cc: var(--k); }                                  /* 노란 면 위 */
.cur > * { position: absolute; left: 0; top: 0; }
.cur__svg { left: -40px; top: -40px; width: 80px; height: 80px; max-width: none; overflow: visible; stroke: var(--cc); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px var(--b-2)); }
.cur__svg path { fill: var(--y); }
.cur:is(.is-compare, .is-view) .cur__svg { display: none; }
.cur__label { left: -52px; top: -52px; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--y); color: var(--k); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; transform: scale(0); transition: transform .45s var(--ease); box-shadow: var(--sh-md); }
.cur.is-view .cur__label { transform: scale(1); }
.cur__dot { display: none; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--cc); filter: drop-shadow(0 0 1.5px var(--b-2)); }
.cur.is-compare .cur__dot { display: block; transform: scaleX(.25) scaleY(3.4); }   /* 전·후 비교: 세로 기준선 */

/* ---------- 인트로: 큐브 → 문 (세션 첫 방문, head의 인라인 스크립트가 html.intro-on을 붙이고 로고 폰트를 불러옴) ----------
   JS가 .ix-svg에 검은 바탕 · 은은한 노란 빛 · 가는 궤도 선 · 반짝이 · 커서와 같은 큐브를 그림 (첫 그림 전까진 .intro 자체가 검정)
   로딩이 끝나면 큐브가 정면으로 돌아 사각형 → 그 안에 빛이 켜져 문틀 → 다가가 문이 화면을 덮고 빛이 걷히면 본문 (바탕의 문 자리가 마스크로 뚫림)
   색은 사이트 토큰만: 검정 · 종이 글자 · 노랑은 큐브 · 로고 두께 · 진행 바 같은 면과 강조에만 */
.intro, .pt { display: none; }
html.intro-on { overflow: hidden; animation: intro-unlock 0s 16s forwards; }   /* JS가 못 돌아도 16초 뒤엔 풀림 */
.intro-on .intro { position: fixed; inset: 0; z-index: var(--z-intro); display: block; overflow: hidden; background: var(--k); animation: intro-failsafe 0s 16s forwards; }
@keyframes intro-unlock { to { overflow: visible; } }
@keyframes intro-failsafe { to { visibility: hidden; } }
.intro {
  --ix-y-d1: color-mix(in srgb, var(--y2) 58%, var(--k));          /* 노랑 그늘 (로고 돌출 옆면) */
  --ix-y-d2: color-mix(in srgb, var(--y2) 30%, var(--k));
  --ix-serif: "Fraunces", "Bodoni Moda", Georgia, serif;
}
.intro.is-ready { background: transparent; }
.intro.is-skip { opacity: 0; transition: opacity .35s; }
.ix-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* 글자 층: 로고 폰트가 준비되면(.is-on) 아래에서 살짝 떠오르며 나타남, 큐브가 정면으로 돌 때 걷힘(--fade) */
.ix-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6vh var(--gutter); pointer-events: none; opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.intro.is-on .ix-ui { opacity: var(--fade, 1); transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.intro.is-turn .ix-ui { transition: none; }
.ix-stage { flex: none; width: 1px; }                                /* 큐브 자리 (높이는 JS) */

/* 로고: 종이색 세리프 + 마우스 반대쪽으로 늘어나는 노란 돌출 (평면 글자인 줄 알았는데 두께가 있음) */
.ix-title { --ex: 0; --ey: 3; position: relative; margin-top: clamp(16px, 4vh, 48px); font-size: clamp(48px, min(11vw, 13vh), 168px); color: var(--paper); }
.ix-logo, .ix-ver { font-family: var(--ix-serif); font-weight: 900; font-optical-sizing: auto; letter-spacing: -.025em; }
.ix-logo { position: relative; font-size: 1em; line-height: .95; white-space: nowrap;
  text-shadow:
    calc(var(--ex) * .006em) calc(var(--ey) * .006em) 0 var(--k),
    calc(var(--ex) * .012em) calc(var(--ey) * .012em) 0 var(--y),
    calc(var(--ex) * .018em) calc(var(--ey) * .018em) 0 var(--y2),
    calc(var(--ex) * .024em) calc(var(--ey) * .024em) 0 var(--ix-y-d1),
    calc(var(--ex) * .03em) calc(var(--ey) * .03em) 0 var(--ix-y-d1),
    calc(var(--ex) * .036em) calc(var(--ey) * .036em) 0 var(--ix-y-d2),
    0 0 .5em var(--y-a1); }
.ix-logo sup { position: absolute; top: .16em; right: -.3em; font-family: var(--f-sans); font-size: .1em; font-weight: 600; letter-spacing: 0; text-shadow: none; color: var(--on-dark-3); }
.ix-row { display: flex; align-items: flex-start; gap: .18em; margin-top: .02em; }
.ix-ed { flex: 1; display: grid; justify-items: center; gap: .12em; padding: .16em 0 0 .3em; }
.ix-ed i { display: block; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--w-mid) 14%, var(--y) 72%, var(--y2)); }
.ix-ed span { font-family: var(--f-sans); font-size: max(var(--fs-2xs), .085em); font-weight: 700; line-height: 1.4; letter-spacing: .42em; text-transform: uppercase; white-space: nowrap; color: var(--on-dark-2); }
.ix-ver { margin: -.04em -.06em 0 0; font-size: .74em; line-height: .85; color: var(--y);
  text-shadow:
    calc(var(--ex) * .008em) calc(var(--ey) * .008em) 0 var(--k),
    calc(var(--ex) * .016em) calc(var(--ey) * .016em) 0 var(--ix-y-d1),
    calc(var(--ex) * .024em) calc(var(--ey) * .024em) 0 var(--ix-y-d1),
    calc(var(--ex) * .032em) calc(var(--ey) * .032em) 0 var(--ix-y-d2),
    calc(var(--ex) * .04em) calc(var(--ey) * .04em) 0 var(--k3),
    0 0 .5em var(--y-a1); }

/* 로딩: 가는 테두리 안 칸 나뉜 노란 진행 바 */
.ix-load { display: grid; justify-items: center; gap: 14px; margin-top: clamp(32px, 8vh, 96px); }
.ix-load__txt { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .42em; text-transform: uppercase; color: var(--on-dark-3); }
.ix-load__row { display: flex; align-items: center; gap: 16px; }
.ix-bar { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; width: clamp(200px, 26vw, 360px); height: 12px; padding: 2px; border: 1px solid var(--w-mid); }
.ix-bar i { background: var(--y); opacity: .08; transition: opacity .2s; }
.ix-bar i.on { opacity: 1; }
.ix-load__pct { width: 5ch; white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--y); }

.intro__cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(24px, 5vh, 48px); display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--on-dark-3); pointer-events: none; opacity: var(--fade, 1); white-space: nowrap; }
.intro__skip { position: absolute; top: clamp(20px, 3vh, 32px); right: var(--gutter); height: 36px; padding: 0 16px; border: 1px solid var(--w-mid); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--on-dark-2); opacity: var(--fade, 1); transition: color .25s, border-color .25s; }
.intro__skip:hover { color: var(--y); border-color: var(--y); }

/* ---------- 페이지 전환: 큐브 문 ----------
   나감: 커서 큐브가 정면으로 돌면 그냥 사각형 → 주변이 검은 벽으로 어두워지고 사각형 안에 빛이 켜져 문틀이 됨 → 가운데로 다가와 빛이 화면을 채움
   들어옴: 새 페이지는 그 빛에서 시작 → 문틀이 작아지며 빛이 걷히고, 다시 3/4 시점으로 돌아 큐브가 되어 마우스 자리로 내려앉음 (JS가 .pt__svg에 그림) */
/* 문서가 바뀌는 사이: 새 페이지가 첫 화면(같은 빛)을 그릴 때까지 브라우저가 이전 화면을 붙잡아 둠 → 빈 화면이 끼어드는 깜박임 없음
   두 장면이 같은 그림이라 섞지 않고 바로 바꿈 — 기본값은 두 장면을 빛 더하기(plus-lighter)로 겹쳐서 노랑 + 노랑 = 하얗게 번쩍이므로
   이전 장면은 숨기고 새 장면만 그대로 보여 줌 (지원 안 하는 브라우저는 그냥 무시) */
@view-transition { navigation: auto; }
::view-transition-group(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(root) { display: none; }
::view-transition-new(root) { mix-blend-mode: normal; }

#main:focus { outline: none; }                                   /* 페이지 이동 후 새 본문에 옮긴 초점 (site.js) */

.pt { position: fixed; inset: 0; z-index: var(--z-transition); overflow: hidden; pointer-events: none; background: var(--y); }   /* 바탕 = 빛 색 (문구 대비 기준) */
.pt.is-on { pointer-events: auto; }                                /* 나가는 동안 다른 클릭 막음 */
.pt.is-on, .pt-in .pt { display: block; }
.pt-in .pt { background: var(--y) linear-gradient(var(--y-soft), var(--y)); animation: intro-failsafe 0s 4s forwards; }   /* JS가 시작하기 전 첫 화면 = 문 너머의 빛 */
.pt.is-run { display: block; background: none; }                   /* 인트로 끝 착지도 같은 그림 (is-on·pt-in 없이) */
.pt__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pt__label { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 0 var(--gutter); color: var(--k); text-align: center; opacity: var(--label, 0); pointer-events: none; }
.pt-in .pt:not(.is-run) .pt__label { opacity: 1; }
.pt__label small { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; }
.pt__label b { font-family: var(--f-display); font-size: max(var(--fs-3xl), min(var(--fs-5xl), (100vw - 640px) * 999), min(var(--fs-7xl), (100vw - 960px) * 999), min(var(--fs-8xl), (100vw - 1280px) * 999)); font-weight: 700; line-height: 1.05; letter-spacing: -.05em; transform: translateY(calc((1 - var(--label, 1)) * 14px)); }

@media (prefers-reduced-motion: reduce) {
  .intro-on .intro, .pt-in .pt { display: none; }
  html.intro-on { overflow: visible; }
}

/* ---------- 꾹 누르기: 큐브 맵 (assets/js/hold.js) — 3층 육각 기둥: 위 서비스 / 가운데 메뉴(앞면 = 지금 화면 #main) / 아래 포트폴리오 ---------- */
.hold-on :is(a, img) { -webkit-touch-callout: none; }               /* 길게 누르기 미리보기·메뉴 대신 큐브 */
html.is-holding, html.is-holding * { -webkit-user-select: none; user-select: none; }
html.hc-on body { background: transparent; }                       /* 기둥 뒤 무대 조명(.hc__bg, z-index -1)이 보이게 */
html.hc-on :is(.hd, .dock, .pv-nav) { opacity: 0 !important; pointer-events: none; transition: opacity .3s; }
.hc { --h: 0; position: fixed; inset: 0; z-index: var(--z-float); perspective: 1600px; perspective-origin: 50% 50%; pointer-events: none; }
/* 무대: 위에서 떨어지는 노란 조명 + 가장자리 어둠 (본문 아래에 깔림) */
.hc__bg {
  position: fixed; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 8%, var(--y-a1), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 55%, var(--k3), var(--k) 75%);
}
.hc__world { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.hc__world > *, .hc__level > * { position: absolute; left: 0; top: 0; }
.hc__level { transform-style: preserve-3d; }
/* 면: 사진 + 아래에서 올라오는 어둠 + 이름, 카메라를 향한 만큼 밝고(--lit) 유리 반사광이 도는 방향으로 흐름(--rel) */
.hc-face { overflow: hidden; backface-visibility: hidden; will-change: transform; background: var(--k3); color: var(--on-dark); outline: 2px solid var(--w-line); outline-offset: -2px; }
/* 반사광 띠(300% 폭)는 transform으로, 어둡기는 opacity로 — hold.js가 바뀔 때만 씀 (합성만, 면을 다시 그리지 않음) */
.hc-face__sheen { position: absolute; left: 0; top: 0; z-index: 2; width: 75%; height: 100%; background: linear-gradient(105deg, transparent 8%, rgba(255, 255, 255, .14) 52%, transparent 92%); transform: translateX(6.667%); pointer-events: none; will-change: transform; }   /* 빛 띠만 (면 폭의 75%) */
.hc-face__shade { position: absolute; inset: 0; z-index: 3; background: var(--k); opacity: 0; pointer-events: none; will-change: opacity; }   /* 돌아간 면 · 보고 있지 않은 층은 어둡게 */
.hc-face.is-front { outline-color: var(--y); box-shadow: 0 0 0 2px var(--y), 0 0 120px var(--y-a2); }
.hc-face__img { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1.08); transition: opacity .6s, transform 1.4s var(--ease); }
.hc-face.is-photo .hc-face__img { opacity: 1; transform: none; }
.hc-face.is-photo .hc-face__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, .15) 30%, rgba(5, 5, 5, .9)); }
.hc-face.is-logo { background: var(--y); color: var(--k); }
.hc-face.is-logo .hc-face__img { inset: 22% 30% 48%; background-size: contain; opacity: 1; transform: none; }
.hc-face__body { position: absolute; left: 7%; right: 7%; bottom: 9%; z-index: 1; display: grid; gap: 10px; }
.hc-face__body em { font-style: normal; font-size: 30px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--y); }
.hc-face.is-logo .hc-face__body em { color: var(--k); }
.hc-face__body strong { font-family: var(--f-display); font-size: 150px; font-weight: 800; line-height: 1; letter-spacing: -.06em; }
.hc-face__body small { font-size: 36px; font-weight: 600; opacity: .7; }
.hc-face.is-window { background: none; outline: 3px solid var(--y); outline-offset: 0; }   /* 가운데 층 앞면은 본문이 그대로 보이는 창 */
.hc-face.is-window .hc-face__sheen { opacity: .6; }
.hc-face__here { position: absolute; left: 6%; top: 8%; z-index: 4; padding: 10px 24px; background: var(--y); color: var(--k); font-size: 30px; font-weight: 800; letter-spacing: .04em; }   /* 다른 층에 있는 지금 페이지 */
/* 층마다 뚜껑(윗면 육각, 맨 위층은 로고 · 나머지는 층 이름) · 맨 아래 바닥 빛 */
.hc__cap { backface-visibility: hidden; }
.hc__cap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hc__cap polygon { fill: var(--k2); stroke: var(--y); stroke-width: 3; stroke-linejoin: round; }
.hc__cap image { opacity: .9; }
.hc__cap text { fill: var(--y); font-family: var(--f-display); font-size: 64px; font-weight: 800; letter-spacing: .3em; text-anchor: middle; dominant-baseline: middle; opacity: .55; }
.hc__stage {
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(closest-side, var(--y-a1), transparent 60%),
    repeating-radial-gradient(closest-side, transparent 0 46px, var(--w-faint) 46px 48px);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent);
}
/* 안내: 위 = 조작법, 아래 = 지금 앞에 온 면 */
.hc__tip { position: absolute; left: 0; right: 0; top: calc(var(--hd-h) * .6); text-align: center; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; color: var(--on-dark-2); opacity: var(--h); }
.hc__hud { position: absolute; left: 0; right: 0; bottom: clamp(20px, 6vh, 56px); display: grid; justify-items: center; gap: 12px; opacity: var(--h); transform: translateY(calc((1 - var(--h)) * 20px)); }
/* 오른쪽: 층 표시 (엘리베이터 버튼) */
.hc__floors { position: absolute; right: clamp(16px, 4vw, 56px); top: 50%; display: grid; gap: 18px; margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 1px solid var(--w-line); transform: translateY(-50%); opacity: var(--h); }
.hc__floors li { display: grid; gap: 2px; color: var(--on-dark-3); transition: color .25s, transform .25s var(--ease); }
.hc__floors li b { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.03em; }
.hc__floors li span { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hc__floors li.is-on { color: var(--y); transform: translateX(6px); }
.hc__dots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hc__dots li { width: 8px; height: 8px; border: 1px solid var(--y-a2); transform: rotate(45deg); transition: background .25s, transform .25s; }
.hc__dots li.is-on { background: var(--y); transform: rotate(45deg) scale(1.3); }
.hc__now { display: flex; align-items: baseline; gap: 12px; }
.hc__now b { font-family: var(--f-display); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.04em; color: var(--on-dark); }
.hc__now span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--y); }

/* ---------- 꾹 누르기 알려 주기 (assets/js/hold.js hint) ---------- */
/* ① 커서가 멈추면 큐브 옆 안내 · 누르는 동안 둘레 고리 */
.cur__hint { left: 30px; top: -13px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; white-space: nowrap; background: rgba(5, 5, 5, .82); border: 1px solid var(--w-line); color: var(--on-dark); font-size: var(--fs-xs); font-weight: 700; letter-spacing: -.01em; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .5s var(--ease); backdrop-filter: blur(6px); }
.cur__hint i { display: grid; place-items: center; width: 22px; height: 22px; background: var(--y); color: var(--k); font-style: normal; font-weight: 800; }
.cur.is-hint .cur__hint { opacity: 1; transform: none; }
.cur__ring { left: -30px; top: -30px; width: 60px; height: 60px; overflow: visible; fill: none; stroke: var(--y); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transform: rotate(-90deg); }
.cur.is-arm .cur__ring { opacity: 1; animation: cur-arm .18s linear forwards; }   /* = hold.js DELAY */
@keyframes cur-arm { to { stroke-dashoffset: 0; } }
/* ② 첫 방문 한 줄 */
.hc-tip { position: fixed; left: 50%; bottom: calc(28px + var(--dock-space, 0px)); z-index: var(--z-float); display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 14px; background: rgba(5, 5, 5, .86); border: 1px solid var(--w-mid); color: var(--on-dark); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; box-shadow: var(--sh-lg); backdrop-filter: blur(8px); cursor: pointer; opacity: 0; transform: translate(-50%, 16px); transition: opacity .5s, transform .7s var(--ease); }
.hc-tip.is-on { opacity: 1; transform: translate(-50%, 0); }
.hc-tip b { color: var(--y); }
/* 링은 box-shadow 대신 ::after 투명도로 (box-shadow 애니메이션 = 매 프레임 화면 다시 그림) */
.hc-tip__cube { position: relative; width: 18px; height: 18px; background: var(--y); transform: rotate(45deg) scale(.8); }
.hc-tip__cube::after { content: ""; position: absolute; inset: -6px; border: 6px solid var(--y-a1); opacity: 0; }
.hc-tip.is-on .hc-tip__cube { animation: hc-tip-press 1.6s var(--ease) infinite; }
.hc-tip.is-on .hc-tip__cube::after { animation: hc-tip-ring 1.6s var(--ease) infinite; }
@keyframes hc-tip-press { 0%, 100% { transform: rotate(45deg) scale(.8); } 40% { transform: rotate(45deg) scale(.55); } }
@keyframes hc-tip-ring { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
/* ③ 터치 기기: 빠른 버튼 줄의 큐브 아이콘 = 꾹 누르는 자리 */
.dock__hold, .dock__say { display: none; }
@media (hover: none), (pointer: coarse) {
  .dock { position: fixed; }
  .dock__hold { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--k); border: 1px solid var(--y-a2); color: var(--y); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .dock__hold svg { width: 24px; height: 24px; fill: var(--y-a1); stroke: var(--y); stroke-width: 1.4; stroke-linejoin: round; }
  .dock__say { position: absolute; right: calc(100% + 10px); top: 10px; display: block; padding: 9px 12px; background: var(--y); color: var(--k); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; box-shadow: var(--sh-md); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .35s, transform .5s var(--ease); }
  .dock__say::after { content: ""; position: absolute; left: 100%; top: 50%; border: 6px solid transparent; border-left-color: var(--y); transform: translateY(-50%); }
  .dock__say.is-on { opacity: 1; transform: none; }
}
@media (max-width: 640px) and ((hover: none) or (pointer: coarse)) {
  .dock__hold { width: 44px; height: 44px; }
  .dock__hold svg { width: 20px; height: 20px; }
  .dock__say { right: auto; left: 0; top: auto; bottom: calc(100% + 10px); }
  .dock__say::after { left: 16px; top: 100%; border-left-color: transparent; border-top-color: var(--y); transform: none; }
}

/* ---------- 메인 구조화 데이터 카드 (inc/seo.php) ----------
   예전 메인처럼 실제 크기로 첫 화면 맨 위에 그리되 z-index:-1 → body 바탕이 위를 덮어 눈엔 안 보임 (1px 자르기 숨김 X)
   페이지 소스·개발자 도구(#seo-carousel)·구글 리치 결과 테스트에서 확인 */
.seo-carousel { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; padding: 96px var(--gutter, 20px) 40px; pointer-events: none; user-select: none; color: var(--fg); }
.seo-carousel h2 { margin: 0 0 16px; font-size: 18px; }
.seo-carousel ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.seo-carousel img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.seo-carousel h3 { margin: 8px 0 2px; font-size: 14px; }
.seo-carousel a { color: inherit; }