/* ════════════════════════════════════════════════════════════
   EAST AI — Design System (Apple/Pretendard 재단장)
   src/main/resources/static/design-system.css
   단일 진실원천: 토큰 + 공유 컴포넌트. 라이트 기본 / [data-theme="dark"] 다크.
   참조: coach 홈페이지 (standalone).html
   ════════════════════════════════════════════════════════════ */

/* ── Pretendard (self-host) ── */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: optional;
  src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
}

/* ── Tokens (라이트 기본) ── */
:root {
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --bg-dark: #111113;
  --line: #d2d2d7;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #86868b;
  --on-dark: #f5f5f7;
  --on-dark-soft: #a1a1a6;

  --accent: #0071e3;
  --accent-hover: #0077ed;

  /* 서비스 액센트 (oklch) — QR / 투표 / 화상 / AI */
  --svc-qr:    oklch(0.62 0.15 250);
  --svc-vote:  oklch(0.64 0.14 150);
  --svc-video: oklch(0.60 0.16 300);
  --svc-ai:    oklch(0.66 0.15 55);
  --svc-qr-soft:    oklch(0.62 0.15 250 / 0.10);
  --svc-vote-soft:  oklch(0.64 0.14 150 / 0.10);
  --svc-video-soft: oklch(0.60 0.16 300 / 0.10);
  --svc-ai-soft:    oklch(0.66 0.15 55  / 0.10);

  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 980px;

  --t-hero:    clamp(48px, 6.4vw, 96px);
  --t-display: clamp(40px, 4.6vw, 64px);
  --t-title:   clamp(30px, 3.0vw, 44px);
  --t-lead:    clamp(20px, 1.7vw, 26px);
  --t-body:    19px;
  --t-small:   15px;
  --t-eyebrow: 13px;

  --maxw: 1080px;
  --maxw-wide: 1280px;
  --nav-h: 52px;
  --sp-section: clamp(96px, 11vw, 168px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
          system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --btn-bg: var(--accent);
  --btn-fg: #fff;
}

/* ── 다크 표면 (정적 페이지 지정: 화상룸·monitor·vote-result 등) ── */
html[data-theme="dark"] {
  --bg: #111113;
  --bg-soft: #1d1d1f;
  --bg-dark: #000000;
  --line: rgba(255,255,255,0.12);
  --ink: #f5f5f7;
  --ink-soft: #a1a1a6;
  --ink-faint: #6e6e73;
  --accent: #2997ff;
  --accent-hover: #47a3ff;
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; }

h1 { font-size: var(--t-hero);    line-height: 1.04; letter-spacing: -0.03em;  font-weight: 700; }
h2 { font-size: var(--t-title);   line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; }
h3 { font-size: var(--t-lead);    line-height: 1.2;  letter-spacing: -0.02em;  font-weight: 600; }

.eyebrow {
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}

.container, .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.container--wide, .wrap-w { max-width: var(--maxw-wide); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: var(--sp-section); }
.section--soft { background: var(--bg-soft); }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  height: 100%; max-width: var(--maxw-wide); margin-inline: auto;
  padding-inline: 24px; display: flex; align-items: center; gap: 36px;
}
.nav__logo { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.nav__links { display: flex; gap: 30px; margin: 0 auto 0 8px; list-style: none; }
.nav__links a { color: var(--ink-soft); font-size: var(--t-small); }
.nav__links a:hover { color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 14px; }
.nav__toggle { display: none; }

/* ── BUTTON (pill, 토큰 구동) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding-inline: 24px;
  border: 0; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease), opacity .2s;
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
}
.btn--ghost:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { background: #000; }
.btn--sm { height: 36px; padding-inline: 16px; font-size: 14px; }
.btn--lg { height: 56px; padding-inline: 32px; font-size: 17px; }
.btn--block { width: 100%; }

/* ── FORM CONTROLS (공유 — 폼 페이지 공통) ── */
label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font-family: inherit; font-size: 15px;
  background: var(--bg-soft); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* ── PANEL (콘텐츠/폼 카드 표면) ── */
.panel {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 12px 32px -16px rgba(0,0,0,.12);
}

/* ── ALERT (피드백 메시지) ── */
.alert { padding: 12px 16px; border-radius: var(--r-sm); font-size: 14px; text-align: center; }
.alert--ok  { background: color-mix(in oklab, var(--svc-vote) 14%, #fff); color: oklch(0.45 0.13 150); border: 1px solid color-mix(in oklab, var(--svc-vote) 35%, #fff); }
.alert--err { background: oklch(0.95 0.04 25); color: oklch(0.52 0.2 25); border: 1px solid oklch(0.85 0.09 25); }

/* ── SERVICE TILES (bento) ── */
.bento { padding-block: clamp(40px, 5vw, 72px); }
.bento__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tile {
  --c: var(--svc, var(--accent));
  position: relative; border-radius: var(--r-lg);
  background: var(--bg-soft); padding: 34px 34px 0; min-height: 320px;
  overflow: hidden; display: flex; flex-direction: column;
  color: var(--ink); text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.10); }
.tile__eyebrow { color: var(--tile-accent, var(--c)); margin-bottom: 10px; }
.tile h3 { font-size: var(--t-lead); letter-spacing: -0.02em; font-weight: 700; }
.tile > p { color: var(--ink-soft); font-size: var(--t-small); margin-top: 10px; line-height: 1.6; }
.tile__viz { margin-top: auto; align-self: center; padding-top: 24px; }

/* gradient text */
.grad { background: linear-gradient(110deg, var(--svc-qr), var(--svc-video) 55%, var(--svc-ai)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* viz 그래픽 (서비스별 모티프) */
.viz { --c: var(--svc, var(--accent)); position: relative; width: 100%; display: grid; place-items: center; overflow: hidden; }
.viz--mini { aspect-ratio: 1/1; width: 150px; }
.qrgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; }
.qrgrid i { aspect-ratio: 1; border-radius: 3px; background: color-mix(in oklab, var(--c) 86%, #000 0%); opacity: .9; }
.qrgrid i.off { background: color-mix(in oklab, var(--c) 12%, transparent); }
.bars { display: flex; align-items: flex-end; gap: 14px; height: 52%; }
.bars span { width: 18px; border-radius: 8px 8px 0 0; background: linear-gradient(var(--c), color-mix(in oklab, var(--c) 35%, #fff)); }
.tilesviz { position: relative; width: 100%; aspect-ratio: 1; }
.tilesviz span { position: absolute; border-radius: 14px; border: 2px solid #fff; background: linear-gradient(135deg, var(--c), color-mix(in oklab, var(--c) 40%, #fff)); box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--c) 70%, transparent); }
.tilesviz span:nth-child(1) { inset: 0 32% 30% 0; }
.tilesviz span:nth-child(2) { inset: 22% 0 0 38%; opacity: .92; }
.tilesviz span:nth-child(3) { inset: 45% 45% 0 0; opacity: .84; }
.rings { position: relative; width: 60%; aspect-ratio: 1; display: grid; place-items: center; }
.rings .ring { position: absolute; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--c) 50%, transparent); }
.rings .ring:nth-child(1) { inset: 0; }
.rings .ring:nth-child(2) { inset: 18%; }
.rings .ring:nth-child(3) { inset: 36%; }
.rings .core { width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--c); }

/* ── HERO ── */
.hero { position: relative; text-align: center; padding: clamp(72px,9vw,130px) 0 clamp(60px,7vw,96px); overflow: hidden; }
.hero__orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; }
.orb--1 { width: 360px; height: 360px; left: -80px;  top: -40px;    background: var(--svc-qr); }
.orb--2 { width: 300px; height: 300px; right: -60px; top: 20px;     background: var(--svc-ai); }
.orb--3 { width: 260px; height: 260px; left: 40%;    bottom: -120px; background: var(--svc-video); }
.hero__eyebrow { color: var(--accent); margin-bottom: 20px; }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero__lead { font-size: var(--t-lead); color: var(--ink-soft); max-width: 40ch; margin: 24px auto 0; text-wrap: pretty; }
.hero__actions { display: flex; gap: 14px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }

/* ── CTA (다크 섹션) ── */
.cta { background: var(--bg-dark); color: var(--on-dark); text-align: center; padding-block: clamp(80px,10vw,140px); position: relative; overflow: hidden; }
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta__actions { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
.footer { background: var(--bg-soft); color: var(--ink-soft); font-size: var(--t-small); padding-block: 56px 40px; }
.footer__inner { max-width: var(--maxw-wide); margin-inline: auto; padding-inline: 24px; }
.footer__bottom { padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-faint); }

/* ── 보조 (chip / live-dot / spinner) ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--accent);
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.7 0.18 145); display: inline-block; animation: ds-blink 2s ease-in-out infinite; }
@keyframes ds-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.spinner { width: 20px; height: 20px; border: 2px solid color-mix(in oklab, var(--ink) 15%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: ds-spin .7s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ── 진입 애니메이션 ── */
@keyframes ds-fade-up { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
.fade-up { animation: ds-fade-up .6s var(--ease) both; }

/* ── 반응형 ── */
@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-grid; place-items: center; margin-left: auto; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; }
  .bento__grid { grid-template-columns: 1fr; }
  .hero__actions .btn, .cta__actions .btn { width: 100%; max-width: 320px; justify-content: center; }
}