/* 요리수 연산 공통 스타일. 흰색에 가까운 아이보리 바탕 + 로고 4색(주황·청록·연두·보라). 모양 규칙: 버튼·칩은 알약(999px), 카드·타일은 28px
   모션은 3-4단계: 떠오르기·이미지 걷힘·목록 순차 등장·hover만. 계속 움직이는 장식은 쓰지 않는다 */
:root {
  --bg: #FFFDF8;
  --surface: #FFF6E8;
  --card: #FFFFFF;
  --line: #F0E4CF;
  --text: #2F2B26;
  --muted: #6F675C;
  --accent: #F19317;
  --on-accent: #FFFFFF;

  /* 로고 색 (채움용) + 글자용 진한 색 (아이보리 위 4.5:1 이상) */
  --orange: #F19317; --orange-d: #9A5200;
  --teal: #00A5B8;   --teal-d: #007080;
  --green: #83C034;  --green-d: #4A7610;
  --purple: #8C7DCE; --purple-d: #6A58B3;
  --gray: #8A8680;

  --font-display: "Pretendard", system-ui, sans-serif;
  --font-en: "Pretendard", system-ui, sans-serif;
  --radius: 999px;
  --r: 28px;
  --nav-h: 80px;
  --shadow: 0 2px 0 rgba(160, 120, 60, .08), 0 22px 44px -26px rgba(150, 100, 30, .35);
  --slow: cubic-bezier(0.22, 1, 0.36, 1);
  --in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body { overflow-x: clip; }
[hidden] { display: none !important; }
::selection { background: var(--orange); color: var(--text); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.en { font-family: var(--font-en); font-weight: 600; letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

/* 페이지 색: 각 페이지·타일이 --c(채움)·--cd(글자)를 바꿔 쓴다 */
.c-orange { --c: var(--orange); --cd: var(--orange-d); }
.c-teal { --c: var(--teal); --cd: var(--teal-d); }
.c-green { --c: var(--green); --cd: var(--green-d); }
.c-purple { --c: var(--purple); --cd: var(--purple-d); }

/* ---------- 연산 공 (+ − × ÷, 고정 장식) ---------- */
.ball { display: inline-grid; place-items: center; width: var(--s, 56px); aspect-ratio: 1; border-radius: 50%; background: var(--c, var(--orange)); color: #fff; font-family: var(--font-en); font-weight: 700; font-size: calc(var(--s, 56px) * .62); line-height: 1; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .08), inset 0 5px 8px rgba(255, 255, 255, .35); }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--radius); background: var(--c); color: var(--text); font-weight: 700; font-size: 15px; }

/* ---------- 헤더 ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; min-height: 48px; flex-shrink: 0; }
.logo img { height: 48px; width: auto; transition: transform 420ms var(--pop); }
@media (hover: hover) and (pointer: fine) { .logo:hover img { transform: rotate(-3deg) scale(1.04); } }

.nav nav { display: flex; align-items: center; gap: 40px; }
.nav ul { list-style: none; padding: 0; }
.menu { display: flex; align-items: center; gap: 34px; }
.menu > li { position: relative; }
.menu > li > a { position: relative; display: inline-block; padding: 14px 0; font-size: 17px; font-weight: 700; }
.menu > li > a::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 6px; height: 6px; border-radius: 6px; background: var(--c); opacity: .9; transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--slow); }
.menu > li > a[aria-current="page"]::after { transform: scaleX(1); }
/* 하위 메뉴 (PC: 마우스를 올리면 아래로 펼침) */
.sub { position: absolute; top: calc(100% - 4px); left: 50%; min-width: 172px; padding: 10px; background: var(--card); border-radius: 20px; box-shadow: var(--shadow), 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity 200ms ease, transform 250ms var(--slow), visibility 0s 250ms; }
.sub a { display: block; padding: 10px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; }
.menu > li:hover .sub, .menu > li:focus-within .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 200ms ease, transform 250ms var(--slow); }
@media (hover: hover) and (pointer: fine) {
  .menu > li > a:hover::after { transform: scaleX(1); transform-origin: left; }
  .sub a:hover { background: color-mix(in srgb, var(--c) 18%, var(--card)); color: var(--cd); }
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; position: relative; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; }
.menu-btn i { position: absolute; left: 12px; right: 12px; height: 3px; background: var(--text); border-radius: 3px; transition: transform 300ms var(--slow); }
.menu-btn i:first-of-type { top: 18px; }
.menu-btn i:last-of-type { top: 27px; }
.menu-btn[aria-expanded="true"] i:first-of-type { transform: translateY(4.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-of-type { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 1180px) {
  :root { --nav-h: 68px; }
  .logo img { height: 36px; }
  .menu-btn { display: block; margin-right: -8px; }
  .nav nav { position: fixed; inset: var(--nav-h) 0 0 0; flex-direction: column; align-items: stretch; gap: 28px; background: var(--bg); padding: 16px var(--gutter) 40px; overflow-y: auto; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 500ms var(--in-out), visibility 0s 500ms; }
  .nav nav.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 600ms var(--in-out); }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > li { border-bottom: 1.5px dashed var(--line); padding: 14px 0; overflow: hidden; }
  .menu > li > a { display: block; padding: 4px 0; font-family: var(--font-display); font-size: 28px; font-weight: 800; }
  .menu > li > a::after { display: none; }
  .menu > li > a[aria-current="page"] { color: var(--cd); }
  .sub, .menu > li:hover .sub, .menu > li:focus-within .sub { position: static; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; padding: 8px 0 0; background: none; box-shadow: none; opacity: 1; visibility: inherit; transform: none; transition: none; }
  .sub a { padding: 8px 14px; background: color-mix(in srgb, var(--c) 14%, var(--bg)); border-radius: var(--radius); font-size: 14px; }
  .menu > li > * { transform: translateY(24px); opacity: 0; transition: transform 500ms var(--slow), opacity 300ms ease; }
  .nav nav.open .menu > li > * { transform: none; opacity: 1; transition-delay: calc(var(--n) * 60ms + 200ms); }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-actions .btn { min-height: 52px; }
}

/* ---------- 버튼: 색만 바뀌고 화살표가 살짝 나간다 ---------- */
.btn { border-radius: var(--radius); font-weight: 700; transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 160ms var(--ease-out); }
.btn i { font-size: 18px; transition: transform 400ms var(--slow); }
.btn-primary { background: var(--orange); color: #fff; text-shadow: 0 1px 1px rgba(154, 82, 0, .35); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1); }
.btn-ghost { border: 2px solid var(--text); color: var(--text); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover i { transform: translate(3px, -3px); }
  .btn-primary:hover { background: var(--orange); color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1); } /* 빛나는 효과 없음, 화살표 움직임만 */
  .btn-ghost:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
}

/* ---------- 등장 효과 (한 번만) ---------- */
/* 공통 .rise(1.9s)를 모션 3-4단계에 맞게 짧고 가깝게 */
.js .rise { transform: translate3d(0, 28px, 0); transition-duration: 1s; }
.js .rise.is-in { transform: none; }
.js .rise-img { clip-path: inset(18% 0 0 0 round var(--r)); transition: clip-path 1.6s var(--slow); transition-delay: calc(var(--d, 0) * 150ms); }
.js .rise-img.is-in { clip-path: inset(0 0 0 0 round var(--r)); }
/* 목록 순차 등장 */
.js [data-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--slow), transform 700ms var(--slow); transition-delay: calc(var(--k, 0) * 60ms + 100ms); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
/* 핵심 단어 색 */
.hl { color: var(--cd, var(--orange-d)); }

/* ---------- 공통 섹션 ---------- */
.h2 { font-size: clamp(34px, 4.4vw, 56px); }
.sec-head { margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head p { margin-top: 14px; font-size: clamp(17px, 1.4vw, 19px); color: var(--muted); }
.label { display: inline-block; margin-bottom: 14px; font-family: var(--font-en); font-weight: 700; font-size: 17px; color: var(--cd, var(--orange-d)); }

/* ---------- 홈: 히어로 ---------- */
.hero { padding: clamp(32px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
.hero-in { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(24px, 4vw, 64px); min-height: min(calc(100dvh - var(--nav-h) - 80px), 700px); }
.hero h1 { font-size: clamp(46px, 6.6vw, 92px); line-height: 1.12; }
.yori .y1 { color: var(--orange); }
.yori .y2 { color: var(--teal); }
.yori .y3 { color: var(--green); }
.hero-copy p { margin-top: 24px; font-size: clamp(18px, 1.6vw, 22px); color: var(--muted); line-height: 1.55; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-art { position: relative; aspect-ratio: 1 / .92; }
.hero-art .blob { position: absolute; inset: 4% 2% 0 6%; border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; background: var(--surface); box-shadow: inset 0 -18px 40px rgba(241, 147, 23, .12); }
.hero-art .main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; --r: 40px; }
.buddy { position: absolute; pointer-events: none; }
.buddy img { width: 100%; height: auto; }
.hero-art .buddy { left: -2%; bottom: -4%; width: clamp(96px, 12vw, 150px); }

.hero + .section { padding-top: clamp(24px, 4vw, 48px); }

/* ---------- 홈 메인 배너 (의뢰자 시안: 연산이 바뀌면 수학이 달라집니다) ---------- */
.hero.banner { position: relative; overflow: hidden; isolation: isolate; background: #FFFAF1; }
.hero.banner::before { content: ""; position: absolute; z-index: -1; right: -9vw; top: -16vw; width: 34vw; aspect-ratio: 1; border-radius: 50%; background: #FFEDB0; }
.hero.banner::after { content: ""; position: absolute; z-index: -1; left: -12vw; bottom: -14vw; width: 72vw; aspect-ratio: 2.4; border-radius: 50%; background: #FCEEE9; }
.banner .hero-in { grid-template-columns: .95fr 1.05fr; gap: clamp(16px, 3vw, 48px); }
.banner h1 { font-size: clamp(42px, 5.3vw, 82px); line-height: 1.2; color: #232120; -webkit-text-stroke: .14em #fff; paint-order: stroke fill; text-shadow: 0 10px 24px rgba(150, 100, 40, .14); }
.banner .hl-o { color: #F58A0B; }
.banner .spark svg { position: static; display: inline-block; width: .5em; margin-left: .12em; vertical-align: .1em; fill: none; stroke: #F5A623; stroke-width: 6; stroke-linecap: round; }
.banner .hero-copy p { margin-top: 26px; color: var(--text); font-size: clamp(17px, 1.55vw, 23px); line-height: 1.6; }
.banner .hl-g { color: #45A020; font-weight: 800; }
.points { display: flex; gap: clamp(14px, 2.6vw, 40px); margin-top: 34px; list-style: none; padding: 0; }
.points li { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: clamp(14px, 1.25vw, 18px); font-weight: 700; white-space: nowrap; }
.points .pt { display: grid; place-items: center; width: clamp(60px, 6vw, 88px); aspect-ratio: 1; border-radius: 50%; background: var(--pc); color: #fff; font-size: clamp(28px, 2.8vw, 42px); }
.btn.level { display: flex; width: min(100%, 560px); min-height: clamp(60px, 5.4vw, 78px); margin-top: 36px; background: linear-gradient(180deg, #F57A12, #E2600A); color: #fff; font-size: clamp(19px, 1.9vw, 28px); font-weight: 800; letter-spacing: -.01em; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn.level:hover { background: linear-gradient(180deg, #E8690A, #CC5407); color: #fff; } }
.banner .hero-art { aspect-ratio: auto; }
.banner .hero-art .main { position: relative; inset: auto; width: 112%; max-width: none; height: auto; margin-left: -4%; }
.banner .eq, .banner .sym { position: absolute; font-family: var(--font-en); font-weight: 700; line-height: 1; white-space: nowrap; pointer-events: none; }
.banner .eq { font-size: clamp(24px, 2.6vw, 42px); }
.banner .e1 { left: 0; top: 6%; color: #6CB43F; rotate: -16deg; }
.banner .e2 { right: 2%; top: 12%; color: #F58A0B; }
.banner .e3 { right: -1%; top: 38%; color: #119E9A; }
.banner .sym { font-size: clamp(34px, 3.6vw, 58px); }
.banner .s1 { left: 6%; top: 38%; color: #8C7DCE; }
.banner .s2 { right: 17%; top: 52%; color: #F5C21C; }
.banner .s3 { right: 14%; top: -4%; color: #6CB43F; }

/* 단계별 프로그램: 계단처럼 올라가는 카드 + 위의 점선 */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); list-style: none; padding: 28px 0 0; }
.steps > li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
.steps::before { content: ""; position: absolute; left: 2%; right: 2%; top: 8px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--line) 0 14px, transparent 14px 24px); }
.step { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: var(--h); padding: 30px 30px 26px; border-radius: var(--r); background: color-mix(in srgb, var(--c) 16%, var(--card)); box-shadow: var(--shadow); overflow: hidden; isolation: isolate; transition: transform 300ms var(--slow); }
.steps > li:nth-child(1) .step { --h: 280px; }
.steps > li:nth-child(2) .step { --h: 340px; }
.steps > li:nth-child(3) .step { --h: 400px; }
.step-dot { position: absolute; left: 30px; top: -30px; width: 24px; height: 24px; border-radius: 50%; background: var(--c); border: 5px solid var(--bg); }
.step h3 { font-size: clamp(26px, 2.4vw, 34px); color: var(--text); }
.step h3 small { display: block; margin-bottom: 6px; font-family: var(--font-en); font-size: 16px; font-weight: 700; color: var(--cd); }
.step .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cd); }
.step .go .arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: var(--text); font-size: 20px; transition: transform 400ms var(--slow); }
.step .ball { position: absolute; right: -18px; bottom: -18px; z-index: -1; --s: clamp(120px, 12vw, 170px); opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .step:hover { transform: translateY(-6px); }
  .step:hover .go .arrow { transform: rotate(45deg); }
}

/* 둘러보기 타일 */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(260px, auto)); gap: clamp(14px, 1.6vw, 22px); }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 2.4vw, 34px); border-radius: var(--r); background: color-mix(in srgb, var(--c) 15%, var(--card)); overflow: hidden; isolation: isolate; box-shadow: var(--shadow); }
.tile:nth-child(1) { grid-column: 1 / 3; }
.tile:nth-child(2) { grid-column: 3; grid-row: 1 / 3; }
.tile h3 { font-size: clamp(28px, 2.6vw, 38px); }
.tile h3 small { display: block; margin-bottom: 4px; font-family: var(--font-en); font-size: 16px; font-weight: 700; color: var(--cd); }
.tile p { margin-top: 8px; color: var(--muted); font-size: 16px; }
/* 타일 그림: 회사소개는 원형 일러스트(흰 바탕이라 곱하기 합성), 나머지는 투명 배경 캐릭터 */
.tile img { position: absolute; z-index: -1; height: auto; transition: transform 1.2s var(--slow); }
.tile:nth-child(1) img { width: 46%; right: 3%; bottom: -4%; }
.tile:nth-child(2) img { width: 68%; right: 6%; bottom: 13%; }
.tile:nth-child(3) img { width: 35%; right: 6%; bottom: 5%; }
.tile:nth-child(4) img { width: 52%; right: 5%; bottom: 5%; }
.tile .arrow { align-self: flex-start; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--card); color: var(--text); font-size: 22px; box-shadow: 0 0 0 2px var(--c) inset; transition: transform 400ms var(--slow), background-color 300ms ease; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover img { transform: scale(1.05) translate(-2%, -2%); }
  .tile:hover .arrow { transform: rotate(45deg); background: var(--c); }
}

/* 무료체험 · 고객센터 */
/* 홈 맨 아래 상담 안내: 주황 상자 안에 제목 한 줄 + 연락 카드 3개 가로 */
.call { padding: clamp(24px, 3vw, 40px) clamp(22px, 3.4vw, 48px) clamp(26px, 3.2vw, 44px); border-radius: calc(var(--r) + 8px); background: var(--orange); }
.call-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(18px, 2vw, 26px); }
.call-title { display: flex; align-items: center; gap: 12px; font-size: clamp(26px, 2.6vw, 34px); }
.call-title img { width: clamp(44px, 4vw, 56px); height: auto; }
.call-head p { color: color-mix(in srgb, var(--text) 82%, var(--orange)); font-weight: 500; }
.call-row { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.call .channel { height: 100%; padding: 16px 20px; border: 1.5px solid transparent; border-radius: 22px; transition: border-color 300ms ease, transform 300ms var(--slow); }
.call .channel .ic { width: 46px; height: 46px; font-size: 21px; background: color-mix(in srgb, var(--c) 16%, var(--card)); color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.call .channel .v { font-size: clamp(17px, 1.4vw, 19px); }
.call .channel .v.en { font-size: clamp(20px, 1.8vw, 24px); }
@media (hover: hover) and (pointer: fine) {
  .call a.channel:hover { background: var(--card); border-color: var(--c); transform: translateY(-3px); }
}
.channels { list-style: none; padding: 0; display: grid; gap: 10px; }
.channel { position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 22px; background: var(--card); transition: background-color 300ms ease; }
.channel .ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); font-size: 24px; }
.channel .k { display: block; font-size: 14px; font-weight: 600; color: var(--muted); }
.channel .v { display: block; font-size: clamp(18px, 1.7vw, 22px); font-weight: 800; }
.channel .v.en { font-family: var(--font-en); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); }
.channel > i { font-size: 22px; transition: transform 400ms var(--slow); }
@media (hover: hover) and (pointer: fine) {
  a.channel:hover { background: #FFF6E8; }
  a.channel:hover > i { transform: translate(3px, -3px); }
}

/* ---------- 서브 페이지 머리 ---------- */
.page-head { position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(24px, 3vw, 40px); }
.page-head-in { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: clamp(20px, 3vw, 48px); }
.page-head h1 { font-size: clamp(52px, 7.6vw, 104px); line-height: 1.05; }
.page-head .label { font-size: clamp(17px, 1.5vw, 20px); }
.page-head p { margin-top: 22px; font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); }
.page-art { position: relative; aspect-ratio: 16 / 11; }
/* 뒤 원: 지름 66%, 중심은 오른쪽에서 41%·아래에서 그림 높이의 52% */
.page-art::before { content: ""; position: absolute; right: 8%; top: 0; width: 66%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--c) 22%, var(--bg)); }
.page-art img { position: relative; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 78% 76% at 58% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 78% 76% at 58% 50%, #000 70%, transparent 100%); }

/* 동그란 일러스트 (회사소개): 원이 그림에 이미 있어서 뒤 원과 가장자리 흐림을 뺀다 */
.page-art.round { aspect-ratio: 1000 / 1024; width: min(100%, 480px); justify-self: end; }
.page-art.round::before { display: none; }
.page-art.round img { object-fit: contain; -webkit-mask-image: none; mask-image: none; --r: 0px; }

/* 캐릭터 머리 그림 (프로그램·현장스케치·전국지사·FAQ): 페이지 색 원 위에 1~2마리 */
/* 배너용 .page-art img 규칙(곱하기 합성·가장자리 흐림)을 끄고, 원 뒤·캐릭터 앞으로 쌓는다 */
.page-art.chars::before { z-index: 0; }
.page-art.chars .ch { position: absolute; z-index: 1; bottom: 4%; height: auto; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
.page-art.chars.n2 .ch1 { right: 38%; width: 36%; bottom: 6%; }
.page-art.chars.n2 .ch2 { right: 10%; width: 32%; z-index: 2; }
.page-art.chars.n1 .ch1 { right: 14%; width: 44%; }
/* 사물 그림 옆 캐릭터: 원 왼쪽 아래 가장자리에 걸쳐 앉아 빈 곳을 채운다 */
.page-art.chars.obj .ch2 { left: 13%; bottom: -3%; width: 27%; z-index: 2; }
.page-art.chars.obj .ch2.seal { width: 31%; left: 10%; }
/* 사물 그림: 뒤 원 안에 들어가게 가운데 맞춤 */
.page-art.chars.obj .ch.ob-house { width: 59%; right: 11.5%; bottom: 27%; }
.page-art.chars.obj .ch.ob-note { width: 56%; right: 13%; bottom: 21%; }
.page-art.chars.obj .ch.ob-map { width: 43%; right: 19.5%; bottom: 13.2%; }
.page-art.chars.obj .ch.ob-faq { width: 45.5%; right: 18.25%; bottom: 12.6%; }

/* 하위 메뉴 탭 (스크롤해도 따라온다) */
.tabs { position: sticky; top: var(--nav-h); z-index: 40; padding: 12px 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tabs ul { display: flex; gap: 8px; list-style: none; padding: 0; overflow-x: auto; scrollbar-width: none; }
.tabs a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--card); font-weight: 700; white-space: nowrap; transition: background-color 300ms ease, border-color 300ms ease; }
.tabs a[aria-current="true"] { border-color: var(--c); background: var(--c); color: #fff; }
@media (hover: hover) and (pointer: fine) { .tabs a:hover { border-color: var(--c); } }
/* 따라오는 하위 탭: 첫 화면의 탭이 위로 사라지면 메뉴 바로 아래에 내려옴 (회사소개) */
.tabs.tabs-float { position: fixed; left: 0; right: 0; top: var(--nav-h); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 450ms var(--slow), opacity 300ms ease, visibility 0s 450ms; }
.tabs.tabs-float.is-on { transform: none; opacity: 1; visibility: visible; transition: transform 450ms var(--slow), opacity 300ms ease, visibility 0s; }
/* 탭으로 이동하면 구역 첫 줄이 따라오는 탭(70px) 바로 아래 오도록 (위 여백만큼 빼 줌) */
main:has(> .tabs-float) .block { scroll-margin-top: calc(86px - clamp(56px, 7vw, 96px)); }

/* 내용 자리 (시안 확정 후 채움) */
.block { padding: clamp(56px, 7vw, 96px) 0 0; scroll-margin-top: calc(var(--nav-h) + 80px); }
.block .h2 { margin-bottom: 28px; }
.empty { position: relative; display: grid; justify-items: center; align-content: center; gap: 14px; min-height: clamp(280px, 30vw, 380px); padding: 48px 24px; text-align: center; border: 2.5px dashed color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: var(--r); background: color-mix(in srgb, var(--c) 5%, var(--card)); }
.empty img { width: 104px; height: auto; }
.empty h3 { font-size: 26px; }
.empty p { color: var(--muted); }

/* ---------- 프로그램 페이지 (의뢰자 시안 7장 순서) ---------- */
.pg { --yel: #FFB31A; --yel-soft: #FFEDC2; --ink: #232120; overflow-x: clip;
  /* 배너·카드 공통 색. 글자 강조(--gold), 빛번짐(--glow), 모서리 원(--dotbg), 알약(--pill), 띠(--band), 단계 칩(--c1~3) */
  /* 홈페이지 색 맞춤(로고 주황 + 살구빛). 의뢰자 시안 색으로 되돌리려면:
     --gold: #EEAC3A; --glow: #FBEFC2; --dotbg: #F9EDC8; --pill: #FBEFD0; --band: #FAEFDD; --c1: #EBA537; --c2: #76B443; --c3: #4A9AAA; */
  --gold: #EC8A12; --glow: #FFE6C4; --dotbg: #FFE9CD; --pill: #FFE9CF; --band: #FFF0DC;
  --c1: #F19317; --c2: #83C034; --c3: #00A5B8; }
.pg .y { color: var(--yel); }
.pg .o { color: #F57C14; }
.pg .emph { text-emphasis: filled dot var(--yel); -webkit-text-emphasis: filled dot var(--yel); text-emphasis-position: over right; -webkit-text-emphasis-position: over right; }
.pg-sec { position: relative; padding: clamp(72px, 9vw, 130px) 0; }
.pg-h { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.28; color: var(--ink); }
.pg .swoosh { display: block; width: min(300px, 60%); height: 14px; margin: 14px 0 0; fill: none; stroke: #FFC94D; stroke-width: 4; stroke-linecap: round; }
.pg .swoosh.wide { width: min(600px, 90%); margin-inline: auto; }
.pg .deco { position: absolute; font-family: var(--font-en); font-weight: 700; line-height: 1; pointer-events: none; font-size: clamp(34px, 3.4vw, 54px); }
.pg-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.pg-art { position: relative; }
.pg-art img { position: relative; width: 100%; height: auto; }
.pg .arc { position: absolute; z-index: 0; right: -18%; top: 4%; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--yel-soft) 0 62%, rgba(255, 237, 194, 0) 72%); }

/* 배너 규격 (히어로·왜 실력은·어떻게 수업하나요 공통)
   의뢰자 시안 1852×849를 --u(=1vw, 최대 12.8px) 단위로 옮김. 글자 크기는 아래 4단계만 쓴다
   큰 제목 4.1u · 중간 제목 2.7u · 머리글/목록 1.75u · 설명 1.62u (Pretendard) */
.bn { --u: min(1vw, 12.8px); position: relative; overflow: clip; font-family: "Pretendard", system-ui, sans-serif; color: #232120; }
.bn .g { color: var(--gold); }
.bn .gr { color: var(--green); } /* 요리수 로고 초록 */
.bn-stage { position: relative; width: calc(var(--u) * 100); height: calc(var(--u) * 45.85); margin: 0 auto; }
/* 사진 뒤 흐린 원: 지름 44u, 사진 가운데(--gx)에 맞춤. 가장자리에서 완전히 투명해져서 잘린 선이 생기지 않는다 */
.bn-glow { position: absolute; left: calc(var(--gx, 75) * var(--u) - var(--u) * 22); top: calc(var(--u) * .9); width: calc(var(--u) * 44); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--glow) 0%, color-mix(in srgb, var(--glow) 75%, transparent) 40%, color-mix(in srgb, var(--glow) 0%, transparent) 100%); }
.pg-hero2 { --gx: 77.9; }
/* 프로그램 첫 화면 왼쪽 (의뢰자 시안 2026-10-12): 작은 제목 → 큰 제목 → 설명 2단 → 학년 버튼 3개 */
.pg-hero2 .bn-copy { top: calc(var(--u) * 4.4); }
.ph-eyebrow { font-size: calc(var(--u) * 1.75); font-weight: 700; letter-spacing: -.02em; color: var(--orange); }
.pg-hero2 .bn-h { margin-top: calc(var(--u) * 1.1); font-size: calc(var(--u) * 3.9); line-height: 1.25; }
.ph-lead { margin-top: calc(var(--u) * 1.8); font-size: calc(var(--u) * 2.15); font-weight: 600; line-height: 1.55; letter-spacing: -.025em; color: #2F2B26; }
.ph-lead .g { color: var(--green); } /* 요리수 로고 초록 */
.pg-hero2 .bn-sub { margin-top: calc(var(--u) * 1.4); font-size: max(16px, calc(var(--u) * 1.7)); color: #5A534A; }
.ph-pick { margin-top: calc(var(--u) * 2.6); font-size: max(14px, calc(var(--u) * 1.3)); font-weight: 600; letter-spacing: -.02em; color: #2F2B26; }
.ph-grades { display: flex; gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * 1); }
.ph-grade { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: calc(var(--u) * 12.8); min-height: max(48px, calc(var(--u) * 4.2)); padding: 0 calc(var(--u) * 1.6); border: 1.5px solid color-mix(in srgb, var(--c) 45%, #fff); border-radius: 14px; background: color-mix(in srgb, var(--c) 9%, #fff); color: var(--cd); font-weight: 700; font-size: max(15px, calc(var(--u) * 1.4)); letter-spacing: -.02em; white-space: nowrap; transition: border-color 250ms ease, background-color 250ms ease, transform 160ms var(--slow); }
.ph-grade i { font-size: 1em; transition: transform 300ms var(--slow); }
.ph-grade:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ph-grade:hover { border-color: var(--c); } .ph-grade:hover i { transform: translateX(3px); } }
.pg-why2 { --gx: 71.1; }
.pg-class { --gx: 74; }
.pg-start2 { --gx: 76; }
.bn-copy { position: absolute; z-index: 2; left: calc(var(--u) * 7); top: calc(var(--u) * 6.4); }
.bn-lead { font-size: calc(var(--u) * 1.75); font-weight: 600; line-height: 1.6; letter-spacing: -.02em; }
.bn-h { margin-top: calc(var(--u) * 3); font-family: inherit; font-size: calc(var(--u) * 4.1); font-weight: 800; line-height: 1.3; letter-spacing: -.035em; color: #232120; }
.bn-h2 { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 2.7); font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
.bn-sub { margin-top: calc(var(--u) * 2.6); font-size: max(15px, calc(var(--u) * 1.62)); font-weight: 500; line-height: 1.72; letter-spacing: -.02em; color: #333; }
.bn-rule { display: block; width: calc(var(--u) * 26); height: 3px; margin-top: calc(var(--u) * 2); border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), var(--gold) 20%, var(--gold) 70%, color-mix(in srgb, var(--gold) 20%, transparent)); }
.bn-pill { display: inline-block; margin-top: calc(var(--u) * .9); padding: .28em .5em; border-radius: .4em; background: var(--pill); font-size: calc(var(--u) * 1.75); font-weight: 600; letter-spacing: -.02em; }
.bn-pill .r { color: #E8686A; }
.bn-list { width: calc(var(--u) * 33); margin-top: calc(var(--u) * 2.2); padding: 0; list-style: none; }
.bn-list li { padding: calc(var(--u) * 1.2) 0; font-size: calc(var(--u) * 1.75); font-weight: 600; line-height: 1.85; letter-spacing: -.02em; }
.bn-list li + li { border-top: 1px dashed #E6D7AE; }
/* 어떻게 수업하나요? 설명 3줄: 조금 더 크게 (원래 1.75u, 옆 "학습의 양이 아니라"와 같았음) */
@media (min-width: 901px) {
  .pg-class .bn-list { margin-top: calc(var(--u) * .9); }
  .pg-class .bn-rule { margin-top: calc(var(--u) * 1.6); }
  .pg-class .bn-list { width: calc(var(--u) * 37); }
  .pg-class .bn-list li { padding: calc(var(--u) * .9) 0; font-size: calc(var(--u) * 2.7); font-weight: 800; line-height: 1.45; letter-spacing: -.03em; } /* "배우는 방법입니다."(.bn-h2)와 같은 크기 */
}
.bn-img { position: absolute; z-index: 1; height: auto; }
/* 떠 있는 연산 기호 (히어로·왜 실력은·모든 아이가): 굵은 둥근 선. 위치는 각 구역의 100u 판 기준 --x, --y */
.sy { position: absolute; z-index: 0; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--s, 2.6) * var(--u)); height: auto; fill: none; stroke: var(--sc); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; rotate: var(--r, 0deg); pointer-events: none; }
.sy circle { fill: var(--sc); stroke: none; }
.sy.pk { --sc: #E8707A; } .sy.gr { --sc: #7DBE4B; } .sy.pu { --sc: #9B80DA; } .sy.bl { --sc: #6FA2EE; } .sy.ye { --sc: #EDB45A; }
.sy.at-b { top: auto; bottom: calc(var(--b) * var(--u)); }
.gd-stage { position: relative; }
/* 히어로와 '왜 실력은' 사이 간격 */
.pg-why2 { margin-top: calc(var(--u) * 14); }
.pg-why2 .bn-copy { top: calc(var(--u) * 8); }
.pg-why2 .bn-h { margin-top: calc(var(--u) * 2.4); }
.why-mid2 { margin-top: calc(var(--u) * 2.4); }
/* "학습의 양이 아니라 / 배우는 방법입니다." 두 줄을 같은 크기로 (주황 블럭 없이 핵심어만 주황) */
.pg-why2 .why-q { margin-top: calc(var(--u) * .8); }
.pg-why2 .why-q .g { color: var(--teal); } /* 요리수 로고 파랑(청록) */
.pg-why2 .why-a { margin-top: calc(var(--u) * .2); }
.pg-class .bn-copy { top: calc(var(--u) * 4.6); }
.pg-class .bn-h { margin-top: 0; }
.img-smile { left: calc(var(--u) * 54.8); top: calc(var(--u) * 7); width: calc(var(--u) * 46.1); }
.img-think { left: calc(var(--u) * 53.9); top: calc(var(--u) * 4.3); width: calc(var(--u) * 34.4); }
.img-kit { left: calc(var(--u) * 54); top: calc(var(--u) * 16.5); width: calc(var(--u) * 40); }
.img-kit > img:first-child { display: block; width: 100%; height: auto; }
.pg-class .bn-glow { display: none; } /* 교구 사진 뒤 주황 번짐 없음 */
/* 교구 상자 위에 올라선 고슴도치 (숫자 카드 3) */
.kit-hh { position: absolute; left: 61%; bottom: 96.5%; width: 22%; height: auto; filter: drop-shadow(0 6px 8px rgba(120, 80, 30, .18)); } /* 사진 밑을 "수학 자신감을 키웁니다." 글자 밑선에 맞춤 */

/* 3. 좋은 연산 교육 — 의뢰자 시안(1852×849): 2×2 흰 카드 + 말풍선 번호 + 3D 아이콘 */
.pg-good2 { --u: min(1vw, 12.8px); padding: calc(var(--u) * 9) 0 calc(var(--u) * 7); }
.gd-stage { width: calc(var(--u) * 100); margin: 0 auto; padding: 0 calc(var(--u) * 2.7); }
.gd-h { margin-left: calc(var(--u) * 1.9); font-size: calc(var(--u) * 4.3); line-height: 1.3; color: var(--ink); }
.gd-h .y { font-size: 1.2em; }
.pg-good2 .swoosh { width: calc(var(--u) * 14); margin: calc(var(--u) * .4) 0 0 calc(var(--u) * .8); }
.gd-list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.9) calc(var(--u) * 2.7); margin-top: calc(var(--u) * 4.4); list-style: none; padding: 0; }
.gd-list li { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(var(--u) * 1.7); min-height: calc(var(--u) * 12.4); padding: calc(var(--u) * 1.8) calc(var(--u) * 18.5) calc(var(--u) * 1.8) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.4); background: #fff; box-shadow: 0 2px 0 rgba(160, 120, 60, .05), 0 calc(var(--u) * 1.6) calc(var(--u) * 3.4) calc(var(--u) * -2) rgba(150, 100, 30, .3); }
.gd-list .badge { position: relative; display: grid; place-items: center; width: calc(var(--u) * 5.1); aspect-ratio: 1; border-radius: 50%; background: var(--gc); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 1.75); }
.gd-list .badge::after { content: ""; position: absolute; right: 8%; bottom: 2%; width: 22%; height: 22%; background: var(--gc); clip-path: polygon(0 0, 100% 100%, 20% 100%); }
.gd-list h3 { font-family: "Pretendard", system-ui, sans-serif; font-weight: 800; font-size: calc(var(--u) * 2.05); letter-spacing: -.03em; line-height: 1.25; color: var(--ink); }
.gd-list h3 .k { font-family: var(--font-display); font-weight: 800; font-size: 1.5em; letter-spacing: 0; color: var(--gc); }
.gd-list p { margin-top: calc(var(--u) * .8); font-family: "Pretendard", system-ui, sans-serif; font-size: max(14px, calc(var(--u) * 1.3)); font-weight: 600; line-height: 1.55; letter-spacing: -.02em; color: #2F2B26; } /* 첫 화면 "우리 아이에게 맞는 프로그램을 만나보세요"와 같은 글꼴·크기 */
.gd-list p .c { color: var(--gc); }
.gd-list .art { position: absolute; right: calc(var(--u) * 1.2); top: 50%; width: calc(var(--u) * 17); aspect-ratio: 1.45; translate: 0 -50%; }
.gd-list .art::before { content: ""; position: absolute; inset: 4% 10%; border-radius: 50%; background: radial-gradient(closest-side, var(--gb) 72%, transparent); }
.gd-list .art img { position: absolute; inset: 4% 5%; width: 90%; height: 92%; object-fit: contain; }


/* 5. 5단계 성장 시스템 — 의뢰자 시안(1852×849): 카드 5장 가로. 크기 단위 --u는 배너와 같다 */
.st { --u: min(1vw, 12.8px); position: relative; padding: calc(var(--u) * 7) 0 calc(var(--u) * 6); overflow: clip; text-align: center; font-family: "Pretendard", system-ui, sans-serif; color: #232120; }
.st .g { color: var(--gold); }
.st-stage { position: relative; width: calc(var(--u) * 100); margin: 0 auto; padding: 0 calc(var(--u) * 3); }
.st-eyebrow { font-size: calc(var(--u) * 1.35); font-weight: 800; letter-spacing: .14em; color: #E3A23C; }
.st-h { margin-top: calc(var(--u) * .5); font-family: inherit; font-size: calc(var(--u) * 4.1); font-weight: 800; line-height: 1.3; letter-spacing: -.035em; color: #232120; }
.st-desc { margin-top: calc(var(--u) * 1.3); font-size: max(15px, calc(var(--u) * 1.45)); font-weight: 500; line-height: 1.65; color: #333; }
.st-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1.3); margin-top: calc(var(--u) * 2.8); padding: 0; list-style: none; text-align: left; }
.st-list li { position: relative; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.1) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 1.4); background: #fff; box-shadow: 0 2px 0 rgba(160, 120, 60, .04), 0 calc(var(--u) * 1.6) calc(var(--u) * 3.4) calc(var(--u) * -2) rgba(150, 100, 30, .28); }
.st-list li + li::before { content: "›"; position: absolute; left: calc(var(--u) * -.65); top: 55%; translate: -50% -50%; font-size: calc(var(--u) * 1.7); line-height: 1; color: #D6AE68; }
.st-list .num { display: grid; place-items: center; width: calc(var(--u) * 2.7); aspect-ratio: 1; border-radius: 50%; background: var(--sc); color: #fff; font-family: var(--font-en); font-weight: 700; font-size: calc(var(--u) * 1.5); }
.st-list .art { position: relative; height: calc(var(--u) * 8.2); margin-top: calc(var(--u) * .3); }
.st-list .art::before { content: ""; position: absolute; inset: 6% 16%; border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; background: var(--sb); }
.st-list .art img { position: absolute; inset: 6% 22%; width: 56%; height: 88%; object-fit: contain; }
.st-list h3 { margin-top: calc(var(--u) * 1.6); font-family: inherit; font-size: calc(var(--u) * 1.75); font-weight: 800; line-height: 1.35; letter-spacing: .01em; color: #232120; }
.st-list h3 .k { font-size: 1.45em; letter-spacing: .03em; color: var(--sc); } /* 핵심 단어만 크게 (회사소개 "즐거워야 합니다"와 같은 방식) */
.st-list p { margin-top: calc(var(--u) * .9); font-size: max(15px, calc(var(--u) * 1.5)); font-weight: 500; line-height: 1.6; letter-spacing: -.025em; color: #333; word-break: keep-all; text-wrap: pretty; } /* 제목을 한 줄로 줄인 만큼 설명 글씨를 키움 */
@media (min-width: 901px) {
  .st-list h3 { font-size: calc(var(--u) * 1.7); line-height: 1.3; white-space: nowrap; }
  /* 다섯 카드의 번호·그림·제목·설명 줄을 같은 높이로 맞춘다 (5단계 제목만 두 줄) */
  .st-list { grid-template-rows: auto auto auto 1fr; row-gap: 0; }
  .st-list li { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  .st-list h3 { align-self: start; }
}

/* 6. 모든 아이가 같은 방법으로 — 의뢰자 시안(1852×849): 가운데 정렬 + 모서리 점무늬 원 */
.df { --u: min(1vw, 12.8px); position: relative; overflow: clip; text-align: center; font-family: "Pretendard", system-ui, sans-serif; color: #232120; }
.df .g { color: var(--gold); }
.df-stage { position: relative; width: calc(var(--u) * 100); margin: 0 auto; padding: calc(var(--u) * 8.5) 0 calc(var(--u) * 7.5); }
/* 양옆 고슴도치: 왼쪽 위는 고민하는 아이, 오른쪽 아래는 책으로 배우는 아이 (같은 방법이 아니어도 된다는 이야기) */
.df-hh { position: absolute; width: calc(var(--u) * 12.5); height: auto; }
.df-hh.hh-l { left: calc(var(--u) * 11); top: calc(var(--u) * 9); }
.df-hh.hh-r { right: calc(var(--u) * 10); bottom: calc(var(--u) * 7); }
.df-h { position: relative; font-family: inherit; font-size: calc(var(--u) * 4.1); font-weight: 800; line-height: 1.55; letter-spacing: -.035em; color: #232120; }
.df-rule { position: relative; display: block; width: calc(var(--u) * 42); height: 3px; margin: calc(var(--u) * 2) auto 0; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 0%, transparent), var(--gold) 18%, var(--gold) 82%, color-mix(in srgb, var(--gold) 0%, transparent)); }
.df-sub { position: relative; margin-top: calc(var(--u) * 3.2); font-size: calc(var(--u) * 3); font-weight: 700; line-height: 1.6; letter-spacing: -.03em; } /* 제목(4.1u)과 예전 크기(2u)의 중간 */

/* 7. 어디서부터 시작하나요? — 배너 규격(.bn) + 단계 칩 3개 + 아래 띠 */
.pg-start2 .bn-copy { top: calc(var(--u) * 8.6); }
.pg-start2 .bn-h { margin-top: 0; }
.pg-start2 .bn-sub b { font-weight: 700; }
.sv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 3.2); padding: 0; list-style: none; }
.sv-chips li { position: relative; display: inline-flex; align-items: center; gap: calc(var(--u) * .6); padding: calc(var(--u) * .9) calc(var(--u) * 1.1); border-radius: calc(var(--u) * .8); border: 1px solid color-mix(in srgb, var(--cc) 30%, #fff); background: color-mix(in srgb, var(--cc) 12%, #fff); font-size: max(14px, calc(var(--u) * 1.15)); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.sv-chips li + li::before { content: "›"; position: absolute; left: calc(var(--u) * -1.1); top: 50%; translate: -50% -52%; font-size: calc(var(--u) * 1.3); font-weight: 400; color: #B9AC94; }
.sv-chips .n { display: inline-grid; place-items: center; width: max(20px, calc(var(--u) * 1.45)); aspect-ratio: 1; border-radius: 50%; background: var(--cc); color: #fff; font-family: var(--font-en); font-size: .85em; font-weight: 700; }
.img-test { left: calc(var(--u) * 61); top: calc(var(--u) * 2.4); width: calc(var(--u) * 30); }
.sv-band { position: absolute; z-index: 2; left: calc(var(--u) * 6.2); right: calc(var(--u) * 6.2); top: calc(var(--u) * 35.4); padding: calc(var(--u) * 1.5) 0 calc(var(--u) * 1.7); text-align: center; background: linear-gradient(90deg, color-mix(in srgb, var(--band) 0%, transparent), var(--band) 16%, var(--band) 84%, color-mix(in srgb, var(--band) 0%, transparent)); }
.sv-band .k { font-size: max(14px, calc(var(--u) * 1.4)); font-weight: 500; color: #6F675C; }
.sv-band .v { margin-top: calc(var(--u) * .5); font-size: calc(var(--u) * 2.2); font-weight: 800; letter-spacing: -.03em; }

.lv { scroll-margin-top: 0; } /* 메뉴 높이는 html의 scroll-padding이 이미 빼 준다 (겹치면 덜 내려옴) */
/* ── 유아~1학년 (리디자인): 소개 → STEP 01~03 → 마무리 ─────────── */
.kd { --c: var(--orange); --cd: var(--orange-d); }
.kd .o { color: var(--orange); }
.kd img { display: block; max-width: 100%; height: auto; }
.kd-h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1.15; }
.kd-h { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.3; }
.kd-lead { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(18px, 1.7vw, 24px); line-height: 1.7; color: var(--muted); }

/* 소개 */
.kd-hero { padding: clamp(80px, 10vw, 150px) 0 clamp(40px, 5vw, 70px); }
.kd-hero-in { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 80px); }
.kd-grade { display: inline-block; margin-bottom: 20px; padding: 8px 20px; border-radius: 99px; background: var(--orange); color: #fff; font-weight: 800; font-size: clamp(15px, 1.3vw, 18px); } /* 초등 2~3학년 배지(.lo-badge)와 같은 모양 */
/* 시안처럼 제목 한 줄 */
.kd-hero .kd-h1 { font-size: clamp(36px, 4.4vw, 62px); white-space: nowrap; }
.kd-points { display: grid; gap: 14px; margin-top: clamp(28px, 3vw, 40px); padding: 0; list-style: none; }
.kd-points li { display: grid; grid-template-columns: clamp(64px, 6vw, 84px) 1fr; align-items: center; gap: clamp(14px, 1.8vw, 24px); padding: clamp(14px, 1.4vw, 18px) clamp(18px, 2vw, 28px); border: 2px solid color-mix(in srgb, var(--c) 45%, #fff); border-radius: 22px; background: #fff; }
.kd-points img { width: 100%; height: clamp(54px, 5vw, 70px); object-fit: contain; }
.kd-points b { display: block; font-size: clamp(19px, 1.7vw, 24px); font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.kd-points span { display: block; margin-top: 4px; font-size: clamp(15px, 1.25vw, 17px); color: #4A443C; }
.kd-hero-art { position: relative; }
.kd-hero-art::before { content: ""; position: absolute; inset: 12% 4% 3%; border-radius: 999px 999px 40px 40px; background: #FFEBD0; }
.kd-hero-art img { position: relative; width: 100%; }

/* STEP 공통: 그림 상자 + 글 */
.kd-step { padding: clamp(60px, 8vw, 120px) 0; scroll-margin-top: var(--nav-h); }
.kd-split { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(36px, 6vw, 96px); }
.kd-flip .kd-art { order: 2; }
.kd-art { position: relative; margin: 0; padding: clamp(48px, 5vw, 72px) clamp(16px, 2vw, 28px) 0; border-radius: 40px; background: color-mix(in srgb, var(--c) 13%, #fff); overflow: hidden; }
.kd-art img { width: 100%; }
.kd-no { position: absolute; left: clamp(22px, 2.6vw, 36px); top: clamp(10px, 1.4vw, 20px); font-family: var(--font-en); font-weight: 700; font-size: clamp(64px, 7vw, 110px); line-height: 1; color: #fff; }
.kd-eye { display: inline-block; margin-bottom: 14px; padding: 8px 20px; border-radius: 99px; background: var(--c); color: #fff; font-weight: 800; font-size: clamp(15px, 1.3vw, 18px); } /* STEP 배지: .lo-badge와 같은 모양, 색은 단계 색 */
.kd-keys { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3vw, 38px); padding: 0; list-style: none; }
.kd-keys li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; background: color-mix(in srgb, var(--c) 12%, #fff); font-weight: 700; font-size: 16px; color: var(--text); }
.kd-keys i { font-size: 20px; color: var(--cd); }

/* 카드 말풍선 */
.kd-say { position: absolute; right: clamp(18px, 3vw, 40px); top: clamp(20px, 2.6vw, 36px); padding: 12px 20px; border-radius: 20px 20px 20px 4px; background: #fff; font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.7vw, 24px); color: var(--text); box-shadow: 0 14px 30px -18px rgba(0, 112, 128, .5); }
.kd-say b { font-weight: 800; color: var(--cd); }


/* 교재 · 인증 */
.kd-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(26px, 3vw, 38px); padding: 0; list-style: none; }
.kd-proof li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: color-mix(in srgb, var(--c) 10%, #fff); font-size: 15px; color: var(--muted); }
.kd-proof img { width: 58px; height: 52px; object-fit: contain; flex: none; }
.kd-proof b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text); }

/* 마무리 */
.kd-end { padding: clamp(40px, 6vw, 90px) 0 clamp(80px, 10vw, 140px); }
.kd-end-box { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(16px, 3vw, 40px); padding: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px) clamp(40px, 5vw, 72px) clamp(30px, 5vw, 80px); border-radius: 40px; background: linear-gradient(180deg, #FFF3E2 0%, #FCE7CC 100%); overflow: hidden; }
.kd-end-art { width: 100%; max-width: 760px; justify-self: end; } /* 교재·교구 전체 사진 (윗줄 카드는 잘라 냄) */
@media (min-width: 901px) { .kd-end-txt .kd-h { white-space: nowrap; } }
.kd-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 58px; margin-top: 30px; padding: 0 28px; font-size: 18px; }

@media (max-width: 900px) {
  .kd-hero-in, .kd-split, .kd-end-box { grid-template-columns: 1fr; }
  .kd-hero-art { order: 1; max-width: 460px; width: 100%; justify-self: center; }
  .kd-art, .kd-flip .kd-art { order: 1; } /* 휴대폰: 글 먼저, 사진 다음 */
  .kd-split, .kd-hero-in { row-gap: 0; }
  .kd-txt, .kd-hero-txt { display: contents; }
  .kd-keys, .kd-points, .kd-proof { order: 2; }
  .kd-art, .kd-hero-art { margin-top: 28px; }
  .kd-end-art { width: calc(100% + 28px); max-width: none; justify-self: center; margin: 12px -14px 0; }
}
@media (max-width: 560px) {
  .kd-proof { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .pg-split { grid-template-columns: 1fr; }
  .sv-chips { gap: 8px; margin-top: 22px; }
  .sv-chips li { padding: 9px 12px; border-radius: 10px; font-size: 14.5px; }
  .sv-chips li + li::before { display: none; }
  .img-test { width: min(84%, 420px); }
  .sv-band { position: relative; left: auto; right: auto; top: auto; margin: 0 calc(var(--gutter) * -1); padding: 22px var(--gutter) 26px; }
  .sv-band .k { font-size: 15px; }
  .sv-band .v { margin-top: 4px; font-size: clamp(20px, 5.6vw, 26px); }
  .st { padding: 72px 0 56px; }
  .st-stage, .df-stage { width: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
  .st-eyebrow { font-size: 15px; }
  .st-h, .df-h { font-size: clamp(30px, 8.4vw, 46px); }
  .st-desc { margin-top: 12px; }
  .st-list { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
  .st-list li { padding: 16px 16px 22px; border-radius: 20px; }
  .st-list li + li::before { display: none; }
  .st-list .num { width: 40px; font-size: 20px; }
  .st-list .art { height: 110px; }
  .st-list h3 { margin-top: 14px; font-size: 20px; }
  .st-list p { margin-top: 10px; font-size: 15.5px; }
  .df-stage { padding-top: 88px; padding-bottom: 88px; }
  .df-rule { width: 70%; margin-top: 20px; }
  .df-sub { margin-top: 28px; font-size: clamp(22px, 6.4vw, 34px); line-height: 1.6; }
  .df-sub br.pc { display: none; }
        .df-stage { padding-top: 120px; padding-bottom: 130px; }
  .df-hh { width: 84px; }
  .df-hh.hh-l { left: var(--gutter); top: 24px; }
  .df-hh.hh-r { right: var(--gutter); bottom: 22px; }
  .bn-stage { width: auto; height: auto; padding: 48px var(--gutter) 0; }
  .sy { display: none; } /* 휴대폰은 글자와 사진이 세로로 쌓여 빈 곳이 없어서 기호를 뺀다 */
  .bn-copy { position: relative; left: auto; top: auto !important; }
  .bn-lead, .bn-pill, .bn-list li { font-size: clamp(17px, 4.6vw, 21px); }
  .bn-h { margin-top: 14px; font-size: clamp(34px, 9.4vw, 48px); }
  .pg-class .bn-h { margin-top: 0; }
  .pg-class .bn-list li { font-size: clamp(24px, 6.6vw, 32px); font-weight: 800; line-height: 1.45; }
  .bn-h2 { margin-top: 10px; font-size: clamp(24px, 6.6vw, 32px); }
  .bn-sub { margin-top: 16px; font-size: 16px; }
  .ph-eyebrow { font-size: 16px; }
  .pg-hero2 .bn-h { margin-top: 8px; font-size: clamp(32px, 8.6vw, 44px); }
  .ph-lead { margin-top: 14px; font-size: clamp(19px, 5.2vw, 22px); }
  .pg-hero2 .bn-sub { margin-top: 10px; font-size: 16.5px; }
  .ph-pick { margin-top: 22px; }
  .ph-grades { flex-direction: column; gap: 8px; margin-top: 10px; }
  .ph-grade { justify-content: space-between; min-width: 0; padding: 0 20px; }
  /* 휴대폰: 아이 사진을 설명 다음, 학년 버튼 위로 */
  .pg-hero2 .bn-stage { display: flex; flex-direction: column; }
  .pg-hero2 .bn-copy { display: contents; }
  .pg-hero2 .bn-copy > * { position: relative; z-index: 2; } /* 묶음이 풀려도 뒤의 빛 번짐보다 위에 */
  .pg-hero2 .bn-img { order: 1; margin: 20px auto 0; }
  .pg-hero2 .ph-pick, .pg-hero2 .ph-grades { order: 2; }
  .pg-hero2 .ph-pick { margin-top: 20px; }
  .bn-rule { width: 62%; margin-top: 16px; }
  .why-mid2 { margin-top: 22px; }
  .pg-why2 { margin-top: 80px; }
  .bn-pill { margin-top: 8px; }
  .bn-list { width: 100%; margin-top: 18px; }
  .bn-list li { padding: 12px 0; }
  .bn-img { position: relative; left: auto !important; top: auto !important; display: block; margin: 24px auto 0; }
  .img-smile { width: min(100%, 560px); }
  .img-think { width: min(78%, 420px); }
  .img-kit { width: min(86%, 460px); margin-top: 84px !important; margin-bottom: 40px; } /* 위에 올라선 고슴도치 자리 */
  .bn-glow { left: 50%; top: auto; bottom: 0; width: min(100%, 520px); translate: -50% 0; }
    .pg-good2 { padding: 72px 0 56px; }
  .gd-stage { width: auto; padding: 0 var(--gutter); }
  .gd-h { margin-left: 0; font-size: clamp(32px, 8vw, 48px); }
  .pg-good2 .swoosh { width: min(240px, 60%); margin-left: 0; }
  .gd-list { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .gd-list li { column-gap: 16px; padding: 22px 20px; border-radius: 22px; min-height: 0; }
  .gd-list .badge { width: 64px; font-size: 18px; }
  .gd-list h3 { font-size: clamp(20px, 5.4vw, 26px); }
  .gd-list p { margin-top: 6px; }
  .gd-list .art { position: relative; right: auto; top: auto; translate: none; grid-column: 1 / -1; justify-self: center; width: min(66%, 260px); margin-top: 10px; }
  }
@media (max-width: 560px) {
  .st-list { grid-template-columns: 1fr; gap: 12px; }
  /* 휴대폰: 그림을 왼쪽, 제목·설명을 오른쪽에 두는 가로 카드 (세로로 길게 비는 곳 없이) */
  .st-list li { display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "art h3" "art p"; align-items: center; column-gap: 16px; padding: 18px 18px 18px 14px; }
  .st-list .num { position: absolute; left: 10px; top: 10px; z-index: 1; width: 30px; font-size: 16px; }
  .st-list .art { grid-area: art; height: 96px; margin: 0; }
  .st-list .art::before { inset: 4%; }
  .st-list .art img { inset: 10% 12%; width: 76%; height: 80%; }
  .st-list h3 { grid-area: h3; align-self: end; margin: 0; font-size: 19px; }
  .st-list p { grid-area: p; align-self: start; margin-top: 6px; font-size: 15px; line-height: 1.55; }
}

/* ---------- 회사소개 첫 화면 (의뢰자 시안: 문구 + 교재·교구 + 대표 사진) ---------- */
.ab-hero { position: relative; overflow: clip; padding: clamp(40px, 5vw, 72px) 0 0; background: linear-gradient(180deg, var(--bg) 0%, #FFF6E8 100%); }
.ab-sun { position: absolute; right: -6vw; top: -10vw; width: clamp(260px, 28vw, 440px); aspect-ratio: 1; border-radius: 50%; background: #FFE8C2; }
.ab-hero-in { position: relative; display: grid; grid-template-columns: 1fr minmax(240px, 30%); align-items: end; gap: clamp(16px, 3vw, 48px); }
.ab-hero-txt { align-self: center; padding-bottom: clamp(16px, 2vw, 28px); } /* 교구 사진 윗줄(카드)을 잘라 짧아진 만큼 글·사진 묶음을 가운데로 올림 */
.ab-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-tabs a { display: inline-flex; align-items: center; padding: 6px 22px; border-radius: 99px; border: 2px solid var(--line); background: var(--card); color: var(--text); font-weight: 800; font-size: clamp(15px, 1.3vw, 18px); transition: border-color 300ms ease, background-color 300ms ease; }
.ab-tabs a[aria-current="true"] { border-color: var(--orange); background: var(--orange); color: #fff; }
@media (hover: hover) and (pointer: fine) { .ab-tabs a:not([aria-current="true"]):hover { border-color: var(--orange); } }
.ab-badge { display: inline-block; padding: 8px 22px; border-radius: 99px; background: var(--orange); color: #fff; font-weight: 800; font-size: clamp(15px, 1.3vw, 18px); }
.ab-h1 { margin-top: clamp(16px, 1.8vw, 24px); font-size: clamp(32px, 4vw, 58px); line-height: 1.24; }
.ab-h1 .o { color: var(--orange); }
.ab-h1 .t { color: var(--teal-d); }
.ab-kit { display: block; width: min(100%, 640px); height: auto; margin-top: clamp(24px, 2.8vw, 40px); }
.ab-ceo { position: relative; margin: 0; justify-self: end; width: 100%; }
.ab-ceo img { display: block; width: 100%; height: auto; }
.ab-ceo figcaption { position: absolute; right: 100%; bottom: 12%; margin-right: clamp(4px, 1vw, 16px); display: grid; gap: 4px; font-size: clamp(22px, 2vw, 30px); font-weight: 800; text-align: right; white-space: nowrap; }
.ab-ceo figcaption small { font-size: 14px; font-weight: 600; color: var(--muted); }
@media (max-width: 1180px) {
  .ab-ceo figcaption { position: absolute; right: auto; left: 0; bottom: 6%; margin: 0; padding: 10px 16px; border-radius: 16px; background: rgba(255, 253, 248, .92); text-align: left; font-size: 22px; }
}
@media (max-width: 900px) {
  .ab-hero-in { grid-template-columns: 1fr; }
  .ab-ceo { justify-self: start; width: min(56%, 300px); margin-left: 6%; }
  .ab-ceo figcaption { position: absolute; left: auto; right: -42%; bottom: 18%; padding: 0; background: none; text-align: left; font-size: 22px; }
  .ab-hero-txt { padding-bottom: 32px; }
  .ab-sun { right: -30vw; top: -20vw; width: 70vw; }
}

/* ---------- 회사소개: 요리수 히스토리 · 검증된 콘텐츠 ---------- */
.hs-head { text-align: center; }
.hs-eyebrow { font-weight: 800; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .08em; color: var(--orange); }
.hs-h { margin-top: 12px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.25; }
.hs-h .o { color: var(--orange); }
.hs-h .t { color: var(--teal-d); }
.hs-sub { margin-top: clamp(14px, 1.6vw, 20px); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.75; color: var(--muted); }
.hs { padding-bottom: clamp(16px, 2vw, 24px); }
.hs .container { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); border-radius: calc(var(--r) + 12px); background: #FFF4E6; }
/* 연혁: 가운데 세로선, 연도 왼쪽 · 내용 오른쪽 */
.hs-line { position: relative; display: grid; gap: clamp(18px, 2vw, 26px); width: min(100%, 760px); margin: clamp(36px, 4vw, 56px) auto 0; padding: 0; list-style: none; }
.hs-line::before { content: ""; position: absolute; left: 132px; top: 10px; bottom: 10px; border-left: 2px dashed #F2CFA1; }
.hs-year { position: relative; display: grid; grid-template-columns: 108px 1fr; gap: 48px; align-items: start; }
.hs-dot { position: absolute; left: 125px; top: 9px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px #FFE2BD; }
.hs-year .y { text-align: right; font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.hs-year ul { display: grid; gap: 8px; padding: 0; list-style: none; }
.hs-year li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px #F6E3CB; }
.hs-year li .m { font-size: 14px; font-weight: 800; color: var(--orange-d); }
.hs-year li p { font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; color: #3D3833; line-height: 1.5; }
.hs-year li.is-star { background: var(--orange); box-shadow: none; }
.hs-year li.is-star .m, .hs-year li.is-star p { color: #fff; }
.hs-year li.is-star p { font-weight: 800; }
/* 검증된 콘텐츠 */
.tr { padding-top: clamp(72px, 8vw, 110px); }
.tr-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(32px, 4vw, 52px); padding: 0; list-style: none; }
.tr-card { display: grid; gap: 4px; width: 100%; padding: 12px 12px 16px; border: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--line); font: inherit; text-align: center; color: var(--text); cursor: zoom-in; transition: transform 300ms var(--slow); }
.tr-card .ph { display: block; margin-bottom: 10px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.tr-card .ph img { display: block; width: 100%; height: auto; }
.tr-card b { font-size: 17px; font-weight: 800; }
.tr-card .by { font-size: 13px; color: var(--muted); }
.tr-card .zoom { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--teal-d); }
@media (hover: hover) and (pointer: fine) { .tr-card:hover { transform: translateY(-4px); } }
.tr-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: clamp(28px, 3vw, 40px); padding: 0; list-style: none; }
.tr-points li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 18px 22px; border-radius: 20px; background: #E6F5F6; }
.tr-points i { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; font-size: 24px; color: var(--teal-d); }
.tr-points b { font-size: 17px; }
.tr-points span { font-size: 14px; color: var(--muted); }
.tr-view { margin: auto; width: min(92vw, 560px); max-height: 92vh; padding: 16px; border: 0; border-radius: 20px; background: var(--card); }
.tr-view::backdrop { background: rgba(30, 26, 22, .6); }
.tr-view img { display: block; width: 100%; height: auto; max-height: calc(92vh - 90px); object-fit: contain; }
.tr-view p { margin-top: 10px; text-align: center; font-weight: 800; }
.tr-close { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--text); color: #fff; font-size: 20px; cursor: pointer; }
@media (max-width: 900px) {
  .tr-list { grid-template-columns: repeat(2, 1fr); }
  .tr-points { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hs .container { border-radius: 24px; }
  .hs-line::before { left: 7px; }
  .hs-year { grid-template-columns: 1fr; gap: 10px; padding-left: 32px; }
  .hs-dot { left: 0; top: 6px; }
  .hs-year .y { text-align: left; font-size: 24px; }
  .hs-year li { grid-template-columns: 38px 1fr; padding: 11px 14px; }
}

/* ---------- 회사소개: 대표인사말 ---------- */
.greet { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
/* 대표인사말 본문: 가는 명조(Gowun Batang) → 사이트 본문 글꼴 Pretendard로, 또렷하게 읽히도록 */
.greet-eyebrow { font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; line-height: 1.6; color: var(--muted); }
.greet-eyebrow b { color: var(--text); }
.greet-h { margin-top: 18px; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.25; }
.greet-h .o { color: var(--orange); }
.greet-body { display: grid; gap: 1.1em; margin-top: clamp(28px, 3vw, 40px); max-width: 640px; font-size: clamp(17px, 1.35vw, 19px); font-weight: 500; line-height: 1.8; letter-spacing: -.01em; color: #36312B; word-break: keep-all; }
.greet-body b { font-weight: 700; color: var(--text); }
.greet-sign { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; max-width: 640px; margin-top: clamp(36px, 4vw, 52px); padding-top: clamp(28px, 3vw, 36px); border-top: 1.5px dashed var(--line); }
.greet-sign > p:first-child { font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; line-height: 1.6; }
.greet-sign .who { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); white-space: nowrap; }
.greet-sign .sig { font-family: "Nanum Pen Script", cursive; font-size: clamp(42px, 4vw, 54px); line-height: 1; color: var(--text); transform: rotate(-4deg); }
/* 대표 사진: 아치형 살구색 틀 안에 사진 전체가 들어간다 (머리 위로 여백, 아래는 틀 바닥에서 끝) */
.greet-photo { position: sticky; top: calc(var(--nav-h) + 72px); margin: 0; padding: 18% 6% 0; border-radius: 999px 999px 32px 32px; background: linear-gradient(180deg, #FFEBD0, #FFF4E4); overflow: hidden; }
.greet-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .greet { grid-template-columns: 1fr; }
  .greet-photo { position: relative; top: 0; order: -1; width: min(66%, 300px); margin: 0 auto; }
}

/* ── 초등 2~3학년 (의뢰자 시안 5장): 왼쪽 글 + 아이콘 카드, 오른쪽 연두 아치 위 아이 누끼 ─────────── */
.lo { --g: #5BAE2E; --gl: #E6F4D9; }
.lo .g { color: var(--g); }
.lo-sec { padding: clamp(56px, 7vw, 100px) 0; scroll-margin-top: var(--nav-h); }
.lo-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 80px); }
.lo-badge { display: inline-block; padding: 8px 20px; border-radius: 99px; background: var(--g); color: #fff; font-weight: 800; font-size: clamp(15px, 1.3vw, 18px); }
.lo-h1 { margin-top: clamp(18px, 2vw, 26px); font-size: clamp(36px, 4.4vw, 62px); line-height: 1.22; }
.lo-h { margin-top: clamp(18px, 2vw, 26px); font-size: clamp(32px, 3.6vw, 52px); line-height: 1.25; } /* STEP 제목은 학년 제목(.lo-h1)보다 한 단계 작게 (유아 쪽 .kd-h와 같은 크기) */
.lo-lead { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(18px, 1.7vw, 24px); line-height: 1.7; color: var(--muted); }
/* 소개: 2×2 가로 카드 / STEP: 3칸 세로 카드 */
.lo-points, .lo-cards { display: grid; gap: 12px; margin-top: clamp(26px, 3vw, 36px); padding: 0; list-style: none; }
.lo-points { grid-template-columns: 1fr 1fr; }
.lo-points li { display: grid; grid-template-columns: clamp(52px, 4.6vw, 64px) 1fr; align-items: center; gap: 14px; padding: 14px 18px; border: 2px solid color-mix(in srgb, var(--g) 30%, #fff); border-radius: 18px; background: #fff; }
.lo-points img { width: 100%; height: clamp(48px, 4.2vw, 58px); object-fit: contain; }
.lo-points b { font-size: clamp(17px, 1.5vw, 21px); font-weight: 800; }
.lo-cards { grid-template-columns: repeat(3, 1fr); }
.lo-cards li { display: grid; justify-items: center; gap: 12px; padding: 18px 12px 16px; border: 2px solid color-mix(in srgb, var(--g) 30%, #fff); border-radius: 18px; background: #fff; text-align: center; }
.lo-cards img { width: 100%; height: clamp(64px, 6.4vw, 92px); object-fit: contain; }
.lo-cards b { font-size: clamp(15px, 1.35vw, 19px); font-weight: 800; }
.lo-art { position: relative; margin: 0; padding-top: 8%; }
.lo-arch { position: absolute; left: 8%; right: 8%; top: 0; bottom: 0; border-radius: 999px 999px 0 0; background: var(--gl); }
.lo-art img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.lo-sym { position: absolute; z-index: 0; width: 7%; fill: none; stroke-width: 7; stroke-linecap: round; }
.lo-sym circle { stroke: none; }
/* 기호 위치는 사진마다 다르게: 각 figure의 style에서 --dl·--dt(÷), --xl·--xt(×), --pl·--pt(+)와 회전(--dr·--xr·--pr)을 준다 */
.lo-sym.s-div { left: var(--dl, 2%); top: var(--dt, 12%); stroke: #A9D88A; fill: #A9D88A; rotate: var(--dr, -20deg); }
.lo-sym.s-x { left: var(--xl, 93%); top: var(--xt, 16%); stroke: #F8C48B; rotate: var(--xr, 0deg); }
.lo-sym.s-plus { left: var(--pl, 89%); top: var(--pt, 44%); stroke: #A9D88A; rotate: var(--pr, 0deg); }
@media (max-width: 900px) {
  .lo-split { grid-template-columns: 1fr; row-gap: 0; }
  .lo-art { order: 1; margin-top: 28px; max-width: 520px; width: 100%; justify-self: center; }
  /* 휴대폰: 제목·설명 → 사진 → 아이콘 카드 순서 (글 묶음을 풀어 사진 사이에 끼운다) */
  .lo-txt { display: contents; }
  .lo-cards, .lo-points, .lo-close { order: 2; }
  .lo-txt > * { min-width: 0; }
  .lo-badge, .kd-grade, .kd-eye { justify-self: start; } /* 묶음이 풀려도 배지는 글자 길이만큼 */
}
@media (max-width: 560px) {
  .lo-points { grid-template-columns: 1fr 1fr; }
  .lo-points li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 14px 10px; }
  .lo-cards { gap: 8px; }
  .lo-cards li { padding: 14px 6px 12px; }
}

/* 초등 4~6학년: 2~3학년(.lo)과 같은 틀, 색만 청록 */
.lo-hi { --g: #14A3B8; --gl: #D7F0F2; }
.lo-hi .lo-sym.s-div { stroke: #8FD9E1; fill: #8FD9E1; }
.lo-hi .lo-sym.s-x { stroke: #B5DFA0; }
.lo-hi .lo-sym.s-plus { stroke: #8FD9E1; }
/* 아이콘 왼쪽 + 글자 오른쪽 가로 카드 (4~6학년 STEP 04) */
.lo-cards.lo-row li { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 10px; padding: 14px 12px; text-align: left; }
.lo-cards.lo-row img { width: clamp(48px, 4.4vw, 64px); height: clamp(48px, 4.4vw, 64px); }
@media (max-width: 560px) {
  .lo-cards.lo-row li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 14px 6px 12px; }
}
.lo-close { margin-top: clamp(20px, 2.4vw, 30px); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }

/* ---------- 전국 지사 및 교육원 (의뢰자 시안 리디자인) ---------- */
.br .t { color: var(--teal-d); }
.br-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); }
.br-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.br-eyebrow { font-weight: 800; font-size: clamp(16px, 1.3vw, 18px); color: var(--teal-d); }
.br-h1 { margin-top: 14px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.28; }
.br-lead { margin-top: clamp(16px, 1.8vw, 24px); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; color: var(--muted); }
.br-btn { margin-top: clamp(24px, 2.6vw, 36px); min-height: 56px; padding: 0 28px; font-size: 17px; }
/* 흰 글씨 + 오른쪽 흰 원 화살표 버튼 (버튼 시안 C-w) */
.btn.btn-arrow { gap: 16px; padding: 0 8px 0 28px; }
.btn-arrow .dot { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--orange-d); text-shadow: none; }
.btn-arrow .dot i { font-size: 18px; }
@media (hover: hover) and (pointer: fine) {
  .btn.btn-arrow:hover .dot i { transform: translateX(3px); }
}
.br-hero-art { justify-self: end; width: min(100%, 380px); margin-right: clamp(0px, 2vw, 32px); } /* 손글씨 문구를 빼고 지도만 크게 */
.br-hero-art img { display: block; width: 100%; height: auto; }
.br-note { flex: none; margin-bottom: 18%; font-family: "Nanum Pen Script", cursive; font-size: clamp(22px, 2.1vw, 31px); line-height: 1.25; color: var(--teal-d); rotate: -8deg; }
.br-note svg { display: block; width: 110px; margin: 6px 0 0 30px; fill: none; stroke: var(--teal-d); stroke-width: 2.5; stroke-linecap: round; }
.br-h2 { font-size: clamp(28px, 2.8vw, 40px); }
.br-steps { padding: clamp(48px, 6vw, 88px) 0; scroll-margin-top: var(--nav-h); }
.br-steps .br-h2 { text-align: center; }
.br-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); margin-top: clamp(28px, 3vw, 44px); padding: 0; list-style: none; }
.br-flow li { position: relative; display: grid; justify-items: center; padding: clamp(24px, 2.4vw, 32px) 20px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--line); text-align: center; }
.br-flow li + li::before { content: "→"; position: absolute; left: calc(clamp(32px, 4vw, 64px) / -2); top: 50%; translate: -50% -50%; font-size: 26px; color: #B9AE9C; }
.br-flow .no { position: absolute; left: 24px; top: 22px; font-weight: 800; font-size: clamp(22px, 2vw, 28px); color: var(--teal-d); }
.br-flow .ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #FFEBD0; color: var(--orange); font-size: 30px; }
.br-flow h3 { margin-top: 16px; font-size: clamp(19px, 1.6vw, 22px); }
.br-flow p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.br-flow-note { margin-top: clamp(20px, 2.4vw, 30px); text-align: center; color: var(--muted); }
.br-find { scroll-margin-top: var(--nav-h); }
.br-find-box { padding: clamp(28px, 3.6vw, 48px); border-radius: calc(var(--r) + 8px); background: var(--surface); }
.br-search { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 12px; margin-top: clamp(20px, 2.4vw, 28px); }
.br-ctl { width: 100%; min-height: 54px; padding: 0 18px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); font: inherit; font-size: 16px; color: var(--text); }
select.br-ctl { appearance: none; -webkit-appearance: none; padding-right: 44px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%232F2B26' stroke-linecap='round' stroke-linejoin='round' stroke-width='28' d='m208 96-80 80-80-80'/%3E%3C/svg%3E") no-repeat right 16px center; cursor: pointer; }
select.br-ctl:disabled { color: #A8A094; cursor: default; }
.br-ctl:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 20%, transparent); }
.br-q { position: relative; }
.br-q .br-ctl { padding-right: 46px; }
.br-q i { position: absolute; right: 16px; top: 50%; translate: 0 -50%; font-size: 20px; color: var(--muted); pointer-events: none; }
.br-search .btn { min-height: 54px; padding: 0 34px; border-radius: 16px; font-size: 17px; }
/* PC: 왼쪽 지도 · 오른쪽 목록 / 모바일: 목록 먼저, 지도 아래 */
.br-result { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; margin-top: 16px; }
/* 권역 지도: 점토 지도 그림 위에 권역별 영역(SVG). 올리면 색 + 이름표, 누르면 선택 */
.br-result:has(.br-rmap) { grid-template-columns: .85fr 1.15fr; }
/* 목록 칸 높이를 지도 칸에 맞춘다: 목록은 행 높이를 키우지 않고(height 0) 지도 높이만큼 채운 뒤 안에서 스크롤 */
@media (min-width: 901px) {
  .br-result:has(.br-rmap) .br-panel { height: 0; min-height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .br-result:has(.br-rmap) .br-list { max-height: none; min-height: 0; }
}
.br-rmap { order: -1; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 22px 18px 18px; border-radius: 20px; background: linear-gradient(180deg, #E4F4F5, #F3FAFA); box-shadow: 0 0 0 1px #D3ECEE; }
.rmap-hint { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.rmap-hint i { font-size: 17px; color: var(--teal-d); }
.rmap-stage { position: relative; width: min(100%, 330px); }
.rmap-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.rmap-pins { pointer-events: none; }
.br-rmap { position: relative; }
/* 시·도 지도: 평면 (흰 면 + 얇은 경계선). 올리면 색, 누르면 진한 색 */
.rg { cursor: pointer; outline: none; }
.rg .sd { display: none; }
.rg .tp { fill: #FFFFFF; stroke: #A9C9CC; stroke-width: 1.2; stroke-linejoin: round; transition: fill 200ms ease; }
.rg .tn { fill: var(--rc); opacity: 0; stroke: var(--rc); stroke-width: 1.2; stroke-linejoin: round; transition: opacity 200ms ease; pointer-events: none; }
.rg:hover .tn, .rg:focus-visible .tn { opacity: .55; }
.rg.is-on .tn { opacity: 1; }
.rmap-tip { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; justify-items: center; gap: 1px; padding: 6px 12px 7px; border-radius: 10px; background: #fff; color: var(--ink, #2F2B26); text-align: center; white-space: nowrap; pointer-events: none; opacity: 0; box-shadow: 0 8px 22px rgba(0, 60, 70, .18), 0 0 0 1px rgba(0, 60, 70, .06); transform: translate(-50%, calc(-100% + 6px)); transition: opacity 200ms ease, transform 300ms var(--slow); }
.rmap-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #fff; box-shadow: 2px 2px 3px rgba(0, 60, 70, .08); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.rmap-tip b { font-size: 15px; font-weight: 800; }
.rmap-tip small { font-size: 11.5px; font-weight: 500; color: #6B645C; }
.rmap-tip.is-hover, .rmap-tip.is-on { opacity: 1; transform: translate(-50%, -100%); }
.br-map { position: relative; order: -1; min-height: 460px; overflow: hidden; border-radius: 20px; background: #E9EEEC; box-shadow: 0 0 0 1px var(--line); }
#br-leaflet { position: absolute; inset: 0; z-index: 0; font-family: inherit; }
.br-map.is-fail #br-leaflet { visibility: hidden; }
.br-map-fail { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; font-weight: 700; color: var(--muted); }
.br-map-fail[hidden] { display: none; }
.br-map-fail i { font-size: 36px; }
.br-panel { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 460px; }
.br-chips { display: flex; gap: 8px; }
.br-chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); font: inherit; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; }
.br-chips button .n { font-size: 13px; color: var(--muted); }
.br-chips button .n:empty { display: none; }
.br-chips button[aria-selected="true"] { border-color: var(--teal-d); background: var(--teal-d); color: #fff; }
.br-chips button[aria-selected="true"] .n { color: #CFEFF2; }
.br-list { overflow-y: auto; max-height: 420px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.br-empty { display: grid; justify-items: center; align-content: center; gap: 8px; height: 100%; min-height: 300px; padding: 24px; text-align: center; }
.br-empty i { font-size: 44px; color: #A9B4BA; }
.br-empty b { margin-top: 6px; font-size: 17px; line-height: 1.5; }
.br-empty span { font-size: 15px; color: var(--muted); }
.br-item { display: grid; gap: 4px; padding: 16px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color 200ms ease; }
.br-item:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.br-item.is-on { background: color-mix(in srgb, var(--teal) 8%, #fff); box-shadow: inset 4px 0 0 var(--teal-d); }
.tp { justify-self: start; padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--teal) 14%, #fff); font-size: 13px; font-weight: 700; color: var(--teal-d); }
.tp.hq { background: #FFEBD0; color: var(--orange-d); }
/* 우수교육원 메달 */
.medal { width: 1.3em; height: auto; flex: none; }
.br-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.br-best { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 4px; border-radius: 99px; background: #FFF4D6; font-size: 13px; font-weight: 800; color: #8A5A00; }
.br-best .medal { width: 20px; }
.br-chips { flex-wrap: wrap; }
.br-chips button.is-best .medal { width: 18px; margin-left: -4px; }
.ab-best { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 4px; border-radius: 99px; background: #FFF4D6; font-size: 13px; font-weight: 800; color: #8A5A00; }
.ab-best .medal, .ab-bestonly .medal, .ab-form .check .medal { width: 18px; vertical-align: -4px; }
.br-item h3 { font-size: 17px; }
.br-item .ad { font-size: 14px; line-height: 1.5; color: var(--muted); }
.br-item .tel { font-size: 15px; font-weight: 700; }
.br-item .ac { display: flex; gap: 8px; margin-top: 6px; }
.br-act { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); font-size: 14px; font-weight: 700; }
.br-act i { color: var(--teal-d); }
@media (hover: hover) and (pointer: fine) { .br-item:hover { background: color-mix(in srgb, var(--teal) 5%, #fff); } .br-act:hover { border-color: var(--teal-d); } }
.br-more { width: 100%; min-height: 44px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.br-sample { font-size: 13px; color: var(--muted); }
.br-sample[hidden] { display: none; }
.br-map-note { margin-top: 4px; font-size: 13px; text-align: center; color: var(--muted); }
/* 지도 핀: 교육원 청록, 지사 주황. 선택하면 커진다 */
.br-pin { position: absolute; left: 3px; top: 2px; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; background: var(--teal-d); border: 3px solid #fff; rotate: -45deg; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); transition: scale 200ms ease; }
.br-pin.is-hq { background: var(--orange); }
.br-pin.is-on { scale: 1.3; z-index: 2; }
.br-pop { display: grid; gap: 4px; min-width: 190px; font-family: "Pretendard", system-ui, sans-serif; }
.br-pop b { font-size: 15px; }
.br-pop .ad { font-size: 13px; color: var(--muted); }
.br-pop .ac { display: flex; gap: 6px; margin-top: 4px; }
.br-pop .ac a { padding: 6px 10px; border-radius: 99px; background: var(--teal-d); color: #fff; font-size: 13px; font-weight: 700; }
.br-pop .ac a + a { background: var(--orange); color: #fff; }
.leaflet-container { font-family: inherit; }
.br-help { padding: clamp(56px, 7vw, 96px) 0 0; }
.br-help-box { position: relative; display: grid; grid-template-columns: 1fr minmax(280px, 40%); align-items: center; overflow: hidden; border-radius: calc(var(--r) + 8px); background: linear-gradient(90deg, #E4F4F5, #EAF6F5); }
.br-help-txt { padding: clamp(28px, 3.6vw, 48px); }
.br-help h2 { font-size: clamp(24px, 2.4vw, 34px); }
.br-help p { margin-top: 10px; color: var(--muted); }
.br-help .br-btn { margin-top: 22px; }
.br-help-box img { align-self: stretch; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
@media (max-width: 900px) {
  .br-hero-in { grid-template-columns: 1fr; }
  .br-hero-art { justify-self: center; width: min(100%, 420px); }
  .br-note { font-size: 20px; }
  .br-note svg { width: 80px; margin-left: 20px; }
  .br-flow { grid-template-columns: 1fr; gap: 14px; }
  .br-flow li + li::before { content: "↓"; left: 50%; top: -14px; translate: -50% -50%; font-size: 20px; }
  .br-search { grid-template-columns: 1fr 1fr; }
  .br-q { grid-column: 1 / -1; }
  .br-search .btn { grid-column: 1 / -1; }
  .br-result { grid-template-columns: 1fr; }
  .br-map { order: 0; min-height: 320px; }
  .br-result:has(.br-rmap) { grid-template-columns: 1fr; }
  .rmap-stage { width: min(78%, 280px); }
  .br-panel { min-height: 0; }
  .br-list { max-height: none; }
  .br-empty { min-height: 200px; }
  .br-help-box { grid-template-columns: 1fr; }
  .br-help-box img { height: 180px; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
}

/* ---------- 수업 이야기 (sketch.html, 의뢰자 시안) — 요리수 주황 / 매쓰레시피 청록 ---------- */
.st-page .t { color: var(--teal-d); }
.st-page [data-prog="요리수"] { --pc: #EE7A12; --pcl: #FFEBD6; --pcd: var(--orange-d); }
.st-page [data-prog="매쓰레시피"] { --pc: #0F9AAE; --pcl: #DBF2F4; --pcd: var(--teal-d); }
.sty-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); }
.sty-hero-in { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(28px, 4vw, 64px); }
.sty-eyebrow { font-weight: 800; font-size: clamp(15px, 1.25vw, 17px); color: var(--teal-d); }
.sty-h1 { margin-top: 14px; font-size: clamp(34px, 4vw, 58px); line-height: 1.22; }
.sty-lead { margin-top: clamp(16px, 1.8vw, 24px); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; color: var(--muted); }
.sty-btn { margin-top: clamp(24px, 2.6vw, 36px); min-height: 56px; padding: 0 28px; font-size: 17px; }
.sty-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1.36; } /* 수업 사진 4장 2×2 */
.sty-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.sty-collage .c1 { grid-row: 1 / 3; }
.sty-sec { padding: clamp(56px, 7vw, 100px) 0 0; scroll-margin-top: var(--nav-h); }
.sty-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.sty-h2 { margin-top: 10px; font-size: clamp(30px, 3vw, 44px); }
.sty-sub { margin-top: 10px; font-size: clamp(16px, 1.3vw, 18px); color: var(--muted); }
.sty-chips { display: flex; gap: 8px; }
.sty-chips button { min-height: 44px; padding: 0 20px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); font: inherit; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
.sty-chips button[data-p="요리수"] { --pc: #EE7A12; }
.sty-chips button[data-p="매쓰레시피"] { --pc: #0F9AAE; }
.sty-chips button[aria-pressed="true"] { border-color: var(--pc, var(--text)); background: var(--pc, var(--text)); color: #fff; }
/* 베스트 리뷰 카드 2장 */
.sty-best { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(24px, 3vw, 36px); }
.sty-bcard { display: grid; gap: 14px; padding: clamp(18px, 2vw, 26px); border: 2px solid var(--pc); border-radius: calc(var(--r) - 4px); background: var(--card); color: inherit; transition: transform 300ms var(--slow), box-shadow 300ms ease; }
.sty-bhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sty-bhead .logo-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--pc); color: #fff; font-size: 22px; }
.sty-bhead h3 { font-size: clamp(20px, 1.8vw, 26px); }
.sty-bhead h3 b { color: var(--pc); }
/* 베스트 리뷰 목록 (프로그램마다 1~5개) */
.sty-count { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; margin-left: auto; border-radius: 99px; background: var(--pcl); color: var(--pcd); font-weight: 800; font-size: 15px; }
.sty-bcard { align-content: start; }
.sty-blist { display: grid; padding: 0; list-style: none; }
.sty-blist li + li { border-top: 1px dashed color-mix(in srgb, var(--pc) 30%, var(--line)); }
.sty-bitem { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 14px; padding: 14px 4px; color: inherit; border-radius: 14px; transition: background-color 250ms ease; }
.sty-bitem .no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pc); color: #fff; font-weight: 800; font-size: 16px; }
.sty-bitem .tx { display: grid; gap: 3px; min-width: 0; }
.sty-bitem .tx b { font-size: clamp(17px, 1.45vw, 20px); font-weight: 800; line-height: 1.4; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sty-bitem .tx .by { font-size: 15px; color: var(--muted); }
.sty-bitem .tx .sty-tag { justify-self: start; }
.sty-bitem .go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--pc); color: var(--pc); font-size: 18px; transition: background-color 250ms ease, color 250ms ease; }
@media (hover: hover) and (pointer: fine) {
  .sty-bitem:hover { background: var(--pcl); }
  .sty-bitem:hover .go { background: var(--pc); color: #fff; }
  .sty-bcard:has(.sty-blist):hover { transform: none; }
}
.sa-feat-list { display: grid; gap: 4px; margin: 4px 0 0; padding-left: 20px; font-size: 15px; }
.sa-feat-list b { font-size: 15px; }
.sa-feat-list span { color: var(--muted); font-size: 13px; }
.sty-month { margin-left: auto; padding: 6px 14px; border-radius: 99px; background: var(--pcl); font-size: 14px; font-weight: 700; color: var(--pcd); }
.sty-bcard .ph { display: none; } /* 베스트 리뷰는 사진 없이 글만 (아래 전체 목록 카드는 사진 그대로) */
.sty-bcard .ph img, .sty-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--slow); }
.sty-bfoot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.sty-tag { display: inline-block; padding: 3px 10px; border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted); }
.sty-bfoot h4 { margin-top: 8px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 800; }
.sty-by { margin-top: 4px; font-size: 15px; color: var(--muted); }
.sty-intro { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #4A443C; }
.sty-go { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--radius); background: var(--pc); color: #fff; font-weight: 700; white-space: nowrap; }
/* 모아보기 카드 4장씩 */
.sty-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(24px, 3vw, 36px); padding: 0; list-style: none; }
.sty-card { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border-radius: 22px; background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--line); color: inherit; transition: transform 300ms var(--slow); }
.sty-card .ph { aspect-ratio: 1.5; overflow: hidden; }
.sty-card .bd { display: grid; align-content: start; gap: 6px; padding: 16px 18px 18px; }
.sty-card .pg { justify-self: start; padding: 4px 12px; border-radius: 99px; background: var(--pc); font-size: 13px; font-weight: 700; color: #fff; }
.sty-card h3 { margin-top: 4px; font-size: clamp(17px, 1.4vw, 20px); }
.sty-card .by { font-size: 14px; color: var(--muted); }
.sty-card .ft { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.sty-card .ft b { font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .sty-bcard:hover, .sty-card:hover { transform: translateY(-4px); }
  .sty-bcard:hover .ph img, .sty-card:hover .ph img { transform: scale(1.04); }
}
.sty-more { display: flex; margin: 24px auto 0; }
.sty-more[hidden] { display: none; }
.sty-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: clamp(32px, 4vw, 48px); padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 40px); border-radius: var(--r); background: #E4F4F5; }
.sty-cta p { display: flex; align-items: center; gap: 10px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; color: var(--teal-d); }
.sty-cta .row { display: flex; flex-wrap: wrap; gap: 10px; }
.sty-cta .btn-ghost { border-color: var(--teal-d); color: var(--teal-d); background: var(--card); }
.sty-note { margin-top: 10px; text-align: right; font-size: 13px; color: var(--muted); }
.sty-bcard.is-empty { grid-template-rows: auto 1fr; border-style: dashed; }
.sty-ready { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 220px; border-radius: 16px; background: var(--pcl); color: var(--pcd); text-align: center; }
.sty-ready i { font-size: 34px; }
.sty-ready b { font-size: clamp(17px, 1.5vw, 20px); }
.sty-none { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; min-height: 180px; border: 2px dashed var(--line); border-radius: 22px; font-size: 17px; font-weight: 700; color: var(--muted); }
.sty-none[hidden] { display: none; }
.sty-note[hidden] { display: none; }
/* 관리자: 수업 이야기 관리 (admin-stories.php) */
.admin-nav { display: flex; gap: 6px; flex: 1; }
.admin-nav a { padding: 8px 16px; border-radius: var(--radius); font-weight: 800; font-size: 17px; color: var(--muted); }
.admin-nav a[aria-current="page"] { background: var(--text); color: var(--bg); }
.sa-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sa-feat-box { display: grid; align-content: start; gap: 12px; padding: 18px 22px; border: 2px solid var(--pc); border-radius: 20px; background: var(--card); }
.sa-feat-box > .sa-pchip { justify-self: start; }
.sa-feat-box .sa-feat-list { gap: 10px; margin: 0; padding-left: 22px; }
.sa-feat-box .sa-feat-list li::marker { font-weight: 700; color: var(--muted); }
.sa-feat-box .sa-feat-list b { display: block; font-size: 16px; line-height: 1.45; }
.sa-feat-box .sa-feat-list span { display: block; margin-top: 1px; font-size: 13px; }
.sa-feat-box b { font-size: 18px; }
.sa-feat-box b.none { color: var(--muted); }
.sa-feat-box span:last-child { font-size: 14px; color: var(--muted); }
.sa-pchip { justify-self: start; padding: 3px 12px; border-radius: 99px; background: var(--pc); color: #fff; font-size: 13px; font-weight: 700; }
.sa-edit { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; margin-top: 28px; scroll-margin-top: 90px; }
.sa-title { font-size: 22px; font-weight: 800; }
.sa-title small, .field small { font-size: 13px; font-weight: 500; color: var(--muted); }
.sa-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-seg label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); font-weight: 700; cursor: pointer; }
.sa-seg label:has(input:checked) { border-color: var(--teal-d); background: color-mix(in srgb, var(--teal) 10%, #fff); }
.sa-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sa-hint { font-size: 14px; color: var(--muted); }
.sa-btns { display: flex; gap: 8px; }
.sa-preview { position: sticky; top: 90px; display: grid; gap: 14px; }
.sa-noimg { display: grid; place-items: center; background: var(--surface); color: var(--muted); font-weight: 700; }
.sa-list-wrap { margin-top: 40px; }
.sa-list { display: grid; gap: 10px; margin-top: 14px; padding: 0; list-style: none; }
.sa-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.sa-row.is-off { opacity: .55; }
.sa-row > img { width: 120px; height: 80px; object-fit: cover; border-radius: 12px; }
.sa-info { display: grid; gap: 4px; }
.sa-info b { font-size: 17px; }
.sa-info > span { font-size: 14px; color: var(--muted); }
.sa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-state { padding: 3px 10px; border-radius: 99px; background: var(--surface); font-size: 13px; font-weight: 700; }
.sty-views { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sty-views i { font-size: 15px; }
.sty-bitem .by .sty-views { margin-left: 8px; }
.sty-bitem .by .sty-views::before { content: "·"; margin-right: 6px; }
.sa-views { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; background: #E3F4F6; font-size: 13px; font-weight: 700; color: #0B6F7B; }
.sa-star { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; background: #FFF1C9; font-size: 13px; font-weight: 800; color: #8A5A00; }
.sa-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 360px; }
@media (max-width: 900px) {
  .sa-edit, .sa-feat { grid-template-columns: 1fr; }
  .sa-preview { position: static; }
  .sa-row { grid-template-columns: 90px 1fr; }
  .sa-row > img { width: 90px; height: 64px; }
  .sa-acts { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
}

/* 관리자: 지사·교육원 (admin-branches.php) */
.ab-edit { grid-template-columns: 1.15fr .85fr; }
.ab-form select { width: 100%; min-height: 56px; padding: 0 16px; border: 2px solid var(--line); border-radius: 18px; background: var(--bg); font: inherit; font-size: 16px; }
.ab-import { align-content: start; }
.ab-steps { display: grid; gap: 6px; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.ab-steps a { font-weight: 700; color: var(--teal-d); text-decoration: underline; }
.ab-csv { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ab-csv-msg { white-space: pre-line; font-size: 14px; font-weight: 600; }
.ab-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ab-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-filter { min-height: 40px; padding: 0 14px; border: 2px solid var(--line); border-radius: var(--radius); font: inherit; }
.ab-row { grid-template-columns: 1fr auto; }
.ab-row[hidden] { display: none; }
.ab-noloc { background: #FDE4E0; color: #B23A2B; }
@media (max-width: 900px) { .ab-edit { grid-template-columns: 1fr; } }

@media (max-width: 1100px) { .sty-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .sty-hero-in { grid-template-columns: 1fr; }
  .sty-best { grid-template-columns: 1fr; }
  .sty-bitem { grid-template-columns: 30px 1fr 36px; gap: 12px; }
  .sty-bitem .no { width: 30px; height: 30px; font-size: 15px; }
  .sty-bitem .go { width: 36px; height: 36px; }
  .sty-bitem .tx b { -webkit-line-clamp: 3; }
  .sty-month { margin-left: 0; }
}
@media (max-width: 560px) {
  .sty-list { grid-template-columns: 1fr; }
  .sty-collage { gap: 8px; }
  .sty-collage img { border-radius: 14px; }
  .sty-cta .row, .sty-cta .btn { width: 100%; }
}

/* 서브 페이지 아래 띠 */
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(28px, 3.4vw, 44px) clamp(28px, 4vw, 56px); border-radius: var(--r); background: var(--surface); }
.band h2 { font-size: clamp(28px, 3vw, 40px); }
.band p { margin-top: 4px; color: var(--muted); }
.band .row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- 상담 및 문의: 신청 양식 ---------- */
/* 상담 및 문의 첫 화면: 카드 2개 (학습 상담 주황 / 프로그램 상담 청록) + 헤드셋 말풍선 캐릭터 */
.ct-hero { padding: clamp(32px, 4vw, 56px) 0 clamp(36px, 4.4vw, 64px); }
.ct-top { position: relative; display: flex; align-items: flex-end; justify-content: space-between; }
.ct-title { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(20px, 2.4vw, 32px); font-size: clamp(26px, 2.4vw, 34px); color: var(--teal-d); }
.ct-title::before { content: ""; width: 5px; height: 1.05em; border-radius: 99px; background: var(--teal-d); }
.ct-mascot { position: relative; z-index: 1; width: clamp(110px, 13.5vw, 190px); height: auto; margin: 0 clamp(4px, 1.6vw, 24px) -22px 0; filter: drop-shadow(0 14px 18px rgba(150, 100, 30, .16)); }
.ct-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.ct-card { --cc: var(--orange); --cd: var(--orange-d); --soft: #FFEBD0; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.6vw, 52px) clamp(30px, 3.6vw, 50px); border-radius: var(--r); background: var(--card); border: 1.5px solid #FBE6CC; box-shadow: 0 24px 48px -36px rgba(150, 100, 30, .45); }
.ct-card.is-teal { --cc: var(--teal-d); --cd: var(--teal-d); --soft: #DFF3F4; }
.ct-chip { padding: 9px 24px; border-radius: 99px; background: var(--soft); color: var(--cd); font-weight: 800; font-size: clamp(15px, 1.3vw, 18px); }
.ct-card h2 { margin-top: clamp(20px, 2.2vw, 30px); font-size: clamp(30px, 3.3vw, 46px); line-height: 1.28; color: var(--text); }
.ct-card p { margin-top: 14px; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.6; color: var(--muted); }
.ct-btn { display: inline-flex; align-items: center; gap: 10px; min-height: clamp(56px, 4.6vw, 64px); margin-top: auto; padding: 0 clamp(28px, 2.8vw, 40px); border-radius: var(--radius); background: var(--cc); color: #fff; font-weight: 800; font-size: clamp(17px, 1.5vw, 21px); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1); transition: transform 160ms var(--slow); }
.ct-card p + .ct-btn { margin-top: clamp(24px, 2.6vw, 34px); }
.ct-card.is-orange .ct-btn { text-shadow: 0 1px 1px rgba(154, 82, 0, .35); }
.ct-btn i { font-size: 1.05em; transition: transform 300ms var(--slow); }
.ct-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ct-btn:hover i { transform: translateX(4px); } }
@media (max-width: 760px) {
  .ct-cards { grid-template-columns: 1fr; }
  .ct-mascot { margin-bottom: -14px; }
  .ct-card p br { display: none; }
}
.inq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.inq-info { position: sticky; top: calc(var(--nav-h) + 96px); }
.inq-info .h2 { margin-bottom: 16px; }
.inq-info > p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: var(--muted); }
.inq-info .channels { margin-top: 28px; }
.inq-info .channel { background: var(--surface); }
.form-card { display: grid; gap: 20px; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field > span { font-weight: 700; }
.req { margin-left: 4px; font-size: 13px; font-weight: 700; color: var(--orange-d); }
.field input, .field select, .field textarea { width: 100%; min-height: 56px; padding: 14px 18px; border: 2px solid var(--line); border-radius: 18px; background: var(--bg); font: inherit; font-size: 17px; color: var(--text); transition: border-color 200ms ease, box-shadow 200ms ease; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 48px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%232F2B26' stroke-linecap='round' stroke-linejoin='round' stroke-width='28' d='m208 96-80 80-80-80'/%3E%3C/svg%3E") no-repeat right 18px center; cursor: pointer; }
.field ::placeholder { color: #B3A99A; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c, var(--orange)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--orange)) 22%, transparent); }
.field .is-bad { border-color: #D9534F; }
.check .is-bad { outline: 3px solid #D9534F; outline-offset: 2px; }
.agree { padding: 16px 18px; border-radius: 18px; background: var(--surface); }
.check { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; accent-color: var(--orange); cursor: pointer; }
.agree details { margin-top: 8px; padding-left: 34px; font-size: 14px; color: var(--muted); }
.agree summary { width: fit-content; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.agree dl { display: grid; gap: 4px; margin: 10px 0 6px; }
.agree dl div { display: grid; grid-template-columns: 76px 1fr; }
.agree dt { font-weight: 700; color: var(--text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { min-height: 1.5em; margin: -6px 0 -10px; font-weight: 600; color: #C2362F; }
.form-error:empty { min-height: 0; margin: 0; }
.btn-submit { width: 100%; min-height: 60px; font-size: 18px; }
.btn-submit[disabled] { opacity: .6; pointer-events: none; }
.form-done { display: grid; justify-items: center; gap: 12px; padding: clamp(36px, 5vw, 64px) 24px; text-align: center; }
.form-done img { width: 104px; height: auto; }
.form-done h3 { font-size: clamp(26px, 2.6vw, 32px); }
.form-done p { color: var(--muted); line-height: 1.7; }
@media (max-width: 900px) {
  .inq { grid-template-columns: 1fr; }
  .inq-info { position: static; }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- 관리자 페이지 (admin.php) ---------- */
.admin-gate { display: grid; justify-items: center; gap: 14px; width: min(100% - 40px, 440px); margin: clamp(48px, 10vh, 120px) auto; text-align: center; }
.admin-gate .logo img { height: 52px; }
.admin-gate h1 { margin-top: 12px; font-size: 32px; }
.admin-gate > p { color: var(--muted); line-height: 1.6; }
.gate-form { width: 100%; margin-top: 8px; text-align: left; }
.admin-top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--line); }
.admin-top .container { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.admin-top .logo img { height: 38px; }
.admin-top h1 { flex: 1; font-size: 24px; }
.admin-main { padding-top: 24px; padding-bottom: 80px; }
.admin-tabs { position: static; padding: 0 0 24px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.admin-tabs a { gap: 8px; }
.admin-tabs .n { font-family: var(--font-en); }
.new-n { padding: 2px 8px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13px; }
.inq-list { display: grid; gap: 14px; list-style: none; padding: 0; }
.inq-item { display: grid; gap: 12px; padding: 24px 26px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow), 0 0 0 2px var(--orange); }
.inq-item.is-read { box-shadow: 0 0 0 1px var(--line); background: color-mix(in srgb, var(--card) 60%, var(--bg)); }
.inq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inq-head time { margin-left: auto; font-family: var(--font-en); color: var(--muted); }
.chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.chip.consult { background: color-mix(in srgb, var(--teal) 18%, var(--card)); color: var(--teal-d); }
.chip.franchise { background: color-mix(in srgb, var(--purple) 18%, var(--card)); color: var(--purple-d); }
.chip.new { background: var(--orange); color: #fff; }
.who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 20px; }
.who a { font-family: var(--font-en); font-weight: 700; color: var(--orange-d); }
.inq-item dl { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.inq-item dl div { display: flex; gap: 8px; }
.inq-item dt { color: var(--muted); }
.inq-item dd { font-weight: 700; }
.inq-item .msg { padding: 14px 16px; border-radius: 16px; background: var(--surface); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.inq-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inq-actions .del { margin-left: auto; }
/* 관리자 삭제 버튼: 다른 버튼과 헷갈리지 않게 빨간색 + 휴지통 */
.btn.del { border: 2px solid #D9443C; background: #FDECEA; color: #C2362F; }
.btn.del i { font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .btn.del:hover { background: #C2362F; border-color: #C2362F; color: #fff; } .btn.del:hover i { transform: none; } }

/* ---------- 푸터 ---------- */
main > .section:last-child { padding-bottom: 0; }
.footer { margin-top: clamp(80px, 10vw, 128px); padding: clamp(48px, 6vw, 72px) 0 40px; background: var(--surface); border-radius: 40px 40px 0 0; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-bottom: 32px; border-bottom: 1.5px dashed var(--line); }
.footer .logo img { height: 50px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; padding: 0; font-weight: 700; }
.footer-nav a { display: inline-block; padding: 6px 0; }
.footer-info { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding-top: 28px; font-size: 14px; color: var(--muted); line-height: 1.9; }
.footer-info .cs { text-align: right; }
.footer-info .cs strong { display: block; font-family: var(--font-en); font-size: 30px; font-weight: 700; color: var(--text); line-height: 1.2; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--radius); background: var(--card); box-shadow: 0 0 0 1px var(--line); font-weight: 600; color: var(--text); transition: box-shadow 200ms ease; }
.footer-links a i { font-size: 16px; color: var(--orange-d); }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { box-shadow: 0 0 0 1.5px var(--orange); } }
.footer-info .copy { grid-column: 1 / -1; margin-top: 8px; font-family: var(--font-en); }

/* 안내 토스트 */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 80; padding: 14px 22px; border-radius: var(--radius); background: var(--text); color: var(--bg); font-weight: 600; transform: translate(-50%, 20px); opacity: 0; transition: opacity 250ms ease, transform 300ms var(--slow); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { max-width: 520px; width: 100%; margin: 0 auto; }
  .banner .hero-in { grid-template-columns: 1fr; row-gap: 0; }
  /* 모바일 순서: 제목 → 설명 → 사진 → 아이콘 4개 → 레벨 테스트 버튼 */
  .banner .hero-copy { display: contents; }
  .banner .hero-art { order: 1; margin-top: 28px; }
  .banner .points { order: 2; }
  .banner .btn.level { order: 3; }
  .banner .hero-art { max-width: 640px; }
  .banner .hero-art .main { width: 100%; margin-left: 0; }
  .btn.level { width: 100%; }
  .steps { grid-template-columns: 1fr; align-items: stretch; padding-top: 0; }
  .steps::before, .steps::after, .step-dot { display: none; }
  .steps > li:nth-child(n) .step { --h: 200px; }
  .tiles { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .tile { min-height: 240px; }
  .tile:nth-child(1) { grid-column: 1 / -1; }
  .tile:nth-child(2) { grid-column: auto; grid-row: auto; }
  .tile:nth-child(2) img { width: 36%; right: 6%; bottom: -10%; }
  .call-row { grid-template-columns: 1fr; }
  .page-head-in { grid-template-columns: 1fr; }
  .page-art { order: -1; aspect-ratio: 4 / 3; margin: 0 calc(var(--gutter) * -1); }
  .page-art img { object-position: 80% 50%; }
  .page-art::before { width: 70%; top: 6%; right: 8%; }
  .page-art.chars.n2 .ch1 { right: 40%; width: 32%; bottom: 4%; }
  .page-art.chars.n2 .ch2 { right: 12%; width: 30%; }
  .page-art.chars.n1 .ch1 { right: 22%; width: 46%; }
  .page-art.chars.obj .ch2 { left: 6%; width: 30%; }
  .page-art.chars.obj .ch2.seal { left: 4%; width: 34%; }
  /* 모바일: 원 지름 70%, 4:3 상자 기준으로 다시 가운데 맞춤 */
  .page-art.chars.obj .ch.ob-house { width: 64%; right: 11%; bottom: 22.6%; }
  .page-art.chars.obj .ch.ob-note { width: 60%; right: 13%; bottom: 17.3%; }
  .page-art.chars.obj .ch.ob-map { width: 46%; right: 20%; bottom: 9.3%; }
  .page-art.chars.obj .ch.ob-faq { width: 48%; right: 19%; bottom: 9.3%; }
  .page-art.round { aspect-ratio: 1000 / 1024; width: min(100%, 360px); margin: 0 auto; justify-self: center; }
  .footer-info { grid-template-columns: 1fr; }
  .footer-info .cs { text-align: left; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .channel { grid-template-columns: 44px 1fr auto; padding: 14px 16px; gap: 12px; }
  .channel .ic { width: 44px; height: 44px; font-size: 20px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .points { justify-content: space-between; gap: 6px; }
  .banner h1 { font-size: 9.2vw; }
  .hero.banner::before { width: 46vw; right: -16vw; top: -14vw; }
  .tile:nth-child(1) img { width: 56%; bottom: -6%; }
}