/* 앱 화면. 리포트 스타일(templates/parent.css)과 분리한다 —
   리포트는 골든 산출물의 기준이라 손대면 안 된다. */
:root{
  --ink:#1c1b19; --muted:#6b6862; --line:#e3e0da; --bg:#fbfaf8;
  --accent:#2f5d50; --accent-soft:#e8f0ec; --err:#8a3b2e;
  --sans:'Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-text-size-adjust:100%;
  /* 한글은 어절 안에서 끊으면 안 된다. '학문 분/야에' 처럼 갈라진다. */
  word-break:keep-all;overflow-wrap:break-word}
.bar{border-bottom:1px solid var(--line);background:#fff;
  position:sticky;top:0;z-index:5}
/* 머리말 안쪽을 본문과 같은 폭으로 묶는다. 넓은 화면에서 브랜드만
   왼쪽 끝까지 가고 본문은 가운데 있어 어긋나 보였다. */
.bar > .in{max-width:1280px;margin:0 auto;padding:14px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.top-nav{display:flex;align-items:center;gap:4px;font-size:14px}
/* 누를 자리를 글자 높이로 두지 않는다. 손가락으로도 눌러야 한다. */
.top-nav a{text-decoration:none;padding:9px 11px;border-radius:9px;
  color:var(--ink);line-height:1.2}
.top-nav a:hover{background:var(--bg)}
.top-nav a.btn{color:#fff}
.top-nav a.btn:hover{background:var(--accent)}
.top-nav .link{padding:9px 11px}
.brand{font-weight:700;letter-spacing:-.01em;color:var(--ink);
  text-decoration:none;font-size:15.5px;line-height:1.25;
  padding:8px 10px;margin-left:-10px;border-radius:9px}
.brand:hover{background:var(--bg)}
main{max-width:820px;margin:0 auto;padding:28px 24px 72px}
footer{max-width:820px;margin:0 auto;padding:0 24px 44px;color:var(--muted);font-size:13px}
h1{font-size:26px;font-weight:700;letter-spacing:-.022em;margin:0 0 12px}
h2{font-size:19px;font-weight:700;letter-spacing:-.022em;margin:20px 0 8px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px;margin-bottom:20px}
.hero{padding:32px 4px}
.hero h1{font-size:30px;line-height:1.35}
.cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;
  border-radius:10px;padding:12px 20px;font:inherit;font-weight:600;
  text-decoration:none;cursor:pointer}
.btn.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.btn.small{padding:8px 14px;font-size:14px}
.btn.wide{width:100%}
.link{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;
  text-decoration:underline;padding:0}
form label{display:block;margin:14px 0;font-size:14px;color:var(--muted)}
input,select{display:block;width:100%;margin-top:6px;padding:11px 12px;
  border:1px solid var(--line);border-radius:9px;font:inherit;
  color:var(--ink);background:#fff}
input:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid .wide{grid-column:1/-1}
.check{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:15px}
.check input{width:auto;margin:0}
.err{background:#fbeeea;border:1px solid #e5cec7;color:var(--err);
  padding:11px 14px;border-radius:9px;font-size:14px}
.note{color:var(--muted);font-size:13.5px;margin-top:16px}
/* 잘 된 일. .err 과 같은 자리에 놓이므로 모양을 맞춘다. */
.ok{background:#eef5f0;border:1px solid #cfe0d5;color:#2f5d50;
  border-radius:10px;padding:12px 14px;margin:0 0 16px;font-size:14.5px}
.alt{margin-top:18px;font-size:14px}
a{color:var(--accent)}
.subject{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.subject:first-of-type{border-top:0;margin-top:0}
.meta{color:var(--muted);font-size:14px;margin:0 0 10px}
.sessions{list-style:none;padding:0;margin:0 0 12px;font-size:14px}
.sessions li{padding:7px 0;border-bottom:1px dashed var(--line)}
.pending{color:var(--muted)}
.token code{display:block;background:#f4f2ee;border:1px solid var(--line);
  border-radius:9px;padding:13px;font-size:13px;word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media (max-width:560px){ .grid{grid-template-columns:1fr} .hero h1{font-size:25px} }

/* 검토 화면 — 운영자용. 아이도 보호자도 보지 않는다 */
.badge{display:inline-block;background:var(--accent);color:#fff;font-size:13px;
  border-radius:11px;padding:1px 9px;vertical-align:middle;margin-left:6px}
.queue{list-style:none;padding:0;margin:12px 0 0}
.queue li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.queue.quiet{opacity:.7}
.tag{display:inline-block;background:#f0eeea;color:var(--muted);font-size:12px;
  border-radius:6px;padding:2px 8px;margin-left:6px}
.tag.warn{background:#fbeeea;color:#8a3b2e}
.panel{border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin:14px 0}
.panel.warn{background:#fdf6f3;border-color:#e5cec7}
.panel h2{margin:0 0 8px;font-size:15px}
.panel ul{margin:0;padding-left:18px;font-size:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.decide{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.decide form{margin:0}

/* 전문가 종합의견 입력 */
textarea{display:block;width:100%;margin-top:6px;padding:12px;
  border:1px solid var(--line);border-radius:9px;font:inherit;
  line-height:1.7;color:var(--ink);background:#fff;resize:vertical}
textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.quote{background:#f7f6f3;border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0;padding:12px 16px;white-space:pre-wrap;
  font-size:14.5px;margin:8px 0}
.quiet{color:var(--muted);font-size:13px}
.err ul{margin:8px 0 0;padding-left:18px}
.err li{margin-bottom:6px}

/* ── 첫 페이지 ──────────────────────────────────────────────
   본문 폭을 ch 로 제한하지 않는다. 제목과 오른쪽 끝이 어긋나 보인다
   (리포트에서 같은 문제를 이미 겪었다). */
.hero{padding:40px 0 8px}
.hero h1{font-size:30px;line-height:1.35;margin:0 0 14px;letter-spacing:-.024em}
.hero .tagline{font-size:17px;font-weight:600;color:var(--accent);margin:0 0 22px}
.hero .lede{font-size:17px;line-height:1.75;margin:0 0 26px}
.hero .sub{font-size:19px;font-weight:700;letter-spacing:-.018em;margin:0 0 10px}
.hero p{margin:0 0 14px}

.domains{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.domains h2{margin:0 0 16px}
.dgrid{list-style:none;padding:0;margin:0;display:grid;gap:12px;
  grid-template-columns:repeat(2,1fr)}
.dgrid li{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.dcode{font-size:11.5px;font-weight:700;color:var(--accent);
  letter-spacing:.06em}
.dgrid strong{font-size:16.5px;letter-spacing:-.018em}
.dplain{color:var(--muted);font-size:14px}

.btn.tiny{padding:7px 14px;font-size:13.5px;border-radius:8px}

@media (max-width:600px){
  .dgrid{grid-template-columns:1fr}
  .hero h1{font-size:25px}
  .hero{padding:28px 0 4px}
  /* 좁은 화면에서 이름이 두 줄이 되면 붙박이 머리말이 두꺼워진다.
     줄임말을 쓰지 않기로 했으므로(2026-08-22, Scott) 글자와 여백을 줄인다. */
  .bar{padding:9px 16px;gap:10px}
  .brand{font-size:11.5px;line-height:1.2;max-width:54vw}
  .top-nav{gap:10px;font-size:13.5px}
}
.legal{margin-top:6px;font-size:12px;opacity:.75}

/* 방침·약관 — 읽는 문서다. 폼보다 줄 간격을 넉넉히 둔다. */
.doc{max-width:760px;line-height:1.9}
.doc h2{font-size:18px;margin:30px 0 10px}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:20px}
.doc li{margin-bottom:7px}
.doc table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14.5px}
.doc th,.doc td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.doc th{font-size:13px;color:var(--muted);font-weight:600}

/* 아이 카드의 버튼 줄 */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* 되돌릴 수 없는 단추. 눈에 띄되 먼저 눌리지는 않게 둔다. */
.btn.danger{background:var(--err);color:#fff;border:0}
.btn.small.ghost.quiet{color:var(--muted);border-color:var(--line);font-size:13px}

/* ══════════════════ 참고 화면 (역량 맵 · 프로젝트) ══════════════════
 *
 * 로그인 전에 보는 화면이다. 읽는 문서에 가까우므로 본문(820px)보다 넓게
 * 쓰고, **왼쪽에 붙박이 메뉴**를 둔다. 밑줄 링크를 늘어놓는 대신
 * 고르는 자리를 한곳에 모은 것이다.
 *
 * 자바스크립트를 쓰지 않는다. 메뉴는 그냥 링크이고 상태는 주소가 정한다.
 */
main.wide{max-width:1280px}

/* 제목 · 메뉴 · 본문 셋을 격자에 놓는다. 넓은 화면에서는 제목이 위를
   가로지르고, 좁은 화면에서는 제목 → 메뉴 → 본문 순으로 쌓인다.
   메뉴가 제목보다 먼저 나오면 무엇을 고르는 화면인지 모르고 만나게 된다. */
.ref{display:grid;grid-template-columns:254px 1fr;gap:0 34px;align-items:start;
  grid-template-areas:"title title" "side body"}
.ref > .ref-title{grid-area:title}
.ref > .side{grid-area:side}
.ref > .ref-body{grid-area:body}
/* **그리드 자식은 기본 너비가 auto 라 내용만큼 벌어진다.**
   가로 스크롤을 안에서 처리하려면 min-width 를 0 으로 눌러야 한다.
   이걸 빼먹어서 휴대폰에서 메뉴가 화면을 1600px 로 밀어냈다. */
.ref > *{min-width:0}

/* ── 왼쪽 메뉴 ─────────────────────────────────────────────── */
/* **붙박이 메뉴는 화면보다 길 수 있다.** 그대로 두면 고정된 채 아래가
   화면 밖에 남아 영영 닿지 않는다 — 창을 줄여야만 보였다.
   화면 높이만큼만 쓰고 그 안에서 스크롤한다. */
.side{position:sticky;top:74px;padding-right:22px;
  border-right:1px solid var(--line);
  max-height:calc(100vh - 74px - 20px);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;
  padding-bottom:8px}
/* 스크롤 막대를 옅게. 늘 보이면 메뉴가 시끄럽다. */
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.side::-webkit-scrollbar-track{background:transparent}
.side section{margin-bottom:26px;min-width:0}
.side h2{font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px;padding:0 12px}

/* 둘 중 하나를 고르는 자리. 눌린 쪽이 분명히 보여야 한다. */
.seg{display:flex;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:3px;gap:3px}
.seg a{flex:1;text-align:center;font-size:13px;padding:8px 4px;border-radius:8px;
  text-decoration:none;color:var(--muted);white-space:nowrap;font-weight:500}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--accent);color:#fff;font-weight:600}

/* 목록형 메뉴. 항목마다 개수를 오른쪽에 붙인다. */
.menu{list-style:none;margin:0;padding:0}
.menu li{margin-bottom:1px}
.menu a{display:flex;align-items:center;gap:9px;padding:9px 12px;
  border-radius:9px;text-decoration:none;color:var(--ink);font-size:14px;
  line-height:1.35;position:relative}
.menu a:hover{background:#fff}
.menu a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.menu a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;
  width:3px;border-radius:2px;background:var(--accent)}
.menu .n{margin-left:auto;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.menu a.on .n{color:var(--accent)}
.menu .tag{font-size:11.5px;font-weight:700;letter-spacing:.05em;
  color:var(--muted);background:var(--bg);border-radius:5px;padding:2px 5px}
.menu a.on .tag{background:#fff;color:var(--accent)}

/* ── 오른쪽 본문 ───────────────────────────────────────────── */
.ref-title{margin:0 0 26px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.ref-title h1{font-size:33px;letter-spacing:-.032em;margin:0 0 11px}
.ref-title .lede{font-size:16.5px;line-height:1.85;color:var(--ink);
  margin:0 0 10px;max-width:62ch}
.ref-title .note{font-size:13.5px;line-height:1.8;color:var(--muted);
  margin:0;max-width:62ch}

.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--accent-soft);border-radius:11px;padding:11px 14px;
  margin:0 0 22px;font-size:14px;color:var(--accent)}
.filterbar strong{font-weight:700}
.filterbar .clear{margin-left:auto;font-size:13px;text-decoration:none;
  color:var(--accent);border:1px solid rgba(47,93,80,.28);background:#fff;
  border-radius:999px;padding:6px 12px;white-space:nowrap}
.filterbar .clear:hover{border-color:var(--accent)}

.block{margin:0 0 34px;scroll-margin-top:82px}
.block > header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 15px}
.block > header h2{font-size:20px;margin:0;letter-spacing:-.026em}
.block .sub{margin:0;font-size:13.5px;color:var(--muted)}
.n-pill{font-size:12px;font-weight:600;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;
  font-variant-numeric:tabular-nums}
.code-pill{font-size:11.5px;font-weight:700;letter-spacing:.07em;
  color:var(--accent);background:var(--accent-soft);border-radius:6px;
  padding:3px 8px}

/* ── 박스 ─────────────────────────────────────────────────── */
.boxes{list-style:none;margin:0;padding:0;display:grid;gap:13px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
/* 역량은 영역마다 넷이다. auto-fill 로 두면 3+1 로 갈라져 빈자리가 생긴다. */
.boxes.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1080px){.boxes.pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.boxes.pair{grid-template-columns:1fr}}
.box{background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:17px 19px 15px;display:flex;flex-direction:column;gap:7px;
  transition:border-color .12s,box-shadow .12s,transform .12s}
.box:hover{border-color:#cfd8d2;box-shadow:0 3px 14px rgba(28,27,25,.05);
  transform:translateY(-1px)}
.box .top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:11px}
.box h3{font-size:16px;margin:0;line-height:1.42;letter-spacing:-.018em}
.box .meta{font-size:12.5px;color:var(--muted);margin:0;line-height:1.55}
.box .desc{font-size:13.8px;line-height:1.8;color:#3d3b37;margin:0}
.box .foot{margin-top:auto;padding-top:9px;font-size:12px;color:var(--muted)}

/* 난이도 — 등급이 아니라 눈금이다. 숫자를 크게 쓰지 않는다. */
.dots{display:inline-flex;gap:3px;flex:0 0 auto;padding-top:5px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line);display:block}
.dots i.on{background:#9aa39d}
.legend{display:flex;flex-direction:column;gap:7px;padding:0 12px}
.legend span{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--muted)}
.legend .dots{padding-top:0}

/* ── 랜딩의 미리보기 카드 둘 ──────────────────────────────── */
.peek{max-width:980px;margin:34px auto 0;display:grid;gap:16px;
  grid-template-columns:1fr 1fr}
.peekcard{display:block;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:26px 28px 22px;text-decoration:none;color:inherit;
  transition:border-color .12s,box-shadow .12s,transform .12s}
.peekcard:hover{border-color:#cfd8d2;box-shadow:0 4px 18px rgba(28,27,25,.06);
  transform:translateY(-1px)}
.peekcard h2{font-size:21px;margin:0 0 9px;letter-spacing:-.025em}
.peekcard p{font-size:14.5px;line-height:1.85;color:var(--muted);margin:0 0 14px}
.peekcard .go{font-size:14px;color:var(--accent);font-weight:600}

/* **갈림목을 낮춘다.** 900px 로 두었더니 태블릿 세로(768~834)와 창을
   반만 연 노트북이 전부 접힌 화면을 받았다 — Scott 이 800px 에서
   "좌측 메뉴가 전혀 없다" 고 한 것이 이것이다.
   메뉴는 176px 이면 충분히 읽힌다. 접는 것은 정말 좁을 때만 한다. */
@media(max-width:1080px){
  .ref{grid-template-columns:198px 1fr;gap:0 22px}
  .side{padding-right:18px}
  .side h2{padding:0 9px}
  .menu a{padding:8px 9px;font-size:13.5px;gap:6px}
  .menu .n{font-size:11.5px}
  .seg a{font-size:12.5px;padding:8px 3px}
  .boxes{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
}

/* 손가락으로 누르는 화면에서는 누를 자리를 키운다. */
@media(pointer:coarse){
  .menu a{padding-top:11px;padding-bottom:11px}
  .seg a{padding-top:11px;padding-bottom:11px}
}

/* 참고 화면 둘을 더하면서 머리말이 좁은 폰에서 넘쳤다.
   브랜드를 첫 줄, 메뉴를 둘째 줄로 접는다. */
@media(max-width:560px){
  /* 폰에서는 머리말을 붙박이로 두지 않는다. 두 줄로 접히면 화면의
     1/7 을 계속 차지한다 — 긴 목록을 읽는 화면이라 더 아깝다. */
  .bar{position:static}
  .bar > .in{flex-wrap:wrap;padding:9px 16px;gap:4px}
  .brand{font-size:14.5px;padding:5px 8px;margin-left:-8px}
  .top-nav{width:100%;justify-content:flex-start;gap:0;flex-wrap:nowrap;
    font-size:13px;overflow-x:auto;scrollbar-width:none}
  .top-nav::-webkit-scrollbar{display:none}
  .top-nav a{padding:7px 8px;white-space:nowrap}
  .top-nav .btn.tiny{margin-left:4px}
  main{padding:22px 16px 60px}
  footer{padding:0 16px 36px}
}

@media(max-width:700px){
  .ref{grid-template-columns:1fr;gap:0;
    grid-template-areas:"title" "side" "body"}
  .ref > .side{margin-bottom:22px}
  .side{position:static;padding-right:0;border-right:0;
    padding-bottom:18px;border-bottom:1px solid var(--line);
    max-height:none;overflow:visible}
  .side section{margin-bottom:16px}
  .side h2{padding:0}
  /* **접었을 때 가로 스크롤을 쓰지 않는다.** 스크롤 안에 숨은 항목은
     없는 것과 같다. 줄바꿈으로 전부 보이게 한다. */
  .menu{display:flex;flex-wrap:wrap;gap:7px}
  .menu li{margin:0}
  /* 손가락으로 누르는 자리는 44px 에 가깝게 둔다. */
  .menu a{border:1px solid var(--line);background:#fff;
    border-radius:999px;padding:12px 14px;font-size:13.5px}
  .menu a.on::before{display:none}
  .menu a.on{border-color:var(--accent)}
  .legend{flex-direction:row;flex-wrap:wrap;gap:12px;padding:0}
  .ref-title h1{font-size:27px}
  .peek{grid-template-columns:1fr}
  .boxes{grid-template-columns:1fr}
}

/* ── 찾기 ─────────────────────────────────────────────────────
 * 자바스크립트를 쓰지 않는다. 보내면 주소가 되고 그 주소를 그대로
 * 남에게 보낼 수 있다. */
.find{display:flex;gap:6px}
.find input{flex:1;min-width:0;font:inherit;font-size:13.5px;
  padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink)}
.find input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.find button{font:inherit;font-size:13px;font-weight:600;padding:9px 12px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  border-radius:9px;cursor:pointer;white-space:nowrap}
.find button:hover{filter:brightness(1.08)}
.findnote{margin:8px 0 0;padding:0 2px;font-size:12.5px}
.findnote a{color:var(--muted)}

/* 찾은 낱말. 밑줄이 아니라 옅은 바탕으로 — 글줄이 흔들리지 않는다. */
mark{background:#fdf0cf;color:inherit;border-radius:3px;padding:0 2px}