/* ===========================================================================
 * 학던 (Minute Platform · Episode 1 "정령 MVP") — 공유 디자인 시스템
 * Apple 디자인 시스템 토큰 기반 / 한글 Pretendard / 6 surface 공용 프리미티브
 *
 * 정령(spirit)은 "제품 이미지"다 — 클린한 중립 캔버스 위에서 캐릭터가 드라마를
 * 맡고, UI 크롬은 Apple식으로 절제(중립 surface + 단일 블루 accent + 목적별
 * radius tier + 얕은 depth). 정령 전용 violet은 캐릭터 콘텐츠 색이지 배경 wash가
 * 아니다.
 * ======================================================================== */

/* ── 한글 본문 폰트 (Apple SF Pro의 한글 짝으로 Pretendard 사용) ── */
@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;
  src:url("../fonts/Pretendard-Regular.woff") format("woff");}
@font-face{font-family:"Pretendard";font-weight:500;font-display:swap;
  src:url("../fonts/Pretendard-Medium.woff") format("woff");}
@font-face{font-family:"Pretendard";font-weight:600;font-display:swap;
  src:url("../fonts/Pretendard-SemiBold.woff") format("woff");}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;
  src:url("../fonts/Pretendard-Bold.woff") format("woff");}

/* ── Apple 디자인 시스템 토큰 (tokens.css :root 계약, 그대로) ── */
:root{
  --bg:#ffffff;
  --surface:#f5f5f7;
  --surface-warm:#fbfbfd;

  --fg:#1d1d1f;
  --fg-2:#424245;
  --muted:#6e6e73;
  --meta:#86868b;

  --border:#d2d2d7;
  --border-soft:#e8e8ed;

  --accent:#0071e3;
  --accent-on:#ffffff;
  --accent-hover:#0077ed;
  --accent-active:#0066cc;

  --success:#16a34a;
  --warn:#eab308;
  --danger:#dc2626;

  --font-display:"SF Pro Display","SF Pro Icons","Pretendard","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"SF Pro Text","SF Pro Icons","Pretendard","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Monaco,Consolas,monospace;

  --text-xs:12px;
  --text-sm:14px;
  --text-base:17px;
  --text-lg:21px;
  --text-xl:28px;
  --text-2xl:40px;
  --text-3xl:56px;
  --text-4xl:80px;

  --leading-body:1.47;
  --leading-tight:1.05;
  --tracking-display:-0.015em;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;

  --section-y-desktop:100px;
  --section-y-tablet:64px;
  --section-y-phone:40px;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-pill:980px;

  --elev-flat:none;
  --elev-ring:0 0 0 1px var(--border);
  --elev-raised:0 12px 32px rgba(0,0,0,0.08);

  --focus-ring:0 0 0 4px color-mix(in oklab,var(--accent),transparent 65%);

  --motion-fast:150ms;
  --motion-base:220ms;
  --ease-standard:cubic-bezier(0.28,0,0.22,1);

  --container-max:1024px;
  --container-gutter-desktop:22px;
  --container-gutter-tablet:18px;
  --container-gutter-phone:16px;

  /* ── 학던 도메인 확장 (Apple 위에 얹는 제품 콘텐츠 색) ──
   * 정령 캐릭터/성장 = violet. 미닛(보상 화폐) = amber. UI 크롬은 절대 안 씀. */
  --spirit:#7c5cff;          /* 정령 캐릭터 본색 */
  --spirit-deep:#4d2db8;
  --spirit-soft:#efeaff;     /* 정령 무대 옅은 배경 */
  --minute:#f5a623;          /* 미닛 화폐 강조 */
  --minute-soft:#fff6e6;
  --night:#15121f;           /* 흡수 의식 등 다크 무대 */
  --night-2:#241d36;
}

/* ── reset / base ── */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  color:var(--fg);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:var(--tracking-display);line-height:1.1;font-weight:600;}
button{font-family:inherit;cursor:pointer;}
a{color:var(--accent-active);text-decoration:none;}
:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.tnum{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--font-mono);}

/* ── SVG 아이콘 (이모지 대체) ──
 * .ic 래퍼는 1em 정사각, 글자 색·크기를 상속. 안의 <svg>는 currentColor stroke.
 * 텍스트 베이스라인에 자연스럽게 앉도록 약간 내림. */
.ic{display:inline-flex;align-items:center;justify-content:center;
  width:1em;height:1em;line-height:0;vertical-align:-0.135em;flex:0 0 auto;}
.ic .ic-svg{width:1em;height:1em;display:block;}
/* 아이콘만 있는 슬롯(탭·nav·표정 등)은 baseline 보정 불필요 */
.ti .ic,.ni .ic,.ico .ic,.badge-ico .ic,.err-icon .ic,.tab .ic,.emo-btn .ic{vertical-align:middle;}

/* ── 디바이스 무대 (각 화면 파일 공용 셸) ── */
.stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px 20px;
  background:
    radial-gradient(120% 80% at 50% 0%,#fbfbfd 0%,var(--surface) 60%);
}
.stage-label{
  position:fixed;top:16px;left:18px;z-index:50;
  font:600 12px/1 var(--font-body);letter-spacing:0.02em;
  color:var(--meta);
}
.stage-label b{color:var(--fg);}
.back-link{
  position:fixed;top:14px;right:18px;z-index:50;
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--accent);
  padding:7px 14px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.7);backdrop-filter:blur(12px);
  border:1px solid var(--border);
}

/* ── 순차 플로우 이전/다음 네비 (키오스크 등 화면별 파일용) ── */
.flow-nav{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.72);backdrop-filter:blur(12px);
  border:1px solid var(--border);box-shadow:var(--elev-raised);
}
.flow-nav button{
  appearance:none;display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--fg);
  padding:7px 14px;border-radius:var(--radius-pill);
  border:1px solid transparent;background:transparent;cursor:pointer;
  transition:background var(--motion-fast) var(--ease-standard);
}
.flow-nav button:hover:not(:disabled){background:var(--surface);}
.flow-nav button.primary{background:var(--accent);color:var(--accent-on);}
.flow-nav button.primary:hover:not(:disabled){background:var(--accent-hover);}
.flow-nav button:disabled{opacity:.32;cursor:default;}
.flow-nav .step{font-size:12px;font-weight:600;color:var(--meta);font-variant-numeric:tabular-nums;min-width:38px;text-align:center;}

/* ── 키오스크 프레임 (1080×1920 세로, 화면에 맞춰 scale) ── */
.kiosk{
  width:540px;height:960px;            /* 1080×1920 ÷2 */
  background:var(--bg);
  border-radius:28px;
  border:1px solid var(--border);
  box-shadow:var(--elev-raised);
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}

/* ── 모바일 프레임 (390×844) ── */
.phone{
  width:390px;height:844px;
  background:var(--bg);
  border-radius:46px;
  border:1px solid var(--border);
  box-shadow:var(--elev-raised);
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}
.phone .notch{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:118px;height:34px;background:#000;border-radius:20px;z-index:40;
}
.statusbar{
  flex:0 0 auto;height:50px;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 28px 8px;font-size:14px;font-weight:600;color:var(--fg);
}
.statusbar .dots{font-size:11px;letter-spacing:1px;}

/* 앱 스크롤 본문 */
.app-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.app-scroll::-webkit-scrollbar{width:0;}

/* ── 하단 탭바 (학생/학부모 앱 공용 · 필수 인터랙션) ── */
.tabbar{
  flex:0 0 auto;
  display:flex;justify-content:space-around;align-items:center;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border-soft);
  background:rgba(255,255,255,0.86);backdrop-filter:blur(18px);
}
.tab{
  appearance:none;border:none;background:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 10px;border-radius:var(--radius-md);
  color:var(--meta);position:relative;
  transition:color var(--motion-fast) var(--ease-standard);
}
.tab .ti{font-size:22px;line-height:1;}
.tab span{font-size:11px;font-weight:600;}
.tab[aria-selected="true"]{color:var(--accent);}
.tab .badge{
  position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;
  background:var(--danger);color:#fff;border-radius:8px;
  font-size:10px;font-weight:700;display:grid;place-items:center;
  border:1.5px solid var(--bg);
}

/* ── 데스크탑 콘솔 프레임 (1280×800) ── */
.console{
  width:1080px;height:675px;            /* 1280×800 비율 축소 */
  max-width:96vw;
  background:var(--bg);
  border-radius:14px;border:1px solid var(--border);
  box-shadow:var(--elev-raised);overflow:hidden;
  display:flex;flex-direction:column;
}
.titlebar{
  flex:0 0 auto;height:44px;display:flex;align-items:center;gap:10px;
  padding:0 14px;border-bottom:1px solid var(--border-soft);
  background:var(--surface-warm);
}
.traffic{display:flex;gap:8px;}
.traffic i{width:12px;height:12px;border-radius:50%;display:block;}
.traffic .r{background:#ff5f57;}.traffic .y{background:#febc2e;}.traffic .g{background:#28c840;}
.urlbar{
  flex:1;height:26px;border-radius:7px;background:var(--surface);
  display:flex;align-items:center;gap:6px;padding:0 12px;
  font-size:12px;color:var(--muted);
}
.console-body{flex:1;display:flex;min-height:0;}
.sidebar{
  width:236px;flex:0 0 auto;border-right:1px solid var(--border-soft);
  background:var(--surface-warm);padding:18px 14px;
  display:flex;flex-direction:column;overflow-y:auto;
}
.sidebar .brand{font:600 20px/1.1 var(--font-display);letter-spacing:-0.01em;}
.sidebar .brand small{display:block;font:500 12px/1.3 var(--font-body);color:var(--muted);margin-top:3px;letter-spacing:0;}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:18px;}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:500;color:var(--fg-2);
  transition:background var(--motion-fast) var(--ease-standard);
}
.nav a .ni{width:18px;text-align:center;opacity:.75;}
.nav a:hover{background:var(--surface);}
.nav a[aria-current="page"]{background:var(--accent);color:var(--accent-on);font-weight:600;}
.nav a[aria-current="page"] .ni{opacity:1;}
.console-main{flex:1;overflow-y:auto;padding:24px 28px;background:var(--bg);}

/* ── 전자칠판 프레임 (1600×900) ── */
.board{
  width:1120px;height:630px;max-width:96vw;
  background:var(--night);color:#fff;
  border-radius:16px;border:1px solid #000;
  box-shadow:var(--elev-raised);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
}

/* ── 정령 (제품 캐릭터) ── */
/* Avatar orb only — exclude the .btn/.chip color variants that reuse the
   `spirit` class name, so the creature's eyes don't bleed onto buttons/chips. */
.spirit:not(.btn):not(.chip){
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 30%,#ffffff 0%,#d8ccff 32%,var(--spirit) 68%,var(--spirit-deep) 100%);
  box-shadow:0 18px 50px -12px rgba(124,92,255,0.55),inset 0 -10px 24px rgba(77,45,184,0.45);
  position:relative;flex:0 0 auto;
}
.spirit:not(.btn):not(.chip)::before,.spirit:not(.btn):not(.chip)::after{ /* 눈 */
  content:"";position:absolute;top:38%;width:9%;height:13%;
  background:#15121f;border-radius:50%;
}
.spirit:not(.btn):not(.chip)::before{left:30%;}.spirit:not(.btn):not(.chip)::after{right:30%;}
.spirit.s0{ /* 0단계 소환진: 아직 안 태어남 */
  background:radial-gradient(circle at 50% 50%,rgba(124,92,255,.18),transparent 62%);
  box-shadow:inset 0 0 0 2px rgba(124,92,255,.4);
}
.spirit.s0::before,.spirit.s0::after{display:none;}

/* ── 칩 / 상태 배지 ── */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:600;line-height:1.4;
  background:var(--surface);color:var(--fg-2);border:1px solid var(--border-soft);
  white-space:nowrap;
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.chip.accent{background:color-mix(in oklab,var(--accent),transparent 88%);color:var(--accent-active);border-color:transparent;}
.chip.spirit{background:var(--spirit-soft);color:var(--spirit-deep);border-color:transparent;}
.chip.minute{background:var(--minute-soft);color:#a96a04;border-color:transparent;}
.chip.ok{background:color-mix(in oklab,var(--success),transparent 88%);color:var(--success);border-color:transparent;}
.chip.warn{background:color-mix(in oklab,var(--warn),transparent 84%);color:#946c00;border-color:transparent;}
.chip.danger{background:color-mix(in oklab,var(--danger),transparent 88%);color:var(--danger);border-color:transparent;}
.chip.dark{background:var(--fg);color:#fff;border-color:transparent;}

/* 미닛 값 배지 */
.minutes{font-family:var(--font-display);font-weight:600;color:#a96a04;font-variant-numeric:tabular-nums;}

/* ── 버튼 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:600;line-height:1;
  padding:12px 20px;border-radius:var(--radius-md);
  background:var(--surface);color:var(--fg);border:1px solid var(--border);
  transition:background var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard);
}
.btn:hover{background:var(--border-soft);}
.btn:active{transform:scale(.985);}
.btn.primary{background:var(--accent);color:var(--accent-on);border-color:transparent;}
.btn.primary:hover{background:var(--accent-hover);}
.btn.primary:active{background:var(--accent-active);}
.btn.spirit{background:var(--spirit);color:#fff;border-color:transparent;}
.btn.spirit:hover{background:var(--spirit-deep);}
.btn.lg{font-size:18px;padding:18px 26px;border-radius:var(--radius-lg);}
.btn.block{width:100%;}
.btn.ghost{background:transparent;}

/* CTA 캡슐 (Apple 시그니처) */
.btn.pill{border-radius:var(--radius-pill);}

/* ── 카드 ── */
.card{
  background:var(--bg);border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);padding:18px;
}
.card.raised{box-shadow:var(--elev-raised);border-color:transparent;}
.card.flat{background:var(--surface);border-color:transparent;}

/* ── 미닛 게이지 (정령 성장) ── */
.gauge{height:8px;border-radius:var(--radius-pill);background:var(--border-soft);overflow:hidden;}
.gauge>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--spirit),#a78bff);}
.gauge.minute>i{background:linear-gradient(90deg,var(--minute),#ffc861);}

/* ── 공용 유틸 ── */
.row{display:flex;align-items:center;}
.between{justify-content:space-between;}
.col{display:flex;flex-direction:column;}
.muted{color:var(--muted);}
.meta{color:var(--meta);}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--meta);}
.hatch{background-image:repeating-linear-gradient(45deg,var(--border-soft) 0 1px,transparent 1px 9px);}

/* 데스크탑 KPI 그리드 */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.kpi{background:var(--surface-warm);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:16px;}
.kpi .v{font:600 30px/1 var(--font-display);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;margin:6px 0 2px;}
.kpi .l{font-size:13px;color:var(--muted);}

@media (max-width:560px){
  .stage{padding:0;}
  .phone{width:100vw;height:100vh;border-radius:0;border:none;box-shadow:none;}
}