/* 기존 사이트 기본 스타일 */
/* 홍대플라이미술학원 — 사이트 스타일 */
:root {
  --blue: #1c2cbc;
  --blue-deep: #1420a0;
  --blue-soft: #e9ecfb;
  --navy: #0b1446;
  --navy-2: #16226b;
  --ink: #12141f;
  --mute: #5a6275;
  --line: #e4e7ef;
  --soft: #f3f4f8;
  --paper: #ffffff;
  --lav: #c8b6ff;
  --pink: #ffaedb;
  --max: 76rem;
  --head: 4.6rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--soft);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.55;
  word-break: keep-all;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--blue); color: #fff; }

.shell { width: min(100% - 2.75rem, var(--max)); margin-inline: auto; }
.eyebrow { color: var(--blue); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.2rem; padding: 0 1.6rem; border-radius: 999px;
  font-weight: 650; font-size: 0.98rem; border: 0; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn--fill { background: var(--blue); color: #fff; }
.btn--fill:hover { background: var(--blue-deep); }
.btn--line { border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; background: transparent; }
.btn--line:hover { background: rgba(255, 255, 255, 0.1); }
.btn--ink { border: 1px solid var(--navy); color: var(--navy); background: transparent; }
.btn--ink:hover { background: var(--navy); color: #fff; }
.btn--sm { min-height: 2.6rem; padding: 0 1.1rem; font-size: 0.88rem; }

/* 상단 바 ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(18, 20, 31, 0.06);
}
.topbar__in { display: flex; align-items: center; gap: 0.9rem; min-height: var(--head); }
.brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.brand__logo { height: 1.7rem; width: auto; }
.brand__name { display: none; color: var(--navy); font-size: 0.86rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.menu { display: none; margin-left: auto; align-items: center; gap: 0.7rem; }
.menu__item { position: relative; }
.menu__item > a {
  position: relative; display: block; padding: 1.35rem 0.5rem;
  color: var(--navy); font-size: 0.92rem; font-weight: 600; white-space: nowrap;
  transition: color 0.25s ease;
}
.menu__item > a::after {
  content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.95rem; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease;
}
.menu__item:hover > a, .menu__item:focus-within > a, .menu__item.is-open > a { color: var(--blue); }
.menu__item:hover > a::after, .menu__item:focus-within > a::after { transform: scaleX(1); }
.menu__drop {
  display: none; position: absolute; top: 100%; left: 0; z-index: 31;
  min-width: 12.5rem; padding: 0.5rem; border-radius: 0.8rem;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(11, 20, 70, 0.12);
}
.menu__item:hover .menu__drop, .menu__item:focus-within .menu__drop, .menu__item.is-open .menu__drop { display: block; }
.menu__drop a { display: block; padding: 0.62rem 0.8rem; border-radius: 0.5rem; color: var(--navy); font-size: 0.9rem; font-weight: 600; }
.menu__drop a:hover { background: var(--blue-soft); color: var(--blue); }
.topbar__side { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.topbar__cta { display: none; }
.burger { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; background: transparent; color: var(--navy); cursor: pointer; }

/* 모바일 메뉴 -------------------------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(11, 20, 70, 0.55); }
.sheet[hidden] { display: none; }
.sheet__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(100%, 21rem); background: #fff; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); }
.sheet__head strong { font-size: 1.05rem; }
.sheet__head p { color: var(--mute); font-size: 0.82rem; }
.sheet__close { border: 0; background: transparent; color: var(--navy); font-weight: 700; cursor: pointer; }
.sheet__body { flex: 1; overflow: auto; padding: 0.4rem 1.3rem 1rem; }
.sheet__group { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.sheet__title { display: block; color: var(--navy); font-weight: 800; font-size: 1rem; }
.sheet__group a:not(.sheet__title) { display: block; padding: 0.32rem 0; color: #3a4158; font-size: 0.92rem; }
.sheet__foot { display: grid; gap: 0.6rem; padding: 1rem 1.3rem; border-top: 1px solid var(--line); }

/* 메인 첫 화면 --------------------------------------------------------- */
.cover {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: min(calc(100svh - var(--head)), 48rem);
  background:
    radial-gradient(1000px 560px at 76% 42%, rgba(60, 90, 230, 0.5), transparent 62%),
    radial-gradient(640px 460px at 8% 100%, rgba(200, 182, 255, 0.22), transparent 60%),
    radial-gradient(520px 420px at 96% 96%, rgba(255, 174, 219, 0.14), transparent 60%),
    linear-gradient(176deg, #141f70 0%, var(--navy) 100%);
  color: #f7f8fc;
}
.cover__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 1.4s ease; }
.cover__canvas.is-ready { opacity: 1; }
@media (max-width: 799px) { .cover__canvas.is-ready { opacity: 0.38; } }
.cover__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 2rem 0 2.2rem; }
.cover__copy > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.cover__copy > :nth-child(2) { animation-delay: 0.1s; }
.cover__copy > :nth-child(3) { animation-delay: 0.2s; }
.cover__copy > :nth-child(4) { animation-delay: 0.3s; }
.cover__copy > :nth-child(5) { animation-delay: 0.42s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.tag {
  display: inline-block; margin: 0 0 1.2rem; padding: 0.4rem 0.95rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: var(--lav); font-size: 0.84rem; font-weight: 700;
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both, tagglow 5.2s ease-in-out infinite;
}
@keyframes tagglow { 0%, 100% { color: var(--lav); } 50% { color: #fff; } }
.cover__title { max-width: 15em; color: #fff; font-size: clamp(2.6rem, 5.6vw, 4.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.16; }
.cover__title span { background: linear-gradient(92deg, #9fb0ff 0%, #c8b6ff 55%, #ffaedb 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover__sub { margin: 1.2rem 0 0; max-width: 36rem; color: rgba(247, 248, 252, 0.86); font-size: 1.1rem; line-height: 1.7; }
.cover__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.6rem; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.8rem; margin: 2.4rem 0 0; }
.facts li { display: flex; flex-direction: column; padding-left: 0.9rem; border-left: 2px solid var(--lav); }
.facts strong { font-size: 1.3rem; letter-spacing: -0.03em; }
.facts span { margin-top: 0.15rem; color: rgba(247, 248, 252, 0.72); font-size: 0.88rem; }
.facts small { display: block; margin-top: 0.1rem; color: rgba(247, 248, 252, 0.45); font-size: 0.7rem; }

/* 안내 띠 ------------------------------------------------------------ */
.ticker { padding: 1.4rem 0 0; }
.ticker__in { display: flex; align-items: center; gap: 0.5rem; }
.ticker__nav { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px; background: #fff; color: var(--navy); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 14px rgba(11, 20, 70, 0.08); }
.ticker__window { flex: 1; min-width: 0; overflow: hidden; border-radius: 0.9rem; }
.ticker__stage { display: flex; width: 100%; transition: transform 0.4s ease; }
.ticker__slide {
  position: relative; display: flex; flex: 0 0 100%; align-items: center; gap: 1rem;
  min-height: 6.4rem; padding: 0.9rem 1.25rem; overflow: hidden;
  background: linear-gradient(126deg, var(--navy) 0%, var(--blue) 58%, #7a5fd8 100%); color: #fff;
}
.ticker__bg { position: absolute; right: -0.6rem; top: 50%; width: 7rem; height: 7rem; opacity: 0.3; transform: translateY(-50%); animation: tilt 10s ease-in-out infinite; pointer-events: none; }
.ticker__bg svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tilt { 0%, 100% { transform: translateY(-50%) rotate(-2deg); } 50% { transform: translate(-0.3rem, calc(-50% - 0.25rem)) rotate(2deg); } }
.ticker__slide > :not(.ticker__bg) { position: relative; z-index: 1; }
.ticker__icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.ticker__icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ticker__copy { display: flex; flex-direction: column; min-width: 0; }
.ticker__copy span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); }
.ticker__copy strong { margin-top: 0.2rem; font-size: 1.2rem; }
@media (min-width: 800px) {
  .ticker__slide { min-height: 7.2rem; padding: 1.1rem 1.6rem; }
  .ticker__bg { right: 1rem; width: 8.6rem; height: 8.6rem; }
  .ticker__icon { width: 3.6rem; height: 3.6rem; }
  .ticker__icon svg { width: 26px; height: 26px; }
  .ticker__copy span { font-size: 1rem; }
  .ticker__copy strong { font-size: 1.8rem; }
}

/* 공통 블록 ------------------------------------------------------------ */
.block { padding: 4.8rem 0 0; }
.block__title, .callout h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -0.04em; color: var(--navy); }
.is-home .block__title { display: flex; align-items: center; gap: 0.5rem; }
.is-home .block__title::before { content: ""; flex: none; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--blue); opacity: 0.35; animation: blink 4s ease-in-out infinite; }
@keyframes blink { 0%, 72%, 100% { opacity: 0.3; } 86% { opacity: 1; } }
.block__sub { margin: 1.1rem 0 0; font-size: 1.4rem; font-weight: 750; color: var(--navy); animation: subtone 6s ease-in-out infinite; }
@keyframes subtone { 0%, 100% { color: var(--navy); } 50% { color: var(--blue); } }
.block__note { max-width: 42rem; margin: 0.75rem 0 0; color: var(--mute); line-height: 1.7; }
.more { display: inline-block; margin-top: 1.1rem; color: var(--blue); font-weight: 700; }
.more:hover { color: var(--blue-deep); }

/* 합격 숫자 ------------------------------------------------------------ */
.tally { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); gap: 0.9rem; margin-top: 1.6rem; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1; padding: 1.1rem 0.6rem 1rem; border: 1px solid var(--line); border-radius: 1.1rem;
  background: #fff; color: var(--navy); text-align: center;
  box-shadow: 0 10px 22px rgba(11, 20, 70, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tile strong { color: var(--blue); font-size: clamp(2.4rem, 3.8vw, 3.1rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }
.tile em { margin-left: 0.1rem; color: var(--mute); font-size: 1.05rem; font-style: normal; font-weight: 650; }
.tile span { display: block; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
.tile span::before { content: ""; display: block; width: 2.6rem; height: 3px; margin: 0.3rem auto 0.45rem; border-radius: 3px; background: var(--blue); transform: scaleX(0.58); transform-origin: center; transition: transform 0.2s ease; }
.tile:hover { transform: translateY(-6px); border-color: #b9c1f5; box-shadow: 0 18px 30px rgba(11, 20, 70, 0.14); }
.tile:hover span::before { transform: scaleX(1); }
.tally__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.3rem; margin-top: 1.4rem; }
.tally__links a { color: var(--blue); font-weight: 700; }
.tally__links .btn { color: #fff; }
.tally__toggle { display: none; margin-top: 1rem; padding: 0; border: 0; background: transparent; color: var(--navy); font-weight: 800; cursor: pointer; }
@media (max-width: 799px) {
  .tally { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .tile { padding: 0.6rem 0.25rem 0.5rem; border-radius: 0.8rem; }
  .tile strong { font-size: 1.9rem; }
  .tile em { font-size: 0.82rem; }
  .tile span { font-size: 0.78rem; }
  .tile span::before { width: 1.2rem; margin: 0.2rem auto 0.3rem; }
  .tally.is-folded .tile:nth-child(n + 13) { display: none; }
  .tally__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .tally__bar .tally { grid-column: 1 / -1; }
  .tally__bar .tally__links { display: contents; }
  .tally__bar .tally__toggle, .tally__bar .tally__links a {
    display: flex; align-items: center; justify-content: center; min-height: 2.6rem; margin: 0.9rem 0 0; padding: 0.35rem 0.2rem;
    border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy);
    font-size: clamp(0.66rem, 2.7vw, 0.8rem); font-weight: 800; letter-spacing: -0.04em; white-space: nowrap;
  }
}

/* 수업 방식 ------------------------------------------------------------ */
.flow { display: grid; gap: 0.8rem; margin: 1.3rem 0 0; }
.flow__item { position: relative; display: flex; align-items: center; gap: 0.9rem; overflow: hidden; height: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 0.8rem; background: #fff; color: var(--mute); font-size: 0.86rem; line-height: 1.5; }
.flow__item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left center; }
.flow__num { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border: 1px solid var(--line); border-radius: 0.7rem; background: var(--blue-soft); }
.flow__num i { color: #7d86a0; font-style: normal; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; }
.flow__num b { margin-top: 0.15rem; color: var(--navy); font-size: 2rem; font-weight: 800; letter-spacing: -0.06em; line-height: 0.9; }
.flow__copy strong { display: block; margin-bottom: 0.2rem; color: var(--navy); font-size: 1.12rem; letter-spacing: -0.03em; }
@keyframes flowcard { 0%, 30%, 100% { transform: none; border-color: var(--line); box-shadow: none; } 6%, 22% { transform: translateY(-6px); border-color: #b9c1f5; box-shadow: 0 16px 28px rgba(11, 20, 70, 0.12); } }
@keyframes flowbar { 0%, 30%, 100% { transform: scaleX(0); } 8%, 22% { transform: scaleX(1); } }
@keyframes flowink { 0%, 4%, 30%, 100% { color: var(--navy); } 8%, 22% { color: var(--blue); } }
.flow__item, .flow__item::after, .flow__num b { animation-duration: 4.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.flow__item { animation-name: flowcard; }
.flow__item::after { animation-name: flowbar; }
.flow__num b { animation-name: flowink; }
.flow li:nth-child(2) .flow__item, .flow li:nth-child(2) .flow__item::after, .flow li:nth-child(2) .flow__num b { animation-delay: 0.84s; }
.flow li:nth-child(3) .flow__item, .flow li:nth-child(3) .flow__item::after, .flow li:nth-child(3) .flow__num b { animation-delay: 1.68s; }
.flow li:nth-child(4) .flow__item, .flow li:nth-child(4) .flow__item::after, .flow li:nth-child(4) .flow__num b { animation-delay: 2.52s; }

/* 교육과정 카드 -------------------------------------------------------- */
.tracks { display: grid; gap: 1.2rem; margin-top: 1.5rem; }
.track { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 1rem; background: #fff; box-shadow: 0 10px 22px rgba(11, 20, 70, 0.05); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.track:hover, .track:focus-within { transform: translateY(-5px); border-color: #c9d0f0; box-shadow: 0 16px 28px rgba(11, 20, 70, 0.11); }
.track__photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 1rem 1rem 0 0; background: var(--navy); }
.track__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.track:hover .track__photo img { transform: scale(1.04); }
.track__body { display: flex; flex: 1; flex-direction: column; padding: 1.2rem 1.3rem 1.4rem; }
.chip { display: inline-block; padding: 0.22rem 0.65rem; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 0.78rem; font-weight: 700; }
.chip--pink { background: #ffe3f1; color: #c0287b; }
.track h3 { margin: 0.6rem 0 0; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--navy); }
.track__body > p { margin: 0.55rem 0 0; color: var(--mute); line-height: 1.65; font-size: 0.95rem; }
.track__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.9rem; }
.track__meta span { display: inline-flex; align-items: center; min-height: 1.85rem; padding: 0.1rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-size: 0.75rem; font-weight: 700; }
.track .more { margin-top: auto; padding-top: 1rem; animation: nudge 3s ease-in-out infinite; }
@keyframes nudge { 0%, 62%, 100% { transform: translateX(0); } 76% { transform: translateX(5px); } }
.tracks .track:nth-child(2) .more { animation-delay: 0.5s; }
.tracks .track:nth-child(3) .more { animation-delay: 1s; }
.tracks .track:nth-child(4) .more { animation-delay: 1.5s; }
.tracks .track:nth-child(5) .more { animation-delay: 2s; }
.tracks .track:nth-child(6) .more { animation-delay: 2.5s; }
@media (min-width: 700px) { .tracks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tracks { grid-template-columns: repeat(3, 1fr); } }

/* 가로 스크롤 레일 (작품·릴스) ------------------------------------------ */
.rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.rail__nav { display: flex; gap: 0.45rem; }
.rail__nav button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--navy); border-radius: 50%; background: transparent; color: var(--navy); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.rail__nav button:hover { background: var(--navy); color: #fff; }
.rail__nav button:disabled { opacity: 0.28; cursor: default; background: transparent; color: var(--navy); }
.rail__scroller { margin-top: 0.8rem; padding: 0.5rem 0.15rem 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.rail__scroller::-webkit-scrollbar { display: none; }
.rail__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail__track { display: flex; gap: 0.9rem; width: 100%; }
.clip, .piece {
  position: relative; display: flex; flex: 0 0 72%; flex-direction: column; justify-content: flex-end; overflow: hidden;
  scroll-snap-align: start; border-radius: 0.85rem; background: var(--navy-2); color: #fff;
  box-shadow: 0 10px 18px rgba(11, 20, 70, 0.12); transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.clip { aspect-ratio: 9 / 16; }
.piece { aspect-ratio: 4 / 3; cursor: pointer; border: 0; padding: 0; font: inherit; text-align: left; }
.clip img, .piece img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip__cap, .piece__cap { position: relative; z-index: 1; padding: 1.6rem 0.9rem 0.75rem; background: linear-gradient(transparent, rgba(11, 20, 70, 0.82)); font-size: 0.84rem; font-weight: 600; }
.clip__mark { position: absolute; z-index: 1; top: 0.8rem; right: 0.8rem; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 50%; transition: background 0.2s ease, transform 0.2s ease; }
.clip__mark svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; }
.clip:hover, .piece:hover { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(11, 20, 70, 0.26); }
.clip:hover .clip__mark { background: var(--blue); border-color: var(--blue); transform: scale(1.08); }
@media (min-width: 700px) { .clip { flex-basis: calc((100% - 1.8rem) / 3); } .piece { flex-basis: calc((100% - 0.9rem) / 2); } }
@media (min-width: 1000px) { .clip { flex-basis: calc((100% - 3.6rem) / 5); } .piece { flex-basis: calc((100% - 2.7rem) / 4); } }

/* 채널 --------------------------------------------------------------- */
.channels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-top: 1.4rem; }
.channel { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 1.15rem 0.6rem 1rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; color: var(--navy); font-size: 0.92rem; font-weight: 700; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.channel small { color: var(--mute); font-size: 0.75rem; font-weight: 500; }
.channel__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--navy); color: #fff; transition: background 0.2s ease; }
.channel__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.channel:hover { transform: translateY(-4px); border-color: #b9c1f5; box-shadow: 0 14px 24px rgba(11, 20, 70, 0.1); }
.channel:hover .channel__icon { background: var(--blue); }
@media (min-width: 700px) { .channels { grid-template-columns: repeat(4, 1fr); } }

/* 자주 묻는 질문 -------------------------------------------------------- */
.qa { margin-top: 0.7rem; }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { padding: 1.1rem 0; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; color: var(--navy); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; color: var(--blue); font-weight: 800; transition: transform 0.2s ease; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { margin: 0 0 1.1rem; color: var(--mute); line-height: 1.75; }
.qa details p a { color: var(--blue); font-weight: 700; }
.jumps { display: flex; justify-content: center; gap: 0.6rem; margin: 1.8rem auto 0; }
.jump { flex: 1 1 0; max-width: 14rem; display: flex; align-items: center; justify-content: center; padding: 0.78rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-size: 0.92rem; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 18px rgba(11, 20, 70, 0.06); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.jump:hover { transform: translateY(-4px); border-color: #b9c1f5; box-shadow: 0 16px 28px rgba(11, 20, 70, 0.12); color: var(--blue); }

/* 상담 유도 ------------------------------------------------------------ */
.callout { padding: 3.6rem 0 5rem; }
.callout__box { position: relative; overflow: hidden; padding: 2.6rem 1.5rem; border-radius: 1.25rem; background: var(--navy); color: #fff; }
.callout__logo { position: absolute; right: -8%; top: 50%; width: min(70%, 24rem); height: auto; opacity: 0.08; transform: translateY(-48%) rotate(-6deg); pointer-events: none; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.07; } 50% { opacity: 0.18; } }
.callout__box > :not(.callout__logo) { position: relative; z-index: 1; }
.callout h2 { color: #fff; }
.callout p { margin: 0.75rem 0 0; max-width: 32rem; color: rgba(255, 255, 255, 0.82); line-height: 1.7; }
.callout .cover__actions { margin-top: 1.5rem; }
.callout .btn--line { border-color: rgba(255, 255, 255, 0.5); }
@media (min-width: 800px) { .callout__box { padding: 3.6rem 3.8rem; } }

/* 푸터 ---------------------------------------------------------------- */
.foot { background: var(--navy); color: #f7f8fc; }
.foot__grid { display: grid; gap: 2.6rem; padding: 4rem 0; }
.foot__logo { width: 7.5rem; height: auto; }
.foot__name { margin-top: 0.9rem; font-size: 1.15rem; font-weight: 700; }
.foot__slogan { max-width: 20rem; margin-top: 0.6rem; color: rgba(247, 248, 252, 0.7); font-size: 0.92rem; }
.foot address { margin-top: 1.2rem; color: rgba(247, 248, 252, 0.85); font-style: normal; font-size: 0.92rem; line-height: 1.75; }
.foot__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.foot__actions .btn--line { border-color: rgba(247, 248, 252, 0.35); min-height: 2.75rem; padding: 0 1.1rem; font-size: 0.9rem; }
.foot__links { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
.foot__links strong { display: block; font-size: 0.92rem; }
.foot__links ul { margin-top: 0.7rem; }
.foot__links li + li { margin-top: 0.4rem; }
.foot__links li a { color: rgba(247, 248, 252, 0.62); font-size: 0.88rem; }
.foot__links li a:hover { color: #fff; }
.foot__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.foot__bottom-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 1rem 0 5.6rem; color: rgba(247, 248, 252, 0.45); font-size: 0.75rem; }
.foot__legal { flex: 1 0 100%; margin-top: 0.4rem; color: rgba(247, 248, 252, 0.42); font-size: 0.66rem; line-height: 1.5; }
@media (min-width: 640px) { .foot__links { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1fr 2.2fr; } }

/* 모바일 하단 바 -------------------------------------------------------- */
.dock { position: fixed; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); left: 0.75rem; z-index: 25; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0.45rem; }
.dock a { display: flex; align-items: center; justify-content: center; height: 3.3rem; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 700; box-shadow: 0 10px 24px rgba(11, 20, 70, 0.18); }
.dock .is-main { background: var(--blue); color: #fff; }

@media (min-width: 1024px) {
  .brand__name { display: block; }
  .menu { display: flex; }
  .burger { display: none; }
  .topbar__side { margin-left: 0.8rem; }
  .topbar__cta { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.05rem; border-radius: 999px; background: var(--blue); color: #fff; font-size: 0.88rem; font-weight: 700; }
  .topbar__cta:hover { background: var(--blue-deep); }
  .dock { display: none; }
  .foot__bottom-in { padding-bottom: 1rem; }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .flow { grid-template-columns: repeat(4, 1fr); }
  .flow__item { gap: 0.7rem; padding: 0.7rem 0.8rem; }
  .flow__num { width: 3.9rem; height: 3.9rem; }
  .flow__num i { font-size: 0.55rem; }
  .flow__num b { font-size: 1.7rem; }
  .flow__copy strong { font-size: 1.02rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .menu__item > a { padding: 1.1rem 0.3rem; font-size: 0.8rem; }
  .brand__name { font-size: 0.78rem; }
}

/* 서브페이지 공통 ------------------------------------------------------- */
.pagehead { padding: 3.6rem 0 2.6rem; border-bottom: 1px solid var(--line); }
.pagehead .shell { animation: rise 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
.crumbs { color: #7d86a0; font-size: 0.78rem; }
.crumbs a:hover { color: var(--navy); }
.crumbs span { margin: 0 0.3rem; }
.pagehead .eyebrow { margin-top: 1rem; }
.pagehead h1 { max-width: 46rem; margin-top: 0.6rem; color: var(--navy); font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.2; }
.lead { max-width: 44rem; margin-top: 1rem; color: #3a4158; font-size: 1.08rem; line-height: 1.8; }
.pagebody { display: grid; gap: 2.6rem; padding: 2.8rem 0 4rem; }
.pagebody > * { min-width: 0; }
.panes, .panes > [data-pane], .figures, .rail, .rail__scroller { min-width: 0; max-width: 100%; }
.pagebody h2 { margin: 0 0 0.9rem; color: var(--navy); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; }
.pagebody h2 small { margin-left: 0.5rem; color: var(--mute); font-size: 0.82rem; font-weight: 600; }
.section-lead { max-width: 42rem; margin: -0.3rem 0 1rem; color: var(--mute); line-height: 1.7; }

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.pill { display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0 1.05rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.pill:hover { border-color: var(--blue); color: var(--blue); }
.pill.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

.panes > [data-pane] { display: none; }
.panes > [data-pane].is-on { display: block; }

/* 교육과정 허브 ---------------------------------------------------------- */
.hub { display: grid; gap: 1rem; }
.hub a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 15rem; padding: 1.5rem 1.4rem; border-radius: 1rem; overflow: hidden; background: var(--navy); color: #fff; }
.hub a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: transform 0.5s ease, opacity 0.3s ease; }
.hub a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 20, 70, 0.05), rgba(11, 20, 70, 0.9)); }
.hub a > * { position: relative; z-index: 1; }
.hub a:hover img { transform: scale(1.05); opacity: 0.62; }
.hub span { color: var(--lav); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; }
.hub strong { margin-top: 0.4rem; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.04em; }
.hub em { margin-top: 0.35rem; color: rgba(247, 248, 252, 0.76); font-style: normal; font-size: 0.92rem; }
@media (min-width: 700px) { .hub { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .hub { grid-template-columns: repeat(3, 1fr); } }

/* 과정 상세 ------------------------------------------------------------- */
.course-top { display: grid; gap: 1.4rem; }
.course-top__photo { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1rem; background: var(--navy); }
.course-top__photo img { width: 100%; height: 100%; object-fit: cover; }
.course-top__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.course-top__meta span { display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0 0.9rem; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 0.86rem; font-weight: 700; }
.fitlist { display: grid; gap: 0.5rem; }
.fitlist li { position: relative; padding: 0.85rem 1rem 0.85rem 2.4rem; border: 1px solid var(--line); border-radius: 0.75rem; background: #fff; line-height: 1.55; }
.fitlist li::before { content: ""; position: absolute; left: 1rem; top: 1.2rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--blue); }
.stages { display: grid; gap: 0.8rem; }
.stage { padding: 1.3rem 1.3rem 1.4rem; border-radius: 0.9rem; background: #fff; border: 1px solid var(--line); }
.stage::before { content: ""; display: block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--blue); margin-bottom: 0.8rem; }
.stage strong { display: block; color: var(--navy); font-size: 1.25rem; letter-spacing: -0.03em; }
.stage em { display: inline-block; margin-top: 0.5rem; padding: 0.2rem 0.65rem; border: 1px solid var(--navy); border-radius: 999px; color: var(--navy); font-style: normal; font-size: 0.78rem; font-weight: 700; }
.stage p { margin-top: 0.75rem; color: var(--mute); line-height: 1.65; font-size: 0.95rem; }
.pointlist { display: grid; gap: 0.55rem; max-width: 46rem; }
.pointlist li { display: flex; gap: 0.7rem; color: #3a4158; line-height: 1.65; }
.pointlist li::before { content: "✓"; flex: none; color: var(--blue); font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.05rem; border: 1px solid var(--blue); border-radius: 999px; background: #fff; color: var(--blue); font-size: 0.88rem; font-weight: 700; }
.chips span:nth-child(-n+2) { background: var(--blue); color: #fff; }
.figures { display: grid; gap: 1.1rem; }
.figures img { width: 100%; height: auto; border-radius: 0.9rem; background: #fff; box-shadow: 0 8px 18px rgba(11, 20, 70, 0.06); }
.timetable { overflow-x: auto; }
.timetable table { width: 100%; max-width: 40rem; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 0.8rem; background: #fff; font-size: 0.86rem; }
.timetable th, .timetable td { padding: 0.7rem 0.6rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.timetable th:last-child, .timetable td:last-child { border-right: 0; }
.timetable tr:last-child th, .timetable tr:last-child td { border-bottom: 0; }
.timetable thead th { background: #fff; color: var(--navy); font-weight: 700; }
.timetable tbody th { width: 7rem; background: var(--blue-soft); color: var(--navy); font-weight: 800; white-space: nowrap; }
.timetable .is-on { background: #eef0ff; color: var(--navy); font-weight: 700; }
.timetable .is-off { color: #9aa2b6; }
.timetable small { display: block; color: #8b93a8; font-size: 0.7rem; font-weight: 500; }
.enroll { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.6rem 1.5rem; border-radius: 1rem; background: var(--navy); color: #fff; }
.enroll strong { font-size: 1.25rem; letter-spacing: -0.03em; }
.enroll p { color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; }
.enroll .btn { margin-left: auto; }
.stepnav { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.stepnav a { display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-size: 0.86rem; font-weight: 700; }
.stepnav a.is-on, .stepnav a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (min-width: 800px) {
  .course-top { grid-template-columns: 1.15fr 1fr; align-items: center; }
  .stages { grid-template-columns: repeat(3, 1fr); }
}

/* 합격 명단 (대학별 2단) ------------------------------------------------- */
.roll { columns: 1; column-gap: 2.5rem; }
.roll__uni { break-inside: avoid; margin-bottom: 1.1rem; padding: 0.9rem 1.1rem 1rem; border-radius: 0.8rem; background: #fff; border: 1px solid var(--line); }
.roll__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.5rem; border-bottom: 2px solid var(--blue); }
.roll__head strong { color: var(--blue); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; }
.roll__head span { color: var(--blue); font-weight: 800; }
.roll__rows { margin-top: 0.5rem; }
.roll__rows li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; font-size: 0.92rem; }
.roll__rows li span:first-child { color: #3a4158; }
.roll__rows li span:last-child { color: var(--navy); font-weight: 700; white-space: nowrap; }
.roll__rows li b { margin-left: 0.3rem; padding: 0.08rem 0.45rem; border-radius: 999px; background: var(--blue); color: #fff; font-size: 0.7rem; font-weight: 800; }
@media (min-width: 700px) { .roll { columns: 2; } }
@media (min-width: 1100px) { .roll { columns: 3; } }
.awards { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 0.9rem; background: #fff; font-size: 0.9rem; }
.awards th, .awards td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; }
.awards thead th { background: var(--blue-soft); color: var(--navy); font-weight: 800; font-size: 0.82rem; }
.awards tr:last-child td { border-bottom: 0; }
.awards td:nth-child(2) { color: var(--blue); font-weight: 800; white-space: nowrap; }
.awards td:last-child { font-weight: 700; white-space: nowrap; }
.posters { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 40rem; }
.posters button { padding: 0; border: 1px solid var(--line); border-radius: 0.8rem; overflow: hidden; background: #fff; cursor: pointer; }
.posters img { width: 100%; height: auto; }
.posters figcaption { padding: 0.6rem; color: var(--mute); font-size: 0.82rem; text-align: center; }
.stat-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.stat-bar div { padding: 1.1rem 1.2rem; border-radius: 0.9rem; background: #fff; border: 1px solid var(--line); }
.stat-bar strong { display: block; color: var(--blue); font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.stat-bar span { display: block; margin-top: 0.45rem; color: var(--mute); font-size: 0.85rem; }
@media (min-width: 800px) { .stat-bar { grid-template-columns: repeat(4, 1fr); } }

/* 작품 게시판 (4열) ------------------------------------------------------ */
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.8rem; }
.board__item { margin: 0; }
.board__img { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 0.6rem; overflow: hidden; background: #fff; cursor: pointer; }
.board__img img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.4s ease; }
.board__img:hover img { transform: scale(1.04); }
.board__cap { padding: 0.5rem 0.15rem 0; }
.board__cap strong { display: block; color: var(--navy); font-size: 0.9rem; font-weight: 700; letter-spacing: -0.02em; }
.board__cap span { display: block; margin-top: 0.15rem; color: #8b93a8; font-size: 0.72rem; }
.board.is-folded .board__item:nth-child(n + 9) { display: none; }
.board__more { justify-self: center; margin: 1.2rem auto 0; display: block; }
@media (min-width: 700px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); } .board.is-folded .board__item:nth-child(n + 9) { display: block; } .board.is-folded .board__item:nth-child(n + 13) { display: none; } }
@media (min-width: 1000px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 1.1rem; } .board.is-folded .board__item:nth-child(n + 13) { display: block; } .board.is-folded .board__item:nth-child(n + 17) { display: none; } }
.grid-clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.grid-clips .clip { flex: none; width: 100%; scroll-snap-align: none; }
@media (min-width: 700px) { .grid-clips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-clips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 사진 크게 보기 -------------------------------------------------------- */
body.is-viewing { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 3.4rem; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(8, 12, 40, 0.94); }
.lightbox[hidden] { display: none; }
.lightbox img { grid-column: 2; grid-row: 2; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 7rem); margin: 0 auto; object-fit: contain; }
.lightbox button { border: 0; background: transparent; color: #fff; cursor: pointer; font: inherit; }
.lightbox__close { grid-column: 1 / -1; justify-self: end; margin: 0.85rem 1rem 0; min-height: 2.6rem; padding: 0.4rem 1rem; border-radius: 999px; background: var(--blue); font-weight: 800; }
.lightbox__prev, .lightbox__next { grid-row: 2; font-size: 2.4rem; line-height: 1; }
.lightbox__prev { grid-column: 1; } .lightbox__next { grid-column: 3; }
.lightbox__count { grid-column: 1 / -1; margin: 0; padding: 0.7rem 0 1rem; color: #fff; text-align: center; font-weight: 700; }

/* 학원소개 ------------------------------------------------------------- */
.greet { display: grid; gap: 1.6rem; }
.greet__photo { max-width: 26rem; border-radius: 1rem; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.greet__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.greet__photo figcaption { padding: 0.7rem 1rem; color: var(--mute); font-size: 0.85rem; }
.greet__text p { margin-top: 1rem; color: #3a4158; font-size: 1.06rem; line-height: 1.85; }
.greet__text p:first-child { margin-top: 0; }
.greet__sign { margin-top: 1.4rem; color: var(--navy); font-weight: 800; }
.greet__sign small { display: block; color: var(--mute); font-weight: 500; font-size: 0.82rem; }
@media (min-width: 800px) { .greet { grid-template-columns: minmax(16rem, 24rem) 1fr; align-items: start; gap: 2.6rem; } }
.staff { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.staff__card { display: flex; flex-direction: column; align-items: center; padding: 1.3rem 0.9rem 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.staff__card img { width: 7.2rem; height: 7.2rem; border-radius: 50%; object-fit: cover; background: var(--blue); }
.staff__card span { margin-top: 0.8rem; color: var(--blue); font-size: 0.78rem; font-weight: 700; }
.staff__card strong { margin-top: 0.15rem; color: var(--navy); font-size: 1.15rem; letter-spacing: 0.02em; }
.staff__card em { margin-top: 0.3rem; color: var(--mute); font-style: normal; font-size: 0.82rem; }
.staff__card:hover { transform: translateY(-6px); border-color: #b9c1f5; box-shadow: 0 16px 28px rgba(11, 20, 70, 0.12); }
@media (min-width: 700px) { .staff { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .staff { grid-template-columns: repeat(6, 1fr); } }
.timeline { position: relative; display: grid; gap: 0.9rem; max-width: 44rem; padding-left: 1.6rem; }
.timeline::before { content: ""; position: absolute; left: 0.35rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: #c9d0f0; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -1.6rem; top: 0.45rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #fff; }
.timeline strong { display: block; color: var(--blue); font-size: 1.05rem; font-weight: 800; }
.timeline p { margin-top: 0.15rem; color: #3a4158; line-height: 1.65; }
.branches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.branches span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1.1rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--navy); font-weight: 700; font-size: 0.9rem; }
.branches span:first-child { background: var(--blue); border-color: var(--blue); color: #fff; }
.spaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.spaces img { width: 100%; height: 12.5rem; object-fit: cover; border-radius: 0.8rem; }
@media (min-width: 800px) { .spaces { grid-template-columns: repeat(4, minmax(0, 1fr)); } .spaces img { height: 15rem; } }

/* 입시정보 ------------------------------------------------------------- */
.facts-grid { display: grid; gap: 1px; max-width: 46rem; background: var(--line); border: 1px solid var(--line); border-radius: 0.9rem; overflow: hidden; }
.facts-grid div { padding: 1.1rem 1.2rem; background: #fff; }
.facts-grid dt { color: #8b93a8; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; }
.facts-grid dd { margin: 0.4rem 0 0; color: var(--navy); font-weight: 600; line-height: 1.6; }
@media (min-width: 640px) { .facts-grid { grid-template-columns: 1fr 1fr; } }

/* 상담문의 (아카이브형) --------------------------------------------------- */
.contact__intro { max-width: 40rem; color: var(--navy); font-weight: 700; line-height: 1.8; }
.contact__box { display: grid; gap: 0.55rem; width: fit-content; min-width: min(100%, 24rem); margin-top: 1.4rem; padding: 1.3rem 1.6rem; border: 2px solid var(--navy); border-radius: 0.4rem; background: #fff; }
.contact__box div { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.8rem; font-size: 0.95rem; }
.contact__box dt { color: var(--mute); font-weight: 700; }
.contact__box dd { margin: 0; color: var(--navy); font-weight: 600; }
.contact__box dd a { color: var(--blue); }
.contact__phone { margin-top: 1.6rem; }
.contact__phone a { color: var(--blue); font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; }
.contact__phone p { margin-top: 0.3rem; color: var(--mute); font-size: 0.9rem; }
.contact__photos { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.contact__photos img { width: 7rem; height: 7rem; object-fit: cover; border-radius: 0.5rem; }
.contact__ways { display: grid; gap: 0.7rem; }
.way { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 0.9rem; background: #fff; }
.way strong { flex: 0 0 8rem; color: var(--blue); }
.way span { color: #3a4158; font-size: 0.95rem; }
.way .btn { margin-left: auto; }
.map-box { display: grid; gap: 1rem; }
.map-box__card { padding: 1.4rem 1.5rem; border-radius: 1rem; background: #fff; border: 1px solid var(--line); }
.map-box__card strong { display: block; color: var(--navy); font-size: 1.2rem; }
.map-box__card p { margin-top: 0.4rem; color: #3a4158; line-height: 1.7; }
.map-box__card .cover__actions { margin-top: 1.1rem; }
.map-box__photo { border-radius: 1rem; overflow: hidden; }
.map-box__photo img { width: 100%; height: 100%; min-height: 16rem; object-fit: cover; }
@media (min-width: 800px) { .map-box { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cover__canvas { opacity: 1; }
}

/* ==========================================================================
   3차 (2026-11) 아카이브 구성 위주. 하이섬은 파란 과정 구역·흐르는 띠·영문 숫자만 남김
   검정 + 흰색·#f8f8f8 + 포인트 한 색, 큰 제목, 둥근 카드와 알약 버튼
   ========================================================================== */
:root { --max: 84.375rem; --head: 5.5rem; --en: Oswald, "Pretendard Variable", Pretendard, sans-serif; --dark: #000; --pop: #3346ff; --pop-soft: #aab3ff; --gray: #6e6e73; --bg2: #f8f8f8; }
body { background: #fff; }
[hidden] { display: none !important; }
html.is-vbox { overflow: hidden; }

/* 머리글 */
.topbar { background: #000 !important; color: #fff; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.topbar__in { min-height: var(--head); position: relative; }
.brand__name { display: none; }
.brand__logo { filter: none; height: 2.5rem; width: auto; }
.menu__item > a { color: #fff !important; font-size: 1rem; font-weight: 500; }
.menu__item > a:hover { color: var(--pop-soft) !important; }
.menu__item > a::after { background: var(--pop-soft) !important; }
.topbar__tel { display: none; color: #fff; font-size: .95rem; white-space: nowrap; }
.topbar__cta { background: var(--pop) !important; color: #fff !important; border-radius: 99px; font-weight: 700; min-height: 3rem; padding-inline: 1.5rem; align-items: center; }
.topbar__cta:hover { background: #fff !important; color: var(--blue) !important; }
.burger { color: #fff !important; background: transparent !important; border: 0 !important; }
@media (min-width: 1240px) { .topbar__tel { display: inline; margin-right: .6rem; } }

/* 공통 */
.kicker { margin: 0 0 .9rem; color: var(--blue); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; }
.pillbtn { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.3rem; border-radius: 99px; background: var(--blue); color: #fff; font-weight: 700; font-size: .95rem; }
.pillbtn:hover { background: var(--pop); }
.reel-more { margin: 1.8rem 0 0; text-align: right; font-weight: 700; }
.reel-more a:hover { color: var(--blue); }

/* 흐르는 띠 */
.flow-row { overflow: hidden; }
.flow-row__track { display: flex; gap: .5rem; width: max-content; animation: flow-l 90s linear infinite; }
.flow-row:hover .flow-row__track { animation-play-state: paused; }
.flow-row img { height: 100%; width: auto; max-width: none; object-fit: cover; display: block; }
.flow-row--tall { height: clamp(14rem, 22vw, 20rem); margin-top: 4.5rem; }
.flow-row--tall .flow-row__track { height: 100%; }
@keyframes flow-l { to { transform: translateX(-50%); } }

/* 첫 화면 배너 */
.banner { position: relative; height: clamp(30rem, 50.3vw, 45rem); overflow: hidden; background: var(--blue); }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem; padding-inline: max(1.375rem, calc((100vw - var(--max)) / 2)); opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; overflow: hidden; }
.slide.is-on { opacity: 1; visibility: visible; }
.slide__copy { position: relative; z-index: 2; }
.sticker { display: inline-block; margin-bottom: 1.3rem; padding: .45rem .95rem; border-radius: .4rem; background: #fff; color: var(--blue); font-style: normal; font-weight: 800; font-size: clamp(.9rem, 1.35vw, 1.2rem); transform: rotate(-2deg); }
.slide h1, .slide h2 { margin: 0; font-size: clamp(2.7rem, 6.1vw, 5.6rem); font-weight: 900; line-height: 1.14; letter-spacing: -.04em; transform: rotate(-2deg); transform-origin: left center; }
.slide p { margin: 1.7rem 0 0; font-size: clamp(1rem, 1.6vw, 1.45rem); font-weight: 600; line-height: 1.45; }
.slide--a { background: repeating-conic-gradient(from 10deg at 22% 50%, #1c2cbc 0 7deg, #1a29ad 7deg 14deg); color: #fff; }
.slide--b { background: repeating-conic-gradient(from 10deg at 22% 50%, #fff 0 7deg, #f3f4ff 7deg 14deg); color: var(--blue); }
.slide--b .sticker { background: var(--blue); color: #fff; }
.slide--b p { color: #111; }
.slide--c { background: #000; color: #fff; }
.slide--c .sticker { background: var(--pop); color: #fff; }
.slide__art { position: relative; height: 100%; min-width: 0; }
.collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-content: center; transform: rotate(4deg) scale(1.08); }
.collage img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: .4rem solid #fff; border-radius: .6rem; box-shadow: 0 .7rem 1.7rem rgba(0,0,0,.35); }
.collage img:nth-child(3n+2) { transform: translateY(1.6rem); }
.sheetart { display: grid; place-items: start center; padding-top: 3rem; }
.sheetart img { width: min(100%, 31rem); border-radius: .6rem; box-shadow: 0 1rem 2.6rem rgba(28,44,188,.3); transform: rotate(3deg); }
.phones { display: flex; justify-content: center; align-items: center; gap: 1rem; }
.phones img { width: 31%; aspect-ratio: 9 / 16; object-fit: contain; background: #111; border: 1px solid #3a3a3a; border-radius: .9rem; }
.phones img:nth-child(2) { transform: translateY(-1.5rem); }
.banner__dots { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); display: flex; gap: .15rem; z-index: 3; }
.banner__dots button { width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.banner__dots button::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.35); opacity: .6; }
.banner__dots button.is-on::before { opacity: 1; background: var(--pop); border-color: #fff; }

/* 인사 + 동그라미 링크 */
.hello { padding: 4.8rem 0; background: #fff; }
.hello__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2.5rem; align-items: center; }
.hello h2 { margin: 0 0 1rem; font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.35; }
.hello p { margin: 0 0 1.4rem; color: var(--gray); line-height: 1.65; max-width: 30rem; }
.roundlinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.roundlink { display: grid; justify-items: center; gap: .8rem; font-weight: 700; font-size: .98rem; text-align: center; }
.roundlink span { width: 5.6rem; height: 5.6rem; border-radius: 50%; background: #f2f2f4; display: grid; place-items: center; transition: background .2s, color .2s; }
.roundlink svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.roundlink:hover span { background: var(--blue); color: #fff; }

/* 영상 */
.reel-sec { background: var(--bg2); padding: 7.5rem 0 5.5rem; }
.reel-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4.5vw, 4.4rem); align-items: start; margin-bottom: 5rem; }
.reel-top__copy h2 { margin: 0 0 3rem; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.3; font-weight: 800; letter-spacing: -.03em; }
.reel-top__copy > p:not(.kicker) { margin: 0 0 1.4rem; color: var(--gray); font-size: 1.05rem; line-height: 1.65; }
.reel-top__card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; background: #fff; border: 1px solid #e6e6e6; border-top: 0; }
.reel-top__card strong { font-size: 1.08rem; font-weight: 800; }
.reel-top__card span { color: var(--blue); font-weight: 700; font-size: .95rem; }
.vid { margin: 0; min-width: 0; }
/* 메인 맨 위 16:9 칸: 글씨 + 세로 표지 (영상은 자르지 않음) */
.vid--wide .vid__frame { position: relative; display: block; aspect-ratio: 16 / 9; background: #111; overflow: hidden; container-type: inline-size; color: #fff; }
.vid__blur { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(16px) brightness(.42) saturate(1.2); transition: transform .35s; }
.vid--wide .vid__frame:hover .vid__blur { transform: scale(1.06); }
.vid__txt { position: absolute; left: 6.5cqi; top: 0; bottom: 0; right: 37cqi; display: flex; flex-direction: column; justify-content: center; gap: 2.2cqi; }
.vid__txt i { font-style: normal; font-weight: 700; color: var(--pop-soft); font-size: clamp(.72rem, 3.7cqi, 1.3rem); }
.vid__txt b { font-weight: 800; line-height: 1.22; letter-spacing: -.03em; font-size: clamp(1rem, 6.9cqi, 2.9rem); word-break: keep-all; overflow-wrap: anywhere; }
.vid__poster { position: absolute; right: 3.5cqi; top: 5cqi; bottom: 5cqi; aspect-ratio: 9 / 16; background: #000; box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.45); overflow: hidden; }
.vid__poster img { width: 100%; height: 100%; object-fit: contain; }
.vid--wide .vid__play { left: auto; right: calc(3.5cqi + 12.65cqi - 1.45rem); }
/* 나머지 영상: 2차본 세로 카드, 제자리 재생 */
.vid__frame { position: relative; display: block; aspect-ratio: 9 / 16; background: #111; overflow: hidden; }
.vid__frame > img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s; }
.vid__frame:hover > img { transform: scale(1.03); }
.vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; z-index: 2; }
.vid__play { position: absolute; left: 50%; top: 50%; width: 3.1rem; height: 3.1rem; margin: -1.55rem 0 0 -1.55rem; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--blue); display: grid; place-items: center; transition: background .2s, color .2s; }
.vid--wide .vid__play { margin-left: 0; background: rgba(0,0,0,.55); color: #fff; }
.vid__frame:hover .vid__play { background: var(--pop); color: #fff; }
.vid__play svg { width: 1.3rem; height: 1.3rem; fill: currentColor; margin-left: .12rem; }
.vid figcaption { margin-top: .55rem; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.reel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 1rem; }
.reel-head h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; }
.reel-head .more { margin: 0; font-weight: 700; white-space: nowrap; }
.vids { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem .75rem; }
.vids--course { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 15rem)); }
.vidtabs { justify-content: flex-start; margin-bottom: 1.3rem; }
.vidtabs small { opacity: .6; margin-left: .15rem; }
.reel-note { margin: 1.6rem 0 0; font-size: .9rem; color: #666; }
.reel-note a { color: var(--blue); font-weight: 700; }
/* 영상 팝업 */
/* 영상 창: 아카이브아트(lightGallery)와 같은 방식. 검정 90% 바탕, 오른쪽 위 ×, 작게 시작해 커지며 열림 */
.vbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.9); display: grid; place-items: center; padding: 2.94rem .3rem; opacity: 0; transition: opacity .15s; }
.vbox.is-in { opacity: 1; }
.vbox__stage { height: min(100svh - 11rem, 64rem); aspect-ratio: 9 / 16; max-width: calc(100vw - .6rem); transform: scale(.5); opacity: 0; transition: transform .25s cubic-bezier(0, 0, .25, 1), opacity .25s cubic-bezier(0, 0, .25, 1); }
.vbox.is-in .vbox__stage { transform: none; opacity: 1; }
.vbox iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.vbox .vbox__stage--ig { aspect-ratio: auto; width: min(26rem, calc(100vw - 1.2rem)); height: min(100svh - 7rem, 50rem); background: #fff; border-radius: 12px; overflow: hidden; }
.vbox .vbox__stage--ig iframe { background: #fff; }
.vbox__close { position: absolute; top: 0; right: 0; width: 3.125rem; height: 2.94rem; padding: 0; border: 0; background: transparent; color: #999; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color .2s; }
.vbox__close:hover, .vbox__close:focus-visible { color: #fff; }
@media (max-width: 720px) { .vbox__stage { height: auto; width: min(100vw - .6rem, (100svh - 6rem) * 9 / 16); } }
@media (prefers-reduced-motion: reduce) { .vbox, .vbox__stage { transition: none; } }

/* 검정 결과 띠 */
.proof { background: #000; color: #fff; padding: 5rem 0; }
.proof .kicker { color: var(--pop-soft); }
.proof__in { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.proof h2 { margin: 0 0 1.2rem; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.28; font-weight: 800; letter-spacing: -.03em; }
.proof__copy p:not(.kicker) { color: #b9b9c0; line-height: 1.7; margin: 0 0 1.2rem; }
.proof .more { color: #fff; margin: 0; }
.papers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.paper { position: relative; min-width: 0; aspect-ratio: 5 / 7; background: #fff; color: #111; padding: .8rem .7rem; display: flex; flex-direction: column; border: 0; overflow: hidden; transition: transform .2s; }
.paper:hover { transform: translateY(-.35rem); }
.paper--img { padding: 0; cursor: zoom-in; }
.paper--img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.paper i { font-style: normal; font-size: .76rem; font-weight: 600; color: var(--gray); }
.paper strong { margin-top: .4rem; font-size: clamp(1.05rem, 1.55vw, 1.4rem); font-weight: 800; letter-spacing: -.04em; }
.paper b { margin-top: auto; margin-bottom: 1.5rem; color: var(--blue); font: 700 clamp(2.4rem, 4vw, 3.6rem)/1 var(--en); }
.paper b em { font: 700 1rem "Pretendard Variable", Pretendard, sans-serif; font-style: normal; margin-left: .15rem; }
.paper img[width] { position: absolute; left: .7rem; bottom: .7rem; height: .8rem; width: auto; }

/* 수업 방식 카드 */
.dirs { padding: 7.5rem 0; background: var(--bg2); }
.dirs__in { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.dirs h2 { margin: 0 0 2.2rem; font-size: clamp(1.7rem, 2.6vw, 2.35rem); line-height: 1.42; font-weight: 800; letter-spacing: -.03em; }
.dirs__copy p:not(.kicker) { color: var(--gray); line-height: 1.65; }
.dirs__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.dir { background: #fff; border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 .15rem .9rem rgba(0,0,0,.05); }
.dir img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.dir div { padding: 1.3rem 1.05rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.dir strong { font-size: 1.22rem; font-weight: 800; }
.dir p { margin: .8rem 0 1rem; font-size: .97rem; color: var(--gray); line-height: 1.6; }
.dir span { margin-top: auto; align-self: flex-end; color: var(--blue); font-weight: 700; font-size: 1.15rem; }

/* 후기·작품 */
.board-sec { padding: 6rem 0; background: #fff; }
.board-sec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.board-sec h2 { margin: 0 0 1.2rem; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.3; font-weight: 800; letter-spacing: -.03em; }
.board-sec__head p:not(.kicker) { margin: 0; color: var(--gray); line-height: 1.65; }
.board-sec__head .more { margin: 0; color: #111; }
.board-sec__head .more:hover { color: var(--blue); }
.proof__reels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.proof__reels .clip { width: auto; min-width: 0; }
.workcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-top: .6rem; }
.workcard { display: block; overflow: hidden; border-radius: .9rem; }
.workcard img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .3s; }
.workcard:hover img { transform: scale(1.04); }

/* 과정 (파란 구역) */
.sea { background: var(--blue); color: #fff; padding: 2.5rem 0 5rem; }
.sea__rule { border-top: 1px solid rgba(255,255,255,.55); padding-top: 1.1rem; }
.sea__rule i { font: 500 1.05rem var(--en); font-style: normal; letter-spacing: .02em; }
.sea__rule h2 { margin: .55rem 0 1.9rem; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.38; font-weight: 700; letter-spacing: -.01em; }
.sea--prog { padding: 4rem 0 0; }
.progs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem .75rem; }
.prog { display: block; color: #fff; }
.prog img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .9rem; transition: opacity .2s; }
.prog:hover img { opacity: .85; }
.prog i { display: block; margin-top: .9rem; font: 500 .9rem var(--en); font-style: normal; letter-spacing: .04em; color: #cfd4ff; }
.prog strong { display: block; font-size: 1.4rem; font-weight: 800; margin: .15rem 0 .45rem; }
.prog p { margin: 0 0 .5rem; font-size: .94rem; line-height: 1.6; opacity: .92; }
.prog em { font-style: normal; font-size: .85rem; font-weight: 600; opacity: .85; }

/* 질문 */
.ask { padding: 7rem 1rem; background: #fff; }
.ask__in { max-width: 68.75rem; margin: 0 auto; }
.ask .kicker { font-size: 1rem; }
.ask h2 { margin: 0 0 3rem; font-size: clamp(1.7rem, 2.6vw, 2.125rem); font-weight: 700; }
.ask .qa details { background: transparent !important; border: 0; border-bottom: 1px solid #ddd; border-radius: 0; box-shadow: none; }
.ask .qa summary { font-size: 1.1rem; font-weight: 600; padding-block: 1.25rem; }

/* 서브 머리: 사진 위 가운데 제목 */
.pagehead { position: relative; overflow: hidden; background: #000 !important; color: #fff !important; border: 0 !important; padding: clamp(4rem, 8vw, 7rem) 0; text-align: center; }
.pagehead__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.pagehead .shell { position: relative; }
.pagehead .eyebrow { color: var(--pop-soft) !important; font: 500 1.05rem var(--en); letter-spacing: .03em; margin: 0; }
.pagehead h1 { max-width: 56rem; margin-inline: auto; color: #fff !important; }
.pagehead .lead { max-width: 46rem; margin-inline: auto; color: rgba(255,255,255,.92) !important; }
.pagebody { padding-top: 3.4rem; padding-bottom: 5.5rem; }
.pagebody h2 { color: #111; }
.pill { color: #111; }
.pill.is-on { background: var(--blue); border-color: var(--blue); }

/* 합격 명단 2단 */
.roll { columns: 2; column-gap: 3rem; margin-top: 2rem; }
.roll__uni { border: 0; padding: 0 0 .4rem; margin-bottom: 1.6rem; border-radius: 0; background: transparent; }
.roll__head { border-bottom: 2px solid var(--blue); }
.roll__head strong { font-size: 1.3rem; }

/* 꼬리 */
.foot { background: #000 !important; color: #fff; padding: 4rem 0 6.5rem; }
.foot__top { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 2.6rem; border-bottom: 1px solid #333; }
.foot__logo { height: 2.6rem; width: auto; margin: 0; }
.foot__social { display: flex; gap: 1.5rem; margin: 0; }
.foot__social a { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--pop); color: #fff !important; display: grid; place-items: center; }
.foot__social a:hover { background: #fff; color: var(--blue) !important; }
.foot__social svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.foot__bottom { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-top: 1.8rem; background: transparent !important; border: 0 !important; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .88rem; align-self: flex-start; }
.foot__nav a { color: #d0d0d5 !important; }
.foot__nav a:hover { color: #fff !important; }
.foot address { font-style: normal; font-size: .82rem; line-height: 1.75; color: #a8a8b0; text-align: right; }
.foot address a { color: #a8a8b0 !important; }
.floatcall { position: fixed; right: 1.4rem; bottom: 1.6rem; z-index: 40; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--pop); color: #fff; display: grid; place-items: center; align-content: center; gap: .05rem; font-size: .7rem; font-weight: 700; box-shadow: 0 .4rem 1.1rem rgba(0,0,0,.28); }
.floatcall svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

@media (prefers-reduced-motion: reduce) { .flow-row__track { animation: none; } .slide { transition: none; } }
@media (max-width: 1040px) {
  .vids { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof__in, .dirs__in { grid-template-columns: 1fr; }
  .papers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dirs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof__reels .clip:nth-child(n+4), .workcard:nth-child(n+4) { display: none; }
  .proof__reels, .workcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hello__in { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --head: 4rem; }
  .brand__logo { height: 1.9rem; }
  body { padding-bottom: 3.2rem; }
  .floatcall { display: none; }
  .dock { left: 0; right: 0; bottom: 0; gap: 0; grid-template-columns: 1fr 1fr 1.4fr; padding-bottom: env(safe-area-inset-bottom, 0px); background: #000; }
  .dock a { height: 3.2rem; border-radius: 0; box-shadow: none; background: #000; color: #fff; border-right: 1px solid rgba(255,255,255,.18); }
  .dock .is-main { background: var(--pop); color: #fff; border: 0; }
  .banner { height: 41rem; }
  .banner__dots { bottom: .2rem; }
  .slide { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 1.2rem; padding-top: 2.2rem; padding-bottom: 3rem; }
  .slide__art { height: auto; min-height: 0; overflow: hidden; }
  .slide p { margin-top: 1rem; }
  .collage { transform: none; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collage img { border-width: .2rem; aspect-ratio: 1 / 1; }
  .collage img:nth-child(3n+2) { transform: none; }
  .sheetart { padding-top: 0; }
  .sheetart img { width: 76%; transform: none; }
  .phones img { width: 29%; }
  .phones img:nth-child(2) { transform: none; }
  .hello, .board-sec { padding: 3.6rem 0; }
  .roundlink span { width: 3.8rem; height: 3.8rem; }
  .roundlink svg { width: 1.6rem; height: 1.6rem; }
  .roundlink { font-size: .82rem; }
  .roundlinks { gap: .25rem; }
  .reel-sec { padding: 3.6rem 0; }
  .reel-top { grid-template-columns: 1fr; margin-bottom: 2.4rem; }
  .reel-top__copy { order: -1; }
  .reel-top__copy h2 { margin-bottom: 1.4rem; }
  /* 모바일 영상은 1.6장씩 옆으로 */
  .vids:not(.vids--page) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
  .vids:not(.vids--page) .vid { flex: 0 0 62%; scroll-snap-align: start; }
  .vids--page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .papers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .paper { padding: .6rem .55rem; }
  .paper i { font-size: .66rem; }
  .paper img[width] { left: .55rem; bottom: .55rem; height: .62rem; }
  .paper b { margin-bottom: 1rem; }
  .proof { padding: 3.6rem 0; }
  .dirs { padding: 3.6rem 0; }
  .dir div { padding: 1rem .85rem; }
  .dir strong { font-size: 1.05rem; }
  .dir p { font-size: .88rem; margin: .5rem 0; }
  .proof__reels, .workcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof__reels .clip:nth-child(n+3), .workcard:nth-child(n+3) { display: none; }
  .progs { grid-template-columns: 1fr; }
  .ask { padding: 3.6rem 1rem; }
  .ask h2 { margin-bottom: 1.4rem; }
  .roll { columns: 1; }
  .foot { padding: 2.6rem 0; }
  .foot__social { gap: .8rem; }
  .foot address { text-align: left; }
}

/* =====================================================================
   홍대플라이 v8 — 메인(사선 + 아코디언) 디자인 시스템을 전 페이지에 적용
   ===================================================================== */
:root{--b:#1c2cbc;--pb:#1b2ab7;--pop:#3346ff;--navy:#0b1446;--sky:#e9ecff;--soft:#f4f5fb;--ink:#111;--g:#5f6578;--ln:#e3e5ee;
  --serif:"Playfair Display",Georgia,serif;--en:Oswald,"Pretendard Variable",Pretendard,sans-serif}
body{background:#fff}
.z,.s{color:#111}
.z-w,.s-w{width:min(100% - 4rem,84rem);margin-inline:auto}
.z-lb{font-family:var(--en);font-size:.8rem;letter-spacing:.24em;color:var(--b);font-weight:500;text-transform:uppercase}
.z-h2,.s-h2{font-size:clamp(1.6rem,2.8vw,2.7rem);line-height:1.24;letter-spacing:-.05em;font-weight:800;margin-top:.6rem}
.z-h2 em,.s-h2 em{font-style:normal;color:var(--b)}
.z-t,.s-lead{color:var(--g);line-height:1.75;margin-top:.9rem;font-size:1rem}
.z-more{display:inline-flex;align-items:center;gap:.4rem;color:var(--b);font-weight:800;font-size:.92rem;white-space:nowrap}
.z-head,.s-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.2rem}
.z-sec,.s-sec{padding:6rem 0}
.z-btns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.8rem}
.z-btn{display:inline-flex;align-items:center;gap:1.2rem;height:3.1rem;padding:0 1.8rem;font-weight:800;font-size:.94rem;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);transition:background .2s,color .2s}
.z-btn i{font-style:normal;transition:transform .2s}.z-btn:hover i{transform:translateX(4px)}
.z-btn.is-white{background:#fff;color:var(--b)}.z-btn.is-line{color:#fff;background:rgba(255,255,255,.16)}.z-btn.is-line:hover{background:#fff;color:var(--b)}
.z-btn.is-blue{background:var(--b);color:#fff}.z-btn.is-ink{background:#111;color:#fff}
.z-play{position:absolute;left:50%;top:50%;width:4.4rem;height:4.4rem;margin:-2.2rem;display:grid;place-items:center;background:var(--pop);color:#fff;clip-path:polygon(18% 0,100% 50%,18% 100%);transition:transform .25s;pointer-events:none}
.z-play svg{display:none}
/* 세로쓰기: 글자를 바로 세워 위에서 아래로 읽히게 (뒤집힘 없음) */
.vt{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.08em;white-space:nowrap}

/* ---------- 1. 메인 히어로 ---------- */
.z-hero{position:relative;height:44rem;background:#000;overflow:hidden}
.z-hero__copy{position:absolute;z-index:3;left:0;top:0;bottom:0;width:44%;background:var(--b);color:#fff;clip-path:polygon(0 0,100% 0,82% 100%,0 100%);padding:5rem 8rem 0 max(2rem,calc((100vw - 84rem)/2))}
.z-hero__kick{font-weight:700;opacity:.85;font-size:.95rem}
.z-hero h1{font-size:clamp(2.4rem,4vw,4.2rem);line-height:1.16;letter-spacing:-.055em;font-weight:800;margin-top:1.3rem}
.z-hero h1 b{color:#c8d0ff}
.z-hero__sub{opacity:.88;line-height:1.75;margin-top:1.3rem}
.z-acc{position:absolute;left:36%;right:0;top:0;bottom:4.6rem;display:flex;gap:.4rem;padding-right:max(1rem,calc((100vw - 84rem)/2 - 1rem))}
.z-acc__p{position:relative;flex:1;overflow:hidden;background:#111;color:#fff;transition:flex .6s cubic-bezier(.6,0,.2,1)}
.z-acc__p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:grayscale(.5);transition:opacity .5s,filter .5s}
.z-acc__p.is-open{flex:7}.z-acc__p.is-open img{opacity:1;filter:none}
.z-acc__no{position:absolute;left:0;right:0;top:1rem;text-align:center;font-family:var(--serif);font-size:1.2rem;font-weight:700;z-index:1}
.z-acc__lb{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);font-weight:800;font-size:1rem;transition:opacity .3s;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.z-acc__cap{position:absolute;right:1.4rem;bottom:1.4rem;max-width:22rem;background:rgba(0,0,0,.74);backdrop-filter:blur(6px);padding:.9rem 1.1rem;font-weight:800;line-height:1.35;opacity:0;transform:translateY(1rem);transition:opacity .4s .2s,transform .4s .2s}
.z-acc__cap small{display:block;font-family:var(--en);font-weight:500;letter-spacing:.2em;font-size:.7rem;color:#9fb0ff;margin-bottom:.3rem}
.z-acc__cap em{display:block;font-style:normal;font-size:.8rem;color:#c8d0ff;margin-top:.35rem;font-weight:600}
.z-acc__p.is-open .z-acc__cap{opacity:1;transform:none}.z-acc__p.is-open .z-acc__lb,.z-acc__p.is-open .z-acc__no{opacity:0}
.z-tick{position:absolute;z-index:4;left:-2%;right:-2%;bottom:-.6rem;height:5.4rem;background:#000;transform:rotate(-1.4deg);display:flex;align-items:center;overflow:hidden;border-top:3px solid var(--pop)}
.z-tick__run{display:flex;gap:3rem;white-space:nowrap;animation:z-run 40s linear infinite;color:#fff;font-weight:800;font-size:1rem;padding-left:3rem}
.z-tick__run span{display:inline-flex;align-items:baseline;gap:.5rem}.z-tick__run b{font-family:var(--serif);font-size:1.9rem;color:#7d8bff}
.z-tick__run .lf{color:var(--pop);font-family:var(--en);letter-spacing:.1em}
@keyframes z-run{to{transform:translateX(-50%)}}

/* ---------- 2. 영상 ---------- */
.z-split{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:center}
.z-sns{display:flex;align-items:center;gap:1.4rem;margin-top:1.6rem;font-weight:800}.z-sns a{display:flex;gap:.45rem;align-items:center}.z-sns svg{width:1.3rem;height:1.3rem}.z-sns i{width:1px;height:1.2rem;background:#ccd}
.z-vid__main{position:relative;display:block;height:24rem;overflow:hidden;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)}
.z-vid__main img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.z-vid__main:hover img{transform:scale(1.04)}
.z-shorts{margin-top:3.4rem}
.z-shorts__h{display:flex;justify-content:space-between;align-items:center;border-top:2px solid #111;padding-top:1rem;margin-bottom:1.2rem}.z-shorts__h b{font-size:1.05rem}.z-shorts__h a{color:var(--b);font-weight:800;font-size:.88rem}
.z-shorts__row{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.z-short{display:block;position:relative}
.z-short span.f{display:block;position:relative;aspect-ratio:9/13;overflow:hidden;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
.z-short img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.z-short:hover img{transform:scale(1.06)}
.z-short .z-play{width:2.6rem;height:2.6rem;margin:-1.3rem}
.z-short b{display:block;font-size:.86rem;margin-top:.55rem;line-height:1.35}.z-short small{display:block;color:var(--b);font-weight:700;font-size:.72rem;letter-spacing:.04em;margin-top:.55rem}

/* ---------- 3. 교육과정 아코디언 (사진 전체 보이게) ---------- */
.z-prog{background:var(--soft)}
.z-pacc{display:flex;gap:.5rem;height:27rem}
.z-pacc__p{position:relative;flex:1;overflow:hidden;background:var(--sky);color:var(--navy);transition:flex .6s cubic-bezier(.6,0,.2,1);clip-path:polygon(0 0,100% 0,100% 92%,88% 100%,0 100%)}
.z-pacc__p>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.14;transition:opacity .4s}
.z-pacc__p .no{position:absolute;left:0;right:0;top:1.1rem;text-align:center;font-family:var(--serif);font-weight:700;font-size:1.3rem;transition:opacity .3s}
.z-pacc__p .vl{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);font-weight:800;font-size:1.08rem;transition:opacity .3s}
.z-pacc__p .in{position:absolute;inset:0;display:grid;grid-template-columns:minmax(15rem,24rem) 1fr;opacity:0;transition:opacity .4s .15s;pointer-events:none}
.z-pacc__p .tx{padding:2.1rem;background:var(--b);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.z-pacc__p .tx small{font-family:var(--en);letter-spacing:.2em;font-size:.72rem;color:#c8d0ff}
.z-pacc__p .tx strong{display:block;font-size:2rem;letter-spacing:-.05em;margin-top:.5rem}
.z-pacc__p .tx p{opacity:.9;line-height:1.65;margin-top:.7rem;font-size:.94rem}
.z-pacc__p .tx dl{display:grid;grid-template-columns:3.2rem 1fr;row-gap:.3rem;font-size:.86rem;border-top:1px solid rgba(255,255,255,.3);padding-top:.9rem}.z-pacc__p .tx dt{opacity:.7}
.z-pacc__p .tx em{font-style:normal;font-weight:800;margin-top:.9rem;display:block}
.z-pacc__p .ph{background:var(--pb);display:grid;place-items:center;padding:1rem}
.z-pacc__p .ph img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 .8rem 2rem rgba(0,0,40,.35)}
.z-pacc__p.is-open{flex:6;background:var(--pb)}.z-pacc__p.is-open>img,.z-pacc__p.is-open .vl,.z-pacc__p.is-open .no{opacity:0}.z-pacc__p.is-open .in{opacity:1;pointer-events:auto}

/* ---------- 4. 결과 ---------- */
.z-res{background:#000;color:#fff;padding:8rem 0;clip-path:polygon(0 4.5rem,100% 0,100% calc(100% - 4.5rem),0 100%);margin:-3rem 0}
.z-res .z-lb{color:#9fb0ff}.z-res .z-t{color:rgba(255,255,255,.66)}.z-res .z-more{color:#9fb0ff;margin-top:1.4rem}
.z-res__top{display:grid;grid-template-columns:1fr 2.2fr;gap:3rem;align-items:center}
.z-nums{display:grid;grid-template-columns:repeat(4,1fr)}
.z-num{position:relative;text-align:center;padding:.6rem 0}
.z-num+.z-num::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1.5px;background:rgba(255,255,255,.4);transform:rotate(18deg)}
.z-num span{display:block;font-weight:700;font-size:.92rem}.z-num span small{display:block;opacity:.6;font-size:.76rem;font-weight:500}
.z-num b{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(3rem,5vw,5.2rem);line-height:1.05;color:#6b7bff;margin-top:.4rem}
.z-num b small{font-family:"Pretendard Variable",sans-serif;font-size:1.05rem;color:#fff;margin-left:.15rem}
.z-num i{font-style:normal;font-size:.8rem;color:var(--pop);font-weight:800}
.z-res__bot{display:grid;grid-template-columns:12rem 12rem 1fr;gap:1.6rem;margin-top:4rem;align-items:start}
.z-poster{display:block;padding:0;border:0;background:#fff;cursor:zoom-in;overflow:hidden;text-align:left}
.z-poster img{width:100%;height:auto;display:block;transition:transform .5s}.z-poster:hover img{transform:scale(1.03)}
.z-poster span{display:block;padding:.7rem .8rem;color:#fff;font-weight:800;font-size:.86rem;background:var(--b)}
.z-rows__h{font-weight:800;color:#9fb0ff;font-size:.84rem;letter-spacing:.04em;margin-bottom:.6rem}
.z-row{display:grid;grid-template-columns:3rem 1fr auto;align-items:center;border-top:1px solid #2a2a2e;padding:.9rem .2rem}
.z-row:last-child{border-bottom:1px solid #2a2a2e}
.z-row b{font-family:var(--serif);color:#6b7bff}.z-row strong{font-size:1.1rem}.z-row span{font-family:var(--serif);font-weight:800;font-size:1.9rem;color:#fff}.z-row span small{font-family:"Pretendard Variable";font-size:.86rem;margin-left:.2rem;opacity:.7}
.z-row.on{background:var(--b);padding-inline:1rem;border-color:var(--b)}.z-row.on b{color:#c8d0ff}

/* ---------- 5. 학생 작품 흐름 (잘림 없이) ---------- */
.z-works{padding-top:9rem;overflow:hidden}
.z-flow{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.z-flow__track{display:flex;gap:1rem;width:max-content;animation:z-run 70s linear infinite;padding:.4rem 0}
.z-flow:hover .z-flow__track{animation-play-state:paused}
.z-work{flex:none;width:17rem;padding:0;border:0;background:none;text-align:left;cursor:zoom-in}
.z-work img{width:100%;height:auto;display:block;transition:transform .4s;box-shadow:0 .6rem 1.4rem rgba(11,20,70,.12)}
.z-work:hover img{transform:translateY(-4px)}
.z-work span{display:flex;gap:.5rem;align-items:baseline;margin-top:.6rem;font-size:.82rem;color:var(--g)}.z-work span b{color:#111;font-size:.9rem}
.z-flow__note{display:flex;justify-content:space-between;color:var(--g);font-size:.84rem;margin-top:1.2rem}

/* ---------- 6. 인터뷰 ---------- */
.z-mosaic{padding-top:2rem}
.z-int{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:1rem;align-items:stretch}
.z-int__lead{display:grid;grid-template-columns:1fr 44%;align-items:stretch;background:var(--b);color:#fff;border-radius:1.1rem;overflow:hidden}
.z-int__lead .tx{padding:2rem 1.8rem;display:flex;flex-direction:column}
.z-int__lead .z-lb{color:#c8d0ff}
.z-int__lead strong{font-size:1.6rem;line-height:1.3;letter-spacing:-.045em;margin-top:.8rem}
.z-int__lead p{opacity:.88;line-height:1.65;margin-top:.8rem;font-size:.92rem}
.z-int__lead em{font-style:normal;font-weight:800;margin-top:auto;padding-top:1rem}
.z-int__lead .im{display:grid;place-items:center;padding:1rem;background:var(--pb)}.z-int__lead .im img{width:100%;height:auto;display:block;box-shadow:0 .8rem 1.8rem rgba(0,0,40,.35)}
.z-reel{position:relative;display:block;border-radius:1.1rem;overflow:hidden;background:var(--pb)}
.z-reel img{width:100%;height:auto;display:block;transition:transform .5s}.z-reel:hover img{transform:scale(1.03)}
.z-reel span{position:absolute;left:0;right:0;bottom:0;padding:2rem .9rem .8rem;background:linear-gradient(transparent,rgba(0,0,30,.85));color:#fff;font-weight:800;font-size:.84rem;line-height:1.35}
.z-reel span small{display:block;font-weight:600;opacity:.8;font-size:.72rem}

/* ---------- 7. 상담 ---------- */
.z-cta{background:var(--b);color:#fff;padding:7.4rem 0 0;clip-path:polygon(0 4rem,100% 0,100% 100%,0 100%);margin-top:3rem}
.z-cta .z-lb{color:#c8d0ff}.z-cta .z-t{color:rgba(255,255,255,.84)}
.z-cta__in{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center;padding-bottom:5.4rem}
.z-cta .z-h2{font-size:clamp(2rem,3.4vw,3.2rem)}
.z-cta__tel{display:block;font-family:var(--en);font-size:clamp(2.2rem,3.8vw,3.4rem);font-weight:700;margin-top:1.8rem}
.z-consult{display:block;background:#fff;color:#111;padding:2.4rem;box-shadow:0 2rem 4rem rgba(0,0,40,.3);transform:rotate(-1.2deg);transition:transform .3s}
.z-consult:hover{transform:rotate(0)}
.z-consult>span{font-family:var(--en);letter-spacing:.2em;font-size:.76rem;color:var(--b)}
.z-consult strong{display:block;font-size:2.2rem;line-height:1.22;letter-spacing:-.05em;margin-top:1rem}
.z-consult p{color:var(--g);line-height:1.7;margin-top:1rem}
.z-consult em{display:flex;justify-content:space-between;font-style:normal;font-weight:800;color:var(--b);border-top:1px solid var(--ln);padding-top:1rem;margin-top:1.4rem}
.z-band{background:#000;color:#fff;text-align:center;padding:1.7rem 1rem;font-weight:800;font-size:1.2rem}

/* =====================================================================
   하위 페이지
   ===================================================================== */
.s-hero{position:relative;background:#000;color:#fff;overflow:hidden}
.s-hero__in{position:relative;display:grid;grid-template-columns:1.15fr 1fr;min-height:30rem}
.s-hero__copy{position:relative;z-index:2;background:var(--b);clip-path:polygon(0 0,100% 0,88% 100%,0 100%);padding:4.4rem 7rem 4.4rem max(2rem,calc((100vw - 84rem)/2));margin-right:-4rem}
.s-hero__copy .z-lb{color:#c8d0ff}
.s-hero h1{font-size:clamp(2rem,3.4vw,3.3rem);line-height:1.2;letter-spacing:-.055em;font-weight:800;margin-top:1rem}
.s-hero__lead{opacity:.88;line-height:1.75;margin-top:1.1rem;max-width:34rem}
.s-hero__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.s-hero__chips span{background:rgba(255,255,255,.14);padding:.42rem .8rem;font-size:.84rem;font-weight:700}
.s-hero__media{position:relative;display:grid;place-items:center;padding:2.6rem max(2rem,calc((100vw - 84rem)/2)) 2.6rem 5rem;background:radial-gradient(60% 60% at 60% 50%,rgba(51,70,255,.35),transparent 70%)}
.s-hero__media img{max-height:24rem;width:auto;max-width:100%;box-shadow:0 1.6rem 3.4rem rgba(0,0,0,.6);transform:rotate(2deg)}
.s-hero__media button{padding:0;border:0;background:none;cursor:zoom-in}
.s-band{background:#000;color:#fff;border-top:3px solid var(--pop)}
.s-band__in{display:flex;gap:.4rem;overflow-x:auto;padding:.9rem 0;scrollbar-width:none}
.s-band__in::-webkit-scrollbar{display:none}
.s-band a{flex:none;padding:.55rem 1.1rem;font-weight:700;font-size:.88rem;color:rgba(255,255,255,.72);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);background:#16161a}
.s-band a:hover{color:#fff}.s-band a.is-on{background:var(--pop);color:#fff}

.s-sec--soft{background:var(--soft)}
.s-sec--dark{background:#000;color:#fff}.s-sec--dark .z-lb{color:#9fb0ff}.s-sec--dark .s-lead{color:rgba(255,255,255,.68)}
.s-sec--slant{clip-path:polygon(0 3rem,100% 0,100% calc(100% - 3rem),0 100%);padding:8rem 0;margin:-1.5rem 0}
.s-sec + .s-sec:not(.s-sec--soft):not(.s-sec--dark){padding-top:2rem}

/* 이런 학생에게 · 핵심 지도 */
.s-two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.s-card{background:#fff;padding:2rem 2.2rem;border-top:4px solid var(--b)}
.s-card h3{font-size:1.25rem;letter-spacing:-.03em}
.s-card ul{margin-top:1rem;display:grid;gap:.7rem}
.s-card li{position:relative;padding-left:1.6rem;line-height:1.6;color:#333}
.s-card li::before{content:"";position:absolute;left:0;top:.5rem;width:.75rem;height:.45rem;border-left:2.5px solid var(--b);border-bottom:2.5px solid var(--b);transform:rotate(-45deg)}

/* 단계 */
.s-steps{display:grid;grid-template-columns:repeat(var(--n,3),1fr)}
.s-step{position:relative;padding:0 2rem}
.s-step:first-child{padding-left:0}
.s-step+.s-step::before{content:"";position:absolute;left:0;top:4%;bottom:4%;width:1.5px;background:rgba(255,255,255,.35);transform:rotate(14deg)}
.s-step b{display:block;font-family:var(--serif);font-weight:800;font-size:3.4rem;line-height:1;color:#6b7bff}
.s-step strong{display:block;font-size:1.35rem;margin-top:.8rem;letter-spacing:-.03em}
.s-step em{display:inline-block;font-style:normal;font-size:.8rem;font-weight:700;background:var(--pop);padding:.2rem .6rem;margin-top:.6rem}
.s-step p{margin-top:.8rem;line-height:1.7;opacity:.8;font-size:.94rem}

/* 사진 그리드 (원본 비율 그대로, 잘림 없음) */
.s-grid{display:grid;grid-template-columns:repeat(var(--c,4),1fr);gap:1rem;align-items:start}
.s-item{display:block;padding:0;border:0;background:none;cursor:zoom-in;text-align:left}
.s-item img{width:100%;height:auto;display:block;background:var(--sky);transition:transform .35s,box-shadow .35s}
.s-item:hover img{transform:translateY(-3px);box-shadow:0 .8rem 1.6rem rgba(11,20,70,.18)}
.s-item figcaption,.s-item>span{display:block;font-size:.82rem;color:var(--g);margin-top:.5rem;line-height:1.4}
.s-item>span b{color:#111;display:block;font-size:.9rem}
.s-grid[data-fold]:not(.is-open)>.s-item:nth-child(n+var(--fold-start,9)){display:none}
.s-grid.is-folded>.s-item.is-extra{display:none}
.s-fold{display:flex;justify-content:center;margin-top:1.6rem}
.s-fold button{display:inline-flex;align-items:center;gap:.6rem;height:2.9rem;padding:0 1.6rem;border:2px solid #111;background:#fff;font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
.s-fold button:hover{background:#111;color:#fff}
.s-note{font-size:.84rem;color:var(--g);margin-top:-1.2rem;margin-bottom:1.4rem}

/* 과정 안내 카드뉴스 (작게, 누르면 크게) */
.s-cur{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:66rem}
.s-cur .s-item img{box-shadow:0 .4rem 1rem rgba(11,20,70,.12)}
.s-cur .s-item span{display:flex;gap:.5rem;align-items:center}.s-cur .s-item span i{font-style:normal;font-family:var(--serif);font-weight:700;color:var(--b)}

/* 칩 */
.s-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.s-chips span,.s-chips a{padding:.55rem 1rem;background:#fff;border:1.5px solid var(--b);color:var(--b);font-weight:700;font-size:.9rem}
.s-sec--soft .s-chips span{background:#fff}

/* 시간표 */
.s-time{background:#fff;border:1px solid var(--ln);padding:1.8rem 2rem;max-width:56rem}
.s-time table{width:100%;border-collapse:separate;border-spacing:.3rem;font-size:.88rem}
.s-time th{font-weight:800;text-align:center;padding:.3rem}
.s-time tbody th{text-align:left;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.s-time td{text-align:center;padding:.7rem .3rem;background:#eef0f7;color:#9aa0b4;font-size:.8rem}
.s-time td.is-on{background:var(--pop);color:#fff;font-weight:700}
.s-time p{color:var(--g);font-size:.84rem;line-height:1.6;margin-top:1rem}

/* 하위 페이지 상담 띠 */
.s-cta{background:var(--b);color:#fff;clip-path:polygon(0 3rem,100% 0,100% 100%,0 100%);padding:6rem 0 4rem;margin-top:2rem}
.s-cta__in{display:grid;grid-template-columns:1.3fr auto;gap:2rem;align-items:end}
.s-cta strong{display:block;font-size:clamp(1.6rem,2.8vw,2.5rem);letter-spacing:-.05em;line-height:1.25}
.s-cta p{opacity:.85;margin-top:.8rem;line-height:1.7}
.s-cta__tel{font-family:var(--en);font-size:2.3rem;font-weight:700;text-align:right}

/* 영상 그리드 (작게) */
.s .vids{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.s .vid{margin:0}
.s .vid__frame{position:relative;display:block;aspect-ratio:9/14;overflow:hidden;background:#000}
.s .vid__frame img{width:100%;height:100%;object-fit:cover}
.s .vid figcaption{font-size:.82rem;margin-top:.5rem;line-height:1.4;font-weight:600}
.s .vid__play{position:absolute;left:50%;top:50%;width:2.8rem;height:2.8rem;margin:-1.4rem;display:grid;place-items:center;background:var(--pop);clip-path:polygon(18% 0,100% 50%,18% 100%)}
.s .vid__play svg{display:none}
.s .pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.6rem}
.s .pill{border:0;background:#eef0f7;color:#333;font:inherit;font-weight:700;font-size:.88rem;padding:.6rem 1.1rem;cursor:pointer;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
.s .pill.is-on{background:var(--b);color:#fff}
.s .pill small{opacity:.7;margin-left:.2rem}
.s [data-pane]{display:none}.s [data-pane].is-on{display:block}

/* 원장 인사말 (어두운 배경, 사진 중앙 높이에 글) */
.s-greet{background:radial-gradient(70% 90% at 80% 20%,rgba(28,44,188,.45),transparent 60%),#05060f;color:#fff;padding:7rem 0}
.s-greet__in{display:grid;grid-template-columns:minmax(16rem,25rem) 1fr;gap:5rem;align-items:center}
.s-greet__photo{position:relative;margin:0}
.s-greet__photo img{width:100%;height:auto;display:block}
.s-greet__photo::after{content:"";position:absolute;left:1.2rem;top:1.2rem;right:-1.2rem;bottom:-1.2rem;border:2px solid var(--pop);z-index:-1}
.s-greet__photo{z-index:0}
.s-greet__photo figcaption{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:1.8rem}
.s-greet__tx{max-width:40rem}
.s-greet__tx .z-lb{color:#9fb0ff}
.s-greet__tx h2{font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:1.32;letter-spacing:-.05em;font-weight:800;margin-top:1rem}
.s-greet__tx h2 em{font-style:normal;color:#9fb0ff}
.s-greet__tx .rule{display:block;width:3rem;height:3px;background:var(--pop);margin:1.8rem 0}
.s-greet__tx p{line-height:1.95;color:rgba(255,255,255,.82);font-size:1.02rem}
.s-greet__tx p+p{margin-top:1rem}
.s-greet__sign{margin-top:2.2rem;display:flex;align-items:center;gap:1rem}
.s-greet__sign::before{content:"";width:2rem;height:1px;background:rgba(255,255,255,.5)}
.s-greet__sign strong{font-size:1.1rem}.s-greet__sign small{display:block;font-family:var(--en);letter-spacing:.2em;font-size:.72rem;color:#9fb0ff;margin-top:.2rem}

/* 강사진 */
.s-staff{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.s-staff .s-item span{text-align:center}
.s-roster{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin-top:1.6rem}
.s-roster div{background:#fff;padding:.9rem;border-left:3px solid var(--b)}
.s-roster span{display:block;font-size:.74rem;color:var(--g)}.s-roster strong{display:block;font-family:var(--en);font-size:1.1rem;letter-spacing:.06em}.s-roster em{display:block;font-style:normal;font-size:.76rem;color:#333;margin-top:.2rem;line-height:1.4}

/* 연혁 */
.s-years{display:grid;grid-template-columns:repeat(7,1fr);position:relative}
.s-years::before{content:"";position:absolute;left:0;right:0;top:2.9rem;height:2px;background:rgba(255,255,255,.25)}
.s-years li{position:relative;padding-right:1rem}
.s-years strong{display:block;font-family:var(--serif);font-size:1.6rem;color:#6b7bff}
.s-years li::before{content:"";display:block;position:absolute;left:0;top:2.6rem;width:.7rem;height:.7rem;background:var(--pop);transform:rotate(45deg)}
.s-years p{margin-top:2.2rem;font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.78)}

/* 상담 페이지 */
.s-contact{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:stretch}
.s-phone{background:var(--b);color:#fff;padding:2.4rem;display:flex;flex-direction:column;justify-content:center}
.s-phone>a{font-family:var(--en);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:700}
.s-phone p{opacity:.86;line-height:1.7;margin-top:.8rem}
.s-info{background:#fff;border:1px solid var(--ln);padding:2rem 2.2rem;display:grid;gap:.9rem;margin:0}
.s-info div{display:grid;grid-template-columns:6rem 1fr;gap:1rem;font-size:.92rem;line-height:1.65;padding-bottom:.9rem;border-bottom:1px solid var(--ln)}
.s-info div:last-child{border:0;padding:0}
.s-info dt{font-family:var(--en);letter-spacing:.12em;color:var(--b);font-size:.8rem;padding-top:.15rem}
.s-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.s-way{background:#fff;padding:1.8rem;display:flex;flex-direction:column;gap:.7rem;border-top:4px solid var(--b)}
.s-way strong{font-size:1.15rem}.s-way span{color:var(--g);line-height:1.65;font-size:.92rem;flex:1}
.s-way a{align-self:flex-start}
.s-map{display:grid;grid-template-columns:1fr minmax(0,34rem);gap:3rem;align-items:center}
.s-map__tx strong{display:block;font-size:1.6rem;letter-spacing:-.04em}
.s-map__tx p{color:var(--g);line-height:1.8;margin-top:.8rem}
.s-map__tx ul{margin-top:1.4rem;display:grid;gap:.6rem}
.s-map__tx li{display:grid;grid-template-columns:4.6rem 1fr;font-size:.92rem;line-height:1.6}.s-map__tx li b{color:var(--b);font-size:.82rem}
.s-map__img{padding:0;border:0;background:none;cursor:zoom-in}
.s-map__img img{width:100%;height:auto;display:block;box-shadow:0 1.4rem 3rem rgba(11,20,70,.2)}

/* 과정 허브 */
.s-hub{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 1.2rem}
.s-hub a{display:block;background:#fff}
.s-hub img{width:100%;height:auto;display:block;transition:transform .4s}
.s-hub a:hover img{transform:translateY(-4px)}
.s-hub .tx{padding:1.1rem 0 .4rem;display:grid;grid-template-columns:1fr auto;align-items:end;border-bottom:2px solid #111}
.s-hub small{grid-column:1/-1;font-family:var(--en);letter-spacing:.18em;font-size:.72rem;color:var(--b)}
.s-hub strong{font-size:1.4rem;letter-spacing:-.04em}.s-hub em{font-style:normal;color:var(--g);font-size:.84rem}

/* 결과 */
.s-stats{display:grid;grid-template-columns:repeat(4,1fr);background:#000;color:#fff;padding:1.8rem 0;margin-bottom:1.6rem}
.s-stats div{text-align:center;position:relative}
.s-stats div+div::before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:1.5px;background:rgba(255,255,255,.35);transform:rotate(16deg)}
.s-stats strong{display:block;font-family:var(--serif);font-size:3rem;color:#6b7bff;line-height:1.1}
.s-stats span{font-size:.84rem;opacity:.8}
.s .roll{columns:2;column-gap:2.4rem}
.s .roll__uni{break-inside:avoid;margin-bottom:1.6rem}
.s .roll__head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--b);padding-bottom:.4rem}
.s .roll__head strong{font-size:1.1rem}.s .roll__head span{color:var(--b);font-weight:800;font-size:.86rem}
.s .roll__rows li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px solid var(--ln);font-size:.88rem}
.s .roll__rows li span:last-child{white-space:nowrap;font-weight:600}
.s .roll__rows b{background:var(--pop);color:#fff;font-size:.68rem;padding:.1rem .4rem;margin-left:.4rem}
.s .awards{width:100%;border-collapse:collapse;font-size:.88rem}
.s .awards th{background:#000;color:#fff;padding:.7rem;text-align:left}
.s .awards td{padding:.6rem .7rem;border-bottom:1px solid var(--ln)}
.s .awards tr td:nth-child(2){font-weight:800;color:var(--b)}
.s-posters{display:grid;grid-template-columns:repeat(2,minmax(0,20rem));gap:1.4rem}
.s-ints{--c:5}

/* 입시정보 */
.s-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.s-facts div{background:#fff;padding:1.4rem 1.6rem;border-top:4px solid var(--b)}
.s-facts dt{font-weight:800}.s-facts dd{margin:.5rem 0 0;color:#333;line-height:1.65;font-size:.92rem}
.s .qa{display:grid;gap:.6rem;max-width:56rem}
.s .qa details{background:#fff;border:1px solid var(--ln)}
.s .qa summary{list-style:none;cursor:pointer;padding:1.1rem 1.4rem;font-weight:700;display:flex;justify-content:space-between;gap:1rem}
.s .qa summary::-webkit-details-marker{display:none}
.s .qa summary::after{content:"+";color:var(--b);font-weight:800;font-size:1.2rem}
.s .qa details[open] summary::after{content:"–"}
.s .qa details[open]{border-color:var(--b)}
.s .qa p{padding:0 1.4rem 1.2rem;color:#444;line-height:1.75}
.s-channels{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.s-channels a{background:#000;color:#fff;padding:1.6rem;display:flex;flex-direction:column;gap:.4rem;font-weight:800;clip-path:polygon(0 0,100% 0,100% 85%,90% 100%,0 100%)}
.s-channels small{font-weight:500;opacity:.7}
.s-channels a:hover{background:var(--b)}

/* 지점 */
.s-branch{display:flex;flex-wrap:wrap;gap:.5rem}
.s-branch span{padding:.7rem 1.2rem;background:#fff;font-weight:700;border:1px solid var(--ln)}
.s-branch span:first-child{background:var(--b);color:#fff;border-color:var(--b)}

/* 라이트박스: 사진 전체가 화면 안에 보이도록 */
.lightbox img{max-width:min(100%,94vw)!important;max-height:calc(100dvh - 7.5rem)!important;object-fit:contain}

/* =====================================================================
   반응형
   ===================================================================== */
@media (max-width:1100px){
  .s-staff{grid-template-columns:repeat(3,1fr)}
  .s-roster{grid-template-columns:repeat(3,1fr)}
  .z-int{grid-template-columns:1fr 1fr 1fr}.z-int__lead{grid-column:1/-1}
  .s .vids{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1000px){
  .z-hero{height:auto;padding-bottom:4.4rem}
  .z-hero__copy{position:relative;width:auto;clip-path:polygon(0 0,100% 0,100% 90%,0 100%);padding:2.8rem 1.4rem 3.4rem}
  .z-acc{position:relative;left:0;height:17rem;margin-top:-1.4rem;padding:0 1rem}
  .z-split,.z-res__top,.z-cta__in{grid-template-columns:1fr;gap:2rem}
  .z-pacc{flex-direction:column;height:auto;gap:.4rem}
  .z-pacc__p{flex:none;height:3.6rem;clip-path:none;transition:height .45s}
  .z-pacc__p .no{left:1rem;right:auto;top:1.05rem;text-align:left;font-size:1.1rem}
  .z-pacc__p .vl{writing-mode:horizontal-tb;text-orientation:mixed;left:3.6rem;bottom:auto;top:1.1rem;transform:none;letter-spacing:0;font-size:1rem}
  .z-pacc__p.is-open{height:auto}
  .z-pacc__p.is-open .in{position:relative;grid-template-columns:1fr 9.5rem}
  .z-pacc__p .tx{padding:1.2rem}
  .z-pacc__p .tx strong{font-size:1.4rem}.z-pacc__p .tx p{font-size:.86rem}
  .z-pacc__p .ph{padding:.6rem}
  .z-res__bot{grid-template-columns:1fr 1fr}.z-rows{grid-column:1/-1}
  .s-hero__in{grid-template-columns:1fr}
  .s-hero__copy{margin:0;clip-path:polygon(0 0,100% 0,100% 88%,0 100%);padding:2.6rem 1.4rem 3.4rem}
  .s-hero__media{padding:0 1.4rem 2rem;margin-top:-1.6rem}
  .s-hero__media img{max-height:13rem}
  .s-two,.s-contact,.s-map{grid-template-columns:1fr}
  .s-steps{grid-template-columns:1fr;gap:1.6rem}.s-step,.s-step:first-child{padding:0 0 0 4.4rem;position:relative}
  .s-step+.s-step::before{display:none}.s-step b{position:absolute;left:0;top:0;font-size:2.4rem}
  .s-greet__in{grid-template-columns:1fr;gap:2.6rem}
  .s-greet__photo{max-width:15rem}
  .s-years{grid-template-columns:1fr;gap:1rem;padding-left:1.4rem}.s-years::before{left:.32rem;right:auto;top:0;bottom:0;width:2px;height:auto}
  .s-years li::before{left:-1.38rem;top:.55rem}.s-years::before{top:0}.s-years p{margin-top:.2rem}
  .s-hub{grid-template-columns:1fr 1fr}
  .s-facts,.s-channels,.s-ways{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .z-w,.s-w{width:calc(100% - 2.4rem)}
  .z-sec,.s-sec{padding:3.4rem 0}
  .z-head,.s-head{flex-direction:column;align-items:start;gap:.7rem;margin-bottom:1.4rem}
  .z-h2,.s-h2{font-size:1.5rem}
  .z-t,.s-lead{font-size:.9rem;margin-top:.6rem}
  .z-hero__kick{font-size:.8rem}
  .z-hero h1{font-size:1.95rem;margin-top:.8rem}
  .z-hero__sub{font-size:.88rem;margin-top:.8rem}
  .z-btns{margin-top:1.2rem}
  .z-btn{height:2.7rem;padding:0 1.3rem;font-size:.86rem;gap:.8rem}
  .z-acc{height:13rem;gap:.25rem}
  .z-acc__no{font-size:.9rem;top:.6rem}.z-acc__lb{font-size:.78rem;bottom:.7rem}
  .z-acc__cap{left:.6rem;right:.6rem;bottom:.6rem;max-width:none;font-size:.8rem;padding:.6rem .8rem}
  .z-acc__cap em{display:none}
  .z-tick{height:3.4rem}.z-tick__run{font-size:.78rem;gap:1.6rem}.z-tick__run b{font-size:1.2rem}
  .z-vid__main{height:12rem}
  .z-shorts{margin-top:2rem}
  .z-shorts__row{display:flex;overflow-x:auto;gap:.6rem;scroll-snap-type:x mandatory;margin-right:-1.2rem;padding-right:1.2rem;scrollbar-width:none}
  .z-shorts__row::-webkit-scrollbar{display:none}
  .z-short{flex:none;width:7.4rem;scroll-snap-align:start}.z-short b{font-size:.76rem}
  .z-pacc__p.is-open .in{grid-template-columns:1fr 7.6rem}
  .z-res{padding:5rem 0;clip-path:polygon(0 2rem,100% 0,100% calc(100% - 2rem),0 100%)}
  .z-nums{grid-template-columns:repeat(4,1fr)}
  .z-num span{font-size:.7rem}.z-num span small{font-size:.62rem}
  .z-num b{font-size:1.9rem}.z-num b small{font-size:.7rem}.z-num i{font-size:.62rem}
  .z-res__bot{grid-template-columns:1fr 1fr;gap:.8rem;margin-top:2.4rem}
  .z-poster span{font-size:.74rem;padding:.5rem .6rem}
  .z-row{padding:.6rem .2rem}.z-row strong{font-size:.95rem}.z-row span{font-size:1.4rem}
  .z-works{padding-top:5rem}
  .z-work{width:9.6rem}.z-work span{font-size:.72rem;flex-direction:column;gap:0}.z-work span b{font-size:.8rem}
  .z-flow__note{flex-direction:column;gap:.2rem;font-size:.76rem}
  .z-int{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .z-int__lead{grid-template-columns:1fr 7.4rem;border-radius:.8rem}
  .z-int__lead .tx{padding:1.2rem}.z-int__lead strong{font-size:1.1rem}.z-int__lead p{font-size:.8rem}
  .z-int__lead img{max-height:none;width:100%;height:auto}
  .z-reel{border-radius:.6rem}.z-reel span{font-size:.66rem;padding:1.4rem .5rem .5rem}.z-reel span small{display:none}
  .z-cta{padding-top:5rem;clip-path:polygon(0 2rem,100% 0,100% 100%,0 100%)}
  .z-cta__in{padding-bottom:3.4rem}
  .z-cta__tel{font-size:2rem;margin-top:1.2rem}
  .z-consult{padding:1.6rem;transform:none}.z-consult strong{font-size:1.5rem}.z-consult p{font-size:.86rem}
  .z-band{font-size:.92rem;padding-bottom:5rem}

  .s-hero h1{font-size:1.75rem}.s-hero__lead{font-size:.88rem}
  .s-hero__chips span{font-size:.74rem;padding:.35rem .6rem}
  .s-hero__media img{max-height:11rem}
  .s-band a{font-size:.8rem;padding:.5rem .9rem}
  .s-card{padding:1.4rem}.s-card li{font-size:.9rem}
  .s-sec--slant{padding:5rem 0;clip-path:polygon(0 1.6rem,100% 0,100% calc(100% - 1.6rem),0 100%)}
  .s-grid{--c:2!important;gap:.6rem}
  .s-item figcaption,.s-item>span{font-size:.72rem}
  .s-cur{display:flex;overflow-x:auto;gap:.7rem;scroll-snap-type:x mandatory;margin-right:-1.2rem;padding-right:1.2rem}
  .s-cur .s-item{flex:none;width:76%;scroll-snap-align:start}
  .s .vids{grid-template-columns:repeat(3,1fr);gap:.5rem}.s .vid figcaption{font-size:.7rem}
  .s-time{padding:1rem}.s-time table{font-size:.72rem;border-spacing:.15rem}.s-time td{padding:.5rem .1rem;font-size:.64rem}
  .s-cta{padding:4.4rem 0 5.4rem;clip-path:polygon(0 1.6rem,100% 0,100% 100%,0 100%)}
  .s-cta__in{grid-template-columns:1fr}.s-cta__tel{text-align:left;font-size:1.9rem}
  .s-greet__photo::after{display:none}.s-greet__photo figcaption{margin-top:.7rem}
  .s-greet{padding:4rem 0}.s-greet__photo{max-width:12rem}.s-greet__tx p{font-size:.92rem;line-height:1.85}
  .s-staff{display:flex;overflow-x:auto;gap:.6rem;margin-right:-1.2rem;padding-right:1.2rem;scroll-snap-type:x mandatory}
  .s-staff .s-item{flex:none;width:42%;scroll-snap-align:start}
  .s-roster{grid-template-columns:1fr 1fr}
  .s-hub{gap:1.2rem .7rem}.s-hub strong{font-size:1.05rem}.s-hub em{grid-column:1/-1;font-size:.72rem}
  .s-facts,.s-channels,.s-ways{grid-template-columns:1fr}
  .s-stats strong{font-size:1.9rem}.s-stats span{font-size:.66rem}
  .s .roll{columns:1}
  .s-posters{grid-template-columns:1fr 1fr;gap:.7rem}
  .s-ints{--c:2}
  .s-phone{padding:1.6rem}.s-info{padding:1.4rem}.s-info div{grid-template-columns:4.6rem 1fr;font-size:.84rem}
  .s-map__tx strong{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){.z-tick__run,.z-flow__track{animation:none}.z-acc__p,.z-pacc__p{transition:none}}

/* ===== v8.1 수정 ===== */
.z-acc__p.is-open{background:var(--pb)}
.z-acc__p.is-open img{object-fit:contain;padding:1rem;background:var(--pb)}
.z-res{padding:7rem 0}
.s-greet__in{align-items:center}
.s-greet__photo{max-width:25rem}
.s-greet__photo img{position:relative;z-index:1}
.s-greet__photo::after{left:1.2rem;top:1.2rem;right:-1.2rem;bottom:-1.2rem;z-index:0}
.s-branch{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:44rem;margin:0 auto;position:relative}
.s-branch span.main{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:var(--b);color:#fff;border-color:var(--b);padding:1rem 2.6rem;font-size:1.15rem;position:relative}
.s-branch span.main small{font-family:var(--en);letter-spacing:.2em;font-size:.68rem;font-weight:500;opacity:.8}
.s-branch span.main::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:1rem;background:var(--b)}
.s-branch>div{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;border-top:2px solid var(--b);padding-top:1rem}
.s-branch>div span:first-child{background:#fff;color:#111;border-color:var(--ln)}
#branches .s-head{justify-content:center;text-align:center}
@media (max-width:640px){.z-acc__p.is-open img{padding:.4rem}.s-greet__photo::after{display:block;left:.7rem;top:.7rem;right:-.7rem;bottom:-.7rem}.s-greet__photo{margin-right:.7rem}}

/* ===== v8.2 모바일: 히어로 사진 잘림 방지 + 로고 애니메이션 ===== */
.m-logo{display:none}
@media (max-width:1000px){
  .s-hero__media{margin-top:0;padding:1.8rem 1.4rem 2.4rem;background:radial-gradient(60% 60% at 50% 50%,rgba(51,70,255,.3),transparent 70%)}
  .s-hero__media img{max-height:17rem;transform:rotate(1.5deg)}
  .m-logo-host,.z-hero__copy,.s-hero__copy{position:relative}
  .m-logo{display:block;position:absolute;right:0;top:-1.2rem;width:6.6rem;height:auto;pointer-events:none}
  .z-hero__copy>.m-logo{right:1.2rem;top:3.4rem;width:7.4rem}
  .z-res .m-logo-host>.m-logo,.z-cta .m-logo-host>.m-logo{top:-.6rem}
}
@media (max-width:640px){.s-hero__media img{max-height:15rem}}

/* v8.3 로고 크기 키움 */
@media (max-width:1000px){
  .m-logo{width:9.2rem;top:-1.6rem;right:-.4rem}
  .z-hero__copy>.m-logo{width:9rem;right:.2rem;top:.6rem;bottom:auto}
  .z-res .m-logo-host>.m-logo,.z-cta .m-logo-host>.m-logo{top:-1.2rem}
}

/* v8.4 영상 더보기 버튼 */
.s-more-btn{display:flex;align-items:center;gap:.6rem;height:2.9rem;margin:1.8rem auto 0;padding:0 1.8rem;border:2px solid #111;background:#fff;font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
.s-more-btn:hover{background:#111;color:#fff}.s-more-btn[hidden]{display:none}
.s .reel-note{margin-top:1.4rem;color:var(--g);font-size:.86rem;line-height:1.7;text-align:center}.s .reel-note a{color:var(--b);font-weight:700}
.s-more-btn,.s-fold button{border:0;background:#111;color:#fff}.s-more-btn:hover,.s-fold button:hover{background:var(--b)}