/* ============================================================
   bio.css — 교과서 인물평전 전용 레이아웃 (이 서비스 소유 · 정본)

   ★ 디자인 정본은 eduverse.css 다. 이 파일은 그것을 대체하지 않는다.
     - 색은 100% var(--ev-*) 토큰. 하드코딩 hex 0개.
     - 서비스 전용 변수는 --bio-* 접두어로만 만든다.
     - eduverse.css 의 클래스(.card .btn .badge …)를 덮어쓰지 않는다.

   ★ 기획안 05 §17 은 "신규 CSS 파일 0개"를 요구한다. 6개 화면이 공유하는
     레이아웃을 각 HTML 에 인라인 복제하면 정본이 6벌로 갈라진다고 판단해
     이 한 파일로 모았다. 의도적 편차이며 STATUS.md 에 기록했다.
   ============================================================ */

:root{
  --bio-orbit-gap: 62px;
  --bio-node: 13px;
  --bio-grade-a: var(--ev-mint);
  --bio-grade-b: var(--ev-gold);
}

/* ---------- 공통 레이아웃 ---------- */
.bio-main{ padding-top: calc(var(--nav-h) + 28px); padding-bottom: 96px; }
.bio-skip{
  position:fixed; top:8px; left:8px; z-index:1000; padding:10px 14px;
  border-radius:var(--r-md); background:var(--ev-surface-3); color:var(--ev-text);
  transform:translateY(-160%); text-decoration:none;
}
.bio-skip:focus{ transform:translateY(0); outline:2px solid var(--ev-accent); outline-offset:2px; }
.bio-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; }
.bio-head{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; margin-bottom:26px; }
.bio-head__text{ min-width:0; flex:1 1 340px; }
.bio-title{ font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:900; letter-spacing:-.03em; margin:6px 0 0; }
.bio-sub{ color:var(--ev-text-2); font-size:.95rem; line-height:1.7; margin:10px 0 0; word-break:keep-all; }

.bio-grid{ display:grid; gap:20px; }
.bio-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.bio-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.bio-grid--side{ grid-template-columns:minmax(0,1fr) 340px; align-items:start; }

/* ---------- 고지 · 안내 배너 ---------- */
.bio-note{
  border:1px dashed var(--ev-line-strong);
  border-radius:var(--r-md);
  background:var(--ev-surface);
  padding:14px 16px;
  font-size:.86rem;
  line-height:1.7;
  color:var(--ev-text-2);
  word-break:keep-all;
}
.bio-note--warn{ border-color:var(--ev-gold); color:var(--ev-gold); }
.bio-note strong{ color:var(--ev-text); }

/* ---------- 성좌 SVG ---------- */
.bio-sky{
  position:relative;
  border:1px solid var(--ev-line);
  border-radius:var(--r-lg);
  background:var(--ev-surface);
  padding:8px;
  overflow:hidden;
}
.bio-sky svg{ display:block; width:100%; height:auto; }
.bio-orbit{ fill:none; stroke:var(--ev-line); stroke-width:1; }
.bio-orbit-label{ fill:var(--ev-text-3); font-size:11px; font-weight:700; }
.bio-link{ stroke:var(--ev-accent); stroke-width:1; opacity:.28; }
.bio-node{ cursor:pointer; }
.bio-node circle.hit{ fill:transparent; }
.bio-node .planet{ stroke:var(--ev-line-strong); stroke-width:1; transition:r .18s var(--ease), opacity .18s var(--ease); }
.bio-node text{ fill:var(--ev-text-2); font-size:11px; font-weight:700; pointer-events:none; }
.bio-node:hover .planet, .bio-node:focus-visible .planet{ r:11; }
.bio-node:hover text, .bio-node:focus-visible text{ fill:var(--ev-text); }
.bio-node:focus-visible{ outline:2px solid var(--ev-accent); outline-offset:2px; }
.bio-node[data-dim="1"]{ opacity:.22; }
.bio-node[data-dim="1"] text{ opacity:.6; }

.bio-legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:14px; font-size:.82rem; color:var(--ev-text-3); }
.bio-legend span{ display:inline-flex; align-items:center; gap:7px; }

/* ---------- 필터 ---------- */
.bio-filters{ display:flex; flex-wrap:wrap; gap:18px; margin:0 0 20px; }
.bio-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.bio-filter__label{ font-size:.78rem; font-weight:800; letter-spacing:.08em; color:var(--ev-text-3); }
.bio-chip{
  height:32px; padding:0 14px; border-radius:var(--r-pill);
  border:1px solid var(--ev-line-strong); background:var(--ev-surface-2);
  color:var(--ev-text-2); font-size:.83rem; font-weight:700; cursor:pointer;
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.bio-chip:hover{ color:var(--ev-text); border-color:var(--ev-accent); }
.bio-chip[aria-pressed="true"]{ color:var(--ev-text); border-color:var(--ev-accent); background:var(--ev-surface-3); }
.bio-chip:focus-visible{ outline:2px solid var(--ev-accent); outline-offset:2px; }

/* ---------- 인물 목록 카드 ---------- */
.bio-people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.bio-person{
  display:block; padding:16px 18px; border-radius:var(--r-md);
  border:1px solid var(--ev-line); background:var(--ev-surface);
  color:inherit; text-decoration:none;
  transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.bio-person:hover{ border-color:var(--ev-accent); transform:translateY(-2px); }
.bio-person:focus-visible{ outline:2px solid var(--ev-accent); outline-offset:2px; }
.bio-person__name{ font-weight:800; font-size:1.02rem; letter-spacing:-.02em; }
.bio-person__meta{ margin-top:6px; font-size:.8rem; color:var(--ev-text-3); }
.bio-person__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

/* ---------- 등급 리본 ---------- */
.bio-grade{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 11px; border-radius:var(--r-pill);
  font-size:.74rem; font-weight:800; border:1px solid currentColor;
}
.bio-grade--A{ color:var(--bio-grade-a); }
.bio-grade--B{ color:var(--bio-grade-b); }

/* ---------- 연표 ---------- */
.bio-timeline{ list-style:none; margin:0; padding:0 0 0 22px; border-left:1px solid var(--ev-line-strong); }
.bio-timeline li{ position:relative; padding:0 0 20px 4px; }
.bio-timeline li::before{
  content:""; position:absolute; left:-27px; top:7px;
  width:9px; height:9px; border-radius:50%;
  background:var(--ev-accent); box-shadow:0 0 0 3px var(--ev-surface-3);
}
.bio-timeline__year{ font-weight:800; font-size:.86rem; color:var(--ev-cyan); font-variant-numeric:tabular-nums; }
.bio-timeline__text{ margin:4px 0 0; font-size:.94rem; line-height:1.7; color:var(--ev-text); word-break:keep-all; }
.bio-fn{ font-size:.76rem; color:var(--ev-text-3); text-decoration:none; border-bottom:1px dotted var(--ev-text-3); }
.bio-fn:hover{ color:var(--ev-accent); border-color:var(--ev-accent); }

/* ---------- 관점(다면 서술) ---------- */
.bio-views{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.bio-view{ padding:18px; border-radius:var(--r-md); border:1px solid var(--ev-line-strong); background:var(--ev-surface-2); }
.bio-view__stance{ font-size:.78rem; font-weight:800; letter-spacing:.06em; color:var(--ev-gold); }
.bio-view__claim{ margin:8px 0 0; font-size:.93rem; line-height:1.75; color:var(--ev-text); word-break:keep-all; }
.bio-view__by{ margin:10px 0 0; font-size:.78rem; color:var(--ev-text-3); }

/* ---------- 출처 각주 목록 ---------- */
.bio-sources{ list-style:none; margin:0; padding:0; counter-reset:src; }
.bio-sources li{ padding:10px 0; border-bottom:1px solid var(--ev-line); font-size:.84rem; color:var(--ev-text-2); line-height:1.7; word-break:break-all; }
.bio-sources li:last-child{ border-bottom:0; }
.bio-sources a{ color:var(--ev-accent); }

/* ---------- 비교표 ---------- */
.bio-compare{ overflow-x:auto; }
.bio-scroll-hint{ margin:10px 0 0; color:var(--ev-text-3); font-size:.8rem; }
.bio-compare table{ width:100%; min-width:640px; border-collapse:collapse; font-size:.9rem; }
.bio-compare th, .bio-compare td{ padding:13px 14px; border-bottom:1px solid var(--ev-line); vertical-align:top; text-align:left; word-break:keep-all; }
.bio-compare thead th{ font-size:.78rem; font-weight:800; color:var(--ev-text-3); border-bottom:1px solid var(--ev-line-strong); }
.bio-compare tbody th{ width:130px; font-weight:700; color:var(--ev-text-2); }

/* ---------- 수업 구성 ---------- */
.bio-phase{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--ev-line); }
.bio-phase:last-child{ border-bottom:0; }
.bio-phase__when{ font-weight:800; font-size:.88rem; color:var(--ev-accent); }
.bio-phase__min{ display:block; font-size:.76rem; font-weight:700; color:var(--ev-text-3); margin-top:3px; }
.bio-phase__body p{ margin:0 0 8px; font-size:.92rem; line-height:1.75; color:var(--ev-text-2); word-break:keep-all; }
.bio-phase__body p:last-child{ margin-bottom:0; }
.bio-phase__body b{ color:var(--ev-text); }

.bio-qlist{ margin:0; padding-left:20px; }
.bio-qlist li{ margin:0 0 10px; font-size:.93rem; line-height:1.75; color:var(--ev-text); word-break:keep-all; }

/* ---------- 퀘스트 ---------- */
.bio-quest{ padding:18px; border-radius:var(--r-md); border:1px solid var(--ev-line); background:var(--ev-surface); }
.bio-quest + .bio-quest{ margin-top:12px; }
.bio-quest__q{ font-size:1rem; font-weight:700; line-height:1.7; color:var(--ev-text); word-break:keep-all; }
.bio-quest__why{ margin:8px 0 0; font-size:.85rem; line-height:1.7; color:var(--ev-text-3); word-break:keep-all; }

/* ---------- 확인 현황(루프2) ---------- */
.bio-unknown{ color:var(--ev-gold); font-weight:700; }
.bio-subhead{ margin:20px 0 6px; font-size:1rem; font-weight:700; color:var(--ev-text-2); word-break:keep-all; }
.bio-qlist a, .bio-note a{ word-break:break-all; overflow-wrap:anywhere; }

/* ---------- 상품·법적 고지 ---------- */
.bio-price-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.bio-price-card{ display:flex; flex-direction:column; gap:12px; }
.bio-price-card .btn{ margin-top:auto; }
.bio-price{ font-size:1.35rem; font-weight:900; color:var(--ev-text); }
.bio-journey{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.bio-legal-nav{ display:flex; flex-wrap:wrap; gap:8px 14px; margin:18px 0 26px; }
.bio-legal-nav a{ color:var(--ev-accent); }
.bio-legal section{ margin-top:22px; }
.bio-legal p, .bio-legal li{ line-height:1.8; }
.bio-legal-footer{ margin-top:42px; padding-top:22px; border-top:1px solid var(--ev-line); font-size:.82rem; color:var(--ev-text-3); }

/* ---------- 반응형 ---------- */
@media (max-width:1023px){
  .bio-grid--side{ grid-template-columns:minmax(0,1fr); }
  .bio-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bio-price-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .bio-grid--2, .bio-grid--3{ grid-template-columns:minmax(0,1fr); }
  .bio-people{ grid-template-columns:minmax(0,1fr); }
  .bio-phase{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .bio-node text{ font-size:13px; }
  .bio-journey{ grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce){
  .bio-person, .bio-chip, .bio-node .planet{ transition:none; }
  .bio-person:hover{ transform:none; }
}
.bio-account-mount{display:flex;align-items:center;min-height:32px}
.bio-account{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--ev-border);border-radius:999px;color:var(--ev-text-2);font-size:.8rem;white-space:nowrap}
.bio-account a{color:var(--ev-accent);text-decoration:none}
.bio-account a:focus-visible{outline:2px solid var(--ev-accent);outline-offset:3px}
.bio-account--offline{color:var(--ev-text-3)}

/* PRODUCT V5 — 밝은 교육 워크스페이스. 공통 정본은 건드리지 않고 서비스 범위에서만 재정의한다. */
:root{
  --ev-void:#f4f7f5;
  --ev-deep:#ffffff;
  --ev-nebula-1:#f4f7f5;
  --ev-nebula-2:#f4f7f5;
  --ev-nebula-3:#f4f7f5;
  --ev-surface:#ffffff;
  --ev-surface-2:#f7faf8;
  --ev-surface-3:#edf7f2;
  --ev-line:#dce5e0;
  --ev-line-strong:#bdcdc5;
  --ev-border:var(--ev-line);
  --ev-blur:0px;
  --ev-text:#17251e;
  --ev-text-2:#44564d;
  --ev-text-3:#687970;
  --ev-accent:#087a55;
  --ev-accent-2:#087a55;
  --ev-mint:#087a55;
  --ev-cyan:#176f5a;
  --ev-gold:#8a5b08;
  --r-sm:4px;
  --r-md:6px;
  --r-lg:8px;
  --r-xl:8px;
  --r-pill:8px;
  --sh-1:0 1px 2px rgba(23,37,30,.06);
  --sh-2:0 4px 12px rgba(23,37,30,.09);
  --glow:none;
}

body{background:var(--ev-void);}
.ev-space{background:var(--ev-void);}
.ev-stars{display:none;}
.nav{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--ev-line);}
.card{backdrop-filter:none;-webkit-backdrop-filter:none;}
.card--hover:hover{transform:translateY(-1px);}
.btn--primary{background:var(--ev-accent);box-shadow:none;}
.btn--gold{background:#fff7e8;color:#684400;border-color:#dec38d;box-shadow:none;}
.grad{background:none;color:var(--ev-accent);-webkit-text-fill-color:currentColor;}
.badge--gold{background:#fff7e8;border-color:#dec38d;color:#684400;}
.badge--mint{background:#edf7f2;border-color:#b9d9ca;color:#075f43;}
.bio-chip[aria-pressed="true"]{background:#e6f3ed;color:#075f43;}
.bio-canvas{background:#fff;}
.bio-account{border-radius:8px;}

/* 후순위 화면별 CSS보다 우선해 제품 표면의 radius를 8px 이하로 고정한다. */
:where(.card,.btn,.badge,.bio-chip,.bio-person,.bio-grade,.bio-note,.bio-canvas,
  .bio-view,.bio-quest,.bio-account,.inquiry-hero__media,.inquiry-progress button,
  .inquiry-stage,.inquiry-position,.inquiry-status,input,select,textarea,button){
  border-radius:8px!important;
}

@media (max-width:640px){
  .wrap{width:min(100% - 28px,var(--wrap));}
  .section{padding:40px 0;}
}

@media print{
  :root{--ev-void:#fff;--ev-surface:#fff;--ev-text:#000;--ev-text-2:#222;--ev-text-3:#444;}
  body{background:#fff;color:#000;}
}