/* KUMP 랜딩페이지 스타일 (taste-skill: one motif)
   아이디어: 로고 U 안의 네 갈래 반짝임(별 모양)이 곧 쿰피의 몸이다. 이 모양 하나가 크기만 바꿔 가며 페이지 전체를 이끈다.
   히어로의 거대한 면, 사진을 오려내는 틀, 글머리, 스크롤바 손잡이(쿰피), 푸터의 큰 로고.
   색: 바탕 하나, 잉크 하나, 강조 하나(로고의 블루). 면은 선이나 그림자 없이 톤 차이로만 나눈다.
   글꼴: 앱과 같은 Pretendard 하나. */

@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: url('../fonts/pretendard-400.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: url('../fonts/pretendard-700.woff2') format('woff2'); }
@font-face { font-family: 'Jua'; font-weight: 400; font-display: swap; src: url('../fonts/jua-400.woff2') format('woff2'); }

:root {
  --ground: #F3F5F9;
  --tint: #E6ECF6;
  --tint-2: #D5DEEF;
  --ink: #14213D;
  --ink-2: #2B3754;
  --muted: #55607A;
  --accent: #2563EB;
  --accent-dark: #1B4FC4;
  --on-navy: #F3F5F9;
  --on-navy-2: #C9D3E8;
  --navy-2: #1E2D52;
  --gold: #F6C723;
  --white: #FFFFFF;

  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-app: var(--font);

  /* 글자 크기 다섯 단계 + 문장용 하나 */
  --fs-display: clamp(40px, 5.6vw, 92px);
  --fs-h2: clamp(28px, 3.7vw, 56px);
  --fs-statement: clamp(24px, 2.5vw, 36px);
  --fs-lead: clamp(18px, 1.5vw, 22px);
  --fs-body: 17px;
  --fs-small: 14px;

  --m: clamp(16px, 3.2vw, 46px);          /* 바깥 여백: 좌우 같다 */
  --gap-section: clamp(64px, 8.4vw, 120px);
  --header-h: 68px;
  --r: 20px;
  color-scheme: light;
}
.font-latin { --fs-display: clamp(34px, 4.9vw, 80px); }
.font-ja { --fs-display: clamp(30px, 4.9vw, 80px); }
.font-zh { --font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', 'Pretendard', -apple-system, 'Segoe UI', sans-serif; }
.font-ja { --font: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Noto Sans JP', 'Noto Sans CJK JP', 'IPAGothic', Meiryo, 'Pretendard', -apple-system, 'Segoe UI', sans-serif; }
.font-ko { --font-app: 'Jua', var(--font); }
@media (max-width: 599px) { :root { --header-h: 60px; } }

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.font-zh body, .font-ja body, .font-latin body { word-break: normal; }
.font-ja body { line-break: strict; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul, ol { margin: 0; padding: 0; }
[role='list'] { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.field--navy :focus-visible, .field--accent :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }
::selection { background: var(--accent); color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; padding-inline: var(--m); margin-inline: auto; }
.icon { width: 1.2em; height: 1.2em; flex: none; }
.sparkle { width: 1em; height: 1em; fill: currentColor; flex: none; }
.muted { color: var(--muted); }

/* ---------- 타이포 ---------- */
.display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.04em; font-weight: 700; }
.h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.035em; font-weight: 700; }
.h3 { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.015em; font-weight: 700; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 34em; }
.statement { font-size: var(--fs-statement); line-height: 1.3; letter-spacing: -.025em; font-weight: 700; max-width: 30em; margin: 0; }
.small { font-size: var(--fs-small); }
.note { font-size: var(--fs-small); color: var(--muted); max-width: 52em; }
.field--navy .note { color: var(--on-navy-2); }

/* ---------- 면(섹션) ---------- */
.field { position: relative; padding-block: var(--gap-section); overflow-x: clip; }
.field--ground { background: var(--ground); }
.field--tint { background: var(--tint); }
.field--navy { background: var(--ink); color: var(--on-navy); }
.field--accent { background: var(--accent); color: var(--white); }
.field--navy .lead, .field--accent .lead { color: var(--on-navy); }
.split { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .split--flip > :first-child { order: 2; }
}
.copy > * + * { margin-top: 1.1rem; }
.copy p, .faq__a p, .agency p, .download__copy p { max-width: 62ch; }
.copy > .h2 + * { margin-top: 1.5rem; }
.stage { position: relative; display: grid; place-items: center; min-height: 420px; }
.hero__star, .stage__star { max-width: none; }
.stage__star { position: absolute; left: 50%; top: 50%; width: min(150%, 760px); aspect-ratio: 1; transform: translate(-50%, -50%); fill: var(--tint-2); }
.field--navy .stage__star { fill: var(--accent); }
.field--accent .stage__star { fill: var(--accent-dark); }
.field--tint .stage__star { fill: var(--tint-2); }
.field--tint .stage__star--ground { fill: var(--ground); }
@media (max-width: 959px) { .stage__star { width: min(120%, 560px); } }

/* ---------- 버튼, 링크 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: .75em 1.6em; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-weight: 700; font-size: var(--fs-body); text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, transform .15s;
}
.btn:hover { background: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.1em; height: 1.1em; transition: transform .2s; }
.btn:hover .icon { transform: translateX(3px); }
.btn--sm { min-height: 42px; padding: .45em 1.2em; font-size: var(--fs-small); }
.field--navy .btn, .field--accent .btn { background: var(--white); color: var(--ink); }
.field--navy .btn:hover, .field--accent .btn:hover { background: var(--gold); color: var(--ink); }
.link { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; text-decoration: none; padding-block: 6px; }
.link .icon { width: 1.05em; height: 1.05em; transition: transform .2s; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link:hover .icon { transform: translateX(3px); }


/* ---------- 헤더 ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ground); }
.site-header__inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); padding-inline: var(--m); }
.logo { width: auto; height: 28px; }
.logo .logo-ink { stroke: var(--ink); }
.logo .logo-spark { fill: var(--accent); }
.logo--reversed .logo-ink { stroke: var(--on-navy); }
.logo--reversed .logo-spark { fill: var(--gold); }
.site-header__logo { display: block; flex: none; border-radius: 8px; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 2px; }
.site-nav a { display: block; padding: .55em .85em; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: var(--fs-small); }
.site-nav a:hover { background: var(--tint); }
.site-header__actions { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }
@media (max-width: 959px) {
  .nav-toggle { display: inline-flex; }
  .site-header__actions { margin-left: auto; }
  .site-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--tint); padding: 8px var(--m) 24px; display: none; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { padding: .8em .4em; font-size: var(--fs-lead); }
  .no-js .site-nav { position: static; display: block; padding: 0; background: none; }
}
@media (max-width: 479px) { .site-header__cta { display: none; } }

.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: 999px; list-style: none; cursor: pointer; font-weight: 700; font-size: var(--fs-small); background: var(--tint); }
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn .icon { width: 18px; height: 18px; }
.lang__chev { transition: transform .2s; }
.lang[open] .lang__chev { transform: rotate(180deg); }
.lang__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 180px; padding: 6px; border-radius: 16px; background: var(--tint-2); }
.lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .65em .85em; border-radius: 10px; text-decoration: none; font-weight: 700; }
.lang__menu a:hover { background: var(--white); }
.lang__menu a[aria-current] { color: var(--accent-dark); }
.lang__menu .icon { width: 18px; height: 18px; }
@media (max-width: 380px) { .lang__btn span { display: none; } }

/* ---------- 앱 화면 조각 둘레 ---------- */
.ui-wrap { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; width: min(var(--uw, 320px), 100%); }
.field--accent .note { color: var(--white); }
[data-ui].ui {
  position: relative; width: 100%; aspect-ratio: 9 / 16; margin: 0;
  border: 7px solid var(--ink); border-radius: 34px; background: var(--ground);
  overflow: hidden; user-select: none; font-family: var(--font-app);
}
[data-ui].ui--tall { aspect-ratio: 9 / 16.5; }
[data-ui].ui--mid { aspect-ratio: 9 / 14.5; }
[data-ui].ui--short { aspect-ratio: 9 / 12.5; }
[data-ui] .ui__screen { position: absolute; inset: 0; overflow: hidden; padding-top: 5cqi; font-size: 3.9cqi; line-height: 1.4; color: var(--ink); }

/* ---------- 사진을 오려내는 틀 ---------- */
.kstar { clip-path: url(#kstar); }
.photo { position: relative; aspect-ratio: 1; width: 100%; overflow: hidden; background: var(--tint-2); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo--slides img { opacity: 0; transition: opacity 1.6s ease; }
.photo--slides img.is-on, .no-js .photo--slides img:first-child { opacity: 1; }
.thumb { display: inline-block; width: 1.25em; height: 1.1em; vertical-align: -.08em; margin-inline: .12em; overflow: hidden; clip-path: url(#kstar); background: var(--tint-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 히어로 ---------- */
.hero { overflow: hidden; background: var(--ground); }
.hero__grid { display: grid; gap: 32px; align-items: center; min-height: min(calc(100svh - var(--header-h)), 860px); padding-block: clamp(32px, 4vw, 64px); }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); } }
.hero .display { margin: 0 0 1.4rem; }
.hero .lead { margin-bottom: 2rem; max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-bottom: 1.5rem; }
.hero__note { font-size: var(--fs-small); color: var(--muted); }
.hero__stage { position: relative; display: grid; place-items: center; min-height: 460px; }
.hero__star { position: absolute; left: 50%; top: 50%; width: clamp(600px, 84vh, 880px); aspect-ratio: 1; transform: translate(-50%, -50%); fill: var(--accent); }
.hero__stage .ui-wrap { --uw: 300px; }
.hero__kumpy { position: absolute; left: -2%; bottom: 6%; width: clamp(90px, 9vw, 140px); height: auto; z-index: 2; }
@media (max-width: 959px) {
  .hero__stage { min-height: 400px; margin-right: calc(var(--m) * -1); }
  .hero__star { width: 520px; }
  .hero__kumpy { left: 4%; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__kumpy { animation: bob 5s ease-in-out infinite; }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
}


/* ---------- 고민 ---------- */
.intro .statement { margin-bottom: clamp(40px, 5vw, 72px); }
.worries { display: grid; gap: 6px; }
.worry {
  display: grid; gap: 4px 24px; align-items: center; padding: 18px 24px;
  border-radius: 16px; background: var(--tint);
  text-decoration: none; transition: background-color .2s, transform .2s;
}
.worry:hover { background: var(--tint-2); transform: translateX(4px); }
.worry__q { margin: 0; font-weight: 700; font-size: var(--fs-lead); line-height: 1.35; }
.worry__a { display: inline-flex; align-items: center; gap: .5em; color: var(--accent-dark); font-weight: 700; }
.worry__a .icon { width: 1.05em; height: 1.05em; }
@media (min-width: 820px) { .worry { grid-template-columns: 1fr 1fr; min-height: 68px; } }

/* ---------- 추천 (live) ---------- */
.stepper { list-style: none; display: grid; gap: 6px; margin: 2rem 0 1.6rem; }
.stepper button { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; padding: 14px 20px; border: 0; border-radius: 16px; cursor: pointer; background: var(--navy-2); color: var(--on-navy); transition: background-color .2s; }
.stepper button:hover { background: #2A3C68; }
.stepper button[aria-selected='true'] { background: var(--white); color: var(--ink); }
.stepper b { display: block; font-size: var(--fs-lead); }
.stepper small { display: block; font-size: var(--fs-small); color: inherit; }
.stepper .sparkle { width: 22px; height: 22px; color: var(--accent); opacity: .0; transition: opacity .2s; }
.stepper button[aria-selected='true'] .sparkle { opacity: 1; }
.stepper button:not([aria-selected='true']) .sparkle { color: var(--on-navy-2); opacity: .5; }
.points { display: grid; gap: 8px; }
.points li { display: flex; gap: .65em; align-items: flex-start; }
.points .sparkle { width: .8em; height: .8em; margin-top: .55em; color: var(--gold); }
.m-stack { position: relative; height: 100%; }

/* ---------- 대학 정보 ---------- */
.unis .h2 { max-width: 14em; margin-bottom: clamp(32px, 4vw, 56px); }
.fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.4rem; }
.fields li { padding: .35em .9em; border-radius: 999px; background: var(--tint); font-size: var(--fs-small); font-weight: 700; }
.trust { display: grid; gap: 20px; margin-top: 2rem; }
.trust li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.trust .sparkle { width: 18px; height: 18px; margin-top: .3em; color: var(--accent); }
.trust b { display: block; }
.trust p { margin: 2px 0 0; }
.unis__art { position: relative; display: grid; place-items: center; }
.unis__art .photo { width: min(100%, 620px); }
.unis__art .ui-wrap { position: absolute; left: 0; bottom: -8%; --uw: 230px; }
@media (max-width: 959px) { .unis__art .ui-wrap { position: relative; left: auto; bottom: auto; margin-top: -60px; } }

/* ---------- 입학 지원 ---------- */
.rows { display: grid; gap: 6px; margin-top: 1.8rem; }
.row { display: grid; gap: 4px 20px; padding: 18px 24px; border-radius: 16px; background: var(--ground); }
.row b { font-size: var(--fs-lead); line-height: 1.3; }
.row p { margin: 2px 0 0; }

/* ---------- 입학 후 ---------- */
.life__cols { display: grid; gap: 40px; margin-top: 2rem; }
@media (min-width: 700px) { .life__cols { grid-template-columns: 1fr 1fr; } }
.life__cols h3 { margin-bottom: .6rem; }
.life__cols ul { display: grid; gap: 10px; margin-top: 1rem; }
.life__cols li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.life__art { position: relative; display: grid; gap: 16px; }
.life__art .photo { width: min(100%, 560px); justify-self: center; }
.life__art .photo--small { width: min(46%, 240px); justify-self: end; margin-top: -24%; position: relative; }

/* ---------- 커뮤니티 ---------- */
.feature-list { display: grid; gap: 14px 40px; margin-top: 2rem; }
@media (min-width: 700px) { .feature-list { grid-template-columns: 1fr 1fr; } }
.feature-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.feature-list .sparkle { width: 18px; height: 18px; margin-top: .35em; color: var(--gold); }
.feature-list b { display: block; }
.feature-list span { color: var(--on-navy); }
.quote { margin: 2rem 0 0; }
.quote p { font-size: var(--fs-lead); line-height: 1.4; font-weight: 700; margin: 0; max-width: 28em; }
.community__art { position: relative; display: grid; place-items: center; }
.community__art .photo { width: min(100%, 560px); }
.community__art .ui-wrap { position: absolute; right: 0; bottom: -6%; --uw: 250px; }
@media (max-width: 959px) { .community__art .ui-wrap { position: relative; right: auto; bottom: auto; margin-top: -70px; } }

/* ---------- 강의 ---------- */
.lectures .h2 { margin-bottom: 1.2rem; }
.topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.4rem; }
.topics li { padding: .35em .9em; border-radius: 999px; background: var(--tint); font-size: var(--fs-small); font-weight: 700; }
.index { display: grid; gap: 2px; margin-top: 2.2rem; }
.index button {
  display: flex; align-items: center; gap: .55em; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 6px 0;
  font-size: var(--fs-statement); line-height: 1.2; letter-spacing: -.03em; font-weight: 700; color: var(--muted); transition: color .2s;
}
.index button:hover { color: var(--ink); }
.index button[aria-pressed='true'] { color: var(--ink); }
.index .sparkle { width: .5em; height: .5em; color: var(--accent); opacity: 0; transition: opacity .2s; }
.index button[aria-pressed='true'] .sparkle { opacity: 1; }
.index__stage { margin-top: 1.4rem; min-height: 8.5em; max-width: 34em; }
.index__item { display: none; }
.index__item.is-on, .no-js .index__item { display: block; }
.no-js .index__item + .index__item { margin-top: 1.2rem; }
.tag { display: inline-block; margin-bottom: .6rem; padding: .25em .85em; border-radius: 999px; font-size: var(--fs-small); font-weight: 700; background: var(--ink); color: var(--white); }
.tag--paid { background: var(--gold); color: var(--ink); }
.lectures__art .ui-wrap { --uw: 290px; }

/* ---------- 상담 ---------- */
.counsel__cols { display: grid; gap: 8px; margin-top: 2rem; }
@media (min-width: 700px) { .counsel__cols { grid-template-columns: 1fr 1fr; } }
.panel { padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r); background: var(--ground); }
.panel--ink { background: var(--ink); color: var(--on-navy); }
.panel .h3 { margin-bottom: .6rem; }
.panel p { margin-bottom: 1rem; }
.ticks { display: grid; gap: 6px; }
.ticks li { display: flex; gap: .6em; align-items: flex-start; }
.ticks .icon { width: 1.05em; height: 1.05em; margin-top: .3em; color: var(--accent); }
.panel--ink .ticks .icon { color: var(--gold); }

/* ---------- KUMP Pass ---------- */
.pass__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .pass__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.pass .h2 { margin-bottom: 1.4rem; }
.pass__list { display: grid; gap: 8px; margin: 1.6rem 0; font-size: var(--fs-lead); font-weight: 700; }
.pass__list li { display: flex; gap: .6em; align-items: flex-start; }
.pass__list .sparkle { width: .8em; height: .8em; margin-top: .5em; color: var(--gold); }
.pass__price { margin-top: 1.4rem; padding: 14px 20px; border-radius: 16px; background: var(--navy-2); font-weight: 700; }
.pass__kumpy { width: min(100%, 340px); height: auto; justify-self: center; }
.agency { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 40px); border-radius: var(--r); background: var(--navy-2); display: grid; gap: 12px; max-width: 980px; }
.agency .h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.agency p { max-width: 46em; }
.agency__price { font-size: var(--fs-lead); font-weight: 700; color: var(--gold); }

/* ---------- 이용 방법 ---------- */
.how__head { margin-bottom: clamp(32px, 4vw, 56px); }
.steps { display: grid; gap: 0; }
.steps li { padding: 28px var(--m); }
.steps p { min-height: 4.8em; }
.steps li:nth-child(odd) { background: var(--tint-2); }
.steps li:nth-child(even) { background: var(--tint); }
.steps .h3 { margin-bottom: .5rem; }
.how { padding-bottom: 0; }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(5, 1fr); min-height: 300px; }
  .steps li { padding: 36px clamp(16px, 1.8vw, 28px) 48px; display: flex; flex-direction: column; gap: 0; }
  .steps .h3 { margin-top: auto; }
}
.steps li::before { content: ''; display: block; width: 28px; height: 28px; margin-bottom: 14px; background: var(--accent); clip-path: url(#kstar); }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 64px; align-items: start; } .faq__head { position: sticky; top: calc(var(--header-h) + 28px); } }
.faq__list { display: grid; gap: 8px; }
.faq__item { border-radius: 16px; background: var(--tint); transition: background-color .2s; }
.faq__item[open] { background: var(--accent); color: var(--white); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; min-height: 72px; cursor: pointer; list-style: none; font-weight: 700; font-size: var(--fs-lead); line-height: 1.35; border-radius: 16px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { flex: none; transition: transform .25s; }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__a { padding: 0 24px 24px; max-width: 52em; }
.faq__item:not([open]):hover { background: var(--tint-2); }

/* ---------- 다운로드 ---------- */
.download__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .download__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.download .h2 { font-size: clamp(34px, 4.7vw, 76px); line-height: 1.02; letter-spacing: -.045em; margin-bottom: 1.4rem; }
.font-latin .download .h2 { font-size: clamp(30px, 4vw, 64px); }
.download__copy p { max-width: 28em; }
.dialog { padding: clamp(24px, 3vw, 40px); border-radius: var(--r); background: var(--white); color: var(--ink); display: grid; gap: 22px; }
.dialog > p { margin: 0; }
.stores { display: grid; gap: 10px; }
.store { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 20px; border-radius: 16px; background: var(--ink); color: var(--white); text-decoration: none; position: relative; transition: background-color .2s; }
a.store:hover { background: var(--accent); }
.store__icon { width: 28px; height: 28px; }
.store__txt small { display: block; font-size: var(--fs-small); opacity: .85; line-height: 1.2; }
.store__txt b { display: block; font-size: var(--fs-lead); line-height: 1.2; }
.store--soon { background: var(--tint); color: var(--ink); cursor: not-allowed; }
.store__soon { margin-left: auto; font-size: var(--fs-small); font-weight: 700; color: var(--accent-dark); }
.qr { display: flex; align-items: center; gap: 16px; }
.qr__code { flex: none; width: 96px; height: 96px; padding: 8px; border-radius: 14px; background: var(--tint); color: var(--ink); display: grid; place-items: center; }
.qr__code svg { width: 100%; height: 100%; }
.qr--soon .qr__code .icon { width: 44px; height: 44px; color: var(--muted); }
.qr p { margin: 0; font-size: var(--fs-small); color: var(--muted); }

/* ---------- 푸터 ---------- */
.site-footer { background: var(--ink); color: var(--on-navy); padding-block: clamp(56px, 7vw, 96px) 32px; font-size: var(--fs-small); }
.site-footer a { color: var(--on-navy); text-decoration: none; display: inline-flex; align-items: center; gap: .4em; padding-block: 3px; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mark { display: flex; gap: 4px; align-items: flex-end; height: clamp(150px, 26vw, 360px); margin-bottom: clamp(40px, 5vw, 72px); }
.mark span { flex: 1; display: grid; place-items: center; border-radius: 6px; font-size: clamp(80px, 17vw, 260px); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--ink); padding-bottom: .04em; }
.mark span:nth-child(1) { background: var(--accent); height: 78%; color: var(--white); }
.mark span:nth-child(2) { background: var(--on-navy); height: 100%; }
.mark span:nth-child(3) { background: var(--tint-2); height: 88%; }
.mark span:nth-child(4) { background: var(--gold); height: 70%; }
.footer__grid { display: grid; gap: 32px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer__about { max-width: 24em; }
.footer__about .motto { display: inline-flex; align-items: center; gap: .5em; margin-top: 12px; font-weight: 700; color: var(--gold); }
.footer__h { margin: 0 0 10px; font-size: var(--fs-body); font-weight: 700; color: var(--white); }
.footer__grid ul { display: grid; gap: 4px; margin-bottom: 18px; }
.footer__label { display: block; color: var(--on-navy-2); }
.footer__social { display: flex !important; flex-wrap: wrap; gap: 6px 14px !important; }
.footer__notice { margin-top: 6px; padding: 16px 18px; border-radius: 14px; background: var(--navy-2); font-size: var(--fs-small); line-height: 1.55; }
.site-footer .muted { color: var(--on-navy-2); }
.footer__bottom { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: var(--fs-small); color: var(--on-navy-2); }
.footer__company dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.footer__company div { display: flex; gap: .4em; }
.footer__company dt { color: var(--on-navy-2); }
.footer__company dd { margin: 0; color: var(--on-navy); }
.footer__credit { flex-basis: 100%; margin: 0; max-width: 70ch; }

/* ---------- 법률 문서 ---------- */
.legal { padding-block: 48px 96px; max-width: 780px; margin-inline: auto; }
.legal__head { margin-bottom: 32px; display: grid; gap: 14px; }
.legal__draft { padding: 14px 18px; border-radius: 14px; background: #FFE9A8; color: #4D3A00; font-weight: 700; font-size: var(--fs-small); margin: 0; }
.legal__app { padding: 14px 18px; border-radius: 14px; background: var(--tint); font-size: var(--fs-small); margin: 0; }
.legal__toc { padding: 20px 24px; border-radius: var(--r); background: var(--tint); margin-bottom: 40px; }
.legal__toc-h { font-size: var(--fs-small); color: var(--muted); margin-bottom: 8px; }
.legal__toc ol { columns: 2 220px; column-gap: 24px; }
.legal__toc li { break-inside: avoid; padding: 3px 0; }
.legal__toc a { text-decoration: none; font-size: var(--fs-small); }
.legal__toc a:hover { text-decoration: underline; }
.legal__section { padding-block: 22px; }
.legal__section .h3 { margin-bottom: 10px; }
.legal__section p { color: var(--ink); }
.legal__lang { margin-top: 24px; font-size: var(--fs-small); }
mark.review { background: #FFE9A8; color: #4D3A00; padding: 0 .3em; border-radius: 4px; }
.legal .btn { background: var(--tint); color: var(--ink); }
.legal .btn:hover { background: var(--tint-2); }

/* ---------- 루트·404 ---------- */
.page-root { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.root { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.root > .logo { height: 44px; }
.root__langs { display: grid; gap: 6px; width: 100%; }
.root__langs a { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-radius: 16px; background: var(--tint); text-decoration: none; }
.root__langs a:hover { background: var(--tint-2); }
.root__langs small { color: var(--muted); }
.root__mascot { width: 120px; height: auto; }
.root__nf { text-align: center; }

/* ---------- 쿰피 스크롤바 (site.js 가 마우스 환경에서만 켠다) ---------- */
.has-kscroll { scrollbar-width: none; }
.has-kscroll::-webkit-scrollbar { display: none; }
.kscroll { position: fixed; z-index: 70; top: calc(var(--header-h) + 8px); bottom: 12px; right: 3px; width: 40px; cursor: pointer; touch-action: none; }
.kscroll[hidden] { display: none; }
.kscroll__rail { position: absolute; left: 50%; top: 20px; bottom: 20px; width: 6px; margin-left: -3px; border-radius: 99px; background: var(--tint-2); transition: background-color .2s; }
.kscroll:hover .kscroll__rail, .kscroll.is-dragging .kscroll__rail { background: var(--accent); opacity: .5; }
.kscroll__thumb { position: absolute; left: 0; top: 0; width: 40px; height: 38px; cursor: grab; will-change: transform; }
.kscroll__face { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .12s, transform .2s cubic-bezier(.3, 1.6, .5, 1); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.kscroll__face--smile { opacity: 0; }
.kscroll__thumb:hover .kscroll__face { transform: scale(1.1); }
.kscroll.is-dragging .kscroll__thumb { cursor: grabbing; }
.kscroll.is-dragging .kscroll__face { opacity: 0; transform: scale(1.16); }
.kscroll.is-dragging .kscroll__face--smile { opacity: 1; }
.kscroll-dragging, .kscroll-dragging * { user-select: none !important; cursor: grabbing !important; }

/* 등장 순서: 형제 요소가 70ms 간격으로 이어서 나타난다 */
.reveal:nth-child(2) { --i: 1; } .reveal:nth-child(3) { --i: 2; } .reveal:nth-child(4) { --i: 3; }
.reveal:nth-child(5) { --i: 4; } .reveal:nth-child(6) { --i: 5; }

/* ---------- 등장 (스크립트가 켜져 있고 움직임을 줄이지 않은 경우만) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}
@media print { .site-header, .kscroll, .download { display: none; } body { background: #fff; } }