/* =========================================================================
   원픽뷰티아카데미 — 디자인 파운데이션 v3
   밝고 깔끔한 프리미엄 · 명조 세리프 헤딩 · 네이비블루+골드 액센트
   (v2의 딥로즈/버건디 → 업체 요청으로 밝은 네이비 계열로 전환. 토큰만 바꿔도
    전 페이지가 따라오도록 색은 전부 :root 변수로만 쓴다 — 하드코딩 금지.)
   실제 로고/사진 반영 · 헤더 2상태 가독성 · 커스텀 모션 · 모바일 완벽
   ========================================================================= */

/* ---- 디자인 토큰 ---- */
:root{
  /* 폰트 */
  --font-serif: 'Nanum Myeongjo', 'Gowun Batang', 'Batang', serif;   /* 한글 제목/헤딩(명조) */
  --font-display: 'Cormorant Garamond', 'Nanum Myeongjo', serif;      /* 영문 이럽로우/디스플레이 */
  --font-sans: 'Pretendard', 'Pretendard Variable', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif; /* 본문/UI */

  /* 베이스(맑은 화이트~아이스 블루) */
  --paper:#f6f9fd; --paper-2:#e9f0f9; --surface:#ffffff; --surface-2:#f9fbff;

  /* 잉크(네이비 그레이 — 순검정보다 밝고 부드럽게) */
  --ink:#22304a; --ink-soft:#5b6b88; --ink-faint:#8ea0ba; --ink-rgb:34,48,74;

  /* 브랜드 포인트 — 밝은 네이비/블루 */
  --rose:#1f56b0; --rose-deep:#163f86; --rose-soft:#6f9ae0; --rose-tint:#e6eefc; --rose-rgb:31,86,176;

  /* 럭스 헤어라인 — 샴페인/골드(로고가 골드 세리프라 유지) */
  --gold:#b5924f; --gold-deep:#987836; --gold-soft:#e6d3ac;

  /* 히어로·CTA 다크(딥 네이비) */
  --dark-1:#122a52; --dark-2:#1b3d72; --dark-3:#0c1e3d;

  /* 구조 */
  --line:#dce5f1; --line-soft:#e9eff8;
  --wrap:1200px; --radius:3px; --radius-lg:8px;
  --header-h:78px; --header-h-sm:64px;
  --shadow-card:0 1px 2px rgba(var(--ink-rgb),.04), 0 18px 40px -24px rgba(var(--ink-rgb),.28);
  --shadow-soft:0 10px 30px -18px rgba(var(--ink-rgb),.35);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* 하위호환 별칭(기존 서브페이지 뷰가 참조) — 절대 제거 금지 */
  --bg:var(--surface); --cream:var(--paper); --white:#ffffff; --white-rgb:255,255,255;
  --gray:var(--ink-soft); --rose-on-dark:#cfe0fb; --rose-on-dark-soft:#e9f1fe;
}

/* ---- 리셋 · 베이스 ---- */
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; padding-top:var(--header-h);
  font-family:var(--font-sans); font-size:16px; line-height:1.75;
  color:var(--ink); background:var(--paper);
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  word-break:keep-all; overflow-wrap:break-word;   /* 한글 어절 단위 줄바꿈(단어 중간 안 잘림) */
}
body.is-home{ padding-top:0 }               /* 홈: 히어로가 고정헤더 아래 풀블리드 */
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:800; margin:0; letter-spacing:-.01em; line-height:1.28; word-break:keep-all; overflow-wrap:break-word }
p{ margin:0 }
button{ font-family:inherit }
:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; border-radius:2px }
::selection{ background:var(--rose-tint); color:var(--rose-deep) }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 22px }
/* 대형 모니터(27~32인치)에서 양옆 여백이 과하게 비어 보이지 않도록 콘텐츠 폭을 단계적으로
   넓힌다. 본문 텍스트(.prose 등)는 자체 max-width로 가독 줄길이를 유지하므로, 넓어진 폭은
   히어로, 교육과정 벤토, 합격 밴드, 갤러리 같은 구조 섹션에만 반영된다. */
@media (min-width:1560px){ :root{ --wrap:1320px } }
@media (min-width:1900px){ :root{ --wrap:1440px } }

/* ---- 반응형 줄바꿈 유틸 ----
   좁은 화면에선 하드 <br>을 없애 keep-all 자연 줄바꿈에 맡기고(어색한 고아 줄 방지),
   지정 폭 이상에서만 의도적 개행을 되살린다. 한 단어가 절대 잘리지 않도록 제목은 clamp로 축소. */
.br-sm{ display:inline }                                    /* 항상 개행(문구/브랜드 2줄 등, 320에서도 안전) */
.br-md{ display:none }                                      /* 모바일: 자연 줄바꿈 */
@media (min-width:768px){ .br-md{ display:inline } }        /* 태블릿+ : 의도적 개행 */

/* ---- 미세 그레인 텍스처(깊이용, 과하지 않게) — 섹션 ::before에서 재사용하는 토큰 ---- */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ---- 버튼 ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:var(--radius); border:1.5px solid transparent;
  background:var(--rose); color:#fff; font-weight:700; font-size:15.5px; letter-spacing:-.01em;
  cursor:pointer; transition:transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  min-height:52px;
}
.btn:hover{ background:var(--rose-deep); transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(var(--ink-rgb),.5) }
.btn:active{ transform:translateY(0) }
.btn--line{ background:transparent; border-color:var(--rose); color:var(--rose) }
.btn--line:hover{ background:var(--rose); color:#fff }
/* 주 액션 버튼(상담 신청·수강료 조회 등). 예전에는 골드 채움이었지만 업체 요청(밝은 네이비
   톤)에 맞춰 브랜드 블루 채움으로 바꿨다. 클래스명 .btn--gold는 여러 뷰에서 이미 쓰고 있어
   그대로 두고, 뜻이 드러나는 .btn--primary를 별칭으로 함께 제공한다.
   골드는 로고·헤어라인·이럽로우 같은 장식 요소에만 남긴다. */
.btn--gold, .btn--primary{ background:var(--rose); color:#fff; border-color:var(--rose) }
.btn--gold:hover, .btn--primary:hover{ background:var(--rose-deep); border-color:var(--rose-deep); color:#fff }
.btn--outline-light{ background:transparent; border-color:rgba(255,255,255,.65); color:#fff }
.btn--outline-light:hover{ background:#fff; color:var(--rose-deep); border-color:#fff }
.btn--ghost-light{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:#fff }
.btn--ghost-light:hover{ background:rgba(255,255,255,.16) }
/* 하위호환 버튼 변형 */
.btn--on-dark{ background:transparent; border-color:rgba(255,255,255,.65); color:#fff }
.btn--on-dark:hover{ background:#fff; color:var(--rose-deep) }
.btn--on-rose{ background:#fff; color:var(--rose-deep); border-color:#fff }
.btn--on-rose:hover{ background:var(--paper); color:var(--rose-deep) }
.btn--on-rose-line{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff }
.btn--on-rose-line:hover{ background:rgba(255,255,255,.14) }

/* ---- 섹션 공통 ---- */
.section{ padding:clamp(64px,9vw,120px) 0 }
.section--tint{ background:var(--paper) }
.section--surface{ background:var(--surface) }
.section-head{ max-width:640px; margin:0 0 clamp(36px,5vw,56px) }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center }
.eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep);
  margin:0 0 14px; display:inline-block;
}
.section-head--center .eyebrow{ justify-content:center }
.section-title{
  font-family:var(--font-serif); font-weight:800; color:var(--ink);
  font-size:clamp(27px,4vw,44px); line-height:1.24; letter-spacing:-.015em; margin:0;
}
.section-title em{ font-style:normal; color:var(--rose) }
.section-lead{
  margin:18px 0 0; color:var(--ink-soft); font-size:clamp(15.5px,1.6vw,17.5px); line-height:1.85; max-width:600px;
}
.section-head--center .section-lead{ margin-left:auto; margin-right:auto }
.section-more{ margin-top:clamp(30px,4vw,48px) }
.link-more{
  display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:15px;
  color:var(--rose-deep); padding-bottom:3px; position:relative;
}
.link-more::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:var(--rose-deep); transform:scaleX(1); transform-origin:left; transition:transform .35s var(--ease) }
.link-more:hover::after{ transform:scaleX(.35) }
.link-more svg{ transition:transform .35s var(--ease) }
.link-more:hover svg{ transform:translateX(4px) }

/* =========================================================================
   헤더 — 2상태(히어로 위=투명/흰 로고, 응결=아이보리/검정 로고)
   ========================================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--surface); border-bottom:1px solid var(--line);
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.header-inner{ display:flex; align-items:center; gap:20px; height:var(--header-h); padding:0 22px; max-width:var(--wrap); margin:0 auto }

.brand{ display:inline-flex; align-items:center; margin-right:auto; height:100%; }
.brand__logo{ height:44px; width:auto; transition:opacity .35s var(--ease) }
.brand__logo--white{ display:none }

.gnb{ display:none }
.gnb__list{ list-style:none; display:flex; align-items:center; gap:6px; margin:0; padding:0 }
.gnb__item{ position:relative }
.gnb__top{
  display:inline-flex; align-items:center; height:var(--header-h); padding:0 16px;
  font-family:var(--font-sans); font-weight:600; font-size:16px; color:var(--ink);
  letter-spacing:-.01em; transition:color .3s var(--ease); position:relative;
}
.gnb__top::after{ content:""; position:absolute; left:16px; right:16px; bottom:26px; height:1.5px; background:var(--rose); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease) }
.gnb__item:hover .gnb__top::after, .gnb__item:focus-within .gnb__top::after{ transform:scaleX(1) }
.gnb__dropdown{
  list-style:none; margin:0; padding:10px; position:absolute; left:50%; top:calc(100% - 2px); transform:translateX(-50%) translateY(8px);
  min-width:190px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:2px; z-index:30;
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.gnb__item--has-children:hover .gnb__dropdown,
.gnb__item--has-children:focus-within .gnb__dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
/* hover 브릿지: 항목과 드롭다운 사이 틈을 이어 hover 유지(사라짐 방지) */
.gnb__dropdown::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px }
.gnb__dropdown li a{ display:block; padding:10px 14px; border-radius:5px; font-size:15px; font-weight:500; color:var(--ink-soft); transition:background-color .2s var(--ease), color .2s var(--ease) }
.gnb__dropdown li a:hover, .gnb__dropdown li a:focus{ background:var(--rose-tint); color:var(--rose-deep) }

.header-cta{ display:none; align-items:center; gap:10px }
.header-cta .btn{ padding:11px 18px; font-size:14px; min-height:44px }
.header-cta__phone{ background:var(--rose) }
.header-cta__phone strong{ font-weight:800; letter-spacing:.01em }

.gnb-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; margin-left:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); cursor:pointer; transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.gnb-toggle span{ display:block; width:20px; height:1.6px; background:var(--ink); margin:0 auto; transition:background-color .3s var(--ease) }

/* 상태 A: 홈 히어로 위(응결 전) → 투명 배경 + 상단 스크림 + 흰 로고/메뉴 */
body.is-home .site-header:not(.is-condensed){
  background:transparent; border-color:transparent; box-shadow:none;
}
body.is-home .site-header:not(.is-condensed)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,11,15,.55), rgba(20,11,15,0));
}
body.is-home .site-header:not(.is-condensed) .brand__logo--dark{ display:none }
body.is-home .site-header:not(.is-condensed) .brand__logo--white{ display:block }
body.is-home .site-header:not(.is-condensed) .gnb__top{ color:#fff }
body.is-home .site-header:not(.is-condensed) .gnb-toggle{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4) }
body.is-home .site-header:not(.is-condensed) .gnb-toggle span{ background:#fff }

/* 상태 B: 응결(스크롤 후) → 미세 그림자 */
.site-header.is-condensed{ box-shadow:0 6px 24px -16px rgba(var(--ink-rgb),.5) }
.site-header.is-condensed .header-inner{ height:var(--header-h-sm) }
.site-header.is-condensed .gnb__top{ height:var(--header-h-sm) }
.site-header.is-condensed .brand__logo{ height:40px }

/* =========================================================================
   모바일 풀스크린 드로어
   ========================================================================= */
.drawer{
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  background:var(--paper); visibility:hidden; opacity:0;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.drawer.is-open{ visibility:visible; opacity:1 }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); padding:0 22px; border-bottom:1px solid var(--line) }
.drawer__head img{ height:42px; width:auto }
.drawer__close{
  width:46px; height:46px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--ink);
}
.drawer__body{ flex:1; overflow-y:auto; padding:16px 22px 32px; -webkit-overflow-scrolling:touch }
.drawer__group{ border-bottom:1px solid var(--line-soft); padding:6px 0 }
.drawer__group-title{
  font-family:var(--font-serif); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--gold-deep);
  text-transform:none; margin:16px 2px 6px; display:block;
}
.drawer__links{ list-style:none; margin:0 0 12px; padding:0 }
.drawer__links a{
  display:flex; align-items:center; min-height:52px; padding:6px 4px;
  font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--ink);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.drawer__links a:hover, .drawer__links a:focus{ color:var(--rose); padding-left:10px }
.drawer__foot{ padding:22px; border-top:1px solid var(--line); display:grid; gap:10px; background:var(--surface-2) }
.drawer__foot .btn{ width:100% }
.drawer__contact{ display:flex; flex-wrap:wrap; gap:14px 20px; margin-top:6px }
.drawer__contact a{ font-size:14px; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px }
.drawer__contact a:hover{ color:var(--rose) }

/* 드로어 스태거 등장 */
.drawer .drawer__group, .drawer .drawer__foot{ opacity:0; transform:translateY(16px) }
.drawer.is-open .drawer__group, .drawer.is-open .drawer__foot{ animation:drawerItem .5s var(--ease) forwards }
.drawer.is-open .drawer__group:nth-child(1){ animation-delay:.06s }
.drawer.is-open .drawer__group:nth-child(2){ animation-delay:.12s }
.drawer.is-open .drawer__group:nth-child(3){ animation-delay:.18s }
.drawer.is-open .drawer__group:nth-child(4){ animation-delay:.24s }
.drawer.is-open .drawer__foot{ animation-delay:.3s }
@keyframes drawerItem{ to{ opacity:1; transform:none } }
body.is-drawer-open{ overflow:hidden }

/* =========================================================================
   히어로 — 다크 플럼 배경 + 실제 사진(up3/up1) 컷 · Ken Burns · 크로스페이드
   ========================================================================= */
.hero{
  position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:linear-gradient(158deg, var(--dark-1) 0%, var(--dark-2) 48%, var(--dark-3) 100%);
}
.hero__inner{
  position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(560px,90svh,760px); padding-top:calc(var(--header-h) + 26px); padding-bottom:clamp(48px,7vw,72px);
  gap:20px;
}
.hero__figure{ position:absolute; inset:0; z-index:0 }
.hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.3s var(--ease) }
.hero__slide.is-active{ opacity:1 }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; transform:scale(1.04) }
.hero__slide.is-active .hero__img{ animation:kenburns 11s var(--ease) forwards }
@keyframes kenburns{ from{ transform:scale(1.04) } to{ transform:scale(1.15) } }
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,21,40,.5) 0%, rgba(11,21,40,.2) 34%, rgba(11,21,40,.55) 74%, rgba(9,17,33,.86) 100%),
    linear-gradient(90deg, rgba(11,21,40,.55) 0%, rgba(11,21,40,.15) 55%, rgba(11,21,40,0) 100%);
}
.hero__text{ position:relative; z-index:2; max-width:660px }
.hero__eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:.36em;
  text-transform:uppercase; color:var(--gold-soft); margin:0 0 20px; display:inline-flex; align-items:center; gap:14px;
}
.hero__kicker{ font-family:var(--font-body); font-weight:500; font-size:clamp(13px,1.5vw,15px); letter-spacing:.02em; color:var(--gold-soft); margin:0 0 18px }
.hero__title{
  font-family:var(--font-serif); font-weight:800; color:#fff;
  font-size:clamp(33px,6.4vw,62px); line-height:1.18; letter-spacing:-.02em; margin:0; text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero__title .accent{ color:var(--gold-soft) }
.hero__lead{
  margin:22px 0 0; color:rgba(255,255,255,.9); font-size:clamp(16px,1.9vw,19px); line-height:1.75; max-width:520px;
  font-family:var(--font-sans); font-weight:400;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.5vw,38px) }
.hero__tel{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; color:rgba(255,255,255,.85); font-size:15px; font-weight:500; transition:color .3s var(--ease) }
.hero__tel svg{ color:var(--gold-soft); flex:none }
.hero__tel b{ font-weight:700; color:#fff; letter-spacing:.01em }
.hero__tel:hover{ color:#fff }
.hero__dots{ display:flex; gap:9px; margin-top:28px }
.hero__dot{ width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.4); border:none; padding:0; cursor:pointer; transition:width .35s var(--ease), background-color .35s var(--ease) }
.hero__dot.is-active{ width:26px; background:var(--gold-soft) }
.hero__scroll-cue{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  display:inline-flex; flex-direction:column; align-items:center; gap:6px; color:rgba(255,255,255,.65);
  font-family:var(--font-display); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
}
.hero__scroll-cue span{ width:1px; height:34px; background:linear-gradient(180deg, rgba(255,255,255,.7), transparent); animation:scrollCue 2s var(--ease) infinite }
@keyframes scrollCue{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* 데스크톱도 우측 플로팅 카드가 아니라 풀블리드 몰입형(이미지 전면 + 좌하단 텍스트 오버레이).
   템플릿 느낌의 2단 분할을 버리고 사진 위에 큰 타이포를 얹는 에디토리얼 히어로로 통일한다. */
@media (min-width:900px){
  .hero__inner{ min-height:clamp(680px,90svh,900px); padding-bottom:clamp(72px,7vw,112px); gap:24px }
  .hero__title{ text-shadow:0 2px 44px rgba(0,0,0,.5) }
  .hero__lead{ max-width:600px }
  .hero__dots{ margin-top:32px }
}
.hero__scrim-in{ display:none }
/* 합격 증거 배지: 히어로 첫 화면에서 핵심 강점을 즉시 전달(스크롤 불필요). */
.hero__proof{
  display:inline-flex; align-items:center; gap:11px; align-self:flex-start; margin:22px 0 0;
  padding:10px 18px; border:1px solid rgba(200,167,110,.42); border-radius:999px;
  background:rgba(200,167,110,.12); color:#fff; font-size:clamp(13px,1.5vw,15px); font-weight:600; letter-spacing:.01em;
}
.hero__proof b{ font-family:var(--font-serif); font-weight:800; font-size:1.28em; color:var(--gold-soft); line-height:1 }

/* =========================================================================
   WHY 원픽 — 에디토리얼 타이포그래피(숫자·박스 클리셰 제거, 골드 마커)
   ========================================================================= */
.why{ background:var(--surface); position:relative; overflow:hidden }
.why::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:var(--grain) }
.why__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,60px); align-items:start }
.why__head{ max-width:600px }
.why__title{
  font-family:var(--font-serif); font-weight:800; color:var(--ink);
  font-size:clamp(26px,4.2vw,44px); line-height:1.28; letter-spacing:-.015em; margin:0;
}
.why__title em{ font-style:normal; color:var(--rose) }
.why__lead{ margin:20px 0 0; color:var(--ink-soft); font-size:clamp(15.5px,1.6vw,17.5px); line-height:1.85; max-width:540px }
.why__points{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:clamp(26px,3.4vw,40px) }
.why__point{ position:relative; padding-top:6px }
.why__point-num{ display:block; font-family:var(--font-serif); font-weight:800; font-size:clamp(26px,3vw,34px); line-height:1; color:var(--gold-soft); letter-spacing:-.02em; margin-bottom:14px }
.why__point-num::after{ content:""; display:block; width:26px; height:2px; margin-top:13px; border-radius:2px; background:linear-gradient(90deg, var(--gold-deep), var(--gold-soft)); transition:width .45s var(--ease) }
.why__point:hover .why__point-num::after{ width:48px }
.why__point-title{ font-family:var(--font-serif); font-weight:700; font-size:clamp(18.5px,2.1vw,22px); color:var(--ink); line-height:1.4; margin:0; letter-spacing:-.01em }
.why__point-desc{ margin:11px 0 0; color:var(--ink-soft); font-size:15px; line-height:1.78 }
@media (min-width:560px){ .why__points{ grid-template-columns:repeat(2,1fr); column-gap:clamp(28px,4vw,56px) } }
@media (min-width:900px){
  .why__inner{ grid-template-columns:.82fr 1.18fr; gap:clamp(48px,6vw,92px) }
  .why__head{ position:sticky; top:calc(var(--header-h) + 34px) }
}

/* =========================================================================
   교육과정(ONE PICK CURRICULUM) — 매거진 벤토(대형 피처 1 + 소형 3) · 사진 위 오버레이 카피
   ========================================================================= */
.curriculum{ background:var(--paper) }
.curriculum__head{ max-width:640px; margin:0 0 clamp(30px,4vw,48px) }
.course-grid{ display:grid; grid-template-columns:1fr; gap:clamp(14px,2vw,20px) }
.course-card{ position:relative; margin:0 }
.course-card__link{
  position:relative; display:block; width:100%; aspect-ratio:4/5;
  border-radius:var(--radius-lg); overflow:hidden; background:var(--dark-2); box-shadow:var(--shadow-card);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.course-card__link:hover, .course-card__link:focus-visible{ transform:translateY(-4px); box-shadow:0 30px 55px -28px rgba(var(--ink-rgb),.55) }
.course-card__media{ position:absolute; inset:0; z-index:0 }
.course-card__img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; transition:transform .9s var(--ease) }
.course-card__link:hover .course-card__img{ transform:scale(1.06) }
.course-card__mark{ background:linear-gradient(150deg, var(--dark-2), var(--dark-3)) }
.course-card__content{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(18px,2.6vw,28px); display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  background:linear-gradient(180deg, transparent 0%, rgba(9,17,33,.12) 32%, rgba(8,16,31,.84) 100%);
}
.course-card__tag{
  font-family:var(--font-display); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; font-weight:600; padding:5px 12px; margin:0 0 2px;
  border:1px solid rgba(255,255,255,.5); border-radius:999px; backdrop-filter:blur(2px);
}
.course-card__title{ font-family:var(--font-serif); font-size:clamp(20px,2.3vw,24px); font-weight:800; color:#fff; margin:0; line-height:1.3; text-shadow:0 2px 22px rgba(0,0,0,.4) }
.course-card--feature .course-card__title{ font-size:clamp(24px,3.4vw,36px) }
.course-card__summary{ margin:0; color:rgba(255,255,255,.86); font-size:15px; line-height:1.72; max-width:38ch }
.course-card__more{ margin-top:3px; display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14px; color:var(--gold-soft) }
.course-card__more svg{ transition:transform .35s var(--ease) }
.course-card__link:hover .course-card__more svg{ transform:translateX(4px) }
@media (min-width:560px){
  .course-grid--bento{ grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,20px) }
}
@media (min-width:900px){
  .course-grid--bento{ grid-template-columns:1.36fr 1fr 1fr; gap:clamp(16px,1.6vw,22px) }
  .course-card:nth-child(2) .course-card__link,
  .course-card:nth-child(3) .course-card__link{ aspect-ratio:1/1 }
  .course-card:nth-child(4){ grid-column:2 / span 2 }
  .course-card:nth-child(4) .course-card__link{ aspect-ratio:16/7 }
  .course-card--feature{ grid-row:1 / span 2 }
  .course-card--feature .course-card__link{ aspect-ratio:auto; height:100% }
}
.curriculum__more{ margin-top:clamp(30px,4vw,44px); display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:22px 0 0; border-top:1px solid var(--line) }
.curriculum__more p{ color:var(--ink-soft); font-size:15px; line-height:1.75; max-width:820px; margin:0 }
.curriculum__more strong{ color:var(--rose-deep); font-weight:700 }
/* 괄호 나열 등 한 덩어리로 유지할 짧은 구를 감싸 어중간한 줄바꿈을 막는다(keep-all 보완). */
.nowrap{ white-space:nowrap }

/* =========================================================================
   수강생 리얼후기(REAL REVIEW)
   ========================================================================= */
.reviews{ background:var(--surface) }
.reviews__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 28px; margin:0 0 clamp(28px,4vw,44px) }
.reviews__head-text{ max-width:640px; min-width:0 }
.reviews__head .section-title{ margin:0 }
.reviews__more{ margin-bottom:6px; flex:none }
.review-grid{ display:grid; grid-template-columns:1fr; gap:clamp(16px,2vw,22px) }
.review-card{
  padding:clamp(26px,3vw,34px); border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-2); position:relative; display:flex; flex-direction:column; gap:16px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.review-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:var(--gold-soft) }
.review-card__mark{ font-family:var(--font-display); font-size:52px; line-height:.6; color:var(--gold-soft); height:26px }
.review-card__quote{ margin:0; color:var(--ink); font-size:16px; line-height:1.85; font-family:var(--font-serif); font-weight:400 }
.review-card__meta{ margin-top:auto; padding-top:10px; border-top:1px solid var(--line) }
.review-card__title{ margin:0; font-weight:700; color:var(--rose-deep); font-size:14.5px }
.review-card__author{ margin:3px 0 0; color:var(--ink-soft); font-size:13px }
/* 대표 후기: 로즈 틴트 + 큰 세리프 인용(단조로운 균일 그리드 탈피) */
.review-card--feature{ background:var(--rose-tint); border-color:var(--gold-soft) }
.review-card--feature .review-card__mark{ color:var(--rose-soft); font-size:64px }
.review-card--feature .review-card__quote{ font-size:clamp(18px,2.3vw,23px); line-height:1.7; color:var(--rose-deep) }
.review-card--feature .review-card__meta{ border-top-color:var(--gold-soft) }

/* =========================================================================
   수강생 인터뷰(INTERVIEW) — 사진 카드
   ========================================================================= */
.interviews{ background:var(--paper) }
.interview-grid{ display:grid; grid-template-columns:1fr; gap:clamp(18px,2.4vw,26px) }
.interview-card{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .4s var(--ease), box-shadow .4s var(--ease) }
.interview-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -28px rgba(var(--ink-rgb),.5) }
.interview-card__thumb{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--paper-2) }
.interview-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.interview-card:hover .interview-card__thumb img{ transform:scale(1.06) }
.interview-card__thumb-mark{ display:block; width:100%; height:100%; background:linear-gradient(150deg, var(--rose-tint), var(--paper-2)) }
.interview-card__body{ padding:20px 22px 24px }
.interview-card__title{ font-family:var(--font-serif); font-size:19px; font-weight:800; color:var(--ink); margin:0; line-height:1.4 }
.interview-card__excerpt{ margin:8px 0 0; color:var(--ink-soft); font-size:14px; line-height:1.7 }
.interview-card__badge{ position:absolute; top:12px; left:12px; z-index:2; font-family:var(--font-sans); font-weight:700; font-size:11.5px; letter-spacing:.03em; color:#fff; background:rgba(var(--rose-rgb),.92); padding:5px 11px; border-radius:999px; box-shadow:0 4px 14px -6px rgba(0,0,0,.5) }

/* =========================================================================
   현장 갤러리(ONE PICK STORY) — 크기가 다른 모자이크(균일 타일 탈피)
   행 높이를 명시 단위로 고정하고 대형/와이드/톨 타일을 span으로 배치한다.
   ========================================================================= */
.story{ background:var(--surface) }
.gallery-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  grid-auto-rows:clamp(94px,29vw,150px); gap:clamp(8px,1.2vw,14px); grid-auto-flow:dense;
}
.gallery-item{ position:relative; display:block; border-radius:var(--radius-lg); overflow:hidden; background:var(--paper-2); min-height:0 }
.gallery-item:nth-child(1){ grid-column:span 2; grid-row:span 2 }          /* 대형 히어로 타일 */
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease) }
.gallery-item:hover img{ transform:scale(1.07) }
.gallery-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(9,17,33,.35)); opacity:0; transition:opacity .4s var(--ease) }
.gallery-item:hover::after{ opacity:1 }
.gallery-item__mark{ display:block; width:100%; height:100%; background:linear-gradient(150deg, var(--rose-tint), var(--paper-2)) }
@media (min-width:600px){
  .gallery-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(120px,16vw,180px) }
  .gallery-item:nth-child(6){ grid-column:span 2 }                          /* 와이드 타일 */
}
@media (min-width:960px){
  .gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(128px,10.5vw,168px) }
  .gallery-item:nth-child(4){ grid-row:span 2 }                             /* 톨 타일 */
}

/* =========================================================================
   강사진(INSTRUCTORS)
   ========================================================================= */
.instructors{ background:var(--paper) }
.instructor-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,28px) }
.instructor-card{ text-align:left }
.instructor-card__photo{ position:relative; aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden; background:var(--paper-2); margin:0 0 16px }
.instructor-card__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.instructor-card:hover .instructor-card__photo img{ transform:scale(1.05) }
.instructor-card__mark{ display:block; width:100%; height:100%; background:linear-gradient(150deg, var(--rose-tint), var(--paper-2)) }
.instructor-card__name{ margin:0; font-family:var(--font-serif); font-weight:800; color:var(--ink); font-size:19px }
.instructor-card__title{ margin:4px 0 0; color:var(--rose); font-size:14px; font-weight:600 }
.instructor-card__specialties{ margin:6px 0 0; color:var(--ink-soft); font-size:13.5px; line-height:1.6 }

/* =========================================================================
   시설(ACADEMY FACILITIES) — 톤온톤(회색 빈 박스 금지)
   ========================================================================= */
.facility{ background:var(--surface) }
.facility__inner{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,52px); align-items:center }
.facility__media{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(150deg, var(--rose-tint) 0%, var(--paper-2) 60%, var(--surface-2) 100%);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.facility__media img{ width:100%; height:100%; object-fit:cover }
.facility__media img.facility__media-mark{ width:min(42%,168px); height:auto; object-fit:contain; opacity:.5; filter:saturate(.7) }
.facility__media::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 80% 10%, rgba(181,146,79,.16), transparent 55%); pointer-events:none }
.facility__copy .section-lead{ margin-bottom:26px }

/* 합격 실적 — 다크 밴드 + 거대 100% + 대학 마퀴 */
.admissions{ position:relative; padding:clamp(72px,9vw,120px) 0 clamp(44px,6vw,68px); background:var(--dark-2); color:#fff; overflow:hidden }
.admissions::before{ content:""; position:absolute; inset:0; background:radial-gradient(130% 90% at 12% 0%, rgba(181,146,79,.18), transparent 56%); pointer-events:none }
.admissions__inner{ position:relative; display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,56px); align-items:end }
.admissions__kicker{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.2em; font-size:13px; color:var(--gold-soft); margin:0 0 18px }
.admissions__statement{ font-family:var(--font-serif); font-weight:800; font-size:clamp(30px,5vw,52px); line-height:1.22; color:#fff; letter-spacing:-.01em }
.admissions__statement em{ font-style:normal; color:var(--gold-soft) }
.admissions__sub{ margin:20px 0 0; color:rgba(255,255,255,.72); font-size:clamp(15px,1.6vw,17px); line-height:1.8; max-width:470px }
.admissions__figure{ display:flex; flex-direction:column; gap:10px }
.admissions__pct{ font-family:var(--font-serif); font-weight:800; font-size:clamp(100px,19vw,196px); line-height:.82; color:#fff; letter-spacing:-.04em }
.admissions__pct i{ font-style:normal; color:var(--gold-soft); font-size:.4em; margin-left:6px }
.admissions__meta{ color:rgba(255,255,255,.8); font-size:clamp(14px,1.5vw,16px) }
.admissions__meta b{ color:var(--gold-soft); font-weight:700 }
@media (min-width:860px){ .admissions__inner{ grid-template-columns:1.02fr .98fr } .admissions__figure{ align-items:flex-end; text-align:right } }
/* 합격 대학: 흐르는 마퀴 대신 10개 대학명을 가운데 정갈하게 나열(화면 비율 무관, 잘림 없음). */
.admissions__universities{ margin:clamp(42px,5vw,66px) auto 0; max-width:940px; padding:30px 22px 4px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:16px 30px }
.admissions__uni{ font-family:var(--font-serif); font-weight:700; font-size:clamp(17px,1.9vw,23px); color:rgba(255,255,255,.92); letter-spacing:-.01em }
.admissions__uni-count{ font-family:var(--font-body); font-style:normal; font-weight:600; font-size:.58em; color:var(--gold-soft); margin-left:6px; letter-spacing:0; vertical-align:middle }
.admissions__note{ margin:clamp(26px,4vw,38px) auto 0; max-width:var(--wrap); padding:0 22px; text-align:center; font-size:13px; color:rgba(255,255,255,.55) }

@media (min-width:900px){
  .facility__inner{ grid-template-columns:1.05fr .95fr }
  .facility__inner--reverse .facility__media{ order:2 }
}

/* =========================================================================
   상담 CTA / 간편 수강료 조회 밴드
   ========================================================================= */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(140deg, var(--rose) 0%, var(--rose-deep) 100%); padding:clamp(56px,8vw,96px) 0 }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 85% -10%, rgba(181,146,79,.28), transparent 55%); pointer-events:none }
.cta-band__inner{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px }
.cta-band__eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-soft); margin:0 0 6px; display:inline-flex; align-items:center; gap:12px;
}
/* cta 이럽로우: 장식 대시 제거(AI 티) */
.cta-band__title{ font-family:var(--font-serif); color:#fff; font-size:clamp(25px,3.6vw,40px); font-weight:800; margin:0; max-width:680px; line-height:1.3 }
.cta-band__lead{ color:rgba(255,255,255,.85); margin:6px 0 12px; font-size:16.5px; max-width:560px }
.cta-band__actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center }
.cta-band__phone{ margin:16px 0 0; font-family:var(--font-serif); font-size:clamp(22px,3vw,30px); font-weight:800; color:#fff; letter-spacing:.01em }
.cta-band__phone a{ display:inline-flex; align-items:center; gap:10px }
.cta-band__phone small{ display:block; font-family:var(--font-sans); font-size:13px; font-weight:500; letter-spacing:.16em; color:var(--gold-soft); text-transform:uppercase; margin-bottom:4px }

/* =========================================================================
   팝업 공지(홈 전용, 우하단 고정 카드형 — 백드롭 없음)
   z-index는 플로팅 퀵메뉴(80)보다 항상 낮게 유지한다.
   ========================================================================= */
/* 이벤트 팝업: 우하단 카드가 아니라 화면 가운데 오버레이(백드롭 + 카드). 이미지 중심 홍보용. */
.site-popup{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px }
.site-popup[hidden]{ display:none }
.site-popup__backdrop{ position:absolute; inset:0; background:rgba(24,12,16,.58); backdrop-filter:blur(2px); cursor:pointer }
.site-popup__card{
  position:relative; z-index:1; width:min(400px, calc(100vw - 40px)); max-height:calc(100vh - 40px);
  display:flex; flex-direction:column; background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:0 34px 90px -24px rgba(0,0,0,.55); overflow:hidden;
}
.site-popup.is-enter .site-popup__card{ animation:sitePopupIn .42s var(--ease) }
@keyframes sitePopupIn{ from{ opacity:0; transform:translateY(16px) scale(.98) } to{ opacity:1; transform:none } }
.site-popup__link{ display:block; overflow-y:auto }
.site-popup__media{ background:var(--paper-2); overflow:hidden }
.site-popup__media img{ display:block; width:100%; height:auto; max-height:58vh; object-fit:cover }
/* 배너식 팝업(제목 없이 이미지만): 세로 배너 전체가 잘리지 않고 보이도록 contain + 어두운 여백 */
.site-popup--banner .site-popup__media{ background:#0b1a33 }
.site-popup--banner .site-popup__media img{ max-height:78vh; object-fit:contain }
.site-popup__title{
  padding:18px 22px; font-family:var(--font-serif); font-weight:700; font-size:17px;
  color:var(--ink); line-height:1.55;
}
.site-popup__actions{ display:flex; align-items:stretch; margin-top:auto; border-top:1px solid var(--line-soft) }
.site-popup__hide-today{
  flex:1; border:none; background:var(--surface-2); padding:15px 12px; font-family:inherit; font-size:13.5px;
  color:var(--ink-soft); cursor:pointer; transition:color .25s var(--ease), background .25s var(--ease);
}
.site-popup__hide-today:hover{ color:var(--ink); background:var(--paper-2) }
.site-popup__close{
  flex:1; border:none; border-left:1px solid var(--line-soft); background:var(--rose-deep); color:#fff;
  padding:15px 12px; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .25s var(--ease);
}
.site-popup__close:hover{ background:var(--rose) }

/* =========================================================================
   플로팅 퀵메뉴(데스크톱 우측 고정 / 모바일 하단 고정 바)
   ========================================================================= */
.floating{ position:fixed; right:16px; bottom:16px; z-index:80; display:flex; flex-direction:column; gap:8px }
.floating__btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:62px; min-height:58px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line);
  color:var(--ink); box-shadow:var(--shadow-soft); cursor:pointer; font-family:inherit; text-align:center;
  transition:transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.floating__btn:hover{ transform:translateY(-2px); border-color:var(--gold-soft); color:var(--rose) }
.floating__btn--accent{ background:var(--rose); border-color:var(--rose); color:#fff }
.floating__btn--accent:hover{ background:var(--rose-deep); color:#fff }
.floating__ico{ display:inline-flex }
.floating__label{ font-size:10.5px; font-weight:700; letter-spacing:-.03em; line-height:1.1 }
.floating__top{ opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease) }
.floating__top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0) }

@media (max-width:719px){
  .floating{
    right:0; left:0; bottom:0; flex-direction:row; gap:0; padding:0;
    background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 24px -18px rgba(var(--ink-rgb),.5);
  }
  .floating__btn{
    flex:1; width:auto; border:none; border-radius:0; box-shadow:none; min-height:60px;
    border-right:1px solid var(--line-soft);
  }
  .floating__btn:hover{ transform:none }
  .floating__btn:last-of-type{ border-right:none }
  .floating__top{ display:none }
  body{ }
  .floating__label{ font-size:11px }
}

/* =========================================================================
   푸터
   ========================================================================= */
.site-footer{ background:var(--dark-3); color:rgba(255,255,255,.72); margin-top:0; border-top:3px solid var(--rose) }
.footer-grid{ display:grid; gap:36px; padding:clamp(48px,6vw,72px) 22px 40px; grid-template-columns:1fr; max-width:var(--wrap); margin:0 auto }
.footer-brand__logo{ height:auto; width:min(220px,64vw); margin:0 0 20px }
.footer-brand__desc{ color:rgba(255,255,255,.6); font-size:14.5px; line-height:1.8; max-width:340px }
.footer-col-title{ font-family:var(--font-display); font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 16px; font-weight:600 }
.footer-line{ margin:0 0 8px; color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.7 }
.footer-line a:hover{ color:#fff }
.footer-line strong{ color:#fff; font-weight:600 }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.footer-links a{ color:rgba(255,255,255,.72); font-size:14.5px; transition:color .25s var(--ease) }
.footer-links a:hover{ color:var(--gold-soft) }
.footer-sns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px }
.footer-sns a{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; color:rgba(255,255,255,.8);
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.footer-sns a:hover{ background:var(--gold); border-color:var(--gold); color:#0f1e38 }
.footer-bottom{
  max-width:var(--wrap); margin:0 auto; padding:20px 22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:10px 20px; flex-wrap:wrap; color:rgba(255,255,255,.5); font-size:13px;
}
.footer-bottom a:hover{ color:#fff }

@media (min-width:760px){
  .footer-grid{ grid-template-columns:1.5fr 1fr 1.2fr }
}

/* =========================================================================
   서브페이지 공통(소개/시설/오시는 길/강사진/과정상세) — 하위호환 재단장
   ========================================================================= */
.page-header{ padding:clamp(52px,7vw,88px) 0 clamp(36px,4vw,52px); text-align:center; background:var(--paper); border-bottom:1px solid var(--line) }
.page-header .eyebrow{ justify-content:center }
.page-header__title{ font-family:var(--font-serif); font-size:clamp(28px,4vw,44px); font-weight:800; color:var(--ink); margin:0 }
.page-content__body{ max-width:760px; margin:0 auto; color:var(--ink); font-size:16.5px; line-height:1.9 }
.page-content__body p{ margin:0 0 20px }
.page-content__body img{ border-radius:var(--radius-lg); margin:24px 0 }
.page-content__body h2,.page-content__body h3{ font-family:var(--font-serif); color:var(--rose-deep); margin:36px 0 14px }
.page-empty{ max-width:520px; margin:0 auto; text-align:center; color:var(--ink-soft); padding:24px 0; font-size:15.5px; line-height:1.8 }

.location-section .page-content__body{ margin-bottom:32px }
.location-map{ aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--paper-2); margin:0 auto 28px; max-width:820px }
.location-map iframe{ width:100%; height:100%; border:0; display:block }
.location-address{ max-width:820px; margin:0 auto; padding:28px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-2); text-align:center }
.location-address__text{ margin:0 0 10px; color:var(--ink); font-size:16.5px; font-weight:600 }
.location-address__phone{ margin:0; color:var(--rose-deep); font-weight:700; font-size:18px }
.location-address__phone a{ display:inline-flex; align-items:center; gap:8px }

.instructor-card--detail{ padding:0; border:none; background:transparent }
.instructor-grid--detail{ grid-template-columns:1fr; gap:clamp(28px,4vw,40px) }
@media (min-width:640px){ .instructor-grid--detail{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:960px){ .instructor-grid--detail{ grid-template-columns:repeat(3,1fr) } }

/* 강사진 카드: 인물 사진 위에 로고+이름+직책을 왼쪽 위로 얹는다(스크림으로 가독 확보). 2열 그리드. */
.instructor-grid.instructor-grid--ref{ grid-template-columns:repeat(2,1fr); gap:clamp(10px,2vw,24px); max-width:960px; margin-inline:auto }
@media (min-width:960px){ .instructor-grid.instructor-grid--ref{ grid-template-columns:repeat(3,1fr); max-width:none } }
.instructor-card.instructor-card--ref{ position:relative; display:block; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); background:linear-gradient(158deg, var(--dark-2), var(--dark-3)); transition:transform .4s var(--ease), box-shadow .4s var(--ease) }
.instructor-card.instructor-card--ref:hover{ transform:translateY(-4px); box-shadow:0 30px 56px -30px rgba(var(--ink-rgb),.6) }
.instructor-card--ref .instructor-card__photo{ position:absolute; inset:0; background:linear-gradient(158deg, var(--rose-tint), var(--paper-2)) }
.instructor-card--ref .instructor-card__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .8s var(--ease) }
.instructor-card--ref:hover .instructor-card__photo img{ transform:scale(1.04) }
/* 좌상단 코너만 살짝 눌러 흰 글씨 가독 확보(얼굴은 보통 가운데라 코너 라디얼로 국한해 얼굴을 덮지 않는다) */
/* 좌상단 이름표 뒤 스크림 — 밝은 배경 사진(스튜디오·실습실 등)에서도 흰 글씨가 읽히도록
   코너 쪽을 충분히 눌러 주되, 얼굴이 있는 가운데까지 번지지 않게 62%에서 완전히 사라진다. */
.instructor-card--ref::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(94% 74% at 4% 2%, rgba(9,17,33,.78) 0%, rgba(9,17,33,.46) 26%, rgba(9,17,33,.14) 46%, rgba(9,17,33,0) 62%) }
.instructor-card--ref .instructor-card__label{ position:absolute; top:0; left:0; z-index:2; padding:clamp(18px,2.6vw,26px); display:flex; flex-direction:column; align-items:flex-start; max-width:80% }
.instructor-card--ref .instructor-card__logo{ height:clamp(26px,3vw,32px); width:auto; margin:0 0 clamp(12px,1.8vw,16px); opacity:1; filter:drop-shadow(0 2px 10px rgba(0,0,0,.5)) }
.instructor-card--ref .instructor-card__name{ margin:0; font-family:var(--font-serif); font-weight:800; color:#fff; font-size:clamp(20px,2.4vw,26px); line-height:1.2; text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4) }
.instructor-card--ref .instructor-card__title{ margin:6px 0 0; color:rgba(255,255,255,.9); font-weight:600; font-size:14px; letter-spacing:.01em; text-shadow:0 2px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35) }
.instructor-card--ref .instructor-card__mark{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:26px }
.instructor-card--ref .instructor-card__mark-cap{ font-family:var(--font-serif); font-size:12.5px; letter-spacing:.14em; color:var(--ink-faint) }
/* 강사 소개(bio): 오버레이 사진 타일 아래에 별도 텍스트로 노출(타일 자체는 overflow:hidden이라 내부에 못 넣는다). */
.instructor-grid.instructor-grid--ref{ align-items:start }
.instructor-item{ display:flex; flex-direction:column }
.instructor-card__bio{ margin:14px 4px 2px; color:var(--ink-soft); font-size:14.5px; line-height:1.72; letter-spacing:-.01em; word-break:keep-all }
/* 좁은 화면(2열, 작은 카드): 로고를 숨기고 이름·직책만 사진 하단으로 작게 내려 얼굴이 가려지지 않게 한다.
   (기본 오버레이 규칙보다 뒤에 둬서 top-left 배치를 확실히 덮어쓴다.) */
@media (max-width:480px){
  .instructor-card--ref .instructor-card__logo{ display:none }
  .instructor-card--ref .instructor-card__label{ top:auto; bottom:0; padding:10px 11px 11px; max-width:100% }
  .instructor-card--ref .instructor-card__name{ font-size:15px }
  .instructor-card--ref .instructor-card__title{ font-size:11px; margin-top:1px }
  .instructor-card--ref::after{ background:linear-gradient(0deg, rgba(9,17,33,.84) 0%, rgba(9,17,33,.34) 26%, rgba(9,17,33,0) 52%) }
}

.course-detail__thumb{ aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--paper-2); margin:0 auto 32px; max-width:820px }
.course-detail__thumb img{ width:100%; height:100%; object-fit:cover; display:block }

/* =========================================================================
   스크롤 리빌 모션 — .js 있을 때만 숨김(무JS/크롤러/SEO 안전)
   ========================================================================= */
/* will-change를 상시 걸지 않는다(수십 개 요소에 상시 적용 시 모바일 GPU 레이어 폭증→프레임 드랍).
   opacity/transform 트랜지션만으로 충분히 부드럽고, 합성은 브라우저가 필요할 때만 승격한다. */
.js .reveal{ opacity:0; transform:translate3d(0,22px,0); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.js .reveal.is-visible{ opacity:1; transform:none }
/* 모바일: transform 이동을 아예 빼고 순수 opacity 페이드만 한다. translate 리빌은 저사양
   모바일에서 스크롤과 겹치면 합성/재배치 비용으로 프레임이 끊긴다(툭툭). 페이드는 매우 가볍다. */
@media (max-width:719px){
  .js .reveal{ transform:none; transition:opacity .55s var(--ease) }
  .js .stagger > .reveal:nth-child(n){ transition-delay:.05s }
  /* 큰 히어로 글씨의 넓은 그림자 블러는 리빌 중 프레임마다 다시 그려져 무겁다 → 가볍게. */
  .hero__title{ text-shadow:0 1px 12px rgba(0,0,0,.34) }
  /* Ken Burns를 느리게 해 프레임당 스케일 변화량을 줄인다(저사양 GPU 프레임 드랍 완화). */
  .hero__slide.is-active .hero__img{ animation-duration:16s }
}
/* 그룹 내 스태거 */
.js .stagger > .reveal:nth-child(2){ transition-delay:.08s }
.js .stagger > .reveal:nth-child(3){ transition-delay:.16s }
.js .stagger > .reveal:nth-child(4){ transition-delay:.24s }
.js .stagger > .reveal:nth-child(5){ transition-delay:.32s }
.js .stagger > .reveal:nth-child(6){ transition-delay:.4s }
/* 히어로 로드 스태거 */
.js .hero__text .reveal{ transition-delay:.1s }
.js .hero__text .reveal:nth-child(2){ transition-delay:.24s }
.js .hero__text .reveal:nth-child(3){ transition-delay:.38s }
.js .hero__text .reveal:nth-child(4){ transition-delay:.52s }

/* =========================================================================
   반응형 그리드 상향
   ========================================================================= */
@media (min-width:600px){
  .interview-grid{ grid-template-columns:repeat(2,1fr) }
  .review-grid{ grid-template-columns:repeat(2,1fr) }
  .review-card--feature{ grid-column:1 / -1 }      /* 태블릿: 대표 후기 전체 폭 풀-와이드 */
  .instructor-grid{ grid-template-columns:repeat(3,1fr) }
}
@media (min-width:900px){
  .gnb{ display:flex; align-items:center }
  .header-cta{ display:flex }
  .gnb-toggle{ display:none }
  .drawer{ display:none }
}
@media (min-width:960px){
  .interview-grid{ grid-template-columns:repeat(3,1fr) }
  .review-grid{ grid-template-columns:repeat(3,1fr) }
  .review-card--feature{ grid-column:auto }        /* 데스크톱: 균일 3열, 로즈 틴트로만 강조 */
  .instructor-grid{ grid-template-columns:repeat(4,1fr) }
}

/* =========================================================================
   서브페이지 v2 — 에디토리얼 페이지 헤더 · 리치 본문(prose) · 아티클 레이아웃
   홈과 동일 토큰/모션 언어를 공유한다. 홈 전용 클래스는 건드리지 않고
   신규 클래스만 추가한다(요구사항). 하드코딩 헥스 없음 — 전부 토큰 참조.
   ========================================================================= */

/* ---- 페이지 헤더(에디토리얼 밴드) — 이럽로우 + 명조 H1 + 존댓말 리드 + 골드 헤어라인 ---- */
.page-hero{
  position:relative; overflow:hidden;
  padding:clamp(56px,8vw,104px) 0 clamp(40px,5vw,68px);
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--paper) 100%);
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 92% at 88% -20%, rgba(181,146,79,.14), transparent 56%);
}
.page-hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,56px); align-items:center }
.page-hero__text{ max-width:640px; min-width:0 }
.page-hero__mark{ display:block; width:46px; height:2px; margin:0 0 22px; background:linear-gradient(90deg, var(--gold-deep), var(--gold-soft)) }
/* 페이지 상단 대제목은 검정 대신 딥 네이비블루로 — 업체 요청("위 글씨도 파랗게, 밝게"). */
.page-hero__title{
  font-family:var(--font-serif); font-weight:800; color:var(--rose-deep);
  font-size:clamp(30px,5vw,52px); line-height:1.2; letter-spacing:-.02em; margin:0;
}
.page-hero__title em{ font-style:normal; color:var(--rose) }
.page-hero__lead{ margin:20px 0 0; color:var(--ink-soft); font-size:clamp(15.5px,1.7vw,18px); line-height:1.85; max-width:560px }
.page-hero__accent{
  position:relative; aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(150deg, var(--rose-tint), var(--paper-2)); box-shadow:var(--shadow-card);
}
.page-hero__accent img{ width:100%; height:100%; object-fit:cover }
.page-hero__accent::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 58%, rgba(9,17,33,.24)); pointer-events:none }
/* 서브페이지 히어로 이미지: 페이지 로드 시 위에서 아래로 마스크 와이프 + 완만한 줌아웃.
   above-fold 요소라 스크롤 옵저버(reveal)에 의존하지 않고 로드 애니메이션으로 자동 재생한다
   (옵저버 미발화 시 이미지가 클립된 채 사라지는 것을 방지). reveal의 페이드업은 무력화한다. */
.js .page-hero__accent.reveal{ opacity:1; transform:none; animation:pageHeroWipe 1.05s var(--ease) both }
.js .page-hero__accent.reveal img{ animation:pageHeroZoom 1.6s var(--ease) both }
@keyframes pageHeroWipe{ from{ clip-path:inset(0 0 100% 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes pageHeroZoom{ from{ transform:scale(1.06) } to{ transform:scale(1) } }
@media (prefers-reduced-motion: reduce){
  .js .page-hero__accent.reveal{ animation:none }
  .js .page-hero__accent.reveal img{ animation:none }
}
@media (min-width:900px){
  .page-hero--split .page-hero__inner{ grid-template-columns:1.12fr .88fr }
  .page-hero--split .page-hero__accent{ aspect-ratio:5/6 }
}

/* ---- 리치 본문(prose) — body_html/bio_html/curriculum_html 스코프 타이포 ---- */
.prose{ color:var(--ink); font-size:clamp(16px,1.7vw,17px); line-height:1.85; max-width:820px }
.prose > :first-child{ margin-top:0 }
.prose > :last-child{ margin-bottom:0 }
.prose p{ margin:0 0 1.15em }
.prose h2{ font-family:var(--font-serif); font-weight:800; color:var(--ink); font-size:clamp(21px,2.6vw,28px); line-height:1.35; letter-spacing:-.01em; margin:1.8em 0 .55em }
.prose h3{ font-family:var(--font-serif); font-weight:700; color:var(--rose-deep); font-size:clamp(18px,2.1vw,22px); line-height:1.4; margin:1.5em 0 .5em }
.prose h4{ font-family:var(--font-serif); font-weight:700; color:var(--ink); font-size:clamp(16.5px,1.8vw,19px); margin:1.4em 0 .45em }
.prose h2:first-child, .prose h3:first-child, .prose h4:first-child{ margin-top:0 }
.prose a{ color:var(--rose); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold-soft); text-decoration-thickness:1px }
.prose a:hover{ color:var(--rose-deep); text-decoration-color:var(--rose) }
.prose strong{ color:var(--rose-deep); font-weight:700 }
.prose em{ font-style:italic }
.prose ul, .prose ol{ margin:0 0 1.2em; padding-left:1.25em }
.prose li{ margin:0 0 .5em; padding-left:.25em }
.prose ul li::marker{ color:var(--gold-deep) }
.prose ol li::marker{ color:var(--rose); font-weight:700 }
.prose img{ border-radius:var(--radius-lg); margin:1.6em 0; border:1px solid var(--line) }
.prose blockquote{ margin:1.6em 0; padding:4px 0 4px 22px; border-left:2px solid var(--gold); color:var(--ink-soft); font-family:var(--font-serif); font-style:italic; font-size:1.05em }
.prose hr{ border:0; border-top:1px solid var(--line); margin:2em 0 }
.prose table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.95em }
.prose th, .prose td{ border:1px solid var(--line); padding:11px 14px; text-align:left }
.prose th{ background:var(--surface-2); font-weight:700; color:var(--ink); font-family:var(--font-serif) }

/* ---- 아티클 레이아웃(본문 + 미디어 사이드) — 소개/시설 ---- */
.article-layout{ display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,64px); align-items:start }
.article-layout__main{ min-width:0 }
.article-layout__aside{ display:grid; gap:clamp(16px,2vw,20px) }
.article-media{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(150deg, var(--rose-tint), var(--paper-2)); box-shadow:var(--shadow-card);
}
.article-media img{ width:100%; height:100%; object-fit:cover }
.article-media--wide{ aspect-ratio:3/2 }
.article-note{ padding:24px 24px 26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-2) }
.article-note__title{ font-family:var(--font-serif); font-weight:800; color:var(--ink); font-size:18px; margin:0 0 8px }
.article-note__text{ color:var(--ink-soft); font-size:14.5px; line-height:1.75; margin:0 0 16px }
.article-note__actions{ display:grid; gap:10px }
.article-note .btn{ width:100% }
@media (min-width:900px){
  .article-layout--aside{ grid-template-columns:minmax(0,1fr) clamp(280px,32%,360px) }
  .article-layout--aside .article-layout__aside{ position:sticky; top:calc(var(--header-h) + 24px) }
}

/* =========================================================================
   아카데미 소개 — 대표 인사말(브랜드 워드마크 + 헤드라인 + 포트레이트 + 서명)
   레퍼런스(대형 워드마크·중앙 헤드라인·좌측 인물)를 우리 톤(아이보리/버건디/골드·명조)으로 재해석.
   ========================================================================= */
.director{ position:relative; overflow:hidden; background:var(--surface); padding:clamp(48px,7vw,96px) 0 clamp(44px,6vw,80px) }
.director::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(120% 70% at 50% -10%, rgba(181,146,79,.12), transparent 60%) }
.director__wrap{ position:relative; z-index:1 }
.director__intro{ text-align:center; max-width:920px; margin:0 auto clamp(34px,5vw,58px) }
.director__wordmark{ margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:.14em; font-size:clamp(25px,5vw,46px); line-height:1.12; color:var(--rose) }
.director__rule{ display:block; width:56px; height:2px; margin:clamp(16px,2.4vw,26px) auto; background:linear-gradient(90deg, var(--gold-deep), var(--gold-soft)) }
.director__headline{ margin:0; font-family:var(--font-serif); font-weight:800; color:var(--ink); font-size:clamp(19px,2.9vw,31px); line-height:1.5; letter-spacing:-.01em; word-break:keep-all }
.director__headline em{ font-style:normal; color:var(--rose) }
/* 겹침 구성(업체 요청): 대표 사진에 인사말이 자연스럽게 겹쳐 들어가는 형태.
   사진은 액자(테두리·그림자) 없이 가장자리가 흰 배경으로 서서히 사라지고(mask), 글은 그
   사라지는 자리 위에 얹힌다. 글 뒤에는 옅은 흰 그라데이션만 깔아 경계선 없이 가독성을 확보한다.
   모바일=사진 아래에서 위로 겹침, 데스크톱=사진 오른쪽으로 겹침. */
.director__stage{ max-width:1080px; margin:0 auto; display:flex; flex-direction:column }
/* 사진은 액자 없이 반투명하게 깔리고 그 위에 인사말이 올라간다(레퍼런스: 인물이 흰 배경으로
   녹아들고 글이 그 위에 얹힌 형태). 아래쪽은 흰색으로 사라져 경계가 보이지 않는다.
   모바일·데스크톱 모두 같은 원리 — 데스크톱은 인물이 왼쪽에 서고 오른쪽으로도 함께 사라진다. */
.director__stage--photo{ position:relative; isolation:isolate; display:block }
/* 모바일: 인물을 왼쪽에 흘려(float) 글이 그 옆을 감싸고, 사진이 끝나면 다시 전폭으로 이어진다.
   좁은 화면에서 글 단이 계속 좁으면 문단이 세로로 길어져 답답해 보이기 때문이다.
   음수 여백만큼 글이 인물의 사라지는 자락 위로 겹친다. */
.director__photo{ float:left; position:relative; width:min(52%,300px); aspect-ratio:4/5; margin:2px -30px 4px 0;
  z-index:-1; overflow:hidden; pointer-events:none; opacity:.62;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 52%, rgba(0,0,0,.4) 80%, transparent 100%),
                     linear-gradient(180deg, transparent 0%, #000 9%, #000 66%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 52%, rgba(0,0,0,.4) 80%, transparent 100%),
             linear-gradient(180deg, transparent 0%, #000 9%, #000 66%, transparent 100%);
  mask-composite:intersect }
.director__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 6% }
/* 배경을 지운 인물 컷: 이미지 자체가 아래쪽으로 투명해지므로 마스크·투명도를 걸지 않는다. */
.director__photo--cut{ aspect-ratio:auto; opacity:1; overflow:visible; width:min(46%,260px);
  margin:2px 10px 0 -6px;   /* 인물이 불투명하므로 글자가 얼굴 위로 올라오지 않게 겹침을 없앤다 */
  -webkit-mask-image:none; mask-image:none }
.director__photo--cut img{ width:100%; height:auto; object-fit:contain }
.director__stage--photo .director__body{ position:relative; z-index:1; padding:clamp(6px,2vw,16px) 0 }
.director__stage--photo .prose{ font-size:15px; line-height:1.85 }
.director__stage--photo .director__sign{ clear:both; margin-top:20px; padding-top:14px }
.director__portrait{ position:relative; margin:0 auto; width:100%; max-width:400px; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(158deg, var(--paper-2), var(--rose-tint)); box-shadow:var(--shadow-card) }
.director__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top }
.director__portrait--placeholder{ display:grid; place-content:center; justify-items:center; gap:14px }
.director__ph-logo{ width:min(46%,160px); height:auto; opacity:.5; filter:saturate(.7) }
.director__ph-cap{ font-family:var(--font-serif); font-size:13px; letter-spacing:.14em; color:var(--ink-faint) }
.director__body{ min-width:0 }
.director__body .prose{ max-width:none }
.director__sign{ margin:clamp(22px,2.8vw,30px) 0 0; padding-top:clamp(16px,2vw,20px); border-top:1px solid var(--line); display:flex; align-items:baseline; gap:12px }
.director__sign-org{ font-size:14px; color:var(--ink-soft); letter-spacing:.01em }
.director__sign-name{ font-family:var(--font-serif); font-weight:800; font-size:clamp(20px,2.4vw,24px); color:var(--ink); letter-spacing:.04em }
@media (min-width:860px){
  /* 사진 없는 경우(플레이스홀더)는 기존 2단 유지 — 빈 카드가 전면에 깔리면 어색하다. */
  .director__stage--placeholder{ display:grid; grid-template-columns:minmax(0,0.86fr) 1.14fr; align-items:center; gap:clamp(40px,5vw,68px) }
  .director__portrait{ margin:0; max-width:none }
  .director__body{ padding:0 }

  /* 인물은 왼쪽에 서고 오른쪽·아래로 흰 배경에 녹는다. 인사말은 사진 위로 겹쳐 올라간다. */
  .director__stage--photo{ min-height:600px; display:grid; align-items:center }
  /* 데스크톱은 폭이 넉넉하니 인물을 왼쪽에 세우고 글은 오른쪽 단에 정렬한다(레퍼런스 구성).
     네 변 모두 흰 배경으로 흩어지게 해서 사진의 사각 테두리가 보이지 않게 한다. */
  .director__photo{ float:none; position:absolute; margin:0; aspect-ratio:auto; inset:0 auto 0 0; width:min(58%,560px); max-width:none; opacity:.5;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 46%, rgba(0,0,0,.45) 76%, transparent 100%),
                       linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 46%, rgba(0,0,0,.45) 76%, transparent 100%),
               linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 100%);
    mask-composite:intersect }
  .director__photo img{ object-position:center 6% }
  /* 누끼 컷은 마스크 없이 인물 그대로, 무대 왼쪽 아래에 세운다. */
  .director__photo--cut{ inset:auto auto 0 0; width:auto; height:96%; max-width:46%; opacity:1;
    -webkit-mask-image:none; mask-image:none }
  .director__photo--cut img{ width:auto; height:100%; object-fit:contain; object-position:left bottom }
  .director__stage--photo .director__body{ width:min(100%,620px); margin-left:auto; padding:clamp(10px,1.6vw,20px) 0 }
  .director__stage--photo .prose{ font-size:16px; line-height:1.9 }
}

/* ---- 교육은 신뢰로 완성됩니다(가치 선언 — 중앙 정렬) ---- */
.trust__inner{ max-width:820px; margin:0 auto; text-align:center }
.trust__inner .prose{ max-width:720px; margin:0 auto; text-align:center; color:var(--ink-soft) }
.trust__inner .prose h2, .trust__inner .prose h3{ text-align:center; color:var(--ink); font-family:var(--font-serif); font-weight:800; font-size:clamp(22px,3.3vw,34px); line-height:1.4; margin:0 0 clamp(18px,2.4vw,28px) }
.trust__inner .prose h2:first-child, .trust__inner .prose h3:first-child{ margin-top:0 }
.trust__inner .prose p{ margin:0 0 1.05em }
.trust__inner .prose p:last-child{ margin-bottom:0 }

/* ---- 소개 하단 CTA ---- */
.about-cta__card{ max-width:900px; margin:0 auto; text-align:center; padding:clamp(30px,4.5vw,52px) clamp(22px,4vw,48px); border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(158deg, var(--surface-2), var(--paper-2)); box-shadow:var(--shadow-soft) }
.about-cta__eyebrow{ margin:0 0 10px; font-family:var(--font-serif); font-weight:700; font-size:14px; letter-spacing:.02em; color:var(--gold-deep) }
.about-cta__title{ margin:0; font-family:var(--font-serif); font-weight:800; color:var(--ink); font-size:clamp(20px,2.6vw,27px); line-height:1.4; letter-spacing:-.01em; word-break:keep-all }
.about-cta__text{ margin:14px auto 0; max-width:560px; color:var(--ink-soft); font-size:clamp(14.5px,1.6vw,16px); line-height:1.8; word-break:keep-all }
.about-cta__actions{ margin-top:clamp(22px,3vw,30px); display:flex; flex-wrap:wrap; gap:12px; justify-content:center }

/* ---- 아카데미 시설 — 실습 현장 와이드 사진 + 본문 ---- */
.facility-figure{ margin:0 auto clamp(30px,4.5vw,48px); max-width:980px; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card); background:var(--paper-2) }
.facility-figure img{ width:100%; height:100%; object-fit:cover }
.facility-prose{ max-width:820px; margin:0 auto }

/* ---- 교육과정 상세 — 히어로(페어드 이미지) + 커리큘럼 ---- */
.course-hero{
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--paper) 100%);
  padding:clamp(44px,7vw,84px) 0 clamp(40px,5vw,64px);
}
.course-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(110% 92% at 90% -16%, rgba(181,146,79,.14), transparent 56%) }
.course-hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:clamp(26px,4vw,52px); align-items:center }
.course-hero__figure{
  position:relative; aspect-ratio:4/5; width:100%; max-width:440px; margin:0 auto;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(150deg, var(--rose-tint), var(--paper-2)); box-shadow:var(--shadow-card);
}
.course-hero__figure img{ width:100%; height:100%; object-fit:cover; object-position:center 20% }
.course-hero__figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 52%, rgba(9,17,33,.4)); pointer-events:none }
.course-hero__figure-mark{ display:flex; align-items:center; justify-content:center; width:100%; height:100% }
.course-hero__figure-mark img{ width:min(48%,150px); height:auto; object-fit:contain; opacity:.5; filter:saturate(.6) }
.course-hero__tag{
  position:absolute; left:16px; bottom:16px; z-index:2; font-family:var(--font-display);
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#fff; font-weight:600;
  padding:5px 12px; border:1px solid rgba(255,255,255,.5); border-radius:999px; backdrop-filter:blur(2px);
}
.course-hero__title{ font-family:var(--font-serif); font-weight:800; color:var(--ink); font-size:clamp(30px,5vw,50px); line-height:1.2; letter-spacing:-.02em; margin:0 }
.course-hero__summary{ margin:18px 0 0; color:var(--ink-soft); font-size:clamp(15.5px,1.7vw,18px); line-height:1.85; max-width:540px }
.course-hero__actions{ margin-top:clamp(24px,3.5vw,34px); display:flex; flex-wrap:wrap; gap:12px }
@media (min-width:900px){
  .course-hero__inner{ grid-template-columns:1.08fr .92fr; grid-template-areas:"text figure"; gap:clamp(44px,5vw,80px) }
  .course-hero__text{ grid-area:text }
  .course-hero__figure{ grid-area:figure; justify-self:end; margin:0 }
}
.course-detail-body{ background:var(--surface) }
.course-detail-body .article-layout__main{ max-width:820px; margin:0 auto }
.course-detail-body .prose + .course-curriculum{ margin-top:clamp(40px,6vw,72px) }
.course-curriculum__head{ margin:0 0 clamp(22px,3vw,32px) }
.course-notfound-actions{ text-align:center }

/* =========================================================================
   레벨형 커리큘럼(course_levels) — 참고 레퍼런스(그라디언트 원형 뱃지)를 그대로 베끼지 않고
   우리 브랜드 톤(딥로즈/버건디+골드, 명조)으로 재해석한 비대칭 마커 + 이미지-텍스트 교차 블록.
   하드코딩 헥스 없음, 전부 토큰 참조.
   ========================================================================= */
.course-levels{ background:var(--surface) }
.level-list{ display:flex; flex-direction:column; gap:0; max-width:1040px; margin:0 auto }
.level-block{
  display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,36px); align-items:center;
  padding:clamp(40px,6vw,64px) 0; border-bottom:1px solid var(--line);
}
.level-list > .level-block:first-child{ padding-top:0 }
.level-list > .level-block:last-child{ padding-bottom:0; border-bottom:0 }

/* 대표 이미지 프레임(있으면 사진, 없으면 톤온톤 고스트 넘버 플레이스홀더) */
.level-block__media{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(155deg, var(--rose-tint), var(--paper-2));
  box-shadow:var(--shadow-card);
}
.level-block__media img{ width:100%; height:100%; object-fit:cover; display:block }
.level-block__media-ghost{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-weight:800; font-size:clamp(84px,15vw,150px); line-height:1;
  letter-spacing:-.02em; color:rgba(var(--rose-rgb),.13); user-select:none;
}

/* 레벨 뱃지 — 원형 그라디언트 대신 골드 헤어라인 테두리 + 비대칭 코너(2px/14px)의 정제된 마커 */
.level-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.12em;
  color:var(--rose-deep); background:var(--surface); border:1px solid var(--gold);
  border-radius:2px 16px 2px 16px; padding:8px 22px 8px 16px; margin:0 0 18px;
}
.level-badge::before{ content:""; flex:none; width:5px; height:5px; border-radius:50%; background:var(--gold-deep) }

.level-block__title{
  font-family:var(--font-serif); font-weight:800; color:var(--ink);
  font-size:clamp(21px,2.8vw,28px); line-height:1.32; letter-spacing:-.01em; margin:0 0 14px;
}
.level-block__desc{ margin:0; color:var(--ink-soft); font-size:clamp(15px,1.6vw,16.5px); line-height:1.85; max-width:58ch }
.level-block__gallery{ margin-top:22px }

@media (min-width:820px){
  .level-block{ grid-template-columns:.94fr 1.06fr; gap:clamp(40px,5vw,72px) }
  .level-block__media{ order:0 }
  .level-block__content{ order:1; min-width:0 }
  .level-block--alt{ grid-template-columns:1.06fr .94fr }
  .level-block--alt .level-block__media{ order:1 }
  .level-block--alt .level-block__content{ order:0 }
}

/* ---- 오시는 길 — 지도 + 정보 카드 ---- */
.location-section{ background:var(--surface) }
.location-intro{ max-width:760px; margin:0 0 clamp(28px,4vw,44px) }
.location-grid{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,38px); align-items:start }
.location-grid .location-map{ margin:0; max-width:none; aspect-ratio:4/3 }
.location-info{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-2);
  padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:clamp(18px,2.2vw,24px);
}
.location-info__item{ display:grid; gap:6px }
.location-info__label{ font-family:var(--font-display); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); font-weight:600 }
.location-info__value{ font-family:var(--font-serif); font-size:clamp(17px,2vw,20px); font-weight:700; color:var(--ink); line-height:1.5 }
.location-info__value a{ color:var(--rose-deep); display:inline-flex; align-items:center; gap:8px }
.location-info__value a:hover{ color:var(--rose) }
.location-info__actions{ display:grid; gap:10px; margin-top:2px }
.location-info__actions .btn{ width:100% }
@media (min-width:900px){
  .location-grid{ grid-template-columns:1.45fr .9fr }
}

/* ---- 강사진 상세 — 빈 사진 자리에 로고 마크(톤온톤) ---- */
.instructor-card--detail .instructor-card__mark{ display:flex; align-items:center; justify-content:center }
/* 특이성 주의: .instructor-card__photo img(0,1,1)보다 강해야 로고가 cover로 확대되지 않는다. */
.instructor-card__photo img.instructor-card__mark-logo{ width:min(50%,140px); height:auto; object-fit:contain; opacity:.42; filter:saturate(.55) }
.instructor-card__specialties--tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px }
.instructor-card__spec-tag{
  font-size:12.5px; font-weight:600; color:var(--rose-deep); background:var(--rose-tint);
  border:1px solid var(--line-soft); padding:4px 11px; border-radius:999px; line-height:1.5;
}

/* =========================================================================
   커뮤니티 게시판 — 목록(일반형/갤러리형) · 상세 · 페이지네이션 · 라이트박스
   홈/서브페이지와 동일 토큰/모션 언어를 공유한다. 하드코딩 헥스 없음.
   ========================================================================= */

/* ---- 목록: 일반형(공지·인터뷰·후기·스토리) — 에디토리얼 리스트 ---- */
.board-list{ list-style:none; margin:0; padding:0 }
.board-list__item{ border-top:1px solid var(--line) }
.board-list__item:first-child{ border-top:none }
.board-list__row{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px;
  padding:20px 6px; min-height:48px; border-radius:var(--radius);
  transition:background-color .25s var(--ease);
}
.board-list__row:hover, .board-list__row:focus-visible{ background:var(--surface-2) }
.board-list__title{
  display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:10px; min-width:0; flex:1 1 240px;
  font-weight:600; color:var(--ink); font-size:16px; line-height:1.55;
}
.board-list__row:hover .board-list__title-text{ color:var(--rose-deep) }
.board-list__title-text{ transition:color .25s var(--ease) }
.board-list__pin{
  flex:none; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.06em;
  color:#fff; background:var(--rose); border-radius:999px; padding:4px 11px; line-height:1.4;
}
.board-list__meta{ flex:none; display:inline-flex; align-items:center; color:var(--ink-faint); font-size:13px }
.board-list__meta-item{ display:inline-flex; align-items:center }
.board-list__meta-item + .board-list__meta-item::before{
  content:""; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.55; margin:0 8px; flex:none;
}

/* ---- 목록: 갤러리형(수업현장 갤러리) — 카드 그리드 ---- */
.board-gallery-grid{ display:grid; grid-template-columns:1fr; gap:clamp(18px,2.4vw,26px) }
.board-gallery-card{
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.board-gallery-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -28px rgba(var(--ink-rgb),.5); border-color:var(--gold-soft) }
.board-gallery-card__thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2) }
.board-gallery-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.board-gallery-card:hover .board-gallery-card__thumb img{ transform:scale(1.06) }
.board-gallery-card__thumb-mark{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(150deg, var(--rose-tint), var(--paper-2)) }
.board-gallery-card__thumb-mark img{ width:min(42%,120px); height:auto; object-fit:contain; opacity:.5; filter:saturate(.6) }
.board-gallery-card__body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px }
.board-gallery-card__title{
  font-family:var(--font-serif); font-weight:800; color:var(--ink); font-size:17px; margin:0; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.board-gallery-card__date{ font-size:13px; color:var(--ink-faint) }

/* ---- 페이지네이션 ---- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:10px 14px; flex-wrap:wrap; margin-top:clamp(36px,5vw,52px) }
.pagination__nav{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 18px;
  border:1px solid var(--line); border-radius:var(--radius); font-weight:600; font-size:14px; color:var(--ink);
  transition:border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.pagination__nav:hover{ border-color:var(--gold); color:var(--rose-deep) }
.pagination__nav.is-disabled{ opacity:.35; pointer-events:none }
.pagination__list{ list-style:none; display:flex; gap:6px; margin:0; padding:0 }
.pagination__link{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:var(--radius); font-weight:600; font-size:14.5px; color:var(--ink-soft);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.pagination__link:hover{ background:var(--surface-2); color:var(--rose) }
.pagination__link.is-current{ background:var(--rose); color:#fff }

/* ---- 상세: 헤더(브레드크럼 + 명조 제목 + 메타) ---- */
.post-hero{
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--paper) 100%);
  padding:clamp(44px,7vw,76px) 0 clamp(32px,4vw,48px);
}
.post-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(110% 90% at 90% -18%, rgba(181,146,79,.14), transparent 56%);
}
.post-hero__inner{ position:relative; z-index:1; max-width:800px }
.post-hero__breadcrumb{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; font-family:var(--font-display);
  font-size:13px; letter-spacing:.06em; font-weight:600; color:var(--rose-deep); margin:0 0 18px;
  transition:color .25s var(--ease);
}
.post-hero__breadcrumb:hover{ color:var(--rose) }
.post-hero__title{
  font-family:var(--font-serif); font-weight:800; color:var(--ink);
  font-size:clamp(26px,4vw,40px); line-height:1.32; letter-spacing:-.015em; margin:0;
}
.post-hero__meta{ margin:18px 0 0; display:flex; flex-wrap:wrap; align-items:center; color:var(--ink-soft); font-size:14.5px; letter-spacing:.01em }
.post-hero__meta-item{ display:inline-flex; align-items:center }
.post-hero__meta-item + .post-hero__meta-item::before{
  content:""; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; margin:0 10px; flex:none;
}

/* ---- 상세: 본문 하단 목록 링크 ---- */
.post-body-actions{ margin-top:clamp(36px,5vw,52px); padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--line) }
.post-body-actions .link-more{ display:inline-flex; align-items:center; gap:8px }

/* ---- 상세: 갤러리형 첨부 이미지 그리드 ---- */
.post-gallery{ margin-top:clamp(40px,6vw,64px) }
.post-gallery__head{ margin:0 0 clamp(22px,3vw,32px) }
.post-gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.4vw,16px) }
.post-gallery-grid__item{
  position:relative; display:block; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--paper-2); border:0; padding:0; margin:0; cursor:zoom-in; min-height:48px;
}
.post-gallery-grid__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease) }
.post-gallery-grid__item:hover img{ transform:scale(1.07) }
.post-gallery-grid__item::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(9,17,33,.35));
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
}
.post-gallery-grid__item:hover::after{ opacity:1 }

/* ---- 라이트박스(순수 JS, 클릭 확대/ESC·바깥클릭 닫기) ---- */
.lightbox{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px;
  visibility:hidden; opacity:0; transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.lightbox.is-open{ visibility:visible; opacity:1 }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(15,8,10,.92) }
.lightbox__stage{ position:relative; z-index:1; max-width:min(920px,92vw); max-height:88vh }
.lightbox__img{ display:block; max-width:100%; max-height:88vh; width:auto; height:auto; margin:0 auto; border-radius:var(--radius); box-shadow:0 40px 90px -30px rgba(0,0,0,.7) }
.lightbox__close{
  position:absolute; top:18px; right:18px; z-index:2; width:48px; height:48px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background-color .25s var(--ease);
}
.lightbox__close:hover{ background:rgba(255,255,255,.2) }
body.is-lightbox-open{ overflow:hidden }

@media (min-width:600px){
  .board-gallery-grid{ grid-template-columns:repeat(2,1fr) }
  .post-gallery-grid{ grid-template-columns:repeat(3,1fr) }
}
@media (min-width:960px){
  .board-gallery-grid{ grid-template-columns:repeat(3,1fr) }
  .post-gallery-grid{ grid-template-columns:repeat(4,1fr) }
}

/* =========================================================================
   리드수집 폼(수강료 조회·1:1 문의) — 라벨 상단 배치·인라인 에러·존댓말
   홈/서브페이지와 동일 토큰/모션 언어를 공유한다. 하드코딩 헥스 없음.
   ========================================================================= */
.form-alert{
  margin:0 0 22px; padding:14px 18px; border-radius:var(--radius);
  background:var(--rose-tint); color:var(--rose-deep); font-size:14.5px; font-weight:700; line-height:1.6;
  border:1px solid var(--gold-soft);
}
.lead-form{ display:grid; gap:22px }
.form-field{ display:grid; gap:8px }
.form-label{ font-weight:700; font-size:14.5px; color:var(--ink); letter-spacing:-.01em }
.form-required{ color:var(--rose); margin-left:2px }
.form-input, .form-select, .form-textarea{
  width:100%; font-family:var(--font-sans); font-size:16px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; min-height:52px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form-textarea{ min-height:132px; resize:vertical; line-height:1.7 }
.form-input::placeholder, .form-textarea::placeholder{ color:var(--ink-faint) }
.form-input:hover, .form-select:hover, .form-textarea:hover{ border-color:var(--gold-soft) }
.form-input:focus, .form-select:focus, .form-textarea:focus{
  outline:none; border-color:var(--rose); box-shadow:0 0 0 3px rgba(var(--rose-rgb),.14);
}
.form-field.has-error .form-input, .form-field.has-error .form-select, .form-field.has-error .form-textarea{
  border-color:var(--rose);
}
.form-error{ margin:0; color:var(--rose-deep); font-size:13.5px; font-weight:600; line-height:1.6 }
.form-select-wrap{ position:relative }
.form-select{ appearance:none; padding-right:42px }
.form-select-arrow{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); pointer-events:none;
}

.form-field--check{ gap:10px }
.form-check{
  display:flex; align-items:flex-start; gap:12px; min-height:48px; cursor:pointer;
  font-size:14.5px; color:var(--ink-soft); line-height:1.7;
}
.form-check input[type="checkbox"]{
  flex:none; width:22px; height:22px; margin-top:2px; accent-color:var(--rose); cursor:pointer;
}
.form-check a{ color:var(--rose-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px }
.form-check a:hover{ color:var(--rose) }

.form-actions{ margin-top:4px }
.form-submit{ width:100%; font-size:16.5px }
.form-submit[disabled]{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none }

/* 허니팟: 실제 사용자에게는 절대 보이지 않되(화면 밖 배치) DOM에는 남겨 봇만 걸리게 한다. */
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden }

.lead-done-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 16px }

@media (min-width:640px){
  .form-actions{ display:flex; justify-content:flex-start }
  .form-submit{ width:auto; min-width:220px }
}

/* =========================================================================
   게시판 커뮤니티 — 방문자 글쓰기·비밀글·댓글(design 2026-07-16). 리드폼(.lead-form,
   .form-*, .hp-field)과 버튼(.btn) 클래스를 그대로 재사용하고, 여기서는 레이아웃만 추가한다.
   ========================================================================= */
.board-toolbar{ display:flex; justify-content:flex-end; margin:0 0 20px }
.is-lock-icon{ display:inline-block; vertical-align:-2px; color:var(--rose-deep); margin-right:2px }

.post-secret-gate{ max-width:520px; margin:0 auto 8px }
.post-secret-gate__form{ display:grid; gap:14px; margin-top:14px }

.post-owner-actions{
  margin-top:clamp(28px,4vw,40px); padding:18px 20px; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--surface-2);
}
.post-owner-actions__label{ margin:0 0 10px; font-weight:700; color:var(--ink); font-size:14.5px }
.post-owner-actions__buttons{ display:flex; flex-wrap:wrap; gap:10px }
.post-owner-actions__buttons .btn{ flex:none; padding:10px 20px; min-height:44px }

.comments{ margin-top:clamp(40px,5vw,60px) }
.comments__empty{ color:var(--ink-soft); font-size:14.5px; margin:0 0 26px }
.comment-list{ list-style:none; margin:0 0 30px; padding:0; display:grid; gap:16px }
.comment-item{ padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface) }
.comment-item__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 8px }
.comment-item__author{ font-weight:700; color:var(--ink); font-size:14px }
.comment-item__badge{
  display:inline-flex; align-items:center; padding:2px 9px; border-radius:99px;
  background:var(--rose-tint); color:var(--rose-deep); font-size:12px; font-weight:700;
}
.comment-item__date{ color:var(--ink-faint); font-size:12.5px }
.comment-item__body{ margin:0 0 10px; color:var(--ink); font-size:14.5px; line-height:1.75; word-break:keep-all }
.comment-item__delete{ display:flex; align-items:center; gap:8px }
.comment-item__delete-password{
  width:auto; flex:0 1 160px; min-height:36px; padding:6px 10px; font-size:13.5px;
  border:1.5px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.comment-item__delete-btn{
  flex:none; border:none; background:transparent; color:var(--ink-faint); font-size:13px;
  font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.comment-item__delete-btn:hover{ color:var(--rose-deep) }

.comment-form{ max-width:640px }
.comment-form__admin-note{ margin:0; color:var(--ink-soft); font-size:14px }
.comment-form__row{ display:grid; grid-template-columns:1fr; gap:22px }

@media (min-width:560px){
  .comment-form__row{ grid-template-columns:1fr 1fr }
}

/* =========================================================================
   접근성 — prefers-reduced-motion: 모든 모션/트랜지션 비활성
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
  .js .reveal{ opacity:1 !important; transform:none !important }
  .hero__slide.is-active .hero__img{ animation:none; transform:scale(1.04) }
  .hero__scroll-cue span{ animation:none }
}

/* =========================================================================
   게시판 커뮤니티 — 본인 글 수정/삭제 전용 페이지(design 게시판 수정 기능 신규, 2026-07-17).
   .lead-form/.form-*/.btn을 그대로 재사용하고, 버튼 2개(처리/취소)가 나란히 놓이는
   줄만 최소로 추가한다.
   ========================================================================= */
.post-verify-form .form-actions{ display:flex; flex-wrap:wrap; gap:12px }
.post-remove-target{ margin:0 0 20px; color:var(--ink-soft); font-size:14.5px }