/*! JUST MAKE · © 2008-2026 (주)에이치디그룹 HD GROUP · justmake.co.kr · 무단 복제·재배포·도용 금지 · All rights reserved · hdgjm-8e3cd6a19661 */
/* style.css - 저스트메이크 리뉴얼 1차 시제품
 * 값은 tokens.css 에서만 가져온다. 기본 상태 = JS 없이도 다 읽히는 최종 모습.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--fs-body)/1.7 var(--f-body);
  text-transform: uppercase; }   /* 영문은 전부 대문자 (2026-10-11 지시). 한글엔 영향 없음. 캔버스 텍스트는 jm-fluid 가 따로 처리 */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
.b { display: block; }
.nw { white-space: nowrap; }   /* 가운뎃점(·)으로 이어진 말이 중간에서 끊기지 않게 */
.pixel { font-family: var(--f-pixel); font-size: var(--fs-pixel); line-height: 1.5; letter-spacing: 0; }
/* 윈도우 서브픽셀 AA 의 색 번짐 제거: 합성 레이어로 올려 회색조 AA 강제 (인라인 요소엔 안 먹으므로 블록만) */
p.pixel, figcaption.pixel, .intro__line, .fw__s, .ph__txt, .ph__badge, .intro__skip { transform: translateZ(0); }
/* JUST MAKE 로고 SVG: 높이만 정하고 폭은 원본 비율로. --logo-cap 은 글자 크기 대비 로고 높이 */
:root { --logo-cap: .74em; --logo-gap: calc(var(--logo-cap) * .29227); }   /* .29227 = 회사로고.ai 의 JUST↔MAKE 간격 / 글자 높이 */
.jm-svg { display: block; height: var(--logo-cap); width: auto; overflow: visible; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
section[id], [id="contact"] { scroll-margin-top: 80px; }   /* 고정 헤더(64px) 아래로 */
html.has-intro body { overflow: hidden; }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: var(--radius-pill);
  font: 600 15px/1 var(--f-body); text-decoration: none; white-space: nowrap; border: 1.5px solid var(--ink);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .15s; }
.btn:active { transform: scale(.97); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--white); color: var(--ink); }
.btn--lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.btn--lime:hover { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------- 헤더 ---------- */
.hd { position: fixed; z-index: var(--z-header); top: 0; left: 0; right: 0; height: 64px; padding: 0 var(--pad);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  /* 유리 바: 흰빛 반투명 + 흐림·채도 + 위아래 빛 반사 선. 크롬 계열은 SVG 왜곡 필터(#jm-glass)로 뒤 화면이 살짝 굴절됨 */
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.4));
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: url(#jm-glass) blur(10px) saturate(180%);          /* 미지원 브라우저는 이 줄을 버리고 위 줄을 씀 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.45), 0 10px 30px rgba(17,17,17,.08);
  transition: color .35s var(--ease-out), background-color .35s var(--ease-out), box-shadow .35s; }
.hd :focus-visible { outline-color: var(--ink); }
.hd__logo { display: block; color: currentColor; }
.hd__logo .jm-svg { height: 17px; }
.hd__nav { display: flex; gap: 28px; justify-content: center; font: 500 15px/1 var(--f-display); }
.hd__nav a { text-decoration: none; }
.hd__cta { display: flex; align-items: center; gap: 16px; }
.hd__tel { font: 500 14px/1 var(--f-display); text-decoration: none; }

/* ---------- 헤더 = 리퀴드 글라스 캡슐 (Apple Liquid Glass 참고) ----------
   스크롤하면 위에서 10px 떠 있는 알약. 거의 투명 + 가장자리 렌즈 굴절(#jm-glass, 크롬 계열) + 무지갯빛 테두리 + 위쪽 반사광.
   맨 위(.is-top)는 폭 전체 투명. 아래가 어두운 섹션이면 .hd--dark 로 흰 글자(JS) */
.hd { top: 10px; left: var(--pad); right: var(--pad); height: 56px; padding: 0 8px 0 24px; border-radius: var(--radius-pill); isolation: isolate;
  color: var(--ink); background: rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(4px) saturate(170%) brightness(1.05); backdrop-filter: blur(4px) saturate(170%) brightness(1.05);
  backdrop-filter: url(#jm-glass) blur(2.4px) saturate(170%) brightness(1.06);   /* 미지원 브라우저는 이 줄을 버림 */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), inset 0 0 18px rgba(255,255,255,.14), 0 10px 34px rgba(17,17,17,.12);   /* 1px 무광 라인 */
  transition: top .5s var(--ease-out), left .5s var(--ease-out), right .5s var(--ease-out), height .5s var(--ease-out), border-radius .5s var(--ease-out),
    padding .5s var(--ease-out), background-color .35s, box-shadow .35s, color .3s; }
.hd > * { position: relative; z-index: 1; }
/* 무지개 빛줄기: 평소엔 숨김, 4~6.5초 간격으로 테두리를 한 바퀴 싹 돌고 사라짐(.is-sweep, JS) — 1px 링 */
@property --hd-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hd::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--hd-a), transparent 0deg 200deg, rgba(184,243,255,.9) 250deg, rgba(194,255,240,.95) 280deg, rgba(243,255,194,1) 305deg, rgba(255,209,243,.95) 330deg, rgba(230,201,255,.7) 348deg, transparent 360deg);   /* 파스텔 포일, 앞뒤 끝을 길게 흐림 */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* 위쪽 반사광 */
.hd::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: opacity .35s;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 50%); }   /* 반사광은 약하게(무광) */
.hd.is-sweep::before { animation: hd-sweep 2.4s cubic-bezier(.37, 0, .63, 1) 1; }   /* sine in-out: 완만하게 출발·정지 */
@keyframes hd-sweep { 0% { --hd-a: 0deg; opacity: 0; } 25% { opacity: .55; } 70% { opacity: .55; } 100% { --hd-a: 360deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hd.is-sweep::before { animation: none; } }
.hd--dark { color: var(--white); background: rgba(14,12,40,.22); }
.hd--dark :focus-visible { outline-color: var(--lime); }
.hd.is-top { top: 0; left: 0; right: 0; height: 64px; padding: 0 var(--pad); border-radius: 0; color: var(--white); background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hd.is-top::before, .hd.is-top::after { opacity: 0; }
@media (max-width: 767px) { .hd { left: 10px; right: 10px; padding-left: 18px; } }

/* ---------- 메인 ---------- */
/* 히어로 = 검정 화면 한 장: 양끝 맞춤 큰 문장(noomo) · 한글 요약+버튼 · 폭 전체 로고 */
.hero { min-height: 100svh; padding: calc(64px + clamp(16px, 3vh, 40px)) var(--pad) clamp(12px, 1.6vw, 24px); display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: clamp(20px, 2.4vw, 36px);
  position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); --fg-dim: #b4b4af; }
/* 배경 영상 + 어둡게 덮기 (글자 대비 확보: 위·아래를 더 어둡게) */
.hero__bg { position: absolute; inset: 0; z-index: -1; background: #111; --ft: 0%; --fr: 0%; --fb: 0%; --fl: 0%; }
.hero__frame { position: absolute; inset: 0; overflow: hidden; clip-path: inset(var(--ft) var(--fr) var(--fb) var(--fl)); background: #111 url("../video/hero-expo-poster.webp") center / cover; }
.hero__frame video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transform-origin: 50% 60%; }
/* 프레임 모서리 표시(라임 ㄱ자 4개): 프레임이 전체일 땐 숨김 */
.hero__marks { position: absolute; z-index: 1; top: var(--ft); right: var(--fr); bottom: var(--fb); left: var(--fl); opacity: var(--fm, 0); pointer-events: none; }
.hero__marks i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--lime); }
.hero__marks i:nth-child(1) { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.hero__marks i:nth-child(2) { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.hero__marks i:nth-child(3) { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.hero__marks i:nth-child(4) { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; }
/* 히어로 파랑 듀오톤 (2026-10-11 확정, <html class="tone-blue">): 영상을 흑백으로 → 파랑 한 색을 곱하기로 입힘. 라임은 글자 강조에만.
   클래스를 빼면 이전 검정 버전으로 돌아간다 */
.tone-blue .hero__bg { background: #0a0838; }
.tone-blue .hero__frame { background-color: #0a0838; }
.tone-blue .hero__frame video { filter: grayscale(1) contrast(1.2) brightness(1.05); }
.tone-blue .hero__frame::after { content: ""; position: absolute; inset: 0; background: #2a1bff; mix-blend-mode: multiply; }
.tone-blue .hero__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #120c6e; mix-blend-mode: screen; opacity: .55; }
.tone-blue .hero__bg::after { background: linear-gradient(180deg, rgba(8,6,48,.55) 0%, rgba(8,6,48,.12) 38%, rgba(8,6,48,.2) 62%, rgba(6,4,32,.88) 100%); }
/* 빠바박: 짧게 여러 번 꺼졌다 켜짐. --inv 는 라임 바탕으로 뒤집힘 */
.is-flick { animation: jm-flick .46s steps(1) 1; }
.is-flick--inv { animation: jm-flick-inv .46s steps(1) 1; }
@keyframes jm-flick { 0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: 0; } 34% { opacity: 1; } 46% { opacity: .15; } 58% { opacity: 1; } 74% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes jm-flick-inv { 0%, 24%, 48% { background: var(--lime); color: var(--ink); } 12%, 36%, 60% { background: transparent; color: inherit; opacity: 0; } 72% { background: var(--white); color: var(--ink); opacity: 1; } 86%, 100% { background: transparent; color: inherit; opacity: 1; } }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,.82) 0%, rgba(17,17,17,.55) 38%, rgba(17,17,17,.62) 62%, rgba(17,17,17,.94) 100%); }
/* 글자 등장용: 줄 안의 단어를 아래에서 밀어 올린다 (JS 가 .mf__w 로 감쌈) */
.mf__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.mf__w > span { display: inline-block; }
.hero__mf mark { position: relative; }
/* 제자리 다시 쓰기 (jm-slash.js): 글자는 투명으로 자리만 지키고, 띠 칸에만 라임  를 겹친다 */
.sl { display: inline-block; white-space: pre; }
.sl-c { position: relative; }
.sl-c.is-h { color: transparent; }
.sl-c.is-s::after { content: "\\"; position: absolute; inset: 0; text-align: center; color: var(--lime); }
mark .sl-c.is-s::after { color: var(--ink); }
.hero :focus-visible { outline-color: var(--lime); }
.hero__mf { align-self: center; display: grid; gap: .06em; font: 500 clamp(40px, 6.1vw, 124px)/.9 var(--f-display); letter-spacing: -.045em; }
.mf__l { display: flex; justify-content: space-between; align-items: center; gap: .24em; white-space: nowrap; }
.mf__l--thin { font-weight: 300; color: #d4d4cf; }
.hero__mf mark { background: var(--lime); color: var(--ink); padding: 0 .07em; }
/* 가운데 오브젝트: 픽셀 아이콘(라임). 서버에서 3D 복셀로 바꾼다 */
.mf__obj { position: relative; flex: none; display: inline-grid; place-items: center; width: 1.25em; height: .92em; color: var(--lime); }
.mf__obj svg, .mf__obj canvas { width: 1.06em; height: 1.06em; shape-rendering: crispEdges; image-rendering: pixelated; }
.mf__obj canvas { position: absolute; }
.hero__sub { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px var(--gap); align-items: end; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); }
.hero__h1 { grid-column: 1 / span 6; display: grid; gap: 8px; margin: 0; }
.hero__kw { font: 600 15px/1.4 var(--f-body); color: var(--fg-dim); }
.hero__big { font: 700 clamp(24px, 2.3vw, 40px)/1.2 var(--f-body); letter-spacing: -.04em; }
.hero__big mark { background: var(--lime); color: var(--ink); padding: 0 .06em; }
.hero__lead { grid-column: 7 / span 3; font-size: 15px; line-height: 1.65; color: var(--fg-dim); }
.hero__cta { grid-column: 10 / -1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn--line-w { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn--line-w:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* 폭 전체 로고 (회사로고.ai 원본, 한 덩어리) */
.hero__logo { color: var(--white); }
.hero__logo .jm-svg { width: 100%; height: auto; }


/* ---------- 서비스 스크롤 ---------- */
.field { position: relative; height: 320vh; margin-top: clamp(80px, 10vw, 160px); }
.field__stick { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
/* 배경 글자는 가운데 띠의 4단만 (위아래 비움, 단 사이 띄움) */
.field__bg { position: absolute; left: var(--pad); right: var(--pad); top: 26vh; bottom: 10vh; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--gap) * 2.4); }
.fluid { position: relative; height: 100%; overflow: hidden; }
.fluid__src { position: absolute; visibility: hidden; font-family: var(--f-pixel); font-size: 12px; line-height: 18px; color: #c9c9c5; }
.fluid__out { position: absolute; top: 0; left: 0; }
/* 정렬된 상태 = 2xA 처럼 12칸 그리드에 엇갈려 놓인 단어 (왼쪽 일렬 아님) */
.field__words { position: absolute; left: var(--pad); right: var(--pad); top: calc(64px + 3vh); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: .5vh; pointer-events: none; }
.field__words .fw:nth-child(1) { grid-column: 1 / -1; }
.field__words .fw:nth-child(2) { grid-column: 5 / -1; }
.field__words .fw:nth-child(3) { grid-column: 2 / -1; }
.field__words .fw:nth-child(4) { grid-column: 4 / -1; }
.fw { --a: 1; display: flex; align-items: flex-end; gap: 18px; will-change: transform; }
.fw__t { font: 400 var(--fs-huge)/.86 var(--f-display); letter-spacing: -.045em; white-space: nowrap;
  color: var(--ink); padding: 0 .04em; border-radius: 0; transition: background-color .4s var(--ease-out); }
.fw__s { color: var(--ink); background: var(--white); padding: 2px 6px; margin-bottom: .9em; white-space: nowrap; }
.fw.is-hot .fw__t { background: var(--lime); color: var(--ink); }

/* ---------- 지지직: 큰 단어 글리치 (로고 단어엔 걸지 않음) ---------- */
.fw__t { position: relative; }
.gl { position: absolute; inset: 0; padding: inherit; pointer-events: none; visibility: hidden; white-space: nowrap; }
.fw.is-gl .gl { visibility: visible; }
/* RGB 분리: 빨강·시안 채널을 반대로 밀고 곱하기 합성 → 겹치는 곳은 검정, 갈라진 가장자리만 색 */
.gl--a { color: #ff1f3d; mix-blend-mode: multiply; }
.gl--b { color: #00c2ff; mix-blend-mode: multiply; }

/* 섹션 주사선: 평소엔 거의 안 보이고 버스트 때만 짙어진다 (스티키 안쪽 고정 레이어) */
.field__stick::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .12s;
  background: repeating-linear-gradient(0deg, rgba(17,17,17,.9) 0 1px, transparent 1px 4px); }
.field__stick.is-static::after { opacity: .14; }

/* ---------- 홀로그램 송출 패널 ---------- */
.holo { --hx: 30%; --hy: 40%; position: absolute; z-index: 4; right: var(--pad); top: calc(64px + 4vh); width: min(440px, 34vw); padding: 18px 20px 20px; border-radius: var(--radius);
  color: var(--ink); overflow: hidden; isolation: isolate;
  /* 홀로그램 유리: 위에서부터 (1) 마우스 쪽 하이라이트 (2) 무지갯빛 포일(각도가 --hx 를 따라 흐름) (3) 반투명 흰 유리 */
  background:
    radial-gradient(120% 90% at var(--hx) var(--hy), rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    linear-gradient(115deg, rgba(0,229,255,.34) 0%, rgba(215,255,0,.40) 22%, rgba(255,61,213,.26) 44%, rgba(0,194,255,.32) 66%, rgba(255,61,213,.24) 84%, rgba(0,229,255,.34) 100%) calc(var(--hx) * 1.6) 0 / 260% 100%,
    rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(9px) saturate(150%); backdrop-filter: blur(9px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), inset 0 0 22px rgba(0,229,255,.22), 0 0 0 1px rgba(17,17,17,.08),
    0 0 28px rgba(0,229,255,.28), 0 0 46px rgba(215,255,0,.30), 0 18px 50px rgba(17,17,17,.12);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-out);
  --jt-fg: var(--ink); --jt-bg: var(--white); --jt-acc: var(--lime); --jt-acc-ink: var(--ink); }
.holo.is-live { animation: holo-foil 6s linear infinite; }
.holo::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;               /* 주사선 */
  background: repeating-linear-gradient(0deg, rgba(17,17,17,.07) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.holo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; z-index: 2;   /* 흐르는 스캔 띠 */
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.55) 46%, rgba(0,229,255,.35) 50%, transparent);
  transform: translateY(-100%); }
.holo.is-live::after { animation: holo-scan 2.8s linear infinite; }
.holo__k { display: flex; gap: 8px; color: #4a4a47; margin-bottom: 10px; }
.holo__sig { margin-left: auto; color: var(--ink); }
.holo__sig::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--lime); box-shadow: 0 0 0 1px var(--ink); vertical-align: 0; }   /* 송출 중 표시(실제 상태) */
.holo.is-live .holo__sig::before { animation: holo-blink 1s steps(2) infinite; }
/* 투사된 글자: 검정 + 시안·마젠타 색 번짐 */
.holo__en { font: 700 clamp(20px, 1.75vw, 30px)/1.06 var(--f-display); letter-spacing: -.02em; color: var(--ink);
  text-shadow: -1.5px 0 rgba(255,61,213,.55), 1.5px 0 rgba(0,200,255,.6), 0 0 14px rgba(0,229,255,.35); }
.holo__kr { margin-top: 10px; font: 600 15px/1.55 var(--f-body); color: #262624; text-shadow: -1px 0 rgba(255,61,213,.3), 1px 0 rgba(0,200,255,.35); }
.holo.is-live .holo__en, .holo.is-live .holo__kr { animation: holo-flicker 5.2s steps(1) infinite; }
@keyframes holo-foil { to { background-position: 0 0, calc(var(--hx) * 1.6 + 260%) 0, 0 0; } }
@media (prefers-reduced-transparency: reduce) { .holo { background: #f4f7f0; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.holo.is-switch .holo__en, .holo.is-switch .holo__kr { animation: holo-tear .3s steps(6) 1; text-shadow: -4px 0 rgba(255,31,61,.85), 4px 0 rgba(0,194,255,.85); }
@keyframes holo-scan { to { transform: translateY(260%); } }
@keyframes holo-blink { 50% { opacity: 0; } }
@keyframes holo-flicker { 0%, 61%, 64%, 92%, 100% { opacity: 1; } 62% { opacity: .35; } 63% { opacity: .8; } 93% { opacity: .55; } }
@keyframes holo-tear {
  0% { transform: translateX(0); clip-path: inset(0 0 0 0); }
  20% { transform: translateX(-9px) skewX(-8deg); clip-path: inset(10% 0 55% 0); }
  40% { transform: translateX(7px); clip-path: inset(55% 0 8% 0); }
  60% { transform: translateX(-4px) skewX(6deg); clip-path: inset(30% 0 30% 0); }
  80% { transform: translateX(3px); clip-path: inset(0 0 70% 0); }
  100% { transform: translateX(0); clip-path: inset(0 0 0 0); } }
.fw__t--logo { display: inline-flex; align-items: center; height: .84em; padding: 0 .06em; }


/* 홀로그램 패널 = 헤더와 같은 유리 언어 (2026-10-12): 맑은 유리 + 1px 무광 라인 + 가끔 테두리를 도는 파스텔 무지개.
   홀로그램다운 것(주사선·스캔 띠·글자 색 번짐·깜박임)은 유지. 되돌리기: 이 블록과 .holo__ring 마크업 삭제 */
.holo { border-radius: 22px;
  background:
    radial-gradient(120% 90% at var(--hx) var(--hy), rgba(255,255,255,.4), rgba(255,255,255,0) 55%),
    linear-gradient(115deg, rgba(184,243,255,.16) 0%, rgba(243,255,194,.18) 30%, rgba(255,209,243,.14) 60%, rgba(184,243,255,.16) 100%) calc(var(--hx) * 1.6) 0 / 260% 100%,
    rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(12px) saturate(170%) brightness(1.04); backdrop-filter: blur(12px) saturate(170%) brightness(1.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), inset 0 0 18px rgba(255,255,255,.14), 0 14px 40px rgba(17,17,17,.12); }
.holo::before { background: repeating-linear-gradient(0deg, rgba(17,17,17,.045) 0 1px, transparent 1px 3px); }
.holo::after { background: linear-gradient(180deg, transparent, rgba(255,255,255,.35) 46%, rgba(194,255,240,.25) 50%, transparent); }
.holo__ring { position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--hd-a), transparent 0deg 200deg, rgba(184,243,255,.9) 250deg, rgba(194,255,240,.95) 280deg, rgba(243,255,194,1) 305deg, rgba(255,209,243,.95) 330deg, rgba(230,201,255,.7) 348deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.holo.is-live .holo__ring { animation: holo-ring 6.5s cubic-bezier(.37, 0, .63, 1) 2.2s infinite; }   /* 6.5초마다 앞 2.4초 동안 한 바퀴 (헤더와 박자 엇갈림) */
@keyframes holo-ring { 0% { --hd-a: 0deg; opacity: 0; } 9% { opacity: .55; } 26% { opacity: .55; } 37%, 100% { --hd-a: 360deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .holo__ring { display: none; } }

/* ---------- 타이퍼 상태 (jm-typer.js) ---------- */
:root { --jt-fg: var(--ink); --jt-bg: var(--white); --jt-acc: var(--lime); --jt-acc-ink: var(--ink); }   /* 조상(.intro 등)이 덮어쓸 수 있게 루트에만 둔다 */
.jt-w { display: inline-block; white-space: nowrap; }
.jt-c { display: inline-block; position: relative; }
.jt-c.is-init { color: transparent; }
.jt-c.v-fill { background: var(--jt-fg); color: var(--jt-bg); }
.jt-c.v-inv { background: var(--jt-fg); color: var(--jt-bg); }
.jt-c.v-acc { background: var(--jt-acc); color: var(--jt-acc-ink); }
.jt-c.v-accfill { background: var(--jt-acc); color: var(--jt-acc); }
.jt-c.v-border { box-shadow: inset 0 0 0 .04em currentColor; }

/* ---------- 포트폴리오 ---------- */
.work { padding: clamp(80px, 9vw, 150px) var(--pad) clamp(80px, 9vw, 140px); }
.work__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; margin-bottom: clamp(28px, 3.4vw, 56px); }
.work__title { grid-column: 1 / span 8; font: 700 var(--fs-h2)/.95 var(--f-display); letter-spacing: -.045em; }
.work__note { grid-column: 1 / span 6; color: var(--fg-dim); font-size: 15px; }
.work__all { grid-column: 11 / -1; justify-self: end; font: 500 15px/1 var(--f-display); }
/* 대표 작업 = 두 줄 흐르는 띠 (위 줄 ←, 아래 줄 →). 줄마다 같은 카드를 두 번 이어 붙여 절반 이동 = 이음매 없음. 올리면 그 줄만 멈춤 */
.wf { display: grid; gap: clamp(20px, 2vw, 32px); margin: 0 calc(var(--pad) * -1); }
.wf-row { overflow: hidden; }
.wf-track { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--gap); width: max-content; animation: wf-flow 60s linear infinite; }
.wf-row--r .wf-track { animation-direction: reverse; animation-duration: 70s; }
.wf-row:hover .wf-track, .wf-row:focus-within .wf-track { animation-play-state: paused; }
@keyframes wf-flow { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.wf-card { flex: none; width: clamp(240px, 24vw, 400px); }
.wf-card a { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.wf-card__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--grey-1); transition: transform .6s var(--ease-out); }
.wf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.wf-card__view { position: absolute; left: 14px; top: 14px; padding: 5px 9px; background: var(--lime); color: var(--ink); clip-path: inset(0 100% 0 0); transition: clip-path .4s steps(6); transform: translateZ(0); }
.wf-card a:hover .wf-card__media, .wf-card a:focus-visible .wf-card__media { transform: translateY(-6px); }
.wf-card a:hover img, .wf-card a:focus-visible img { transform: scale(1.05); }
.wf-card a:hover .wf-card__view, .wf-card a:focus-visible .wf-card__view { clip-path: inset(0 0 0 0); }
.wf-card__meta { display: grid; gap: 2px; padding: 0 2px; }
.wf-card__name { font: 700 clamp(15px, 1.1vw, 18px)/1.35 var(--f-body); letter-spacing: -.02em; }
.wf-card__tags { font: 500 13px/1.4 var(--f-body); color: var(--grey-3); }
/* 전체 보기: 큰 알약 버튼 (151 + PROJECTS/전체 작업 보기 + 화살표), 누르면 페이지 전환 */
.wf-more { display: flex; justify-content: center; margin-top: clamp(40px, 4.4vw, 72px); }
.wf-more__btn { display: inline-flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); padding: 12px 14px 12px clamp(24px, 2.4vw, 36px); border-radius: var(--radius-pill);
  background: var(--ink); color: var(--white); text-decoration: none; transition: background-color .3s var(--ease-out), color .3s; }
.wf-more__n { font: 700 clamp(44px, 4.4vw, 72px)/.85 var(--f-display); letter-spacing: -.06em; color: var(--lime); transition: color .3s; }
.wf-more__t { display: grid; gap: 4px; font: 700 clamp(16px, 1.3vw, 20px)/1.2 var(--f-body); }
.wf-more__t .pixel { color: #a3a39e; font-weight: 400; }
.wf-more__arrow { display: grid; place-items: center; width: clamp(54px, 5vw, 72px); aspect-ratio: 1; border-radius: 50%; background: var(--lime); color: var(--ink); font: 500 26px/1 var(--f-display); transition: transform .4s var(--ease-out); }
.wf-more__btn:hover { background: #2a1bff; }
.wf-more__btn:hover .wf-more__n { color: var(--white); }
.wf-more__btn:hover .wf-more__arrow { transform: rotate(-45deg); }
@media (max-width: 767px) { .wf-card { width: 64vw; } .wf-card__tags { display: none; } }
@media (prefers-reduced-motion: reduce) { .wf-track { animation: none; } .wf-row { overflow-x: auto; } }

/* 페이지 전환 커튼 (page-transition.js): 세로 막대 12개가 아래에서 계단식으로 덮고, 다음 페이지에서 위로 걷힘 */
.pt { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-columns: repeat(12, 1fr); pointer-events: none; }
.pt i { background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--k) * 28ms); }
.pt i:nth-child(3n + 2) { background: #2a1bff; }
.pt i:nth-child(5n) { background: var(--lime); }
.pt.is-in { pointer-events: auto; }
.pt.is-in i { transform: scaleY(1); }
.pt.is-out i { transform-origin: 50% 0; transform: scaleY(0); }
.pt.is-cover i { transform: scaleY(1); transition: none; }


/* ---------- 공통 섹션 머리 ---------- */
.sec { padding: clamp(88px, 9vw, 150px) var(--pad); }
.sec__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px var(--gap); align-items: end; margin-bottom: clamp(36px, 4vw, 64px); }
.sec__kr { grid-column: 1 / -1; grid-row: 1; font: 600 15px/1.4 var(--f-body); color: var(--fg-dim); }
.sec__title { grid-column: 1 / span 7; font: 700 clamp(48px, 7.4vw, 136px)/.88 var(--f-display); letter-spacing: -.05em; }
.sec__lead { grid-column: 8 / -1; color: var(--fg-dim); font-size: var(--fs-lead); line-height: 1.65; }
.sec__lead strong { color: var(--fg); font-weight: 700; }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- 이벤트 유형: 패스 카드 (검정 섹션) ---------- */
.ev { background: var(--ink); color: var(--white); --fg-dim: #a3a39e; overflow-x: clip; }   /* 모바일 카드 가로 넘김 줄이 페이지 밖으로 새지 않게 */
.ev :focus-visible { outline-color: var(--lime); }
.ev__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
/* 패스 카드: 발급 정보 서식 + 라임 그림판 + 절취선 홈 + 바코드 */
.pass { --notch: 9px; position: relative; display: grid; grid-template-rows: auto auto 1fr auto; border-radius: 16px; background: #1b1b1a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); min-width: 0; overflow: hidden;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut, 68%), transparent 98%, #000) , radial-gradient(circle var(--notch) at 100% var(--cut, 68%), transparent 98%, #000);
  -webkit-mask-composite: source-in; mask: radial-gradient(circle var(--notch) at 0 var(--cut, 68%), transparent 98%, #000), radial-gradient(circle var(--notch) at 100% var(--cut, 68%), transparent 98%, #000); mask-composite: intersect; }
.pass__top { display: flex; justify-content: space-between; padding: 12px 14px 10px; color: #8a8a86; }
.pass__art { position: relative; margin: 0 8px; aspect-ratio: 1 / 1; border-radius: 10px; display: grid; place-items: center; color: var(--ink); overflow: hidden;
  background: linear-gradient(rgba(17,17,17,.07) 1px, transparent 1px) 0 0 / 100% 6.25%, linear-gradient(90deg, rgba(17,17,17,.07) 1px, transparent 1px) 0 0 / 6.25% 100%, var(--lime); }
.pass__icon, .pass__art canvas { width: 62%; height: 62%; shape-rendering: crispEdges; image-rendering: pixelated; }
.pass__art canvas { position: absolute; left: 19%; top: 19%; }
.pass__en { position: absolute; left: 10px; bottom: 8px; font: 700 clamp(13px, 1vw, 15px)/1 var(--f-display); letter-spacing: -.01em; }
.pass--hot .pass__art { color: var(--lime); background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 6.25%, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 6.25% 100%, #2a2a28; }
.pass--hot .pass__en { color: var(--lime); }
.pass__body { display: grid; align-content: start; gap: 8px; padding: 18px 16px 16px; border-bottom: 1px dashed rgba(255,255,255,.18); }
.pass__name { font: 700 clamp(17px, 1.3vw, 20px)/1.3 var(--f-body); letter-spacing: -.02em; }
.pass__desc { font-size: 14px; line-height: 1.65; color: #bdbdb8; }
.pass__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px 14px; color: #8a8a86; }
.pass__bar { width: 38%; height: 18px; background: repeating-linear-gradient(90deg, #8a8a86 0 1px, transparent 1px 3px, #8a8a86 3px 5px, transparent 5px 6px, #8a8a86 6px 7px, transparent 7px 10px); opacity: .8; }
.ev__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; margin-top: clamp(32px, 3.4vw, 52px); }
.ev__more { font: 600 clamp(17px, 1.4vw, 21px)/1.5 var(--f-body); }
.ev__links { display: flex; gap: 10px 24px; flex-wrap: wrap; font-size: 15px; }
.ev__links a { text-underline-offset: 4px; }
.ev__links a::after { content: " →"; }
.live { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px var(--gap); margin-top: clamp(64px, 7vw, 110px); padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16); }
.live__title { grid-column: 1 / span 5; font: 700 clamp(28px, 3vw, 48px)/1 var(--f-display); letter-spacing: -.04em; }
.live__txt { grid-column: 7 / -1; color: #bdbdb8; line-height: 1.75; }

/* ---------- 제작 과정 ---------- */
.pr__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 var(--gap); counter-reset: none; }
.step { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ink); min-width: 0; }
.step__no { color: var(--grey-3); }
.step__en { font: 700 clamp(16px, 1.45vw, 24px)/1 var(--f-display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.step__kr { font-size: 15px; color: var(--fg-dim); }
.step--open .step__en { justify-self: start; background: var(--lime); padding: 2px 4px; }

/* ---------- 제작 비용 (밝은 회색 섹션) ---------- */
.pc { background: var(--grey-1); }
.pc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.price { display: grid; align-content: start; gap: 6px; padding: clamp(22px, 2vw, 32px); border-radius: 18px; background: var(--white); min-width: 0; }
.price__k { color: var(--grey-3); margin-bottom: 14px; }
.price__name { font: 700 21px/1.3 var(--f-body); letter-spacing: -.02em; }
.price__spec { font-size: 15px; color: var(--fg-dim); }
.price__won { margin-top: clamp(28px, 3vw, 48px); font: 600 17px/1 var(--f-body); }
.price__num { font: 700 clamp(34px, 3.1vw, 52px)/1 var(--f-display); letter-spacing: -.045em; margin-right: 2px; }
.price__note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grey-2); font-size: 14px; color: var(--fg-dim); }
.price--dev { background: var(--ink); color: var(--white); }
.price--dev .price__num { color: var(--lime); }
.price--dev .price__spec, .price--dev .price__note { color: #bdbdb8; }
.price--dev .price__note { border-top-color: rgba(255,255,255,.16); }
.pc__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px var(--gap); margin-top: clamp(28px, 3vw, 44px); font-size: 15px; line-height: 1.7; color: var(--fg-dim); }
.pc__foot > p:nth-child(1) { grid-column: 1 / span 4; }
.pc__foot > p:nth-child(2) { grid-column: 5 / span 5; }
.pc__foot strong { color: var(--fg); }
.pc__cta { grid-column: 10 / -1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-self: start; }

/* ---------- 자주 묻는 질문 ---------- */
.fq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap); }
.fq .sec__head { grid-column: 1 / span 4; display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: 12px; align-self: start; position: sticky; top: 96px; }
.fq__list { grid-column: 6 / -1; border-top: 2px solid var(--ink); }
.qa { border-bottom: 1px solid var(--grey-2); }
.qa summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; font: 600 clamp(17px, 1.3vw, 20px)/1.45 var(--f-body); letter-spacing: -.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font: 400 26px/1 var(--f-display); transition: transform .3s var(--ease-out); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 48px 24px 0; color: var(--fg-dim); line-height: 1.75; }

/* ---------- 상담 ---------- */
.ct { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap); padding: clamp(88px, 9vw, 150px) var(--pad); border-top: 1px solid var(--grey-2); }
.ct__intro { grid-column: 1 / span 5; align-self: start; position: sticky; top: 96px; display: grid; gap: 24px; }
.ct__big { font: 700 clamp(44px, 5.6vw, 100px)/1.04 var(--f-body); letter-spacing: -.05em; }
.ct__lead { color: var(--fg-dim); font-size: var(--fs-lead); line-height: 1.65; }
.ct__info { margin: 12px 0 0; display: grid; gap: 14px; }
.ct__info > div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--grey-2); }
.ct__info dt { color: var(--grey-3); padding-top: 3px; }
.ct__info dd { margin: 0; font-size: 15px; line-height: 1.6; }
.ct__info a[href^="tel:"] { font: 700 26px/1 var(--f-display); letter-spacing: -.03em; text-decoration: none; }
.ct__form { grid-column: 7 / -1; position: relative; }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }
.go_apply_con { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: clamp(24px, 2.6vw, 40px); border-radius: 22px; background: var(--grey-1); }
.ct__h { grid-column: 1 / -1; color: var(--grey-4); }
.fd { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fd--half { grid-column: span 1; }
.fd > label, .fd > legend { font: 600 14px/1.4 var(--f-body); padding: 0; margin-bottom: 8px; }
.fd > label { margin-bottom: 0; }
.opt { color: var(--grey-3); font-weight: 500; }
.ct__form input[type=text], .ct__form input[type=tel], .ct__form input[type=email], .ct__form input[type=date], .ct__form textarea {
  width: 100%; min-width: 0; height: 52px; padding: 0 16px; border: 1.5px solid var(--grey-2); border-radius: 10px; background: var(--white);
  font: 500 16px/1.4 var(--f-body); color: var(--ink); text-transform: none; transition: border-color .2s; }
.ct__form textarea { height: auto; padding: 14px 16px; resize: vertical; }
.ct__form input:focus, .ct__form textarea:focus { outline: none; border-color: var(--ink); }
.ct__form [aria-invalid="true"] { border-color: #d4002a !important; }
/* 선택형: 라디오를 알약 버튼으로 (값·name 은 운영 select 와 같음) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--grey-2); background: var(--white); font: 600 14.5px/1 var(--f-body); transition: background-color .2s, color .2s, border-color .2s; }
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.seg.is-invalid span { border-color: #d4002a; }
/* 추가 요청 토글 (SEO/GEO, 2026-10-12) — 끄면 회색 트랙, 켜면 검정 트랙 + 라임 손잡이 */
.addon { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tgl { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.tgl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgl__track { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: #d9d9d4; transition: background-color .3s var(--ease-out); }
.tgl__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--white);
  box-shadow: 0 2px 6px rgba(17,17,17,.25); transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), background-color .3s; }
.tgl input:checked + .tgl__track { background: var(--ink); }
.tgl input:checked + .tgl__track .tgl__knob { transform: translateX(22px); background: var(--lime); }
.tgl input:focus-visible + .tgl__track { outline: 2px solid var(--ink); outline-offset: 3px; }
.tgl__txt { font: 600 14.5px/1.3 var(--f-body); text-transform: none; }
.tgl__txt em { font-style: normal; font-weight: 500; color: #8a8a85; margin-left: 2px; transition: color .3s; }
.tgl input:checked ~ .tgl__txt em { color: var(--ink); }
.seg__info { flex: none; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 0; background: var(--ink); color: var(--white);
  font: 700 13px/1 Georgia, serif; font-style: italic; text-transform: none; cursor: pointer; display: grid; place-items: center; transition: transform .2s; }
.seg__info:hover { transform: scale(1.1); }
.seg__info[aria-expanded="true"] { background: var(--lime); color: var(--ink); }
.seg__info:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 말풍선 — ⓘ 아래에 뜨고 꼬리가 ⓘ 를 가리킨다(--tip-x 는 counsel.js 가 버튼 위치로 넣는다) */
.bubble { position: absolute; z-index: 5; top: calc(100% + 12px); left: 0; width: max-content; max-width: min(340px, calc(100vw - 48px));
  margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--ink); color: var(--white);
  font: 500 14px/1.6 var(--f-body); word-break: keep-all; text-transform: none; box-shadow: 0 12px 32px rgba(17,17,17,.25);
  animation: bubble-in .28s cubic-bezier(.34, 1.4, .64, 1); transform-origin: var(--tip-x, 24px) 0; }
.bubble::before { content: ""; position: absolute; top: -6px; left: calc(var(--tip-x, 24px) - 7px); width: 14px; height: 14px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.bubble[hidden] { display: none; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } .tgl__knob, .tgl__track { transition: none; } }
.wt { display: flex; align-items: center; gap: 6px; }   /* 날짜 + 오전/오후 한 줄 — 칸 폭이 259px 까지 좁아져도 (2026-10-12) */
.wt .cal { flex: 1 1 auto; min-width: 0; }
.wt .cal__btn { width: 100%; justify-content: flex-start; overflow: hidden; white-space: nowrap; }
.wt .seg { flex: none; flex-wrap: nowrap; gap: 6px; }
.wt .seg span { padding: 0 14px; }
/* 사이트 달력 — 알약 버튼(칩과 같은 44px) + 말풍선형 달력 */
.cal { position: relative; }
.cal__btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px 0 13px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--grey-2); background: var(--white); color: var(--grey-4, #6b6b66); font: 600 14.5px/1 var(--f-body); text-transform: none; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.cal__btn:hover, .cal__btn[aria-expanded="true"] { border-color: var(--ink); }
.cal__btn.is-set { background: var(--ink); border-color: var(--ink); color: var(--white); }
.cal__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cal__btn.is-invalid { border-color: #d4002a; }
.cal__pop { position: absolute; z-index: 20; top: calc(100% + 10px); left: 0; width: 300px; min-width: 100%; max-width: calc(100vw - 40px); padding: 16px 14px 14px;
  border-radius: 18px; background: var(--white); border: 1px solid var(--grey-2); box-shadow: 0 18px 44px rgba(17,17,17,.18); text-transform: none;
  animation: bubble-in .26s cubic-bezier(.34, 1.4, .64, 1); transform-origin: 30px 0; }
.cal__pop[hidden] { display: none; }
.cal__pop::before { content: ""; position: absolute; top: -7px; left: 26px; width: 14px; height: 14px; background: var(--white); border-left: 1px solid var(--grey-2); border-top: 1px solid var(--grey-2); transform: rotate(45deg); border-radius: 2px 0 0 0; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.cal__title { font: 700 16px/1 var(--f-body); }
.cal__nav { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--grey-1); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color .2s; }
.cal__nav:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.cal__nav:disabled { opacity: .3; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal__wd { font: 600 12px/28px var(--f-body); color: var(--grey-3, #9a9a95); }
.cal__wd:first-child, .cal__day.is-sun { color: #e03a3a; }
.cal__wd:last-child, .cal__day.is-sat { color: #2a5bd7; }
.cal__day { height: 38px; border: 0; border-radius: 50%; background: none; color: var(--ink); font: 600 14px/1 var(--f-body); cursor: pointer; transition: background-color .15s, color .15s; }
.cal__day:hover:not(:disabled) { background: var(--grey-1); }
.cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal__day.is-sel, .cal__day.is-sel:hover { background: var(--ink); color: var(--lime); }
.cal__day:disabled { color: #cfcfca; cursor: default; }
.cal__day:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal__note { margin: 10px 4px 0; font: 500 12px/1.4 var(--f-body); color: var(--grey-3, #9a9a95); }
.fd--agree { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14.5px; }
.chk { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.chk input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.ct__msg:empty { display: none; }
.ct__msg { grid-column: 1 / -1; font-size: 14.5px; font-weight: 600; color: #d4002a; word-break: keep-all; }
.ct__msg.is-ok { color: var(--ink); }
.ct__submit { grid-column: 1 / -1; height: 60px; font-size: 17px; }

/*	전송 중 — 글자를 바꾸지 않고 버튼 안에서만 돈다.
	문구를 패널에 띄우면 회색 박스가 늘어나 폼 전체가 한 번 밀린다(담당자 "치치직"). */
.ct__submit[disabled] { cursor: progress; opacity: .72; }
.ct__submit.is-busy::after { content: ''; width: 17px; height: 17px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%; animation: jm-spin .7s linear infinite; }
@keyframes jm-spin { to { transform: rotate(360deg); } }

/* ---------- 접수 완료 ---------- */
/*	폼 위에 덮는다 — 흐름에 끼워 넣으면 높이가 바뀌어 또 밀린다.
	배경(흐림)에는 transform 을 주지 않는다. backdrop-filter 와 같이 쓰면 깨진다. */
.ct__done[hidden] { display: none; }
.ct__done { position: absolute; inset: -14px; z-index: 4; display: grid; place-items: center; padding: 20px;
  border-radius: 28px; background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  animation: jm-done-veil .3s var(--ease-out) both; }
.ct__done-in { display: grid; justify-items: center; gap: 12px; text-align: center; width: min(100%, 420px);
  padding: clamp(30px, 3.2vw, 44px) clamp(24px, 3vw, 38px); border-radius: 24px;
  background: var(--white); border: 1.5px solid var(--ink); box-shadow: 0 20px 54px rgba(17, 17, 17, .13);
  animation: jm-done-card .44s var(--ease-out) both; }
.ct__done-mark { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 4px;
  border-radius: 50%; background: var(--lime); color: var(--ink); }
.ct__done-mark svg { width: 32px; height: 32px; }
.ct__done-mark path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: jm-done-tick .42s var(--ease-out) .2s both; }
.ct__done-title { margin: 0; font: 700 clamp(20px, 2.1vw, 25px)/1.32 var(--f-body); letter-spacing: -.035em; word-break: keep-all; }
.ct__done-text { margin: 0; color: var(--grey-4); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.ct__done-text span { display: block; }
.ct__done-tel { margin: 6px 0 0; padding-top: 14px; width: 100%; border-top: 1px solid var(--grey-2);
  font-size: 13.5px; color: var(--grey-3); }
.ct__done-tel a { display: inline-block; margin-left: 6px; font: 700 21px/1 var(--f-display);
  letter-spacing: -.03em; color: var(--ink); text-decoration: none; vertical-align: -2px; }
.ct__done-again { margin-top: 2px; padding: 6px 4px; border: 0; background: none; cursor: pointer;
  font: 600 14px/1 var(--f-body); color: var(--grey-4); text-decoration: underline; text-underline-offset: 3px; }
.ct__done-again:hover { color: var(--ink); }

@keyframes jm-done-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes jm-done-card { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes jm-done-tick { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ct__done, .ct__done-in { animation-duration: .01ms; }
  .ct__done-mark path { animation: none; stroke-dashoffset: 0; }
  .ct__submit.is-busy::after { animation: none; }
}

/* ---------- 인스타그램 (자리) ---------- */
.ig { padding: clamp(64px, 6vw, 110px) 0; border-top: 1px solid var(--grey-2); overflow: hidden; }
.ig__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 var(--pad); margin-bottom: clamp(24px, 2.6vw, 40px); }
.ig__title { font: 700 clamp(40px, 5vw, 88px)/.9 var(--f-display); letter-spacing: -.05em; }
.ig__follow { font: 700 16px/1 var(--f-body); color: var(--ink); text-decoration: none; padding: 12px 20px; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); transition: background-color .25s, color .25s; }
.ig__follow:hover { background: var(--ink); color: var(--white); }
.ig__track { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 21vw, 320px); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; }   /* 스냅이 여백을 무시하지 않게 */
.ig__track::-webkit-scrollbar { display: none; }
.ig-tile { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--grey-1); scroll-snap-align: start; }
/* 피드가 오면 흐르는 띠로 바뀐다 (2026-10-12) — 높이 고정·원래 비율, wf-flow 키프레임 공유, 올리면 멈춤 */
.ig__track.is-flow { display: flex; width: max-content; padding: 0; overflow: visible; scroll-snap-type: none; will-change: transform; }   /* 움직임은 main.js igFlow */
.ig__rail { position: relative; }
.ig__next { position: absolute; z-index: 2; top: 50%; right: var(--pad); width: 72px; height: 72px; margin-top: -36px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--lime, #D7FF00); color: var(--ink, #111); cursor: pointer;
  box-shadow: 0 10px 30px rgba(17,17,17,.22); transition: transform .35s var(--ease-out), box-shadow .35s; }
.ig__next:hover { transform: scale(1.08); box-shadow: 0 14px 36px rgba(17,17,17,.3); }
.ig__next:active { transform: scale(.94); }
.ig__next:focus-visible { outline: 3px solid var(--ink, #111); outline-offset: 4px; }
.ig__next svg { transition: transform .35s var(--ease-out); }
.ig__next:hover svg { transform: translateX(3px); }
.ig__track.is-flow .ig-tile { flex: none; height: clamp(300px, 28vw, 440px); aspect-ratio: var(--ar, 1); }
@media (max-width: 767px) { .ig__track.is-flow .ig-tile { height: 300px; } .ig__next { width: 56px; height: 56px; margin-top: -28px; } }
.ig-tile a { display: block; width: 100%; height: 100%; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.ig-tile__cap { position: absolute; inset: auto 0 0; padding: 40px 14px 12px; color: var(--white); font: 500 13.5px/1.45 var(--f-body);
  background: linear-gradient(transparent, rgba(17,17,17,.75)); opacity: 0; transition: opacity .3s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ig-tile a:hover img { transform: scale(1.05); }
.ig-tile a:hover .ig-tile__cap, .ig-tile a:focus-visible .ig-tile__cap { opacity: 1; }
.ig-tile--ph { display: grid; place-items: center; color: var(--grey-3); background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(17,17,17,.045) 11px 12px), var(--grey-1); }
.ig-tile--ph span { transform: translateZ(0); }
.ig[hidden] { display: none; }
@media (max-width: 767px) { .ig__track { grid-auto-columns: 62vw; } }

/* ---------- 푸터 ---------- */
.ft { background: var(--ink); color: var(--white); padding: clamp(64px, 7vw, 120px) var(--pad) 32px; }
.ft__logo { color: var(--white); }
.ft__logo .jm-svg { width: 100%; height: auto; }
.ft__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px var(--gap); margin-top: clamp(40px, 5vw, 80px); font-size: 14.5px; line-height: 1.7; color: #bdbdb8; }
.ft__k { color: #8a8a86; margin-bottom: 10px; }
.ft__sns { display: flex; gap: 8px 18px; flex-wrap: wrap; }
/*  푸터 GUIDE — 가이드 7편으로 가는 길 (2026-10-15).
    한 줄에 하나씩 둔다. 이어 붙이면 제목끼리 붙어 어디까지가 한 글인지 안 보인다. */
.ft__links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ft__col .b { white-space: normal; }
.ft__col p { word-break: keep-all; }   /* 사업자번호·주소가 숫자 중간에서 안 끊기게 */
.ft__links a { display: inline-block; }
.ft a { color: var(--white); }
.ft__bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; color: #8a8a86; }

/* ---------- 개인정보처리방침 대화상자 ---------- */
.pv { width: min(760px, calc(100% - 32px)); max-height: 82vh; padding: 0; border: 0; border-radius: 18px; color: var(--ink); text-transform: none; overflow: hidden; }
.pv[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.pv::backdrop { background: rgba(17,17,17,.6); }
.pv__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--grey-2); }
.pv__head h2 { font: 700 19px/1.3 var(--f-body); }
.pv__x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--grey-1); font: 400 24px/1 var(--f-display); cursor: pointer; }
.pv__body { overflow: auto; overscroll-behavior: contain; padding: 20px 24px 28px; font-size: 14px; line-height: 1.75; color: #3a3a38; }
.pv__body p { margin: 0 0 8px; }

/* ---------- 지그재그 3D 오브젝트 (zig3d.js) 층 순서 ----------
   섹션 배경(0) < 오브젝트 캔버스(1) < 본문(2) < 가까이 왔을 때 오브젝트(3) < 주사위(40) < 헤더(50) */
.zig { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; opacity: 0; }
.zig.zig--front { z-index: 3; }
.work__head, .wf, .wf-more, .ev .sec__head, .ev__grid, .ev__foot, .live, .pr .sec__head, .pr__list,
.pc .sec__head, .pc__grid, .pc__foot, .fq__list, .ct__form { position: relative; z-index: 2; }
.fq .sec__head, .ct__intro { z-index: 2; }
.ft__logo, .ft__grid, .ft__bottom { position: relative; z-index: 2; }   /* 푸터 글자도 오브젝트 위 */   /* 이 둘은 sticky 라 위치 값은 그대로 */

/* ?zig=die: 주사위가 지그재그로 움직이므로 오른쪽 아래 주사위는 숨김 */
.zig-die .die { display: none; }

/* ---------- 스크롤 주사위 (CSS 3D) ---------- */
.die { --ds: clamp(58px, 6.2vw, 100px); --half: calc(var(--ds) / 2); position: fixed; z-index: 40; right: var(--pad); bottom: clamp(16px, 3.2vh, 34px);
  width: var(--ds); height: var(--ds); perspective: 700px; display: block; transition: transform .4s var(--ease-out); }
.die:hover { transform: scale(1.08); }
.die:focus-visible { outline: 2px solid var(--lime); outline-offset: 8px; }
.die__cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, -24deg)) rotateY(var(--ry, 32deg)); }
/* 면: 파랑 + 테두리 빛. 밝기(--l)는 JS 가 각도마다 계산(빛은 왼쪽 위 앞) */
.die__f { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14%; color: #141414;
  background: linear-gradient(135deg, #b8f3ff, #e6c9ff 25%, #f3ffc2 50%, #c2fff0 70%, #ffd1f3 88%, #b8f3ff);   /* WebGL 판과 같은 포일 색 */
  backface-visibility: hidden; filter: brightness(var(--l, 1));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7), inset 0 -8px 16px rgba(40,40,80,.18); }
.die__f svg { width: 56%; height: 56%; shape-rendering: crispEdges; }
.die__f--logo { color: #141414; }
.die__f--logo .jm-svg { width: 74%; height: auto; }
.die__f:nth-of-type(1) { transform: translateZ(var(--half)); }
.die__f:nth-of-type(2) { transform: rotateY(180deg) translateZ(var(--half)); }
.die__f:nth-of-type(3) { transform: rotateY(90deg) translateZ(var(--half)); }
.die__f:nth-of-type(4) { transform: rotateY(-90deg) translateZ(var(--half)); }
.die__f:nth-of-type(5) { transform: rotateX(90deg) translateZ(var(--half)); }
.die__f:nth-of-type(6) { transform: rotateX(-90deg) translateZ(var(--half)); }
/* 속심: 가운데를 지나는 진한 면 3장 → 둥근 모서리 틈으로 뒤가 비치지 않게 */
.die__core { position: absolute; inset: 3%; background: #b9c6d6; }
.die__core:nth-child(2) { transform: rotateY(90deg); }
.die__core:nth-child(3) { transform: rotateX(90deg); }
/* WebGL 판(die3d.js): 회전해도 모서리가 잘리지 않게 상자보다 넓은 캔버스. 첫 프레임 뒤 .die--gl 이 CSS 주사위를 숨김 */
.die__gl { position: absolute; inset: -38%; pointer-events: none; }
.die__gl canvas { width: 100% !important; height: 100% !important; display: block; }
.die--gl .die__cube { visibility: hidden; }
/* 바닥 그림자 */
.die::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -22%; height: 14%; border-radius: 50%; background: rgba(0,0,0,.28); filter: blur(6px); z-index: -1; }
@media (prefers-reduced-motion: reduce) { .die { transition: none; } }

/* ---------- 인트로 ---------- */
.intro { position: fixed; inset: 0; z-index: var(--z-intro); color: var(--lime); pointer-events: auto; }
html.no-intro .intro { display: none; }
.intro__bg { position: absolute; inset: 0; background: var(--ink); }
.intro__bg::after { content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;   /* 고정 그레인 1장 (스크롤 영역 아님) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* 워드마크: 메인 .mega 와 같은 자간·행간 → 크기만 바꿔 같은 자리에 겹친다 */
.intro__mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: var(--logo-gap); white-space: nowrap;
  font: 700 clamp(64px, 15vw, 290px)/.8 var(--f-display); letter-spacing: -.065em; color: var(--lime); visibility: hidden;
  --jt-fg: var(--lime); --jt-bg: var(--ink); --jt-acc: var(--lime); --jt-acc-ink: var(--ink); }
.intro__mark.is-on { visibility: visible; }
.iw { display: inline-block; transform-origin: 0 0; will-change: transform; }
/* 막대 리빌용 띠 (JS 가 만든다) */
.intro__slices { position: absolute; pointer-events: none; }
.isl { position: absolute; left: 0; right: 0; overflow: hidden; }
.isl__txt { position: absolute; left: 0; display: flex; gap: var(--logo-gap); white-space: nowrap; font: 700 clamp(64px, 15vw, 290px)/.8 var(--f-display); letter-spacing: -.065em; color: var(--lime);
  clip-path: inset(0 100% 0 0); }
.isl__bar { position: absolute; left: -2%; right: -2%; top: 5%; bottom: 5%; border-radius: var(--radius-pill); background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
.intro__count { position: absolute; top: calc(var(--pad) + 8px); left: var(--pad); display: flex; gap: 14px; color: var(--lime); }
.intro__count-l { color: #8a8a86; }
/* 인트로가 도는 동안 메인 요소는 숨겨 두고 JS 가 차례로 꺼낸다 */
html.has-intro .hd, html.has-intro .hero__mf, html.has-intro .hero__sub, html.has-intro .hero__logo, html.has-intro .die { opacity: 0; }
html.has-intro .mega__chip { clip-path: inset(0 50% 0 50%); }
/* 안전장치: JS 가 죽어도 4.5초 뒤엔 인트로가 걷히고 메인이 보인다 (정상이면 JS 가 그 전에 has-intro 를 지운다) */
html.has-intro .hd, html.has-intro .hero__mf, html.has-intro .hero__sub, html.has-intro .hero__logo, html.has-intro .die { animation: jm-failsafe-in 0s 4.5s forwards; }
html.has-intro .mega__chip { animation: jm-failsafe-chip 0s 4.5s forwards; }
html.has-intro .intro { animation: jm-failsafe-out 0s 4.5s forwards; }
@keyframes jm-failsafe-in { to { opacity: 1; } }
@keyframes jm-failsafe-chip { to { clip-path: inset(0 0 0 0); } }
@keyframes jm-failsafe-out { to { visibility: hidden; pointer-events: none; } }
.intro__line { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 8px); display: flex; justify-content: space-between; color: #9a9a96;
  --jt-fg: var(--lime); --jt-bg: var(--ink); --jt-acc: var(--lime); --jt-acc-ink: var(--ink); }
.intro__skip { position: absolute; top: calc(var(--pad) + 4px); right: var(--pad); background: transparent; color: var(--lime); border: 1px solid currentColor; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.intro__skip:hover { background: var(--lime); color: var(--ink); }

/* ---------- 태블릿·모바일 ---------- */
@media (max-width: 1024px) {
  .hd__nav { display: none; }
  .hd { grid-template-columns: auto 1fr; }
  .hd__cta { justify-self: end; }
  .mf__l { flex-wrap: wrap; justify-content: flex-start; white-space: normal; row-gap: .06em; }
  .hero__h1 { grid-column: 1 / -1; }
  .hero__lead { grid-column: 1 / span 7; }
  .hero__cta { grid-column: 8 / -1; }
  .sec__title { grid-column: 1 / -1; }
  .sec__lead { grid-column: 1 / span 9; }
  .ev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr__list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .pc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc__foot > p:nth-child(n) { grid-column: 1 / -1; }
  .pc__cta { justify-content: flex-start; }
  .fq .sec__head { grid-column: 1 / -1; position: static; margin-bottom: 28px; }
  .fq__list { grid-column: 1 / -1; }
  .ct__intro { grid-column: 1 / -1; position: static; }
  .ct__form { grid-column: 1 / -1; }
  .ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .field__words .fw:nth-child(n) { grid-column: 1 / -1; }
  .field__words .fw:nth-child(2), .field__words .fw:nth-child(4) { padding-left: 10vw; }
  :root { --fs-mega: 25vw; --fs-huge: 15.5vw; }
  .hd__tel { display: none; }
  .mega { flex-wrap: wrap; justify-content: flex-start; row-gap: .08em; }
  .hx { font-size: 17vw; }
  .mega__chip { width: 1.25em; }
  .hero { min-height: 0; }
  .hero__mf { font-size: 12.4vw; padding-block: 6vh 2vh; }
  .hero__lead, .hero__cta { grid-column: 1 / -1; }
  .hero__cta { justify-content: flex-start; }
  .hero__big { font-size: 24px; }
  .field { height: 240vh; }
  .field__bg { grid-template-columns: 1fr; }
  .field__bg { grid-template-columns: minmax(0, 1fr); top: 34vh; }
  .field__bg .fluid:nth-child(n+2) { display: none; }       /* 겹치는 텍스트 단순화: 한 단만 */
  .fw { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fw__s { padding-bottom: 0; }
  .holo { left: var(--pad); right: var(--pad); width: auto; top: auto; bottom: 3vh; padding: 14px 16px 16px; }
  .holo__en { font-size: 19px; }
  .holo__kr { font-size: 14px; }
  .work__head { grid-template-columns: 1fr; }
  .work__title, .work__note, .work__all { grid-column: 1; justify-self: start; }
  .sec__lead, .live__title, .live__txt { grid-column: 1 / -1; }
  /* 패스 카드: 옆으로 넘겨 보기 (세로로 8장 쌓지 않음) */
  .ev__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 8px; scrollbar-width: none; }
  .ev__grid::-webkit-scrollbar { display: none; }
  .pass { flex: 0 0 78vw; scroll-snap-align: center; }
  .pr__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc__grid { grid-template-columns: minmax(0, 1fr); }
  .go_apply_con { grid-template-columns: minmax(0, 1fr); }
  .fd--half { grid-column: 1 / -1; }
  .qa p { padding-right: 0; }
  .ft__grid { grid-template-columns: minmax(0, 1fr); }
  .ft__bottom { flex-direction: column; }
  .intro__line { flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
  .intro__mark, .isl__txt { flex-direction: column; gap: .1em; font-size: 25vw; }   /* 모바일 메인처럼 두 줄 */
}

/* ---------- 동작 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  .field { height: auto; }
  .field__stick { position: relative; height: auto; min-height: 100vh; }
  .field__words { position: relative; top: 0; padding: 64px 0 40vh; }
  .mega__chip img { transition: none; }
  .holo { position: relative; right: auto; top: auto; bottom: auto; margin: 0 0 40px auto; }
  .field__stick::after { display: none; }
}

/* reCAPTCHA 배지 숨김 — 대신 폼 아래 안내 문구(.ct__rc)를 둔다 (구글 허용 방식, 2026-10-12) */
.grecaptcha-badge { visibility: hidden !important; }
.ct__rc { grid-column: 1 / -1; margin: -8px 0 0; text-align: center; font: 500 12px/1.5 var(--f-body); color: #9a9a95; text-transform: none; word-break: keep-all; }
.ct__rc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* 작업물 썸네일 지지직 캔버스·호버 영상 (jm-thumb-rgb.js, 2026-10-14) — 이미지와 같은 배율·속도로 확대 */
.jm-rgb-cv, .jm-thumb-video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; pointer-events: none; transition: transform .9s var(--ease-out), opacity .35s ease; }
.jm-rgb-cv { z-index: 1; }
.jm-thumb-video { z-index: 1; object-fit: cover; opacity: 0; background: transparent; }
.jm-thumb-video.is-on { opacity: 1; }
.wf-card__view, .pf-card__view { z-index: 2; }
.wf-card a:hover .jm-rgb-cv, .wf-card a:hover .jm-thumb-video, .wf-card a:focus-visible .jm-thumb-video { transform: scale(1.05); }
.pf-card__link:hover .jm-rgb-cv, .pf-card__link:hover .jm-thumb-video, .pf-card__link:focus-visible .jm-thumb-video { transform: scale(1.04); }

/* 모바일·태블릿 WORK 버튼 (2026-10-14) — 메뉴(.hd__nav)가 숨는 1024px 이하에서만, 상담 신청 왼쪽.
   테두리·글자는 헤더 글자색(currentColor)을 따른다 → 히어로 위 흰색 / 밝은 섹션 위 검정 자동 */
.hd__work { display: none; background: transparent; color: currentColor; border: 1.5px solid currentColor; font-family: var(--f-display); letter-spacing: .02em; }
.hd__work:hover, .hd__work:focus-visible { background: var(--lime); color: var(--ink); border-color: var(--lime); }
@media (max-width: 1024px) { .hd__work { display: inline-flex; } .hd__cta { gap: 8px; } }
@media (max-width: 359px) { .hd__work, .hd__cta .btn--sm { padding: 0 13px; } }