/* 학원 홈페이지 톤 — 채용사이트 v2(careers-v2.css)와 같은 색·글꼴·떠 있는 상자 (2026-10-23 사용자 결정)
   헤더 partial 에서 불러온다(페이지 <style> 뒤라 같은 선택자면 이쪽이 이긴다). 새 페이지 스타일도 이 토큰을 쓴다 */
:root{--v2-orange-ink:#C2410C;--v2-navy:#0c1840;--v2-navy2:#172d5b;--v2-orange:#F15A29;--v2-ink:#111827;--v2-text:#3b4453;--v2-muted:#6b7280;--v2-line:#e6e9f0;--v2-bg-alt:#f6f7fa;
  --v2-lift:0 1px 2px rgba(17,24,39,.05),0 10px 28px rgba(17,24,39,.08);
  --v2-lift-hover:0 2px 4px rgba(17,24,39,.06),0 20px 44px rgba(17,24,39,.13);
  --v2-face:linear-gradient(165deg,#fff 0%,#fff 55%,#fff3ec 100%);
  --v2-dark:linear-gradient(150deg,#172d5b 0%,#0c1840 100%);
  --line:#e6e9f0;--bg:#f6f7fa}

/* 글꼴 — 채용지원서(/apply)는 손대지 않는다 */
body:not(:has(#recruit-form)){font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;background:#fff;letter-spacing:-.01em}
body:not(:has(#recruit-form)) .stat-card .stat-num{font-family:inherit}

/* 페이지 머리말 — 어두운 남색 띠 대신 밝은 바탕 + 큰 남색 제목 + 고래 (data-whale 로 페이지마다 다른 고래) */
.pg-hero,.honor-hero{background:linear-gradient(180deg,#f6f7fa 0%,#fff 100%);color:var(--v2-ink);border-bottom:1px solid var(--v2-line);position:relative;overflow:hidden;padding:52px 0 40px}
.pg-hero::before,.honor-hero::before{display:none}
.pg-hero::after,.honor-hero::after{content:"";position:absolute;right:max(20px,calc((100% - 1180px)/2));bottom:-4px;width:200px;height:190px;background:url(/images/careers-mascot-welcome.webp) center bottom/contain no-repeat;filter:drop-shadow(0 16px 22px rgba(17,24,39,.14));pointer-events:none}
[data-whale="demo"]::after{background-image:url(/images/careers-mascot-demo.webp)}
[data-whale="contact"]::after{background-image:url(/images/careers-mascot-contact.webp)}
[data-whale="benefit"]::after{background-image:url(/images/careers-mascot-benefit.webp)}
[data-whale="pool"]::after{background-image:url(/images/careers-mascot-pool.webp)}
[data-whale="review"]::after{background-image:url(/images/careers-mascot-review.webp)}
[data-whale="interview"]::after{background-image:url(/images/careers-mascot-interview.webp)}
[data-whale="apply"]::after{background-image:url(/images/careers-mascot-apply.webp)}
[data-whale="evolution"]::after{background-image:url(/images/careers-whale-evolution-v3.webp)}
/* 학원 캐릭터(2026-10-24) — 프로그램 머리말: 학년별 두 친구, 개요는 여섯 명 */
[data-whale="kids-elementary"]::after{background-image:url(/images/characters/pair-elementary.webp)}
[data-whale="kids-middle"]::after{background-image:url(/images/characters/pair-middle.webp)}
[data-whale="kids-high"]::after{background-image:url(/images/characters/pair-high.webp)}
[data-whale="kids-all"]::after{background-image:url(/images/characters/group.webp);width:300px}
[data-whale="kids-all"] h1{padding-right:300px}
@media(max-width:768px){[data-whale="kids-all"]::after{width:120px}[data-whale="kids-all"] h1{padding-right:0;margin-right:120px}}
.pg-hero .container,.honor-hero .container{position:relative;z-index:1}
.pg-hero h1,.honor-hero h1{color:var(--v2-navy);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:900;letter-spacing:-.03em;padding-right:200px}
.pg-hero .breadcrumb,.pg-hero .breadcrumb a,.honor-hero .breadcrumb,.honor-hero .breadcrumb a{color:var(--v2-muted)}
.pg-hero .breadcrumb a:hover,.honor-hero .breadcrumb a:hover{color:var(--v2-orange)}
.pg-hero .breadcrumb .sep,.honor-hero .breadcrumb .sep{color:#c3c8d2}
.pg-hero .badge,.honor-hero .badge{background:#fff1eb;color:var(--v2-orange-ink,#C2410C)}
.pg-hero p{color:var(--v2-text)}
.honor-hero-pill{background:#fff;color:var(--v2-navy);border:1px solid var(--v2-line);box-shadow:var(--v2-lift)}
.honor-hero-pill:hover{background:#fff;border-color:var(--v2-orange);color:var(--v2-orange);box-shadow:var(--v2-lift-hover)}
.honor-hero-pill.primary{background:var(--v2-orange);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(241,90,41,.25)}
@media(max-width:768px){
  .pg-hero,.honor-hero{padding:34px 0 28px}
  /* 폰에서는 바로가기 버튼이 여러 줄이라 고래를 제목 옆(위쪽)에 둔다 */
  .pg-hero::after,.honor-hero::after{width:96px;height:92px;right:8px;top:58px;bottom:auto}
  .pg-hero h1,.honor-hero h1,.pg-hero .badge,.honor-hero .badge{margin-right:96px}
  .pg-hero h1,.honor-hero h1{padding-right:0}
}

/* 바로가기 줄 */
.pg-jump{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--v2-line);box-shadow:none}

/* 구역 — 흰 바탕·연회색 교차, 주황은 작은 머리글에만 */
.section.alt{background:var(--v2-bg-alt)}
.pg-stage{border-bottom:0}
.pg-stage:nth-of-type(even){background:var(--v2-bg-alt)}
.tag,.stage-tag,.track-tag{background:#fff1eb;color:var(--v2-orange-ink,#C2410C);border:0}
.section-title{color:var(--v2-navy);letter-spacing:-.03em}
.section-desc{color:var(--v2-muted)}

/* 떠 있는 흰 상자 — 위드피플 고래 상자와 같은 면·그림자 */
.card,.pg-card,.stat-card,.center-card,.info-box,.faq-item,.lt-panel,.qz-card,.notice-card,.blog-card,.cal-card,.ev-item,.ins-fe-card,.doc-card,.rs-card,.grade-result,.quiz-promo,.achievement-card,.review-card{
  background:var(--v2-face);border:1px solid var(--v2-line);box-shadow:var(--v2-lift);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.pg-card:hover,.stat-card:hover,.center-card:hover,.blog-card:hover,.ev-item:hover,.doc-card:hover,.rs-card:hover,.achievement-card:hover,.ins-fe-card:hover{transform:translateY(-5px);box-shadow:var(--v2-lift-hover);border-color:#f3d3c6}
.blog-card,.faq-item,.ev-item{background:#fff}
.stat-card::before{background:var(--v2-orange)}
.room-item{background:var(--v2-bg-alt)}

/* 어두운 상자는 모두 같은 남색 한 가지 (보라·청록·빨강·갈색 없앰) */
.dark-card,.banner-card,.pool-card,.dday-card,.dday-card.center,.dday-card.gifted,.dday-card.science,.dday-card.autonomous,.dday-card.csat,.hs-card{background:var(--v2-dark);box-shadow:0 14px 30px rgba(12,24,64,.18)}
.dday-card .corner-badge{background:rgba(241,90,41,.9);border-color:transparent}

/* 프로그램 — 4가지 트랙: 원색 그라데이션 대신 흰 상자 위 고래 */
.track-visual{background:var(--v2-face) !important;color:var(--v2-navy);border:1px solid var(--v2-line);box-shadow:var(--v2-lift)}
.track-visual::before{display:none !important}
.track-visual .track-icon{font-size:0;width:150px;height:150px;margin:0 auto 6px;background:center/contain no-repeat;filter:drop-shadow(0 14px 18px rgba(17,24,39,.16))}
.track-visual.gifted-school .track-icon{background-image:url(/images/careers-whale-creativity-v2.webp)}
.track-visual.science-high .track-icon{background-image:url(/images/careers-whale-critical-v2.webp)}
.track-visual.autonomous .track-icon{background-image:url(/images/careers-whale-collaboration-v2.webp)}
.track-visual.medical .track-icon{background-image:url(/images/careers-whale-empathy-v3.webp)}
.track-visual .track-num{color:var(--v2-orange)}
.track-visual .track-stat-num{color:var(--v2-navy)}
.track-visual .track-stat-num .unit{color:var(--v2-orange)}
.track-visual .track-stat-label{color:var(--v2-muted)}
.track-features li{background:#fff;border:1px solid var(--v2-line);border-left:3px solid var(--v2-orange);border-radius:12px}
.grade-btn{background:#fff !important;border:1px solid var(--v2-line) !important;color:var(--v2-navy) !important;box-shadow:var(--v2-lift)}
.grade-btn:hover,.grade-btn.active{border-color:var(--v2-orange) !important;color:var(--v2-orange) !important}

/* 학년·연도 탭 — 선택은 남색 */
.year-tab.active,.gn-stage.active{background:var(--v2-navy2);color:#fff;border-color:transparent}

/* 버튼 */
.btn-outline{background:#fff;border:1px solid #d3d8e3;color:var(--v2-navy)}
.btn-outline:hover{border-color:var(--v2-orange);color:var(--v2-orange)}

/* 후기 카드 — 학원소식 페이지 스타일을 공통으로 (명예의전당 후기 카드에 스타일이 없던 문제도 같이 해결) */
.review-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.review-tab{background:#fff;border:1px solid var(--line);color:var(--navy2);padding:9px 18px;border-radius:999px;font-weight:800;font-size:.88rem;cursor:pointer;font-family:inherit;transition:all .2s}
.review-tab:hover{border-color:var(--gold)}
.review-tab.active{background:linear-gradient(135deg,#172d5b,#0c1840);color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(23,45,91,.22)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1024px){.review-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.review-grid{grid-template-columns:1fr}}
.review-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;transition:all .25s;position:relative;overflow:hidden}
.review-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(7,19,33,.1);border-color:var(--gold)}
.review-card.is-hidden{display:none}
.review-card::before{content:"\201C";position:absolute;top:14px;right:24px;font-size:4.5rem;color:rgba(241,90,41,.08);font-family:Georgia,serif;line-height:1}
.review-quote{margin:0 0 20px;color:var(--text);font-size:.92rem;line-height:1.75;font-weight:600;flex:1;position:relative;z-index:1}
.review-quote strong{color:var(--navy2);background:linear-gradient(180deg,transparent 60%,rgba(241,90,41,.18) 60%);padding:0 4px}
.review-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.review-avatar{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#172d5b,#1f4a7a);color:var(--gold2);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.96rem}
.review-meta{flex:1;min-width:0}
.review-name{display:block;color:var(--navy2);font-weight:900;font-size:.92rem;margin-bottom:2px}
.review-detail{display:block;color:var(--soft);font-size:.78rem;font-weight:700}
.review-badge{display:inline-block;font-size:.72rem;font-weight:900;padding:3px 10px;border-radius:999px;background:rgba(241,90,41,.14);color:#b34800;letter-spacing:.04em;margin-bottom:10px;align-self:flex-start;position:relative;z-index:1}
.review-badge.parent{background:rgba(31,74,122,.14);color:#1f4a7a}
.review-badge.student{background:rgba(10,138,122,.16);color:#066b5e}
.video-card{background:linear-gradient(135deg,#172d5b,#0c1840 60%,#16365c);color:#fff;border:none;cursor:pointer}
.video-card::before{content:""}
.video-card .review-quote{color:rgba(255,255,255,.92)}
.video-card .review-quote strong{color:var(--gold2);background:none}
.video-card .review-name{color:#fff}
.video-card .review-detail{color:rgba(255,255,255,.7)}
.video-card .review-author{border-top-color:rgba(180,248,255,.18)}
.review-card{background:var(--v2-face);box-shadow:var(--v2-lift)}
.review-card:hover{transform:translateY(-5px);box-shadow:var(--v2-lift-hover);border-color:#f3d3c6}
.review-card.video-card{background:var(--v2-dark)}
.review-badge.student{background:#fff1eb;color:#b34800}
.review-tab.active{background:var(--v2-navy2)}
.review-section{background:var(--v2-bg-alt)}

/* 명예의전당 첫 화면(최근 5년 실적) — 금빛 그라데이션 대신 연회색, 연도 선택은 남색 */

/* 학년 페이지(/programs/{elementary,middle,high}) 과정 고르기 — 헤더 프로그램 버튼으로 들어와 여기서 하부 과정을 고른다 (2026-11-03 사용자 결정) */
.pg-pick{background:#fff;border-bottom:1px solid var(--v2-line,#e6e9f0);padding:28px 0 30px}
.pg-pick-h{margin:0 0 14px;color:var(--v2-navy,#0c1840);font-size:1.05rem;font-weight:900;letter-spacing:-.01em}
/* 「○○ 과정을 골라 보세요」 — 크게, 학년색 띠(초등 옐로우·중등 그린·고등 네이비, 센터소개 층 표시와 같은 색) 2026-11-03 사용자 요청 */
.pg-pick[aria-label] .pg-pick-h{width:fit-content;justify-self:start;padding:7px 18px;border-radius:999px;font-size:1.35rem;line-height:1.3}
.pg-pick[aria-label^="초등"] .pg-pick-h{background:#FFC93C;color:var(--v2-navy,#0c1840)}
.pg-pick[aria-label^="중등"] .pg-pick-h{background:#23794A;color:#fff}
.pg-pick[aria-label^="고등"] .pg-pick-h{background:var(--v2-navy,#0c1840);color:#fff}
@media(max-width:600px){.pg-pick[aria-label] .pg-pick-h{font-size:1.12rem;padding:6px 14px}}
.pg-pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.pg-pick-grid a{display:flex;flex-direction:column;gap:4px;padding:16px 16px 15px;background:#fff;border:1px solid var(--v2-line,#e6e9f0);border-radius:14px;box-shadow:0 4px 14px rgba(12,24,64,.05);transition:border-color .15s,transform .15s,box-shadow .15s}
.pg-pick-grid a:hover,.pg-pick-grid a:focus-visible{border-color:var(--v2-orange,#F15A29);transform:translateY(-2px);box-shadow:0 10px 24px rgba(12,24,64,.1)}
/* 입체 카드 — 센터소개 층 버튼과 같은 결: 위가 밝은 그라데이션 + 아래 두께선 + 부드러운 그림자, 누르면 눌림 (2026-11-03 사용자 요청) */
.pg-pick-grid a{background:linear-gradient(180deg,#fff 0%,#f3f6fb 100%);border-color:#d9e0ea;box-shadow:0 3px 0 #c9d2df,0 8px 18px rgba(12,24,64,.08),inset 0 1px 0 #fff}
.pg-pick-grid a:hover,.pg-pick-grid a:focus-visible{transform:translateY(-3px);box-shadow:0 6px 0 #c9d2df,0 16px 28px rgba(12,24,64,.13),inset 0 1px 0 #fff}
.pg-pick-grid a:active{transform:translateY(2px);box-shadow:0 1px 0 #c9d2df,0 3px 8px rgba(12,24,64,.08),inset 0 1px 0 #fff}
.pg-pick-grid a .ic{filter:drop-shadow(0 2px 2px rgba(12,24,64,.18))}
/* 학년색 제목 띠도 아래 두께선으로 입체감 */
.pg-pick[aria-label^="초등"] .pg-pick-h{box-shadow:0 3px 0 #d9a21c,0 6px 14px rgba(12,24,64,.12);background:linear-gradient(180deg,#FFD45E,#FFC93C)}
.pg-pick[aria-label^="중등"] .pg-pick-h{box-shadow:0 3px 0 #175a36,0 6px 14px rgba(12,24,64,.14);background:linear-gradient(180deg,#2c8d57,#23794A)}
.pg-pick[aria-label^="고등"] .pg-pick-h{box-shadow:0 3px 0 #050c24,0 6px 14px rgba(12,24,64,.18);background:linear-gradient(180deg,#1b2d63,#0c1840)}
@media (prefers-reduced-motion:reduce){.pg-pick-grid a:hover,.pg-pick-grid a:focus-visible,.pg-pick-grid a:active{transform:none}}
.pg-pick-grid .ic{font-size:1.6rem;line-height:1}
.pg-pick-grid strong{color:var(--v2-navy,#0c1840);font-size:1rem;font-weight:900;letter-spacing:-.01em}
.pg-pick-grid strong::after{content:" →";color:var(--v2-orange,#F15A29)}
.pg-pick-grid span:not(.ic){color:#4b5563;font-size:.82rem;line-height:1.5}
.pg-pick-more{margin:12px 0 0;color:#4b5563;font-size:.85rem}
.pg-pick-more a{color:var(--v2-navy,#0c1840);font-weight:800;text-decoration:underline;text-underline-offset:3px}
@media(max-width:480px){.pg-pick{padding:20px 0 22px}.pg-pick-grid{grid-template-columns:1fr 1fr;gap:8px}.pg-pick-grid a{padding:12px}.pg-pick-grid span:not(.ic){display:none}}

/* 학년 페이지 「과정 고르기」 → 아래 책 (2026-11-03 사용자 요청) — 스크립트 /js/program-book.js. 남색·주황 두 색만 */
.pg-pick-grid a[aria-current]{border-color:var(--v2-orange,#F15A29);background:linear-gradient(180deg,#fffaf7,#ffeee6);box-shadow:0 3px 0 #f0b49c,0 8px 18px rgba(241,90,41,.14),inset 0 1px 0 #fff}
.pg-books{padding:8px 0 72px}
.pg-books-hint{margin:18px 0 0;padding:22px;border:1px dashed var(--v2-line,#e6e9f0);border-radius:16px;text-align:center;color:#4b5563;font-size:.92rem}
.pg-book{display:grid;grid-template-columns:1fr 1fr;position:relative;margin-top:22px;background:#fffdf9;border:1px solid var(--v2-line,#e6e9f0);border-radius:8px 20px 20px 8px;box-shadow:0 22px 44px rgba(12,24,64,.12),-6px 0 0 -1px #e9e4da;scroll-margin-top:150px}
.pg-book[hidden]{display:none}
.pg-book-l,.pg-book-r{padding:36px 38px}
.pg-book-l{box-shadow:inset -22px 0 22px -22px rgba(12,24,64,.16)}
.pg-book-r{background:#fffdf9;border-radius:0 20px 0 0;box-shadow:inset 22px 0 22px -22px rgba(12,24,64,.16)}
.pg-book-more{grid-column:1 / -1;border-top:1px solid var(--v2-line,#e6e9f0);padding:8px 0 12px}
.pg-book-more > section{background:transparent}
.pg-book-more > section:nth-of-type(even){background:rgba(12,24,64,.025)}
.pg-book-more > section .container{max-width:none;padding-left:38px;padding-right:38px}
.pg-book-loading{margin:0;padding:28px 38px;color:#4b5563;font-size:.92rem}
.pg-book.is-open .pg-book-more{animation:pgBookFade .6s .35s ease both}
.pg-book-l .sd-head{flex-direction:column;gap:14px;margin:0}
.pg-book-l .sd-titles{min-width:0}
.pg-book-r .sd-features{grid-template-columns:1fr 1fr}
.pg-book-r .sd-strip{grid-template-columns:1fr}
.pg-book.is-open .pg-book-l{animation:pgBookFade .5s ease both}
.pg-book.is-open .pg-book-r{transform-origin:left center;animation:pgBookOpen .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes pgBookFade{from{opacity:0}to{opacity:1}}
@keyframes pgBookOpen{from{transform:perspective(1600px) rotateY(-120deg);opacity:0}to{transform:perspective(1600px) rotateY(0);opacity:1}}
@keyframes pgBookOpenV{from{transform:perspective(1200px) rotateX(-90deg);opacity:0}to{transform:none;opacity:1}}
@media(max-width:800px){
  .pg-book{grid-template-columns:1fr;border-radius:16px}
  .pg-book-l,.pg-book-r{box-shadow:none}
  .pg-book-more > section .container{padding-left:20px;padding-right:20px}
  .pg-book-loading{padding:22px 20px}
  .pg-book-l,.pg-book-r{padding:24px 20px}
  .pg-book-r{border-top:1px dashed var(--v2-line,#e6e9f0);border-radius:0 0 16px 16px}
  .pg-book.is-open .pg-book-r{transform-origin:top center;animation-name:pgBookOpenV}
}
@media(max-width:480px){.pg-book-r .sd-features{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pg-book.is-open .pg-book-l,.pg-book.is-open .pg-book-r,.pg-book.is-open .pg-book-more{animation:none}}
/* 과정 내용 슬라이드 (2026-11-03 사용자 요청 — 책 두 쪽은 좁아 잘려서 슬라이드로) — program-book.js 가 .is-flip 을 붙인다.
   PPT 처럼 왼쪽 = 전체 장 미리보기(세로), 오른쪽 = 지금 장(높이는 내용만큼) + 아래 이전/다음. 폰은 미리보기를 아래 가로 줄로 */
.pg-book.is-flip{display:grid;grid-template-columns:184px minmax(0,1fr);grid-template-areas:"thumbs slide" "thumbs nav";align-items:start;padding:0;border-radius:20px;overflow:hidden}
.pg-book.is-flip .pg-leaves{grid-area:slide;min-width:0;background:#fff;aspect-ratio:16/9;overflow:hidden;position:relative}
.pg-book.is-flip .pg-page{min-width:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
.pg-book.is-flip .pg-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.pg-fit{min-width:0}
.pg-book.is-flip .pg-page[hidden]{display:none}
.pg-book.is-flip .pg-fit > section{padding:22px 0 20px!important;margin:0!important;min-height:0!important;background:transparent}
.pg-book.is-flip .pg-fit > section .container{max-width:none;padding-left:44px;padding-right:44px}
.pg-book.is-flip .pg-book-nav{grid-area:nav}
.pg-book-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 16px;border-top:1px solid var(--v2-line,#e6e9f0);background:#fbfcfe}
.pg-book-nav[hidden]{display:none}
.pg-turn{appearance:none;border:1px solid #d9e0ea;background:linear-gradient(180deg,#fff,#f3f6fb);color:var(--v2-navy,#0c1840);font:inherit;font-size:.9rem;font-weight:800;padding:9px 18px;border-radius:999px;cursor:pointer;box-shadow:0 3px 0 #c9d2df,0 6px 14px rgba(12,24,64,.08);transition:transform .15s,box-shadow .15s,color .15s}
.pg-turn:hover:not(:disabled),.pg-turn:focus-visible{transform:translateY(-2px);box-shadow:0 5px 0 #c9d2df,0 10px 20px rgba(12,24,64,.12);color:var(--v2-orange,#F15A29)}
.pg-turn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #c9d2df}
.pg-turn:disabled{opacity:.4;cursor:default}
.pg-count{min-width:64px;text-align:center;color:#4b5563;font-size:.88rem;font-weight:800;font-variant-numeric:tabular-nums}
/* 왼쪽 미리보기 줄 */
.pg-thumbs{grid-area:thumbs;align-self:stretch;display:flex;flex-direction:column;gap:12px;padding:16px 14px;background:#eef2f8;border-right:1px solid #d9e0ea;overflow-y:auto;overscroll-behavior:contain;height:0;min-height:100%}
/* ↑ height:0 + min-height:100% — 미리보기 줄은 칸 높이를 늘리지 않고, 지금 장(+아래 버튼 줄) 높이만큼만 차지한 뒤 안에서 스크롤 (사용자 요청) */
.pg-thumbs[hidden]{display:none}
.pg-thumb{appearance:none;display:flex;flex-direction:column;gap:6px;width:152px;padding:0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;flex-shrink:0}
.pg-thumb-view{display:block;position:relative;width:150px;height:85px;overflow:hidden;background:#fff;border:1px solid #d9e0ea;border-radius:8px;box-shadow:0 2px 0 #c9d2df,0 4px 10px rgba(12,24,64,.08);transition:transform .15s,border-color .15s,box-shadow .15s}
.pg-thumb-inner{display:block;position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0;transform:scale(var(--pg-thumb-scale,.15));pointer-events:none}
.pg-thumb-inner .pg-page{height:100%;overflow:hidden}
.pg-thumb-inner .pg-fit > section{padding:24px 0!important;margin:0!important;background:transparent}
.pg-thumb-inner .container{max-width:none;padding-left:38px;padding-right:38px}
.pg-thumb-inner *{animation:none!important;transition:none!important}
.pg-thumb-media{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;background:#0c1840;color:#fff;font-size:120px;border-radius:24px}
.pg-thumb-cap{display:flex;gap:6px;align-items:baseline;color:#4b5563;font-size:.74rem;font-weight:700;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pg-thumb-cap b{color:var(--v2-navy,#0c1840);font-weight:900;margin-right:5px}
.pg-thumb:hover .pg-thumb-view,.pg-thumb:focus-visible .pg-thumb-view{transform:translateY(-2px);border-color:#9fb0c8}
.pg-thumb[aria-current] .pg-thumb-view{border:2px solid var(--v2-orange,#F15A29);box-shadow:0 3px 0 #f0b49c,0 6px 14px rgba(241,90,41,.18)}
.pg-thumb[aria-current] .pg-thumb-cap,.pg-thumb[aria-current] .pg-thumb-cap b{color:var(--v2-orange-ink,#C2410C)}
/* 넘김 움직임 — 옆에서 미끄러져 들어온다 */
.pg-book.is-flip .pg-page{background:#fff}
.pg-book.is-flip .pg-page.is-in-next,.pg-book.is-flip .pg-page.is-in-prev{position:relative;z-index:2;box-shadow:0 0 0 1px rgba(12,24,64,.04),-18px 0 36px rgba(12,24,64,.16)}
.pg-book.is-flip .pg-page.is-in-prev{box-shadow:0 0 0 1px rgba(12,24,64,.04),18px 0 36px rgba(12,24,64,.16)}
.pg-book.is-flip .pg-page.is-in-next{animation:pgPushIn .62s cubic-bezier(.22,1,.36,1) both}
.pg-book.is-flip .pg-page.is-in-prev{animation:pgPushInB .62s cubic-bezier(.22,1,.36,1) both}
.pg-book.is-flip .pg-page.is-out-next,.pg-book.is-flip .pg-page.is-out-prev{position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none;transform-origin:50% 50%}
.pg-book.is-flip .pg-page.is-out-next{animation:pgPushOut .62s cubic-bezier(.22,1,.36,1) both}
.pg-book.is-flip .pg-page.is-out-prev{animation:pgPushOutB .62s cubic-bezier(.22,1,.36,1) both}
@keyframes pgPushIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes pgPushInB{from{transform:translateX(-100%)}to{transform:none}}
@keyframes pgPushOut{from{transform:none;opacity:1;filter:none}to{transform:translateX(-22%) scale(.92);opacity:0;filter:blur(2px)}}
@keyframes pgPushOutB{from{transform:none;opacity:1;filter:none}to{transform:translateX(22%) scale(.92);opacity:0;filter:blur(2px)}}
@media(max-width:800px){
  .pg-book.is-flip{grid-template-columns:minmax(0,1fr);grid-template-areas:"slide" "nav" "thumbs";border-radius:16px}
  .pg-book.is-flip .pg-leaves{aspect-ratio:auto}
  .pg-book.is-flip .pg-page{height:auto;overflow:visible}
  .pg-book.is-flip .pg-body{overflow:visible}
  .pg-thumb-inner .pg-page{height:auto}
  .pg-thumbs{flex-direction:row;height:auto;min-height:0;overflow-x:auto;overflow-y:hidden;border-right:0;border-top:1px solid #d9e0ea;padding:12px}
  .pg-thumb{width:118px}
  .pg-thumb-view{width:116px;height:74px}
  .pg-book.is-flip .pg-fit > section{padding:24px 0 20px!important}
  .pg-book.is-flip .pg-fit > section .container{padding-left:18px;padding-right:18px}
  .pg-book-nav{gap:10px}
  .pg-turn{padding:9px 14px}
}
.pg-book-lead{margin:0 0 20px;color:var(--v2-text,#3b4453);font-size:1rem;line-height:1.75}
/* 책 안의 요약 묶음 — program-detail.css 의 .sd-* 와 같은 모양 */
.pg-book .sd-head{display:flex;gap:24px;align-items:flex-start;margin-bottom:32px;flex-wrap:wrap}
.pg-book .sd-icon{font-size:3.4rem;line-height:1;flex-shrink:0}
.pg-book .sd-titles{flex:1;min-width:260px}
.pg-book .sd-tag{display:inline-block;background:#fff1eb;color:var(--v2-orange-ink,#C2410C);padding:4px 12px;border-radius:999px;font-size:.76rem;font-weight:900;letter-spacing:.06em;margin-bottom:10px}
.pg-book .sd-titles h2{margin:0 0 10px;color:var(--v2-navy,#0c1840);font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:900;letter-spacing:-.02em}
.pg-book .sd-titles p{margin:0;color:var(--soft);font-size:.98rem;line-height:1.7;max-width:720px}
.pg-book .sd-features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media(max-width:900px){.pg-book .sd-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pg-book .sd-features{grid-template-columns:1fr}}
.pg-book .sd-feat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px}
.pg-book .sd-feat strong{display:block;color:var(--navy2);font-size:.94rem;font-weight:900;margin-bottom:6px}
.pg-book .sd-feat span{color:var(--soft);font-size:.84rem;line-height:1.55}
.pg-book .sd-strip{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
@media(max-width:600px){.pg-book .sd-strip{grid-template-columns:1fr}}
.pg-book .sd-row{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:14px 18px}
.pg-book .sd-row strong{display:block;color:var(--navy2);font-size:.74rem;font-weight:900;letter-spacing:.08em;margin-bottom:4px}
.pg-book .sd-row span{color:var(--ink);font-size:.92rem;line-height:1.55}
.pg-book .sd-cta{display:flex;gap:10px;flex-wrap:wrap}
.pg-book .sd-cta .btn{margin:0}
.pg-book-l .sd-head{flex-direction:column;gap:14px;margin:0}
.pg-book-l .sd-titles{min-width:0}
.pg-book-r .sd-features{grid-template-columns:1fr 1fr}
.pg-book-r .sd-strip{grid-template-columns:1fr}
@media(max-width:480px){.pg-book-r .sd-features{grid-template-columns:1fr}}
/* 더 나눌 수 없는 장(탭 표 등, program-book.js 가 data-tight) — 위아래 여백을 줄여 16:9 에 맞춘다 */
@media(min-width:801px){.pg-book.is-flip .pg-page[data-tight] .pg-fit > section{padding:12px 0 8px!important}}
/* ── 슬라이드 덱 (2026-11-03 사용자 요청: 진짜 PPT 처럼) — program-book.js 의 addChrome·titleSlide·pointsSlide·markTitle
   학년색: 초등 옐로우 · 중등 그린 · 고등 네이비(과정 고르기 제목 띠와 같은 색) */
.pg-book[data-grade="el"]{--pg-g:#FFC93C;--pg-g-ink:#0c1840;--pg-g-soft:#fff6dc}
.pg-book[data-grade="mid"]{--pg-g:#23794A;--pg-g-ink:#fff;--pg-g-soft:#e6f3ec}
.pg-book[data-grade="high"]{--pg-g:#0c1840;--pg-g-ink:#fff;--pg-g-soft:#e8ecf5}
/* 머리줄·바닥줄 */
.pg-slide-head,.pg-slide-foot{flex:none;display:flex;align-items:center;gap:10px;height:36px;padding:0 22px;font-size:.74rem;line-height:1;color:#4b5563;background:#fff}
.pg-slide-head{border-bottom:1px solid #e6e9f0;box-shadow:inset 0 3px 0 var(--pg-g,#0c1840)}
.pg-slide-foot{border-top:1px solid #e6e9f0}
.pg-sh-grade{padding:4px 9px;border-radius:999px;background:var(--pg-g,#0c1840);color:var(--pg-g-ink,#fff);font-weight:900;letter-spacing:.02em}
.pg-sh-course{color:var(--v2-navy,#0c1840);font-weight:900}
.pg-sh-label{margin-left:auto;color:#6b7280;font-weight:700;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.pg-sf-brand{color:var(--v2-navy,#0c1840);font-weight:900;letter-spacing:-.01em}
.pg-sf-cta{margin-left:auto;color:var(--v2-orange-ink,#C2410C);font-weight:800;text-decoration:none}
.pg-sf-cta:hover,.pg-sf-cta:focus-visible{text-decoration:underline;text-underline-offset:3px}
.pg-sf-cta::after{content:" →"}
.pg-sf-no{min-width:46px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--v2-navy,#0c1840)}
/* 본문 장 제목 통일 — 왼쪽 큰 제목, 머리표는 머리줄로 */
.pg-book.is-flip .pg-eyebrow{display:none}
.pg-book.is-flip .pg-slide-hwrap{text-align:left;margin-left:0;margin-right:0;max-width:none}
.pg-book.is-flip .pg-slide-h{margin:0 0 10px;padding:0;color:var(--v2-navy,#0c1840);font-size:clamp(1.5rem,2.3vw,1.95rem);font-weight:900;line-height:1.25;letter-spacing:-.03em;text-align:left;text-wrap:balance}
.pg-book.is-flip .pg-slide-h::after{content:"";display:block;width:44px;height:4px;margin-top:12px;border-radius:2px;background:var(--pg-g,#F15A29)}
.pg-book[data-grade="el"].is-flip .pg-slide-h::after{background:var(--v2-orange,#F15A29)}
.pg-book.is-flip .pg-slide-lead{margin:0 0 22px;max-width:64ch;color:#4b5563;font-size:.98rem;line-height:1.7;text-align:left}
/* 1장 표지 */
.pg-book.is-flip .pg-fit > section.pg-ts{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch;min-height:100%;padding:0!important;background:linear-gradient(180deg,#fff 0%,#fff 60%,var(--pg-g-soft,#f3f6fb) 100%)}
.pg-slide-title .pg-fit{height:100%}
.pg-ts-text{display:flex;flex-direction:column;justify-content:center;padding:34px 20px 30px 48px;min-width:0}
.pg-ts-title{margin:0;color:var(--v2-navy,#0c1840);font-size:clamp(2.1rem,4vw,3.1rem);font-weight:900;line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.pg-ts-tag{margin:14px 0 0;color:var(--v2-orange,#F15A29);font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.pg-ts-lead{margin:16px 0 0;max-width:46ch;color:#3b4453;font-size:.98rem;line-height:1.75}
.pg-ts-facts{display:grid;gap:0;margin:22px 0 0;max-width:520px}
.pg-ts-facts > div{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:10px 0;border-top:1px solid #e1e6ee}
.pg-ts-facts > div:last-child{border-bottom:1px solid #e1e6ee}
.pg-ts-facts dt{color:var(--v2-navy,#0c1840);font-size:.82rem;font-weight:900}
.pg-ts-facts dd{margin:0;color:#3b4453;font-size:.9rem;line-height:1.5}
.pg-ts-art{position:relative;display:flex;align-items:flex-end;justify-content:center;min-width:0;overflow:hidden}
.pg-ts-art::before{content:"";position:absolute;left:50%;bottom:-18%;width:118%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:var(--pg-g,#FFC93C);opacity:.22}
.pg-ts-art img{position:relative;display:block;width:auto;height:88%;max-width:92%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(12,24,64,.18))}
/* 2장 핵심 포인트 */
.pg-book.is-flip .pg-fit > section.pg-pts{padding:30px 48px 26px!important}
.pg-pts-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px;margin:18px 0 0;padding:0;list-style:none;counter-reset:pts}
.pg-pts-list li{display:grid;gap:6px;padding:18px 0 16px;border-top:2px solid var(--pg-g,#0c1840)}
.pg-pts-list strong{color:var(--v2-navy,#0c1840);font-size:1.18rem;font-weight:900;letter-spacing:-.02em}
.pg-pts-list span{color:#4b5563;font-size:.94rem;line-height:1.6}
.pg-book[data-grade="el"] .pg-pts-list li{border-top-color:#e8b21f}
@media(max-width:800px){
  .pg-slide-head,.pg-slide-foot{height:34px;padding:0 14px;font-size:.7rem}
  .pg-sh-label{display:none}
  .pg-book.is-flip .pg-fit > section.pg-ts{grid-template-columns:1fr;min-height:0}
  .pg-ts-text{padding:24px 18px 8px}
  .pg-ts-art{height:200px}
  .pg-ts-art img{height:100%}
  .pg-book.is-flip .pg-fit > section.pg-pts{padding:22px 18px!important}
  .pg-pts-list{grid-template-columns:1fr;gap:0}
}
@media(min-width:801px){
  .pg-book.is-flip .pg-slide-points .pg-fit{min-height:100%;display:flex;flex-direction:column;justify-content:center}
}
/* 더 나눌 수 없는 탭 표 장(data-tight)은 머리줄·바닥줄을 접고 위 학년색 선만 — 표가 16:9 에 들어가게 */
@media(min-width:801px){
  .pg-book.is-flip .pg-page[data-tight] .pg-slide-head,.pg-book.is-flip .pg-page[data-tight] .pg-slide-foot{display:none}
  .pg-book.is-flip .pg-page[data-tight]{box-shadow:inset 0 3px 0 var(--pg-g,#0c1840)}
}
/* 과정별 주제 구역 거르기(program-book.js topics) — 구역 자체 display 규칙보다 hidden 이 이기게 */
[data-topic-wrap][hidden],[data-topic-wrap] [data-topic][hidden],[data-topic-wrap] .section-head[hidden]{display:none!important}
/* 다른 과정을 고르면 앞 과정 슬라이드는 숨김 — .pg-book.is-flip{display:grid} 보다 hidden 이 이기게 (2026-11-04 버그 수정) */
.pg-book.is-flip[hidden]{display:none}
/* 학년별 키 (2026-11-04 사용자 요청: 사이트 어디서든 학생 학년에 맞게) — 두 친구 그림(pair-*)을 고등 = 100% 기준으로
   중등 91% · 초등 74% (로드맵 「친구들」 개별 그림의 키 비율과 같음). 발끝(아래 가운데)을 기준으로 줄여 바닥선은 그대로 */
img[src*="/characters/pair-elementary"]{transform:scale(.74);transform-origin:50% 100%}
img[src*="/characters/pair-middle"]{transform:scale(.91);transform-origin:50% 100%}
[data-whale="kids-elementary"]::after{background-size:auto 74%}
[data-whale="kids-middle"]::after{background-size:auto 91%}

/* 중등 진로교육 — 전국 학교 지도 (2026-11-04, /js/school-map.js) — 학원 톤: 남색·주황 + 떠 있는 흰 상자.
   종류 색: 전국단위 자사고 남색 · 전국단위 자율고 초록 · 영재학교 주황 */
.sm-sec{padding:56px 0 64px;background:var(--v2-bg-alt,#f6f7fa)}
.sm-title{margin:0 0 8px;color:var(--v2-navy,#0c1840);font-size:clamp(1.45rem,2.6vw,1.95rem);font-weight:900;letter-spacing:-.03em;line-height:1.25;text-align:center;text-wrap:balance}
.sm-lead{margin:0 auto 22px;max-width:60ch;color:#4b5563;font-size:.97rem;line-height:1.7;text-align:center}
.sm-box{background:#fff;border:1px solid var(--v2-line,#e6e9f0);border-radius:20px;box-shadow:0 10px 30px rgba(12,24,64,.08);padding:20px 22px 16px}
.sm-k-jasago{--sm-c:#0c1840}
.sm-k-auto{--sm-c:#23794A}
.sm-k-gifted{--sm-c:#F15A29}
.sm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.sm-chip{appearance:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid #d9e0ea;border-radius:999px;background:linear-gradient(180deg,#fff,#f3f6fb);color:var(--v2-navy,#0c1840);font:inherit;font-size:.86rem;font-weight:800;cursor:pointer;box-shadow:0 2px 0 #c9d2df;transition:transform .15s,box-shadow .15s,opacity .15s}
.sm-chip i{width:10px;height:10px;border-radius:50%;background:var(--sm-c)}
.sm-chip b{font-weight:900;font-variant-numeric:tabular-nums;color:var(--sm-c)}
.sm-chip:hover,.sm-chip:focus-visible{transform:translateY(-1px);box-shadow:0 3px 0 #c9d2df,0 6px 12px rgba(12,24,64,.08)}
.sm-chip:focus-visible{outline:3px solid var(--v2-orange,#F15A29);outline-offset:2px}
.sm-chip[aria-pressed="false"]{opacity:.45;box-shadow:none;background:#f3f5f9}
.sm-chip[aria-pressed="false"] i{background:transparent;box-shadow:inset 0 0 0 2px var(--sm-c)}
.sm-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:start}
.sm-stage{min-width:0}
.sm-svg{display:block;width:100%;height:auto;overflow:visible}
.sm-pv{stroke:#fff;stroke-width:1.2}
.sm-m1{fill:#dfe5f1}.sm-m2{fill:#e6ebf4}.sm-m3{fill:#d8dfee}.sm-m4{fill:#e9edf5}.sm-m5{fill:#dde3f0}.sm-m6{fill:#e3e8f2}.sm-m7{fill:#d5ddec}.sm-m8{fill:#e1e6f1}
.sm-line{fill:none;stroke:var(--sm-c);stroke-width:1;stroke-opacity:.45}
.sm-line.is-sel{stroke-width:1.6;stroke-opacity:1}
.sm-label{fill:var(--sm-c);font-size:13px;font-weight:700;cursor:pointer}
.sm-label.is-sel{font-weight:900;text-decoration:underline;text-underline-offset:3px}
.sm-dot{fill:var(--sm-c);stroke:#fff;stroke-width:2;cursor:pointer;transition:r .2s}
.sm-dot:hover{r:8}
.sm-dot.is-sel{r:9;stroke-width:3;filter:drop-shadow(0 3px 5px rgba(12,24,64,.35))}
.sm-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.sm-card{min-height:96px;padding:16px;border-radius:14px;background:linear-gradient(180deg,#fbfcfe,#f3f6fb);border:1px solid #e1e6ee;display:flex;flex-direction:column;gap:6px;justify-content:center}
.sm-card-empty{margin:0;color:#4b5563;font-size:.88rem;line-height:1.6}
.sm-card-kind{display:inline-flex;align-items:center;gap:6px;color:var(--sm-c);font-size:.8rem;font-weight:900}
.sm-card-kind i{width:9px;height:9px;border-radius:50%;background:var(--sm-c)}
.sm-card-name{color:var(--v2-navy,#0c1840);font-size:1.3rem;font-weight:900;letter-spacing:-.02em}
.sm-card-meta{color:#3b4453;font-size:.92rem;font-weight:700}
.sm-list{display:flex;flex-direction:column;gap:12px}
.sm-group[hidden]{display:none}
.sm-group-h{display:flex;align-items:center;gap:6px;margin:0 0 6px;color:var(--v2-navy,#0c1840);font-size:.84rem;font-weight:900}
.sm-group-h i{width:9px;height:9px;border-radius:50%;background:var(--sm-c)}
.sm-group ul{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
.sm-group button{appearance:none;padding:5px 10px;border:1px solid #e1e6ee;border-radius:999px;background:#fff;color:#3b4453;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.sm-group button:hover,.sm-group button:focus-visible{border-color:var(--sm-c);color:var(--sm-c)}
.sm-group button:focus-visible{outline:2px solid var(--v2-orange,#F15A29);outline-offset:2px}
.sm-group button[aria-current]{background:var(--sm-c);border-color:var(--sm-c);color:#fff}
.sm-note{margin:12px 0 0;color:#6b7280;font-size:.8rem;line-height:1.6}
.sm-box.is-narrow .sm-label,.sm-box.is-narrow .sm-line{display:none}
@media(max-width:900px){.sm-body{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.sm-sec{padding:36px 0 40px}.sm-box{padding:14px 12px 12px;border-radius:16px}}
@media(prefers-reduced-motion:reduce){.sm-chip,.sm-dot,.sm-group button{transition:none}}
.sm-box.is-narrow .sm-dot{r:10;stroke-width:2.5}
.sm-box.is-narrow .sm-dot.is-sel{r:13}
.sm-group button[aria-current]:hover,.sm-group button[aria-current]:focus-visible{color:#fff}
.sm-k-busan{--sm-c:#2f6fd6}