/* 학원 홈페이지 틀 — 어두운 바탕 · 큰 글씨 · 강조색 하나.
   학원마다 바뀌는 색은 academy.json 의 theme 이 :root 에 덮어씁니다. */

:root {
  --bg: #0a0d1a;
  --surface: #131a2e;
  --surface-2: #1a2238;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f4f6fb;
  --text-2: #b7bfd1;
  --muted: #8790a6;
  --accent: #ff6a3d;
  --accent-2: #ffc857;
  --on-accent: #1a0d07;
  --radius: 20px;
  --wrap: 1120px;
  --gutter: 20px;
  --tabbar-h: 64px;
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
em { font-style: normal; color: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ── 미리보기 띠 ── */
.draft-bar {
  background: var(--accent-2);
  color: var(--on-accent-2, #2a1d00);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 8px var(--gutter);
}

/* ── 위 막대 ── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { text-decoration: none; margin-right: auto; display: flex; align-items: center; }
.logo-img { height: 32px; width: auto; }
.logo-text { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; }
.logo-text small { font-size: 13px; font-weight: 600; color: var(--text-2); }
.top-nav { display: none; gap: 4px; }
.top-nav a { text-decoration: none; color: var(--text-2); font-size: 15px; font-weight: 600; padding: 8px 12px; border-radius: 10px; }
.top-nav a:hover { color: var(--text); background: var(--surface); }

/* ── 단추 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: 16px;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(.98); }
.btn .ico { width: 18px; height: 18px; }
.btn-pill { min-height: 38px; padding: 0 16px; font-size: 14px; background: var(--accent); color: var(--on-accent); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover, .btn-pill:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.btn-ghost { border-color: var(--line); background: var(--surface); color: var(--text); }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }

/* ── 작은 표시 ── */
.chip {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
  vertical-align: middle;
}
.chip.warn { background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--accent-2); }
.hero .chip, .story-lines + * .chip, #story .chip { margin-top: 20px; }

/* 학원 자료를 받아 채울 칸 */
.todo {
  display: inline-block;
  border: 1.5px dashed color-mix(in srgb, var(--accent-2) 55%, transparent);
  color: color-mix(in srgb, var(--accent-2) 85%, var(--text));
  border-radius: 8px;
  padding: 1px 8px;
  font-size: .82em; font-weight: 600; line-height: 1.6;
}

/* ── 첫 화면 ── */
.hero { position: relative; overflow: hidden; padding: clamp(64px, 14vw, 150px) 0 clamp(64px, 12vw, 130px); }
.hero .wrap { position: relative; z-index: 1; }
.hero-glow {
  position: absolute; inset: auto -20% -40% -20%; height: 80%;
  background: radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%);
  pointer-events: none;
}
.eyebrow { color: var(--accent); font-weight: 700; font-size: 15px; letter-spacing: .02em; margin-bottom: 18px; }
.display { font-size: clamp(38px, 9vw, 84px); line-height: 1.18; font-weight: 800; letter-spacing: -0.035em; }
.lead { color: var(--text-2); font-size: clamp(17px, 2.2vw, 21px); margin-top: 24px; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ── 칸 공통 ── */
.sec { padding: clamp(72px, 11vw, 140px) 0; border-top: 1px solid var(--line); }
.sec-tight { padding: clamp(40px, 6vw, 72px) 0; }
.sec-alt { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--surface) 70%, var(--bg)) 40%, var(--bg)); }
.kicker { color: var(--accent); font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.h2 { font-size: clamp(30px, 6vw, 56px); line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
.h3 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.note { color: var(--muted); font-size: 14px; margin-top: 20px; }

/* ── 학원 이야기 ── */
.story-lines { margin-top: 40px; display: grid; gap: 18px; }
.story-lines p { font-size: clamp(20px, 3.4vw, 30px); font-weight: 700; color: var(--text-2); letter-spacing: -0.02em; line-height: 1.45; }
.story-lines p em { color: var(--text); box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.hl { margin-top: 40px; }
.hl span {
  display: inline; background: var(--accent); color: var(--on-accent);
  font-size: clamp(20px, 3.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.6;
  padding: 2px 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.director {
  margin-top: 64px; display: grid; gap: 24px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
}
.director-photo { width: 100%; max-width: 240px; aspect-ratio: 4 / 5; border-radius: 16px; object-fit: cover; }
.director-photo.ph { display: grid; place-items: center; background: var(--surface-2); }
.director-label { color: var(--accent); font-weight: 700; font-size: 14px; }
.director-msg { font-size: 18px; margin-top: 10px; color: var(--text); }
.director-name { margin-top: 16px; color: var(--text-2); font-weight: 600; }

/* ── 숫자 ── */
.stats { display: grid; grid-template-columns: 1fr; gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; text-align: center; }
.stat-num { font-size: clamp(40px, 7vw, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; min-height: 1.1em; }
.stat-num span { font-size: .45em; margin-left: 4px; color: var(--text-2); }
.stat-num .todo { font-size: 15px; vertical-align: middle; }
.stat-label { color: var(--text-2); margin-top: 8px; font-weight: 600; }

/* ── 카드 ── */
.grid3 { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 44px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.card-num { color: var(--accent); font-weight: 800; font-size: 14px; }
.card-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-meta { color: var(--text-2); font-size: 15px; font-weight: 600; }
.card-text { color: var(--text-2); }
.care-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.care-ico .ico { width: 26px; height: 26px; }

/* ── 후기 — 휴대폰에서는 옆으로 넘김 ── */
.reviews {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
  gap: 14px; margin-top: 44px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; scrollbar-width: thin;
}
.review { scroll-snap-align: start; min-height: 220px; }

/* ── 표 ── */
.table-wrap { margin-top: 28px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--text-2); font-weight: 700; background: var(--surface-2); }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 700; white-space: nowrap; }
.dash { color: var(--muted); }

/* ── 오시는 길 ── */
.info { margin: 32px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.info > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info dt { color: var(--muted); font-weight: 600; }
.info dd { margin: 0; font-weight: 600; }
.map-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ── 상담 ── */
.sec-cta { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--bg); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
.contact-btn {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 14px 22px; border-radius: 18px;
  background: var(--accent); color: var(--on-accent);
  font-size: 18px; font-weight: 800; text-decoration: none;
}
.contact-btn .ico { width: 24px; height: 24px; flex: none; }
.contact-btn small { margin-left: auto; font-size: 12px; font-weight: 600; }
.contact-btn.off { background: var(--surface); color: var(--text-2); border: 1.5px dashed color-mix(in srgb, var(--accent-2) 45%, transparent); cursor: default; }
.contact-btn.off small { color: var(--accent-2); }

/* ── 바닥 ── */
.foot { border-top: 1px solid var(--line); padding: 48px 0 32px; color: var(--muted); font-size: 14px; }
.foot-name { color: var(--text); font-weight: 800; font-size: 17px; }
.foot-info { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links { margin-top: 16px; }
.foot-links a { color: var(--text-2); }
.foot-copy { margin-top: 16px; }

/* ── 아래 메뉴 막대 (휴대폰 · 태블릿) ── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.tabbar .ico { width: 22px; height: 22px; }
.tabbar a.on { color: var(--accent); }

.ico { width: 20px; height: 20px; }

/* ═════ 칸 목록 판(수정2~)에서 쓰는 칸 ═════ */

/* 첫 화면 꼬리표 */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text); font-weight: 700; font-size: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.badge .ico { width: 16px; height: 16px; color: var(--accent); }

.lead + .lead { margin-top: 10px; }

/* 가장 강조하고 싶은 실적 */
.sec-hl { background: radial-gradient(70% 55% at 15% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), var(--bg); }
.hl-big { display: grid; gap: 12px; margin-top: 36px; }
.hl-big-item {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius); padding: 22px 22px;
  font-size: clamp(22px, 4.2vw, 36px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.35;
}
.hl-basis { margin-top: 36px; color: var(--accent-2); font-weight: 700; font-size: 15px; }
.hl-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.hl-list li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  font-size: 17px; font-weight: 600; line-height: 1.5;
}
.hl-list .ico { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--accent-2); }

/* 글 칸 */
.prose { margin-top: 32px; display: grid; gap: 18px; max-width: 46em; }
.prose p { font-size: clamp(17px, 2.2vw, 20px); color: var(--text-2); line-height: 1.75; }

/* 이어지는 칸(위 칸과 한 덩어리) */
.sec-joined { border-top: 0; padding-top: 0; }
.sec-joined .h3 { margin-top: 24px; }
.h3 small { font-size: .6em; color: var(--text-2); font-weight: 600; }

/* 표 — PC 는 표, 휴대폰은 카드 */
.mx-table { display: none; }
.mx-table table { min-width: 0; table-layout: fixed; }
.mx-table thead th small { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.mx-table td, .mx-table tbody th { line-height: 1.6; }
.mx-table td em, .mx-card dd em { color: var(--accent); }
.cell-list { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.mx-cards { display: grid; gap: 12px; margin-top: 28px; }
.mx-card dl { margin: 6px 0 0; display: grid; gap: 0; }
.mx-card dl > div { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.mx-card dt { color: var(--accent-2); font-weight: 700; font-size: 14px; }
.mx-card dd { margin: 0; color: var(--text-2); }

/* 학습 흐름 · 덧붙임 */
.flows { margin-top: 28px; display: grid; gap: 10px; }
.flows-title { font-weight: 800; color: var(--text); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flow span { background: var(--surface-2); border-radius: 10px; padding: 6px 12px; font-weight: 600; font-size: 15px; }
.flow .ico { width: 16px; height: 16px; color: var(--accent); }
.notes { margin: 24px 0 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--text-2); }

/* 카드 묶음 */
.feat .card-text { font-size: 16px; }

/* 영역 — 눌러서 펼침 */
.areas { display: grid; gap: 12px; margin-top: 36px; }
.area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.area summary {
  list-style: none; cursor: pointer; padding: 20px 22px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
}
.area summary::-webkit-details-marker { display: none; }
.area-name { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 8px; }
.area-name small { font-size: 14px; color: var(--accent); font-weight: 700; }
.area-lead { grid-column: 1; color: var(--text-2); font-size: 15px; }
.area-ico { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--accent); transition: transform .2s ease; }
.area[open] .area-ico { transform: rotate(45deg); }
.area ul { margin: 0; padding: 0 22px 22px 40px; display: grid; gap: 8px; color: var(--text-2); }
.area summary:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: var(--radius); }

/* 원장 소개(수정2) */
.director-v2 { grid-template-columns: 1fr; }
.director-v2 .director-msg { display: grid; gap: 10px; }
.career ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.career li { padding-left: 16px; position: relative; color: var(--text-2); font-weight: 600; }
.career li::before { content: ''; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* 점 목록 */
.bullets { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; }
.bullets li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; font-size: 17px; color: var(--text-2); }
.bullets li strong { color: var(--text); }
.bullets .ico { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--accent); }
.sec-tight .bullets { margin-top: 16px; }

/* 상담 단추가 두 개뿐일 때 */
.contact-n1, .contact-n2 { max-width: 760px; }

/* ── 나타나기 (자바스크립트가 있을 때만 숨겼다가 보여 줌) ── */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 폭별 ── */
/* 접은 폴더블 · 작은 휴대폰 */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .hero-cta .btn { width: 100%; }
  .info > div { grid-template-columns: 76px 1fr; }
}

/* 편 폴더블 · 태블릿 세로 */
@media (min-width: 600px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .grid3 { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-auto-columns: calc(50% - 7px); }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-btn { flex-direction: column; align-items: flex-start; min-height: 132px; }
  .contact-btn small { margin-left: 0; margin-top: auto; }
  .director { grid-template-columns: 200px 1fr; padding: 32px; }
  .contact-n2 { grid-template-columns: repeat(2, 1fr); }
  .contact-n1 { grid-template-columns: 1fr; }
  .hl-big { grid-template-columns: repeat(2, 1fr); }
  .director-v2, .director-v2.no-photo { grid-template-columns: 1.3fr 1fr; align-items: start; }
}

/* 공개판3 디테일 — 학원 설정에서 켠 칸에만 */
.lead-wide, .prose-wide { max-width: none; }
/* 첫 화면 사진을 위 메뉴 글자 가운데에 맞춤(공개판10~) — --pa 는 main.js 가 잼 */
@media (min-width: 1024px) {
  .hero-has-portrait .hero-portrait.pa-move { translate: calc(-1 * var(--pa, 0px)) 0; }
  .hero-has-portrait .hero-portrait.pa-grow { margin-left: calc(-1 * var(--pa, 0px)); width: calc(100% + var(--pa, 0px)); }
}
.mx-hc thead th:first-child, .mx-hc tbody th { text-align: center; }
.mx-hc tbody th { vertical-align: middle; }
.mx-hl tbody th { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
.hl-center { display: flex; align-items: center; justify-content: center; text-align: center; }
.contact-center .contact-btn { justify-content: center; text-align: center; }
@media (min-width: 600px) {
  .contact-center .contact-btn { align-items: center; }
}

/* 표를 PC 처럼 볼 만큼 넓을 때 */
@media (min-width: 900px) {
  .mx-table { display: block; }
  .mx-cards { display: none; }
}

/* 태블릿 가로 · PC */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .top-nav { display: flex; }
  .top-in { height: 72px; }
  .btn-pill { min-height: 42px; padding: 0 20px; font-size: 15px; }
  .grid3 { grid-template-columns: repeat(3, 1fr); }
  .reviews { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; }
  .director { grid-template-columns: 240px 1fr; padding: 40px; gap: 40px; }
  .director-msg { font-size: 20px; }
  .card { padding: 32px 28px; }
}

/* ═════ 효과 — theme 의 fx · shape · card · em 이 있을 때만(<html class="fx-… shape-… card-… em-…">) ═════ */

/* 첫 화면 무늬(fx) */
.hero { --fx-ink: color-mix(in srgb, var(--accent) 24%, transparent); }
:is(.fx-grid, .fx-dots, .fx-diagonal, .fx-lines) .hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(85% 75% at 60% 40%, #000 25%, transparent 85%);
  mask-image: radial-gradient(85% 75% at 60% 40%, #000 25%, transparent 85%);
}
.fx-grid .hero::before { background-image: linear-gradient(var(--fx-ink) 1px, transparent 1px), linear-gradient(90deg, var(--fx-ink) 1px, transparent 1px); background-size: 44px 44px; }
.fx-dots .hero::before { background-image: radial-gradient(var(--fx-ink) 1.6px, transparent 1.8px); background-size: 22px 22px; }
.fx-diagonal .hero::before { background-image: repeating-linear-gradient(135deg, var(--fx-ink) 0 1px, transparent 1px 16px); }
.fx-lines .hero::before { background-image: repeating-linear-gradient(0deg, var(--fx-ink) 0 1px, transparent 1px 28px); }
.fx-plain .hero-glow { display: none; }
.fx-mesh .hero-glow {
  inset: -20% -10% -10% -10%; height: auto;
  background:
    radial-gradient(38% 42% at 12% 22%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    radial-gradient(36% 40% at 88% 30%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%),
    radial-gradient(50% 45% at 50% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}
.fx-spot .hero-glow {
  inset: -25% -25% auto auto; width: 75%; height: 85%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 38%, transparent), transparent);
}
.fx-aurora .hero-glow {
  inset: 8% -15% auto -15%; height: 60%;
  background: linear-gradient(115deg, transparent 15%, color-mix(in srgb, var(--accent) 45%, transparent) 38%, color-mix(in srgb, var(--accent-2) 40%, transparent) 60%, transparent 85%);
  filter: blur(56px); opacity: .75;
}
.fx-split .hero { background: linear-gradient(162deg, color-mix(in srgb, var(--accent) 13%, var(--bg)) 0 48%, var(--bg) 48%); }
.fx-split .hero-glow { display: none; }

/* 모서리(shape) — 기본은 둥글게 */
.shape-soft { --radius: 12px; }
.shape-soft :is(.btn, .btn-pill, .badge, .contact-btn) { border-radius: 12px; }
.shape-soft :is(.table-wrap, .hl-list li, .bullets li) { border-radius: 12px; }
.shape-square { --radius: 4px; }
.shape-square :is(.btn, .btn-pill, .badge, .contact-btn, .table-wrap, .hl-list li, .bullets li, .flow span, .top-nav a) { border-radius: 4px; }

/* 카드(card) — 기본은 가는 테두리 */
.card-shadow :is(.card, .stat, .area, .hl-big-item, .hl-list li, .bullets li, .table-wrap) {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 28px -14px rgba(0, 0, 0, .38);
}
.card-bar :is(.card, .area, .hl-big-item, .hl-list li, .bullets li) { border-left: 4px solid var(--accent); }
.card-tint :is(.card, .stat, .area, .hl-big-item, .hl-list li, .bullets li, .table-wrap) {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

/* 강조 글자(em) — 기본은 강조색 글자 */
.em-grad em {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.em-mark em { color: var(--text); background: linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 42%, transparent) 58%); }
.em-under em { text-decoration: underline; text-decoration-color: var(--accent-2); text-decoration-thickness: .12em; text-underline-offset: .16em; }

/* ═════ 미니멀형(theme.style = "minimal", <html class="style-minimal">) ═════
   흰 바탕 · 꾸밈 없이 사진 · 글꼴 · 여백으로. 카드 상자 대신 가는 선, 둥근 모서리 대신 각, 빛 번짐 없음.
   영어 큰 제목은 Montserrat(대문자), 한글은 Pretendard. */
.style-minimal { --radius: 0px; --en: 'Montserrat', 'Pretendard Variable', Pretendard, sans-serif; --label: var(--en); }
.style-minimal body { font-family: var(--body, 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif); }
.style-minimal .hero-glow,
.style-minimal .hero::before { display: none; }
.style-minimal .top { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.style-minimal .top-nav a { font-family: var(--label); font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--text); border-radius: 0; }
.style-minimal .top-nav a:hover { background: none; text-decoration: underline; text-underline-offset: 6px; }
.style-minimal :is(.btn, .btn-pill, .badge, .contact-btn) { border-radius: 0; }
.style-minimal :is(.btn-pill, .btn-accent) { background: var(--text); color: var(--bg); }
.style-minimal :is(.btn-accent, .btn-pill):hover { background: var(--accent); color: var(--on-accent); }
.style-minimal .btn-ghost { background: transparent; border-color: var(--text); color: var(--text); }

/* 첫 화면 — 사진을 화면 가득, 글은 사진 위에 흰 글씨 */
.style-minimal .hero {
  min-height: clamp(520px, 82vh, 780px); padding: 0; display: flex; align-items: flex-end;
  color: #fff; background: #1b1f24;
}
.style-minimal .hero .wrap { padding-top: 120px; padding-bottom: clamp(48px, 8vw, 96px); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.55)); }
/* 사진이 아직 없을 때의 자리 그림 — 차분한 두 색 · 큰 원 · 가는 선 */
.hero-media-empty {
  background:
    radial-gradient(circle at 74% 34%, rgba(255,255,255,.16) 0 17%, transparent 17.3%),
    radial-gradient(circle at 86% 64%, color-mix(in srgb, var(--accent-2) 70%, transparent) 0 7%, transparent 7.3%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 120px),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #0d1013), #101418 70%);
}
.hero-media-empty span {
  position: absolute; right: var(--gutter); top: 88px; z-index: 1;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75);
  border: 1px dashed rgba(255,255,255,.45); padding: 4px 10px;
}
.style-minimal .eyebrow { color: rgba(255,255,255,.85); font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.style-minimal .display {
  font-family: var(--en); text-transform: var(--display-tt, uppercase); font-weight: var(--display-w, 600);
  font-size: var(--display-size, clamp(32px, 6.6vw, 72px)); line-height: 1.12; letter-spacing: var(--display-ls, .005em); color: #fff;
}
.style-minimal .display em { color: #fff; }
.style-minimal .hero .lead { color: rgba(255,255,255,.88); }
.style-minimal .badge { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.style-minimal .badge .ico { color: #fff; }
.style-minimal .hero .btn-accent { background: #fff; color: #111; }
.style-minimal .hero .btn-accent:hover { background: var(--accent-2); color: var(--on-accent-2); }
.style-minimal .hero .btn-ghost { border-color: rgba(255,255,255,.75); color: #fff; }

/* 칸 머리 */
.style-minimal .kicker { font-family: var(--label); color: var(--muted); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 18px; }
.style-minimal .h2 { font-family: var(--head, inherit); font-size: clamp(26px, 4.2vw, 42px); font-weight: var(--h2-w, 700); letter-spacing: -0.025em; line-height: 1.3; }
.style-minimal .h3 { font-family: var(--head, inherit); font-size: clamp(20px, 2.6vw, 26px); font-weight: var(--h2-w, 700); }
.style-minimal .sec { padding: clamp(64px, 9vw, 120px) 0; }
.style-minimal :is(.sec-alt, .sec-hl, .sec-cta) { background: var(--surface-2); }
.style-minimal .lead { color: var(--text-2); }

/* 상자 대신 가는 선 */
.style-minimal :is(.card, .stat, .hl-list li, .bullets li, .area) {
  background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
  padding-left: 0; padding-right: 0;
}
.style-minimal .card { padding-top: 24px; padding-bottom: 8px; }
.style-minimal .card-num { font-family: var(--label); letter-spacing: .08em; }
.style-minimal .hl-big-item {
  background: transparent; border: 0; border-top: 2px solid var(--text); border-radius: 0; padding: 20px 0 0;
  font-weight: 700;
}
.style-minimal .hl-list li { padding-top: 14px; padding-bottom: 14px; font-weight: 500; }
.style-minimal :is(.hl-list, .bullets) .ico { color: var(--accent); }
.style-minimal .hl-basis { color: var(--muted); }
.style-minimal .table-wrap { background: transparent; border: 0; border-top: 2px solid var(--text); border-radius: 0; }
.style-minimal thead th { background: transparent; font-size: 13px; letter-spacing: .04em; }
.style-minimal .flow span { border-radius: 0; background: transparent; border: 1px solid var(--line); }
.style-minimal .area summary { padding-left: 0; padding-right: 0; }
.style-minimal .area ul { padding-left: 18px; }
.style-minimal .director { background: transparent; border: 0; border-top: 2px solid var(--text); border-radius: 0; padding-left: 0; padding-right: 0; }
.style-minimal .contact-btn { background: var(--text); color: var(--bg); }
.style-minimal .tabbar a.on { color: var(--text); }
.style-minimal .foot { background: var(--surface-2); }
@media (max-width: 599px) {
  /* 휴대폰 — 자리 그림의 원을 글 위쪽으로 */
  .hero-media-empty {
    background:
      radial-gradient(circle at 86% 16%, rgba(255,255,255,.14) 0 18%, transparent 18.4%),
      radial-gradient(circle at 18% 13%, color-mix(in srgb, var(--accent-2) 70%, transparent) 0 5%, transparent 5.3%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 120px),
      linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, #0d1013), #101418 70%);
  }
}
/* 미니멀형 — 금색(둘째 강조색)은 흰 바탕에서 옅으므로 작은 글자에는 강조색 */
.style-minimal .mx-card dt { color: var(--accent); }

/* 미니멀형 — 첫 화면 배치(theme.layout → <html class="hero-…">). 기본(full)은 사진을 화면 가득 */
/* center: 사진 가득 · 글은 가운데 */
.style-minimal.hero-center .hero { align-items: center; text-align: center; }
.style-minimal.hero-center .hero .wrap { display: flex; flex-direction: column; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.style-minimal.hero-center .hero .lead { margin-left: auto; margin-right: auto; }
.style-minimal.hero-center :is(.badges, .hero-cta) { justify-content: center; }
/* frame: 사진 둘레에 흰 여백 */
.style-minimal.hero-frame .hero { background: var(--bg); padding: var(--gutter); padding-top: 0; }
.style-minimal.hero-frame .hero-media { inset: 0 var(--gutter) var(--gutter); }
.style-minimal.hero-frame .hero .wrap { padding-left: calc(var(--gutter) * 2); padding-right: calc(var(--gutter) * 2); }
/* split · below: 글은 바탕색 위에 · 사진은 따로(휴대폰은 사진이 위 · 글이 아래) */
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .hero { background: var(--bg); color: var(--text); min-height: 0; flex-direction: column; align-items: stretch; }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .hero-media { position: relative; inset: auto; height: 300px; order: -1; }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .hero-media::after { display: none; }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .hero-media-empty span { top: 16px; }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .hero .wrap { padding-top: 48px; padding-bottom: 56px; }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .display { color: var(--text); }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .display em { color: var(--accent); }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .eyebrow { color: var(--muted); }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .hero .lead { color: var(--text-2); }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .badge { color: var(--text); border-color: var(--line); }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .badge .ico { color: var(--accent); }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .hero .btn-accent { background: var(--text); color: var(--bg); }
.style-minimal:is(.hero-split, .hero-below, .hero-clean) .hero .btn-ghost { border-color: var(--text); color: var(--text); }
@media (min-width: 1024px) {
  .style-minimal.hero-below .hero .wrap { padding-top: 96px; padding-bottom: 64px; }
  .style-minimal.hero-below .hero-media { order: 0; height: 440px; }
  .style-minimal.hero-split .hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
  .style-minimal.hero-split .hero .wrap {
    order: 0; margin: 0; max-width: none; align-self: center;
    padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding-right: 48px;
  }
  .style-minimal.hero-split .hero-media { order: 1; height: auto; }
  .style-minimal.hero-split .display { font-size: clamp(32px, 4.4vw, 60px); }
}

/* clean: 사진 없이 바탕 위에 글만 가운데 */
.style-minimal.hero-clean .hero-media { display: none; }
.style-minimal.hero-clean .hero { align-items: center; text-align: center; min-height: clamp(460px, 72vh, 700px); }
.style-minimal.hero-clean .hero .wrap { display: flex; flex-direction: column; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.style-minimal.hero-clean .hero .lead { margin-left: auto; margin-right: auto; }
.style-minimal.hero-clean :is(.badges, .hero-cta) { justify-content: center; }

/* ═════ 디자인 모양(theme.look → <html class="look-…">) — 미니멀형 위에 덧입힘. 2026-10-27 디자인 템플릿 묶음 ═════ */

/* 공통 — 상자 카드를 되살리는 모양(soft · corp · scene · kids) */
:is(.look-soft, .look-corp, .look-scene, .look-kids) :is(.card, .stat, .hl-list li, .bullets li, .area, .hl-big-item, .director, .table-wrap) {
  background: var(--surface); border-radius: var(--radius); padding-left: 24px; padding-right: 24px;
}
:is(.look-soft, .look-corp, .look-scene, .look-kids) .hl-big-item { padding: 24px; }
:is(.look-soft, .look-corp, .look-scene, .look-kids) .area summary { padding-left: 22px; padding-right: 22px; }
:is(.look-soft, .look-corp, .look-scene, .look-kids) .area ul { padding-left: 40px; }
:is(.look-soft, .look-corp, .look-scene, .look-kids) .sec { border-top: 0; }
:is(.look-soft, .look-corp, .look-scene, .look-kids) .kicker { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 15px; font-weight: 700; color: var(--accent); }
:is(.look-soft, .look-scene, .look-kids) .top-nav a { font-family: inherit; letter-spacing: 0; font-weight: 600; color: var(--text-2); border-radius: 10px; }
:is(.look-soft, .look-scene, .look-kids) .top-nav a:hover { background: var(--surface-2); text-decoration: none; }
:is(.look-soft, .look-corp, .look-scene, .look-kids, .look-bold) :is(.btn-pill, .btn-accent, .contact-btn) { background: var(--accent); color: var(--on-accent); }
:is(.look-soft, .look-corp, .look-scene, .look-kids, .look-bold) :is(.btn-accent, .btn-pill):hover { background: color-mix(in srgb, var(--accent) 86%, #000); color: var(--on-accent); }

/* soft — 핀테크 · SaaS(토스페이먼츠 · 채널톡 · 플렉스 같은 느낌): 둥근 흰 카드 · 옅은 그림자 · 회색 칸 */
.look-soft { --radius: 22px; }
.look-soft .top { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: transparent; }
.look-soft :is(.btn, .btn-pill, .contact-btn) { border-radius: 14px; }
.look-soft .badge { border-radius: 999px; }
.look-soft .btn-ghost { background: var(--surface-2); border-color: transparent; color: var(--text); }
.look-soft :is(.card, .stat, .hl-list li, .bullets li, .area, .hl-big-item, .director, .table-wrap) { border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px -14px rgba(0,0,0,.16); }
.look-soft :is(.sec-alt, .sec-hl, .sec-cta) { background: var(--surface-2); }
.look-soft .h2 { font-weight: var(--h2-w, 800); letter-spacing: -0.035em; }
.look-soft .flow span { border-radius: 10px; background: var(--surface); border: 0; }
.look-soft .hero-media { border-radius: 28px; overflow: hidden; margin: 16px var(--gutter) 0; }
.look-soft .hero-media::after { display: none; }
.look-soft .hero-media-empty, .look-kids .hero-media-empty {
  background:
    radial-gradient(circle at 70% 35%, color-mix(in srgb, var(--accent) 30%, transparent) 0 16%, transparent 16.5%),
    radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--accent-2) 30%, transparent) 0 11%, transparent 11.5%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, #fff), color-mix(in srgb, var(--accent-2) 16%, #fff));
}
.look-soft .hero-media-empty span, .look-kids .hero-media-empty span { color: var(--text-2); border-color: color-mix(in srgb, var(--text) 30%, transparent); }

/* corp — 기업형(그란츠 · 웹어워드 수상작 · 부트스트랩 회사 소개 같은 느낌): 첫 화면 위에 투명한 위 막대 · 가운데 칸 머리 · 테두리 카드 */
.look-corp { --radius: 8px; }
.look-corp .top { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: rgba(255,255,255,.2); transition: background .25s ease, border-color .25s ease; }
.look-corp .top :is(.logo-text, .top-nav a) { color: #fff; }
.look-corp .top .logo-text small { color: rgba(255,255,255,.8); }
.look-corp .top-nav a { font-family: inherit; letter-spacing: 0; font-weight: 600; }
.look-corp .top-nav a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.look-corp.scrolled .top { background: var(--bg); border-bottom-color: var(--line); }
.look-corp.scrolled .top :is(.logo-text, .top-nav a) { color: var(--text); }
.look-corp.scrolled .top-nav a:hover { background: var(--surface-2); }
.look-corp :is(.btn, .btn-pill, .contact-btn, .badge) { border-radius: 6px; }
.look-corp .hero .btn-accent { background: var(--accent); color: var(--on-accent); }
.look-corp .sec > .wrap > :is(.kicker, .h2) { text-align: center; }
.look-corp .sec > .wrap > .lead { text-align: center; margin-left: auto; margin-right: auto; }
.look-corp .kicker { font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; }
.look-corp .h2 { font-weight: var(--h2-w, 800); }
.look-corp :is(.card, .stat, .hl-list li, .bullets li, .area, .hl-big-item, .director, .table-wrap) { border: 1px solid var(--line); }
.look-corp .hl-big-item { border-top: 4px solid var(--accent); }
.look-corp .card-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 14px; letter-spacing: 0; }
.look-corp :is(.sec-alt, .sec-hl, .sec-cta) { background: var(--surface-2); }
.look-corp .foot { background: #111418; color: rgba(255,255,255,.65); }
.look-corp .foot-name { color: #fff; }

/* scene — 장면 전환(케이뱅크 같은 느낌): 칸마다 자기 바탕(옅은 색 → 강조색 → 검정 → 흰색) · 핵심 낱말에 색 상자 */
.look-scene { --radius: 20px; --scene-a: var(--accent); --scene-on: var(--on-accent); }
.look-scene main > section:nth-of-type(4n+1) { --bg: color-mix(in srgb, var(--accent) 9%, #fff); --surface: #fff; --surface-2: color-mix(in srgb, var(--accent) 14%, #fff); --text: #0f1420; --text-2: #3c4454; --muted: #677083; --line: rgba(15,20,32,.12); }
.look-scene main > section:nth-of-type(4n+2) { --bg: var(--scene-a); --surface: color-mix(in srgb, #fff 14%, var(--scene-a)); --surface-2: color-mix(in srgb, #fff 14%, var(--scene-a)); --text: #fff; --text-2: rgba(255,255,255,.86); --muted: rgba(255,255,255,.72); --line: rgba(255,255,255,.24); --accent: var(--accent-2); --on-accent: var(--on-accent-2); }
.look-scene main > section:nth-of-type(4n+3) { --bg: #0c0f14; --surface: #171b22; --surface-2: #171b22; --text: #f4f6fb; --text-2: #c2c8d4; --muted: #8b93a3; --line: rgba(255,255,255,.12); --accent: var(--accent-2); --on-accent: var(--on-accent-2); }
.look-scene main > section:nth-of-type(4n+4) { --bg: #fff; --surface: color-mix(in srgb, var(--accent) 6%, #fff); --surface-2: color-mix(in srgb, var(--accent) 6%, #fff); --text: #0f1420; --text-2: #3c4454; --muted: #677083; --line: rgba(15,20,32,.12); }
.style-minimal.look-scene main > section { background: var(--bg); color: var(--text); }
.look-scene .sec { min-height: 88vh; display: flex; align-items: center; }
.look-scene .sec > .wrap { width: 100%; }
.look-scene .sec > .wrap > :is(.kicker, .h2) { text-align: center; }
.look-scene .sec > .wrap > .lead { text-align: center; margin-left: auto; margin-right: auto; }
.look-scene :is(.h2, .display) { font-weight: var(--h2-w, 800); line-height: 1.28; }
.look-scene :is(.h2, .display) em { background: var(--accent-2); color: var(--on-accent-2); padding: 0 .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.look-scene :is(.btn, .btn-pill, .contact-btn) { border-radius: 999px; }
.look-scene .btn-ghost { background: var(--surface); border-color: var(--line); color: var(--text); }
.look-scene :is(.card, .stat, .hl-list li, .bullets li, .area, .hl-big-item, .director, .table-wrap) { border: 0; }
.look-scene .hero-media { border-radius: 28px; overflow: hidden; margin: 0 var(--gutter); }
.look-scene .foot { background: #0c0f14; color: #8b93a3; }
.look-scene .foot-name { color: #fff; }

/* bold — 다이나믹(핸섬피쉬 · FWA · CSS Design Awards 같은 느낌): 아주 큰 제목 · 속이 빈 영어 칸 이름 · 굵은 선 */
.look-bold .display { font-size: var(--display-size, clamp(52px, 11vw, 150px)); line-height: .96; letter-spacing: var(--display-ls, -0.04em); }
.look-bold .kicker { font-family: var(--en); font-size: clamp(44px, 9vw, 120px); line-height: .95; letter-spacing: -0.02em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--text); font-weight: 700; margin-bottom: 24px; }
.look-bold .h2 { font-weight: var(--h2-w, 800); }
.look-bold :is(.card, .hl-list li, .bullets li, .area) { border-top: 2px solid var(--text); }
.look-bold .card-num { font-family: var(--en); font-size: 44px; line-height: 1; color: var(--accent); font-weight: 700; letter-spacing: -0.02em; }
.look-bold .hl-big-item { font-size: clamp(28px, 5vw, 56px); border-top-width: 4px; }
.look-bold :is(.btn, .btn-pill, .contact-btn, .badge) { border-radius: 999px; }
.look-bold .btn-ghost { border-width: 2px; }
/* 내리면 첫 화면 제목이 옆으로 벌어지며 옅어짐 — 되는 브라우저에서만 */
@supports (animation-timeline: scroll()) {
  .look-bold .hero .display { animation: bold-spread linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  @keyframes bold-spread { to { letter-spacing: .06em; opacity: .25; } }
}

/* kids — 키즈 · 프렌들리(아기자기한 학원 · Dribbble 일러스트 사이트 느낌): 둥근 글꼴 · 알록달록 카드 · 통통한 단추 */
.look-kids { --radius: 28px; }
.look-kids :is(.card, .stat, .hl-list li, .bullets li, .area, .hl-big-item, .director, .table-wrap) { border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.look-kids .grid3 .card:nth-child(3n+1) { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.look-kids .grid3 .card:nth-child(3n+2) { background: color-mix(in srgb, var(--accent-2) 14%, var(--bg)); }
.look-kids .grid3 .card:nth-child(3n) { background: color-mix(in srgb, color-mix(in srgb, var(--accent) 50%, var(--accent-2)) 12%, var(--bg)); }
.look-kids :is(.btn, .btn-pill, .contact-btn, .badge) { border-radius: 999px; }
.look-kids :is(.btn-pill, .btn-accent, .contact-btn) { box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.look-kids .btn-ghost { background: var(--surface); border: 2px solid var(--text); color: var(--text); }
.look-kids .kicker { display: inline-block; background: var(--accent-2); color: var(--on-accent-2); padding: 4px 14px; border-radius: 999px; font-size: 14px; }
.look-kids .h2 { font-weight: var(--h2-w, 700); letter-spacing: -0.02em; }
.look-kids .hero-media { border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; overflow: hidden; margin: 24px var(--gutter) 0; }
.look-kids .hero-media::after { display: none; }
.look-kids :is(.sec-alt, .sec-hl, .sec-cta) { background: color-mix(in srgb, var(--accent-2) 10%, var(--bg)); }
.look-kids .card-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--accent); font-weight: 800; }

/* editorial — 에디토리얼(Behance · 노트폴리오 · 잡지 같은 느낌): 세리프 · 칸 이름 옆 가는 줄 · 기울인 번호 */
.look-editorial .kicker::after { content: ''; display: inline-block; width: 56px; height: 1px; background: currentColor; margin-left: 14px; vertical-align: middle; }
.look-editorial :is(.hl-big-item, .card-title, .area-name) { font-family: var(--head, inherit); }
.look-editorial .card-num { font-family: var(--en); font-style: italic; font-size: 22px; color: var(--accent); }
.look-editorial .lead { font-size: clamp(17px, 2vw, 20px); }

@media (min-width: 1024px) {
  .look-soft.hero-split .hero-media, .look-scene.hero-split .hero-media { margin: 32px var(--gutter) 32px 0; }
  .look-kids.hero-split .hero-media { margin: 40px 40px 40px 0; }
}

/* 밝은 첫 화면에서도 소프트 · 장면 · 키즈는 강조색 단추 */
.style-minimal:is(.look-soft, .look-scene, .look-kids) .hero .btn-accent { background: var(--accent); color: var(--on-accent); }
.look-kids .hero-media-empty span { right: 18%; top: 22%; }

/* ═════ 로고 · 원장 사진(수정4) — logoMark · footerLogo · hero portrait · 원장 소개 사진이 있을 때만 ═════ */
.logo-mark { height: 36px; width: auto; margin-right: 10px; }
.foot-logo { display: block; width: 150px; height: auto; margin-bottom: 18px; opacity: .92; }

.hero-portrait { position: relative; z-index: 1; margin: 44px auto 0; width: min(100% - 2 * var(--gutter), 420px); }
.hero-portrait img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%;
  border-radius: 28px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 8px color-mix(in srgb, var(--accent) 7%, transparent);
}
.hero-portrait figcaption {
  position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text); font-size: 14px; font-weight: 700;
}
@media (min-width: 1024px) {
  .hero-has-portrait { display: grid; grid-template-columns: minmax(0, 1fr) min(32vw, 400px); align-items: center; column-gap: 48px; padding-top: 64px; padding-bottom: 72px; padding-left: max(var(--gutter), (100vw - 1200px) / 2); padding-right: max(var(--gutter), (100vw - 1200px) / 2); }
  .hero-has-portrait > .wrap { padding: 0; max-width: none; width: auto; margin: 0; }
  .hero-has-portrait .display { font-size: clamp(38px, 5.2vw, 68px); }
  .hero-has-portrait .hero-portrait { margin: 0; width: 100%; }
}

.director-v2:not(.no-photo) .director-photo { max-width: none; border-radius: 20px; object-position: 50% 15%; }
@media (min-width: 600px) {
  .director-v2:not(.no-photo) { grid-template-columns: 240px 1fr; }
  .director-v2:not(.no-photo) .career { grid-column: 2; }
}
@media (min-width: 1024px) {
  .director-v2:not(.no-photo) { grid-template-columns: 300px 1.3fr 1fr; }
  .director-v2:not(.no-photo) .career { grid-column: auto; }
}

/* ═════ 한 화면에 한 칸(수정5) — theme.page: "snap" → <html class="page-snap"> ═════
   스크롤 한 번이면 다음 칸 맨 위로 붙음. 칸마다 화면 높이(위 막대 · 휴대폰 아래 메뉴 뺀 만큼)를 채우고 글은 위아래 가운데.
   화면보다 긴 칸(휴대폰의 표 · 카드가 많은 칸)은 그 칸 안에서 끝까지 내려간 뒤 다음 칸으로 넘어감. */
.page-snap { --top-h: 60px; scroll-padding-top: var(--top-h); scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.page-snap main > section, .page-snap .foot { scroll-snap-align: start; scroll-snap-stop: always; }
.page-snap main > section {
  min-height: calc(100vh - var(--top-h) - var(--tabbar-h) - env(safe-area-inset-bottom));
  min-height: calc(100svh - var(--top-h) - var(--tabbar-h) - env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 48px; padding-bottom: 48px; box-sizing: border-box;
}
.page-snap main > section > .wrap { width: 100%; }
.page-snap .sec-joined { border-top: 1px solid var(--line); }
.page-snap .sec-joined .h3 { margin-top: 0; }
.page-snap .draft-bar { position: fixed; top: auto; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); left: 0; right: 0; z-index: 30; font-size: 12px; padding: 4px var(--gutter); opacity: .92; }
@media (min-width: 1024px) {
  .page-snap { --top-h: 72px; --tabbar-h: 0px; }
  .page-snap main > section { padding-top: 36px; padding-bottom: 36px; }
  /* 한 화면에 더 들어가게 — 제목 · 사이 여백 · 카드 · 표를 조금 작게 */
  .page-snap .h2 { font-size: clamp(30px, 3.4vw, 44px); }
  .page-snap .kicker { margin-bottom: 8px; }
  .page-snap .lead { margin-top: 14px; font-size: 18px; }
  .page-snap :is(.grid3, .table-wrap, .areas, .hl-big, .bullets, .contact-grid, .director, .prose, .flows, .info) { margin-top: 28px; }
  .page-snap .card { padding: 22px 22px; gap: 6px; }
  .page-snap :is(th, td) { padding-top: 10px; padding-bottom: 10px; }
  .page-snap .area summary { padding-top: 14px; padding-bottom: 14px; }
  .page-snap .areas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .page-snap .areas > .area { margin: 0; }
  .page-snap .director { padding: 28px; }
  .page-snap .director-msg { font-size: 18px; }
  .page-snap .director-v2:not(.no-photo) { grid-template-columns: 260px 1.3fr 1fr; }
  .page-snap .hero-has-portrait { display: grid; }
  .page-snap .draft-bar { bottom: 0; }
}
/* 터치 화면은 CSS 가 칸에 붙임(PC 마우스는 main.js) */
@media (pointer: coarse) { .page-snap { scroll-snap-type: y mandatory; } }
@media (pointer: coarse) and (prefers-reduced-motion: reduce) { .page-snap { scroll-snap-type: y proximity; } }
@media (max-width: 1023px) {
  .page-snap .hero-portrait { width: min(100% - 2 * var(--gutter), 200px); margin-top: 20px; }
  .page-snap .hero-portrait figcaption { left: 50%; transform: translateX(-50%); bottom: 10px; white-space: nowrap; font-size: 12px; padding: 5px 10px; }
  .page-snap .hero-cta { margin-top: 20px; }
  .page-snap .hero .lead { margin-top: 12px; }
  .page-snap .badges { margin-top: 14px; }
}
/* 휴대폰 — 긴 칸을 한 화면에: 여백 · 글 크기를 줄이고, 카드 · 표 · 약력은 옆으로 넘기기 */
@media (max-width: 899px) {
  .page-snap main > section { padding-top: 16px; padding-bottom: 16px; }
  .page-snap .display { font-size: clamp(30px, 8.6vw, 40px); }
  .page-snap .h2 { font-size: clamp(25px, 7vw, 32px); }
  .page-snap .eyebrow { margin-bottom: 10px; font-size: 14px; }
  .page-snap .kicker { margin-bottom: 6px; font-size: 14px; }
  .page-snap .lead { margin-top: 10px; font-size: 16px; }
  .page-snap .prose p { font-size: 16px; }
  .page-snap :is(.grid3, .mx-cards, .hl-big, .areas, .contact-grid, .director, .prose, .flows, .info, .table-wrap, .bullets) { margin-top: 18px; }
  .page-snap .h3 { font-size: 20px; }

  .page-snap :is(.grid3, .mx-cards, .hl-list, .director-v2, .notes) {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 2px; scroll-padding: 0 var(--gutter);
  }
  .page-snap :is(.grid3, .mx-cards, .hl-list, .director-v2, .notes)::-webkit-scrollbar { display: none; }
  .page-snap :is(.grid3, .mx-cards, .hl-list, .director-v2, .notes) > * { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
  .page-snap .card { padding: 20px 18px; }
  .page-snap .mx-card dd { font-size: 14px; line-height: 1.55; }
  .page-snap .mx-card dt { font-size: 13px; }
  .page-snap .lead { line-height: 1.55; }
  .page-snap .mx-card dl > div { padding: 9px 0; }
  .page-snap .hl-list { margin-top: 12px; }
  .page-snap .hl-list li { align-items: center; }
  .page-snap .hl-big-item { padding: 18px; font-size: 19px; }
  .page-snap .director-v2 { background: none; border: 0; border-radius: 0; padding-top: 0; padding-bottom: 2px; }
  .page-snap .director-v2 > :is(.director-body, .career) { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; margin: 0; }
  .page-snap .director-v2 .director-msg { font-size: 16px; }
  .page-snap .director-v2:not(.no-photo) .director-photo { height: 100%; max-height: 440px; aspect-ratio: auto; }
  .page-snap .area summary { padding-top: 13px; padding-bottom: 13px; }
  .page-snap .area:not([open]) .area-lead { display: none; }
  .page-snap .areas { gap: 8px; }
  .page-snap .contact-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .page-snap .contact-n1 { grid-template-columns: 1fr; }
  .page-snap .contact-btn { min-height: 84px; padding: 14px 10px; flex-direction: column; gap: 6px; font-size: 15px; }
  .page-snap .info > div { padding: 10px 0; display: flex; justify-content: center; gap: 10px; }
  .page-snap .map-links { margin-top: 16px; flex-wrap: nowrap; gap: 8px; }
  .page-snap .map-links > * { font-size: 14px; padding-left: 12px; padding-right: 12px; }
  .page-snap .notes { list-style: none; margin-top: 16px; }
  .page-snap .notes > li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 15px; display: flex; align-items: center; justify-content: center; }
  .page-snap .flows { gap: 6px; }
  .page-snap .flow span { font-size: 13px; padding: 4px 9px; }
  .swipe-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .swipe-dots span { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 25%, transparent); transition: width .2s, background .2s; }
  .swipe-dots span.on { width: 18px; background: var(--accent); }
}
@media (min-width: 900px) { .swipe-dots { display: none; } }

/* ═════ 글 가운데 맞춤(수정5) — theme.align: "center" → <html class="align-center"> ═════
   제목 · 글 · 카드 · 목록 · 표를 모두 가로 가운데로, 한 줄 길이를 고르게(text-wrap: balance). */
.align-center main, .align-center .foot { text-align: center; }
.align-center :is(.h2, .h3, .display, .lead, .prose, .prose p, .director-msg, .hl-basis, .note, .flows-title) { margin-left: auto; margin-right: auto; }
.align-center :is(.display, .h2, .h3, .card-title, .area-name, .hl-big-item, .flows-title) { text-wrap: balance; }
.align-center :is(.lead, .prose p, .card-text, .director-msg p, .area-lead, .bullets li, .hl-list li, .note, .career li) { text-wrap: pretty; }
.align-center .lead { max-width: 30em; }
.align-center .h3 { justify-content: center; }
.align-center :is(.badges, .hero-cta, .map-links, .flow, .foot-info) { justify-content: center; }
.align-center .card { align-items: center; }
.align-center :is(.bullets, .hl-list) { max-width: 46em; margin-left: auto; margin-right: auto; }
.align-center :is(.bullets li, .hl-list li) { justify-content: center; text-align: center; }
.align-center :is(.cell-list, .notes) { list-style-position: inside; padding-left: 0; }
.align-center .career ul { justify-items: center; }
.align-center .career li { padding-left: 0; }
.align-center .career li::before { position: static; display: inline-block; vertical-align: middle; margin: 0 8px 2px 0; }
.align-center :is(th, td) { text-align: center; vertical-align: middle; }
.align-center .mx-card dl > div { justify-items: center; }
.align-center .area summary { text-align: center; }
.align-center .area-name { justify-content: center; }
.align-center .area ul { list-style-position: inside; padding-left: 22px; }
.align-center .info > div { grid-template-columns: 1fr; gap: 2px; justify-items: center; }
.align-center .contact-btn { align-items: center; justify-content: center; text-align: center; }
.align-center .director-photo { margin-left: auto; margin-right: auto; }
.align-center .foot-logo { margin-left: auto; margin-right: auto; }
.align-center .hero-has-portrait > .wrap { text-align: center; }
@media (min-width: 600px) {
  .align-center .contact-btn small { margin-left: auto; margin-right: auto; }
  .align-center .contact-n2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
  .align-center .contact-n1 { max-width: 380px; margin-left: auto; margin-right: auto; }
}