/* ============================================================
   mentor.css — AI 아바타 멘토 전용 레이아웃 (이 서비스 소유 · 정본)

   규칙:
     · 색은 var(--ev-*) 토큰만 쓴다. 하드코딩 hex 금지.
       (알파 조절이 필요한 곳은 흰색 rgba 로만 — eduverse.css 와 같은 방식)
     · eduverse.css 의 .card/.btn/.badge/.wrap/.grid 를 최대한 재사용하고
       여기서는 이 서비스에만 있는 배치·상태만 정의한다.
     · prefers-reduced-motion 을 존중한다.
   ============================================================ */

:root{
  --mt-notice: var(--ev-coral);      /* 재구성 고지 — 가장 눈에 띄는 색 */
  --mt-quote:  var(--ev-mint);       /* 검증된 실제 어록 */
  --mt-basis:  var(--ev-cyan);       /* 근거(persons.json 원문) */
  --mt-gap: 20px;
}

/* ---------- 페이지 골격 ---------- */
.mt-main{ padding-bottom:96px; }
.mt-head{ padding:44px 0 8px; display:flex; gap:24px; align-items:flex-end; flex-wrap:wrap; }
.mt-head__text{ flex:1 1 420px; min-width:0; }
.mt-title{ font-size:clamp(2rem,4.6vw,3.2rem); font-weight:800; letter-spacing:-.035em; margin:6px 0 12px; }
.mt-sub{ color:var(--ev-text-2); max-width:70ch; word-break:keep-all; }

/* 상시 고지 띠 — 모든 화면 상단에 붙는다. 숨기지 않는다. */
.mt-banner{
  margin:18px 0 0; padding:14px 18px;
  border:1px solid var(--mt-notice); border-radius:var(--r-md);
  background:var(--ev-surface-2);
  color:var(--ev-text); font-size:.9rem; line-height:1.6; word-break:keep-all;
}
.mt-banner b{ color:var(--mt-notice); }

/* ---------- 필터 ---------- */
.mt-filters{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.mt-filter{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.mt-filter__label{ font-size:.82rem; font-weight:800; color:var(--ev-text-2); min-width:74px; }
.mt-chip{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 13px; border-radius:var(--r-pill);
  background:var(--ev-surface); border:1px solid var(--ev-line);
  color:var(--ev-text-2); font-size:.82rem; font-weight:700; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.mt-chip:hover{ background:var(--ev-surface-2); color:var(--ev-text); }
.mt-chip:focus-visible{ outline:2px solid var(--ev-accent); outline-offset:2px; }
.mt-chip[aria-pressed="true"]{
  background:var(--ev-surface-3); border-color:var(--ev-accent); color:var(--ev-text);
}

/* ---------- 멘토 카드 격자 ---------- */
.mt-people{ display:grid; gap:var(--mt-gap); grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); }
.mt-person{ padding:22px; display:flex; flex-direction:column; gap:12px; text-align:left; width:100%;
            background:var(--ev-surface); border:1px solid var(--ev-line); border-radius:var(--r-lg);
            color:inherit; cursor:pointer; font:inherit;
            transition:transform .3s var(--ease), border-color .3s var(--ease); }
.mt-person:hover{ transform:translateY(-3px); border-color:var(--ev-line-strong); }
.mt-person:focus-visible{ outline:2px solid var(--ev-accent); outline-offset:3px; }
.mt-person__top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.mt-person__name{ font-size:1.16rem; font-weight:800; letter-spacing:-.03em; }
.mt-person__life{ font-size:.82rem; color:var(--ev-text-3); font-variant-numeric:tabular-nums; }
.mt-person__sub{ font-size:.82rem; color:var(--ev-text-3); }
.mt-person__lens{ color:var(--ev-text-2); font-size:.92rem; line-height:1.6; word-break:keep-all; }
.mt-person__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:4px; }

/* ---------- 상담실 ---------- */
.mt-room{ display:grid; gap:var(--mt-gap); grid-template-columns:minmax(0,300px) minmax(0,1fr); align-items:start; }
.mt-aside{ position:sticky; top:calc(var(--nav-h) + 16px); display:flex; flex-direction:column; gap:14px; }
.mt-thread{ display:flex; flex-direction:column; gap:16px; min-width:0; }

.mt-step{ padding:20px 22px; background:var(--ev-surface); border:1px solid var(--ev-line); border-radius:var(--r-lg); }
.mt-step__q{ font-weight:800; font-size:1.02rem; margin-bottom:6px; word-break:keep-all; }
.mt-step__opts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* 관점 카드 — 재구성이라는 것이 형태로도 드러나게 점선 테두리 */
.mt-card{
  border:1px dashed var(--mt-notice); border-radius:var(--r-lg);
  background:var(--ev-surface); padding:22px;
  display:flex; flex-direction:column; gap:14px;
}
.mt-card__head{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.mt-card__who{ font-weight:800; font-size:1.06rem; }
.mt-card__lens{ font-size:1.02rem; line-height:1.7; word-break:keep-all; }
.mt-card__qs{ display:flex; flex-direction:column; gap:9px; }
.mt-card__q{ display:flex; gap:9px; align-items:flex-start; color:var(--ev-text); line-height:1.65; word-break:keep-all; }
.mt-card__q::before{ content:"?"; flex:none; width:20px; height:20px; margin-top:3px; border-radius:50%;
  background:var(--ev-surface-3); color:var(--ev-accent); font-size:.72rem; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; }

/* 카드마다 반드시 붙는 고지 — CSS 로 지울 수 없게 텍스트는 JS 가 DOM 에 넣는다 */
.mt-notice{
  display:flex; gap:8px; align-items:flex-start;
  padding:11px 13px; border-radius:var(--r-sm);
  background:var(--ev-surface-2); border:1px solid var(--mt-notice);
  color:var(--mt-notice); font-size:.83rem; font-weight:700; line-height:1.55; word-break:keep-all;
}

/* 근거 열림 */
.mt-basis{ border-top:1px solid var(--ev-line); padding-top:12px; }
.mt-basis summary{ cursor:pointer; font-size:.84rem; font-weight:700; color:var(--mt-basis); }
.mt-basis summary:focus-visible{ outline:2px solid var(--ev-accent); outline-offset:2px; }
.mt-basis__body{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.mt-basis__quote{
  border-left:3px solid var(--mt-basis); padding:6px 0 6px 12px;
  color:var(--ev-text-2); font-size:.88rem; line-height:1.65; word-break:keep-all;
}
.mt-basis__note{ color:var(--ev-text-3); font-size:.83rem; line-height:1.6; word-break:keep-all; }

/* ---------- 관점 비교 ---------- */
.mt-compare{ display:grid; gap:var(--mt-gap); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; }
.mt-compare__note{ margin-top:18px; color:var(--ev-text-3); font-size:.88rem; line-height:1.7; word-break:keep-all; }

/* ---------- 어록 ---------- */
.mt-quote{
  border:1px solid var(--mt-quote); border-radius:var(--r-lg);
  background:var(--ev-surface); padding:22px; display:flex; flex-direction:column; gap:12px;
}
.mt-quote__text{ font-size:1.06rem; line-height:1.7; word-break:keep-all; }
.mt-quote__orig{ color:var(--ev-text-2); font-size:.9rem; line-height:1.6; font-style:italic; }
.mt-quote__meta{ display:flex; gap:8px; flex-wrap:wrap; }
.mt-quote__src{ font-size:.83rem; color:var(--ev-text-3); word-break:break-all; }
.mt-quote__src a{ color:var(--ev-accent); text-decoration:underline; }
.mt-empty{
  border:1px dashed var(--ev-line-strong); border-radius:var(--r-lg);
  padding:22px; color:var(--ev-text-2); line-height:1.7; word-break:keep-all;
}

/* ---------- 일지 ---------- */
.mt-journal{ display:grid; gap:var(--mt-gap); grid-template-columns:minmax(0,1fr) minmax(0,360px); align-items:start; }
.mt-textarea{
  width:100%; min-height:120px; padding:13px 15px; border-radius:var(--r-md); resize:vertical;
  background:rgba(255,255,255,.05); border:1px solid var(--ev-line); color:var(--ev-text);
  line-height:1.7; font-family:inherit;
}
.mt-textarea:focus{ outline:none; border-color:var(--ev-accent); background:rgba(109,139,255,.07); }
.mt-entry{ padding:16px 18px; background:var(--ev-surface); border:1px solid var(--ev-line);
           border-radius:var(--r-md); display:flex; flex-direction:column; gap:8px; }
.mt-entry__date{ font-size:.8rem; color:var(--ev-text-3); font-variant-numeric:tabular-nums; }
.mt-entry__body{ font-size:.92rem; line-height:1.7; white-space:pre-wrap; word-break:keep-all; }

/* ---------- about ---------- */
.mt-prose{ max-width:74ch; display:flex; flex-direction:column; gap:14px; }
.mt-prose h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin-top:22px; }
.mt-prose p, .mt-prose li{ color:var(--ev-text-2); line-height:1.8; word-break:keep-all; }
.mt-prose li{ padding-left:16px; position:relative; }
.mt-prose li::before{ content:"—"; position:absolute; left:0; color:var(--ev-text-3); }
.mt-prose strong{ color:var(--ev-text); }
.mt-tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.mt-tbl th, .mt-tbl td{ padding:11px 12px; border-bottom:1px solid var(--ev-line);
                        text-align:left; vertical-align:top; word-break:keep-all; }
.mt-tbl th{ color:var(--ev-text-2); font-weight:800; white-space:nowrap; }
.mt-tbl td{ color:var(--ev-text-2); line-height:1.65; }
.mt-scroll{ overflow-x:auto; }

/* ---------- 통계 줄 ---------- */
.mt-stats{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:20px; }
.mt-stat{ padding:16px 18px; background:var(--ev-surface); border:1px solid var(--ev-line); border-radius:var(--r-md); }
.mt-stat__v{ font-size:1.5rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.mt-stat__l{ font-size:.8rem; color:var(--ev-text-3); margin-top:2px; }

/* ---------- 접근성 · 공통 안내 ---------- */
.mt-skip{
  position:fixed; z-index:1000; top:10px; left:10px; padding:10px 14px;
  border-radius:var(--r-md); background:var(--ev-text); color:var(--ev-bg);
  font-weight:800; transform:translateY(-160%);
}
.mt-skip:focus{ transform:translateY(0); }
.mt-footer{ margin-top:48px; border-top:1px solid var(--ev-line); background:rgba(8,12,28,.72); }
.mt-footer__inner{ padding-top:28px; padding-bottom:32px; display:grid; gap:14px; }
.mt-footer p{ max-width:78ch; color:var(--ev-text-2); line-height:1.7; }
.mt-footer nav{ display:flex; flex-wrap:wrap; gap:10px 18px; }
.mt-footer a{ color:var(--ev-text-2); text-decoration:underline; text-underline-offset:3px; }
.mt-footer a:hover{ color:var(--ev-text); }
.mt-textarea{ max-width:100%; }
.mt-account{ position:relative; border-bottom:1px solid var(--ev-line); background:rgba(13,19,42,.84); }
.mt-account__inner{ padding-top:16px; padding-bottom:16px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 20px; align-items:center; }
.mt-account strong{ display:inline-block; margin-left:10px; color:var(--ev-text); }
.mt-account p{ margin-top:6px; color:var(--ev-text-2); font-size:.88rem; line-height:1.55; }
.mt-account__actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.mt-account__actions .btn[disabled]{ opacity:.58; cursor:not-allowed; }
.mt-account__status{ grid-column:1/-1; padding-top:8px; border-top:1px dashed var(--ev-line); }

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
  .mt-room{ grid-template-columns:1fr; }
  .mt-aside{ position:static; }
  .mt-journal{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  :root{ --mt-gap:14px; }
  .mt-head{ padding-top:28px; }
  .mt-people{ grid-template-columns:1fr; }
  .mt-person, .mt-card, .mt-quote, .mt-step{ padding:18px; }
  .mt-filter__label{ min-width:auto; }
  .mt-footer{ margin-top:32px; }
  .mt-footer__inner{ padding-top:22px; padding-bottom:26px; }
  .mt-footer nav{ flex-direction:column; gap:12px; }
  .mt-account__inner{ grid-template-columns:1fr; }
  .mt-account strong{ display:block; margin:8px 0 0; }
  .mt-account__actions{ justify-content:flex-start; }
  .mt-account__actions .btn{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .mt-person, .mt-chip{ transition:none; }
  .mt-person:hover{ transform:none; }
}

/* Premium V6 — 밝은 교육 워크스페이스. 중앙 공통 CSS는 수정하지 않는다.
   2026-08-19: V5는 미문서화 상태로 방치되어 폰트(Pretendard→Arial 다운그레이드),
   그림자/블러/글로우, hover lift가 전부 제거된 채였음(밋밋/저가형으로 보이는 원인).
   라이트 팔레트 방향은 유지하되(학교·교육청 구매자 대상 신뢰감), 마감을 실제
   "유료 서비스" 수준으로 끌어올림: Pretendard 복원, 톤에 맞는 은은한 그림자·
   프로스티드 글래스 내비, 모던 라운딩, 원래 있던 hover 인터랙션 복원. */
:root{
  --ev-void:#f6f8f6;
  --ev-deep:#ffffff;
  --ev-nebula-1:#eef6f1;
  --ev-nebula-2:#f9fbfa;
  --ev-nebula-3:#eef7f3;
  --ev-surface:#ffffff;
  --ev-surface-2:#f4f8f6;
  --ev-surface-3:#eaf3ee;
  --ev-line:rgba(15,45,32,.10);
  --ev-line-strong:rgba(15,45,32,.20);
  --ev-text:#132019;
  --ev-text-2:#465650;
  --ev-text-3:#71827a;
  --ev-accent:#0a7a52;
  --ev-accent-2:#0d5f42;
  --ev-mint:#0a7a52;
  --ev-coral:#c23b52;
  --ev-cyan:#146e78;
  --ev-gold:#c9932f;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;
  --sh-1:0 1px 2px rgba(19,32,25,.05),0 1px 1px rgba(19,32,25,.04);
  --sh-2:0 20px 44px -18px rgba(10,90,60,.28),0 6px 16px rgba(19,32,25,.07);
  --glow:0 0 0 4px rgba(10,122,82,.14),0 10px 28px rgba(10,122,82,.22);
  --ev-blur:16px;
}
body{
  background:var(--ev-void);
}
.ev-space{background:radial-gradient(1200px 600px at 15% -8%,rgba(10,122,82,.08),transparent 60%),linear-gradient(180deg,#f9fbfa 0,#f2f7f4 100%)}
.ev-stars{display:none}
.nav{background:rgba(255,255,255,.72);box-shadow:0 1px 0 var(--ev-line),0 8px 24px -18px rgba(19,32,25,.18);backdrop-filter:blur(var(--ev-blur));-webkit-backdrop-filter:blur(var(--ev-blur))}
.logo__mark{background:radial-gradient(circle at 32% 30%,#bdeed4,var(--ev-accent) 42%,#0a4a34 100%);box-shadow:0 0 16px rgba(10,122,82,.45)}
.logo__mark::after{border-color:rgba(201,147,47,.55)}
.btn--primary{box-shadow:0 10px 28px rgba(10,122,82,.30)}
.btn--ghost{background:var(--ev-surface-2);border-color:var(--ev-line-strong)}
.badge--gold{background:rgba(201,147,47,.13);border-color:rgba(201,147,47,.32);color:var(--ev-gold)}
.badge--mint{background:rgba(10,122,82,.12);border-color:rgba(10,122,82,.3);color:var(--ev-mint)}
.badge--accent{background:rgba(10,122,82,.10);border-color:rgba(10,122,82,.26);color:var(--ev-accent-2)}
.badge--coral{background:rgba(194,59,82,.12);border-color:rgba(194,59,82,.3);color:var(--ev-coral)}
.mt-main{background:transparent}
.mt-account{background:var(--ev-surface-2);border-color:var(--ev-line)}
.mt-product-hero{margin-top:28px;padding:44px;border:1px solid var(--ev-line);border-radius:var(--r-xl);background:linear-gradient(165deg,#ffffff,#f4faf7 120%);box-shadow:var(--sh-2)}
.mt-journey{border:1px solid var(--ev-line);border-radius:var(--r-lg);padding:0;background:#fff;box-shadow:var(--sh-1)}
.mt-journey li{padding:16px 18px}
.mt-return{border:1px solid var(--ev-line);border-left:4px solid var(--ev-accent);border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-1)}
.mt-banner{background:linear-gradient(135deg,#fff6f7,#fff)}
.mt-stat,.mt-quick-concern,.mt-person,.mt-step,.mt-card,.mt-quote,.mt-entry{box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.mt-quick-concern:hover,.mt-quick-concern:focus-visible,.mt-person:hover{transform:translateY(-3px);border-color:var(--ev-accent);box-shadow:var(--sh-2)}
.mt-chip{border-radius:var(--r-pill)}
.mt-chip[aria-pressed="true"]{background:rgba(10,122,82,.12);color:var(--ev-accent-2);border-color:rgba(10,122,82,.3)}
.mt-person{border-radius:var(--r-lg)}
.mt-value{padding:34px;border:1px solid var(--ev-line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-1)}
.mt-footer{background:var(--ev-nebula-1)}
.mt-textarea{background:#fff}
.mt-textarea:focus{background:#fff;box-shadow:var(--glow)}
@media(max-width:900px){.mt-product-hero{margin-top:18px;padding:28px}}
@media(max-width:520px){
  .wrap{width:min(100% - 28px,var(--wrap))}
  .mt-product-hero{padding:24px 20px}
  .mt-quick-concerns{grid-template-columns:1fr}
  .mt-quick-concern{min-height:auto}
  .mt-value{padding:24px 18px}
}