/* 생각 뻗기 · ITT 튜터 — 공통 디자인
 *
 * 페이지마다 색과 글꼴을 따로 적어 두면 반드시 어긋난다.
 * 여기 한 곳에만 두고, 각 페이지는 이 파일을 **자기 <style> 뒤에** 불러온다.
 * 그러면 색·글꼴은 여기 것이 이기고, 페이지마다 다른 배치는 그대로 남는다.
 *
 * 이름이 두 벌인 까닭 — 예전 화면은 --ground/--surface 를,
 * 새 화면은 --paper/--card 를 쓴다. 둘 다 같은 값을 가리키게 해 두었다.
 */

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Jua&family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  /* 바탕과 글자 */
  --paper:#FFFFFF;  --ground:#FFFFFF;
  --card:#FFFFFF;   --surface:#FFFFFF;
  --sunk:#F5F3ED;   --surface-2:#F5F3ED;   /* Cream */
  --sky:#EFF5EE;
  --ink:#1C2A22; --ink-2:#4E5C53; --ink-3:#8A968D;
  --line:#E0E2D8;  --rule:#E0E2D8;

  /* 고르는 색 */
  --accent:#3F7A55; --accent-soft:#E4F0E7; --accent-ink:#2C5A3E; --on-accent:#FFFFFF;
  --accent-deep:#2C5A3E;  /* 단추 두께 — 언제나 강조색보다 진하다 */
  --hot:#F9A620;    /* Marigold — 신청·결제 단추 */
  --on-hot:#3A2B00; /* Marigold 위에는 흰 글자가 안 보인다 (대비 2.0:1) */
  --sun:#FFD166;
  --glow:#FFE08A;   /* 초록 띠 위의 강조 */

  /* 알림 */
  --good:#2F8F63; --good-soft:#DFF1E6;
  --bad:#B7472A;  --bad-soft:#FAE7E1;   /* Terracotta */
  --warn:#C77A12; --warn-soft:#FBEFD9; --warn-ink:#7A4A05;

  /* 훈련 화면의 여섯 영역 — 이 색들이 서비스의 얼굴이다 */
  --cat:#6B5CE7;  --attr:#12A5B8; --func:#4CA845;
  --rel:#E08A16;  --feel:#DB5C8C; --opp:#7A8296;
  --c1:#6B5CE7; --c2:#12A5B8; --c3:#4CA845; --c4:#E08A16; --c5:#DB5C8C; --c6:#7A8296;

  /* 글꼴 */
  --heavy:'Black Han Sans','Jua','IBM Plex Sans KR',system-ui,sans-serif;  /* 첫 화면 큰 제목 */
  --display:'Jua','IBM Plex Sans KR',system-ui,sans-serif;                 /* 보통 제목 */
  --body:'IBM Plex Sans KR',system-ui,-apple-system,'Malgun Gothic',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#12170F;  --ground:#12170F;
    --card:#1A2117;   --surface:#1A2117;
    --sunk:#1E261B;   --surface-2:#1E261B;
    --sky:#182016;
    --ink:#ECF1E8; --ink-2:#AEBBA8; --ink-3:#7E8C79;
    --line:#2C3628;  --rule:#2C3628;

    --accent:#7CC48D; --accent-soft:#22301F; --accent-ink:#B7E3C0; --on-accent:#0D1409;
  --accent-deep:#3E6B4A;
    --accent-deep:#3E6B4A;
    --hot:#F9A620; --on-hot:#2A1E00;
    --sun:#FFD166; --glow:#FFE08A;
    --good:#6FCF97; --good-soft:#16301F;
    --bad:#E58063;  --bad-soft:#331A12;
    --warn:#EDB45C; --warn-soft:#2E2610; --warn-ink:#E8C685;

    --cat:#9A8DFF; --attr:#3FC7DA; --func:#79D26F;
    --rel:#F5B44A; --feel:#F186AE; --opp:#98A0B4;
    --c1:#9A8DFF; --c2:#3FC7DA; --c3:#79D26F; --c4:#F5B44A; --c5:#F186AE; --c6:#98A0B4;
  }
}
:root[data-theme="dark"]{
  --paper:#12170F;  --ground:#12170F;
  --card:#1A2117;   --surface:#1A2117;
  --sunk:#1E261B;   --surface-2:#1E261B;
  --sky:#182016;
  --ink:#ECF1E8; --ink-2:#AEBBA8; --ink-3:#7E8C79;
  --line:#2C3628;  --rule:#2C3628;

  --accent:#7CC48D; --accent-soft:#22301F; --accent-ink:#B7E3C0; --on-accent:#0D1409;
  --hot:#F9A620; --on-hot:#2A1E00;
  --sun:#FFD166; --glow:#FFE08A;
  --good:#6FCF97; --good-soft:#16301F;
  --bad:#E58063;  --bad-soft:#331A12;
  --warn:#EDB45C; --warn-soft:#2E2610; --warn-ink:#E8C685;

  --cat:#9A8DFF; --attr:#3FC7DA; --func:#79D26F;
  --rel:#F5B44A; --feel:#F186AE; --opp:#98A0B4;
  --c1:#9A8DFF; --c2:#3FC7DA; --c3:#79D26F; --c4:#F5B44A; --c5:#F186AE; --c6:#98A0B4;
}

/* ── 어느 페이지에나 걸리는 최소한만 ──────────────────────
   배치는 페이지마다 다르므로 건드리지 않는다. 글꼴과 초점 표시만. */
body{ font-family:var(--body); }
h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:-.01em; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ── 어느 페이지에서나 같은 모양이어야 하는 것 ────────────
   .brandbar 를 넣은 페이지는 머리띠가 홈페이지와 같아진다. */
/* 페이지마다 배치가 달라(가운데 정렬 등) 흐름에 두면 엉뚱한 자리로 간다.
   맨 위에 붙박아 두고, 띠가 있는 페이지에만 그만큼 자리를 비운다. */
.brandbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:color-mix(in srgb, var(--sunk) 94%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); font-size:13px;
}
body:has(> .brandbar){ padding-top:46px; }
.brandbar .in{
  max-width:1140px; margin:0 auto; padding:10px 22px;
  display:flex; align-items:center; gap:14px;
}
.brandbar .logo{
  font-family:var(--heavy); font-size:19px; text-decoration:none;
  color:var(--ink); letter-spacing:-.02em; white-space:nowrap;
}
.brandbar .logo i{ font-style:normal; color:var(--accent); }
.brandbar .logo .slash{ color:var(--ink-3); font-family:var(--body); font-weight:400; margin:0 2px; }
.brandbar nav{ margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
.brandbar nav a{
  color:var(--ink-2); text-decoration:none; padding:6px 10px; border-radius:9px;
}
.brandbar nav a:hover{ background:var(--card); color:var(--ink); }
.brandbar nav a.cta{ background:var(--hot); color:#fff; font-weight:700; }
.brandbar nav a.cta:hover{ filter:brightness(1.07); }
@media (max-width:640px){ .brandbar nav a.hide{ display:none; } }