/* 잘한다 메인 — Vercel 톤(흰 바탕 · 가는 격자 · 모노 라벨 · 검정 버튼) + 3D 클레이 캐릭터 */
:root {
  /* 포인트 컬러 = 첫 화면 3D ㅎ 그라데이션(살구 → 주황 → 핑크 → 보라). 단색이 필요하면 --acc(주황), 보조로 --acc2(핑크) */
  --acc: #FF6A2B;
  --acc2: #F0457A;
  --acc3: #8C6BFF;
  --ink: #0A0A0A;
  --sub: #5F5F66;
  --line: #EAEAEA;
  --bg: #FFFFFF;
  --bg2: #FAFAFA;
  --grad: linear-gradient(100deg, #FF9A5C 0%, #FF6A2B 30%, #F0457A 66%, #8C6BFF 100%);
  --mono: 'Geist Mono', ui-monospace, monospace;
  --sans: 'Geist', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); }
::selection { background: color-mix(in srgb, var(--acc2) 22%, transparent); }
a { color: inherit; }
.zh { font-family: var(--sans); color: var(--ink); background: var(--bg); word-break: keep-all; line-height: 1.45; overflow-x: clip; -webkit-font-smoothing: antialiased; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--sub); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-ink { background: var(--ink); color: #FFFFFF; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 18px rgba(10,10,10,.18); }
.btn-ink:hover { background: #262626; }
.btn-ghost { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--bg2); }
.btn-white { background: #FFFFFF; color: var(--ink); }
.btn-line { color: #FFFFFF; border: 1px solid rgba(255,255,255,.28); }
.btn-line:hover { background: rgba(255,255,255,.08); }

/* 움직임 */
@keyframes z3float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── 머리글 ── */
.gh { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s, transform .45s var(--ease); border-bottom: 1px solid transparent; }
.gh.scrolled { background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-color: var(--line); }
.gh.dark { color: #FFFFFF; }
.gh.dark.scrolled { background: rgba(10,10,10,.6); border-color: rgba(255,255,255,.1); }
/* 로고 | 메뉴 | 버튼 세 칸 — 양쪽 칸을 같은 너비(1fr)로 잡아 메뉴가 늘 화면 가로 가운데 */
.gh-in { padding: 14px clamp(20px, 3vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand span { font-weight: 700; font-size: 18px; letter-spacing: -.03em; }
.gnb { display: flex; gap: clamp(4px, 1vw, 14px); }
.gnb a { text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.gnb a:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.gh.dark .gnb a { color: rgba(255,255,255,.85); }
.gh.dark .gnb a:hover { color: #FFFFFF; background: rgba(255,255,255,.08); }
.gh-cta { display: flex; gap: 8px; justify-self: end; }
/* 어두운 문의 구역 위에서는 버튼도 밝게(검은 버튼이 바탕에 묻히지 않게) */
.gh.dark .gh-cta .btn-ink { background: var(--grad); color: #FFFFFF; box-shadow: none; }
.gh.dark .gh-cta .btn-ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.28); }
@media (max-width: 900px) { .gnb, .gh-cta .btn-ghost { display: none; } .gh-in { grid-template-columns: minmax(0, 1fr) auto; } }

/* ── 첫 화면 ── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 72px 0 0; overflow: hidden; background: var(--bg2); }   /* 첫 화면 한 장에 플랫폼 바로가기까지 */
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.defs { position: absolute; }

/* 큰 글자 + 3D ㅎ(레퍼런스: 화면 너비를 채우는 한 줄 글자 사이에 말랑한 오브젝트) */
.hx { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(20px, 3vw, 48px); }
/* ZAL 바로 위에 붙는 작은 문구(글자 크기를 큰 글자와 따로 잡는다) */
.hx-eyebrow { position: absolute; left: .05em; bottom: calc(100% + 14px); display: flex; flex-direction: column; gap: 4px; font-size: clamp(12px, 1vw, 15px); font-weight: 500; letter-spacing: 0; line-height: 1.4; white-space: nowrap; text-align: left; }
.hx-eyebrow-top { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 600; letter-spacing: .04em; }
.hx-eyebrow-top svg { height: 1.25em; width: auto; }
.hx-eyebrow-sub { color: var(--sub); }
/* ANDA 바로 아래 오른쪽 정렬 태그라인·설명(ZAL 위 문구와 대칭) */
.hx-tag { position: absolute; right: .04em; top: calc(100% + 18px); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; white-space: nowrap; letter-spacing: 0; line-height: 1.45; }
.hx-tag strong { font-size: clamp(16px, 1.4vw, 20px); font-weight: 800; letter-spacing: -.01em; }
.hx-tag span { font-size: clamp(13px, 1.05vw, 16px); font-weight: 400; color: var(--sub); }
@media (min-width: 641px) {
  .hx-word { padding-bottom: calc(var(--fs) * .52); }
  .hx-foot { position: absolute; left: 0; right: 0; bottom: 0; }   /* 버튼은 큰 글자 위치와 상관없이 늘 경계선에 걸친다 */
  .hx-foot > strong, .hx-foot > p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 화면 읽기용으로만 남김 */
}
@media (max-width: 640px) { .hx-tag { display: none; } }
.hx-word { --fs: min(17.6vw, 24.5vh, 300px); margin: 0; display: flex; justify-content: center; align-items: center; font-size: var(--fs); font-weight: 800; letter-spacing: -.055em; line-height: 1; white-space: nowrap; padding: calc(var(--fs) * .34) 0 calc(var(--fs) * .42); }
.hx-side { position: relative; z-index: 1; display: flex; }
/* 글자 하나씩: ㅎ 뒤에서 겹쳐 빠져나오고(translate), 등장 뒤에는 마우스·스크롤에 글자마다 다른 속도로(transform) */
.hx-l { position: relative; display: block; will-change: transform; }
.hx-side[data-side="-1"] .hx-l:nth-child(1) { z-index: 1; } .hx-side[data-side="-1"] .hx-l:nth-child(2) { z-index: 2; } .hx-side[data-side="-1"] .hx-l:nth-child(3) { z-index: 3; }
.hx-side[data-side="1"] .hx-l:nth-child(1) { z-index: 4; } .hx-side[data-side="1"] .hx-l:nth-child(2) { z-index: 3; } .hx-side[data-side="1"] .hx-l:nth-child(3) { z-index: 2; } .hx-side[data-side="1"] .hx-l:nth-child(4) { z-index: 1; }
.hx-obj { position: relative; z-index: 5; flex: none; width: calc(var(--fs) * .78); height: calc(var(--fs) * .8); margin: 0 calc(var(--fs) * -.1); cursor: pointer; }
.hx-obj .piece { position: absolute; left: 50%; top: 50%; width: calc(var(--fs) * 1.38); height: calc(var(--fs) * 2.05); translate: -50% -52%; pointer-events: none; }
.hx-obj .piece svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 calc(var(--fs) * .06) calc(var(--fs) * .07) rgba(160, 50, 60, .18)); }
.z3-float { display: block; width: 100%; height: 100%; animation: z3float 4.2s ease-in-out infinite; }
.hx-foot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
/* 새 소식 띠: 흰 상자, 아래 경계선 한가운데에 걸친다(높이 48px의 절반만큼 아래로) */
.ticker { display: flex; align-items: center; gap: 12px; height: 48px; width: min(600px, calc(100vw - 40px)); margin: 14px 0 -24px; padding: 0 22px 0 8px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px rgba(10,10,10,.08); text-align: left; }
.ticker-tag { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #FFFFFF; background: var(--grad); padding: 6px 11px; border-radius: 999px; }
.ticker-view { flex: 1; min-width: 0; height: 24px; overflow: hidden; }
.ticker-list { list-style: none; margin: 0; padding: 0; will-change: transform; }
.ticker-list li { height: 24px; line-height: 24px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-foot strong { font-size: clamp(16px, 1.5vw, 20px); font-weight: 800; letter-spacing: -.01em; }
.hx-foot p { margin: 0 0 6px; font-size: 16px; color: var(--sub); }
@media (max-height: 860px) and (min-width: 641px) { .hx-foot p { display: none; } }
@media (max-width: 640px) {
  .hx-eyebrow { bottom: calc(100% + var(--fs) * .4 + 4px); font-size: 11px; }   /* 좁은 화면은 ㅎ 모자보다 위로 */
  .hx-foot p br { display: none; }
}

/* 바로가기에 마우스를 올리면: 배경이 플랫폼 대표색(--pm), ZALHANDA 대신 플랫폼 소개(글자색 --pi). 값은 main.js 가 넣는다 */
.hero { transition: background-color .6s var(--ease); }
.hero.plat-on { background-color: var(--pm); }
.hx-word, .hx-foot { transition: opacity .4s, transform .5s var(--ease); }
.hero.plat-on .hx-word, .hero.plat-on .hx-foot { opacity: 0; transform: scale(.97); pointer-events: none; }
.hx-plat { position: absolute; inset: 0 clamp(20px, 6vw, 120px); max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 80px); align-items: center; color: var(--pi); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .35s, transform .5s var(--ease), visibility 0s .35s; }
.hx-plat.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .08s, transform .6s var(--ease) .08s; }
.hx-plat-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hx-plat-text .mono { color: inherit; opacity: .7; }
/* 패널 로고는 흰 바탕 위에 — 대표색과 로고 색이 같아도 묻히지 않게 */
.hx-plat-text .tile3d.is-logo { background: #FFFFFF; border-radius: 20px;   /* % 는 가로로 긴 상자에서 타원이 되므로 고정값 */ box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.hx-plat-text .tile3d.is-logo .tile-logo { inset: 16%; width: 68%; height: 68%; transform: none; }
.hx-plat-text .tile3d.is-logo .tile-floor { display: none; }
.hx-plat .hx-plat-title { margin: 0; font-size: clamp(36px, 4.4vw, 68px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; }
.hx-plat-text > strong { font-size: 22px; letter-spacing: -.02em; }
.hx-plat-text > p { margin: 0; font-size: 16px; line-height: 1.5; opacity: .85; max-width: 34em; }
.hx-plat .tags span { color: inherit; background: transparent; border-color: color-mix(in srgb, var(--pi) 35%, transparent); }
.hx-plat-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.btn-solid { background: var(--pi); color: var(--pm); }
.btn-outline { color: var(--pi); border: 1px solid color-mix(in srgb, var(--pi) 45%, transparent); }
.btn-outline:hover { background: color-mix(in srgb, var(--pi) 12%, transparent); }
.hx-plat .win { box-shadow: 0 40px 80px rgba(0,0,0,.25); transform: perspective(1200px) rotateY(-10deg) rotateX(4deg); }
@media (max-height: 820px) { .hx-plat-text > p { display: none; } }
@media (max-width: 900px) { .hx-plat { display: none; } }   /* 마우스가 없는 화면은 바로가기 링크로만 */
/* 히어로 하단: 플랫폼 바로가기 */
.quick { position: relative; z-index: 2; border-top: 1px solid var(--line); background: linear-gradient(to bottom, rgba(255,255,255,.7), #FFFFFF); backdrop-filter: blur(6px); }
.quick-wrap { position: relative; padding: 26px 64px 8px; }   /* 좌우 100% — 위아래는 .quick-view 안쪽 여백으로(칸이 떠오를 자리) */
.quick-view { overflow: hidden; padding: 14px 0 10px; cursor: grab; touch-action: pan-y; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.quick-view.dragging { cursor: grabbing; }
.quick-view.dragging .quick-item { pointer-events: none; }
.quick-row { display: flex; gap: 8px; width: max-content; will-change: transform; }
.q-nav { position: absolute; top: calc(50% + 11px); translate: 0 -50%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.06); transition: background .2s, transform .2s; }
.q-nav:hover { background: var(--ink); color: #FFFFFF; }
.q-nav.prev { left: 12px; } .q-nav.next { right: 12px; }
.quick-item { flex: 0 0 clamp(150px, calc((100vw - 176px) / 7), 300px); user-select: none; -webkit-user-drag: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 8px 14px; border-radius: 20px; text-decoration: none; transition: background .25s, transform .35s var(--ease), box-shadow .35s; }
.quick-item:hover { background: #FFFFFF; transform: translateY(-10px); box-shadow: 0 16px 34px rgba(10,10,10,.10); }   /* 배경 상자가 위로 떠오른다 */
.quick-item img { -webkit-user-drag: none; pointer-events: none; }
/* 도입 문의 칸: 점선 + 아이콘, 올리면 검게 */
.ask-tile { width: 54px; height: 54px; border-radius: 16px; border: 1.5px dashed #C8C8CE; display: grid; place-items: center; font-size: 28px; font-weight: 300; color: var(--sub); transition: background .25s, color .25s, border-color .25s; }
.quick-ask:hover .ask-tile { background: var(--grad); background-origin: border-box; color: #FFFFFF; border-color: transparent; }
.quick-item strong { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.quick .tile3d { --s: 54px; }
.quick-intro { font-size: 13px; line-height: 1.5; color: var(--sub); }
.quick-item:hover strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 640px) { .quick-wrap { padding: 22px 8px 4px; } .q-nav { display: none; } }

/* 3D 로고 타일(첨부 시안의 유리 질감 아이콘처럼 살짝 눕힌 둥근 판) */
.tile3d { --s: 64px; position: relative; display: inline-block; width: var(--s); height: var(--s); perspective: 500px; flex: none; }
.tile3d.lg { --s: 76px; }
.tile3d.xl { --s: 150px; }
.tile-base, .tile-top { position: absolute; inset: 0; border-radius: 28%; transform: rotateX(28deg) rotateZ(-8deg); transition: transform .45s var(--pop); }
.tile-base { background: var(--c2); filter: brightness(.7); translate: 0 7%; }
.tile-top { display: grid; place-items: center; background: radial-gradient(120% 90% at 25% 15%, rgba(255,255,255,.75), transparent 45%), linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: inset 0 2px 1px rgba(255,255,255,.7), inset 0 -6px 14px rgba(0,0,0,.16); }
.tile-top svg, .tile-top img { width: 56%; height: 56%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.18)); object-fit: contain; }
.tile-floor { position: absolute; left: 10%; right: 10%; bottom: -22%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 45%, transparent), transparent); transition: transform .45s var(--pop), opacity .45s; }
.quick-item:hover .tile-top { transform: rotateX(0) rotateZ(0) translateY(-10%); }
.quick-item:hover .tile-base { transform: rotateX(0) rotateZ(0) translateY(-4%); }
.quick-item:hover .tile-floor { transform: scale(.75); opacity: .6; }
/* 실제 로고: 타일 없이 로고만 띄우고, 올리면 살짝 떠오른다 */
.tile-logo { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--c2) 30%, transparent)); transition: transform .45s var(--pop); }
.tile3d.wide { width: calc(var(--s) * 1.7); }
.tile3d.xwide { width: calc(var(--s) * 2.4); }   /* 글자형 로고처럼 아주 긴 것 */
.quick-item:hover .tile-logo { transform: translateY(-8%) scale(1.04); }

/* ── 브랜드 ── */

/* 태그(첫 화면 플랫폼 소개 패널) */
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tags span { font-size: 13px; padding: 4px 12px; border: 1px solid var(--line); background: #FFFFFF; border-radius: 999px; color: var(--sub); }

/* 샘플 화면(첫 화면 플랫폼 소개 패널의 창) */
.win { background: #FFFFFF; color: var(--ink); border: 1px solid rgba(255,255,255,.4); border-radius: 18px; overflow: hidden; text-align: left; }
.win-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--sub); }
.win-dots { display: inline-flex; gap: 6px; }
.win-dots i { width: 10px; height: 10px; border-radius: 50%; background: #E4E4E7; }
.win-dots i:first-child { background: #FF5F57; } .win-dots i:nth-child(2) { background: #FEBC2E; } .win-dots i:last-child { background: #28C840; }
.win-body { padding: 20px; min-height: 260px; --a: var(--c2); }
.chat { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.chat .me { align-self: flex-end; background: var(--ink); color: #FFFFFF; padding: 10px 14px; border-radius: 16px 16px 4px 16px; max-width: 75%; }
.chat .ai { display: flex; gap: 8px; align-items: flex-end; }
.chat .ai > div { background: #F2F2F4; padding: 10px 14px; border-radius: 16px 16px 16px 4px; max-width: 78%; }
.ai-badge { width: 30px; height: 30px; border-radius: 50%; background: var(--a); color: #FFFFFF; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.chat .chips { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 38px; }
.chat .chips span { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ops .kpi { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.ops .kpi div { font-size: 11px; color: var(--sub); }
.ops .kpi.acc { background: var(--a); color: #FFFFFF; }
.ops .kpi.acc div { color: rgba(255,255,255,.8); }
.ops .kpi b { display: block; font-weight: 800; font-size: 26px; }
.ops .bars { grid-column: span 3; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.ops .bars span { flex: 1; border-radius: 4px 4px 0 0; background: #DADAE0; }
.ops .bars span.acc { background: var(--a); }
.pay { display: flex; flex-direction: column; gap: 12px; }
.pay .card { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #FFFFFF; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.pay .card span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.pay .card b { font-weight: 800; font-size: 32px; }
.pay .methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 13px; text-align: center; }
.pay .methods span { border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.pay .go { background: var(--ink); color: #FFFFFF; border-radius: 12px; padding: 12px; text-align: center; font-weight: 700; }
.sign { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.sign > strong { font-size: 16px; }
.sign .ln { height: 8px; background: #EDEDF0; border-radius: 4px; }
.sign .parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.sign .parties > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px; height: 82px; display: flex; flex-direction: column; justify-content: space-between; }
.sign .parties > div > span { font-size: 11px; color: var(--sub); }
.sign .parties .todo { border: 1.5px dashed var(--a); background: color-mix(in srgb, var(--a) 10%, #FFFFFF); }
/* 샘플: 트렌블(외국인 대상 한국여행·K뷰티 예약) */
.trv { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.trv-tabs { display: flex; gap: 6px; }
.trv-tabs span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.trv-tabs .on { background: var(--c2); border-color: var(--c2); color: #FFFFFF; }
.trv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trv-cards div { display: flex; flex-direction: column; gap: 4px; }
.trv-cards i { display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.trv-cards b { font-size: 12px; }
.trv-cards span { font-size: 11px; color: var(--sub); }
.trv-go { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.trv-go span { font-family: var(--mono); font-size: 11px; color: var(--sub); }
.trv-go em { font-style: normal; font-weight: 700; font-size: 12px; color: #FFFFFF; background: var(--ink); padding: 6px 12px; border-radius: 8px; }
/* 샘플: 랜딩메이커(한 줄 입력 → AI가 만든 랜딩페이지) */
.lmk { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.lmk-ask { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 12px; }
.lmk-ask span { font-size: 11px; color: var(--sub); white-space: nowrap; }
.lmk-ask b { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmk-ask i { font-style: normal; font-weight: 700; background: var(--a); color: var(--ink); padding: 6px 12px; border-radius: 8px; }
.lmk-page { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.lmk-hero { border-radius: 12px; padding: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 45%, #FFFFFF), var(--c1)); display: flex; flex-direction: column; gap: 6px; }
.lmk-hero strong { font-size: 16px; line-height: 1.35; }
.lmk-hero span { font-size: 11px; color: #5A4A00; }
.lmk-hero em, .lmk-form em { font-style: normal; align-self: flex-start; margin-top: 6px; background: var(--ink); color: #FFFFFF; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 8px; }
.lmk-form { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.lmk-form span { height: 26px; border-radius: 6px; background: #F2F2F4; }
.saju { display: flex; flex-direction: column; gap: 12px; }
.saju .who { font-size: 13px; color: var(--sub); }
.saju .pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.saju .pillars > div { display: flex; flex-direction: column; gap: 6px; }
.saju .pillars span { font-size: 11px; color: var(--sub); }
.saju .pillars b { border: 1px solid var(--line); border-radius: 10px; padding: 8px 0; font-size: 22px; font-weight: 700; }
.saju .pillars b.top { font-size: 18px; }
.saju .pillars b.acc { background: var(--a); color: #FFFFFF; border-color: var(--a); }
.saju .today { border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; }

/* ── 하는 일 ── */
.what { background: #FFFFFF; border-top: 1px solid var(--line); }
.what .wrap { max-width: none; padding: 108px clamp(20px, 6vw, 96px) 108px; display: flex; flex-direction: column; gap: 42px; }   /* 가로 100%, 좌우 여백은 머리글의 두 배 */
.sec-head { display: flex; flex-direction: column; gap: 18px; }
.sec-head h2 { margin: 0; font-weight: 800; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -.045em; line-height: 1.25; }
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 2px solid var(--ink); }
.svc > div { padding: 30px 24px 33px 0; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); min-width: 0; }
.svc .no { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; width: fit-content; font-size: 60px; line-height: 1; letter-spacing: -.04em; margin-bottom: 6px; }   /* 번호 크게(모노 12px의 5배) */
.svc strong { font-size: 26px; letter-spacing: -.035em; line-height: 1.2; }
.svc .ko { font-size: 14px; font-weight: 600; color: var(--sub); }
.svc .lead { margin-top: 10px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.4; }   /* 굵은 한 줄 */
.svc p { margin: 0; font-size: 15px; color: var(--sub); }
.svc-cta { width: min(50%, 100%); min-width: min(700px, 100%); align-self: center; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px 18px 28px; border-radius: 20px; background: var(--grad); color: #FFFFFF; box-shadow: 0 18px 40px color-mix(in srgb, var(--acc2) 30%, transparent); }
/* 포인트 그라데이션 상자 — 글자는 흰색, 버튼은 흰 바탕으로 뒤집어 눈에 띄게 */
.svc-cta span { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.svc-cta .btn-ink { background: #FFFFFF; color: var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.svc-cta .btn-ink:hover { background: #FFFFFF; }

/* ── 잘한다의 특징 7가지: 4칸 그리드 — 첫 칸이 두 줄을 차지하고, 나머지 6칸이 3칸씩 두 줄 ── */
.why { background: #FFFFFF; padding: 12px 0 120px; }
.why-in { padding: 0 clamp(20px, 6vw, 96px); display: flex; flex-direction: column; gap: 42px; }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.why-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 30px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.why-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 40px rgba(10,10,10,.08); }
.why-no { font-family: var(--mono); font-size: 13px; font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.why-card strong { font-size: 21px; letter-spacing: -.03em; line-height: 1.3; }
.why-card p { margin: 0; font-size: 15px; color: var(--sub); line-height: 1.55; }
/* 첫 칸: AI 개발 전문 — 포인트 그라데이션 바탕에 크게 */
.why-card.main { grid-row: span 2; justify-content: flex-end; gap: 14px; padding: 36px; color: #FFFFFF; background: radial-gradient(70% 60% at 80% 15%, rgba(255,255,255,.28), transparent 70%), var(--grad); background-origin: border-box; border-color: transparent; box-shadow: 0 24px 50px color-mix(in srgb, var(--acc2) 28%, transparent); }
.why-card.main .why-no { background: none; color: rgba(255,255,255,.85); font-size: 60px; line-height: 1; letter-spacing: -.04em; margin-bottom: auto; }
.why-card.main strong { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.15; }
.why-card.main p { color: rgba(255,255,255,.88); font-size: 16px; }
.why-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.why-tags span { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); }
@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .why-card.main { grid-row: auto; grid-column: span 2; min-height: 300px; } }
@media (max-width: 640px) { .why { padding-bottom: 84px; } .why-grid { grid-template-columns: minmax(0, 1fr); } .why-card.main { grid-column: auto; } }

/* ── 작업(포트폴리오): 좌우 여백은 What we do 와 같게, 카드 띠만 오른쪽 끝까지 ── */
.works { --side: clamp(20px, 6vw, 96px); border-top: 1px solid var(--line); background: var(--bg); padding: 108px 0 120px; }
.works-in { padding: 0 var(--side); }
.works-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.works-head .dim { color: #8C8C96; }   /* 큰 글자 대비 3:1 이상 */
.works-more { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; text-decoration: none; padding: 8px 0; }
.works-more span { font-size: 20px; transition: transform .25s var(--ease); }
.works-more:hover span { transform: translateX(4px); }
/* 굵은 가로선 위에 카테고리 탭 */
.works-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 2px solid var(--ink); padding-top: 24px; }
.works-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.works-tabs button { display: inline-flex; align-items: flex-start; gap: 4px; min-height: 40px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.works-tabs button sup { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--sub); }
.works-tabs button:hover { border-color: #C8C8CE; }
.works-tabs button.on { background: var(--grad); background-origin: border-box; color: #FFFFFF; border-color: transparent; }
.works-tabs button.on sup { color: rgba(255,255,255,.8); }
.works-hint { flex: none; }
/* 세로형 큰 카드 가로 띠 — 끌거나 가로로 넘긴다 */
.works-strip { display: flex; gap: 16px; margin-top: 27px; padding: 0 var(--side) 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--side); scrollbar-width: none; cursor: grab; }
.works-strip::-webkit-scrollbar { display: none; }
.works-strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.works-strip.dragging .wcard { pointer-events: none; }
.wcard { flex: 0 0 clamp(240px, 22vw, 340px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; text-decoration: none; user-select: none; }
.wcard[hidden] { display: none; }
.wcard-img { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; padding: 16px; color: rgba(255,255,255,.75); background: radial-gradient(60% 50% at 30% 30%, rgba(255,255,255,.35), transparent 70%), radial-gradient(90% 80% at 70% 80%, var(--c2), transparent 75%), linear-gradient(160deg, var(--c1), var(--c2)); transition: transform .5s var(--ease); }
.wcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.wcard-img .mono { position: relative; color: inherit; font-size: 11px; }
.wcard-cat { position: absolute; left: 12px; top: 12px; font-size: 11px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.9); backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 999px; }
.wcard:hover .wcard-img { transform: translateY(-4px); }
.wcard:hover .wcard-img img { transform: scale(1.05); }
.wcard strong { margin-top: 8px; font-size: 18px; letter-spacing: -.03em; line-height: 1.35; }
.wcard-res { font-size: 14px; color: var(--sub); }
/* BY THE NUMBERS */
.nums { margin-top: 84px; }
.nums-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.nums-label i { width: 8px; height: 8px; border-radius: 2px; background: var(--grad); }
.nums-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 21px; }
.num { display: flex; flex-direction: column; gap: 6px; }
.num b { font-size: clamp(44px, 5vw, 76px); font-weight: 700; letter-spacing: -.04em; line-height: 1; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.num strong { font-size: 16px; }
.num p { margin: 0; font-size: 14px; color: var(--sub); line-height: 1.45; }
@media (max-width: 900px) { .nums-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 42px; } .works-hint { display: none; } }

/* ══════════ 플랫폼 소개(서브) — /platforms ══════════ */
.gnb a.on { background: rgba(0,0,0,.05); }
.pp { --side: clamp(20px, 6vw, 96px); padding-top: 72px; background: #FFFFFF; }
.pp-in { padding: 0 var(--side); }
.pp-sec { padding: 96px 0; }
.pp-sec .sec-head { margin-bottom: 36px; }
.pp-alt { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* 플랫폼 고르기 띠 — 머리글 아래 붙어 따라온다 */
.pp-pick { position: sticky; top: 72px; z-index: 20; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.pp-pick-in { display: flex; gap: 6px; padding: 10px var(--side); overflow-x: auto; scrollbar-width: none; }
.pp-pick-in::-webkit-scrollbar { display: none; }
.pp-pick-item { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; font-weight: 700; color: var(--sub); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.pp-pick-item:hover { color: var(--ink); background: var(--bg2); }
.pp-pick-item.on { color: var(--ink); background: #FFFFFF; border-color: color-mix(in srgb, var(--c2) 45%, var(--line)); box-shadow: 0 4px 14px color-mix(in srgb, var(--c2) 18%, transparent); }
.pp-pick-logo { min-width: 26px; max-width: 64px; height: 26px; display: grid; place-items: center; }
.pp-pick-logo img { max-width: 64px; max-height: 26px; object-fit: contain; }
/* 히어로 — 대표색 바탕 */
.pp-hero { background: radial-gradient(70% 90% at 85% 20%, color-mix(in srgb, var(--c1) 55%, transparent), transparent 70%), var(--pm); color: var(--pi); overflow: hidden; }
.pp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: 88px var(--side) 96px; }
.pp-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pp-logo { display: grid; place-items: center; min-width: 76px; height: 76px; padding: 12px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.pp-logo img { height: 46px; width: auto; max-width: 200px; object-fit: contain; }
.pp-logo:has(img[src$="trenvl-logo.svg"]), .pp-logo:has(img[src$="tong-logo.png"]) { padding: 12px 20px; }   /* 가로로 긴 로고는 좌우 여백을 넉넉히 */
.pp-hero-text .mono { color: inherit; opacity: .75; }
.pp-hero h1 { margin: 0; text-wrap: balance; font-size: clamp(32px, 3.5vw, 54px); font-weight: 800; letter-spacing: -.045em; line-height: 1.12; }
.pp-hero-text > p { margin: 0; font-size: 17px; line-height: 1.6; opacity: .9; max-width: 34em; }
.pp-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pp-btn-solid { background: var(--pi); color: var(--pm); }
.pp-btn-line { color: var(--pi); border: 1px solid color-mix(in srgb, var(--pi) 45%, transparent); }
.pp-btn-line:hover { background: color-mix(in srgb, var(--pi) 12%, transparent); }
.pp-hero-art .win { box-shadow: 0 40px 80px rgba(0,0,0,.28); transform: perspective(1200px) rotateY(-10deg) rotateX(4deg); }
/* 핵심 숫자 */
.pp-high { padding: 0; border-bottom: 1px solid var(--line); }
.pp-high-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-high-item { display: flex; flex-direction: column; gap: 6px; padding: 36px 24px 36px 0; }
.pp-high-item + .pp-high-item { border-left: 1px solid var(--line); padding-left: 28px; }
.pp-high-item b { font-size: clamp(32px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.pp-high-item span { font-size: 15px; color: var(--sub); }
/* 주요 기능 */
.pp-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-feat-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.pp-feat-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10,10,10,.07); }
.pp-feat-no { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--c2); }
.pp-feat-card strong { font-size: 20px; letter-spacing: -.03em; line-height: 1.3; }
.pp-feat-card p { margin: 0; font-size: 15px; color: var(--sub); line-height: 1.55; }
.pp-soon { margin: 24px 0 0; padding: 18px 22px; border-radius: 14px; border: 1px dashed #CFCFD6; color: var(--sub); font-size: 15px; }
.pp-soon .mono { color: var(--c2); font-weight: 600; margin-right: 8px; }
/* 사용 순서 */
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; counter-reset: s; }
.pp-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 20px; background: #FFFFFF; border: 1px solid var(--line); }
.pp-step-no { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #FFFFFF; background: var(--pm); padding: 5px 10px; border-radius: 999px; width: fit-content; }
.pp-steps strong { margin-top: 6px; font-size: 20px; letter-spacing: -.03em; }
.pp-steps p { margin: 0; font-size: 15px; color: var(--sub); line-height: 1.55; }
/* 요금 */
.pp-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pp-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 20px; background: #FFFFFF; border: 1px solid var(--line); }
.pp-plan.pick { border: 2px solid var(--pm); box-shadow: 0 20px 44px color-mix(in srgb, var(--pm) 20%, transparent); }
.pp-plan-tag { position: absolute; top: -12px; left: 24px; font-size: 12px; font-weight: 700; color: #FFFFFF; background: var(--pm); padding: 4px 12px; border-radius: 999px; }
.pp-plan > strong { font-size: 18px; }
.pp-plan-price { display: flex; align-items: baseline; gap: 4px; }
.pp-plan-price b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; }
.pp-plan-price span { font-size: 14px; color: var(--sub); }
.pp-plan > p { margin: 0; font-size: 14px; color: var(--sub); }
.pp-plan ul { margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pp-plan li { position: relative; padding-left: 20px; }
.pp-plan li::before { content: '✓'; position: absolute; left: 0; color: var(--pm); font-weight: 700; }
.pp-note { margin: 18px 0 0; font-size: 13px; color: var(--sub); }
/* 자주 묻는 질문 */
.pp-faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.pp-faq { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.pp-faq details { border-bottom: 1px solid var(--line); }
.pp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 4px; font-size: 17px; font-weight: 700; }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: '+'; font-size: 22px; font-weight: 400; line-height: 1; transition: transform .25s; }
.pp-faq details[open] summary::after { transform: rotate(45deg); }
.pp-faq details p { margin: 0; padding: 0 4px 22px; font-size: 15px; color: var(--sub); line-height: 1.65; }
/* 다른 플랫폼 */
.pp-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-more-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: #FFFFFF; text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.pp-more-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c2) 40%, var(--line)); box-shadow: 0 18px 40px color-mix(in srgb, var(--c2) 14%, transparent); }
.pp-more-card strong { margin-top: 8px; font-size: 19px; }
.pp-more-card span { font-size: 14px; color: var(--sub); }
.pp-more-card em { margin-top: auto; padding-top: 8px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--c2); }
/* 문의 띠 */
.pp-cta { padding: 0 0 96px; }
.pp-cta-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 36px 40px; margin: 0 var(--side); border-radius: 24px; color: #FFFFFF; background: radial-gradient(70% 90% at 85% 10%, rgba(255,255,255,.25), transparent 70%), var(--pm); }
.pp-cta-in > div { display: flex; flex-direction: column; gap: 6px; }
.pp-cta-in strong { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.03em; }
.pp-cta-in span { opacity: .85; }
.pp-cta .btn-white { color: var(--ink); }
@media (max-width: 1100px) { .pp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-feat, .pp-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .pp-hero-in { grid-template-columns: minmax(0, 1fr); padding-top: 56px; padding-bottom: 64px; }
  .pp-hero-art .win { transform: none; }
  .pp-high-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-high-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .pp-faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 640px) {
  .pp-sec { padding: 64px 0; }
  .pp-feat, .pp-more, .pp-plans { grid-template-columns: minmax(0, 1fr); }
  .pp-cta-in { padding: 28px 24px; }
}
/* ══════════ 문서(개인정보처리방침) ══════════ */
.doc { padding: 140px 0 120px; background: #FFFFFF; }
.doc-in { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.doc h1 { margin: 10px 0 18px; font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.04em; }
.doc-lead { font-size: 17px; color: var(--sub); }
.doc h2 { margin: 40px 0 10px; font-size: 20px; letter-spacing: -.02em; }
.doc p, .doc li { font-size: 16px; line-height: 1.7; color: #3A3A40; }
.doc ul { padding-left: 20px; }
.doc a { color: var(--acc2); }
.doc-date { margin-top: 40px; font-size: 14px; color: var(--sub); }
/* ══════════ 접근성 공통 ══════════ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #FFFFFF; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
#main { outline: none; }
:focus-visible { outline: 2px solid var(--acc2); outline-offset: 3px; border-radius: 8px; }
.btn:focus-visible, .works-tabs button:focus-visible { outline-offset: 3px; border-radius: 999px; }
button { font: inherit; }

/* ══════════ 좁은 화면 메뉴 ══════════ */
.gnb-ask { display: none; }
.gh-menu { display: none; position: relative; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; cursor: pointer; }
.gh-menu i { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s var(--ease), top .25s var(--ease); }
.gh-menu i:first-child { top: 17px; } .gh-menu i:last-child { top: 25px; }
.gh.menu-open .gh-menu i:first-child { top: 21px; transform: rotate(45deg); }
.gh.menu-open .gh-menu i:last-child { top: 21px; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .gh-menu { display: block; }
  .gh.menu-open { background: #FFFFFF; border-color: var(--line); }
  .gh.menu-open .gnb { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px clamp(20px, 3vw, 48px) 20px; background: #FFFFFF; border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(0,0,0,.08); }
  .gh.menu-open .gnb a, .gh.menu-open .gnb-ask { display: flex; align-items: center; min-height: 52px; padding: 0 4px; border-radius: 0; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--line); background: none; }
  .gh.menu-open .gnb-ask { justify-content: center; margin-top: 16px; border: 0; border-radius: 999px; background: var(--grad); color: #FFFFFF; font-weight: 700; font-size: 16px; cursor: pointer; }
  .gh.dark.menu-open .gnb a { color: var(--ink); }
}

/* ══════════ 문의 딤 레이어(<dialog>) ══════════ */
html.ask-open { overflow: hidden; }
.ask { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 24px; background: #FFFFFF; color: var(--ink); box-shadow: 0 40px 100px rgba(0,0,0,.35); overflow: auto; font-family: var(--sans); }
.ask::backdrop { background: rgba(10,10,14,.62); backdrop-filter: blur(4px); }
.ask[open] { animation: askIn .35s var(--ease); }
@keyframes askIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.ask-box { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 32px; }
.ask-head { display: flex; justify-content: space-between; gap: 16px; }
.ask-head h2 { margin: 6px 0 6px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.035em; }
.ask-head p { margin: 0; font-size: 14px; color: var(--sub); }
.ask-x { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; font-size: 24px; line-height: 1; cursor: pointer; }
.ask-x:hover { background: var(--bg2); }
.ask-type { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 4px; border: 0; border-radius: 14px; background: var(--bg2); }
.ask-type label { position: relative; }
.ask-type input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ask-type span { display: flex; justify-content: center; align-items: center; min-height: 44px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--sub); transition: background .2s, color .2s; }
.ask-type input:checked + span { background: #FFFFFF; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ask-type input:focus-visible + span { outline: 2px solid var(--acc2); outline-offset: 2px; }
.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ask-f { display: flex; flex-direction: column; gap: 6px; }
.ask-f.wide { grid-column: 1 / -1; }
.ask-f > span { font-size: 13px; font-weight: 700; }
.ask-f b { color: var(--acc2); }
.ask-f input, .ask-f select, .ask-f textarea { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid #DCDCE2; border-radius: 12px; background: #FFFFFF; color: var(--ink); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.ask-f textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.ask-f input:focus, .ask-f select:focus, .ask-f textarea:focus { outline: none; border-color: var(--acc2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc2) 18%, transparent); }
.ask-f [aria-invalid="true"] { border-color: #D92D20; }
.ask em[data-err] { font-style: normal; font-size: 13px; color: #B42318; min-height: 0; }
.ask em[data-err]:empty { display: none; }
.ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ask-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.ask-agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--acc2); }
.ask-agree small { display: block; margin-top: 2px; font-size: 12px; color: var(--sub); }
.ask-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.ask-msg { margin: 0; font-size: 14px; color: #B42318; }
.ask-send { min-width: 180px; background: var(--grad); background-origin: border-box; color: #FFFFFF; box-shadow: 0 10px 24px color-mix(in srgb, var(--acc2) 30%, transparent); margin-left: auto; }
.ask-send:disabled { opacity: .6; cursor: wait; }
.ask-box.sent > :not(.ask-done) { visibility: hidden; }
.ask-done { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 32px; text-align: center; background: #FFFFFF; border-radius: 24px; }
.ask-done[hidden] { display: none; }
.ask-done-ic { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; font-size: 30px; color: #FFFFFF; background: var(--grad); margin-bottom: 6px; }
.ask-done h3 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.ask-done p { margin: 0 0 12px; color: var(--sub); }
@media (max-width: 640px) {
  .ask { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .ask-box { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
  .ask-grid { grid-template-columns: 1fr; }
  .ask-send { width: 100%; }
}
/* 바닥글 메뉴 버튼 */
.foot-links button { background: none; border: 0; padding: 0; color: #D4D4D8; cursor: pointer; min-height: 44px; font-size: 13px; }
.foot-links button:hover { color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .ask[open] { animation: none; } }
/* ── 문의 ── */
.contact { background: #0A0A0A; color: #FFFFFF; position: relative; overflow: hidden; }
.contact::before { content: ''; position: absolute; left: 50%; top: 60%; width: 900px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255,90,31,.35), rgba(140,107,255,.18) 55%, transparent); filter: blur(30px); }
.contact-in { position: relative; max-width: 900px; margin: 0 auto; padding: 165px 24px 108px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; }
.contact h2 { margin: 0; font-weight: 800; font-size: clamp(44px, 6vw, 88px); letter-spacing: -.05em; line-height: 1.1; }
/* ㅈㅎㄷ ↔ 잘한다 — 글자 카드가 차례로 옆(Y축)으로 뒤집힌다 */
.flip-logo { --h: clamp(120px, 15vw, 190px); display: flex; justify-content: center; margin: 0 0 4px; filter: drop-shadow(0 18px 40px rgba(255,90,31,.35)); }
.flip { display: block; height: var(--h); perspective: 700px; }
.flip:nth-child(1) { width: calc(var(--h) * 100 / 155); }
.flip:nth-child(2) { width: calc(var(--h) * 96 / 155); }
.flip:nth-child(3) { width: calc(var(--h) * 92 / 155); }
.flip-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.flip-front, .flip-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-front { width: 100%; height: 100%; display: block; }
.flip-back { transform: rotateY(180deg); display: grid; place-items: center; font-weight: 800; font-size: calc(var(--h) * .56); line-height: 1; letter-spacing: -.04em; padding-bottom: calc(var(--h) * .12); }
@keyframes flip { 0%, 8% { transform: rotateY(0); } 20%, 56% { transform: rotateY(180deg); } 68%, 100% { transform: rotateY(360deg); } }
.contact-in.in .flip-in { animation: flip 6s cubic-bezier(.5, 0, .2, 1.15) infinite; }
.contact-in.in .flip:nth-child(2) .flip-in { animation-delay: .25s; }
.contact-in.in .flip:nth-child(3) .flip-in { animation-delay: .5s; }
.contact p { margin: 0; font-size: 17px; color: rgba(255,255,255,.7); }

/* ── 바닥글 ── */
.foot { background: #0A0A0A; color: #8A8A90; border-top: 1px solid rgba(255,255,255,.08); }
.foot .wrap { max-width: none; padding-left: clamp(20px, 3vw, 48px); padding-right: clamp(20px, 3vw, 48px); padding-top: 42px; padding-bottom: 48px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; line-height: 1.6; }
.foot-info { display: flex; flex-direction: column; }
.foot-logo { display: block; width: 72px; height: auto; margin-bottom: 8px; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; height: fit-content; }
.foot-links a { color: #D4D4D8; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot-links a:hover { color: #FFFFFF; }

/* 스크롤 등장 */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .z3-float { animation: none !important; }
  .flip-in { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 640px) {

    .what .wrap { padding-top: 84px; padding-bottom: 84px; } .works { padding: 84px 0; } .nums { margin-top: 66px; }
  .svc-cta { padding: 22px; }
}
.hx-plat-domain { align-self: center; opacity: .7; color: inherit; text-decoration: none; }
a.hx-plat-domain:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }