@charset "UTF-8";
/* ============================================================
   스쿨모아 — 초·중·고 교육정보 포털  /  style.css
   콘셉트 : 밝고 다양한 색 · 어두운/원색 자제 · 모바일 우선
   캘린더 : 학사일정(월) · 급식(주차 아코디언·평일) · 시간표(주간 가로)
   ============================================================ */

/* ─── 01. TOKENS ────────────────────────────────────────────── */
:root{
  --ink:#2b3242; --ink-soft:#5b6577; --ink-faint:#929bab;

  /* 메인(소프트 블루) + 다양한 액센트 (원색·다크 자제) */
  --blue:#4571d4;   --blue-dk:#345bb8;  --blue-soft:#eaf0fc;
  --teal:#1fa392;   --teal-dk:#157a6d;  --teal-soft:#e2f4f1;
  --violet:#7b6bd6; --violet-dk:#5d4cb8;--violet-soft:#efebfc;
  --coral:#ef8059;  --coral-dk:#d9633b; --coral-soft:#fcede6;
  --rose:#df6391;   --rose-dk:#c64776;  --rose-soft:#fce7ef;
  --sky:#3aa5dd;    --sky-dk:#2585bb;   --sky-soft:#e6f4fc;
  --mint:#3fae77;   --mint-dk:#2d8c5e;  --mint-soft:#e6f5ec;

  --deep:#38415a;   /* 다크 톤 — 매우 절제해 사용 */

  --bg:#ffffff; --surface:#f4f7fb; --panel:#eaeff6; --panel-deep:#dce3ee; --line:#e5eaf2;

  --on-dark:#ffffff; --on-dark-soft:rgba(255,255,255,.84); --on-dark-faint:rgba(255,255,255,.55);

  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px;

  --sh-sm:0 1px 2px rgba(40,55,90,.05), 0 3px 8px rgba(40,55,90,.06);
  --sh:0 8px 24px rgba(40,55,90,.10);
  --sh-lg:0 20px 48px rgba(40,55,90,.14);

  --maxw:1240px; --pad:40px; --hd:76px; --tb:0px;
  --font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;
  --ease:220ms cubic-bezier(.4,0,.2,1);
}

/* ─── 02. RESET ─────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--font); font-size:16px; line-height:1.7; color:var(--ink); background:var(--bg); word-break:keep-all; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; border:none; outline:none; -webkit-appearance:none; appearance:none; }
table{ border-collapse:collapse; width:100%; }
address{ font-style:normal; }
::selection{ background:var(--blue); color:#fff; }

/* ─── 03. TYPOGRAPHY (최소 폰트 13px floor) ─────────────────── */
h1{ font-size:50px; font-weight:700; line-height:1.18; letter-spacing:-.028em; }
h2{ font-size:34px; font-weight:700; line-height:1.24; letter-spacing:-.02em; }
h3{ font-size:23px; font-weight:700; line-height:1.36; letter-spacing:-.01em; }
h4{ font-size:19px; font-weight:700; line-height:1.42; }
h5{ font-size:16px; font-weight:700; line-height:1.5; }
p{ font-size:16px; }
strong{ font-weight:700; }
.eyebrow{ display:inline-block; font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--blue); margin-bottom:16px; }
.eyebrow.teal{ color:var(--teal-dk); } .eyebrow.violet{ color:var(--violet-dk); } .eyebrow.coral{ color:var(--coral-dk); } .eyebrow.rose{ color:var(--rose-dk); }
.lead{ font-size:18px; color:var(--ink-soft); line-height:1.8; }

/* ─── 04. LAYOUT ────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.wrap.narrow{ max-width:var(--maxw); }
.section{ padding:108px 0; }
.section.tight{ padding:76px 0; }
.surface{ background:var(--surface); }
.section-head{ max-width:720px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ margin-bottom:16px; }
.section-head p{ color:var(--ink-soft); font-size:17px; line-height:1.8; }
.head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:48px; }
.head-row .section-head{ margin-bottom:0; }
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2.split{ gap:60px; align-items:center; }
.demo-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .demo-row.center{ justify-content:center; }
.mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; }
.mb-16{ margin-bottom:16px; } .mb-28{ margin-bottom:28px; } .mb-40{ margin-bottom:40px; }

/* ─── 05. 상단 광고바 ───────────────────────────────────────── */
.adbar-close{ display:none; }
.ad-bar{ background:var(--blue-soft); color:var(--blue-dk); }
.ad-bar-inner{ display:flex; align-items:center; justify-content:center; gap:14px; min-height:40px; padding:8px 44px 8px 0; position:relative; text-align:center; }
.ad-bar-inner p{ font-size:14px; color:var(--blue-dk); }
.ad-bar-inner p b{ font-weight:800; }
.ad-bar-inner .ab-link{ font-size:14px; font-weight:700; color:var(--blue-dk); white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }
.ad-bar-x{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); color:var(--blue-dk); cursor:pointer; }
.ad-bar-x:hover{ background:rgba(69,113,212,.12); }
.ad-bar-x svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.adbar-close:checked ~ .ad-bar{ display:none; }

/* ─── 06. 탑바 ──────────────────────────────────────────────── */
.topbar{ position:sticky; top:0; z-index:1001; height:var(--tb); background:var(--deep); color:var(--on-dark-soft); }
.topbar-inner{ height:var(--tb); display:flex; align-items:center; justify-content:space-between; }
.topbar-left,.topbar-right{ display:flex; align-items:center; gap:22px; }
.topbar a{ font-size:13px; color:var(--on-dark-soft); transition:color var(--ease); }
.topbar a:hover{ color:#fff; }
.topbar .tb-cta{ color:#fff; font-weight:700; }
.topbar .tb-divider{ width:1px; height:14px; background:rgba(255,255,255,.24); }

/* ─── 07. HEADER (PC 고정·반투명 블러 / 모바일 비고정) ──────── */
.site-header{ position:sticky; top:var(--tb); z-index:1000; height:var(--hd); background:rgba(255,255,255,.78); -webkit-backdrop-filter:saturate(160%) blur(20px); backdrop-filter:saturate(160%) blur(20px); box-shadow:0 1px 0 var(--line); }
.header-bar{ height:var(--hd); display:flex; align-items:center; }
.logo{ display:flex; align-items:center; gap:0; font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; flex-shrink:0; }
.logo .mark{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--blue),var(--violet)); position:relative; flex-shrink:0; }
.logo .mark::after{ content:''; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50% 50% 50% 3px; background:#fff; transform:translate(-50%,-54%) rotate(-45deg); }
.logo .lab{ color:var(--blue); background:linear-gradient(120deg,var(--blue),var(--violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.gnb{ display:flex; margin-left:50px; }
.gnb-list{ display:flex; }
.gnb-item{ position:relative; }
.gnb-item > a{ display:flex; align-items:center; gap:7px; height:var(--hd); padding:0 20px; font-size:16px; font-weight:600; color:var(--ink); white-space:nowrap; box-shadow:inset 0 -2px 0 transparent; transition:box-shadow var(--ease),color var(--ease); }
.gnb-item > a .caret{ width:6px; height:6px; border-right:1.6px solid var(--ink-faint); border-bottom:1.6px solid var(--ink-faint); transform:translateY(-2px) rotate(45deg); transition:transform var(--ease),border-color var(--ease); }
.gnb-item:hover > a{ color:var(--blue); box-shadow:inset 0 -2px 0 var(--blue); }
.gnb-item:hover > a .caret{ transform:translateY(0) rotate(-135deg); border-color:var(--blue); }
.gnb-sub{ position:absolute; top:100%; left:12px; min-width:216px; background:var(--bg); border-radius:var(--r); box-shadow:var(--sh); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--ease),transform var(--ease),visibility var(--ease); }
.gnb-item:hover .gnb-sub{ opacity:1; visibility:visible; transform:translateY(0); }
.gnb-sub a{ display:block; padding:11px 16px; border-radius:var(--r-sm); font-size:15px; color:var(--ink-soft); transition:color var(--ease),background var(--ease); }
.gnb-sub a:hover{ color:var(--blue); background:var(--surface); }
.gnb-right{ margin-left:auto; display:flex; align-items:center; gap:18px; flex-shrink:0; }
.gnb-right .hl-link{ font-size:15px; font-weight:600; color:var(--blue-dk); }
.nav-toggle{ display:none; }
.hamburger{ display:none; margin-left:14px; flex-direction:column; gap:5px; padding:8px; }
.hamburger span{ display:block; width:24px; height:2px; border-radius:2px; background:var(--ink); transition:transform var(--ease),opacity var(--ease); }
.nav-toggle:checked ~ .site-header .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .site-header .hamburger span:nth-child(2){ opacity:0; }
.nav-toggle:checked ~ .site-header .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* 모바일 전용 조각 (PC에서는 숨김) */
.gnb-mhead,.gnb-util{ display:none; }
.m-nav-close{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; }
.m-nav-close svg{ width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; }

/* ─── 08. BREADCRUMB ────────────────────────────────────────── */
.breadcrumb{ padding:20px 0; background:var(--surface); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.breadcrumb li{ display:flex; align-items:center; font-size:13px; }
.breadcrumb li:not(:last-child)::after{ content:''; width:5px; height:5px; margin:0 11px; border-right:1.4px solid var(--ink-faint); border-top:1.4px solid var(--ink-faint); transform:rotate(45deg); }
.breadcrumb a{ color:var(--ink-soft); transition:color var(--ease); }
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb li[aria-current]{ color:var(--ink); font-weight:600; }

/* ─── 09. BUTTONS ───────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:15px; font-weight:600; line-height:1; padding:15px 28px; border-radius:var(--r); white-space:nowrap; transition:background var(--ease),color var(--ease),box-shadow var(--ease),transform var(--ease); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--blue); color:#fff; } .btn-primary:hover{ background:var(--blue-dk); }
.btn-teal{ background:var(--teal); color:#fff; } .btn-teal:hover{ background:var(--teal-dk); }
.btn-coral{ background:var(--coral); color:#fff; } .btn-coral:hover{ background:var(--coral-dk); }
.btn-soft{ background:var(--blue-soft); color:var(--blue-dk); } .btn-soft:hover{ background:#dde9fb; }
.btn-ghost{ background:var(--panel); color:var(--ink); } .btn-ghost:hover{ background:var(--panel-deep); }
.btn-line{ background:transparent; color:var(--blue-dk); box-shadow:inset 0 0 0 1.5px var(--panel-deep); } .btn-line:hover{ box-shadow:inset 0 0 0 1.5px var(--blue); color:var(--blue); }
.btn-on-dark{ background:#fff; color:var(--blue-dk); } .btn-on-dark:hover{ background:var(--surface); }
.btn-on-dark-line{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px var(--on-dark-faint); } .btn-on-dark-line:hover{ background:rgba(255,255,255,.14); }
.btn-sm{ padding:11px 18px; font-size:14px; } .btn-lg{ padding:18px 36px; font-size:16px; } .btn-block{ width:100%; }
.arrow-link{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--blue-dk); }
.arrow-link::after{ content:''; width:16px; height:9px; flex-shrink:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h13M9 1l4 3.5L9 8' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h13M9 1l4 3.5L9 8' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain; transition:transform var(--ease); }
.arrow-link:hover::after{ transform:translateX(4px); }
.arrow-link.on-dark{ color:#fff; }

/* ─── 10. HERO (밝은 그라데이션) ────────────────────────────── */
.hero{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--blue-soft) 0%, var(--violet-soft) 46%, var(--surface) 100%); }
.hero .blob{ position:absolute; border-radius:50%; filter:blur(10px); opacity:.5; z-index:0; }
.hero .blob.b1{ width:280px; height:280px; background:#d6e6ff; top:-60px; right:6%; }
.hero .blob.b2{ width:200px; height:200px; background:var(--teal-soft); bottom:-30px; left:8%; }
.hero .blob.b3{ width:150px; height:150px; background:var(--rose-soft); top:40%; right:30%; }
.hero-inner{ position:relative; z-index:1; padding:96px 0 60px; /* max-width:820px */; }
.hero h1{ margin-bottom:22px; color:var(--ink); }
.hero h1 .hl{ background:linear-gradient(120deg,var(--blue),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .hero-desc{ font-size:19px; color:var(--ink-soft); line-height:1.75; /* max-width:600px; */ margin-bottom:38px; }
.search-bar{ display:flex; align-items:stretch; background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-lg); max-width:720px; overflow:hidden; }
.search-bar .s-cat{ flex-shrink:0; position:relative; }
.search-bar .s-cat select{ height:100%; padding:0 42px 0 24px; font-size:16px; font-weight:600; color:var(--ink); background:var(--surface); cursor:pointer; }
.search-bar .s-cat::after{ content:''; position:absolute; right:18px; top:50%; width:8px; height:8px; border-right:1.6px solid var(--ink-faint); border-bottom:1.6px solid var(--ink-faint); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.search-bar .s-field{ flex:1; display:flex; align-items:center; padding:0 22px; }
.search-bar .s-field input{ flex:1; padding:19px 0; font-size:16px; }
.search-bar .s-field input::placeholder{ color:var(--ink-faint); }
.search-bar .s-btn{ flex-shrink:0; background:var(--blue); color:#fff; padding:0 36px; font-size:16px; font-weight:600; transition:background var(--ease); }
.search-bar .s-btn:hover{ background:var(--blue-dk); }
.search-suggest{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin-top:20px; }
.search-suggest .ss-label{ font-size:14px; font-weight:600; color:var(--ink-faint); margin-right:4px; }
.search-suggest a{ font-size:14px; color:var(--ink-soft); padding:4px 2px; transition:color var(--ease); }
.search-suggest a:hover{ color:var(--blue); }
.search-suggest a:not(:last-child)::after{ content:'·'; margin-left:10px; color:var(--panel-deep); }
.hero-stats{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-bottom:84px; }
.hero-stat{ background:rgba(255,255,255,.7); border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--sh-sm); text-align:center; }
.hero-stat .hs-num{ font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--blue-dk); }
.hero-stat:nth-child(2) .hs-num{ color:var(--teal-dk); } .hero-stat:nth-child(3) .hs-num{ color:var(--violet-dk); } .hero-stat:nth-child(4) .hs-num{ color:var(--coral-dk); }
.hero-stat .hs-num .u{ font-size:17px; margin-left:2px; }
.hero-stat .hs-label{ font-size:14px; color:var(--ink-soft); margin-top:5px; }

/* ─── 11. 광고 슬라이드 배너 (5초 자동·내부 점) ──────────────── */
.ad-banner{ position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh); background:var(--deep); }
.ad-banner .ad-input{ display:none; }
.ad-slides{ display:grid; }
.ad-slide{ grid-area:1/1; min-height:230px; display:flex; align-items:center; color:#fff; position:relative; opacity:0; z-index:1; transition:opacity .9s ease-in-out; overflow:hidden; }
.ad-slide .ad-bg{ position:absolute; inset:0; }
.ad-slide .ad-bg img{ width:100%; height:100%; object-fit:cover; }
.ad-slide .ad-bg::after{ content:''; position:absolute; inset:0; }
.ad-slide.s1 .ad-bg{ background:linear-gradient(110deg,var(--blue),var(--sky)); } .ad-slide.s1 .ad-bg::after{ background:linear-gradient(110deg,rgba(53,91,184,.7),rgba(58,165,221,.35)); }
.ad-slide.s2 .ad-bg{ background:linear-gradient(110deg,var(--teal),var(--mint)); } .ad-slide.s2 .ad-bg::after{ background:linear-gradient(110deg,rgba(21,122,109,.66),rgba(63,174,119,.3)); }
.ad-slide.s3 .ad-bg{ background:linear-gradient(110deg,var(--violet),var(--rose)); } .ad-slide.s3 .ad-bg::after{ background:linear-gradient(110deg,rgba(93,76,184,.66),rgba(223,99,145,.3)); }
.ad-slide .ad-body{ position:relative; z-index:1; padding:40px 56px 56px; max-width:600px; }
.ad-slide .ad-tag{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.06em; background:rgba(255,255,255,.22); padding:5px 12px; border-radius:var(--r-sm); margin-bottom:14px; }
.ad-slide h3{ font-size:27px; margin-bottom:10px; }
.ad-slide p{ font-size:16px; color:var(--on-dark-soft); margin-bottom:20px; max-width:440px; }
#ad1:checked ~ .ad-slides .ad-slide:nth-child(1),
#ad2:checked ~ .ad-slides .ad-slide:nth-child(2),
#ad3:checked ~ .ad-slides .ad-slide:nth-child(3){ opacity:1; z-index:2; }
.ad-dots{ position:absolute; left:56px; bottom:28px; z-index:2; display:flex; gap:10px; }
.ad-dots label{ width:30px; height:4px; border-radius:2px; background:rgba(255,255,255,.45); cursor:pointer; transition:background var(--ease); }
.ad-dots label:hover{ background:rgba(255,255,255,.8); }
#ad1:checked ~ .ad-dots label:nth-child(1),
#ad2:checked ~ .ad-dots label:nth-child(2),
#ad3:checked ~ .ad-dots label:nth-child(3){ background:#fff; }

/* ─── 12. 카테고리 사진 카드 (색상 다양화) ──────────────────── */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cat-card{ position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--sh-sm); }
.cat-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cat-card::after{ content:''; position:absolute; inset:0; }
.cat-card.k-school::after{ background:linear-gradient(to top,rgba(52,91,184,.9) 6%,rgba(52,91,184,.28) 52%,transparent); }
.cat-card.k-time::after{ background:linear-gradient(to top,rgba(58,165,221,.9) 6%,rgba(58,165,221,.28) 52%,transparent); }
.cat-card.k-meal::after{ background:linear-gradient(to top,rgba(21,122,109,.9) 6%,rgba(21,122,109,.28) 52%,transparent); }
.cat-card.k-acad::after{ background:linear-gradient(to top,rgba(198,71,118,.9) 6%,rgba(198,71,118,.28) 52%,transparent); }
.cat-card:hover img{ transform:scale(1.06); }
.cat-card .cc-body{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:24px; color:#fff; }
.cat-card .cc-no{ font-size:14px; font-weight:700; color:rgba(255,255,255,.8); margin-bottom:8px; }
.cat-card h4{ font-size:20px; margin-bottom:5px; }
.cat-card p{ font-size:14px; color:var(--on-dark-soft); }

/* ─── 13. 인기검색 순위 / 학교 카드 ─────────────────────────── */
.rank-card{ background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.rank-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 26px 16px; box-shadow:inset 0 -1px 0 var(--line); }
.rank-head h3{ font-size:18px; }
.rank-head .rank-time{ font-size:13px; color:var(--ink-faint); }
.rank-list{ padding:10px 14px 16px; }
.rank-item{ display:flex; align-items:center; gap:16px; padding:11px 14px; border-radius:var(--r); transition:background var(--ease); }
.rank-item:hover{ background:var(--surface); }
.rank-no{ width:24px; font-size:17px; font-weight:800; text-align:center; flex-shrink:0; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.rank-item:nth-child(1) .rank-no{ color:var(--coral); } .rank-item:nth-child(2) .rank-no{ color:var(--blue); } .rank-item:nth-child(3) .rank-no{ color:var(--teal); }
.rank-name{ flex:1; font-size:15px; font-weight:500; }
.rank-item:hover .rank-name{ color:var(--blue); }
.rank-move{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:4px; flex-shrink:0; }
.rank-move.up{ color:var(--coral-dk); } .rank-move.down{ color:var(--blue); } .rank-move.same{ color:var(--ink-faint); } .rank-move.new{ color:var(--teal-dk); }
.rank-move .tri{ width:0; height:0; }
.rank-move.up .tri{ border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:6px solid currentColor; }
.rank-move.down .tri{ border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid currentColor; }
.home-aside-grid{ display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:start; }

.school-card{ background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; transition:transform var(--ease),box-shadow var(--ease); }
.school-card:hover{ transform:translateY(-3px); box-shadow:var(--sh); }
.school-card .sc-thumb{ aspect-ratio:16/10; background:var(--panel); position:relative; overflow:hidden; }
.school-card .sc-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.school-card:hover .sc-thumb img{ transform:scale(1.05); }
.school-card .sc-badge{ position:absolute; top:14px; left:14px; }
.school-card .sc-body{ padding:24px 26px 28px; }
.school-card .sc-body h4{ font-size:18px; margin-bottom:6px; }
.school-card:hover .sc-body h4{ color:var(--blue); }
.school-card .sc-loc{ font-size:14px; color:var(--ink-soft); margin-bottom:16px; }
.school-card .sc-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; color:var(--ink-soft); box-shadow:inset 0 1px 0 var(--line); padding-top:16px; }
.school-card .sc-meta b{ color:var(--ink); font-weight:600; }
.school-mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.school-mini{ display:flex; align-items:center; gap:18px; background:var(--bg); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--sh-sm); transition:transform var(--ease),box-shadow var(--ease); }
.school-mini:hover{ transform:translateY(-2px); box-shadow:var(--sh); }
.school-mini .sm-rank{ width:34px; height:34px; flex-shrink:0; border-radius:var(--r); background:var(--blue-soft); color:var(--blue-dk); font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.school-mini .sm-body{ flex:1; min-width:0; }
.school-mini .sm-name{ font-size:16px; font-weight:700; margin-bottom:3px; }
.school-mini:hover .sm-name{ color:var(--blue); }
.school-mini .sm-meta{ font-size:14px; color:var(--ink-soft); }
.school-mini .sm-badge{ flex-shrink:0; }

/* ─── 14a. 학사일정 캘린더 (월 · 주말 표시) ─────────────────── */
.calendar{ background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.cal-head{ display:flex; align-items:center; justify-content:center; gap:26px; padding:22px; box-shadow:inset 0 -1px 0 var(--line); }
.cal-nav{ width:42px; height:42px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--ink); transition:background var(--ease),color var(--ease); }
.cal-nav:hover{ background:var(--blue); color:#fff; }
.cal-nav svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cal-title{ font-size:20px; font-weight:700; min-width:170px; text-align:center; }
.cal-title .yr{ color:var(--ink-faint); font-weight:600; font-size:16px; margin-right:7px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.cal-dow{ padding:14px 0; text-align:center; font-size:14px; font-weight:700; color:var(--ink-soft); box-shadow:inset 0 -1px 0 var(--line); }
.cal-dow.sun{ color:var(--rose); } .cal-dow.sat{ color:var(--blue); }
.cal-cell{ min-height:104px; padding:10px; box-shadow:inset 0 0 0 .5px var(--line); display:flex; flex-direction:column; gap:5px; }
.cal-cell.empty{ background:var(--surface); }
.cal-date{ font-size:14px; font-weight:700; color:var(--ink); }
.cal-cell.sun .cal-date{ color:var(--rose); } .cal-cell.sat .cal-date{ color:var(--blue); }
.cal-cell.today{ background:var(--blue-soft); box-shadow:inset 0 0 0 2px var(--blue); }
.cal-cell.today .cal-date{ background:var(--blue); color:#fff; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.cal-chip{ align-self:flex-start; font-size:13px; font-weight:600; padding:3px 9px; border-radius:var(--r-sm); line-height:1.3; }
.cal-chip.exam{ background:var(--rose-soft); color:var(--rose-dk); }
.cal-chip.event{ background:var(--violet-soft); color:var(--violet-dk); }
.cal-chip.holiday{ background:var(--coral-soft); color:var(--coral-dk); }
.cal-legend{ display:flex; flex-wrap:wrap; gap:18px; padding:18px 24px; box-shadow:inset 0 1px 0 var(--line); }
.cal-legend span{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-soft); }
.cal-legend .dot{ width:10px; height:10px; border-radius:3px; }
.cal-legend .dot.exam{ background:var(--rose); } .cal-legend .dot.event{ background:var(--violet); } .cal-legend .dot.holiday{ background:var(--coral); }

/* ─── 14b. 급식 캘린더 (주차 아코디언 · 평일 · 영양/알러지) ──── */
.meal-cal{ }
.meal-nav{ display:flex; align-items:center; justify-content:center; gap:26px; margin-bottom:22px; }
.meal-nav .cal-nav{ box-shadow:var(--sh-sm); }
.meal-nav .cal-title{ min-width:150px; }
.meal-week{ background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.meal-week + .meal-week{ margin-top:14px; }
.meal-week > summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:repeat(5,1fr); background:var(--surface); position:relative; }
.meal-week > summary::-webkit-details-marker{ display:none; }
.meal-week > summary::after{ content:''; position:absolute; right:16px; top:50%; width:9px; height:9px; border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:translateY(-70%) rotate(45deg); transition:transform var(--ease); }
.meal-week[open] > summary::after{ transform:translateY(-30%) rotate(-135deg); }
.mw-day{ padding:15px 6px; text-align:center; font-size:14px; color:var(--ink-soft); box-shadow:inset -1px 0 0 var(--line); }
.mw-day:last-child{ box-shadow:none; }
.mw-day .dnum{ display:block; font-size:18px; font-weight:800; color:var(--ink); }
.mw-day.today{ background:var(--teal-soft); }
.mw-day.today .dnum{ color:var(--teal-dk); }
.mw-body{ display:grid; grid-template-columns:repeat(5,1fr); box-shadow:inset 0 1px 0 var(--line); }
.mw-cell{ padding:18px 16px; box-shadow:inset -1px 0 0 var(--line); display:flex; flex-direction:column; align-items:center; }
.mw-cell:last-child{ box-shadow:none; }
.mw-cell.today{ background:rgba(31,163,146,.06); }
.mc-label{ display:none; font-size:14px; font-weight:700; color:var(--teal-dk); margin-bottom:10px; }
.mw-menu{ font-size:15px; line-height:1.7; color:var(--ink); }
.mw-menu.empty{ color:var(--ink-faint); font-size:14px; }
.nutri{ margin-top:12px; width:100%; }
.nutri > summary{ list-style:none; cursor:pointer; display:flex; justify-content:center; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--teal-dk); }
.nutri > summary::-webkit-details-marker{ display:none; }
.nutri > summary::before{ content:'+'; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--teal-soft); color:var(--teal-dk); font-weight:700; font-size:14px; }
.nutri[open] > summary::before{ content:'–'; }
.nutri .nutri-body{ margin-top:10px; padding:14px 16px; background:var(--surface); border-radius:var(--r); font-size:14px; color:var(--ink-soft); line-height:1.7; }
.nutri .nutri-body .kcal{ font-weight:700; color:var(--teal-dk); }
.meal-allergy{ margin-top:20px; background:var(--surface); border-radius:var(--r-lg); padding:20px 24px; }
.meal-allergy h4{ font-size:15px; margin-bottom:8px; }
.meal-allergy p{ font-size:14px; color:var(--ink-soft); line-height:1.7; }
.meal-allergy .al-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.meal-allergy .al-tags .tag{ background:#fff; }

/* ─── 14d. Zero-JS 월 전환 (라디오 :checked, JS 미사용) ─────── */
.cssnav > .nav-radio{ display:none; }
.cal-pane,.meal-pane{ display:none; }
#aca-mon-0:checked ~ .cal-pane[data-pane="0"],
#aca-mon-1:checked ~ .cal-pane[data-pane="1"],
#aca-mon-2:checked ~ .cal-pane[data-pane="2"]{ display:block; }
#meal-mon-0:checked ~ .meal-pane[data-pane="0"],
#meal-mon-1:checked ~ .meal-pane[data-pane="1"],
#meal-mon-2:checked ~ .meal-pane[data-pane="2"]{ display:block; }
.cal-nav{ cursor:pointer; }
.cal-nav.is-off{ opacity:.3; pointer-events:none; cursor:default; }

/* ─── 14c. 시간표 (주간 · 가로 스크롤 · 당일 강조) ──────────── */
.timetable-wrap{ overflow-x:auto; border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.timetable{ min-width:680px; text-align:center; background:var(--bg); }
.timetable th,.timetable td{ padding:15px 10px; font-size:15px; }
.timetable thead th{ background:var(--blue); color:#fff; font-weight:700; font-size:15px; }
.timetable thead th:first-child{ background:var(--blue-dk); width:84px; }
.timetable thead th.today{ background:var(--coral); }
.timetable tbody th{ background:var(--surface); color:var(--ink-soft); font-weight:700; font-size:14px; }
.timetable tbody td{ color:var(--ink); font-weight:500; box-shadow:inset 0 0 0 .5px var(--line); }
.timetable tbody td.today{ background:var(--coral-soft); }
.timetable td .subj{ font-weight:600; } .timetable td .room{ display:block; font-size:13px; color:var(--ink-faint); margin-top:2px; }
.tt-hint{ display:none; align-items:center; justify-content:center; gap:7px; padding:11px; font-size:14px; color:var(--ink-faint); }
.tt-hint svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ─── 15. 기타 테이블 ───────────────────────────────────────── */
.table-wrap{ width:100%; overflow-x:auto; }
.data-table{ border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); }
.data-table th,.data-table td{ text-align:left; padding:16px 20px; font-size:15px; }
.data-table thead th{ background:var(--blue); color:#fff; font-size:14px; font-weight:600; }
.data-table tbody tr{ background:var(--bg); } .data-table tbody tr:nth-child(even){ background:var(--surface); }
.data-table tbody td{ color:var(--ink-soft); } .data-table tbody td:first-child{ color:var(--ink); font-weight:600; }
.list-table{ border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); }
.list-table td{ padding:17px 20px; font-size:15px; background:var(--bg); box-shadow:inset 0 -1px 0 var(--line); }
.list-table tbody tr:last-child td{ box-shadow:none; }
.list-table tbody tr:hover td{ background:var(--surface); }
.list-table .lt-no{ width:60px; color:var(--ink-faint); font-weight:700; font-size:14px; text-align:center; }
.list-table .lt-title{ color:var(--ink); font-weight:500; } .list-table tbody tr:hover .lt-title{ color:var(--blue); }
.list-table .lt-meta{ width:130px; color:var(--ink-faint); font-size:14px; text-align:right; }
@media (max-width:600px){
  .list-table tr{ display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:5px 10px; padding:14px 16px; }
  .list-table td{ display:block; padding:0; background:transparent; box-shadow:none; }
  .list-table tbody tr{ box-shadow:inset 0 -1px 0 var(--line); }
  .list-table tbody tr:last-child{ box-shadow:none; }
  .list-table tbody tr:hover td{ background:transparent; }
  .list-table .lt-no{ grid-column:1; grid-row:1; width:auto; text-align:left; font-size:13px; }
  .list-table td:nth-child(2){ grid-column:2; grid-row:1; }
  .list-table .lt-meta{ grid-column:3; grid-row:1; width:auto; text-align:right; font-size:13px; }
  .list-table .lt-title{ grid-column:1 / -1; grid-row:2; font-size:15px; line-height:1.55; word-break:keep-all; }
  .list-table .lt-title a{ display:inline; }
}
.pagination{ display:flex; gap:6px; justify-content:center; margin-top:32px; }
.pagination a{ min-width:42px; height:42px; padding:0 10px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; color:var(--ink-soft); background:var(--surface); transition:background var(--ease),color var(--ease); }
.pagination a:hover{ background:var(--panel); color:var(--ink); }
.pagination a.current{ background:var(--blue); color:#fff; }

/* ─── 16. 급식 평점 ─────────────────────────────────────────── */
.rating-block{ background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.rating-summary{ display:flex; align-items:center; gap:40px; padding:34px 36px; background:linear-gradient(135deg,var(--coral-soft),var(--rose-soft)); }
.rs-big{ text-align:center; }
.rs-big .score{ font-size:52px; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--coral-dk); }
.rs-big .of{ font-size:14px; color:var(--ink-soft); margin-top:6px; }
.rs-bars{ flex:1; display:flex; flex-direction:column; gap:8px; }
.rs-bar{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-soft); }
.rs-bar .bar-track{ flex:1; height:9px; background:rgba(255,255,255,.7); border-radius:5px; overflow:hidden; }
.rs-bar .bar-fill{ height:100%; background:var(--coral); border-radius:5px; }
.rs-bar .bar-fill.w70{ width:70%; } .rs-bar .bar-fill.w20{ width:20%; } .rs-bar .bar-fill.w7{ width:7%; } .rs-bar .bar-fill.w2{ width:2%; } .rs-bar .bar-fill.w1{ width:1%; }
.stars{ display:inline-flex; gap:3px; }
.stars i{ width:18px; height:18px; display:block; flex-shrink:0; background:var(--panel-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center/contain; }
.stars i.on{ background:var(--coral); }
.star-input{ display:inline-flex; flex-direction:row-reverse; gap:5px; }
.star-input input{ display:none; }
.star-input label{ width:32px; height:32px; cursor:pointer; background:var(--panel-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center/contain; transition:background var(--ease); }
.star-input label:hover,.star-input label:hover ~ label,.star-input input:checked ~ label{ background:var(--coral); }
.sort-bar{ display:flex; flex-wrap:wrap; gap:8px; }
.sort-bar .sort-btn{ font-size:14px; font-weight:600; color:var(--ink-soft); padding:9px 18px; border-radius:var(--r); background:var(--surface); transition:background var(--ease),color var(--ease); }
.sort-bar .sort-btn:hover{ background:var(--panel); color:var(--ink); }
.sort-bar .sort-btn.active{ background:var(--blue); color:#fff; }
.review-list{ display:flex; flex-direction:column; gap:12px; }
.review-item{ background:var(--bg); border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--sh-sm); }
.review-item .ri-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.review-item .ri-who{ display:flex; align-items:center; gap:11px; }
.review-item .ri-av{ width:36px; height:36px; border-radius:50%; background:var(--blue-soft); color:var(--blue-dk); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; }
.review-item .ri-name{ font-size:15px; font-weight:600; }
.review-item .ri-date{ font-size:13px; color:var(--ink-faint); }
.review-item .ri-text{ font-size:15px; color:var(--ink-soft); line-height:1.7; }
.review-form{ background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh); padding:32px; }
.review-form .rf-stars{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.review-form .rf-stars .rf-label{ font-size:15px; font-weight:700; }
.review-form .rf-row{ display:flex; gap:12px; }
.review-form .rf-row .input{ flex:1; }

/* ─── 17. CARDS / NEWS ──────────────────────────────────────── */
.card{ background:var(--bg); border-radius:var(--r-lg); padding:30px; box-shadow:var(--sh-sm); transition:transform var(--ease),box-shadow var(--ease); }
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh); }
.card .card-kicker{ font-size:14px; font-weight:700; color:var(--blue); margin-bottom:12px; }
.card.t-teal .card-kicker{ color:var(--teal-dk); } .card.t-violet .card-kicker{ color:var(--violet-dk); } .card.t-coral .card-kicker{ color:var(--coral-dk); }
.card h3{ font-size:20px; margin-bottom:10px; } .card h4{ font-size:18px; margin-bottom:10px; }
.card p{ font-size:15px; color:var(--ink-soft); line-height:1.78; }
.card .arrow-link{ margin-top:18px; font-size:14px; }
.news-list{ display:flex; flex-direction:column; }
.news-item{ display:flex; gap:22px; align-items:center; padding:22px 4px; box-shadow:inset 0 -1px 0 var(--line); transition:background var(--ease); }
.news-item:hover{ background:var(--surface); }
.news-item .ni-date{ flex-shrink:0; width:78px; text-align:center; }
.news-item .ni-date .d{ font-size:24px; font-weight:800; color:var(--blue); line-height:1; }
.news-item .ni-date .m{ font-size:13px; color:var(--ink-faint); margin-top:4px; }
.news-item .ni-body{ flex:1; }
.news-item .ni-body h4{ font-size:16px; line-height:1.5; margin-bottom:4px; }
.news-item:hover .ni-body h4{ color:var(--blue); }
.news-item .ni-body p{ font-size:14px; color:var(--ink-soft); }
.news-item .ni-cat{ flex-shrink:0; }

/* ─── 18. 통계 (모던 카드) ──────────────────────────────────── */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat-card{ position:relative; background:var(--bg); border-radius:var(--r-lg); padding:30px 28px 28px; box-shadow:var(--sh-sm); overflow:hidden; }
.stat-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; }
.stat-card.c1::before{ background:var(--blue); } .stat-card.c2::before{ background:var(--teal); } .stat-card.c3::before{ background:var(--violet); } .stat-card.c4::before{ background:var(--coral); }
.stat-card .st-num{ font-size:42px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.stat-card.c1 .st-num{ color:var(--blue-dk); } .stat-card.c2 .st-num{ color:var(--teal-dk); } .stat-card.c3 .st-num{ color:var(--violet-dk); } .stat-card.c4 .st-num{ color:var(--coral-dk); }
.stat-card .st-num .u{ font-size:20px; margin-left:3px; }
.stat-card .st-label{ font-size:15px; color:var(--ink-soft); margin-top:12px; }

/* ─── 19. E-E-A-T / 문서메타(최소화) ────────────────────────── */
.expert-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.expert{ display:flex; gap:22px; background:var(--bg); border-radius:var(--r-lg); padding:30px; box-shadow:var(--sh-sm); }
.expert .ex-photo{ width:74px; height:74px; flex-shrink:0; border-radius:var(--r); background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:28px; }
.expert:nth-child(2) .ex-photo{ background:var(--teal-soft); color:var(--teal); }
.expert .ex-name{ font-size:18px; font-weight:700; margin-bottom:3px; }
.expert .ex-role{ font-size:14px; font-weight:600; color:var(--blue); margin-bottom:12px; }
.expert:nth-child(2) .ex-role{ color:var(--teal-dk); }
.expert .ex-bio{ font-size:14px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.expert .ex-creds{ display:flex; flex-wrap:wrap; gap:7px; }
.doc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-size:13px; color:var(--ink-faint); }
.doc-meta .dm-item strong{ color:var(--ink-soft); font-weight:600; }
.doc-meta .dm-sep{ color:var(--panel-deep); }

/* ─── 20. FAQ (경계 명확) ───────────────────────────────────── */
.faq details{ background:var(--bg); border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--line), var(--sh-sm); overflow:hidden; }
.faq details + details{ margin-top:12px; }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:14px; padding:22px 26px; font-size:17px; font-weight:600; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q-text{ flex:1; line-height:1.5; padding-top:1px; }
.faq summary .q-toggle{ flex-shrink:0; position:relative; width:16px; height:16px; margin-top:5px; }
.faq summary .q-toggle::before,.faq summary .q-toggle::after{ content:''; position:absolute; background:var(--blue); transition:transform var(--ease); }
.faq summary .q-toggle::before{ top:7px; left:0; width:16px; height:2px; }
.faq summary .q-toggle::after{ top:0; left:7px; width:2px; height:16px; }
.faq details[open] summary .q-toggle::after{ transform:scaleY(0); }
.faq details[open]{ box-shadow:inset 0 0 0 1px var(--blue-soft), var(--sh); }
.faq .faq-answer{ padding:0 26px 24px; font-size:15px; color:var(--ink-soft); line-height:1.8; }

/* ─── 21. 탭 (콘텐츠 박스) ──────────────────────────────────── */
.tabs .tab-input{ display:none; }
.tab-bar{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.tab-bar::-webkit-scrollbar{ display:none; }
.tab-bar label{ flex:0 0 auto; padding:12px 24px; border-radius:var(--r) var(--r) 0 0; font-size:15px; font-weight:600; color:var(--ink-soft); white-space:nowrap; cursor:pointer; background:var(--surface); transition:color var(--ease),background var(--ease); }
.tab-bar label:hover{ color:var(--ink); }
.tab-panel{ display:none; background:var(--bg); border-radius:0 var(--r-lg) var(--r-lg) var(--r-lg); box-shadow:inset 0 0 0 1px var(--line); padding:30px 32px; }
.tab-panel p{ font-size:15px; color:var(--ink-soft); line-height:1.8; } .tab-panel h4{ margin-bottom:10px; }
#tab1:checked ~ .tab-bar label[for=tab1],#tab2:checked ~ .tab-bar label[for=tab2],#tab3:checked ~ .tab-bar label[for=tab3]{ color:#fff; background:var(--blue); }
#tab1:checked ~ .tab-panels .tab-panel:nth-child(1),#tab2:checked ~ .tab-panels .tab-panel:nth-child(2),#tab3:checked ~ .tab-panels .tab-panel:nth-child(3){ display:block; }

/* ─── 22. 폼 (포커스 시 보더 없이 배경만 변경) ───────────────── */
.field{ margin-bottom:22px; }
.field label,.form-label{ display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:9px; }
.input,.textarea,.select{ width:100%; background:var(--surface); border-radius:var(--r); padding:14px 16px; font-size:15px; color:var(--ink); transition:background var(--ease),box-shadow var(--ease); }
.textarea{ min-height:120px; resize:vertical; line-height:1.7; }
.select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23929bab' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:11px; padding-right:40px; cursor:pointer; }
.input::placeholder,.textarea::placeholder{ color:var(--ink-faint); }
.input:focus,.textarea:focus,.select:focus{ background:#fff; box-shadow:var(--sh-sm); }
.choice{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:15px; }
.choice input{ display:none; }
.choice .box{ width:20px; height:20px; flex-shrink:0; border-radius:5px; background:var(--panel-deep); position:relative; transition:background var(--ease); }
.choice .box.round{ border-radius:50%; }
.choice input:checked + .box{ background:var(--blue); }
.choice input:checked + .box::after{ content:''; position:absolute; }
.choice input:checked + .box:not(.round)::after{ left:6px; top:2px; width:6px; height:11px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); }
.choice input:checked + .box.round::after{ left:50%; top:50%; width:8px; height:8px; background:#fff; border-radius:50%; transform:translate(-50%,-50%); }
.switch{ display:inline-flex; align-items:center; gap:12px; cursor:pointer; }
.switch input{ display:none; }
.switch .track{ width:46px; height:26px; background:var(--panel-deep); border-radius:999px; position:relative; transition:background var(--ease); }
.switch .track::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform var(--ease); }
.switch input:checked + .track{ background:var(--blue); }
.switch input:checked + .track::after{ transform:translateX(20px); }
.switch .switch-label{ font-size:15px; }

/* ─── 23. 프로세스 (모던 스텝퍼) ────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.step{ position:relative; background:var(--bg); border-radius:var(--r-lg); padding:28px 24px; box-shadow:var(--sh-sm); }
.step .st-no{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; color:#fff; margin-bottom:18px; }
.step:nth-child(1) .st-no{ background:var(--blue); } .step:nth-child(2) .st-no{ background:var(--teal); } .step:nth-child(3) .st-no{ background:var(--violet); } .step:nth-child(4) .st-no{ background:var(--coral); }
.step h5{ font-size:17px; margin-bottom:9px; } .step p{ font-size:14px; color:var(--ink-soft); line-height:1.7; }
.step:not(:last-child)::after{ content:''; position:absolute; top:51px; right:-13px; width:26px; height:2px; background:var(--panel-deep); z-index:1; }

/* ─── 24. CTA (3종 + 박스형 스트립) ─────────────────────────── */
.cta-band{ position:relative; border-radius:var(--r-xl); overflow:hidden; color:#fff; }
.cta-band .cta-inner{ position:relative; z-index:1; padding:64px 56px; text-align:center; }
.cta-band.v-blue{ background:linear-gradient(120deg,var(--blue),var(--violet)); }
.cta-band.v-teal{ background:linear-gradient(120deg,var(--teal),var(--sky)); }
.cta-band.v-coral{ background:linear-gradient(120deg,var(--coral),var(--rose)); }
.cta-band h2{ margin-bottom:14px; }
.cta-band p{ font-size:18px; color:var(--on-dark-soft); margin-bottom:30px; }
.cta-band .cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-strip{ display:flex; align-items:center; justify-content:space-between; gap:28px; background:var(--bg); border-radius:var(--r-lg); padding:30px 36px; box-shadow:inset 0 0 0 1.5px var(--blue-soft), var(--sh-sm); }
.cta-strip .cta-text h4{ margin-bottom:5px; } .cta-strip .cta-text p{ font-size:14px; color:var(--ink-soft); }

/* ─── 25. 배지 / 태그 / 알림 ────────────────────────────────── */
.badge{ display:inline-block; font-size:13px; font-weight:700; padding:5px 12px; border-radius:var(--r-sm); letter-spacing:.01em; }
.badge.blue{ background:var(--blue-soft); color:var(--blue-dk); }
.badge.teal{ background:var(--teal-soft); color:var(--teal-dk); }
.badge.violet{ background:var(--violet-soft); color:var(--violet-dk); }
.badge.rose{ background:var(--rose-soft); color:var(--rose-dk); }
.badge.coral{ background:var(--coral-soft); color:var(--coral-dk); }
.badge.sky{ background:var(--sky-soft); color:var(--sky-dk); }
.badge.solid{ background:var(--blue); color:#fff; }
.tag{ display:inline-block; font-size:14px; font-weight:600; padding:5px 13px; border-radius:var(--r-sm); background:var(--panel); color:var(--ink-soft); }
.notice-box{ display:flex; gap:16px; background:var(--blue-soft); border-radius:var(--r-lg); padding:22px 24px; }
.notice-box.teal{ background:var(--teal-soft); } .notice-box.rose{ background:var(--rose-soft); } .notice-box.coral{ background:var(--coral-soft); }
.notice-box .nb-ico{ width:40px; height:40px; flex-shrink:0; border-radius:var(--r); background:#fff; display:flex; align-items:center; justify-content:center; }
.notice-box .nb-ico svg{ width:21px; height:21px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.notice-box.teal .nb-ico svg{ stroke:var(--teal); } .notice-box.rose .nb-ico svg{ stroke:var(--rose); } .notice-box.coral .nb-ico svg{ stroke:var(--coral); }
.notice-box h4{ font-size:16px; margin-bottom:4px; } .notice-box p{ font-size:14px; color:var(--ink-soft); line-height:1.65; }

/* ─── 26. 퀵메뉴 (투명도 ↑↑) ───────────────────────────────── */
.quick-menu{ position:fixed; right:24px; bottom:28px; z-index:900; display:flex; flex-direction:column; gap:10px; }
.qm-btn{ width:54px; height:54px; border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:rgba(255,255,255,.55); color:var(--blue-dk); box-shadow:var(--sh), inset 0 0 0 1px rgba(255,255,255,.6); -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px); transition:background var(--ease),transform var(--ease); }
.qm-btn:hover{ background:rgba(255,255,255,.85); transform:translateY(-2px); }
.qm-btn .qm-ico{ width:20px; height:20px; } .qm-btn .qm-ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.qm-btn .qm-text{ font-size:13px; font-weight:700; }

/* ─── 27. FOOTER (라이트) ───────────────────────────────────── */
.site-footer{ background:var(--surface); color:var(--ink-soft); box-shadow:inset 0 1px 0 var(--line); }
.footer-top{ padding:68px 0 48px; }
.footer-inner{ display:grid; grid-template-columns:1.6fr 5fr; gap:40px; align-items:start; }
.footer-nav-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:32px 24px; }

.footer-brand .logo{ font-size:22px; margin-bottom:16px; }
.footer-brand p{ font-size:14px; color:var(--ink-soft); line-height:1.75; max-width:280px; margin-bottom:20px; }
.footer-socials{ display:flex; gap:8px; }
.footer-socials a{ width:40px; height:40px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; background:#fff; color:var(--ink-soft); box-shadow:var(--sh-sm); transition:background var(--ease),color var(--ease); }
.footer-socials a:hover{ background:var(--blue); color:#fff; }
.footer-socials a svg{ width:18px; height:18px; fill:currentColor; }
.footer-col p{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:16px; }
.footer-col ul li{ margin-bottom:2px; }
.footer-col ul li a{ font-size:15px; color:var(--ink-soft); line-height:1.15; transition:color var(--ease); }
.footer-col ul li a:hover{ color:var(--blue); }
.footer-bottom{ padding:22px 0; box-shadow:inset 0 1px 0 var(--line); }
.footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.footer-legal{ display:flex; align-items:center; flex-wrap:wrap; }
.footer-legal a{ font-size:13px; color:var(--ink-soft); transition:color var(--ease); }
.footer-legal a:hover{ color:var(--blue); }
.footer-legal .pipe{ color:var(--panel-deep); margin:0 13px; }
.footer-copy{ font-size:13px; color:var(--ink-faint); line-height:1.6; }

/* ─── 28. ELEMENTS 헬퍼 ─────────────────────────────────────── */
.demo{ margin-bottom:48px; } .demo:last-child{ margin-bottom:0; }
.demo-label{ display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:16px; }
.demo-label .sub{ font-weight:400; color:var(--ink-faint); margin-left:8px; }
.demo-split{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.spec-note{ font-size:14px; color:var(--ink-soft); margin-top:14px; line-height:1.7; }
.palette{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.swatch{ aspect-ratio:3/2; border-radius:var(--r); display:flex; flex-direction:column; justify-content:flex-end; padding:16px; box-shadow:var(--sh-sm); }
.swatch b{ font-size:14px; font-weight:700; } .swatch span{ font-size:13px; font-family:monospace; opacity:.9; }
.swatch.s-blue{ background:#4571d4; color:#fff; } .swatch.s-teal{ background:#1fa392; color:#fff; } .swatch.s-violet{ background:#7b6bd6; color:#fff; } .swatch.s-coral{ background:#ef8059; color:#fff; }
.swatch.s-rose{ background:#df6391; color:#fff; } .swatch.s-sky{ background:#3aa5dd; color:#fff; } .swatch.s-mint{ background:#3fae77; color:#fff; } .swatch.s-surface{ background:#f4f7fb; color:#2b3242; }
.type-row{ display:flex; align-items:baseline; gap:24px; padding:16px 0; box-shadow:inset 0 -1px 0 var(--line); }
.type-row .t-meta{ font-size:13px; color:var(--ink-faint); font-weight:600; min-width:130px; flex-shrink:0; }
.t-h1{ font-size:50px; font-weight:800; letter-spacing:-.028em; } .t-h2{ font-size:34px; font-weight:700; } .t-h3{ font-size:23px; font-weight:700; } .t-h4{ font-size:19px; font-weight:700; } .t-h5{ font-size:16px; font-weight:700; } .t-body{ font-size:16px; }
.list-ul li{ display:flex; gap:13px; padding:9px 0; font-size:15px; color:var(--ink-soft); line-height:1.7; }
.list-ul li::before{ content:''; flex-shrink:0; margin-top:9px; width:7px; height:7px; border-radius:50%; background:var(--blue); }
.list-ol{ counter-reset:item; }
.list-ol li{ display:flex; gap:15px; padding:9px 0; font-size:15px; color:var(--ink-soft); line-height:1.7; }
.list-ol li::before{ counter-increment:item; content:counter(item); flex-shrink:0; width:26px; height:26px; border-radius:var(--r-sm); background:var(--blue-soft); color:var(--blue-dk); font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.list-alt li{ display:flex; align-items:center; gap:16px; padding:15px 20px; font-size:15px; color:var(--ink); border-radius:var(--r); }
.list-alt li:nth-child(odd){ background:var(--surface); }
.list-alt .alt-no{ font-size:15px; font-weight:800; color:var(--blue); min-width:26px; }
.img-grid{ display:grid; gap:16px; }
.img-grid.col-2{ grid-template-columns:repeat(2,1fr); } .img-grid.col-3{ grid-template-columns:repeat(3,1fr); } .img-grid.col-4{ grid-template-columns:repeat(4,1fr); }
.img-ph{ aspect-ratio:1/1; background:var(--panel); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ink-faint); overflow:hidden; }
.img-ph img{ width:100%; height:100%; object-fit:cover; } .img-ph.wide{ aspect-ratio:16/7; }
.img-text{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.img-text .it-img{ aspect-ratio:4/3; background:var(--panel); border-radius:var(--r-lg); overflow:hidden; }
.img-text .it-img img{ width:100%; height:100%; object-fit:cover; } .img-text.flip .it-img{ order:2; }
.blockquote{ position:relative; padding:8px 0 8px 28px; box-shadow:inset 3px 0 0 var(--violet); }
.blockquote p{ font-size:21px; line-height:1.6; color:var(--ink); font-weight:500; margin-bottom:14px; letter-spacing:-.01em; }
.blockquote cite{ font-style:normal; font-size:14px; color:var(--violet-dk); font-weight:600; }
.code-box{ background:var(--deep); border-radius:var(--r); overflow:hidden; color:#dfe6f2; }
.code-box .cb-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; box-shadow:inset 0 -1px 0 rgba(255,255,255,.1); }
.code-box .cb-lang{ font-size:13px; font-weight:700; color:#9ec3ff; } .code-box .cb-copy{ font-size:13px; color:var(--on-dark-soft); }
.code-box pre,.code-box code{ font-family:var(--font); }
.code-box pre{ padding:20px 18px; overflow-x:auto; font-size:14px; line-height:1.75; }
.code-box pre .ln{ color:rgba(255,255,255,.35); margin-right:16px; }
.icon-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.icon-cell{ background:var(--bg); border-radius:var(--r-lg); aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; box-shadow:var(--sh-sm); }
.icon-cell .ico{ width:26px; height:26px; color:var(--blue); } .icon-cell .ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-cell .ico-name{ font-size:13px; color:var(--ink-soft); }
.nav-demo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

/* 인덱스 문서메타 — 푸터와 간격 */
.meta-wrap{ padding:8px 0 64px; justify-content:flex-end; }

/* ─── 30. CHARTS (막대·그룹·가로·원·도넛·라인 — 값은 JS 주입) ── */
.chart-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.chart-card{ background:var(--bg); border-radius:var(--r-lg); padding:28px 30px 26px; box-shadow:var(--sh-sm); }
.chart-card .ch-title{ font-size:17px; font-weight:700; margin-bottom:5px; }
.chart-card .ch-sub{ font-size:13px; color:var(--ink-faint); margin-bottom:24px; }
.chart-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:20px; }
.chart-legend span{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); }
.chart-legend .lg-dot{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }

/* 세로 막대 / 그룹 막대 */
.bar-chart{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; height:220px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:10px; }
.bar-col .bar-stack{ display:flex; align-items:flex-end; justify-content:center; gap:6px; width:100%; height:100%; }
.bar{ width:30%; max-width:30px; min-height:3px; border-radius:5px 5px 0 0; background:var(--blue); transition:height .7s var(--ease); position:relative; }
.bar.c1{ background:var(--blue); } .bar.c2{ background:var(--violet); }
.bar .bar-cap{ position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-size:13px; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.bar-col .bar-label{ font-size:14px; color:var(--ink-soft); }

/* 가로 막대 */
.hbar-chart{ display:flex; flex-direction:column; gap:20px; }
.hbar-row .hb-top{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:8px; }
.hbar-row .hb-name{ color:var(--ink); font-weight:600; }
.hbar-group{ display:flex; flex-direction:column; gap:7px; }
.hbar-track{ height:14px; background:var(--surface); border-radius:7px; overflow:hidden; }
.hbar-fill{ height:100%; border-radius:7px; width:0; background:var(--blue); transition:width .8s var(--ease); display:flex; align-items:center; justify-content:flex-end; padding-right:8px; }
.hbar-fill.c2{ background:var(--mint); }
.hbar-fill .hb-val{ font-size:13px; font-weight:700; color:#fff; }

/* 원 / 도넛 */
.pie-wrap{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.pie{ width:170px; height:170px; border-radius:50%; flex-shrink:0; background:conic-gradient(var(--panel) 0 100%); }
.donut{ position:relative; }
.donut::after{ content:''; position:absolute; inset:26%; background:var(--bg); border-radius:50%; }
.donut .donut-center{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut .donut-center .dc-num{ font-size:26px; font-weight:800; color:var(--ink); line-height:1; }
.donut .donut-center .dc-label{ font-size:13px; color:var(--ink-faint); margin-top:3px; }

/* 라인 / 추이 */
.line-chart{ width:100%; }
.line-chart svg{ width:100%; height:auto; overflow:visible; display:block; }
.line-chart .lc-area{ fill:var(--blue-soft); opacity:.6; }
.line-chart .lc-line{ fill:none; stroke:var(--blue); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.line-chart .lc-dot{ fill:#fff; stroke:var(--blue); stroke-width:2.5; }
.line-chart .lc-grid{ stroke:var(--line); stroke-width:1; }
.line-chart .lc-label{ fill:var(--ink-faint); font-size:13px; font-family:var(--font); }
.line-chart .lc-cap{ fill:var(--ink); font-size:13px; font-weight:700; font-family:var(--font); }

/* 급식 한줄평 안내 */
.review-guide{ display:flex; gap:12px; align-items:flex-start; background:var(--blue-soft); border-radius:var(--r); padding:15px 18px; margin-top:16px; }
.review-guide .rg-ico{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.review-guide .rg-ico svg{ width:100%; height:100%; fill:none; stroke:var(--blue-dk); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.review-guide p{ font-size:13px; color:var(--blue-dk); line-height:1.6; }

/* ═══ 추가 컴포넌트 (26–29) ═══════════════════════════════════ */

/* 진행 폭 유틸 (인라인 style 미사용) */
.pw25{ width:25%; } .pw53{ width:53%; } .pw58{ width:58%; } .pw64{ width:64%; } .pw71{ width:71%; }

/* 26A. 검사 진행 카드 */
.quiz-card{ background:var(--bg); border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-sm); }
.quiz-progress{ margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.quiz-progress .qp-meta{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.quiz-progress .qp-step{ font-size:14px; font-weight:700; color:var(--violet-dk); }
.quiz-progress .qp-pct{ font-size:13px; font-weight:700; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.quiz-progress .qp-bar{ display:block; height:8px; background:var(--panel); border-radius:5px; overflow:hidden; }
.quiz-progress .qp-fill{ display:block; height:100%; background:var(--violet); border-radius:5px; }
.quiz-q{ font-size:20px; font-weight:700; line-height:1.5; color:var(--ink); margin-bottom:22px; }
.quiz-opts{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.quiz-opt{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--r); background:var(--surface); cursor:pointer; transition:background var(--ease); }
.quiz-opt:hover{ background:var(--panel); }
.quiz-opt input{ display:none; }
.quiz-opt .qo-dot{ width:20px; height:20px; border-radius:50%; flex-shrink:0; background:#fff; box-shadow:inset 0 0 0 2px var(--panel-deep); transition:box-shadow var(--ease); }
.quiz-opt .qo-text{ font-size:15px; font-weight:500; color:var(--ink-soft); transition:color var(--ease); }
.quiz-opt input:checked + .qo-dot{ box-shadow:inset 0 0 0 6px var(--violet); }
.quiz-opt input:checked + .qo-dot + .qo-text{ color:var(--ink); font-weight:600; }
.quiz-opt:has(input:checked){ background:var(--violet-soft); }
.quiz-nav{ display:flex; justify-content:space-between; gap:12px; }

/* 버튼 — 바이올렛 */
.btn-violet{ background:var(--violet); color:#fff; } .btn-violet:hover{ background:var(--violet-dk); }

/* 26B. 결과 카드 */
.result-card{ background:var(--bg); border-radius:var(--r-lg); padding:34px; box-shadow:var(--sh-sm); }
.result-card .rc-head{ display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.result-card .rc-type{ flex-shrink:0; width:84px; height:84px; border-radius:var(--r-lg); background:linear-gradient(135deg,var(--violet),var(--blue)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; letter-spacing:.02em; }
.result-card .rc-kicker{ font-size:14px; font-weight:700; color:var(--violet-dk); margin-bottom:4px; }
.result-card .rc-name{ font-size:24px; }
.result-card .rc-desc{ font-size:16px; color:var(--ink-soft); line-height:1.75; margin-bottom:26px; }
.trait-list{ display:flex; flex-direction:column; gap:18px; margin-bottom:26px; }
.trait .trait-head{ display:flex; align-items:center; justify-content:space-between; font-size:14px; margin-bottom:8px; }
.trait .tr-pole{ color:var(--ink-faint); font-weight:600; }
.trait .tr-pole.on{ color:var(--ink); font-weight:700; }
.trait .tr-pct{ font-size:13px; font-weight:800; color:var(--violet-dk); font-variant-numeric:tabular-nums; }
.trait-bar{ display:block; height:10px; background:var(--panel); border-radius:6px; overflow:hidden; }
.trait-fill{ display:block; height:100%; border-radius:6px; background:var(--blue); }
.trait-fill.v{ background:var(--violet); } .trait-fill.r{ background:var(--rose); } .trait-fill.t{ background:var(--teal); }
.rc-tips{ padding-top:22px; border-top:1px solid var(--line); margin-bottom:24px; }
.rc-tips .rc-tips-label{ font-size:14px; font-weight:700; margin-bottom:12px; }
.rc-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* 27. 후기 검색 리스트 */
.list-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.list-toolbar .lt-count{ font-size:14px; color:var(--ink-soft); }
.list-toolbar .lt-count strong{ color:var(--ink); font-weight:700; }
.review-item .ri-ctx{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.review-item .ri-ctx .ri-ctx-meta{ font-size:13px; color:var(--ink-faint); font-weight:500; }
.review-item .ri-ctx ~ .stars{ margin-bottom:9px; }
.review-item .ri-foot{ display:flex; gap:18px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.review-item .ri-act{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-faint); }
.review-item .ri-act svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* 28·29. 순위 리스트 (인기 급식 / 평점 베스트) */
.top-list{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.top-item{ display:flex; align-items:center; gap:16px; background:var(--bg); border-radius:var(--r); padding:16px 20px; box-shadow:var(--sh-sm); transition:transform var(--ease),box-shadow var(--ease); }
.top-item:hover{ transform:translateY(-2px); box-shadow:var(--sh); }
.top-rank{ flex-shrink:0; width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; background:var(--surface); color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.top-item:nth-child(1) .top-rank{ background:var(--coral); color:#fff; }
.top-item:nth-child(2) .top-rank{ background:var(--blue); color:#fff; }
.top-item:nth-child(3) .top-rank{ background:var(--teal); color:#fff; }
.top-info{ flex:1; min-width:0; }
.top-name{ font-size:16px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.top-meta{ font-size:13px; color:var(--ink-faint); margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.top-stats{ flex-shrink:0; display:flex; align-items:center; gap:16px; }
.top-like{ display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:700; color:var(--rose); font-variant-numeric:tabular-nums; }
.top-like svg{ width:15px; height:15px; fill:currentColor; stroke:none; }
.top-score{ display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:800; color:var(--coral-dk); font-variant-numeric:tabular-nums; }
.top-score.big{ font-size:16px; }
.stars.sm i{ width:14px; height:14px; }
.pagination .pg-gap{ min-width:24px; height:42px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); }

/* 모바일 — 순위/후기 가독성 */
@media (max-width:560px){
  .top-item{ flex-wrap:wrap; gap:12px; }
  .top-stats{ width:100%; justify-content:space-between; padding-left:48px; }
  .result-card .rc-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .quiz-card,.result-card{ padding:24px; }
  .list-toolbar{ align-items:flex-start; }
}

/* ═══ board.html 전용 컴포넌트 ════════════════════════════════ */

/* 공통 보조 */
.badge.coral-b{ background:var(--coral-soft); color:var(--coral-dk); }
.c-new{ display:inline-block; min-width:16px; height:16px; padding:0 4px; border-radius:4px; background:var(--coral); color:#fff; font-size:11px; font-weight:800; line-height:16px; text-align:center; vertical-align:middle; }

/* 01. 게시판 리스트 */
.board-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.board-toolbar .bt-cat{ width:auto; min-width:140px; }
.board-toolbar .bt-right{ display:flex; align-items:center; gap:10px; }
.board-toolbar .bt-search{ display:flex; align-items:center; background:var(--surface); border-radius:var(--r); overflow:hidden; }
.board-toolbar .bt-search input{ padding:12px 16px; font-size:15px; width:220px; max-width:46vw; }
.board-toolbar .bt-search input::placeholder{ color:var(--ink-faint); }
.board-toolbar .bt-search-btn{ flex-shrink:0; padding:0 14px; align-self:stretch; background:var(--panel); color:var(--ink-soft); transition:background var(--ease),color var(--ease); cursor:pointer; }
.board-toolbar .bt-search-btn:hover{ background:var(--blue); color:#fff; }
.board-toolbar .bt-search-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.board-table-wrap{ overflow-x:auto; }
.board-table{ width:100%; min-width:680px; border-top:2px solid var(--ink); }
.board-table th,.board-table td{ padding:15px 12px; font-size:15px; }
.board-table thead th{ font-size:14px; font-weight:700; color:var(--ink-soft); background:var(--surface); box-shadow:inset 0 -1px 0 var(--line); }
.board-table tbody td{ box-shadow:inset 0 -1px 0 var(--line); color:var(--ink-soft); }
.board-table .c-no,.board-table .c-cat,.board-table .c-by,.board-table .c-dt,.board-table .c-vw{ text-align:center; white-space:nowrap; }
.board-table .c-no{ width:64px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.board-table .c-cat{ width:82px; }
.board-table .c-by{ width:92px; }
.board-table .c-dt{ width:72px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.board-table .c-vw{ width:72px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.board-table .c-tit{ text-align:left; }
.board-table .c-tit a{ font-weight:500; color:var(--ink); transition:color var(--ease); }
.board-table .c-tit a:hover{ color:var(--blue); }
.board-table tbody tr:hover td{ background:var(--surface); }
.board-table tr.is-notice td{ background:var(--blue-soft); box-shadow:inset 0 -1px 0 var(--line); }
.board-table tr.is-notice:hover td{ background:#e1eafb; }
.board-table tr.is-notice .c-tit a{ font-weight:700; }
.board-table .pin{ display:inline-flex; }
.board-table .pin svg{ width:16px; height:16px; fill:none; stroke:var(--blue); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.board-table .c-att{ display:inline-flex; vertical-align:middle; margin-left:2px; }
.board-table .c-att svg{ width:14px; height:14px; fill:none; stroke:var(--ink-faint); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.board-table .c-cmt{ display:inline-block; margin-left:6px; font-size:13px; font-weight:700; color:var(--coral-dk); vertical-align:middle; }

/* 02. 게시판 읽기 */
.board-view{ background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:34px; }
.board-view .bv-head{ padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.board-view .bv-title{ font-size:25px; line-height:1.4; margin:14px 0 14px; }
.board-view .bv-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:14px; color:var(--ink-faint); }
.board-view .bv-by{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ink-soft); }
.board-view .bv-av{ width:28px; height:28px; border-radius:50%; background:var(--blue-soft); color:var(--blue-dk); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.board-view .bv-dot{ color:var(--panel-deep); }
.board-view .bv-body{ font-size:16px; color:var(--ink-soft); line-height:1.85; }
.board-view .bv-body p{ margin-bottom:16px; } .board-view .bv-body p:last-child{ margin-bottom:0; }
.board-view .bv-files{ margin-top:28px; padding:20px 22px; background:var(--surface); border-radius:var(--r); }
.board-view .bv-files-label{ font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:12px; }
.board-view .bv-file{ display:flex; align-items:center; gap:12px; padding:11px 0; box-shadow:inset 0 -1px 0 var(--line); }
.board-view .bv-file:last-child{ box-shadow:none; }
.board-view .bf-ico svg{ width:20px; height:20px; fill:none; stroke:var(--teal-dk); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.board-view .bf-name{ flex:1; min-width:0; font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-view .bf-size{ font-size:13px; color:var(--ink-faint); flex-shrink:0; }
.board-view .bf-dl{ flex-shrink:0; }
.board-view .bf-dl svg{ width:18px; height:18px; fill:none; stroke:var(--ink-faint); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--ease); }
.board-view .bv-file:hover .bf-dl svg{ stroke:var(--blue); }
.board-view .bv-pager{ margin-top:24px; border-top:1px solid var(--line); }
.board-view .bv-pg{ display:flex; align-items:center; gap:16px; padding:15px 4px; box-shadow:inset 0 -1px 0 var(--line); }
.board-view .bv-pg-dir{ flex-shrink:0; width:60px; font-size:13px; font-weight:700; color:var(--ink-faint); }
.board-view .bv-pg-tit{ font-size:14px; color:var(--ink-soft); transition:color var(--ease); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-view .bv-pg:hover .bv-pg-tit{ color:var(--blue); }
.board-view .bv-actions{ margin-top:24px; display:flex; justify-content:center; }
.board-view .bv-comments{ margin-top:34px; padding-top:28px; border-top:1px solid var(--line); }
.board-view .bvc-head{ font-size:17px; margin-bottom:18px; } .board-view .bvc-head span{ color:var(--coral-dk); }
.board-view .bvc-list{ display:flex; flex-direction:column; gap:18px; margin-bottom:20px; }
.board-view .bvc-item{ display:flex; gap:12px; }
.board-view .bvc-item .ri-av{ width:36px; height:36px; border-radius:50%; background:var(--blue-soft); color:var(--blue-dk); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
.board-view .bvc-body{ flex:1; }
.board-view .bvc-top{ display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.board-view .bvc-name{ font-size:14px; font-weight:600; } .board-view .bvc-date{ font-size:13px; color:var(--ink-faint); }
.board-view .bvc-text{ font-size:15px; color:var(--ink-soft); line-height:1.7; }
.board-view .bvc-form{ display:flex; gap:10px; }
.board-view .bvc-form .input{ flex:1; }

/* 03. 게시판 쓰기 */
.board-write{ background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:34px; }
.board-write .bw-row{ display:flex; gap:16px; }
.board-write .bw-f-cat{ width:160px; flex-shrink:0; } .board-write .bw-f-tit{ flex:1; }
.board-write .bw-body{ min-height:200px; }
.board-write .bw-opt{ display:flex; gap:22px; margin-bottom:24px; }
.board-write .bw-actions{ display:flex; justify-content:flex-end; gap:12px; }
.file-attach{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:30px; border:2px dashed var(--panel-deep); border-radius:var(--r); background:var(--surface); cursor:pointer; text-align:center; transition:border-color var(--ease),background var(--ease); }
.file-attach:hover{ border-color:var(--blue); background:var(--blue-soft); }
.file-attach .fa-input{ display:none; }
.file-attach .fa-ico svg{ width:26px; height:26px; fill:none; stroke:var(--blue); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.file-attach .fa-text{ font-size:15px; color:var(--ink-soft); } .file-attach .fa-text b{ color:var(--blue-dk); font-weight:700; }
.file-attach .fa-hint{ font-size:13px; color:var(--ink-faint); }
.fa-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.fa-item{ display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--surface); border-radius:var(--r); }
.fa-item .fai-ico svg{ width:18px; height:18px; fill:none; stroke:var(--teal-dk); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fa-item .fai-name{ flex:1; min-width:0; font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fa-item .fai-size{ font-size:13px; color:var(--ink-faint); flex-shrink:0; }
.fa-item .fai-x{ flex-shrink:0; cursor:pointer; }
.fa-item .fai-x svg{ width:15px; height:15px; fill:none; stroke:var(--ink-faint); stroke-width:2; stroke-linecap:round; transition:stroke var(--ease); }
.fa-item .fai-x:hover svg{ stroke:var(--coral-dk); }

/* 04. 연관 콘텐츠 게시판 위젯 */
.board-widgets{ display:grid; gap:20px; }
.board-widgets.cols-1{ grid-template-columns:1fr; }
.board-widgets.cols-2{ grid-template-columns:repeat(2,1fr); }
.board-widgets.cols-3{ grid-template-columns:repeat(3,1fr); }
.board-widget{ background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:24px 26px; min-width:0; overflow:hidden; }
.board-widget .bw-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.board-widget .bw-title{ font-size:17px; display:flex; align-items:center; gap:9px; }
.board-widget .bwt-dot{ width:9px; height:9px; border-radius:3px; background:var(--blue); }
.board-widget .bwt-dot.coral{ background:var(--coral); } .board-widget .bwt-dot.violet{ background:var(--violet); } .board-widget .bwt-dot.teal{ background:var(--teal); }
.board-widget .bw-more{ font-size:13px; font-weight:600; color:var(--ink-faint); transition:color var(--ease); }
.board-widget .bw-more:hover{ color:var(--blue); }
.board-widget .bw-list{ display:flex; flex-direction:column; }
.board-widget .bw-item{ display:flex; align-items:center; gap:12px; padding:11px 0; box-shadow:inset 0 -1px 0 var(--line); }
.board-widget .bw-item:last-child{ box-shadow:none; }
.board-widget .bw-tit{ flex:1; min-width:0; font-size:14.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color var(--ease); }
.board-widget .bw-item:hover .bw-tit{ color:var(--blue); }
.board-widget .bw-date{ flex-shrink:0; font-size:13px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

/* 04b. 최근 게시물 갤러리 */
.post-gallery{ display:flex; background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.post-gallery .pg-thumb{ flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,var(--blue-soft),var(--violet-soft)); }
.post-gallery .pg-thumb svg{ width:40px; height:40px; fill:none; stroke:rgba(69,113,212,.45); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.post-gallery .pg-thumb-cat{ position:absolute; top:12px; left:12px; }
.post-gallery.solo .pg-thumb{ width:280px; align-self:stretch; }
.post-gallery.solo .pg-body{ flex:1; min-width:0; padding:26px 30px; display:flex; flex-direction:column; justify-content:center; }
.post-gallery .pg-title{ font-size:20px; line-height:1.45; margin-bottom:10px; }
.post-gallery .pg-title a{ color:var(--ink); transition:color var(--ease); }
.post-gallery .pg-title a:hover{ color:var(--blue); }
.post-gallery .pg-excerpt{ font-size:15px; color:var(--ink-soft); line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-gallery .pg-meta{ margin-top:16px; font-size:13px; color:var(--ink-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.post-gallery .pg-meta .dot{ color:var(--panel-deep); }
.post-gallery.list .pg-thumb{ width:240px; align-self:stretch; }
.post-gallery.list .pg-side{ flex:1; min-width:0; padding:22px 26px; }
.post-gallery.list .pg-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.post-gallery.list .pg-head h4{ font-size:16px; display:flex; align-items:center; gap:9px; }
.post-gallery.list .pg-head .pg-dot{ width:9px; height:9px; border-radius:3px; background:var(--teal); }
.post-gallery.list .pg-head .pg-more{ font-size:13px; font-weight:600; color:var(--ink-faint); transition:color var(--ease); }
.post-gallery.list .pg-head .pg-more:hover{ color:var(--blue); }
.post-gallery.list .pg-list{ display:flex; flex-direction:column; }
.post-gallery.list .pg-list li{ display:flex; align-items:center; gap:12px; padding:11px 0; box-shadow:inset 0 -1px 0 var(--line); }
.post-gallery.list .pg-list li:last-child{ box-shadow:none; }
.post-gallery.list .pg-list li a{ flex:1; min-width:0; font-size:14.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color var(--ease); }
.post-gallery.list .pg-list li a:hover{ color:var(--blue); }
.post-gallery.list .pg-list li .pg-date{ flex-shrink:0; font-size:13px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
@media (max-width:680px){
  .post-gallery{ flex-direction:column; }
  .post-gallery.solo .pg-thumb,.post-gallery.list .pg-thumb{ width:100%; aspect-ratio:16 / 9; }
}

/* 05. 초등 시간표 배경 테마 슬라이드 */
.tt-themes{ margin-top:4px; }
.tt-themes-track{ display:flex; gap:14px; overflow-x:auto; padding:4px 2px 14px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.tt-theme{ flex-shrink:0; width:220px; scroll-snap-align:start; cursor:pointer; display:block; }
.tt-theme .tt-theme-radio{ display:none; }
.tt-theme-thumb{ position:relative; display:flex; width:100%; aspect-ratio:297 / 210; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); align-items:center; justify-content:center; transition:transform var(--ease); }
.tt-theme:hover .tt-theme-thumb{ transform:translateY(-3px); }
.tt-theme .ttt-ico{ font-size:40px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.12)); z-index:1; }
.tt-theme .ttt-grid{ position:absolute; inset:14px 16px; border-radius:6px; background:
  repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0 1px, transparent 1px 18px),
  repeating-linear-gradient(to right, rgba(255,255,255,.5) 0 1px, transparent 1px 30px);
  opacity:.55; }
.tt-theme-name{ display:block; margin-top:10px; text-align:center; font-size:14px; font-weight:600; color:var(--ink-soft); }
.tt-theme-check{ display:none; position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:var(--blue); align-items:center; justify-content:center; z-index:2; }
.tt-theme-check svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.tt-theme-thumb{ outline:3px solid transparent; outline-offset:-3px; transition:outline-color var(--ease),transform var(--ease); }
.tt-theme:has(.tt-theme-radio:checked) .tt-theme-thumb{ outline-color:var(--blue); }
.tt-theme:has(.tt-theme-radio:checked) .tt-theme-check{ display:flex; }
.tt-theme:has(.tt-theme-radio:checked) .tt-theme-name{ color:var(--blue-dk); font-weight:700; }
/* 테마별 배경 */
.tt-theme.t1 .tt-theme-thumb{ background:linear-gradient(160deg,#ffd0e1,#fff0f5); }
.tt-theme.t2 .tt-theme-thumb{ background:linear-gradient(160deg,#3c4180,#7b76dd); }
.tt-theme.t3 .tt-theme-thumb{ background:linear-gradient(160deg,#bfe8c8,#eaf7ee); }
.tt-theme.t4 .tt-theme-thumb{ background:linear-gradient(160deg,#bfe6ea,#e4f4f1); }
.tt-theme.t5 .tt-theme-thumb{ background:linear-gradient(160deg,#cfe9cf,#f0f8ee); }
.tt-theme.t6 .tt-theme-thumb{ background:linear-gradient(160deg,#ffe1c4,#ffd6e6 55%,#ddd6ff); }
.tt-theme.t2 .ttt-grid{ opacity:.4; }
.tt-make{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:6px; }
.tt-make .tt-make-tip{ font-size:14px; color:var(--ink-faint); }

@media (max-width:680px){
  .board-widgets.cols-2,.board-widgets.cols-3{ grid-template-columns:1fr; }
  .board-view,.board-write{ padding:24px; }
  .board-write .bw-row{ flex-direction:column; gap:0; } .board-write .bw-f-cat{ width:100%; }
  .board-toolbar{ align-items:stretch; } .board-toolbar .bt-right{ justify-content:space-between; }
}

/* ─── 29. RESPONSIVE (모바일 우선 시인성) ───────────────────── */
@media (max-width:1080px){
  :root{ --pad:30px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .home-aside-grid{ grid-template-columns:1fr; gap:36px; }
  .school-mini-grid{ grid-template-columns:1fr 1fr; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step:nth-child(2)::after,.step:not(:last-child)::after{ display:none; }
.footer-inner{ grid-template-columns:1fr; gap:34px; }
  .footer-brand{ grid-column:1/-1; }
}
@media (max-width:980px){
  .gnb-right{ display:none; }
  .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; } /* fixed 자식의 기준이 헤더로 잡히는 문제 방지 */

  /* 모바일: PC용 .gnb 를 전체화면 패널로 변환 (메뉴 원본은 하나) */
  .gnb{ display:none; position:fixed; inset:0; width:100%; height:100dvh; margin:0; background:var(--bg); z-index:1100; overflow-y:auto; overscroll-behavior:contain; padding:16px 0 64px; flex-direction:column; }
  .nav-toggle:checked ~ .site-header .gnb{ display:block; }
  .gnb-mhead{ display:flex; justify-content:flex-end; padding:0 24px 8px; }
  .gnb-list{ display:flex; flex-wrap:wrap; padding:8px 12px; }
  .gnb-item{ width:100%; position:static; }
  .gnb-item + .gnb-item{ box-shadow:inset 0 1px 0 var(--line); }
  .gnb-item > a,.gnb-item:hover > a{ height:auto; padding:14px 12px 4px; font-size:17px; font-weight:700; color:var(--ink); box-shadow:none; }
  .gnb-item > a .caret{ display:none; }
  .gnb-sub{ position:static; display:flex; flex-wrap:wrap; min-width:0; padding:0; background:none; box-shadow:none; opacity:1; visibility:visible; transform:none; }
  .gnb-sub li{ width:50%; }
  .gnb-sub a{ padding:11px 12px; font-size:16px; border-radius:0; }
  .gnb-item:not(:has(.gnb-sub)){ width:50%; box-shadow:none; }
  .gnb-item:not(:has(.gnb-sub)) > a{ padding:14px 12px; }
  .gnb-util{ display:flex; flex-wrap:wrap; gap:20px; padding:18px 12px 0; box-shadow:inset 0 1px 0 var(--line); margin:8px 12px 0; }
  .gnb-util a{ font-size:15px; color:var(--ink-soft); }
  .gnb-util .btn{ width:100%; color:#fff; margin-top:4px; }
  .hamburger{ display:flex; margin-left:auto; }
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .expert-grid,.nav-demo-grid{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .topbar,.site-header{ position:static; }
}
@media (max-width:768px){
  :root{ --pad:20px; }
  h1{ font-size:32px; } h2{ font-size:26px; } h3{ font-size:21px; }
  .section{ padding:64px 0; } .section.tight{ padding:44px 0; }
  .section-head{ margin-bottom:36px; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .chart-grid{ grid-template-columns:1fr; }
  .grid-2.split{ gap:32px; }
  .demo-split{ grid-template-columns:1fr; }
  .topbar .wrap{ padding:0; }
  .topbar-inner{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; gap:18px; padding:0 20px; scrollbar-width:none; -ms-overflow-style:none; }
  .topbar-inner::-webkit-scrollbar{ display:none; }
  .topbar-left,.topbar-right{ flex-wrap:nowrap; flex-shrink:0; gap:18px; }
  .topbar a,.topbar .tb-cta{ white-space:nowrap; }
  .hero-inner{ padding:60px 0 40px; } .hero .hero-desc{ font-size:17px; }
  .search-bar{ flex-direction:column; }
  .search-bar .s-cat select{ width:100%; padding:15px 24px; box-shadow:inset 0 -1px 0 var(--line); }
  .search-bar .s-cat::after{ top:26px; }
  .search-bar .s-field input{ padding:15px 0; }
  .search-bar .s-btn{ padding:15px; }
  .hero-stats{ grid-template-columns:1fr 1fr; padding-bottom:56px; }
  .cat-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .cat-card{ aspect-ratio:1/1; }
  .ad-slide .ad-body{ padding:30px 24px 50px; } .ad-slide h3{ font-size:21px; }
  .ad-dots{ left:24px; bottom:20px; }
  .rating-summary{ flex-direction:column; gap:22px; align-items:flex-start; }
  .school-mini-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; }
  .cta-band .cta-inner{ padding:44px 24px; }
  .cta-strip{ flex-direction:column; align-items:flex-start; gap:18px; }
  /* 학사일정 — 모바일 가로 스크롤 */
  .cal-grid{ min-width:640px; }
  .cal-wrap{ overflow-x:auto; }
  /* 급식 — 모바일: 본문 세로 스택, 요약은 5칸 유지 */
  .mw-body{ grid-template-columns:1fr; }
  .mw-cell{ box-shadow:inset 0 -1px 0 var(--line); }
  .mw-cell:last-child{ box-shadow:none; }
  .mc-label{ display:block; }
  .mw-day{ padding:12px 2px; font-size:13px; } .mw-day .dnum{ font-size:16px; }
  .footer-inner{ grid-template-columns:1fr; gap:30px 22px; }
  .footer-nav-cols{ grid-template-columns:1fr 1fr; }
  .footer-bottom-inner{ flex-direction:column; gap:12px; text-align:center; }
  .footer-legal{ justify-content:center; }
  .news-item .ni-cat{ display:none; }
  .review-form .rf-row{ flex-direction:column; }
  .quick-menu{ right:16px; bottom:16px; }
  .palette{ grid-template-columns:repeat(2,1fr); }
  .icon-grid{ grid-template-columns:repeat(3,1fr); }
  .type-row{ flex-direction:column; gap:6px; padding:14px 0; } .type-row .t-h1{ font-size:30px; } .type-row .t-h2{ font-size:25px; }
  .tt-hint,.cal-hint{ display:flex; }
}
@media (max-width:480px){
  h1{ font-size:28px; }
  .cat-grid,.hero-stats,.stat-grid{ grid-template-columns:1fr; }
}