@charset "utf-8";

/* ===========================================================
   필라테스휘 — 셸 스타일
   색 토큰은 통이미지 조각에서 스포이드로 실측한 값이다.
   =========================================================== */

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/Pretendard-Regular.k5.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/Pretendard-Bold.k5.woff2") format("woff2");
}
/* 표시 서체 — 구 사이트가 쓰던 것과 같은 글꼴을 쓰는 글자만 서브셋해 셀프호스팅한다.
   본문·UI 는 Pretendard 로 남는다 (두 층위 분리 = 구와 같은 구조).
   구는 Light·Medium·Bold 세 단을 나눠 썼고 G5 까지는 Bold 한 벌뿐이었다 — 세 단을 되살린다 (B3). */
@font-face {
  font-family: "GmarketSans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/GmarketSansLight.k5.woff2") format("woff2");
}
@font-face {
  font-family: "GmarketSans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/GmarketSansMedium.k5.woff2") format("woff2");
}
@font-face {
  font-family: "GmarketSans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/GmarketSansBold.k5.woff2") format("woff2");
}
@font-face {
  font-family: "WindSong";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/WindSong-Regular.subset.woff2") format("woff2");
}

:root {
  --cream: #fdfaef;
  --white: #ffffff;
  --charcoal: #363636;
  --ink-deep: #2b2b2b;
  /* 브랜드 노랑은 조각에서 실측한 #FFE300 하나다. G5 까지 쓰던 뮤트 골드 두 벌(#ffc000·#e0a800)은
     같은 노랑을 두 단 낮춰 흉내낸 것이었고, 그것이 "브랜드 느낌이 빠졌다"의 절반이었다 (B4). */
  --gold: #ffe300;
  /* 밝은 바탕 위 작은 UI 강조(FAQ Q·단계 번호·체크박스)에만 남긴다 — 노랑은 흰 바탕에서 안 읽힌다 */
  --gold-deep: #b98b00;
  --gold-raw: #ffe300;
  /* 조각 안의 노랑은 브랜드 노랑과 다른 색이다 — hui01_07 형광펜·hui02_04 사선 자와 연결점 전부
     실측 #FFC000. 조각을 잘라 그 안을 HTML 로 다시 그릴 때는 브랜드 노랑이 아니라 이 색을 쓴다.
     붙어 있는 조각의 베이크드 요소와 같은 색이어야 이어 붙인 티가 안 난다 (G7 반려 R5-①).
     같은 계열의 옅은 두 벌 = hui01_02 캡션 띠 #FFECB1 · 제목 붓터치 #FBE399. */
  --slice-gold: #ffc000;
  --highlight: var(--slice-gold);
  --hl-soft: #ffecb1;
  --hl-wave: #fbe399;
  /* hui01_01~04 크림 배경 실측 */
  --stack-cream: #fdf8ec;
  --stack-card: #fefefc;
  --stack-ink: #353638;
  --ink: #202020;
  --ink-mid: #5a5a5a;
  --ink-soft: #8a8a8a;
  --line: #e6e1d4;
  --line-dark: #4a4a4a;
  --shell-max: 1180px;
  --head-h: 72px;
  --head-h-top: 92px;
  --font: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --display: "GmarketSans", "Pretendard", "Apple SD Gothic Neo", sans-serif;
  --script: "WindSong", cursive;
}

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

/* 스택이 3만 px 을 넘어 앵커 이동 거리가 길다. CSS 의 부드러운 스크롤은 거리에 비례해 시간이 늘어
   Why 카드 한 번 누르는 데 화면이 한참 흐른다 — 그래서 거리와 무관하게 1초로 끝나는 JS 이동을 쓴다
   (scripts/main.js, easeInOutExpo). 아래 scroll-padding 은 JS 가 죽었을 때의 기본 이동용이다. */
html {
  -webkit-text-size-adjust: 100%;
  /* 스크립트가 죽었을 때 브라우저가 앵커로 뛰는 자리다. 그 상태에서는 머리글이 줄어들지 않으니
     줄어든 뒤 높이(--head-h)가 아니라 **처음 높이**로 띄워야 대상이 머리글 밑에 안 깔린다 (G6 P16). */
  scroll-padding-top: var(--head-h-top);
}

/* 앵커 이동이 끝나면 대상에 tabindex="-1" 을 붙여 초점을 옮긴다(scripts/main.js).
   그런데 그 대상이 <main> 이나 구역이면 기본 초점 테두리가 화면 전체를 두른다 —
   초점은 옮기되 테두리는 그리지 않는다. 대화형 요소에는 안 걸린다(붙이는 곳이 앵커 표적뿐이다). */
[tabindex="-1"]:focus { outline: none; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--white);
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; border: 0; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
button { font: inherit; }

::selection { color: #fff; background: #232323; }

/* ---------- 로드 연출·스크롤 리빌 (R1·R2) ----------
   숨김은 전부 `html.js` 아래에만 건다. 스크립트가 죽거나 늦으면 `js` 클래스가 안 붙어
   본문이 그냥 보인다 — 초기 숨김을 CSS 기본값으로 걸면 스크립트 사고가 백지로 이어진다
   `js` 는 head 의 boot.js 가 첫 페인트 전에 붙인다. */
html.js body { opacity: 0; }
html.js.ready body { opacity: 1; transition: opacity 300ms linear 300ms; }

html.js .rv { opacity: 0; }
html.js .rv.in { animation-duration: 1s; animation-timing-function: ease; animation-fill-mode: both; }
.rv-top.in { animation-name: slideInTop; }
.rv-bottom.in { animation-name: slideInBottom; }
.rv-left.in { animation-name: slideInLeft; }
.rv-right.in { animation-name: slideInRight; }

/* 구 사이트 파라미터 그대로 — 자기 크기 20퍼센트 이동 + opacity 0 에서 1 로, 1초, ease, 1회성 */
@keyframes slideInTop {
  from { transform: translate3d(0, -20%, 0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes slideInBottom {
  from { transform: translate3d(0, 20%, 0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translate3d(-20%, 0, 0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translate3d(20%, 0, 0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes starDrift { from { background-position: 0 0; } to { background-position: -2000px 0; } }
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* 구 #mcount 의 부유 문구 두 줄 — top/left, bottom/right 를 흔든다 */
@keyframes floatA {
  0% { top: 0; left: -30px; } 35% { top: 20px; left: -20px; }
  70% { top: 30px; left: -40px; } 100% { top: 0; left: -30px; }
}
@keyframes floatB {
  0% { bottom: 0; right: 0; } 35% { bottom: -5px; right: 10px; }
  70% { bottom: -15px; right: 5px; } 100% { bottom: 0; right: 0; }
}
@keyframes downBounce {
  0%, 100% { transform: translate(-50%, 0) rotate(45deg); }
  50% { transform: translate(-50%, 6px) rotate(45deg); }
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-deep); color: #fff; padding: 10px 16px; z-index: 200;
}
.skip:focus { left: 0; }

/* viewport-fit=cover 로 화면 끝까지 쓰기 때문에 노치·둥근 모서리는 우리가 피해야 한다 (G6 P4).
   두 줄로 적는 것은 폴백이다 — env() 를 모르는 브라우저는 둘째 줄을 통째로 버리고 24px 로 산다. */
.shell {
  max-width: var(--shell-max); margin: 0 auto; padding: 0 24px;
  padding-left: calc(24px + env(safe-area-inset-left));
  padding-right: calc(24px + env(safe-area-inset-right));
}

/* ---------- 헤더 ---------- */

/* 두 상태로 산다 (R10) — 처음엔 크고 옅은 차콜, 100px 내려가면 컴팩트·불투명·얕은 그림자.
   구는 투명 헤더가 히어로 위에 겹쳤지만 여기는 sticky 라 뒤가 흰 바탕이다. 진짜 반투명을 걸면
   회색으로 뜨므로 옅은 차콜에서 짙은 차콜로 같은 인상을 만든다. */
.head {
  position: sticky; top: 0; z-index: 100;
  background: #3d3b37;
  border-bottom: 1px solid transparent;
  transition: background-color .6s ease-out, box-shadow .6s ease-out, border-color .6s ease-out;
}
html.scrolled .head {
  background: var(--ink-deep);
  border-bottom-color: #000;
  box-shadow: 0 3px 16px rgba(0,0,0,.32);
}
.head-in {
  max-width: var(--shell-max); margin: 0 auto; padding: 0 24px;
  padding-left: calc(24px + env(safe-area-inset-left));
  padding-right: calc(24px + env(safe-area-inset-right));
  height: var(--head-h-top); display: flex; align-items: center; gap: 20px;
  transition: height .6s ease-out;
}
html.scrolled .head-in { height: var(--head-h); }
.head-logo { display: block; flex: 0 0 auto; }
.head-logo img { height: 52px; width: auto; transition: height .6s ease-out; }
html.scrolled .head-logo img { height: 42px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.nav a {
  color: #efece4; font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a:focus-visible { color: var(--gold); }
.nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.nav .btn-consult {
  background: var(--gold); color: #241d00; border-radius: 999px;
  padding: 10px 22px; font-weight: 700; border-bottom: 0;
}
.nav .btn-consult:hover, .nav .btn-consult:focus-visible { background: #ffed4d; color: #241d00; }
/* 구 머리글 오른쪽에 있던 인스타·페북 아이콘 (B11). 회수한 원본 아이콘 그대로 쓴다 —
   글자 메뉴 옆에 두 개뿐이라 라벨은 alt 로 남긴다. */
.head-sns { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.head-sns a { display: block; line-height: 0; opacity: .9; transition: opacity .25s ease; }
.head-sns a:hover, .head-sns a:focus-visible { opacity: 1; }
.head-sns img { width: 30px; height: 30px; transition: width .6s ease-out, height .6s ease-out; }
html.scrolled .head-sns img { width: 26px; height: 26px; }

.burger {
  display: none; margin-left: auto; width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.burger span {
  display: block; width: 24px; height: 2px; margin: 5px auto; background: #efece4;
  transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  :root { --head-h: 58px; --head-h-top: 72px; }
  .head-logo img { height: 42px; }
  html.scrolled .head-logo img { height: 34px; }
  .burger { display: block; }
  .nav {
    position: fixed; left: 0; right: 0; top: var(--head-h-top);
    background: var(--ink-deep); border-top: 1px solid #444;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0 20px; margin: 0;
    max-height: calc(100dvh - var(--head-h-top)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s, top .6s ease-out;
  }
  html.scrolled .nav { top: var(--head-h); max-height: calc(100dvh - var(--head-h)); }
  .nav.open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 15px 24px; border-bottom: 1px solid #3d3d3d; font-size: 16px; }
  .nav a[aria-current="page"] { border-bottom-color: #3d3d3d; }
  .nav .btn-consult { margin: 16px 24px 0; text-align: center; padding: 14px 22px; }
}

/* ---------- 슬라이더 ---------- */

.hero { position: relative; background: var(--ink-deep); overflow: hidden; }
/* 세 장을 같은 그리드 칸에 겹쳐 둔다. 절대배치와 달리 트랙 높이가 가장 긴 장에 맞춰 고정되므로
   장이 바뀔 때 히어로 높이가 튀지 않는다. 가로 밀림은 각 장의 transform 으로 건다 (R3) —
   트랙 하나를 미는 방식이면 3 에서 1 로 넘어가는 순환에서 방향이 거꾸로 돌아간다. */
.hero-track { position: relative; display: grid; }
.slide {
  grid-area: 1 / 1; min-width: 0; position: relative;
  transform: translateX(100%);
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
  background-size: cover; background-position: center 30%; background-repeat: no-repeat;
}
.slide.on { transform: translateX(0); }
.slide.noanim { transition: none; }
/* 1번 배경은 CSS 로 건다 — 좁은 화면에서 1600px 판을 받을 이유가 없고,
   미디어쿼리 밖 배경은 브라우저가 아예 요청하지 않는다 (img 의 display:none 과 다르다). */
.slide-1 { background-image: url("../assets/slider/main_img1-900.jpg"); }
@media (min-width: 801px) { .slide-1 { background-image: url("../assets/slider/main_img1.jpg"); } }
.slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,14,.52) 0%, rgba(20,18,14,.30) 45%, rgba(20,18,14,.72) 100%);
}
/* 회전 텍스트 배지 (R4) — 구 원본 circle_txt.png 재사용. 장마다 한 벌씩 두는 이유는
   장이 transform 을 걸어 쌓임 맥락을 만들기 때문이다. 바깥에 한 벌만 두면 사진 위·문구 위가 되어
   구의 "사진과 문구 사이"라는 층을 못 만든다. 파일은 하나라 요청도 한 번이다.
   장식이라 img 가 아니라 배경으로 넣는다 — 대체 텍스트가 없는 img 는 검사기가 잡고,
   내용이 없는 그림에 억지 문구를 붙이는 것이 더 나쁘다. */
.slide-badge {
  position: absolute; z-index: 1; top: 24%; left: 50%; margin-left: -230px;
  width: 460px; height: 460px; pointer-events: none;
  background: url("../assets/deco/circle_txt.png") no-repeat center / contain;
  animation: spin 25s linear infinite;
}
/* 구는 문구 상자를 중앙 정렬로 뒀다. G5 에서 좌측 정렬로 바꾼 것이 좁은 화면에서
   조각난 줄을 "깨진 줄"로 보이게 만들었다 — 가운데로 되돌리면 같은 자연랩이 대칭으로 앉는다 (B15). */
.slide-in {
  position: relative; z-index: 2;
  max-width: var(--shell-max); margin: 0 auto; padding: 128px 24px 128px;
  min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  color: #fff; text-align: center; align-items: center;
}
/* 필기체 킥커 (R12) — 구의 .slides .box h2 span 그대로. 색은 구 원색 #FFE300, 크기는 h2 와 같은 단 */
.slide-eyebrow {
  display: block; font-family: var(--script); font-weight: 400;
  font-size: 70px; line-height: 1.05; letter-spacing: 0; text-transform: none;
  color: var(--gold-raw); margin-bottom: 6px;
  text-shadow: 0 2px 18px rgba(0,0,0,.42);
}
.slide h2 {
  margin: 0 0 20px; font-family: var(--display); font-size: 70px; line-height: 1.12;
  font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.slide p {
  margin: 0; max-width: 44em; font-size: clamp(14px, 1.35vw, 17px); line-height: 1.85;
  color: #f0ece3; text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
/* 체험 가격 제안이 9초짜리 장 안에만 살아 있고 정작 폼에 닿을 때는 사라져 있었다 —
   제안이 보이는 그 자리에서 폼으로 보낸다 (G6 P1). 머리글의 상담신청과 같은 골드 알약이라
   "어느 것이 진짜 버튼인가"가 갈리지 않는다. `.rv` 밖이라 첫 화면에서 opacity 0 으로 시작하지 않는다. */
.slide-cta {
  align-self: center; margin-top: 26px;
  background: var(--gold); color: #241d00; border-radius: 999px;
  padding: 15px 30px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.slide-cta:hover, .slide-cta:focus-visible { background: #ffcf3a; color: #241d00; }
.slide-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* 눈금판 + 회전 마커 (R5) — rect_bg.png 은 링 네 칸(4/84/164/244)짜리 판이라
   세 칸까지만 보이게 214px 에서 자른다. 자른 자리가 왼쪽 끝과 같은 작은 점 하나로 끝난다. */
.hero-dots {
  position: absolute; left: 50%; margin-left: -107px; bottom: 26px; z-index: 3;
  width: 214px; height: 50px;
  background: url("../assets/deco/rect_bg.png") no-repeat 0 0;
}
.hero-dots button {
  position: absolute; top: 9px; width: 36px; height: 36px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.hero-dots button:nth-child(1) { left: 4px; }
.hero-dots button:nth-child(2) { left: 84px; }
.hero-dots button:nth-child(3) { left: 164px; }
.hero-dots button[aria-current="true"] {
  background: url("../assets/deco/dotA.png") no-repeat 0 0;
  animation: spin 5s linear infinite;
}
.hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
.hero-down {
  position: absolute; left: 50%; bottom: 96px; z-index: 3;
  transform: translate(-50%, 0) rotate(45deg);
  width: 34px; height: 34px; border-right: 2px solid rgba(255,255,255,.8);
  border-bottom: 2px solid rgba(255,255,255,.8);
  animation: downBounce 2s ease-in-out infinite;
}
.hero-down:hover, .hero-down:focus-visible { border-color: var(--gold); }

@media (max-width: 1000px) {
  .slide h2, .slide-eyebrow { font-size: 50px; }
}
@media (max-width: 700px) {
  /* 좁은 화면에서 첫 화면을 슬라이더가 채우게 둔다. 조각이 접힘 아래로 더 내려가
     브라우저의 lazy 선반입 범위 밖으로 빠지는 효과도 같이 얻는다. */
  .slide-in { padding: 104px 22px 118px; min-height: 86vh; }
  .slide h2, .slide-eyebrow { font-size: 30px; }
  .slide-badge { width: 240px; height: 240px; margin-left: -120px; top: 26%; }
  /* 판(289px 안에 링 네 개가 4·84·164·244)을 **정확히 절반**으로 줄인다 (B16).
     147px 로 줄이던 동안 링 간격은 40.7px 인데 버튼은 40px 자리에 서 있어서, 어긋난 만큼
     칠해진 링이 버튼 밖으로 삐져나와 네 번째 점이 하나 더 있는 것처럼 보였다.
     144.5 = 289 x 0.5 라 링 간격도 정확히 40px 이 되고, 버튼 자리도 절반값(2/42/82)으로 맞춘다.
     폭 107 = 214(데스크톱 자른 폭) x 0.5 — 자르는 자리도 같은 비율로 따라간다. */
  .hero-dots {
    width: 107px; height: 25px; margin-left: -53px;
    background-size: 144.5px auto;
  }
  .hero-dots button { top: 4px; width: 18px; height: 18px; }
  .hero-dots button:nth-child(1) { left: 2px; }
  .hero-dots button:nth-child(2) { left: 42px; }
  .hero-dots button:nth-child(3) { left: 82px; }
  .hero-dots button[aria-current="true"] { background-size: 18px 18px; }
  /* 누르는 자리만 넓힌다 (G6 P3). 버튼의 left·top·width·height·background 를 하나도 건드리지 않으므로
     점 그림은 1px 도 안 움직인다 — 히트 영역을 의사요소로 얹는 방식이라 그렇다.
     원(50%)으로 두는 것은 활성 도트가 spin 으로 도는데 사각형이면 모서리가 같이 돌기 때문이다.
     지름 36 · 중심 간격 40 이라 이웃과 4px 떨어져 오탭이 없다. */
  .hero-dots button::after {
    content: ""; position: absolute;
    left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
    border-radius: 50%;
  }
  .slide-cta { margin-top: 20px; padding: 13px 24px; font-size: 15px; }
  .hero-down { display: none; }
}

/* ---------- 통이미지 스택 ---------- */

/* 구 사이트는 조각을 `width:100%` 로 뿌려 화면 전폭을 채웠다 (1440 에서 1.44배). 그것이
   크림 질감이 화면을 덮는 인상을 만들었고, 1000px 기둥으로 세우면서 좌우에 순백 띠가 남아
   "배경이 사라졌다"로 읽혔다 — 전폭으로 되돌린다 (B14).
   상하 패딩도 없앤다. 어두운 히어로와 크림 첫 조각 사이에 그 패딩이 전폭 흰 띠를 만들고 있었다 (고객 C1). */
.stack {
  background: var(--white);
  margin: 0 auto;
  container-type: inline-size;
}
.stack img { width: 100%; }
/* 자리표시 상태의 높이는 **자리표시 그림 자체의 비율**로 정해진다.
   width/height 속성이 만드는 것은 `aspect-ratio: auto W/H` 이고, 그 `auto` 는
   "적재된 그림에 고유 비율이 있으면 그쪽을 쓴다"는 뜻이다 — 여기 `height:auto` 까지 겹치면
   속성비는 아예 안 쓰인다. 그래서 자리표시를 조각별 실치수 SVG 로 둔다(index.html).
   1x1 GIF 를 쓰던 동안 21장이 전부 정사각형으로 서서 문서가 8천 px 넘게 자랐다 (G6 F1). */
.stack img.lz { background: #fff; }
.stack noscript { display: block; }
.stack > * { display: block; }
/* 앵커 표적 — 조각 이미지에 id 를 붙이지 않고 따로 세운다 (void 태그는 검사기가 범위를 못 잡는다) */
.stack .anchor { display: block; height: 0; overflow: hidden; }

/* hui01_07 분리 하부 — 원본 조각과 같은 배율로 흐르게 컨테이너 폭(cqw)에 맞춘다.
   1000px 원본 기준 실측: 본문 30.4px / 행간 45px / 좌여백 78px / 절단 아래 여백 31px / 하단 여백 107px */
.stack-text {
  background: #fff;
  color: #202020;
  padding: 2.3vw 9.4vw 10.6vw 7.8vw;
  padding: 2.3vw 9.4vw 10.6vw 7.8vw;
  padding: 2.3cqw 9.4cqw 10.6cqw 7.8cqw;
  font-size: 3.04vw;
  font-size: 3.04vw;
  font-size: 3.04cqw;
  line-height: 4.5vw;
  line-height: 4.5vw;
  line-height: 4.5cqw;
  letter-spacing: 0;
}
.stack-text p { margin: 0; }
.stack-text p + p { margin-top: 4.5vw; margin-top: 4.5cqw; }
.stack-text b { font-weight: 700; }
/* 형광 띠는 글자 상자를 그대로 칠하면 원본보다 얇고 높게 붙는다.
   원본 실측(1000px 기준) = 잉크 위 2px 에서 시작해 39px — em 으로 환산해 배율을 따라가게 둔다.
   직사각형 그라디언트로 칠하던 것을 붓질형으로 바꾼다 (B5) — 원본 조각의 형광펜은 자로 그은 띠가 아니라
   가장자리가 울고 베이스라인 아래로 삐치는 손자국이다. 아래 SVG 는 위아래 가장자리를 각각 다른 폭으로
   흔들어 둔 한 획이고, `preserveAspectRatio=none` 이라 글자 길이에 따라 늘어난다. */
.brush, .stack-text mark {
  background: none;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 48' preserveAspectRatio='none'%3E%3Cpath d='M2.4 11.3c26-4.9 54.6 2.1 82.7-1.4 28-3.5 55.4 3.6 83.1.2 27.8-3.4 45.9 2.9 68.9-.4 12.7-1.8 61.7-2.7 82.6 1.9l-1.3 33.6c-25.4 4.4-52.6-2-79.4 1.1-26.8 3.2-54.9-3.1-82.2.6-27.4 3.7-53.6-2.4-80.4.3-16.9 1.7-52.4 2.3-72.7-2.2z' fill='%23FFC000'/%3E%3C/svg%3E");
  background-size: 100% 1.42em;
  background-position: 0 0.02em;
  padding: 0 0.06em 0.22em;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- hui01_02 대체 블록 (B18) ----------
   스톡 사진 여섯 장을 걷어내고 문안만 옮겼다. 색·서체·볼드 범위는 조각에서 실측한 값이고,
   치수는 전부 컨테이너 폭(cqw) 기준이라 스택이 1.44배로 늘어도 같은 배율로 따라간다.
   조각 원본 폭 1000px 을 100cqw 로 읽으면 된다 — 예: 34px -> 3.4cqw. */
/* 글자 크기·칸 치수는 조각에서 실측한 값을 cqw 로 옮긴 것이다 (조각 원폭 1000px = 100cqw).
   실측: 카드 칸 89..491 / 505..907 (칸 403 · 사이 14) · 캡션 잉크 높이 31px · 줄 간격 40px ·
   제목 잉크 37px · h3 48px · CHECK 문장 28px.
   `.rec p` 가 `.rec-bar` 보다 특이도가 높아 margin 을 먹으므로 아래 여백 선언은 전부 두 클래스로 적는다. */
.rec {
  background: var(--stack-cream);
  color: var(--stack-ink);
  font-size: 3.4vw; font-size: 3.4cqw;
  line-height: 1.35;
  letter-spacing: -0.03em;
  padding: 3.1vw 0 4.4vw; padding: 3.1cqw 0 4.4cqw;
  text-align: center;
}
.rec-in { max-width: 87.4vw;
  max-width: 87.4cqw; margin: 0 auto; }
.rec p { margin: 0; }
.rec b { font-weight: 700; }
.rec .rec-q {
  font-weight: 700; font-size: 1.18em; line-height: 1.3;
  margin-bottom: 1.15em;
}
.rec-q .wave {
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 30' preserveAspectRatio='none'%3E%3Cpath d='M1 16.6c22-9.4 45.7 5.9 68.9-1.1 23.2-7 44.3 6.4 68.4 1.2 24.1-5.3 43.8 6.9 69.6.4 25.8-6.5 88.6-4.4 111.6 3.2l-.6 9.4c-24.9-6.2-84.7-8-109.6-1.7-24.9 6.3-46.9-5.8-70.8-.8-23.9 5-44.4-8.2-67.5-1.4C48 32.6 24.9 17.9 1.6 26.6z' fill='%23FBE399'/%3E%3C/svg%3E");
  background-size: 100% .58em;
  background-position: 0 .62em;
  padding: 0 .1em .12em;
}
.rec-lead { font-size: .96em; line-height: 1.55; }
/* 밑줄 두 줄은 각각 제 줄에 서야 한다. inline-block 으로 두면 둘이 한 줄에 붙어 흐른다 —
   `table` 은 내용 폭만큼만 차지하면서도 줄을 통째로 차지한다. */
.rec .rec-lead.rec-u {
  display: table; margin: .3em auto 0;
  border-bottom: 1px solid #6d6e70; padding: 0 .3em .18em;
}
/* 도입과 카드를 잇는 세로 선 + 점 — 조각 원본의 장치다 */
.rec-drop {
  display: block; position: relative;
  height: 5.4vw;
  width: 1px; height: 5.4cqw; margin: 1.1em auto 0;
  background: #55565a;
}
.rec-drop::after {
  bottom: -0.35vw;
  content: ""; position: absolute; left: 50%; bottom: -0.35cqw;
  width: 0.7vw; height: 0.7vw; margin-left: -0.35vw;
  width: 0.7cqw; height: 0.7cqw; margin-left: -0.35cqw;
  border-radius: 50%; background: #55565a;
}
.rec-card {
  margin-top: 2.4vw;
  margin-top: 2.4cqw;
  background: var(--stack-card);
  border-radius: 1.6vw;
  border-radius: 1.6cqw;
  padding: 4.2vw 2.6vw 4.4vw;
  padding: 4.2cqw 2.6cqw 4.4cqw;
  box-shadow: 0 0 0 1px #f0ece0;
}
.rec .rec-h {
  display: flex; align-items: center; justify-content: center; gap: .45em;
  margin: 0 0 3.2vw;
  margin: 0 0 3.2cqw; font-size: 1.45em; font-weight: 400; line-height: 1.3;
  letter-spacing: -0.02em;
}
.rec-h b { font-weight: 700; }
.rec-tick { flex: 0 0 auto; width: 1.35em; height: 1.35em; }
.rec-list {
  list-style: none; margin: 0; padding: 0;
  gap: 1.4vw;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw;
}
.rec-list li {
  border-radius: .6vw;
  border: 1px solid #e8e4d8; border-radius: .6cqw;
  padding: 3.1vw 0.9vw;
  padding: 3.1cqw 0.9cqw; line-height: 1.5; font-weight: 400; font-size: .95em;
}
.rec-list .hl {
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 48' preserveAspectRatio='none'%3E%3Cpath d='M2 10.6c27-4.4 55.9 1.9 84.4-1.2 28.6-3.2 56 3.3 84.2.2 28.1-3.1 46.3 2.6 69.6-.4 12.9-1.6 62.4-2.4 78.5 1.7l-.9 34c-24.7 4-51.4-1.8-77.7 1-26.2 2.9-54.8-2.8-82.5.6-27.7 3.4-54.2-2.2-81.4.3-17.2 1.5-53.1 2.1-73.7-2z' fill='%23FFECB1'/%3E%3C/svg%3E");
  background-size: 100% 1.34em;
  background-position: 0 .06em;
  padding: 0 .06em .16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.rec .rec-bar {
  margin-top: 4.4vw;
  display: flex; align-items: stretch; margin-top: 4.4cqw;
  border: 1px solid #55565a; text-align: left;
}
.rec-badge {
  flex: 0 0 auto; background: #373737; color: #fff;
  font-family: var(--font); font-weight: 800; letter-spacing: -0.01em;
  font-size: .92em; line-height: 1; padding: .74em .7em;
  display: flex; align-items: center;
}
.rec-bar-t { font-size: .76em; padding: .75em .8em; line-height: 1.35; align-self: center; }

/* ---------- 조각에서 떼어낸 사진 자리 (B19 · B20) ----------
   조각을 가로로 잘라 사진 구간만 HTML 로 바꿨다. 슬롯은 전부 조각 원폭(1000px) 기준 비율로
   서 있어서 스택이 몇 배로 늘어나든 위아래 이미지와 이음매가 벌어지지 않는다. */
.slot { position: relative; background: var(--stack-cream); overflow: hidden; }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-defs { position: absolute; width: 0; height: 0; }

/* ① 기울어진 타원 — 원본 조각의 마스크를 실측해 옮겼다.
   중심 (504, 292) / 반지름 476 x 278 / 반시계 13.2도. 마스크 도형은 HTML 안 인라인 SVG 에 있고
   `clipPathUnits="objectBoundingBox"` 라 상자가 1000:585 를 지키는 한 어느 폭에서도 같은 모양으로 선다. */
.slot-oval { aspect-ratio: 1000 / 585; }
.slot-clip {
  position: absolute; inset: 0;
  clip-path: url(#ovalclip);
}

/* ② 대각선으로 잘린 사진 띠 — 위쪽 노랑 자를 포함해 조각 그대로 재현한다.
   원본 실측(조각 좌표): 자 윗변 (0,1614)-(1000,1537), 사진 윗변은 그 9px 아래, 아래끝 2261.
   슬롯 원점 y=1537 -> 높이 725. 아래 백분율은 전부 그 725 를 기준으로 한 값이다. */
.slot-band { aspect-ratio: 1000 / 725; }
.slot-band img {
  clip-path: polygon(0 11.86%, 100% 1.24%, 100% 100%, 0 100%);
}
/* 자는 기울어진 막대 하나다. 길이 = 빗변 1003px, 각도 = atan(77/1000) = 4.4도, 두께 6px.
   회전 기준점을 왼쪽 위 끝(0, 77)에 두면 오른쪽 끝이 정확히 (1000, 0)에 닿는다.
   색은 브랜드 노랑이 아니라 조각 실측색이다 — 원본 자를 다섯 자리에서 찍으면 #FFC000 계열
   (255,192,4)/(254,190,4)/(255,192,1)/(254,194,2)/(252,194,0) 이고, 이 자는 슬롯 아래 조각에
   그려진 선으로 이어진다. 브랜드 노랑으로 그리면 이어 붙인 자리에서 색이 갈린다 (G7 반려 R5-①). */
.slot-rule {
  position: absolute; left: 0; top: 10.62%;
  width: 100.3vw; height: 0.6vw;
  width: 100.3cqw; height: 0.6cqw;
  background: var(--slice-gold);
  transform-origin: 0 0; transform: rotate(-4.404deg);
  pointer-events: none;
}
.slot-mark {
  position: absolute; left: 10%; bottom: 6.6%;
  display: flex; align-items: center; gap: .5em;
  color: #fff; font-family: var(--display); font-weight: 500;
  font-size: 2.5vw;
  font-size: 2.5cqw; letter-spacing: .2em; line-height: 1;
  text-shadow: 0 1px 6px rgba(0,0,0,.35); pointer-events: none;
}
/* 로고 마크는 대체 텍스트가 없는 장식이라 img 가 아니라 배경으로 넣는다 —
   내용이 없는 그림에 억지 문구를 붙이는 것보다 낫고, 검사기도 그렇게 읽는다 */
.slot-mark::before {
  width: 3.9vw; height: 3.1vw;
  content: ""; flex: 0 0 auto; width: 3.9cqw; height: 3.1cqw;
  background: url("../assets/logo.png") no-repeat center / contain;
}
/* 사진 안 노랑 점과 그 점에서 아래로 내려가는 실선. 실선은 슬롯 아래 조각 이미지에서 이어진다 —
   조각 좌표 (860,2121) 에서 (813,2262) 로 내려가므로 기울기 18.4도, 길이 149px.
   점 실측 (255,192,1) · 이어지는 베이크드 선 실측 (254,191,0)/(255,188,0) — 자와 같은 조각색이다. */
.slot-dot {
  position: absolute; left: 86%; top: 80.55%;
  width: 1.6vw; height: 1.6vw; margin: -0.8vw 0 0 -0.8vw;
  width: 1.6cqw; height: 1.6cqw; margin: -0.8cqw 0 0 -0.8cqw;
  border-radius: 50%; background: var(--slice-gold); pointer-events: none;
}
.slot-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0.3vw; height: 14.9vw; margin-left: -0.15vw;
  width: 0.3cqw; height: 14.9cqw; margin-left: -0.15cqw;
  background: var(--slice-gold);
  transform-origin: 50% 0; transform: rotate(18.44deg);
}
/* ③ 흰 판 위에 얹힌 사진 — 조각 실측 x 82..911 (83%), y 464 기준 높이 581 */
.slot-inset { aspect-ratio: 1000 / 581; background: #fff; }
.slot-inset img {
  position: absolute; left: 8.2%; top: 1.4%;
  width: 83%; height: 98.6%;
}

/* ---------- 공통 섹션 ---------- */

.sec { padding: 96px 0; }
.sec-cream { background: var(--cream); }

/* 센터 사진 띠 (G13) — 통이미지 스택과 같은 전폭 언어. 박스·라운드·그림자 0.
   어두운 게시판 절 바로 뒤라 바탕을 같은 잉크로 두어 이음매가 안 생기게 한다. */
.sec-tour { background: var(--ink-deep); }
.tour-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.tour-strip li { margin: 0; }
.tour-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 700px) {
  /* 셋을 가로로 두면 한 칸이 130px 이라 무엇이 찍혔는지 안 보인다 — 세로로 세우고 띠를 낮춘다 */
  .tour-strip { grid-template-columns: 1fr; }
  .tour-strip img { aspect-ratio: 3 / 2; }
}
.sec-dark { background: var(--charcoal); color: #f2efe7; }

/* 섹션 머리는 세 층이다 (B1 · B2) — 필기체 킥커 / 중간 굵기 제목 / 검정 칩 서브텍스트.
   G5 까지는 12px 대문자 자간 아이브로 + Bold 36px 제목 + 맨몸 회색 한 줄이었고,
   그 세 가지가 겹쳐 "어느 SaaS 랜딩이나 쓰는 머리"가 됐다. 구 사이트의 세 층으로 되돌린다. */
.sec-head { text-align: center; margin-bottom: 54px; }
.sec-head .eyebrow {
  display: block; font-family: var(--script); font-weight: 400;
  font-size: 45px; line-height: 1; letter-spacing: -0.02em; text-transform: none;
  color: #000; padding-bottom: 5px;
}
.sec-head .eyebrow-y { color: var(--gold); }
.sec-head h2 {
  margin: 0; font-family: var(--display); font-size: 33px; line-height: 1.1;
  font-weight: 500; letter-spacing: -0.02em; color: #000;
}
.sec-head .h2-y { color: var(--gold); }
.sec-head p { margin: 15px 0 0; font-size: 16px; line-height: 1.4; }
/* 검정 칩 — 구의 `.subText span` 이다. 흰 글자를 검정 판에 앉혀 제목 아래 한 줄이 장식이 아니라
   말풍선처럼 서게 만든다. 맨몸 회색 텍스트로 두면 이 자리가 통째로 사라진 것처럼 읽힌다. */
.sec-head .chip {
  display: inline-block; background: #000; color: #fff;
  font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1.5;
  padding: 3px 7px 1px; letter-spacing: -0.01em;
}
.sec-dark .sec-head h2, .sec-movie .sec-head h2 { color: var(--gold); }
.sec-dark .sec-head p, .sec-movie .sec-head p, .sec-board .sec-head p { color: #fff; }

/* ---------- Why 카드 ---------- */

/* 이 구역의 바탕은 브랜드 노랑 전면이다 (B6). 크림으로 깔아 두면 위아래 구역과 같은 톤이 되어
   랜딩에서 노랑이 한 번도 크게 등장하지 않게 된다 — 원본에서 노랑이 화면을 덮는 자리가 여기와 강사 소개 둘이다. */
.sec-yellow { background: var(--gold); color: #232323; }
.sec-yellow .why-list p { color: #232323; }

/* 원형 사진 카드 (R6) — 구 .container01 .box01 구조 복원.
   검정 원 위에 사진을 0.4 로 깔고 hover 에서 0.9 까지 올린다(0.5s). 번호는 골드, 소제목은 흰색이고
   hover 하면 라벨이 top 30% 에서 32% 로 내려앉는다. 사진 세 장은 구 CSS 의 mb_01~03 배경 이미지다. */
.why-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 44px 30px; grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.why-list a { display: block; height: 100%; }
.why-circle {
  position: relative; width: 250px; height: 250px; margin: 0 auto;
  border-radius: 50%; background: #000; overflow: hidden;
}
.why-circle img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  opacity: .4; transition: opacity .5s ease;
}
.why-list a:hover .why-circle img,
.why-list a:focus-visible .why-circle img { opacity: .9; }
.why-cap {
  position: absolute; z-index: 2; left: 0; right: 0; top: 30%;
  transition: top .5s ease;
}
.why-list a:hover .why-cap, .why-list a:focus-visible .why-cap { top: 32%; }
.why-no { display: block; font-size: 15px; font-weight: 600; color: var(--gold); letter-spacing: .12em; line-height: 1.2; }
/* 구는 h_line_b.gif(15x1) 한 장으로 번호와 이름 사이에 줄을 그었다 — 회수한 그 파일을 그대로 쓴다 */
.why-list h3 {
  margin: 7px 0 0; padding-top: 10px;
  font-size: 20px; font-weight: 600; color: #fff;
  letter-spacing: -0.03em; line-height: 1.3;
  background: url("../assets/deco/h_line_b.gif") no-repeat center 0;
}
.why-list p { margin: 20px 0 0; color: #232323; font-size: 15px; line-height: 1.4; }
.why-more {
  display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: #232323;
  border-bottom: 1px solid #232323; padding-bottom: 3px;
}
.why-list a:hover .why-more, .why-list a:focus-visible .why-more { color: #000; border-bottom-color: #000; }
.why-list a:focus-visible .why-circle { outline: 3px solid #232323; outline-offset: 4px; }

/* ---------- Memories: 영상 + 카운터 ---------- */

/* 이 구역의 바탕은 스튜디오 실사다 (B7). 평평한 차콜로 두면 별 반짝임이 얹힐 바탕이 없어
   장치만 남고 인상이 사라진다. 배경 그림은 접힘에서 한참 아래라 `lit` 이 붙은 뒤에 받는다. */
.sec-movie { background: #44322c; color: #f2efe7; }
.sec-movie.lit { background: #44322c url("../assets/bg/m_movie_bg.jpg") no-repeat center bottom / cover; }

/* 별 반짝임 오버레이 (R8) — 구의 .star/.star2 두 겹. 같은 타일을 40s/20s 로 흘려 시차를 만든다 */
.sec-stars { position: relative; overflow: hidden; }
.sec-stars > .shell { position: relative; z-index: 2; }
/* 타일은 `lit` 이 붙은 뒤에만 받는다. 이 섹션은 접힘에서 1만 9천 px 아래인데 CSS 배경은
   화면 밖이어도 스타일 계산 시점에 요청이 나가 첫 화면 전송량에 22KB 가 얹혔다(라이브 실측). */
.stars {
  position: absolute; left: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none;
}
.stars.lit { background: url("../assets/deco/bg_star.png") 0 0 repeat; }
.stars-1 { top: 0; animation: starDrift 40s linear infinite; }
.stars-2 { top: 100px; animation: starDrift 20s linear infinite; }

.video-frame {
  position: relative; width: 100%; max-width: 880px; margin: 0 auto;
  aspect-ratio: 16 / 10; background: #000; border: 1px solid var(--line-dark);
  box-shadow: 10px 10px 25px rgba(42, 38, 34, .9);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 영상 파사드 — 누르기 전에는 사진만. 누른 자리에서 iframe 이 만들어져 이 버튼을 대신한다.
   썸네일은 4:3(가로 영상은 위아래에 검은 띠가 들어 있다)이고 틀은 16:10 이다.
   cover 로 채우면 남는 띠가 틀의 검은 배경과 같은 색이라 이음매가 보이지 않는다. */
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: #000; cursor: pointer; display: block;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 50px; border-radius: 8px; background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
/* 재생 표시는 글리프가 아니라 테두리로 그린 삼각형이다 (emoji_gate) */
.video-play-mark::before {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 19px solid #241d00;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.video-play:hover .video-play-mark { background: #ffcf3a; transform: translate(-50%, -50%) scale(1.06); }
.video-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.video-play:focus-visible .video-play-mark { background: #fff; }
.video-noscript {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  background: var(--gold); color: #241d00; font-size: 14px; font-weight: 700;
  padding: 10px 18px; border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 카운터 네 칸 (B7) — 아이콘·세로 구분선·왼쪽 정렬 세 가지가 구의 문법이다.
   G5 는 가운데 정렬 숫자 넉 줄이었고 그래서 "수치 네 개"로만 읽혔다.
   line.png(1x1 검정 반투명)를 세로로 흘려 칸을 가르고, 마지막 칸만 뺀다. */
.count-list {
  list-style: none; margin: 62px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.count-list li {
  text-align: left; padding: 0 8px;
  background: url("../assets/deco/line.png") repeat-y right 0;
}
.count-list li:last-child { background: none; }
.count-list dl {
  margin: 0; padding-left: 75px; margin-left: 30px; min-height: 60px;
  background-repeat: no-repeat; background-position: 0 5px; background-size: 60px 60px;
}
.count-1 dl { background-image: url("../assets/deco/mcount_1.png"); }
.count-2 dl { background-image: url("../assets/deco/mcount_2.png"); }
.count-3 dl { background-image: url("../assets/deco/mcount_3.png"); }
.count-4 dl { background-image: url("../assets/deco/mcount_4.png"); }
.count-list dt { font-size: 15px; color: #fff; letter-spacing: -0.01em; }
.count-list dd {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: 14px; color: #fff; letter-spacing: -0.01em;
}
/* 숫자는 라벨보다 두 단 무겁게 세운다. 구는 여기에 공고딕Bold 를 썼는데 그 글꼴은
   자유 이용 근거를 못 찾아 도입하지 않았다 — 같은 자리를 GmarketSans Bold 32px 로 채운다
   (라벨 Medium 14 / 숫자 Bold 32 로 층은 그대로 두 단이다). */
.count-list dd .counter {
  font-weight: 700; font-size: 32px; color: #fff;
  padding-top: 10px; padding-right: 3px; letter-spacing: -0.02em;
}
.count-list dd .unit { color: #fff; margin-left: 3px; font-weight: 500; }

/* ---------- 강사 소개 (R7 · 구 #mcount 복원) ---------- */

/* 이 구역도 바탕이 노랑이다 (B9) — mlo_bg.jpg 는 노랑 전면 위로 우하단에 스튜디오 사진이 비치는 판이다.
   부유 문구가 제목·링크와 겹치지 않도록 위아래 여백을 넓게 잡는다 — 구도 70px 패딩 안에서
   글자가 위아래 가장자리에만 걸리는 구성이었다 */
.sec-instructor {
  position: relative; overflow: hidden; padding: 150px 0 160px;
  background: var(--gold); color: #232323;
}
.sec-instructor.lit { background: var(--gold) url("../assets/bg/mlo_bg.jpg") no-repeat right 0 / cover; }
.sec-instructor > .shell { position: relative; z-index: 2; }
/* 배경 부유 문구 두 줄 — 구의 시그니처. 화면 밖으로 넘치는 것이 정상이라 섹션이 잘라낸다.
   구의 흰색 0.2 / 0.4 를 그대로 쓴다. 노랑 위의 흰 0.2 는 거의 안 보이므로 위 줄만 굵기를 Bold 로,
   아래 줄은 Light 로 둔 구의 무게 차이가 여기서 두 줄을 가르는 유일한 단서가 된다 (B3). */
.float-text {
  position: absolute; z-index: 1; font-family: var(--display);
  color: #fff; line-height: 1; white-space: nowrap; pointer-events: none;
}
.float-a { top: 0; left: -30px; opacity: .2; font-size: 110px; font-weight: 700; text-align: left; animation: floatA 5s linear infinite; }
.float-b { bottom: 0; right: 0; opacity: .4; font-size: 100px; font-weight: 300; letter-spacing: -0.1em; text-align: right; animation: floatB 3s linear infinite; }

/* 원장 카드 (G13) — 종전에는 스택 y=4,747 로 보내는 링크였다. 이 자리가 y=45,245 라
   누르면 45화면 위로 튀고 상세를 다시 내려와야 했다. 링크를 걷고 이력을 여기 세운다.
   사진 폭은 420px 그대로 둔다 — 명부 강사(205px)와의 크기 차이가 곧 위계다. */
.inst-card { max-width: 780px; margin: 0 auto; }
.inst-card figure { position: relative; margin: 0 auto; max-width: 420px; background: #000; }
.inst-card img { width: 100%; height: auto; display: block; }
/* 이름표 아래 밑줄은 회수한 h_line_2.gif(22x1) 한 장이다 — 구의 `.tit` 이 쓰던 그 파일 그대로 */
.inst-cap {
  position: absolute; left: 0; right: 0; top: 20px; text-align: center;
  padding-bottom: 7px;
  background: url("../assets/deco/h_line_2.gif") no-repeat center bottom;
}
.inst-cap span { display: block; font-size: 18px; color: #000; letter-spacing: -0.02em; padding-bottom: 7px; }
.inst-cap b {
  display: inline-block; font-family: var(--display); font-size: 26px; font-weight: 700;
  color: #000; letter-spacing: -0.03em; line-height: 1.2;
}
/* 담당 한 줄 — 명부 강사들이 이름 옆에 달고 있는 것과 같은 정보를 원장에게도 준다 */
.inst-role {
  margin: 22px auto 0; max-width: 560px; text-align: center;
  font-size: 14.5px; line-height: 1.7; letter-spacing: -0.02em; color: #232323;
}
.inst-body { margin-top: 30px; padding-bottom: 0; border-top: 1px solid rgba(35,35,35,.3); }
.inst-body h4:first-child { margin-top: 18px; }

/* 강사 명부 (G9) — 격자를 버리고 가로 행 셋. 글 기둥이 주인공이고 사진은 그 옆에 앉는다.
   행마다 사진 좌우를 바꾸고, 행 사이는 헤어라인 하나. 박스·라운드·그림자 0. */
.inst-roll { margin: 92px auto 0; padding: 0; list-style: none; max-width: 780px; }
/* 이력을 펼쳐 두면 글기둥이 사진보다 훨씬 길어져 사진이 위에 떠 버린다 (G13).
   이름·번호만 사진과 나란히 두고, 이력은 그 아래 전폭으로 내려 두 단에 담는다. */
.inst-roll > li {
  display: grid; grid-template-columns: minmax(0, 1fr) 205px;
  column-gap: 60px; align-items: center;
  border-top: 1px solid rgba(35,35,35,.3); padding: 38px 0 34px;
}
.inst-roll > li:last-child { padding-bottom: 6px; }
.inst-roll .ir-hd { grid-column: 1; grid-row: 1; }
.inst-roll .ir-ph { grid-column: 2; grid-row: 1; }
.inst-roll .it-more { grid-column: 1 / -1; grid-row: 2; }
.inst-roll > li:nth-child(even) { grid-template-columns: 205px minmax(0, 1fr); }
.inst-roll > li:nth-child(even) .ir-hd { grid-column: 2; }
.inst-roll > li:nth-child(even) .ir-ph { grid-column: 1; }
/* 사진은 자연색 그대로. 배경은 원장 카드와 같은 웜 아이보리가 되도록 자산 단계에서
   구워 두었다 — 노랑 판 위에서 차가운 회백 박스로 뜨지 않는다. */
.ir-ph { margin: 0; }
.ir-ph img { width: 100%; height: auto; display: block; }
.ir-no {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: rgba(35,35,35,.2);
}
.inst-roll h3 {
  margin: 10px 0 0; font-family: var(--display); font-size: 29px; font-weight: 700;
  color: #232323; letter-spacing: -0.03em; line-height: 1.25;
}
.inst-roll h3 span {
  margin-left: 13px; font-family: var(--font); font-size: 13.5px;
  font-weight: 400; letter-spacing: -0.02em; color: rgba(35,35,35,.78);
}
@media (max-width: 860px) {
  .inst-roll { margin-top: 64px; }
  .inst-roll > li,
  .inst-roll > li:nth-child(even) { grid-template-columns: 122px minmax(0, 1fr); column-gap: 24px; padding: 30px 0 26px; }
  .inst-roll .ir-ph,
  .inst-roll > li:nth-child(even) .ir-ph { grid-column: 1; grid-row: 1; }
  .inst-roll .ir-hd,
  .inst-roll > li:nth-child(even) .ir-hd { grid-column: 2; align-self: center; }
  .inst-roll .it-more,
  .inst-roll > li:nth-child(even) .it-more { grid-column: 1 / -1; }
  .ir-no { font-size: 30px; }
  .inst-roll h3 { font-size: 22px; }
  .inst-roll h3 span { display: block; margin: 7px 0 0; }
}
/* 자격증·경력을 접어 두던 <details> 를 걷었다 (G13) — 한 번 더 눌러야 보이는 정보는
   그 한 번을 안 누르는 사람에게는 없는 정보다. 테두리 선만 남기고 라벨로 바꾼다. */
.it-more { margin-top: 20px; border-top: 1px solid rgba(35,35,35,.3); }
.it-body { padding-bottom: 16px; }
.it-body h4 {
  margin: 16px 0 7px; font-family: var(--font); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; color: rgba(35,35,35,.9);
}
.it-body ul { margin: 0; padding: 0; list-style: none; }
/* 접어 뒀을 때는 12.5px 이어도 됐다 — 눌러서 여는 사람만 보는 곁가지였으니까.
   상시 노출로 바뀐 이상 본문이므로 최소선(15px 미만은 소품) 쪽으로 올린다 (G13). */
.it-body li {
  position: relative; padding-left: 10px; font-size: 13.5px; line-height: 1.85;
  color: #232323; letter-spacing: -0.02em; word-break: keep-all;
}
.it-body li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 4px; height: 1px; background: rgba(35,35,35,.55);
}
.it-body li ul { margin: 2px 0 4px; }
/* 배경 사진의 어두운 부위 위에서 .78 이면 대비가 3.3:1 까지 내려간다 — 본문 최소선 아래다 */
.it-body li ul li { padding-left: 9px; font-size: 12.5px; color: rgba(35,35,35,.9); }
.it-body li ul li::before { width: 3px; background: rgba(35,35,35,.4); }
/* 접는 장치를 걷으면 세로가 그만큼 길어진다 — 폭이 남는 화면에서는 두 단으로 나눠 담는다.
   columns 는 항목 수에 따라 알아서 균형을 잡으므로 사람마다 다른 항목 수에 손이 안 간다. */
@media (min-width: 861px) {
  .it-body > ul { columns: 2; column-gap: 36px; }
  .it-body > ul > li { break-inside: avoid; }
  .inst-body > ul { column-gap: 46px; }
}

/* ---------- 프로그램 버튼 ---------- */

/* 바탕은 흑백 사진 콜라주다 (B8). 투명하게 두면 카드 여섯 장이 흰 여백에 떠 있는 그리드가 되고,
   구에서 이 구역이 갖고 있던 "수업 장면이 뒤에 깔린 판"이라는 층이 통째로 없어진다. */
.sec-online { background: #010312; }
.sec-online.lit { background: #010312 url("../assets/bg/m_online_bg.jpg") no-repeat center 50% / cover; }

/* 차콜/골드 교차 카드 (R13) — 구의 .project_btn / .type_w. 3열이라 지그재그로 깔린다.
   구 CSS 는 hover 에서 `+` 를 60도 돌리려 했는데 주석이 선언을 먹어 죽어 있었다. 살려 둔다.
   카드 안쪽 1px #5B6873 실선은 구가 `.txt` 에 두른 테두리다 — 그림자 흉내가 아니라 진짜 선으로 되돌린다. */
.prog-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.prog-list a {
  position: relative; display: block;
  background: #232323; border: 1px solid #232323; border-radius: 0;
  padding: 5px; box-shadow: none;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.prog-list a > span:first-child {
  display: block; border: 1px solid #5b6873; padding: 21px 46px 21px 20px;
}
.prog-list li:nth-child(even) a {
  background: var(--gold-raw); border-color: var(--gold-raw); color: #232323;
  box-shadow: none;
}
.prog-list .kicker { display: block; font-size: 12px; letter-spacing: .12em; color: #fff; font-weight: 400; margin-bottom: 7px; }
.prog-list .name { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--gold-raw); }
.prog-list li:nth-child(even) .kicker,
.prog-list li:nth-child(even) .name { color: #232323; }
.prog-list .plus {
  position: absolute; right: 15px; top: 4px; z-index: 1;
  font-size: 40px; color: #fff; line-height: 1;
  transition: transform .35s ease, color .35s ease;
}
.prog-list li:nth-child(even) .plus { color: #232323; }
/* hover 는 두 벌이 서로의 색으로 뒤집힌다 */
.prog-list a:hover, .prog-list a:focus-visible {
  background: var(--gold-raw); border-color: var(--gold-raw); color: #232323;
}
.prog-list a:hover .kicker, .prog-list a:focus-visible .kicker,
.prog-list a:hover .name, .prog-list a:focus-visible .name,
.prog-list a:hover .plus, .prog-list a:focus-visible .plus { color: #232323; }
.prog-list li:nth-child(even) a:hover, .prog-list li:nth-child(even) a:focus-visible {
  background: #232323; border-color: #232323;
}
.prog-list li:nth-child(even) a:hover .kicker, .prog-list li:nth-child(even) a:focus-visible .kicker,
.prog-list li:nth-child(even) a:hover .plus, .prog-list li:nth-child(even) a:focus-visible .plus { color: #fff; }
.prog-list li:nth-child(even) a:hover .name, .prog-list li:nth-child(even) a:focus-visible .name { color: var(--gold-raw); }
.prog-list a:hover .plus, .prog-list a:focus-visible .plus { transform: rotate(60deg); }

/* ---------- 고객센터 (D1) ----------
   구의 사진 배경과 타이틀 문법은 되살리고, 그 안에 있던 날짜 달린 공지 리스트는 만들지 않는다.
   고객이 직접 관리할 것을 만들지 않는 것이 확정 사양이라, 그 자리에 **갈 곳 둘**을 세웠다 —
   이미 있는 시간표 페이지와 실제로 운영 중인 SNS 계정. 더보기도 죽은 링크도 없다. */
.sec-board { background: #2c2803; color: #fff; }
.sec-board.lit { background: #2c2803 url("../assets/bg/m_board_bg.jpg") no-repeat center 0 / cover; }
.board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 860px; margin: 0 auto; }
.board-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(14,12,2,.78); border: 1px solid rgba(255,255,255,.34);
  padding: 30px 28px 26px;
}
.board-k {
  font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .04em;
  background: var(--gold); color: #232323; padding: 3px 9px 1px;
}
.board-card b {
  margin: 16px 0 0; font-family: var(--display); font-weight: 500;
  font-size: 19px; line-height: 1.4; color: #fff; letter-spacing: -0.02em;
}
.board-p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: #e3ded0; }
.board-go {
  margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--gold);
  border-bottom: 1px solid var(--gold); padding-bottom: 3px;
}
a.board-card:hover .board-go, a.board-card:focus-visible .board-go { color: #fff; border-bottom-color: #fff; }
a.board-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.board-sns { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.board-sns a {
  font-size: 14px; font-weight: 700; color: var(--gold);
  border-bottom: 1px solid var(--gold); padding-bottom: 3px;
}
.board-sns a:hover, .board-sns a:focus-visible { color: #fff; border-bottom-color: #fff; }

/* ---------- 상담 폼 ---------- */

.consult-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; }
.consult-lead h2 { margin: 0 0 22px; font-family: var(--display); font-size: clamp(25px, 3vw, 34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.32; }
.consult-lead p { margin: 0 0 18px; color: var(--ink-mid); font-size: 16px; line-height: 1.9; }
.consult-direct { list-style: none; margin: 30px 0 0; padding: 0; }
.consult-direct li { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; }
.consult-direct li:last-child { border-bottom: 1px solid var(--line); }
.consult-direct .k { flex: 0 0 88px; color: var(--ink-soft); }
.consult-direct .v { font-weight: 700; letter-spacing: -0.01em; }
/* 상담시간 09~22 만 보면 스택의 POINT 4(새벽·심야 수업)와 어긋난 것으로 읽힌다.
   상담 받는 시간과 수업 하는 시간이 다르다는 것을 그 줄 옆에서 바로 말한다 (G6 P14). */
.consult-direct .v-note {
  display: block; margin-top: 5px;
  font-weight: 400; font-size: 14px; color: var(--ink-mid); letter-spacing: 0;
}
/* 값은 잔글씨로 달지 않는다 — 달 만하면 본문 크기로 세우고, 아니면 아예 쓰지 않는다
   (LANDING_CONVERSION §9-1). 히어로에만 있던 체험 가격 제안을 폼 앞에서 한 번 더 세운다. */
.consult-offer {
  margin: 0 0 18px; font-size: 17px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
}

.form-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 40px 36px; }
.form-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.form-note { margin: 0 0 26px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.field .req { color: #c0392b; margin-left: 3px; }
/* 16px 아래로 내려가면 iOS 가 입력칸을 누르는 순간 화면을 확대해 버리고 되돌려 주지 않는다.
   글자 크기가 아니라 그 동작을 막으려고 16px 이다 (G6 F4). */
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  border: 1px solid #d9d4c6; border-radius: 3px; padding: 13px 14px; background: #fff;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.field-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.7; margin-bottom: 22px; }
.field-consent input { margin-top: 4px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--gold-deep); }
.field-consent a { text-decoration: underline; }
.submit-btn {
  width: 100%; background: var(--charcoal); color: #fff; border: 0; border-radius: 3px;
  padding: 17px 24px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer;
}
.submit-btn:hover, .submit-btn:focus-visible { background: #1f1f1f; }
.submit-btn[disabled] { opacity: .55; cursor: default; }

/* ---------- 방문 안내 + 지도 ---------- */

/* 살아있는 그라디언트 (R9) — 구 .about 그대로. 400% 판을 5초에 한 바퀴 왕복시킨다 */
.sec-visit {
  background: linear-gradient(-67.5deg, #232323, #4c4c4c, #000000, #2b2a2a);
  background-size: 400% 400%;
  animation: gradientBG 5s ease infinite;
  color: #f2efe7;
}
/* 왼쪽 정보 · 오른쪽 스튜디오 실사 · 그 아래 전폭 지도 (B10) — 구의 배치 그대로다.
   G5 에서는 사진이 통째로 빠지고 정보와 지도만 남아, 이 구역이 "주소 표"로만 읽혔다. */
.visit-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.visit-info { padding: 70px 5% 40px; align-self: center; }
.visit-photo { position: relative; min-height: 100%; }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; }
.visit-info h2 {
  margin: 0 0 40px; padding: 10px 0 20px 100px;
  font-family: var(--display); font-size: 37px; font-weight: 700; line-height: 1;
  letter-spacing: -0.025em; color: var(--gold);
  border-bottom: 1px solid #4c4c4c; position: relative;
}
/* 제목 왼쪽 따옴표 마크 — 구의 about_mark.png 를 회수해 그대로 얹었다 */
.visit-mark {
  position: absolute; left: 0; top: 6px;
  width: 90px; height: 69px;
  background: url("../assets/deco/about_mark.png") no-repeat 0 0 / contain;
}
.visit-info h2 .sub {
  display: block; margin-top: 12px;
  font-size: 21px; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: #fff;
}
.visit-dl { margin: 0; display: grid; grid-template-columns: 25% 1fr; gap: 15px 3%; align-items: center; }
.visit-dl dt { margin: 0; }
/* 노랑 pill 라벨 — 구의 `dt span` 이다. 회색 평문으로 두면 라벨과 값이 같은 층으로 붙어 읽힌다.
   글자 12px 은 원본 렌더 실측값이다 (선언값이 아니라 화면에 그려진 크기 — G7 반려 R3). */
.visit-dl dt span {
  display: block; background: var(--gold); color: #232323;
  font-family: var(--display); font-weight: 500; font-size: 12px; line-height: 1.7;
  padding-top: 3px; text-align: center;
}
.visit-dl dd {
  margin: 0; font-family: var(--display); font-weight: 500; font-size: 15px;
  letter-spacing: 0; color: #fff;
}
.visit-dl dd a { color: #fff; }
.visit-dl dd a:hover, .visit-dl dd a:focus-visible { color: var(--gold); }
.map { line-height: 0; border-top: 1px solid rgba(255,255,255,.18); background: #1c1c1c; }
.map iframe { display: block; width: 100%; height: 460px; border: 0; }
/* 길찾기는 지도가 살아 있든 죽었든 늘 보인다 (G6 P13). 종전에는 임베드가 막혔을 때만 나오는
   숨은 폴백이었는데, 정작 길찾기가 필요한 사람은 지도가 멀쩡한 화면에서도 앱으로 건너가고 싶어 한다. */
.map-links {
  margin: 0; padding: 16px 18px 20px; font-size: 15px;
  /* .map 의 line-height:0(iframe 틈 제거)을 그대로 물려받으면 글자가 포개진다 — 여기서 되살린다 */
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.18);
}
.map-links .addr { margin: 0 0 12px; color: #cfcabd; }
/* 길찾기는 손가락으로 누르는 부품이다 — 밑줄 링크가 아니라 표적 44px 짜리 버튼으로 세운다.
   두 이름을 같은 문법(「…로 길찾기」)으로 맞춰 무엇이 일어나는지가 이름에 들어 있게 한다. */
.map-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.map-btn {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px;
  border: 1px solid rgba(255,255,255,.42); border-radius: 3px;
  color: #f3f0e7; font-weight: 700; text-decoration: none; letter-spacing: -.01em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.map-btn:hover, .map-btn:focus-visible {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}
@media (max-width: 480px) { .map-btns { display: grid; grid-template-columns: 1fr; } }
/* 임베드가 끝내 안 뜬 경우에만 나오는 한 줄. `hidden` 은 UA 규칙이라 display 선언에 지므로
   [hidden] 을 따로 잠가 둔다 — 이 자물쇠가 없어 G2 부터 라이브까지 폴백이 지도와 같이 떠 있었다. */
.map-dead { display: block; padding: 22px 18px 0; font-size: 14px; line-height: 1.6; color: #cfcabd; }
.map-dead[hidden] { display: none; }

/* ---------- 푸터 ---------- */

.foot { background: var(--ink-deep); color: #b9b4a8; padding: 56px 0 100px; font-size: 14px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid #3d3d3d; }
.foot-nav a { color: #efece4; }
.foot-nav a:hover, .foot-nav a:focus-visible { color: var(--gold); }
.foot-info { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot-info .name { color: #efece4; font-weight: 700; }
.foot-info a { text-decoration: underline; }
.foot-copy { margin: 18px 0 0; color: #85817a; font-size: 13px; }

/* ---------- 퀵배너 (B12 · B13) ----------
   G5 까지 이 자리는 글자 열 개짜리 무채색 단추 넉 장이었다. 구 사이트는 같은 자리에서
   전화번호·카톡 아이디·접수시간을 **늘 펼쳐 두는** 100x555 짜리 정보 배너였고, 발주자 지시가
   "너무 간소화하기보다 어느 정도 필요한 정보는 주자"였다. 그 여섯 단을 되살리고 문자 한 단을 더 얹는다.
   글자는 GIF 를 되쓰지 않고 HTML 로 쓴다 — 원본 GIF 는 폭 100px 이라 요즘 화면에서 뭉개지고,
   `alt` 가 템플릿 잔재("무료법률 상담신청")로 남아 있었다. 아이콘만 같은 자리에 다시 그린다. */
.quick-pc {
  position: fixed; top: 130px; right: 0; z-index: 96; width: 100px;
  background: #171717; color: #fff; text-align: center;
}
.quick-pc .q-tit {
  margin: 0; background: var(--gold); color: #171717;
  font-family: var(--display); font-weight: 500; font-size: 14px; line-height: 1.35;
  padding: 15px 6px; letter-spacing: -0.03em;
}
.quick-pc .q-tit b { display: block; font-weight: 700; }
.q-tile {
  display: block; padding: 12px 5px 11px; border-top: 1px solid #4b4b4b;
  color: var(--gold);
}
.q-tile svg { display: block; width: 40px; height: 34px; margin: 0 auto 7px; }
/* 라벨도 노랑이다. 원본 타일 석 장(quick_1·2·3)의 색 히스토그램에는 흰 화소가 한 개도 없다 —
   #232323 바탕에 #FFE300 하나뿐이다. 라벨만 희게 두면 배너 한복판에서 브랜드 색이 끊긴다
   (G7 반려 R5-②). 층은 색이 아니라 크기·무게로 세운다 — 라벨 11 보통 / 값 13 볼드. */
.q-k {
  display: block; font-size: 11px; line-height: 1.3; color: var(--gold);
  letter-spacing: -0.04em;
}
.q-k-solo { color: var(--gold); font-weight: 700; font-size: 13px; }
/* 전화번호는 이 배너가 늘 펼쳐 두는 정보의 핵심이라 줄이 갈리면 안 된다.
   100px 안에 12자를 넣어야 해서 폭에 맞춰 눌러 그린다 (자간이 아니라 글자 자체를 좁힌다). */
.q-v {
  display: block; font-family: var(--display); font-weight: 700; font-size: 13px;
  line-height: 1.35; letter-spacing: -0.06em; color: var(--gold);
  white-space: nowrap; transform: scaleX(.93); transform-origin: 50% 50%;
}
.q-tile:hover, .q-tile:focus-visible { background: #262626; }
.q-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.q-hour {
  margin: 0; border-top: 1px solid #4b4b4b; padding: 12px 5px 13px;
  font-size: 11px; line-height: 1.45; letter-spacing: -0.04em;
}
.q-hour b {
  display: block; font-weight: 700; font-size: 12px; padding-bottom: 8px;
  margin-bottom: 8px; border-bottom: 1px solid #4b4b4b;
}
.q-hour span { display: block; }
.q-hour span:first-of-type { font-weight: 700; }
.q-hour span + span { margin-top: 7px; }
.q-hour em { font-style: normal; color: var(--gold); font-weight: 700; }
.q-top {
  display: block; width: 100%; height: 30px; padding: 0; border: 0; cursor: pointer;
  background: var(--gold); position: relative;
}
.q-top::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px; margin: -3px 0 0 -6px;
  border-left: 2px solid #171717; border-top: 2px solid #171717;
  transform: rotate(45deg);
}
.q-top:hover, .q-top:focus-visible { background: #ffed4d; }

/* 하단 바 — 구는 검정 글자를 얹은 **노랑 바**였다. G5 의 검정 바탕 흰 글자는 그 반전을 뒤집은 것이라
   화면 아래에서 브랜드 색이 한 번도 안 보였다. 노랑으로 되돌리고 라벨도 전체형으로 쓴다 (B13). */
.quick {
  position: fixed; right: 0; left: 0; bottom: 0; z-index: 90;
  display: flex; background: var(--gold);
  box-shadow: 0 -2px 14px rgba(0,0,0,.18);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.quick a {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  gap: .5em; white-space: nowrap;
  padding: 15px 6px; border-right: 1px solid #343434;
  color: #171717; font-size: 14px; font-weight: 700; letter-spacing: -0.03em;
  padding-bottom: calc(15px + env(safe-area-inset-bottom));
}
/* 원본 바는 quick_mo_1~3 석 장 전부 아이콘+글자 한 벌이었다. 글자만 남기면 B13 이 반만 서므로
   PC 배너와 같은 SVG 를 같은 자리에 다시 그린다 (G7 반려 R4).
   크기는 원본 실측 비율 — quick_mo_1 아이콘 잉크 27px 대 글자 잉크 22px = 1.23배.
   파낸 자리(문자 두 줄·TALK·화면)는 배너에서 어두운 바탕색이었는데 여기서는 바탕이 노랑이라
   같은 값을 박아 둘 수 없다. `.kn` 으로 갈라 CSS 가 칠하고, 반전되는 hover 에서 같이 뒤집는다. */
.quick a svg { flex: 0 0 auto; width: 1.32em; height: 1.1em; }
.quick a svg .kn { fill: var(--gold); }
.quick a:last-child { border-right: 0; }
.quick a:hover, .quick a:focus-visible { background: #171717; color: var(--gold); }
.quick a:hover svg .kn, .quick a:focus-visible svg .kn { fill: #171717; }
.foot { padding-bottom: 96px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* 두 벌은 서로 배타적이다. 세로 배너는 본문 기둥(최대 1180px) 밖에 100px 이 남을 때만 세운다 —
   1180 + 100 x 2 = 1380 이고, 그 아래에서 세우면 상담 폼 카드 오른쪽을 덮는다.
   구는 700px 까지 세로 배너를 유지했지만 구의 본문은 90% 유동폭이라 겹침 조건이 달랐다. */
@media (max-width: 1379px) { .quick-pc { display: none; } }
@media (min-width: 1380px) {
  .quick { display: none; }
  .foot { padding-bottom: 56px; }
}
/* 데스크톱 폭(1024~1379)에서는 같은 하단 바가 모바일 UI 처럼 무겁다 — 높이를 낮춘다 (R15).
   손가락으로 누르는 폭(700 이하)에서는 지금 크기를 유지한다. */
@media (min-width: 701px) and (max-width: 1379px) {
  .quick a { padding: 10px 8px; font-size: 13px; line-height: 1.54; }
  .quick a { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .foot { padding-bottom: 78px; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ---------- 맨 위로 (R11 · 구 TopScroll 복원) ---------- */

/* 우측 세로 배너가 서는 폭에서는 배너 맨 아래 칸이 같은 일을 하므로 떠 있는 단추를 두지 않는다 */
@media (min-width: 1380px) { .topscroll { display: none; } }
.topscroll {
  position: fixed; right: 20px; bottom: -100px; z-index: 95;
  width: 45px; height: 45px; padding: 0; border: 0; border-radius: 5px;
  background: #000; color: #fff; opacity: .6; cursor: pointer;
  transition: bottom .25s ease, opacity .25s ease, background-color .25s ease;
}
.topscroll.on { bottom: 40px; }
/* 상담 폼·푸터 위에서는 물러난다 — 떠 있는 단추가 그 자리의 클릭을 가로채는 것을 막는다 (scripts/main.js) */
.topscroll.away { opacity: 0; pointer-events: none; }
.topscroll:hover, .topscroll:focus-visible { background: #232323; opacity: 1; }
/* 꺾쇠는 글리프가 아니라 테두리로 그린다 (emoji_gate) */
.topscroll::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px; margin: -3px 0 0 -6px;
  border-left: 2px solid #fff; border-top: 2px solid #fff;
  transform: rotate(45deg);
}
@media (max-width: 1379px) {
  .topscroll { width: 38px; height: 38px; }
  .topscroll.on { bottom: 96px; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .topscroll::before { width: 9px; height: 9px; margin: -2px 0 0 -5px; }
}
@media (min-width: 701px) and (max-width: 1379px) {
  .topscroll.on { bottom: 78px; bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ---------- 서브 페이지 ---------- */

.page-top { background: var(--charcoal); color: #fff; padding: 74px 0 66px; text-align: center; }
.page-top .eyebrow { display: block; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 16px; }
.page-top h1 { margin: 0; font-family: var(--display); font-size: clamp(27px, 3.6vw, 40px); font-weight: 700; letter-spacing: -0.03em; }
/* 블로그 글 페이지의 배너 이름 — 글 제목은 본문 h1 로 내려가고 배너는 섹션 이름만 든다 */
.page-top .pt-name { margin: 0; font-family: var(--display); font-size: clamp(27px, 3.6vw, 40px); font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.page-top p { margin: 14px 0 0; color: #c9c4b8; font-size: 15px; }

.block { padding: 84px 0; }
.block + .block { border-top: 1px solid var(--line); }
.block-cream { background: var(--cream); }
.block h2 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(23px, 2.7vw, 30px); font-weight: 700; letter-spacing: -0.025em; }
.block .lead { margin: 0 0 46px; color: var(--ink-mid); font-size: 15px; }

/* 레슨 종류 */
.gear-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px 40px; }
.gear-list h3 { margin: 22px 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.gear-list h3 .no { display: block; font-size: 12px; color: var(--gold-deep); letter-spacing: .2em; margin-bottom: 8px; }
.gear-list ul { margin: 0; padding-left: 18px; color: var(--ink-mid); font-size: 15px; line-height: 1.9; }

/* 레슨 절차 */
.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step-list li { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 30px 26px 32px; }
.step-no { display: block; font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--gold-deep); }
.step-list h3 { margin: 12px 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.step-list p { margin: 0; font-size: 15px; color: var(--ink-mid); line-height: 1.9; }
.step-list b { color: var(--ink); font-weight: 700; }

/* 레슨 영상 */
.movie-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }

/* FAQ */
.faq-list { margin: 0; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 26px 46px 26px 40px; position: relative;
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "Q"; position: absolute; left: 0; top: 26px; color: var(--gold-deep); font-weight: 700; }
.faq-list summary::after {
  content: ""; position: absolute; right: 10px; top: 32px; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  rotate: 45deg; transition: rotate .2s ease;
}
.faq-list details[open] summary::after { rotate: -135deg; }
.faq-list summary:hover, .faq-list summary:focus-visible { color: var(--gold-deep); }
.faq-a { padding: 0 46px 30px 40px; margin: 0; color: var(--ink-mid); font-size: 15px; line-height: 1.95; }

/* 스케줄표 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sched { border-collapse: collapse; width: 100%; min-width: 640px; background: #fff; }
.sched th, .sched td { border: 1px solid #ded9cb; padding: 17px 12px; text-align: center; font-size: 15px; }
.sched thead th { background: var(--charcoal); color: #fff; font-weight: 700; }
.sched thead th.fir { background: #262626; }
.sched tbody th { background: var(--gold); color: #241d00; font-weight: 700; white-space: nowrap; }
.sched tbody tr.alt th { background: #efe9d8; color: var(--ink); }
.sched tbody tr.alt td { background: #f7f7f7; }
.sched-note { margin: 22px 0 0; font-size: 14px; color: var(--ink-soft); }
.sched-sub { margin: 54px 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
/* 지점별 그룹수업 시간표 (2026-09-03) — 시간 × 요일 격자.
   기구 로테이션 표(.sched)는 모든 행이 다섯 요일에 걸쳐 있어 좁은 화면에서 요일을 접을 수 있었다.
   이 표는 칸마다 값이 달라 접으면 자료가 사라진다 — 대신 .table-wrap 이 가로로 굴린다.
   빈 칸은 「수업 없음」이다. 글자를 채워 넣으면 표가 소음으로 덮인다. */
.sched-time { border-collapse: collapse; width: 100%; min-width: 700px; background: #fff; }
.sched-time th, .sched-time td {
  border: 1px solid #ded9cb; padding: 13px 8px; text-align: center;
  font-size: 15px; letter-spacing: -0.02em;
}
.sched-time thead th { background: var(--charcoal); color: #fff; font-weight: 700; }
.sched-time thead th.fir { background: #262626; }
.sched-time tbody th { background: var(--gold); color: #241d00; font-weight: 700; white-space: nowrap; }
.sched-time tbody td { color: var(--ink); }
.sched-time td b { display: block; font-weight: 700; }
/* 종목 아래 담당 강사 — 한 칸에 두 층이라 아래층은 한 단 내린다.
   본문이 아니라 표 안의 두 번째 층이므로 15px 하한(bandqa)의 대상이 아니다. */
.sched-time .sc-who { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-mid); }
.sched-time .brk {
  background: #efe9d8; color: var(--ink-soft); font-weight: 700; letter-spacing: .1em;
}
/* 좁은 화면에서는 표가 .table-wrap 안에서 가로로 구른다. 그때 시간 열까지 같이 밀려 나가면
   「무슨 요일 몇 시」를 못 읽는다 — 시간 열만 왼쪽에 붙여 세운다.
   sticky 는 잘리는 조상이 없어야 도는데, .table-wrap 이 overflow-x 만 잡고 있어 성립한다. */
@media (max-width: 640px) {
  /* 열 너비를 브라우저에 맡기면 시간 열이 140px 을 먹고 요일이 둘밖에 안 보인다.
     고정 배분으로 시간 열을 84px 로 눌러 요일 넷이 첫 화면에 들어오게 한다. */
  .sched-time { min-width: 540px; table-layout: fixed; }
  .sched-time thead th.fir, .sched-time tbody th { width: 84px; }
  .sched-time th, .sched-time td { padding: 11px 4px; font-size: 14px; word-break: keep-all; }
  .sched-time .sc-who { font-size: 12.5px; }
  .sched-sub { margin-top: 42px; font-size: 18px; }
  .sched-time thead th.fir,
  .sched-time tbody th { position: sticky; left: 0; z-index: 1; }
  .sched-time tbody th { box-shadow: 1px 0 0 #ded9cb; }
}
/* 좁은 화면에서는 요일 뒤 두 글자를 접어 표가 가로 스크롤 없이 들어가게 한다.
   자료는 그대로다 — 모든 행이 다섯 요일에 걸쳐 있어 열별로 다른 값이 없다. */
@media (max-width: 640px) {
  .wd { display: none; }
  .sched { min-width: 0; }
  .sched th, .sched td { padding: 14px 6px; font-size: 14px; }
}

/* 법무 문서 */
.legal { padding: 74px 0 96px; }
.legal h2 { margin: 46px 0 14px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { margin: 26px 0 10px; font-size: 17px; font-weight: 700; }
.legal p, .legal li { font-size: 15px; line-height: 1.95; color: #3a3a3a; }
.legal ul { padding-left: 20px; }
.legal .eff { color: var(--ink-soft); font-size: 14px; }
.legal .todo { background: var(--highlight); padding: 1px 5px; border-radius: 2px; }

/* ---------- 반응 ---------- */

/* 카운터 아이콘·여백은 구가 1260 에서 한 단 줄였다 — 같은 자리에서 같은 값으로 줄인다 */
@media (max-width: 1260px) {
  .count-list dl { padding-left: 55px; margin-left: 25px; background-size: 50px 50px; }
  .count-list dd { font-size: 12px; }
  .count-list dd .counter { font-size: 22px; }
}

@media (max-width: 1140px) {
  .why-circle { width: 200px; height: 200px; }
  .float-a { font-size: 84px; }
  .float-b { font-size: 76px; }
  .visit-info h2 { padding: 10px 0 20px 80px; font-size: 30px; margin-bottom: 24px; }
  .visit-mark { width: 70px; height: 54px; }
  .visit-info h2 .sub { font-size: 16px; }
}

@media (max-width: 1000px) {
  .why-list, .prog-list { grid-template-columns: repeat(2, 1fr); }
  /* 2열이 되면 세로 구분선은 오른쪽 칸에만 남아 어긋난다 — 구처럼 선 대신 테두리로 바꾼다 */
  .count-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .count-list li { background: none; border: 1px solid #4a4a49; padding: 10px 0; }
  .count-list dl { padding: 10px 0 10px 40px; margin-left: 15px; background-size: 30px 30px; background-position: 0 14px; }
  .count-list dd .counter { font-size: 20px; }
  .consult-grid { grid-template-columns: 1fr; gap: 44px; }
  /* 사진을 정보 아래로 내린다. 옆에 붙여 두면 반쪽씩 눌려 둘 다 안 읽힌다 */
  .visit-split { grid-template-columns: 1fr; }
  .visit-info { padding: 60px 5% 34px; }
  .visit-photo img { height: 320px; }
  .step-list { grid-template-columns: repeat(2, 1fr); }
  /* 2열이면 교차가 지그재그가 아니라 세로 줄이 된다 — 짝수 행을 뒤집어 바둑판을 지킨다 */
  .prog-list li:nth-child(4n+3) a,
  .prog-list li:nth-child(4n+4) a { background: var(--gold-raw); border-color: var(--gold-raw); box-shadow: none; }
  .prog-list li:nth-child(4n+3) .kicker, .prog-list li:nth-child(4n+3) .name, .prog-list li:nth-child(4n+3) .plus,
  .prog-list li:nth-child(4n+4) .kicker, .prog-list li:nth-child(4n+4) .name, .prog-list li:nth-child(4n+4) .plus { color: #232323; }
  .prog-list li:nth-child(4n+1) a,
  .prog-list li:nth-child(4n+2) a { background: #232323; border-color: #232323; box-shadow: none; }
  .prog-list li:nth-child(4n+1) .kicker, .prog-list li:nth-child(4n+2) .kicker,
  .prog-list li:nth-child(4n+1) .plus, .prog-list li:nth-child(4n+2) .plus { color: #fff; }
  .prog-list li:nth-child(4n+1) .name, .prog-list li:nth-child(4n+2) .name { color: var(--gold-raw); }
}

@media (max-width: 767px) {
  /* 구의 좁은 화면 값 그대로 — 킥커 45 -> 30, 제목 33 -> 25 (행간은 한 단 넓힌다) */
  .sec-head .eyebrow { font-size: 30px; }
  .sec-head h2 { font-size: 25px; line-height: 1.2; }
  .sec-head .chip { font-size: 12px; }
  .float-a { font-size: 50px; }
  .float-b { font-size: 40px; }
  .inst-cap { top: 14px; }
  .inst-cap span { font-size: 13px; padding-bottom: 6px; }
  .inst-cap b { font-size: 20px; }
  .prog-list a { padding: 18px 16px; }
  .prog-list .name { font-size: 16px; }
  .prog-list .kicker { font-size: 11px; }
  .prog-list .plus { font-size: 24px; }
}

@media (max-width: 700px) {
  .shell, .head-in {
    padding: 0 20px;
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }
  /* 오른쪽 아래는 프로그램 카드의 `+`·FAQ 화살표·문의 textarea 손잡이와 같은 x 대역이라
     맨 위로 단추가 그 위에 앉아 있었다(실캡처 3장). 왼쪽으로 옮기고 손가락 표적을 44px 로 넓힌다 (G6 P2).
     ≤1407 블록이 앞서 있으므로 여기서 right 를 auto 로 풀어 줘야 왼쪽이 이긴다. */
  .topscroll { left: 20px; right: auto; width: 44px; height: 44px; }
  .topscroll::before { width: 11px; height: 11px; margin: -3px 0 0 -6px; }
  .sec, .block { padding: 62px 0; }
  .sec-instructor { padding: 96px 0 104px; }
  .inst-roll { margin-top: 52px; }
  .inst-roll > li, .inst-roll > li:nth-child(even) { grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; }
  .sec-head { margin-bottom: 38px; }
  .why-list, .prog-list, .step-list, .gear-list { grid-template-columns: 1fr; }
  /* 1열이면 2열용 4n 규칙이 두 장씩 같은 색으로 붙는다 — 홀짝 교차로 되돌린다 */
  .prog-list li:nth-child(odd) a { background: #232323; border-color: #232323; box-shadow: none; }
  .prog-list li:nth-child(odd) .kicker, .prog-list li:nth-child(odd) .plus { color: #fff; }
  .prog-list li:nth-child(odd) .name { color: var(--gold-raw); }
  .prog-list li:nth-child(even) a { background: var(--gold-raw); border-color: var(--gold-raw); box-shadow: none; }
  .prog-list li:nth-child(even) .kicker, .prog-list li:nth-child(even) .name, .prog-list li:nth-child(even) .plus { color: #232323; }
  .gear-list { gap: 40px; }
  .why-list { gap: 36px; }
  .why-circle { width: 150px; height: 150px; }
  .why-list h3 { font-size: 16px; }
  .why-no { font-size: 13px; }
  .why-cap { top: 20%; }
  .why-list a:hover .why-cap, .why-list a:focus-visible .why-cap { top: 22%; }
  .form-card { padding: 30px 22px; }
  .count-list { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: 1fr; gap: 16px; }
  .visit-info h2 { padding: 10px 0 12px 60px; font-size: 22px; }
  .visit-mark { width: 50px; height: 38px; top: 2px; }
  .visit-info h2 .sub { font-size: 14px; }
  .visit-dl { grid-template-columns: 30% 1fr; gap: 10px 4%; }
  .visit-dl dt span { font-size: 12px; }
  .visit-dl dd { font-size: 13px; }
  .visit-photo img { height: 240px; }
  .map iframe { height: 320px; }
  .page-top { padding: 52px 0 46px; }
  .legal { padding: 52px 0 74px; }
  .faq-list summary { font-size: 16px; padding: 22px 40px 22px 32px; }
  .faq-list summary::before { top: 22px; }
  .faq-list summary::after { top: 28px; }
  .faq-a { padding: 0 40px 26px 32px; }
}

/* 모션을 줄이라고 한 기기에서는 무한 키프레임과 등장 연출을 전부 끈다 (공통 가드레일).
   리빌은 숨김 자체를 풀어야 한다 — 애니메이션만 끄면 opacity 0 에 갇힌다. */
@media (prefers-reduced-motion: reduce) {
  html.js body { opacity: 1; }
  html.js.ready body { transition: none; }
  html.js .rv { opacity: 1; }
  html.js .rv.in { animation: none; }
  .slide, .slide-badge, .hero-dots button[aria-current="true"], .hero-down,
  .stars, .float-text, .sec-visit, .head, .head-in, .head-logo img, .nav,
  .why-list a, .why-circle img, .why-cap, .prog-list a, .prog-list .plus,
  .inst-card img, .topscroll, a, .burger span {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 인쇄 ---------- */

/* 두 가지를 고친다 (G6 P8).
   하나, 랜딩은 등장 연출이 걸린 덩어리가 화면 밖이면 `opacity:0` 인 채로 찍혀 백지가 된다.
   둘, 브라우저는 기본값으로 배경을 안 찍는다 — 어두운 바탕에 밝은 글씨로 된 구역은
      바탕만 사라지고 흰 종이에 흰 글씨가 남는다. 그래서 숨김을 푸는 것만으로는 모자라고
      큰 어두운 면을 잉크색으로 되돌려야 한다. 시간표 머리행이 정확히 이 경우다.
   바탕이 있어야 뜻이 서는 곳(원형 사진 카드)만 print-color-adjust 로 예외를 둔다 —
   전부 exact 로 열면 종이가 새까매진다. */
@media print {
  html.js body { opacity: 1 !important; }
  html.js .rv, html.js .rv.in {
    opacity: 1 !important; animation: none !important; transform: none !important;
  }

  /* 화면에서만 뜻이 있는 것 — 고정 요소·장식·빈 틀 */
  .head, .quick, .quick-pc, .topscroll, .skip, .hero-dots, .hero-down,
  .slide-badge, .stars, .float-text, .map iframe, .video-frame,
  .slot-rule, .slot-dot, .slot-mark { display: none !important; }

  /* 세 장을 같은 칸에 겹쳐 두는 구조라 그대로 두면 종이에서 서로 포개진다 */
  .hero .slide { display: none !important; }
  .hero .slide.on { display: block !important; transform: none !important; }
  .slide::after { display: none !important; }

  /* 어두운 바탕 위 밝은 글씨 구역은 바탕만 사라지고 흰 종이에 흰 글씨가 남는다 —
     바탕을 지우는 김에 글자도 잉크색으로 되돌린다. 배경 사진이 깔린 구역 넷이 전부 여기 해당한다. */
  .hero, .sec-dark, .sec-movie, .sec-online, .sec-board, .sec-instructor, .sec-visit,
  .page-top, .foot, .map, .prog-list a, .sched thead th, .submit-btn {
    background: #fff !important; box-shadow: none !important; animation: none !important;
  }
  .slide-in, .slide h2, .slide p, .slide-eyebrow, .slide-cta,
  .sec-dark, .sec-dark .sec-head .eyebrow, .sec-dark .sec-head p,
  .sec-movie, .sec-movie .sec-head .eyebrow, .sec-movie .sec-head h2,
  .sec-board, .sec-board .sec-head h2, .sec-board .sec-head p,
  .board-card b, .board-p, .board-go, .board-sns a,
  .count-list dt, .count-list dd, .count-list dd .counter, .count-list dd .unit, .inst-role,
  .sec-visit, .visit-info h2, .visit-info h2 .sub, .visit-dl dd,
  .map-links .addr, .map-links a, .map-dead,
  .page-top, .page-top .eyebrow, .page-top h1, .page-top p,
  .foot, .foot-nav a, .foot-info .name, .foot-copy,
  .prog-list .kicker, .prog-list .name, .prog-list .plus,
  .sched thead th, .sched thead th.fir, .submit-btn {
    color: #202020 !important; text-shadow: none !important;
  }
  /* 노랑 판 위 검정 글씨인 곳은 판이 사라져도 글씨가 읽힌다 — 색만 잉크로 고정한다 */
  .sec-yellow, .sec-yellow .why-list p, .sec-yellow .why-more { color: #202020 !important; }
  .sec-yellow { background: #fff !important; }
  /* 노랑 pill·검정 칩·CHECK 배지는 바탕이 있어야 뜻이 서는 작은 조각이다 */
  .sec-head .chip, .visit-dl dt span, .board-k, .rec-badge {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .board-card { border-color: #bbb !important; }
  .slide-cta, .prog-list a, .submit-btn { border: 1px solid #999 !important; }
  .visit-dl dt, .visit-dl dd, .map-links { border-top-color: #bbb !important; }
  .foot-nav { border-bottom-color: #bbb !important; }
  /* 검은 원 위에 사진을 옅게 깔고 흰 글씨를 얹는 카드다 — 바탕을 지우면 글씨가 사라진다 */
  .why-circle { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body { background: #fff !important; }
  .sec, .block, .legal { padding: 24px 0 !important; }
}

/* 배포 때 주입되는 스팸차단 위젯은 안쪽 폭이 300px 로 고정돼 있다. 카드 안쪽이 그보다 좁아지면
   (화면 386px 미만) 눌리는 대신 오른쪽이 잘려 상표와 약관 링크가 사라진다.
   줄이지 않고 카드 여백 쪽으로 번지게 해 원폭을 지킨다. 인라인 style 을 이기려면 !important 가 필요하다.
   아래끝 360px 은 여백을 다 내줘도 300px 이 들어가는 마지막 폭이다(카드 안쪽 = 화면폭 - 86, 번짐 26).
   그보다 좁으면 번지게 해도 모자라 카드와 화면을 뚫고 나가므로 걸지 않는다 — 눌린 위젯이 가로 스크롤보다 낫다. */
@media (min-width: 360px) and (max-width: 385px) {
  .form-card iframe[data-saeroon-turnstile] {
    max-width: none !important;
    margin-left: -13px !important;
    margin-right: -13px !important;
  }
}

/* BLOG:START */
/* ── 블로그 : 목록 카드 + 글 페이지 (생성기 = tools/build_blog.py) ── */
.sec-blog { padding: 96px 0 104px; background: var(--cream); }
.sec-blog .eyebrow { display: block; margin-bottom: 10px; }
.sec-blog h2 { margin: 0 0 8px; }
.sec-blog .lead { margin: 0 0 34px; color: var(--ink-mid); }
.blog-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blog-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover, .blog-card:focus-visible {
  transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.09);
}
.blog-thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--stack-cream); }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  padding: 18px 20px 0; font-size: .82rem; color: var(--ink-soft);
}
.blog-cat {
  background: var(--gold); color: var(--ink); font-weight: 700;
  padding: 3px 9px; border-radius: 2px; font-size: .74rem;
}
/* 지점 표시 (2026-09-03) — 지점이 둘이 되면서 「어느 센터 이야기인가」가 제목만으로는
   안 갈린다. 특히 휴무 안내는 지점마다 날짜가 달라 섞이면 잘못 읽힌다.
   알약으로 만들지 않는다(모서리 2px) — 브랜드 노랑을 한쪽에만 주어 둘이 색으로 갈린다. */
.blog-branch {
  font-weight: 700; font-size: .74rem; padding: 3px 9px; border-radius: 2px;
  letter-spacing: -.02em; white-space: nowrap;
}
.blog-branch-manchon { background: var(--ink); color: var(--white); }
.blog-branch-barre { background: var(--gold); color: var(--ink); }
/* 클램프 요소에 아래 패딩을 주면 잘린 다음 줄이 패딩 영역으로 비쳐 나온다
   (2줄로 자르랬는데 3번째 줄이 카드 밑단에 반쯤 걸린 채 여백 없이 붙던 원인).
   바깥 여백은 전부 margin 으로 — margin 은 박스 밖이라 잘린 글이 못 넘어온다. */
.blog-tit {
  margin: 8px 20px 0; padding: 0; min-height: 3em;
  font-size: 1.04rem; line-height: 1.5; font-weight: 700;
  color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-ex {
  margin: 8px 20px 22px; padding: 0;
  font-size: .9rem; line-height: 1.7; color: var(--ink-mid);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 대표 사진이 없는 글 — 빈 상자를 세우는 대신 발췌문을 넓게 준다.
   사진 카드와 높이를 맞추려고 늘리지 않는다(그리드가 알아서 맞춘다). */
.blog-card-text { background: var(--stack-cream); border-color: var(--line); }
.blog-card-text .blog-meta { padding-top: 22px; }
.blog-ex-long {
  margin: 10px 20px 0; padding: 0; font-size: .9rem; line-height: 1.75; color: var(--ink-mid);
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-more-cue {
  margin: 14px 20px 22px; font-size: .82rem; font-weight: 700; color: var(--gold-deep);
}
/* 연도 구획 — 50편이 한 판으로 쏟아지면 어디까지 왔는지가 안 보인다 */
.blog-year { margin: 0 0 30px; }
.blog-year:last-of-type { margin-bottom: 0; }
.blog-year-h {
  display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none;
  margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em;
}
.blog-year-h::-webkit-details-marker { display: none; }
.blog-year-h::after {
  content: ""; width: 9px; height: 9px; margin-left: auto; margin-bottom: 3px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .2s ease;
}
.blog-year[open] > .blog-year-h::after { transform: rotate(-135deg); margin-bottom: -3px; }
.blog-year-h:hover, .blog-year-h:focus-visible { color: var(--gold-deep); }
.blog-year-n { font-family: var(--font); font-size: .82rem; font-weight: 400; color: var(--ink-soft); }
.blog-year > .blog-grid { margin-top: 20px; }
/* 열린 해 안에서 한 겹 더 접는 자리 — 바깥 연도 머리보다 한 단 작게 세워 층을 보인다 */
.blog-year-rest { margin-top: 26px; }
.blog-year-rest > .blog-grid { margin-top: 18px; }
.blog-year-h-sub { font-size: 1.02rem; color: var(--ink-mid); border-bottom-style: dashed; }
.blog-allmore { margin: 46px 0 0; text-align: center; }
.blog-allmore a {
  display: inline-block; padding: 13px 34px; border: 1px solid var(--ink);
  color: var(--ink); text-decoration: none; font-weight: 700; border-radius: 2px;
  transition: background .2s ease, color .2s ease;
}
.blog-allmore a:hover, .blog-allmore a:focus-visible { background: var(--ink); color: var(--white); }

.shell-narrow { max-width: 760px; }
.blog-date { color: var(--ink-soft); font-size: .88rem; margin: 0 0 10px; }
/* 글 제목이 h1 이 되면서 .block h2 서체 규칙을 못 받으므로 여기서 같은 값으로 잠근다 */
.blog-post-tit {
  margin: 0 0 24px; line-height: 1.45; font-family: var(--display);
  font-size: clamp(23px, 2.7vw, 30px); font-weight: 700; letter-spacing: -0.025em;
}
.blog-post-img { margin: 0 0 28px; }
.blog-post-img img { width: 100%; height: auto; border-radius: 4px; display: block; }
.blog-body { margin: 0 0 26px; }
.blog-body p { line-height: 1.9; color: var(--ink); margin: 0 0 20px; }
.blog-body > :first-child { margin-top: 0; }
/* 원문의 머리표가 세우던 소제목 — 글리프는 걷어내고 자리만 살린다 */
.blog-h {
  font-family: var(--display); font-size: clamp(18px, 1.9vw, 21px); font-weight: 700;
  line-height: 1.5; letter-spacing: -.02em; color: var(--ink);
  margin: 40px 0 14px; padding: 0 0 0 14px; border-left: 3px solid var(--gold);
}
.blog-note {
  margin: 0 0 26px; padding: 16px 18px; background: var(--hl-soft);
  border-radius: 3px; font-size: .92rem; line-height: 1.75; color: var(--ink-mid);
}
.blog-more { margin: 0 0 34px; }
.blog-origin {
  display: inline-block; padding: 13px 30px; background: var(--ink); color: var(--white);
  text-decoration: none; font-weight: 700; border-radius: 2px;
}
.blog-origin:hover, .blog-origin:focus-visible { background: var(--gold); color: var(--ink); }
.blog-nav {
  display: grid; gap: 10px; grid-template-columns: 1fr 1fr;
  margin: 0 0 26px; padding: 22px 0 0; border-top: 1px solid var(--line);
}
.blog-nav a, .blog-nav .empty {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px;
  transition: border-color .2s ease, background .2s ease;
}
.blog-nav a:hover, .blog-nav a:focus-visible { border-color: var(--ink); background: var(--white); }
.blog-nav .dir { display: block; font-size: .78rem; color: var(--ink-soft); margin: 0 0 5px; }
.blog-nav .t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-weight: 700; font-size: .93rem; line-height: 1.5;
}
.blog-nav .next { text-align: right; }
.blog-nav .empty { border-style: dashed; opacity: .45; }
.blog-back { margin: 0; }
.blog-back a { color: var(--ink-mid); text-decoration: none; }
.blog-back a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 560px) {
  .sec-blog { padding: 66px 0 72px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-nav { grid-template-columns: 1fr; }
  .blog-nav .next { text-align: left; }
  .blog-h { margin: 32px 0 12px; }
}
/* BLOG:END */