/* ============================================================
   0. 토큰
   ============================================================ */
:root{
  --paper:#ffffff;
  --ink:#1b1b1b;
  --line:#8b8b8b;      /* 표 실선 */
  --line-soft:#c4c4c4; /* 보조선 */
  --line-hard:#2b2b2b; /* 굵은 구분선 */
  --band:#dfe2d2;      /* 섹션 헤더 띠 (숙제/MEMO) */
  --shell-bg:#eceae5;
  --shell-fg:#1b1b1b;
  --shell-card:#ffffff;
  --shell-muted:#5f5c56;
  --shell-border:#d6d2ca;
  --accent:#c0392b;     /* 계획 / 매니저 강조 */
  --accent2:#1d6fb8;    /* 실행 / 학생 강조 */
  --accent3:#2e7d4f;    /* 마무리 */
  --hand:#1746a0;       /* 예시 필기 색 */

  --spread-w:1120px;
  --rail-w:112px;
  --row-h:23px;
  --rail-row-h:25.5px;
}
@media (prefers-color-scheme: dark){
  :root{
    --shell-bg:#16181b; --shell-fg:#e9e7e3; --shell-card:#1e2125;
    --shell-muted:#a2a09b; --shell-border:#34383d;
  }
}
:root[data-theme="dark"]{
  --shell-bg:#16181b; --shell-fg:#e9e7e3; --shell-card:#1e2125;
  --shell-muted:#a2a09b; --shell-border:#34383d;
}
:root[data-theme="light"]{
  --shell-bg:#eceae5; --shell-fg:#1b1b1b; --shell-card:#ffffff;
  --shell-muted:#5f5c56; --shell-border:#d6d2ca;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--shell-bg); color:var(--shell-fg);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1240px;margin:0 auto;padding:28px 20px 90px}

/* ============================================================
   1. 상단 헤더 / 모드 전환
   ============================================================ */
header.top{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;
  border-bottom:2px solid var(--shell-fg);padding-bottom:14px;margin-bottom:22px;
}
header.top h1{font-size:26px;margin:0;letter-spacing:-.02em;font-weight:800}
header.top h1 small{display:block;font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--shell-muted);margin-bottom:4px}
.modeswitch{display:flex;gap:0;border:1.5px solid var(--shell-fg);border-radius:2px;overflow:hidden}
.modeswitch button{
  appearance:none;border:0;background:transparent;color:var(--shell-fg);
  font:inherit;font-weight:700;font-size:13px;padding:9px 18px;cursor:pointer;
}
.modeswitch button + button{border-left:1.5px solid var(--shell-fg)}
.modeswitch button[aria-pressed="true"]{background:var(--shell-fg);color:var(--shell-bg)}

/* ============================================================
   2. 본문 카드
   ============================================================ */
section.block{
  background:var(--shell-card);border:1px solid var(--shell-border);border-radius:3px;
  padding:22px 24px;margin-bottom:20px;
}
section.block > h2{
  font-size:17px;margin:0 0 4px;font-weight:800;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px;
}
section.block > h2 .num{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--shell-fg);color:var(--shell-card);font-size:11px;font-weight:800;flex:none;
}
section.block > .sub{color:var(--shell-muted);font-size:13px;margin:0 0 16px}
.block h3{font-size:14.5px;font-weight:800;margin:20px 0 8px}
.block p{margin:0 0 10px}
.block ul,.block ol{margin:0 0 10px;padding-left:20px}
.block li{margin-bottom:5px}
.block li::marker{color:var(--shell-muted)}
.lede{
  border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:0 0 18px;
  font-size:14.5px;font-weight:600;
}
.callout{
  border:1px solid var(--shell-border);border-left:3px solid var(--accent3);
  background:color-mix(in srgb,var(--accent3) 6%,transparent);
  padding:12px 15px;border-radius:2px;margin:14px 0;font-size:13.5px;
}
.callout.warn{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.callout strong{font-weight:800}
mark{background:color-mix(in srgb,var(--accent) 22%,transparent);color:inherit;padding:0 2px;border-radius:2px}

/* 하루 흐름 */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 4px}
.flow .step{
  border:1.5px solid var(--shell-fg);border-radius:2px;padding:6px 11px;
  font-size:12.5px;font-weight:700;white-space:nowrap;
}
.flow .step.key{background:var(--shell-fg);color:var(--shell-card)}
.flow .arw{color:var(--shell-muted);font-size:13px}

/* 단계 카드 */
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:6px}
.phase{border:1px solid var(--shell-border);border-top:3px solid var(--pc,var(--accent));border-radius:2px;padding:13px 15px}
.phase h4{margin:0 0 3px;font-size:13.5px;font-weight:800}
.phase .when{font-size:11.5px;color:var(--shell-muted);font-weight:700;letter-spacing:.04em;margin-bottom:8px}
.phase ol{margin:0;padding-left:17px;font-size:13px}
.phase li{margin-bottom:3px}

/* 체크리스트 */
.checks{list-style:none;padding:0;margin:0}
.checks li{
  display:flex;gap:10px;align-items:flex-start;padding:9px 0;
  border-bottom:1px dashed var(--shell-border);font-size:13.5px;
}
.checks li:last-child{border-bottom:0}
.checks li::before{
  content:"";width:14px;height:14px;flex:none;margin-top:4px;
  border:1.5px solid var(--shell-fg);border-radius:1px;
}
.checks li b{font-weight:800}

/* 무너지는 지점 표 */
table.fail{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
table.fail th,table.fail td{border:1px solid var(--shell-border);padding:9px 11px;text-align:left;vertical-align:top}
table.fail th{background:color-mix(in srgb,var(--shell-fg) 6%,transparent);font-weight:800;font-size:12.5px;white-space:nowrap}
table.fail td:first-child{font-weight:700;width:28%}

/* ============================================================
   3. 플래너 도구 막대
   ============================================================ */
.toolbar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 14px;padding-bottom:14px;border-bottom:1px dashed var(--shell-border);
}
.toolbar .t{
  appearance:none;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  border:1.5px solid var(--shell-border);background:transparent;color:var(--shell-fg);
  padding:7px 13px;border-radius:2px;
}
.toolbar .t[aria-pressed="true"]{border-color:var(--shell-fg);background:var(--shell-fg);color:var(--shell-card)}
.toolbar .hint{font-size:12.5px;color:var(--shell-muted);margin-left:auto}

.stage{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:18px;align-items:start}
@media (max-width:1080px){.stage{grid-template-columns:minmax(0,1fr)}}
.scroller{overflow-x:auto;padding-bottom:8px}

/* ============================================================
   4. 실제 셀프리더 (좌표 재현)
   ============================================================ */
.spread{
  width:var(--spread-w);
  display:grid;grid-template-columns:1fr 46px 1fr;
  background:var(--paper);color:var(--ink);
  border:1px solid #b9b9b9;padding:16px 14px;
  font-family:"Malgun Gothic","맑은 고딕",sans-serif;
  transform-origin:top left;
}
.page{display:flex;flex-direction:column;min-width:0}
.page.left{padding-right:10px}
.page.right{padding-left:10px}

/* --- 상단 헤더 밴드 --- */
.sheet-hd{
  border-top:2px solid var(--line-hard);border-bottom:2px solid var(--line-hard);
  display:grid;height:52px;
}
.page.left  .sheet-hd{grid-template-columns:1fr 168px 168px}
.page.right .sheet-hd{grid-template-columns:1fr 132px 132px}
.sheet-hd .cell{padding:5px 8px 0;position:relative;display:flex;flex-direction:column}
.sheet-hd .cell + .cell{border-left:1px solid var(--line)}
.sheet-hd .lbl{font-size:9.5px;color:#3a3a3a;letter-spacing:-.02em}
.sheet-hd .val{flex:1;display:flex;align-items:center;font-size:13px}

/* --- 본문: 시간 레일 + 내용 --- */
.page-body{display:grid;grid-template-columns:var(--rail-w) 1fr;flex:1}

/* 시간 레일 */
.rail{display:flex;flex-direction:column;padding-top:6px;padding-right:8px}
.rail-hd{
  display:grid;grid-template-columns:20px 1fr 1fr;font-size:9.5px;text-align:center;
  border-bottom:1px solid var(--line-hard);padding-bottom:2px;margin-bottom:2px;
}
.rail-hd span:nth-child(2),.rail-hd span:nth-child(3){letter-spacing:-.03em}
.rail-grid{flex:1;display:grid;grid-template-rows:repeat(24,var(--rail-row-h));position:relative}
.rail-row{display:grid;grid-template-columns:20px 1fr 1fr;position:relative}
.rail-row .h{
  grid-column:1;font-size:9px;color:#333;text-align:right;padding-right:2px;
  transform:translateY(-6px);line-height:1;
}
.rail-row .tick{grid-column:2;border-top:1px solid #666;transform:translateY(-1px)}
.rail-row .open{grid-column:3;border-top:1px solid #666;transform:translateY(-1px)}
.rail-grid::after{ /* 계획 | 실행 구분선 */
  content:"";position:absolute;left:calc(20px + (100% - 20px)/2);top:0;bottom:0;
  border-left:1px dotted #9a9a9a;
}
.rail-grid .noon{border-top-color:#222;border-top-width:1.4px}

/* 좌측 내용 컬럼 */
.left-col{display:flex;flex-direction:column;gap:9px;padding-top:6px;min-width:0}

/* 과업 표 */
table.grid{width:100%;border-collapse:collapse;table-layout:fixed}
table.grid th,table.grid td{
  border:1px solid var(--line);font-size:10.5px;height:var(--row-h);padding:0 3px;
  text-align:center;overflow:hidden;white-space:nowrap;
}
table.grid thead th{
  border-top:1.6px solid var(--line-hard);border-bottom:1.6px solid var(--line-hard);
  font-weight:400;font-size:10px;background:transparent;
}
table.grid td.l{text-align:left;padding-left:5px}
table.grid td.no{color:#444;font-size:9.5px}
/* CHAMP 셀 */
td.champ{letter-spacing:0;padding:0}
td.champ .c{
  display:inline-grid;place-items:center;width:11px;height:15px;
  font-size:8.25px;color:#8a8a8a;font-family:Arial,sans-serif;
}
td.champ .c.on{
  color:#111;font-weight:700;border:1.2px solid #111;border-radius:50%;
}
/* 성취도: 내부 4분할 */
td.score{background:
  repeating-linear-gradient(to right,transparent 0 24%,var(--line-soft) 24% calc(24% + 1px));
  background-size:100% 100%;font-size:10px;
}
/* 이해도 FCBAS */
td.fcbas{padding:0;font-family:Arial,sans-serif;font-size:9.5px;color:#8a8a8a;letter-spacing:.5px}
td.fcbas .c{display:inline-grid;place-items:center;width:14px;height:15px}
td.fcbas .c.on{color:#111;font-weight:700;border:1.2px solid #111;border-radius:50%}

/* 밴드 섹션 (숙제 / 공부 외 할일 / MEMO) */
.band{background:var(--band);font-size:10px;padding:2px 7px;border-top:1px solid #b0b0b0;letter-spacing:-.02em}
.ruled{border-top:0}
.ruled .rl{display:grid;grid-template-columns:26px 118px 1fr;height:25px;border-bottom:1px solid var(--line-soft)}
.ruled .rl.nobox{grid-template-columns:118px 1fr}
.memo .ruled .rl.nobox{grid-template-columns:158px 1fr}
.ruled .rl .bx{display:grid;place-items:center}
.ruled .rl .bx i{display:block;width:11px;height:11px;border:1px solid #777}
.ruled .rl .c1{border-right:1px solid var(--line-soft);padding:0 5px;font-size:10.5px;display:flex;align-items:center}
.ruled .rl .c2{padding:0 6px;font-size:10.5px;display:flex;align-items:center}

/* 우측 페이지 */
.right-col{display:flex;flex-direction:column;gap:9px;padding-top:6px;flex:1;min-width:0}
.memo{flex:1;display:flex;flex-direction:column}
.memo .lines{flex:1;min-height:230px}

/* 제본 스프링 */
.binding{display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:26px 0}
.binding i{
  display:block;width:30px;height:9px;border-radius:2px;
  background:linear-gradient(#6f6f6f,#2c2c2c 45%,#6f6f6f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.foot{font-size:8.5px;letter-spacing:.14em;color:#555;padding-top:5px}
.page.right .foot{text-align:right}

/* --- 구역 하이라이트 / 배지 --- */
[data-zone]{position:relative;cursor:pointer}
[data-zone].hot{outline:2px solid var(--zc,var(--accent));outline-offset:1px;background:color-mix(in srgb,var(--zc,var(--accent)) 9%,transparent)}
[data-zone]:hover{background:color-mix(in srgb,var(--zc,var(--accent)) 6%,transparent)}
.badge{
  position:absolute;z-index:5;width:15px;height:15px;border-radius:50%;
  background:var(--zc,var(--accent));color:#fff;font-size:8.5px;font-weight:800;
  display:none;place-items:center;font-family:Arial,sans-serif;
  box-shadow:0 0 0 1px #fff;pointer-events:none;
}
.spread.show-order .badge{display:grid}
/* 배지 위치 프리셋 */
.badge.tl{top:3px;left:3px}
.badge.tr{top:3px;right:3px}
.badge.ml{top:50%;left:3px;transform:translateY(-50%)}
.sheet-hd [data-zone] .lbl{padding-left:19px}
.rail-hd [data-zone]{min-height:20px;display:flex;align-items:center;justify-content:center}
.rail-hd [data-zone]:has(.badge.tl){padding-left:15px}
.rail-hd [data-zone]:has(.badge.tr){padding-right:15px}
table.grid thead th[data-zone]:has(.badge.tl){padding-left:17px}
table.grid thead th[data-zone]:has(.badge.tr){padding-right:17px}
[data-zone] > .band{min-height:20px;padding-left:24px}

/* 예시 필기 */
.hand{color:var(--hand);font-family:"Gaegu","Nanum Pen Script","Malgun Gothic",cursive,sans-serif;font-size:11px}
.spread:not(.show-sample) .hand{visibility:hidden}
.spread:not(.show-sample) td.champ .c.on,
.spread:not(.show-sample) td.fcbas .c.on{color:#8a8a8a;font-weight:400;border-color:transparent}
/* 예시 계획/실행 타임 블록 */
.time-block{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  min-height:2px;padding:1px 2px;border:1.5px solid currentColor;border-radius:2px;
  overflow:hidden;color:#fff;font-size:8px;font-weight:800;line-height:1.1;text-align:center;
  text-shadow:0 1px 1px rgba(0,0,0,.18);pointer-events:none;
}
.time-block::before,.time-block::after{
  content:"";position:absolute;left:-1px;right:-1px;height:2px;background:currentColor;
}
.time-block::before{top:-1px}
.time-block::after{bottom:-1px}
.time-block.plan{
  left:22px;width:calc((100% - 20px)/2 - 4px);
  color:#a82c20;background:color-mix(in srgb,var(--accent) 78%,white);
}
.time-block.exec{
  left:calc(20px + (100% - 20px)/2 + 2px);width:calc((100% - 20px)/2 - 4px);
  color:#155f98;background:color-mix(in srgb,var(--accent2) 78%,white);
}
.time-block .block-label{color:#fff;white-space:normal;word-break:keep-all}
.time-block.has-task{gap:2px;padding-left:1px;padding-right:1px}
.time-block .block-order{
  display:grid;place-items:center;flex:none;width:13px;height:13px;border-radius:50%;
  background:#fff;color:inherit;font:800 8px/1 Arial,sans-serif;text-shadow:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.1);
}
.time-block.compact .block-label{display:none}
.spread:not(.show-sample) .time-block{display:none}

/* ============================================================
   5. 설명 패널
   ============================================================ */
.panel{
  position:sticky;top:16px;border:1px solid var(--shell-border);border-radius:3px;
  background:var(--shell-card);padding:0;overflow:hidden;
}
.panel .ph{padding:13px 16px;border-bottom:1px solid var(--shell-border);background:color-mix(in srgb,var(--shell-fg) 4%,transparent)}
.panel .ph .k{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--shell-muted)}
.panel .ph h3{margin:2px 0 0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.panel .ph h3 .o{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--zc,var(--accent));color:#fff;font-size:11px;font-weight:800;flex:none;
}
.panel .pb{padding:15px 16px;font-size:13.5px}
.panel .pb .when{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;
  border:1px solid var(--zc,var(--accent));color:var(--zc,var(--accent));
  padding:2px 8px;border-radius:99px;margin-bottom:10px;
}
.panel .pb p{margin:0 0 9px}
.panel .pb ul{margin:0 0 9px;padding-left:18px}
.panel .pb li{margin-bottom:4px}
.panel .pb .no{
  margin-top:12px;padding:9px 11px;border-radius:2px;font-size:12.5px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-left:3px solid var(--accent);
}
.panel .pb .no b{font-weight:800}
.zonenav{display:flex;flex-wrap:wrap;gap:5px;padding:0 16px 15px}
.zonenav button{
  appearance:none;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  border:1px solid var(--shell-border);background:transparent;color:var(--shell-muted);
  padding:4px 9px;border-radius:99px;
}
.zonenav button[aria-current="true"]{border-color:var(--shell-fg);color:var(--shell-fg)}

/* 범례 */
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--shell-muted);margin-top:12px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:2px;display:block}

/* 모드별 노출 */
[data-show]{display:none}
body[data-mode="manager"] [data-show~="manager"],
body[data-mode="student"] [data-show~="student"]{display:block}

@media print{
  body{background:#fff}
  .toolbar,.modeswitch,.zonenav{display:none}
  .stage{grid-template-columns:1fr}
  .spread{width:100%;transform:none}
  section.block{break-inside:avoid;border-color:#ccc}
}

/* ============================================================
   6. MAKEOVER — 교육 흐름과 플래너를 중심으로 한 화면
   ============================================================ */
:root{
  --shell-bg:#f2efe7;
  --shell-fg:#17312f;
  --shell-card:#fffdf8;
  --shell-muted:#6b716d;
  --shell-border:#ddd8cd;
  --accent:#e2503f;
  --accent2:#2879b9;
  --accent3:#278467;
  --brand:#062b49;
  --brand-2:#041f35;
  --sun:#ffdf00;
  --paper:#fffefb;
  --shadow:0 20px 60px rgba(20,49,46,.09);
}
@media (prefers-color-scheme:dark){
  :root{
    --shell-bg:#f2efe7;--shell-fg:#17312f;--shell-card:#fffdf8;
    --shell-muted:#6b716d;--shell-border:#ddd8cd;
  }
}
:root[data-theme="dark"],:root[data-theme="light"]{
  --shell-bg:#f2efe7;--shell-fg:#17312f;--shell-card:#fffdf8;
  --shell-muted:#6b716d;--shell-border:#ddd8cd;
}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  min-width:320px;
  background:
    radial-gradient(circle at 8% 2%,rgba(240,184,63,.13),transparent 27rem),
    radial-gradient(circle at 96% 22%,rgba(39,132,103,.09),transparent 31rem),
    var(--shell-bg);
  font-family:"Pretendard Variable","Pretendard","SUIT Variable","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px;line-height:1.72;
}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,[data-zone]:focus-visible{
  outline:3px solid var(--sun);outline-offset:3px;
}
.wrap{max-width:1320px;padding:0 24px 110px}

/* 히어로 */
header.top{
  position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  align-items:stretch;gap:0;margin:0 calc(50% - 50vw) 28px;padding:0 max(24px,calc((100vw - 1272px)/2));
  overflow:hidden;border:0;background:var(--brand);color:#fff;
}
header.top::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(115deg,transparent 48%,rgba(255,255,255,.045) 48% 49%,transparent 49%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.025) 79px 80px);
}
.hero-copy{position:relative;padding:58px 54px 54px 0;z-index:1}
.brandline{display:flex;align-items:center;gap:11px;margin-bottom:32px}
.brandmark{
  display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.34);
  border-radius:12px;color:var(--sun);
}
.brandmark img{display:block;width:23px;height:21px;object-fit:contain}
.brandline strong{font-size:12px;letter-spacing:.22em}
.brandline span:last-child{font-size:11px;color:rgba(255,255,255,.58);letter-spacing:.08em}
header.top h1{max-width:720px;margin:0 0 18px;font-size:clamp(38px,5vw,68px);line-height:1.07;letter-spacing:-.055em;font-weight:850}
header.top h1 em{font-style:normal;color:var(--sun)}
header.top .hero-lede{max-width:680px;margin:0;color:rgba(255,255,255,.75);font-size:17px;line-height:1.75;word-break:keep-all}
.hero-rule{display:flex;align-items:center;gap:12px;margin-top:28px;color:#fff;font-size:14px;font-weight:750}
.hero-rule i{display:block;width:34px;height:2px;background:var(--sun)}

.hero-console{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  padding:46px 0 46px 54px;border-left:1px solid rgba(255,255,255,.12);
}
.mode-label{font-size:11px;font-weight:800;letter-spacing:.16em;color:rgba(255,255,255,.52);margin-bottom:11px}
.modeswitch{
  display:grid;gap:9px;border:0;border-radius:0;overflow:visible;
}
.modeswitch button{
  display:grid;grid-template-columns:42px 1fr;align-items:center;text-align:left;gap:12px;
  min-height:70px;padding:12px 14px;border:1px solid rgba(255,255,255,.18)!important;
  border-radius:14px;background:rgba(255,255,255,.05);color:#fff;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.modeswitch button:hover{transform:translateX(4px);background:rgba(255,255,255,.09)}
.modeswitch button[aria-pressed="true"]{
  color:var(--brand);background:#fff;border-color:#fff!important;box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.mode-icon{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.1);font-size:18px;font-weight:850;
}
.modeswitch button[aria-pressed="true"] .mode-icon{background:#e9f2ee;color:var(--brand)}
.mode-text b{display:block;font-size:14px;line-height:1.3}
.mode-text small{display:block;margin-top:4px;font-size:11px;font-weight:600;color:rgba(255,255,255,.55)}
.modeswitch button[aria-pressed="true"] .mode-text small{color:#6b7772}
.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.metric{padding:12px 8px;border-top:1px solid rgba(255,255,255,.18)}
.metric strong{display:block;color:var(--sun);font-size:17px;line-height:1.2}
.metric span{display:block;margin-top:4px;color:rgba(255,255,255,.57);font-size:10px;line-height:1.35}

/* 빠른 이동 */
.quicknav{
  position:sticky;top:10px;z-index:40;display:flex;align-items:center;gap:5px;width:max-content;max-width:100%;
  margin:0 auto 28px;padding:6px;background:rgba(255,253,248,.88);border:1px solid rgba(23,49,47,.11);
  border-radius:999px;box-shadow:0 8px 28px rgba(20,49,46,.1);backdrop-filter:blur(14px);
  overflow-x:auto;scrollbar-width:none;
}
.quicknav::-webkit-scrollbar{display:none}
.quicknav a{
  position:relative;display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  color:var(--shell-muted);font-size:12px;font-weight:750;text-decoration:none;white-space:nowrap;
}
.quicknav a span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#ebe7dc;font-size:10px}
.quicknav a:hover,.quicknav a[aria-current="true"]{background:var(--brand);color:#fff}
.quicknav a[aria-current="true"] span{background:var(--sun);color:var(--brand)}

/* 섹션 공통 */
section.block{
  position:relative;overflow:hidden;padding:44px 48px 46px;margin-bottom:26px;
  border:1px solid rgba(23,49,47,.11);border-radius:28px;background:rgba(255,253,248,.96);
  box-shadow:var(--shadow);
}
section.block::before{
  content:attr(data-kicker);display:block;margin-bottom:13px;color:var(--accent3);
  font-size:11px;font-weight:850;letter-spacing:.17em;text-transform:uppercase;
}
section.block h2,section.block > div[data-show] > h2{
  display:flex;align-items:center;gap:12px;margin:0 0 7px;color:var(--brand);
  font-size:clamp(23px,3vw,32px);line-height:1.25;letter-spacing:-.035em;font-weight:850;
}
section.block h2 .num,section.block > div[data-show] > h2 .num{
  display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:11px;
  background:var(--brand);color:#fff;font-size:12px;box-shadow:0 7px 16px rgba(18,59,56,.2);
}
section.block .sub,section.block > div[data-show] > .sub{
  margin:0 0 27px;color:var(--shell-muted);font-size:14px;
}
.block h3{margin:29px 0 11px;color:var(--brand);font-size:17px;letter-spacing:-.02em}
.block li{margin-bottom:7px}
.block li::marker{color:var(--accent3);font-weight:800}
.lede{
  position:relative;margin:0 0 24px;padding:18px 20px 18px 58px;border:0;border-radius:17px;
  background:#edf4f0;color:var(--brand);font-size:16px;font-weight:760;
}
.lede::before{
  content:"24";position:absolute;left:16px;top:50%;display:grid;place-items:center;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;background:var(--accent3);color:#fff;font:800 11px/1 Arial;
}
mark{background:linear-gradient(transparent 46%,rgba(240,184,63,.52) 46%);padding:0;border-radius:0}
.callout{
  margin:22px 0 0;padding:18px 20px;border:0;border-left:4px solid var(--accent3);
  border-radius:0 14px 14px 0;background:#eef4f0;font-size:14px;
}
.callout.warn{border-left-color:var(--accent);background:#fff0ec}

/* 단계 흐름 */
.flow{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:4px 0 26px}
.flow::before{content:"";position:absolute;left:7%;right:7%;top:22px;height:2px;background:#d8d5cc}
.flow .step{
  position:relative;z-index:1;display:grid;place-items:center;min-height:46px;padding:7px 9px;
  border:0;border-radius:0;background:transparent;color:var(--shell-muted);
  font-size:11px;text-align:center;white-space:normal;word-break:keep-all;
}
.flow .step::before{
  content:"";position:absolute;top:17px;left:50%;z-index:-1;width:11px;height:11px;transform:translateX(-50%);
  border:3px solid var(--shell-card);border-radius:50%;background:#b7bbb6;box-shadow:0 0 0 1px #c8c8c2;
}
.flow .step{padding-top:39px}
.flow .step.key{background:transparent;color:var(--brand);font-weight:850}
.flow .step.key::before{width:18px;height:18px;top:13px;background:var(--sun);box-shadow:0 0 0 2px var(--brand)}
.flow .arw{display:none}
.phases{grid-template-columns:repeat(3,1fr);gap:14px}
.phase{
  position:relative;overflow:hidden;padding:20px 21px 18px;border:1px solid var(--shell-border);
  border-top:0;border-radius:18px;background:#fff;
}
.phase::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--pc)}
.phase h4{font-size:15px;color:var(--brand)}
.phase .when{margin:3px 0 13px;color:var(--pc);font-size:11px}
.phase ol{font-size:13px}

/* 플래너 쇼케이스 */
section.block.planner-block{
  padding:42px 36px 38px;background:
    radial-gradient(circle at 93% 4%,rgba(240,184,63,.16),transparent 24rem),
    linear-gradient(145deg,#062b49,#041f35);
  color:#eef5f1;border-color:rgba(255,255,255,.08);box-shadow:0 28px 70px rgba(12,41,39,.2);
}
section.block.planner-block::before{color:#8ec7b4}
section.block.planner-block h2{color:#fff}
section.block.planner-block h2 .num{background:var(--sun);color:var(--brand);box-shadow:none}
section.block.planner-block .sub{color:rgba(255,255,255,.62)}
.planner-principle{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px;
}
.planner-principle .pp{
  display:grid;grid-template-columns:31px 1fr;gap:10px;align-items:center;padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.055);
}
.planner-principle .pp > b{
  display:grid;place-items:center;width:31px;height:31px;border-radius:10px;
  background:var(--pc);color:#fff;font-size:12px;
}
.planner-principle .pp strong{display:block;color:#fff;font-size:12px}
.planner-principle .pp small{display:block;margin-top:2px;color:rgba(255,255,255,.58);font-size:10px;line-height:1.35}
.toolbar{
  position:relative;display:flex;gap:8px;margin:0 0 18px;padding:10px;
  border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(255,255,255,.06);
}
.toolgroup{display:flex;align-items:center;gap:6px;padding-right:8px;border-right:1px solid rgba(255,255,255,.13)}
.toolgroup:last-of-type{border-right:0}
.toolgroup-label{padding:0 3px;color:rgba(255,255,255,.5);font-size:10px;font-weight:800;letter-spacing:.08em}
.toolbar .t{
  min-height:38px;padding:7px 12px;border:1px solid rgba(255,255,255,.2);border-radius:10px;
  background:rgba(255,255,255,.04);color:#fff;transition:.18s ease;
}
.toolbar .t:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.toolbar .t[aria-pressed="true"]{border-color:var(--sun);background:var(--sun);color:var(--brand)}
.toolbar .hint{color:rgba(255,255,255,.53)}
.stage{grid-template-columns:minmax(0,1fr) 330px;gap:20px}
.scroller{
  padding:18px 18px 12px;border:1px solid rgba(255,255,255,.1);border-radius:18px;
  background:rgba(0,0,0,.15);box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.spread{
  border:1px solid #d3cfc4;border-radius:2px;background:
    linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.88)),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(24,35,31,.02) 3px 4px);
  box-shadow:0 16px 36px rgba(0,0,0,.25);
}
.binding i{
  width:34px;height:10px;background:linear-gradient(#777,#242424 42%,#777);
  box-shadow:-5px 0 8px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.24);
}
.legend{color:rgba(255,255,255,.67);padding:2px 3px 5px}
.panel{
  top:82px;border:1px solid rgba(255,255,255,.16);border-radius:18px;
  background:#fffdf8;color:var(--shell-fg);box-shadow:0 20px 42px rgba(0,0,0,.2);
}
.panel .ph{padding:18px 19px;background:#f2f4ef}
.panel .ph .k{color:var(--zc);font-size:10px}
.panel .ph h3{font-size:18px;color:var(--brand)}
.panel .ph h3 .o{width:27px;height:27px;font-size:12px}
.panel .pb{padding:19px;font-size:13px}
.panel .pb .when{padding:4px 9px}
.panel-progress{margin-left:auto;color:#7a817d;font-size:10px;font-weight:800;letter-spacing:.04em}
.panel-step-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 18px 12px;
}
.panel-step-nav button{
  min-height:34px;border:1px solid var(--shell-border);border-radius:10px;background:#fff;
  color:var(--brand);font-family:inherit;font-size:11px;font-weight:700;line-height:1.2;cursor:pointer;
}
.panel-step-nav button:hover{border-color:var(--zc);color:var(--zc)}
.panel-step-nav button:disabled{opacity:.35;cursor:not-allowed}
.zonenav{display:block;padding:0 18px 18px}
.zonegroup + .zonegroup{margin-top:10px;padding-top:10px;border-top:1px solid #e2ded4}
.zonegroup-title{
  display:flex;align-items:center;gap:7px;margin-bottom:6px;color:#7c827e;
  font-size:9.5px;font-weight:850;letter-spacing:.06em;
}
.zonegroup-title::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--group-color)}
.zonegroup-buttons{display:flex;flex-wrap:wrap;gap:5px}
.zonenav button{padding:5px 9px;background:#f5f2ea;color:#65706b}
.zonenav button:hover{border-color:var(--zc);color:var(--zc)}
.zonenav button[aria-current="true"]{border-color:var(--zc);background:var(--zc);color:#fff}

/* 체크리스트와 표 */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.checks li{
  min-height:86px;padding:16px;border:1px solid var(--shell-border);border-radius:15px;background:#fff;
}
.checks li::before{width:18px;height:18px;margin-top:3px;border:2px solid var(--accent3);border-radius:5px}
table.fail{margin-top:12px;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--shell-border);border-radius:15px}
table.fail th,table.fail td{border:0;border-right:1px solid var(--shell-border);border-bottom:1px solid var(--shell-border);padding:13px 14px}
table.fail tr:last-child td{border-bottom:0}
table.fail th:last-child,table.fail td:last-child{border-right:0}
table.fail th{background:#edf2ef;color:var(--brand)}
.site-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px 0;
  color:#717771;font-size:12px;
}
.site-foot strong{color:var(--brand);letter-spacing:.14em}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{width:28px;height:25px;padding:5px;border-radius:8px;background:var(--brand);object-fit:contain}
.to-top{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid #d6d2c8;border-radius:999px;
  color:var(--brand);font-weight:750;text-decoration:none;background:rgba(255,255,255,.6);
}

/* 포커스 보기 */
body.planner-focus{overflow:hidden}
body.planner-focus .planner-block{
  position:fixed;inset:0;z-index:1000;margin:0;border-radius:0;overflow:auto;
}
body.planner-focus .planner-block > h2,
body.planner-focus .planner-block > .sub{display:none}
body.planner-focus .panel{top:10px}

@media (max-width:1080px){
  header.top{grid-template-columns:1fr}
  .hero-copy{padding:48px 0 28px}
  .hero-console{padding:26px 0 42px;border:0;border-top:1px solid rgba(255,255,255,.12)}
  .modeswitch{grid-template-columns:repeat(2,1fr)}
  .stage{grid-template-columns:minmax(0,1fr)}
  .panel{position:relative;top:auto}
}
@media (max-width:760px){
  .wrap{padding:0 14px 76px}
  header.top{padding:0 20px;margin-bottom:18px}
  .hero-copy{padding-top:34px}
  .brandline{margin-bottom:24px}
  header.top h1{font-size:39px}
  header.top .hero-lede{font-size:15px}
  .hero-console{padding-bottom:30px}
  .modeswitch{grid-template-columns:1fr}
  .hero-metrics{margin-top:15px}
  .quicknav{top:7px;justify-content:flex-start;margin-bottom:18px}
  .quicknav a{padding:8px 11px}
  section.block,section.block.planner-block{padding:30px 20px;border-radius:20px}
  section.block h2,section.block > div[data-show] > h2{font-size:24px}
  .flow{grid-template-columns:repeat(3,1fr);row-gap:13px}
  .flow::before{display:none}
  .flow .step{padding-top:33px}
  .flow .step::before{top:10px}
  .flow .step.key::before{top:6px}
  .phases{grid-template-columns:1fr}
  .planner-principle{grid-template-columns:1fr}
  .toolbar{padding:8px}
  .toolgroup{flex-wrap:wrap;padding-right:0;border-right:0}
  .toolgroup-label{width:100%}
  .toolbar .hint{width:100%;margin:0;padding:4px 3px 0}
  .scroller{margin:0 -10px;padding:12px 10px}
  .checks{grid-template-columns:1fr}
  .checks li{min-height:0}
  table.fail{display:block;overflow-x:auto;white-space:normal}
  table.fail th,table.fail td{min-width:180px}
  .site-foot{align-items:flex-start;flex-direction:column}
}
@media (max-width:430px){
  header.top h1{font-size:34px}
  .brandline span:last-child{display:none}
  .metric{padding-left:3px;padding-right:3px}
  .metric strong{font-size:15px}
  .toolbar .t{flex:1;padding-left:8px;padding-right:8px}
}
@media print{
  body{background:#fff;color:#111}
  .wrap{max-width:none;padding:0}
  header.top{display:block;margin:0;padding:20px 0;background:#fff;color:#111}
  header.top::before,.hero-console,.hero-rule,.quicknav,.site-foot{display:none}
  .hero-copy{padding:0}
  header.top h1{font-size:28px}
  header.top .hero-lede{color:#333}
  section.block,section.block.planner-block{padding:18px;margin:0 0 15px;border:1px solid #bbb;border-radius:0;background:#fff;color:#111;box-shadow:none}
  section.block.planner-block h2{color:#111}
  .scroller{padding:0;border:0;background:#fff;overflow:visible}
  .panel{position:static;box-shadow:none}
}