/* 이루다 IEP 디자인 v8 공용 스타일 — 토큰 + 공통 부품 (2026-09-24, docs/design/DESIGN_SPEC_V8.md 2~5번)
 * 쓰는 법: 페이지 <html> 또는 감싸는 요소에 class="v8"을 붙이면 그 안에서만 적용된다(기존 화면을 건드리지 않음).
 * 글꼴: 제목·로고·큰 숫자 = 함렛(자체 호스팅 600·700, /vendor/iepro/fonts/hahmlet-5.3.0/hahmlet-600-700.css),
 *       본문·버튼·입력 = Pretendard(/vendor/iepro/fonts/pretendard-1.3.9/pretendard-400-700.css). 외부 글꼴 요청 없음.
 * 대비: 시안의 보조 글자 #8A8A8A·#9A9A9A는 흰 바탕에서 3.5:1·2.8:1이라 작은 글자에는 #767676(4.5:1)을 쓴다(규칙서 2번 "4.5:1 이상").
 * 이모지 금지, 아이콘은 인라인 SVG 선 1.7px. 터치 영역 44px 이상. */
.v8{
  --v8-bg:#FFFFFF; --v8-surface:#FFFFFF; --v8-soft:#F4F4F2; --v8-soft-2:#F7F7F5;
  --v8-line:#EFEFEF; --v8-line-2:#EAEAEA; --v8-line-strong:#E2E2E2; --v8-line-input:#CFCFCF;
  --v8-ink:#111111; --v8-ink-2:#6E6E73; --v8-ink-3:#767676; --v8-ink-hover:#444444;
  --v8-primary:#111111; --v8-on-primary:#FFFFFF; --v8-danger:#B3452E; --v8-focus:#3552D8;
  /* 기능 색: 진한 색은 아이콘·라벨, 옅은 색은 썸네일·원형 아이콘 바탕에만(넓은 면적 금지) */
  --fx-ppt:#3552D8; --fx-ppt-bg:#EEF1FC;
  --fx-ws:#8A5E00; --fx-ws-bg:#FBF4E2;
  --fx-iep:#1F6B4F; --fx-iep-bg:#EAF4EE;
  --fx-gibu:#7A3B69; --fx-gibu-bg:#F6ECF3;
  --fx-behavior:#B3452E; --fx-behavior-bg:#FCEEEA;
  --fx-comm:#0E7C86; --fx-comm-bg:#E7F5F6;
  --fx-aac:#5B4BB7; --fx-aac-bg:#F0EEFB;
  --fx-social:#0E7C86; --fx-social-bg:#E7F5F6;
  --fx-meal:#8A5E00; --fx-meal-bg:#FBF4E2;
  --fx-etc:#4A4A4A; --fx-etc-bg:#F2F2F2;
  /* 달력 */
  --cal-school:#3552D8; --cal-mine:#7A3B69; --cal-holiday:#B3452E;
  /* 글꼴 */
  --v8-serif:'Hahmlet','Noto Serif KR','Apple SD Gothic Neo',serif;
  --v8-sans:Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  /* 둥글기·간격·그림자 */
  --v8-r-card:20px; --v8-r-card-lg:22px; --v8-r-input:16px; --v8-r-input-sm:14px; --v8-r-btn:12px; --v8-r-btn-sm:10px; --v8-r-full:9999px;
  --v8-s1:4px; --v8-s2:8px; --v8-s3:12px; --v8-s4:16px; --v8-s5:20px; --v8-s6:24px; --v8-s7:32px; --v8-s8:48px; --v8-section:60px;
  --v8-shadow-input:0 10px 30px rgba(0,0,0,.05); --v8-shadow-pop:0 16px 40px rgba(0,0,0,.10);
  --v8-dur:150ms; --v8-ease:cubic-bezier(.33,1,.68,1);
  background:var(--v8-bg); color:var(--v8-ink); font-family:var(--v8-sans); font-size:16px; line-height:1.6; word-break:keep-all; overflow-wrap:anywhere;
  -webkit-text-size-adjust:100%;
}
@media (max-width:599px){.v8{--v8-section:40px}}
.v8 *, .v8 *::before, .v8 *::after{box-sizing:border-box}
.v8 a{color:inherit;text-decoration:none}
.v8 a:hover{color:var(--v8-ink-hover)}
.v8 :focus-visible{outline:2px solid var(--v8-focus);outline-offset:2px;border-radius:6px}
.v8 .v8-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.v8 svg.v8-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── 글자 ── */
.v8 .v8-serif{font-family:var(--v8-serif)}
.v8 .v8-page-title{margin:0;font-family:var(--v8-serif);font-size:44px;line-height:1.28;font-weight:600;letter-spacing:-.03em}
.v8 .v8-section-title{margin:0;font-family:var(--v8-serif);font-size:30px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.v8 .v8-block-title{margin:0;font-family:var(--v8-serif);font-size:19px;line-height:1.4;font-weight:600}
.v8 .v8-card-title{margin:0;font-size:17px;line-height:1.45;font-weight:600}
.v8 .v8-eyebrow{font-size:13px;letter-spacing:.12em;color:var(--v8-ink-3)}
.v8 .v8-muted{color:var(--v8-ink-2)}
.v8 .v8-small{font-size:13px;color:var(--v8-ink-3)}
.v8 .v8-bignum{font-family:var(--v8-serif);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
@media (max-width:599px){
  .v8 .v8-page-title{font-size:30px}
  .v8 .v8-section-title{font-size:22px}
}

/* ── 버튼: 주요 1개 검정, 보조는 테두리, 위험은 빨강 글자+확인창 ── */
.v8 .v8-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--v8-r-btn);border:1px solid var(--v8-ink);background:var(--v8-surface);color:var(--v8-ink);font:inherit;font-size:15px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;transition:background var(--v8-dur) var(--v8-ease),color var(--v8-dur) var(--v8-ease),transform 120ms var(--v8-ease)}
.v8 .v8-btn:hover{background:var(--v8-soft)}
.v8 .v8-btn:active{transform:scale(.97)}
.v8 .v8-btn[disabled],.v8 .v8-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.v8 .v8-btn--primary{background:var(--v8-primary);border-color:var(--v8-primary);color:var(--v8-on-primary)}
.v8 .v8-btn--primary:hover{background:#2A2A2A;color:var(--v8-on-primary)}
.v8 .v8-btn--ghost{border-color:transparent;background:transparent;color:var(--v8-ink-2)}
.v8 .v8-btn--ghost:hover{background:var(--v8-soft);color:var(--v8-ink)}
.v8 .v8-btn--danger{border-color:var(--v8-danger);color:var(--v8-danger)}
.v8 .v8-btn--danger:hover{background:var(--fx-behavior-bg)}
.v8 .v8-btn--sm{min-height:36px;padding:0 14px;font-size:13px;border-radius:var(--v8-r-btn-sm)}
.v8 .v8-btn--lg{min-height:48px;padding:0 22px}
.v8 .v8-btn--block{width:100%}
.v8 .v8-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v8 .v8-link{color:var(--v8-ink-2);font-size:13px;display:inline-flex;align-items:center;gap:4px;min-height:32px}
.v8 .v8-link:hover{color:var(--v8-ink)}

/* ── 카드: 흰 바탕 + 1px 선, 썸네일만 기능 옅은 색 ── */
.v8 .v8-card{background:var(--v8-surface);border:1px solid var(--v8-line-2);border-radius:var(--v8-r-card);padding:var(--v8-s5);min-width:0}
.v8 .v8-card--flush{padding:0;overflow:hidden}
.v8 .v8-card--soft{border-color:transparent;background:var(--v8-soft-2)}
.v8 .v8-thumb{display:block;position:relative;height:150px;background:var(--fx-etc-bg)}
.v8 .v8-thumb-label{position:absolute;left:12px;top:12px;font-size:11px;font-weight:600;background:rgba(255,255,255,.92);border-radius:var(--v8-r-full);padding:3px 9px}
.v8 .v8-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}

/* ── 목록 행(최근 자료·소식) ── */
.v8 .v8-row{min-height:60px;border-top:1px solid var(--v8-line);display:flex;align-items:center;gap:14px;padding:8px 0}
.v8 .v8-row-icon{width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center}
.v8 .v8-row-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.v8 .v8-row-title{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v8 .v8-row-meta{font-size:12px;color:var(--v8-ink-3)}
.v8 .v8-row-action{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}

/* ── 입력창 ── */
.v8 .v8-field{display:grid;gap:6px}
.v8 .v8-label{font-size:14px;font-weight:600;color:var(--v8-ink)}
.v8 .v8-help{font-size:13px;color:var(--v8-ink-3)}
.v8 .v8-input,.v8 .v8-select,.v8 .v8-textarea{width:100%;min-height:48px;border:1px solid var(--v8-line-input);border-radius:var(--v8-r-input-sm);background:var(--v8-surface);color:var(--v8-ink);font:inherit;font-size:16px;padding:0 16px;transition:border-color var(--v8-dur) var(--v8-ease)}
.v8 .v8-textarea{min-height:120px;padding:12px 16px;line-height:1.6;resize:vertical}
.v8 .v8-input:hover,.v8 .v8-select:hover,.v8 .v8-textarea:hover{border-color:#9E9E9E}
.v8 .v8-input:focus,.v8 .v8-select:focus,.v8 .v8-textarea:focus{outline:none;border-color:var(--v8-ink);box-shadow:0 0 0 3px rgba(17,17,17,.08)}
.v8 .v8-input[aria-invalid="true"]{border-color:var(--v8-danger)}
/* 한 줄 입력(홈 "무엇을 만들까요?") */
.v8 .v8-ask{height:64px;border:1px solid var(--v8-line-strong);border-radius:var(--v8-r-input);background:var(--v8-surface);box-shadow:var(--v8-shadow-input);padding:0 8px 0 20px;display:flex;align-items:center;gap:12px}
.v8 .v8-ask:focus-within{border-color:var(--v8-ink)}
.v8 .v8-ask input{flex:1;min-width:0;height:48px;border:0;outline:none;font:inherit;font-size:18px;color:var(--v8-ink);background:transparent}
.v8 .v8-ask input::placeholder{color:var(--v8-ink-3)}
@media (max-width:599px){.v8 .v8-ask{height:56px;padding-left:16px}.v8 .v8-ask input{font-size:16px}}

/* ── 칩·배지 ── */
.v8 .v8-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--v8-r-full);border:1px solid #E5E5E5;background:var(--v8-surface);color:var(--v8-ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.v8 .v8-chip:hover{border-color:#BDBDBD}
.v8 .v8-chip[aria-pressed="true"]{background:var(--v8-ink);border-color:var(--v8-ink);color:#fff}
.v8 .v8-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;line-height:1;padding:4px 9px;border-radius:var(--v8-r-full);border:1px solid #E5E5E5;color:var(--v8-ink-2)}
.v8 .v8-badge--count{border:0;background:var(--v8-danger);color:#fff;font-size:12px;padding:2px 8px}
.v8 .v8-dday{display:inline-flex;justify-content:center;min-width:52px;font-size:13px;font-weight:700;border-radius:var(--v8-r-full);padding:3px 8px;border:1px solid currentColor}
.v8 .v8-dday--solid{color:#fff !important}

/* ── 원형 아이콘(홈 8개) ── */
.v8 .v8-quick{display:flex;flex-wrap:wrap;gap:12px}
.v8 .v8-quick-item{width:70px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#333;text-align:center;min-height:44px}
.v8 .v8-quick-item:hover{color:var(--v8-ink)}
.v8 .v8-circle{width:56px;height:56px;border-radius:var(--v8-r-full);display:flex;align-items:center;justify-content:center;background:var(--fx-etc-bg);color:var(--fx-etc);transition:transform var(--v8-dur) var(--v8-ease)}
.v8 .v8-quick-item:hover .v8-circle{transform:translateY(-2px)}
.v8 .v8-circle svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 기능 색 한 벌: data-fx="ppt" 등을 붙이면 아이콘 원·썸네일·라벨 색이 정해진다 */
.v8 [data-fx="ppt"]{--fx:var(--fx-ppt);--fx-bg:var(--fx-ppt-bg)}
.v8 [data-fx="ws"]{--fx:var(--fx-ws);--fx-bg:var(--fx-ws-bg)}
.v8 [data-fx="iep"]{--fx:var(--fx-iep);--fx-bg:var(--fx-iep-bg)}
.v8 [data-fx="gibu"]{--fx:var(--fx-gibu);--fx-bg:var(--fx-gibu-bg)}
.v8 [data-fx="behavior"]{--fx:var(--fx-behavior);--fx-bg:var(--fx-behavior-bg)}
.v8 [data-fx="comm"]{--fx:var(--fx-comm);--fx-bg:var(--fx-comm-bg)}
.v8 [data-fx="aac"]{--fx:var(--fx-aac);--fx-bg:var(--fx-aac-bg)}
.v8 [data-fx="social"]{--fx:var(--fx-social);--fx-bg:var(--fx-social-bg)}
.v8 [data-fx="meal"]{--fx:var(--fx-meal);--fx-bg:var(--fx-meal-bg)}
.v8 [data-fx="etc"]{--fx:var(--fx-etc);--fx-bg:var(--fx-etc-bg)}
.v8 [data-fx] .v8-circle,.v8 .v8-circle[data-fx],.v8 [data-fx] .v8-row-icon,.v8 .v8-row-icon[data-fx],.v8 [data-fx].v8-thumb,.v8 [data-fx] .v8-thumb{background:var(--fx-bg);color:var(--fx)}
.v8 [data-fx] .v8-fx-label,.v8 .v8-fx-label[data-fx],.v8 [data-fx] .v8-thumb-label{color:var(--fx);font-weight:600}

/* ── 페이지 머리(기능 화면 공통: 명조 제목 + 한 줄 설명 + 기능 색 아이콘) ── */
.v8 .v8-page-head{display:flex;align-items:center;gap:16px;margin-bottom:var(--v8-s7)}
.v8 .v8-page-head .v8-circle{width:52px;height:52px}
.v8 .v8-page-head p{margin:4px 0 0;color:var(--v8-ink-2);font-size:15px}
.v8 .v8-page-head .v8-page-title{font-size:36px}
@media (max-width:599px){.v8 .v8-page-head .v8-page-title{font-size:26px}.v8 .v8-page-head{gap:12px}}

/* ── 뼈대: 왼쪽 메뉴 232px + 본문 ── */
.v8.v8-shell,.v8 .v8-shell{display:flex;min-height:100vh}
.v8 .v8-sidebar{width:232px;flex:none;border-right:1px solid var(--v8-line);padding:28px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--v8-bg)}
.v8 .v8-logo{display:flex;align-items:baseline;gap:8px;padding:0 12px;min-height:40px}
.v8 .v8-logo-word{font-family:var(--v8-serif);font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--v8-ink)}
.v8 .v8-logo-tag{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--v8-ink-3)}
.v8 .v8-nav{display:flex;flex-direction:column;gap:2px}
.v8 .v8-nav-section{padding:0 12px 6px;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--v8-ink-3)}
.v8 .v8-nav-item{width:100%;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--v8-ink-2);display:flex;align-items:center;gap:12px;font:inherit;font-size:15px;font-weight:500;text-align:left;cursor:pointer;transition:background var(--v8-dur) var(--v8-ease),color var(--v8-dur) var(--v8-ease)}
.v8 .v8-nav-item:hover{background:var(--v8-soft-2);color:var(--v8-ink)}
.v8 .v8-nav-item[aria-current="page"],.v8 .v8-nav-item.is-current{background:var(--v8-soft);color:var(--v8-ink);font-weight:600}
.v8 .v8-nav-item .v8-nav-chev{margin-left:auto;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--v8-ease)}
.v8 .v8-nav-toggle[aria-expanded="true"] .v8-nav-chev{transform:rotate(180deg)}
.v8 .v8-nav-toggle[aria-expanded="true"]{color:var(--v8-ink)}
.v8 .v8-nav-sub{display:grid;gap:1px;padding:2px 0 6px 42px;overflow:hidden}
.v8 .v8-nav-sub[hidden]{display:none}
.v8 .v8-nav-sub a{min-height:36px;display:flex;align-items:center;padding:0 10px;border-radius:8px;font-size:14px;color:var(--v8-ink-2)}
.v8 .v8-nav-sub a:hover{background:var(--v8-soft-2);color:var(--v8-ink)}
.v8 .v8-nav-sub a[aria-current="page"]{color:var(--v8-ink);font-weight:600;background:var(--v8-soft)}
.v8 .v8-nav-bottom{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.v8 .v8-account{margin-top:8px;padding:12px;border-top:1px solid var(--v8-line);display:flex;align-items:center;gap:10px}
.v8 .v8-avatar{width:34px;height:34px;border-radius:var(--v8-r-full);border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none}
.v8 .v8-main{flex:1;min-width:0;padding:48px 56px 64px;display:flex;flex-direction:column;gap:var(--v8-section)}
@media (max-width:1023px){.v8 .v8-main{padding:32px 24px 48px}}

/* ── 폰: 위 헤더 + 아래 탭 5개(오늘·학생·만들기(+)·광장·더보기) ── */
.v8 .v8-topbar{display:none}
.v8 .v8-tabbar{display:none}
@media (max-width:767px){
  .v8 .v8-sidebar{display:none}
  .v8 .v8-main{padding:20px 16px calc(88px + env(safe-area-inset-bottom))}
  .v8 .v8-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:56px;padding:0 16px;border-bottom:1px solid var(--v8-line);position:sticky;top:0;background:rgba(255,255,255,.96);z-index:20}
  .v8 .v8-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.98);border-top:1px solid var(--v8-line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
}
.v8 .v8-tab{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:500;color:var(--v8-ink-3);border:0;background:none;font-family:inherit;cursor:pointer}
.v8 .v8-tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v8 .v8-tab[aria-current="page"]{color:var(--v8-ink);font-weight:600}
.v8 .v8-tab--make .v8-tab-plus{width:40px;height:40px;border-radius:var(--v8-r-full);background:var(--v8-ink);color:#fff;display:flex;align-items:center;justify-content:center}
.v8 .v8-tab--make .v8-tab-plus svg{width:20px;height:20px;stroke-width:2.2}
/* "더보기" 바닥 시트: 왼쪽 메뉴와 같은 구조 */
.v8 .v8-sheet{position:fixed;inset:auto 0 0 0;max-height:82vh;overflow-y:auto;background:#fff;border-radius:22px 22px 0 0;box-shadow:var(--v8-shadow-pop);padding:12px 16px calc(24px + env(safe-area-inset-bottom));z-index:40;transform:translateY(0);transition:transform 280ms var(--v8-ease)}
.v8 .v8-sheet[hidden]{display:none}
.v8 .v8-sheet-handle{width:40px;height:4px;border-radius:2px;background:#DADADA;margin:0 auto 12px}
.v8 .v8-scrim{position:fixed;inset:0;background:rgba(17,17,17,.35);z-index:35}
.v8 .v8-scrim[hidden]{display:none}

/* ── 빈 화면·준비 중 ── */
.v8 .v8-empty{border:1px dashed #D2D2D2;border-radius:var(--v8-r-card);padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;color:var(--v8-ink-2)}
.v8 .v8-soon{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--v8-ink-3);border:1px dashed #CFCFCF;border-radius:var(--v8-r-full);padding:3px 10px}

@media (prefers-reduced-motion:reduce){.v8 *{transition:none !important;animation:none !important}}

/* ── 홈(시안 8, 2026-09-24): 규칙서 6번 순서. 106-home-v8.js 가 #app 안에 .v8.v8-shell 을 그린다 ── */
body[data-v8-home] .new-portal-header,body[data-v8-home] .mobile-menu-btn,body[data-v8-home] #mobile-menu{display:none !important}
body[data-v8-home]{background:#FFFFFF}
body[data-v8-home] #app{max-width:none !important;margin:0 !important;padding:0 !important}
.v8 .v8-home-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:start}
.v8 .v8-home-left{grid-column:span 8;display:flex;flex-direction:column;gap:28px;min-width:0}
.v8 .v8-home-right{grid-column:span 4;display:flex;flex-direction:column;gap:24px;padding-top:30px;min-width:0}
.v8 .v8-home-left .v8-page-title{margin-top:-12px}
@media (max-width:1100px){.v8 .v8-home-left,.v8 .v8-home-right{grid-column:1 / -1}.v8 .v8-home-right{padding-top:0}}
.v8 .v8-block{border-top:1px solid var(--v8-line);padding-top:24px;display:flex;flex-direction:column;gap:12px}
.v8 .v8-block-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
/* 달력 카드 */
.v8 .v8-cal{border:1px solid var(--v8-line-2);border-radius:var(--v8-r-card);padding:20px 20px 16px;display:flex;flex-direction:column;gap:14px}
.v8 .v8-cal-head{display:flex;justify-content:space-between;align-items:center}
.v8 .v8-cal-month{font-family:var(--v8-serif);font-size:22px;font-weight:600}
.v8 .v8-cal-nav{display:flex;gap:4px}
.v8 .v8-round{width:44px;height:44px;border-radius:var(--v8-r-full);border:1px solid var(--v8-line-2);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--v8-ink)}
.v8 .v8-round svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v8 .v8-round:hover{background:var(--v8-soft)}
.v8 .v8-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:2px;text-align:center;font-size:14px}
.v8 .v8-cal-dow{font-size:11px;color:var(--v8-ink-3);padding-bottom:4px}
.v8 .v8-cal-dow.is-sun{color:var(--cal-holiday)}
.v8 .v8-cal-day{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:44px;border:0;background:none;padding:0;font:inherit;cursor:pointer;border-radius:10px}
.v8 .v8-cal-day:hover .v8-cal-num{background:var(--v8-soft)}
.v8 .v8-cal-num{width:32px;height:32px;border-radius:var(--v8-r-full);display:flex;align-items:center;justify-content:center;color:var(--v8-ink);font-variant-numeric:tabular-nums}
.v8 .v8-cal-day.is-red .v8-cal-num{color:var(--cal-holiday)}
.v8 .v8-cal-day.is-out .v8-cal-num{color:#BDBDBD}
.v8 .v8-cal-day.is-today .v8-cal-num{background:var(--v8-ink);color:#fff;font-weight:700}
.v8 .v8-cal-day.is-sel .v8-cal-num{box-shadow:0 0 0 2px var(--v8-ink) inset}
.v8 .v8-cal-day.is-today.is-sel .v8-cal-num{box-shadow:0 0 0 2px #fff inset,0 0 0 2px var(--v8-ink)}
.v8 .v8-cal-dots{height:4px;display:flex;gap:2px}
.v8 .v8-cal-dots i{width:4px;height:4px;border-radius:var(--v8-r-full);display:block}
.v8 .v8-cal-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid #F0F0F0;padding-top:12px}
.v8 .v8-legend{display:flex;gap:12px;font-size:12px;color:var(--v8-ink-2);flex-wrap:wrap}
.v8 .v8-legend span{display:inline-flex;align-items:center;gap:5px}
.v8 .v8-legend i{width:7px;height:7px;border-radius:var(--v8-r-full);display:block}
.v8 .v8-cal-day-panel{border-top:1px solid #F0F0F0;padding-top:12px;display:grid;gap:8px}
.v8 .v8-cal-form{display:grid;gap:8px;border:1px solid var(--v8-line-2);border-radius:var(--v8-r-input-sm);padding:12px;background:var(--v8-soft-2)}
.v8 .v8-cal-form .v8-input{min-height:44px}
.v8 .v8-cal-form-acts{display:flex;gap:8px}
.v8 .v8-cal-form-acts .v8-btn{flex:1}
.v8 .v8-cal-ferr{margin:0;font-size:13px;color:var(--v8-danger)}
.v8 .v8-cal-ferr:empty{display:none}
/* 다가오는 일정 */
.v8 .v8-up-row{min-height:52px;border-top:1px solid #F0F0F0;display:flex;align-items:center;gap:12px;padding:6px 0;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;text-align:left;color:inherit;cursor:pointer}
.v8 .v8-up-row .v8-dday{flex:none}
.v8 .v8-up-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.v8 .v8-up-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v8 .v8-up-meta{font-size:12px;color:var(--v8-ink-3)}
.v8 .v8-up-acts{display:flex;gap:2px;flex:none}
/* 기다리는 날 */
.v8 .v8-wait{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.v8 .v8-wait-card{border-radius:16px;padding:14px 12px;display:flex;flex-direction:column;gap:4px;background:var(--fx-bg,#F2F2F2)}
.v8 .v8-wait-card .v8-wait-name{font-size:12px;font-weight:600;color:var(--fx,#4A4A4A);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 오늘의 수업 준비 중 */
.v8 .v8-today-soon{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--v8-ink-2);font-size:14px}
/* 폰 */
@media (max-width:767px){
  .v8 .v8-home-left{gap:20px}
  .v8 .v8-quick{gap:8px 4px;justify-content:space-between}
  .v8 .v8-quick-item{width:calc(25% - 4px)}
  .v8 .v8-wait-card .v8-bignum{font-size:24px}
}
/* 기존 홈(학생 목록)으로 잠깐 갈 때 위에 붙는 돌아가기 띠 */
.v8-legacy-bar{max-width:1200px;margin:12px auto 0;padding:10px 16px;border:1px solid #EAEAEA;border-radius:14px;background:#fff;display:flex;align-items:center;gap:12px;font-size:14px;font-family:Pretendard,sans-serif}
.v8-legacy-bar button{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid #111;background:#fff;font:inherit;font-weight:600;cursor:pointer}

/* ── 기능 화면 기준: 수업자료 만들기(2026-09-24, 108-v8-screens.js, 확인 전 ?v8s=1) — 기존 입력칸·버튼은 그대로, 모양만 v8 ── */
body[data-v8-screen]{background:#FFFFFF !important}
body[data-v8-screen] #app{max-width:none !important;margin:0 !important;padding:0 !important}
body[data-v8-screen] .student-work-header,body[data-v8-screen] .new-portal-header,body[data-v8-screen] .mobile-menu-btn,body[data-v8-screen] #mobile-menu{display:none !important}
.v8 .v8-screen-main{padding:40px 48px 64px;gap:0}
@media (max-width:767px){.v8 .v8-screen-main{padding:20px 16px calc(96px + env(safe-area-inset-bottom))}}
body[data-v8-screen="lesson"] .lm-page-wrap{width:100% !important;max-width:1240px !important;margin:0 !important;padding:0 !important}
body[data-v8-screen="lesson"] .lm-page-header{display:none !important}
body[data-v8-screen="lesson"] .lm-layout{gap:32px !important}
@media (min-width:1024px){body[data-v8-screen="lesson"] .lm-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) !important}}
body[data-v8-screen="lesson"] .lm-form-col{gap:16px !important}
body[data-v8-screen="lesson"] .lm-section,body[data-v8-screen="lesson"] .lm-aside-card{background:#FFFFFF !important;border:1px solid #EAEAEA !important;border-radius:20px !important;box-shadow:none !important;transform:none !important}
body[data-v8-screen="lesson"] .lm-section-head{background:#FFFFFF !important;border-bottom:1px solid #EFEFEF !important;padding:16px 20px !important;font-family:'Hahmlet','Noto Serif KR',serif !important;font-size:17px !important;font-weight:600 !important;color:#111 !important;display:flex;align-items:center;gap:10px}
body[data-v8-screen="lesson"] .lm-section-num{background:#111 !important;color:#fff !important;border-radius:9999px !important;font-family:Pretendard,sans-serif !important}
body[data-v8-screen="lesson"] .lm-section-body{padding:20px !important;gap:16px !important}
body[data-v8-screen="lesson"] .lm-field label{font-size:14px !important;font-weight:600 !important;color:#111 !important;margin-bottom:6px !important}
body[data-v8-screen="lesson"] .lm-input,body[data-v8-screen="lesson"] .lm-select,body[data-v8-screen="lesson"] .lm-textarea{min-height:48px !important;border:1px solid #CFCFCF !important;border-radius:14px !important;background:#FFFFFF !important;color:#111 !important;font-family:Pretendard,sans-serif !important;font-size:16px !important;box-shadow:none !important}
body[data-v8-screen="lesson"] .lm-input,body[data-v8-screen="lesson"] .lm-select{padding:0 14px !important}
body[data-v8-screen="lesson"] .lm-textarea{padding:12px 14px !important;line-height:1.6 !important}
body[data-v8-screen="lesson"] .lm-input:focus,body[data-v8-screen="lesson"] .lm-select:focus,body[data-v8-screen="lesson"] .lm-textarea:focus{border-color:#111 !important;box-shadow:0 0 0 3px rgba(17,17,17,.08) !important;outline:none !important}
body[data-v8-screen="lesson"] .lm-generate-section > div:first-child{font-size:13px !important;color:#6E6E73 !important}
body[data-v8-screen="lesson"] .lm-generate-btn{width:100%;min-height:52px !important;background:#111111 !important;color:#FFFFFF !important;border:0 !important;border-radius:12px !important;font-family:Pretendard,sans-serif !important;font-size:16px !important;font-weight:600 !important;display:flex !important;align-items:center;justify-content:center;gap:8px;box-shadow:none !important;transform:none !important}
body[data-v8-screen="lesson"] .lm-generate-btn:hover{background:#2A2A2A !important}
body[data-v8-screen="lesson"] .lm-generate-btn:disabled{background:#BDBDBD !important}
body[data-v8-screen="lesson"] .lm-generate-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-v8-screen="lesson"] .lm-aside{position:sticky !important;top:24px;display:flex;flex-direction:column;gap:16px}
body[data-v8-screen="lesson"] .lm-aside-head{font-family:'Hahmlet','Noto Serif KR',serif !important;font-size:17px !important;font-weight:600 !important;color:#111 !important}
body[data-v8-screen="lesson"] .lm-aside-card[style*="FAFAFA"]{background:#FFFFFF !important;border-color:#EAEAEA !important}
body[data-v8-screen="lesson"] .lm-summary-key{color:#6E6E73 !important}
body[data-v8-screen="lesson"] .lm-summary-val{color:#111 !important}
body[data-v8-screen="lesson"] .lm-summary-row{border-color:#EFEFEF !important}
body[data-v8-screen="lesson"] .lm-check-dot.done{background:#1F6B4F !important}
body[data-v8-screen="lesson"] .lm-check-dot.wait{background:#D2D2D2 !important}
/* 결과 미리보기 카드 + 6단계 */
.v8 .v8-preview-card{display:flex;flex-direction:column;gap:12px;border-radius:20px}
.v8 .v8-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:v8s}
.v8 .v8-steps li{counter-increment:v8s;display:flex;align-items:center;gap:10px;font-size:14px;color:#767676;min-height:32px}
.v8 .v8-steps li::before{content:counter(v8s);width:24px;height:24px;border-radius:9999px;border:1px solid #D2D2D2;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.v8 .v8-steps li.is-done{color:#111}
.v8 .v8-steps li.is-done::before{content:'';background:#1F6B4F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/14px no-repeat;border-color:#1F6B4F}
.v8 .v8-steps li.is-now{color:#111;font-weight:600}
.v8 .v8-steps li.is-now::before{background:#111;color:#fff;border-color:#111}
body[data-v8-screen="lesson"] #lm-loading{margin-top:0 !important;background:#F7F7F5 !important;border:0 !important;border-radius:14px !important}
body[data-v8-screen="lesson"] #lm-progress-text{color:#111 !important}
body[data-v8-screen="lesson"] #lm-progress-bar{background:#111 !important}
body[data-v8-screen="lesson"] #lm-spinner{stroke:#111 !important}
/* 결과 화면은 틀(왼쪽 메뉴)만 — 결과 내용은 그대로 */
body[data-v8-screen="lesson-result"] .v8-screen-main{padding-top:24px}
.v8 .v8-steps[hidden],.v8 .v8-preview-idle[hidden]{display:none !important}
/* 학교 설정 창·오늘 갈 학교(2026-09-24, 109-v8-schools.js) */
dialog.v8-school-dialog{width:min(560px,94vw);max-height:90vh;border:1px solid #E2E2E2;border-radius:22px;padding:20px;box-shadow:0 16px 40px rgba(0,0,0,.12);background:#fff;color:#111;font-family:Pretendard,sans-serif}
dialog.v8-school-dialog::backdrop{background:rgba(17,17,17,.4)}
.v8.v8-school-dialog{display:none}
.v8.v8-school-dialog[open]{display:flex;flex-direction:column;gap:12px}
.v8 .v8-school-head{display:flex;justify-content:space-between;align-items:center}
.v8 .v8-school-list{list-style:none;margin:0;padding:0;display:grid}
.v8 .v8-school-row{display:flex;align-items:center;gap:8px;min-height:52px;border-top:1px solid #EFEFEF;flex-wrap:wrap}
.v8 .v8-school-name{font-weight:600;font-size:15px}
.v8 .v8-school-acts{margin-left:auto;display:flex;gap:4px}
.v8 .v8-school-search{display:flex;gap:8px}
.v8 .v8-school-search .v8-input{flex:1}
.v8 .v8-school-none{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#111;padding-top:8px;border-top:1px solid #EFEFEF}
.v8 .v8-school-none input{width:20px;height:20px;margin-top:2px}
.v8 .v8-today-school{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v8 .v8-today-school .v8-chip{min-height:36px}
.v8 .v8-school-card{display:flex;flex-direction:column;gap:8px;align-items:flex-start}

/* ── 기준 화면 다듬기(2026-09-24 혁재 확인 뒤 6가지) ── */
/* 2. 준비 상태 카드: 기존 세 카드(생성 준비 상태·입력 체크리스트·선택한 자료 유형)를 하나로, 항목마다 완료 표시. 카드 바탕은 모두 흰색 */
body[data-v8-screen="lesson"] .v8-legacy-hidden{display:none !important}
.v8 .v8-ready-card{display:flex;flex-direction:column;gap:10px;border-radius:20px}
.v8 .v8-ready-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.v8 .v8-ready-list{list-style:none;margin:0;padding:0;display:grid}
.v8 .v8-ready-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid #EFEFEF}
.v8 .v8-ready-row:first-child{border-top:0;padding-top:4px}
.v8 .v8-ready-mark{width:22px;height:22px;border-radius:9999px;border:1.5px solid #8A8A8A;flex:none;margin-top:1px;box-sizing:border-box}
.v8 .v8-ready-row.is-done .v8-ready-mark{background:#1F6B4F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/13px no-repeat;border-color:#1F6B4F}
.v8 .v8-ready-main{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:8px;row-gap:2px;flex:1;min-width:0}
.v8 .v8-ready-key{font-size:14px;color:#6E6E73;line-height:22px}
.v8 .v8-ready-val{font-size:14px;font-weight:600;color:#111;line-height:22px;overflow-wrap:anywhere}
.v8 .v8-ready-row:not(.is-done) .v8-ready-val{color:#767676;font-weight:500}
.v8 .v8-ready-desc{grid-column:2;font-size:13px;color:#6E6E73;line-height:1.5}
/* 3. 만드는 중: 왼쪽 입력칸 잠금(inert)·흐리게. 폰은 진행 표시를 아래 탭 위에 고정 */
body[data-v8-screen="lesson"] .lm-form-col.v8-locked{opacity:.45;transition:opacity .2s ease}
@media (max-width:767px){
  body.v8-generating[data-v8-screen="lesson"] #v8-preview-card{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.16);padding:14px 16px;gap:8px;max-height:45vh;overflow:auto}
  body.v8-generating[data-v8-screen="lesson"] #v8-preview-card .v8-steps{display:none !important}
  body.v8-generating[data-v8-screen="lesson"] .v8-screen-main{padding-bottom:240px}
}
@media (prefers-reduced-motion:reduce){body[data-v8-screen="lesson"] .lm-form-col.v8-locked{transition:none}}
/* 4. 홈 원형 아이콘 8개: 컴퓨터·태블릿에서 한 줄 */
@media (min-width:768px){
  .v8 .v8-home-left .v8-quick{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
  .v8 .v8-home-left .v8-quick-item{width:auto;min-width:0;white-space:nowrap;letter-spacing:-.01em}
  .v8 .v8-home-left .v8-circle{width:52px;height:52px}
  .v8 .v8-home-left .v8-circle svg{width:22px;height:22px}
}
/* 6. 흐린 회색 안내 글 대비 4.5:1 이상(흰 바탕 #767676 = 4.54:1). 새 틀 안의 옛 화면 글자와 입력칸 안내 글 */
body[data-v8-screen] #v8-root-screen :is([style*="color:#9CA3AF" i],[style*="color: #9CA3AF" i],[style*="color:#94A3B8" i],[style*="color: #94A3B8" i],[style*="color:#A0AEC0" i],[style*="color:#B0B7C3" i],[style*="color:#CBD5E1" i],[style*="color:#999" i],[style*="color: #999" i],[style*="color:#aaa" i],[style*="color:#888" i],[style*="color: #888" i],[style*="color:#8A8A8A" i],[style*="color:#9A9A9A" i]){color:#767676 !important}
body[data-v8-screen] #v8-root-screen ::placeholder,.v8 ::placeholder{color:#767676;opacity:1}
/* 모든 자료 종류(2026-09-24 혁재): 쓰임새별 카드(기능 색 아이콘 + 이름 + 한 줄 설명) */
.v8 .v8-all-main{max-width:1120px;gap:32px}
.v8 .v8-all-group{margin:0}
.v8 .v8-all-group > .v8-block-title{display:block;margin:0 0 12px}
.v8 .v8-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.v8 .v8-type-card{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--v8-line-2);border-radius:20px;background:#FFFFFF;color:var(--v8-ink);min-height:76px;transition:border-color var(--v8-dur) var(--v8-ease),transform var(--v8-dur) var(--v8-ease)}
.v8 .v8-type-card:hover{border-color:#111111}
.v8 .v8-type-card:focus-visible{outline:2px solid #111111;outline-offset:2px}
.v8 .v8-type-card .v8-circle{width:48px;height:48px;flex:none}
.v8 .v8-type-card .v8-circle svg{width:21px;height:21px}
.v8 .v8-type-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.v8 .v8-type-name{font-size:15px;font-weight:600;color:#111111}
.v8 .v8-type-desc{font-size:13px;color:var(--v8-ink-2);line-height:1.45}
@media (max-width:767px){.v8 .v8-type-grid{grid-template-columns:1fr}.v8 .v8-all-main{gap:24px}}
@media (prefers-reduced-motion:reduce){.v8 .v8-type-card{transition:none}}
/* 계정 창: 계정 화면이 생기기 전까지 비밀번호 변경·로그아웃만 */
.v8 .v8-account-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.v8 .v8-account{cursor:pointer}
/* 시작하기 카드(2026-09-24 혁재, 새 선생님): 진행 막대 + 단계 체크 + 지금 단계에만 버튼(Polaris 설정 안내 구조) */
.v8 .v8-start{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.v8 .v8-start[hidden]{display:none !important}
.v8 .v8-start-head{display:flex;align-items:center;gap:12px}
.v8 .v8-start-head .v8-small{margin-right:auto}
.v8 .v8-start-bar{height:6px;border-radius:9999px;background:#EFEFEF;overflow:hidden}
.v8 .v8-start-bar > span{display:block;height:100%;background:#111111;border-radius:inherit}
.v8 .v8-start-list{list-style:none;margin:0;padding:0;display:grid}
.v8 .v8-start-main{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.v8 .v8-start-name{font-size:15px;font-weight:600;line-height:22px;color:#111111}
.v8 .v8-ready-row.is-done .v8-start-name{color:#6E6E73;font-weight:500}
.v8 .v8-start-desc{font-size:13px;color:var(--v8-ink-2);line-height:1.5}
/* 화면 공유 모드(2026-09-24 혁재): 이름은 검은 띠 + "학생 N", 글자 자체는 그대로(저장·복사 값 불변) */
html[data-v8-share] .v8-mask{color:transparent !important;background:#111111 !important;border-radius:4px;position:relative;display:inline-block;min-width:3.4em;text-align:center;line-height:1.35;user-select:none;text-shadow:none !important}
html[data-v8-share] .v8-mask::after{content:attr(data-v8-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:.8em;font-weight:600;white-space:nowrap;overflow:hidden}
html[data-v8-share] .v8-mask-field{color:transparent !important;text-shadow:none !important;caret-color:#111111;background-image:repeating-linear-gradient(135deg,#F1F1F1 0 6px,#FFFFFF 6px 12px) !important}
.v8-share-bar{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:100000;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:9999px;background:#111111;color:#FFFFFF;font:600 13px/1.4 Pretendard,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.v8-share-bar .v8-btn{background:#FFFFFF;color:#111111;border-color:#FFFFFF;min-height:32px;flex:none}
@media (max-width:767px){.v8-share-bar{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));border-radius:14px;font-size:12px}}
/* 기존 선생님 새 디자인 안내(한 번) · 예전 화면에서 돌아오는 버튼 */
.v8 .v8-intro{display:flex;flex-direction:column;gap:10px;margin-top:4px;border-color:#111111}
.v8 .v8-intro[hidden]{display:none !important}
.v8 .v8-intro-text{margin:0;font-size:14px;line-height:1.6;color:var(--v8-ink-2)}
.v8 .v8-intro-acts{display:flex;gap:8px;flex-wrap:wrap}
.v8-back-new{position:fixed;right:16px;bottom:16px;z-index:9000;min-height:44px;padding:0 18px;border-radius:9999px;border:0;background:#111111;color:#FFFFFF;font:600 14px/1 Pretendard,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.18);cursor:pointer}
.v8-back-new:focus-visible{outline:2px solid #111111;outline-offset:3px}
@media (max-width:767px){.v8-back-new{bottom:calc(16px + env(safe-area-inset-bottom))}}
/* 결과 화면(수업자료 열기)이 창 너비 기준(width:92vw)이라 왼쪽 메뉴만큼 오른쪽이 잘리던 것: 새 틀 안에서는 본문 너비에 맞춘다(2026-09-24) */
body[data-v8-screen] .v8-screen-main > [style*="vw"]{width:100% !important;max-width:100% !important}
body[data-v8-screen] .v8-screen-main{overflow-x:clip}
/* 나머지 기능 화면 새 틀(2026-09-24): 옛 머리줄(제목·뒤로/홈으로·경로)은 왼쪽 메뉴가 대신한다 */
body[data-v8-screen] .inner-page-header,body[data-v8-screen] .iepro-page-backbar{display:none !important}
/* IEP(학생) 화면은 머리줄에 학생 정보와 "학생 프로필·학생 수정·학생 목록"이 있어 남기고 새 틀 모양으로 */
body[data-v8-screen="student"] .student-work-header{display:block !important;background:#FFFFFF !important;border:1px solid #EAEAEA !important;border-radius:20px !important;box-shadow:none !important;margin:0 0 4px !important;position:static !important}
body[data-v8-screen="student"] .student-work-header *{color:#111111 !important}
body[data-v8-screen="student"] .student-work-header .student-work-btn{background:#FFFFFF !important;border:1px solid #CFCFCF !important;border-radius:12px !important;min-height:40px;font-weight:600}
body[data-v8-screen] .v8-screen-main > [class*="-wrap"],body[data-v8-screen] .v8-screen-main > .inner-page-body{max-width:100% !important;margin-left:0 !important;margin-right:0 !important}
/* 옛 화면의 가로 탭 줄(생기부 등): 좁은 폭에서 탭이 줄어들며 글자가 세로로 쌓이던 것 → 탭은 제 폭 유지, 줄은 옆으로 넘김 */
body[data-v8-screen] .v8-screen-main [style*="overflow-x:auto"] > button,body[data-v8-screen] .v8-screen-main [style*="overflow-x: auto"] > button{flex-shrink:0 !important;white-space:nowrap !important}
/* 결과 화면(수업자료 열기) 버튼 위계: 주 버튼 하나만 검정(크게 보기·다음), 나머지는 흰 바탕 + 1px 테두리(기준 화면 §7-1) */
body[data-v8-screen="lesson-result"] #iepro-ppt-edit-toolbar button,body[data-v8-screen="lesson-result"] .inner-btn-secondary,body[data-v8-screen="lesson-result"] .inner-btn-primary,body[data-v8-screen="lesson-result"] #lv2-prev{background:#FFFFFF !important;color:#111111 !important;border:1px solid #CFCFCF !important;border-radius:12px !important;min-height:40px;padding:0 14px !important;font:600 14px/1 Pretendard,system-ui,sans-serif !important;box-shadow:none !important;text-shadow:none !important}
body[data-v8-screen="lesson-result"] #iepro-ppt-edit-toolbar button:hover,body[data-v8-screen="lesson-result"] .inner-btn-secondary:hover,body[data-v8-screen="lesson-result"] .inner-btn-primary:hover,body[data-v8-screen="lesson-result"] #lv2-prev:hover{border-color:#111111 !important}
body[data-v8-screen="lesson-result"] #iepro-ppt-edit-toolbar #iepro-ppt-focus-open,body[data-v8-screen="lesson-result"] #lv2-next{background:#111111 !important;color:#FFFFFF !important;border:1px solid #111111 !important;border-radius:12px !important;min-height:40px;padding:0 16px !important;font:600 14px/1 Pretendard,system-ui,sans-serif !important;box-shadow:none !important}
body[data-v8-screen="lesson-result"] #iepro-ppt-edit-toolbar{background:#FFFFFF !important;border:1px solid #EAEAEA !important;border-radius:20px !important;box-shadow:none !important}
/* 나머지 기능 화면 공통 모양(2026-09-24, 기준 화면 §7-1): 입력칸·카드·주 버튼/보조 버튼. 체크·라디오·파일 입력은 그대로 */
body[data-v8-screen]:not([data-v8-screen^="lesson"]) .v8-screen-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea){border:1px solid #CFCFCF !important;border-radius:14px !important;background:#FFFFFF !important;color:#111111 !important;font-family:Pretendard,system-ui,sans-serif !important;box-shadow:none !important}
body[data-v8-screen]:not([data-v8-screen^="lesson"]) .v8-screen-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select){min-height:44px}
body[data-v8-screen]:not([data-v8-screen^="lesson"]) .v8-screen-main :is(input,select,textarea):focus{border-color:#111111 !important;box-shadow:0 0 0 3px rgba(17,17,17,.08) !important;outline:none !important}
body[data-v8-screen]:not([data-v8-screen^="lesson"]) .v8-screen-main :is(.comm-card,.comm-tab-card,.bhv-aside-card,.bhv-work-card){background:#FFFFFF !important;border:1px solid #EAEAEA !important;border-radius:20px !important;box-shadow:none !important}
body[data-v8-screen]:not([data-v8-screen^="lesson"]) .v8-screen-main :is(.inner-btn-primary,.comm-generate-btn,.aac-gen-btn){background:#111111 !important;color:#FFFFFF !important;border:1px solid #111111 !important;border-radius:12px !important;min-height:44px;font-family:Pretendard,system-ui,sans-serif !important;font-weight:600 !important;box-shadow:none !important;background-image:none !important}
body[data-v8-screen]:not([data-v8-screen^="lesson"]) .v8-screen-main :is(.inner-btn-primary,.comm-generate-btn,.aac-gen-btn):hover{background:#2A2A2A !important}
body[data-v8-screen]:not([data-v8-screen^="lesson"]) .v8-screen-main :is(.inner-btn-primary,.comm-generate-btn,.aac-gen-btn):disabled{background:#BDBDBD !important;border-color:#BDBDBD !important}
body[data-v8-screen]:not([data-v8-screen^="lesson"]) .v8-screen-main .inner-btn-secondary{background:#FFFFFF !important;color:#111111 !important;border:1px solid #CFCFCF !important;border-radius:12px !important;min-height:40px;font-weight:600 !important;box-shadow:none !important}
/* 따로 있는 페이지(수업 쪽지·내 서랍·광장·교실 도구함·PC 연결)의 새 틀(2026-09-24): 옛 윗줄 숨김, 본문은 새 틀 본문 칸에 */
body[data-v8-page]{background:#FFFFFF !important}
body[data-v8-page] header.site{display:none !important}
body[data-v8-page] .v8-page-main #main{max-width:1040px;width:100%;margin:0 !important;padding:0 !important}
/* 행동지원 최근 8주 추이(2026-09-24 D8) */
.v8-bhv-trend{margin-top:14px;padding-top:12px;border-top:1px solid #EFEFEF;display:flex;flex-direction:column;gap:8px}
.v8-bhv-trend-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.v8-bhv-trend-head strong{font-size:15px;color:#111111}
.v8-bhv-trend .v8-small{font-size:13px;color:#6E6E73;margin:0}
.v8-bhv-trend-chart{overflow-x:auto}
.v8-bhv-trend-svg{width:100%;min-width:320px;height:auto;display:block}
/* 행동지원 화면 칸 배치(2026-09-24): 새 틀 안에서 240·가운데·300 고정이라 가운데가 185px까지 좁아지던 것 → 넓으면 세 칸(가운데 넓게), 보통이면 두 칸+오른쪽 칸은 아래로, 좁으면 한 칸 */
body[data-v8-screen="behavior"] .bhv-layout{grid-template-columns:220px minmax(0,1fr) minmax(0,300px) !important;gap:20px !important}
@media (max-width:1400px){body[data-v8-screen="behavior"] .bhv-layout{grid-template-columns:200px minmax(0,1fr) !important}body[data-v8-screen="behavior"] .bhv-layout > .bhv-aside{grid-column:1 / -1 !important;width:auto !important}}
@media (max-width:900px){body[data-v8-screen="behavior"] .bhv-layout{grid-template-columns:minmax(0,1fr) !important}}
/* 2026-09-26 qa3i 폰 폭(390px) 넘침 고침: 만들기 화면 격자 칸이 안의 선택 칸(가장 긴 선택지 글자)만큼 넓어져 오른쪽이 잘리던 것 → 칸 최소 폭 0, 입력 칸은 부모 폭까지 */
.lm-layout>*,.lm-form-col>*,.lm-section-body>*,.lm-row-2>*,.lm-row-3>*,.lm-field{min-width:0}
.lm-field select,.lm-field input,.lm-field textarea,.lm-select,.lm-input,.lm-textarea{max-width:100%;min-width:0}
/* 2026-09-26 UI 다듬기(uxnf3): 수업자료 결과 "마음에 안들어요" 단추 터치 44px(옛 인라인 모양은 그대로, 높이만). PPT 결과에서는 131-ppt-tidy가 더보기 안으로 옮기며 같은 44px */
button[onclick*="_showRegenSection"]{min-height:44px}
/* 2026-09-26 UI 다듬기(uxnf4): 교실 도구함 설정 제목을 v8 기능 화면 제목과 같게(함렛 36px·원형 아이콘 52px, 폰 26px·44px). tools.js는 그대로 */
body[data-v8-page="tools.settings"] .pagehead h1{display:flex;align-items:center;gap:16px;font-family:var(--v8-serif,'Hahmlet',serif);font-size:36px;line-height:1.28;font-weight:600;letter-spacing:-.03em}
body[data-v8-page="tools.settings"] .pagehead h1::before{content:"";flex:none;width:52px;height:52px;border-radius:9999px;background:#F2F2F2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M10 2h4M12 2v3'/%3E%3C/svg%3E") center/23px 23px no-repeat}
@media (max-width:599px){body[data-v8-page="tools.settings"] .pagehead h1{font-size:26px;gap:12px}body[data-v8-page="tools.settings"] .pagehead h1::before{width:44px;height:44px;background-size:21px 21px}}
/* 2026-10-11 ui8(혁재 "옛날 형식 다 찾고 다 개선"): v8 틀 안 옛 화면에 남아 있던 남색(#1E3A5F)·옛 파랑·그라데이션 상자·초록 저장 버튼을 v8 색으로.
   글·기능·배치는 그대로, 색만. 찾은 곳: 생기부·소통·통합교육 머리 상자, 행동지원 제목, 수업자료 저장 목록 "다시 열기", PPT 만드는 중 창, AAC 인쇄 버튼(시험 계정 화면 탐색 ui8/probe). */
body[data-v8-screen] .comm-hero{background:#FFFFFF !important;border:1px solid #EAEAEA !important;border-radius:20px !important;box-shadow:none !important}
body[data-v8-screen] .comm-hero-title{color:#111111 !important;font-family:var(--v8-serif,'Hahmlet','Noto Serif KR',serif) !important}
body[data-v8-screen] .comm-hero-notice-text{color:#444444 !important}
body[data-v8-screen] .comm-tab-name,body[data-v8-screen] .comm-card-title,body[data-v8-screen] .comm-aside-title,body[data-v8-screen] .comm-sec-btn{color:#111111 !important}
body[data-v8-screen] .comm-tip-dot{background:#111111 !important}
body[data-v8-screen] .bhv-title,body[data-v8-screen] .bhv-work-title,body[data-v8-screen] .bhv-stat-chip-value,body[data-v8-screen] .lm-page-title{color:#111111 !important}
body[data-v8-screen] .bhv-work-title-dot{background:#111111 !important;color:#111111 !important}
body[data-v8-screen] .v21-lh-open{background:#111111 !important;border-color:#111111 !important;color:#FFFFFF !important}
body[data-v8-screen] .aac-btn-pdf,body[data-v8-screen] .aac-pp-btn.on{background:#111111 !important;border-color:#111111 !important;color:#FFFFFF !important}
/* 인라인 스타일로 박힌 옛 색(생기부 머리 상자 제목·통합교육 카드·생성 버튼 등). 글자색 규칙 뒤에 배경 규칙을 두어 진한 바탕 위 흰 글자가 지워지지 않게 한다 */
body[data-v8-screen] [style*="color:#1E3A5F" i],body[data-v8-screen] [style*="color: #1E3A5F" i],body[data-v8-screen] [style*="color:#2F6FD4" i],body[data-v8-screen] [style*="color:#168C7E" i],body[data-v8-screen] [style*="color: rgb(30, 58, 95)" i]{color:#111111 !important}
body[data-v8-screen] [style*="background:#1E3A5F" i],body[data-v8-screen] [style*="background: #1E3A5F" i],body[data-v8-screen] [style*="background-color:#1E3A5F" i],body[data-v8-screen] [style*="background:#2F6FD4" i],body[data-v8-screen] [style*="background:#16a34a" i],body[data-v8-screen] [style*="background: rgb(30, 58, 95)" i],body[data-v8-screen] [style*="background-color: rgb(30, 58, 95)" i]{background:#111111 !important;color:#FFFFFF !important}
body[data-v8-screen] [style*="border:2px solid #1E3A5F" i]{border-color:#111111 !important}
body[data-v8-screen] [style*="border:2px solid #1E3A5F" i]:not([style*="background:#1E3A5F" i]){background:#F7F7F5 !important}
body[data-v8-screen] [style*="background:#EFF6FF" i][style*="color:#2F6FD4" i]{background:#F4F4F2 !important;border-color:#E2E2E2 !important}
body[data-v8-screen] [style*="linear-gradient(135deg,#EFF6FF" i]{background:#FFFFFF !important;border:1px solid #EAEAEA !important;border-radius:20px !important}
/* PPT 만드는 중 창(30-export-meal.js·50-lesson-preview-runtime.js가 body에 붙이는 남색 덮개) */
body[data-v8-screen] [style*="rgba(30,58,95" i],body[data-v8-screen] [style*="rgba(30, 58, 95" i]{background:rgba(17,17,17,.45) !important}
body[data-v8-screen] #_v2pptBar,body[data-v8-screen] [style*="background:#168C7E" i]{background:#111111 !important}
/* 2026-10-11 qa11 행동지원: 상황이야기·파워카드 탭에서는 ABC 쪽 오른쪽 칸(최근 ABC 기록·점검표·작성 기준)을 숨겨 결과 미리보기 자리를 넓힘(전에는 미리보기가 152px로 찌그러짐).
   선택한 탭·문장 수준·만들기 버튼·카드 제목을 v8 색으로(파랑·주황·남색 → 검정), 카드 제목 아이콘은 행동지원 기능 색. 글·기능 그대로 */
body[data-v8-screen="behavior"] .bhv-layout:has(#bhv-tab-social[aria-selected="true"]) > .bhv-aside,body[data-v8-screen="behavior"] .bhv-layout:has(#bhv-tab-powercard[aria-selected="true"]) > .bhv-aside{display:none !important}
@media (min-width:1024px){body[data-v8-screen="behavior"] .bhv-layout:has(#bhv-tab-social[aria-selected="true"]),body[data-v8-screen="behavior"] .bhv-layout:has(#bhv-tab-powercard[aria-selected="true"]){grid-template-columns:220px minmax(0,1fr) !important}}
body[data-v8-screen="behavior"] .bhv-tab[aria-selected="true"]{background:#F7F7F5 !important;border-color:#111111 !important}
body[data-v8-screen="behavior"] .bhv-tab[aria-selected="true"] .bhv-tab-name{color:#111111 !important}
body[data-v8-screen="behavior"] .ss-card-title{color:#111111 !important}
body[data-v8-screen="behavior"] .ss-card-title svg,body[data-v8-screen="behavior"] .ss-card-title svg *{stroke:#B3452E !important}
body[data-v8-screen="behavior"] .ss-level-btn.active{border-color:#111111 !important;background:#F7F7F5 !important}
body[data-v8-screen="behavior"] .ss-level-btn.active .lv-num{color:#111111 !important}
body[data-v8-screen="behavior"] .ss-level-btn.active .lv-desc{color:#6E6E73 !important}
body[data-v8-screen="behavior"] .ss-btn-primary{background:#111111 !important;border-color:#111111 !important;color:#FFFFFF !important;background-image:none !important}
body[data-v8-screen="behavior"] .ss-btn-primary:hover{background:#2A2A2A !important}
/* 2026-10-11 qa11 AAC: 새 카드 만들기 줄의 선택 칸이 88px로 줄어 "분류를 고르세…"처럼 잘리던 것 → 두 선택 칸은 한 줄에 반씩, 낱말 입력은 다음 줄 전체.
   옛 청록·보라 글자 버튼(기본 세트 불러오기·파트너 모드·직전 저장본 복원·+ 페이지)을 v8 보조 버튼 색으로. 낱말 분류 색(사람·동사 등)은 그대로 */
body[data-v8-screen="aac"] .aac-new-row{flex-wrap:wrap !important;gap:8px !important}
body[data-v8-screen="aac"] #aac-new-cat,body[data-v8-screen="aac"] #aac-new-level{flex:1 1 140px !important;min-width:140px !important;width:auto !important}
body[data-v8-screen="aac"] .aac-new-row > input{flex:1 1 100% !important;min-width:0 !important}
body[data-v8-screen="aac"] .aac-basic-btn,body[data-v8-screen="aac"] .v21-aac-partner-toggle,body[data-v8-screen="aac"] .v21-aac-restore{color:#111111 !important;border-color:#CFCFCF !important;background:#FFFFFF !important}
body[data-v8-screen="aac"] .aac-basic-btn svg,body[data-v8-screen="aac"] .aac-basic-btn svg *{stroke:#111111 !important}
body[data-v8-screen="aac"] .aac-tab-add{color:#111111 !important;border-color:#CFCFCF !important}
/* 2026-10-11 qa11 행동지원 폰·태블릿(1023px 이하): 옆칸이 가로 탭 줄로 바뀌면서 학생 칸·날짜 칸을 통째로 숨겨(또는 화면 오른쪽 밖) ABC 기록을 저장할 수 없던 것.
   탭은 설명 줄을 빼고 여러 줄로, 학생 칸·날짜 칸(ABC 탭일 때)은 탭 아래 한 줄 전체로 */
@media (max-width:1023px){
  body[data-v8-screen="behavior"] .bhv-sidebar{flex-wrap:wrap !important;overflow-x:visible !important}
  body[data-v8-screen="behavior"] .bhv-tab{flex:0 0 auto !important}
  body[data-v8-screen="behavior"] .bhv-tab-desc{display:none !important}
  body[data-v8-screen="behavior"] .bhv-sidebar-section:not(#bhv-abc-meta){display:block !important;flex:1 1 100% !important;min-width:0 !important}
  body[data-v8-screen="behavior"] #bhv-abc-meta{flex:1 1 100% !important;min-width:0 !important}
  body[data-v8-screen="behavior"].v21-bhv-abc-active #bhv-abc-meta{display:grid !important}
  body[data-v8-screen="behavior"] .bhv-sidebar-section select,body[data-v8-screen="behavior"] .bhv-sidebar-section input{width:100% !important;max-width:100% !important;box-sizing:border-box !important}
}
/* 2026-10-11 qa11 사회상황이야기·파워카드 결과 머리 줄: 좁은 칸에서 "업로드"가 한 글자씩 세로로 꺾이던 것 → 줄바꿈 허용·글자 안 꺾임 */
body[data-v8-screen="behavior"] .ss-preview-head{flex-wrap:wrap !important;gap:8px !important}
body[data-v8-screen="behavior"] .ss-preview-actions{flex-wrap:wrap !important;gap:6px !important}
body[data-v8-screen="behavior"] .ss-img-opt,body[data-v8-screen="behavior"] .ss-btn-ghost{white-space:nowrap !important;flex:0 0 auto !important}
/* 2026-10-11 qa11 IEP 작성 화면: 새 틀(왼쪽 메뉴)에 넣으면서 옛 남색·청록 버튼·막대를 v8 색으로, 폰에서 두 칸(과거 자료·현재 수준)을 한 칸씩 */
body[data-v8-screen="iep"] .iep-tab-btn{background:#FFFFFF !important;color:#6E6E73 !important}
body[data-v8-screen="iep"] .iep-tab-btn.iep-tab-active{background:#111111 !important;color:#FFFFFF !important}
body[data-v8-screen="iep"] .step-dot.done{background:#6E6E73 !important}
body[data-v8-screen="iep"] .step-dot.active{background:#111111 !important}
body[data-v8-screen="iep"] .btn-primary{background:#111111 !important;border-color:#111111 !important;color:#FFFFFF !important;background-image:none !important;box-shadow:none !important}
body[data-v8-screen="iep"] [id^="btn-gen-cl-"]{background:#111111 !important;color:#FFFFFF !important}
body[data-v8-screen="iep"] [id^="btn-refine-"]{color:#111111 !important;background:#FFFFFF !important;border-color:#CFCFCF !important}
@media (max-width:700px){body[data-v8-screen="iep"] .section-body>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr) !important;gap:12px !important}}
/* 2026-10-11 qa11 생기부: 학년도·학기 선택 칸이 좁아 "2026학"까지만 보이던 것 */
#gibu-year-select,#gibu-semester-select{min-width:124px !important;width:auto !important;padding-right:34px !important}
/* 2026-10-11 qa11: index.html 전체 초기화(* {margin:0})가 창의 가운데 정렬(margin:auto)을 없애 계정·학교 고르기·쪽지 가져오기·사진 바꾸기 창이 왼쪽 위에 붙어 열리던 것 */
dialog.v8-school-dialog,dialog.v8ni-dlg,dialog.pc-dlg{margin:auto}
/* 2026-10-11 qa5(작업자 A "AAC 페이지 탭이 옛 남색"): 고른 페이지 탭을 v8 검정으로 */
.aac-tab.on{background:#111 !important;border-color:#111 !important;color:#fff !important}
/* 2026-10-11 qa8 폰 점검(4차): 입력칸 글자 16px — 아이폰은 16px보다 작은 칸을 누르면 화면을 저절로 확대함(12~14px 칸이 많았음) */
@media (max-width:760px){
  body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]),body select,body textarea{font-size:16px !important}
  /* 작은 단추 키우기(손가락 44px 기준에 가깝게): AAC 분류 칩·상담 종류 칩·자료 걸러보기·화면 공유 끄기·생기부 화면 단추 */
  .aac-chip,.cs-type-chip{min-height:40px !important}
  #lm-saved-filter-type,#lm-saved-search-student{min-height:44px !important}
  .v8-share-bar .v8-btn--sm{min-height:40px !important}
  body[data-v8-screen="gibu"] button:not(.v8-tabbar *){min-height:40px}
}
/* 2026-10-11 qa8: 알림장 "+ 자주 쓰는 문구 추가"가 옛 파란 단추·24px이던 것 */
button[onclick="window._tplAdd()"]{min-height:36px !important;padding:6px 12px !important;background:#fff !important;color:#111 !important;border:1px solid #CFCFCF !important;border-radius:10px !important;font-size:13px !important}
/* 2026-10-11 qa8: 학생 프로필 창 칸·사진 단추 새 디자인 */
#student-profile-modal textarea{border:1px solid #D9D9D9 !important;border-radius:12px !important}
#student-profile-modal label > span{display:inline-flex !important;align-items:center;min-height:40px;padding:0 16px !important;background:#fff !important;border:1px solid #CFCFCF !important;border-radius:10px !important;color:#111 !important;font-weight:600}
/* 2026-10-11 qa8: 폰에서 AAC 카드 모서리 아이콘(별·다시 만들기·지우기 22px)과 알림장 기록 복사·삭제(21px, 옛 파란·빨간)가 누르기 어렵던 것 */
@media (max-width:760px){.aac-ic{min-width:32px !important;min-height:32px !important}}
.alim-hist-copy,.alim-hist-del{min-height:34px !important;padding:6px 12px !important;border-radius:10px !important;background:#fff !important;font-size:12.5px !important}
.alim-hist-copy{color:#111 !important;border:1px solid #CFCFCF !important}
.alim-hist-del{color:#B3452E !important;border:1px solid #E8C5C0 !important}