/* 피아노·클래식 세계 · "리사이틀 5분 전" — 아이보리 프로그램북 + 에보니 그랜드 (📚 보드 05_피아노 §4)
 * 상아 건반 #F6F1E7(바탕) · 흰 #FFFFFF(카드·건반) · 흑단 #1E1A17(글자·검은 건반·무대 띠) · 펠트 #6B6259(보조 글)
 * 가문비 #E3D7C4(분위기 면: 수업 방식 · 눌린 건반) · 벨벳 자두 #985074(강조 5%: 체험 레슨 버튼 · 연주회 날짜 숫자만)
 * 제목 = Hahmlet(함렛) 500 한 굵기 · 본문 Pretendard 400/600 · 모양 = 프로그램북 "순서" 목록(번호 · 점선 이음 · 오른쪽 이름) */
:root{--head:"Hahmlet","Noto Serif KR",serif;--on-ink:#FFFFFF}
.h-l,.sec-title,.cta-end h2,.director blockquote p,.order h3 .t,.order .n,.rows h3,.facts dd,.fees td.fee strong,.tk-kind,.tk-num,.tk-unit,.brand span,.week-t,.tab-list button{font-family:var(--head);font-weight:500}
.sec-title,.cta-end h2{font-weight:500;letter-spacing:-.02em}
.brand{font-size:18px}
.brand svg{color:var(--ink)}

/* 강조 = 체험 레슨 예약 버튼(자두) */
.btn-main,.bar .b-main{background:var(--accent);color:#fff}
.top-nav .btn{color:#fff}

/* ── 첫 화면: 프로그램북 표지 + 무대 바닥의 건반 ───── */
.hero{position:relative;padding:32px 0 0;overflow:hidden;display:flex;flex-direction:column;min-height:calc(var(--vh,1vh)*100 - 56px - var(--bar-h))}
.eyebrow{display:flex;align-items:center;font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:16px}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--ink);margin-right:10px;flex:none}
.h-l{display:block;font-size:36px;line-height:1.3;letter-spacing:-.035em}
.ul{position:relative;display:inline-block}
.ul-line{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink);transform-origin:0 50%}
.hero-sub{margin-top:16px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.facts div{padding:0 16px;border-left:1px solid var(--line)}
.facts div:first-child{padding-left:0;border-left:0}
.facts dt{font-size:12px;font-weight:600;color:var(--ink-2);line-height:1.5}
.facts dd{font-size:16px;line-height:1.45;letter-spacing:-.02em;margin-top:2px;white-space:nowrap}
.hero-act{margin-top:24px;display:flex;align-items:center;flex-wrap:wrap}
.hero-act .btn{margin-right:20px}
.hero-fig{margin:auto 0 0;padding-top:32px;position:relative}
.stage{width:100%;height:auto;overflow:visible}
.st-pc{display:none}
.stage .wk{fill:var(--surface);stroke:rgba(30,26,23,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.stage .wk-on{fill:var(--mood)}
.stage .bk{fill:var(--ink)}
.stage .wv{fill:var(--ink)}
.stage .wv-base{stroke:rgba(30,26,23,.14);stroke-width:1;vector-effect:non-scaling-stroke}

/* 재생 전 모습은 html.fx 에서만 · .go 가 붙으면 한 번 재생하고 멈춤 (transform · opacity 만)
 * 글자(제목)는 처음부터 보인다 · 설명·버튼만 짧게 올라옴 */
.fx .hero .h-in{opacity:0;transform:translate3d(0,10px,0)}
.fx .hero.go .h-in{opacity:1;transform:none;transition:opacity 520ms var(--ease-out) var(--d),transform 520ms var(--ease-out) var(--d)}
.stage .kp{transform-box:fill-box;transform-origin:50% 0}
.fx .hero .wk-on{opacity:0}
.fx .hero.go .wk-on{opacity:1;transition:opacity 260ms var(--ease-out) var(--d)}
.fx .hero.go .kp{animation:key-press 420ms cubic-bezier(.33,0,.2,1) var(--d) 1 both}
@keyframes key-press{0%{transform:none}35%{transform:translate3d(0,2.5px,0)}100%{transform:none}}
.stage .wv{transform-box:fill-box;transform-origin:50% 50%}
.fx .hero .wv{opacity:0;transform:scaleY(.08)}
.fx .hero.go .wv{opacity:1;transform:none;transition:opacity 260ms linear var(--d),transform 560ms var(--ease-out) var(--d)}
.fx .hero .wv-base{opacity:0}
.fx .hero.go .wv-base{opacity:1;transition:opacity 500ms var(--ease-out) 700ms}
.fx .hero .ul-line{transform:scaleX(0)}
.fx .hero.go .ul-line{transform:scaleX(1);transition:transform 640ms cubic-bezier(.65,0,.35,1) var(--d)}

@media (min-width:1024px){
  .hero{padding:88px 0 0;min-height:calc(var(--vh,1vh)*100 - 72px)}
  .hero-in{display:grid;grid-template-columns:7fr 5fr;grid-column-gap:64px;column-gap:64px;align-items:end}
  .hero-in h1{grid-row:1 / span 3}
  .eyebrow{font-size:15px;margin-bottom:24px}
  .eyebrow::before{width:32px;margin-right:14px}
  .h-l{font-size:68px;line-height:1.22}
  .ul-line{bottom:-2px;height:3px}
  .hero-sub{margin-top:0;font-size:18px}
  .facts{margin-top:24px;grid-template-columns:repeat(3,1fr);justify-content:stretch}
  .facts dd{font-size:18px}
  .hero-act{margin-top:32px}
  .hero-fig{padding-top:64px}
  .st-m{display:none}
  .st-pc{display:block}
}

/* ── 다른 점: 프로그램북 "순서" — 번호 · 제목 …… 이름 ───── */
.order li{display:grid;grid-template-columns:32px 1fr;padding:24px 0;border-top:1px solid var(--line)}
.order li:last-child{border-bottom:1px solid var(--line)}
.order .n{font-size:20px;line-height:1.35;color:var(--ink-2)}
.order h3{display:flex;align-items:baseline;font-size:19px;line-height:1.4;letter-spacing:-.02em}
.order h3 .t{flex:none;max-width:70%}
.dots{flex:1 1 auto;min-width:16px;margin:0 10px;border-bottom:1.5px dotted rgba(30,26,23,.35);transform:translateY(-4px)}
.order .tag{flex:none;font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.order p{margin-top:8px;color:var(--ink-2);font-size:15px;line-height:1.65}
@media (min-width:1024px){
  .order li{grid-template-columns:96px 1fr;padding:40px 0}
  .order .n{font-size:28px}
  .order-b{display:grid;grid-template-columns:6fr 5fr;grid-column-gap:48px;column-gap:48px;align-items:baseline}
  .order h3{font-size:26px}
  .order .tag{font-size:14px}
  .order p{margin:0;font-size:16px}
}

/* ── 과정: 대상 탭 → 단계 행 ─────────────── */
.tab-list{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.tab-list button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;min-height:48px;padding:0 4px;
  font-size:17px;color:var(--ink-2);cursor:pointer;transition:color 200ms,border-color 200ms}
.tab-list button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.tab-list button:hover{color:var(--ink)}
.rows li{position:relative;padding:24px 0;border-bottom:1px solid var(--line)}
.rows .grade{display:block;font-size:13px;font-weight:600;color:var(--ink-2)}
.rows h3{font-size:21px;line-height:1.4;margin-top:4px;letter-spacing:-.02em}
.rows p{margin-top:8px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.rows .meta{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 10px}
.js .tab-panel[hidden]{display:none}
@media (min-width:1024px){
  .tab-list{display:inline-grid;grid-template-columns:repeat(4,120px)}
  .tab-list button{font-size:19px}
  .rows li{display:grid;grid-template-columns:3fr 5fr 3fr;grid-column-gap:40px;column-gap:40px;align-items:baseline;padding:32px 0}
  .rows .grade{grid-column:1;grid-row:1;align-self:start;margin-top:2px}
  .rows h3{grid-column:1;grid-row:2;margin:0;font-size:24px}
  .rows p{grid-column:2;grid-row:1 / span 2;margin:0;font-size:16px}
  .rows .meta{grid-column:3;grid-row:1 / span 2;justify-self:end;margin:0}
}

/* ── 수업 방식: 가문비 면 · 50분 한 줄 막대 + 요일별 시간 ── */
.band{margin-top:var(--sec);padding:96px 0;background:var(--mood)}
.flow{background:var(--surface);border-radius:var(--r-card);padding:24px 20px}
.flow-bar{display:flex;height:14px;border-radius:7px;overflow:hidden}
.seg{display:block;height:100%}
.seg+.seg{margin-left:3px}
.s0{background:var(--ink)}
.s1{background:#8F857B}
.s2{background:var(--mood)}
.flow-legend{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px}
.flow-legend li{min-width:0;padding-right:8px;flex:none!important}
.flow-legend b{display:flex;align-items:center;font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap}
.flow-legend .sw{flex:none;width:8px;height:8px;border-radius:50%;margin-right:6px}
.flow-legend span{display:block;font-family:var(--head);font-size:22px;line-height:1.3;margin-top:4px}
.flow-legend small{display:block;font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:4px}
.flow-note{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.week-t{font-size:20px;line-height:1.4;margin-top:56px;margin-bottom:8px}
.week li{display:flex;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(30,26,23,.16)}
.week .cls{flex:none;font-size:16px;font-weight:600;line-height:1.45}
.week .cls small{display:block;font-size:13px;font-weight:400;color:var(--ink-2)}
.week .dots{border-bottom-color:rgba(30,26,23,.3);align-self:flex-start;margin-top:14px}
.week .when{flex:none;font-size:15px;font-weight:600;align-self:flex-start;line-height:1.45}
.week-note{margin-top:16px;font-size:14px;color:var(--ink-2)}
@media (max-width:374px){.flow-legend small{display:none}}
@media (min-width:1024px){
  .band{padding:144px 0}
  .lesson .wrap{display:grid;grid-template-columns:6fr 5fr;grid-column-gap:80px;column-gap:80px;align-items:start}
  .lesson .sec-head{grid-column:1 / -1}
  .flow{grid-column:1;grid-row:2 / span 3;padding:40px}
  .flow-bar{height:18px;border-radius:9px}
  .flow-legend{margin-top:24px}
  .flow-legend b{font-size:15px}
  .flow-legend span{font-size:30px}
  .flow-legend small{font-size:14px}
  .week-t{grid-column:2;margin:0 0 8px}
  .week{grid-column:2}
  .week-note{grid-column:2}
}

/* ── 무대: 페이지에서 한 번뿐인 에보니 띠 + 아이보리 입장권 ── */
.stage-band{margin-top:var(--sec);padding:96px 0;background:var(--ink);color:var(--bg)}
.stage-band .sec-label{color:rgba(246,241,231,.66)}
.stage-band .sec-title{color:var(--bg)}
.stage-text{margin-top:16px;color:rgba(246,241,231,.78);font-size:16px;line-height:1.7;max-width:30em}
.stage-more{margin-top:32px;border-top:1px solid rgba(246,241,231,.18)}
.stage-more li{display:grid;grid-template-columns:112px 1fr;padding:14px 0;border-bottom:1px solid rgba(246,241,231,.18);font-size:15px}
.stage-more b{font-weight:600;color:var(--bg)}
.stage-more span{color:rgba(246,241,231,.72)}
.ticket{position:relative;margin-top:48px;display:grid;grid-template-columns:1fr 104px;background:var(--bg);color:var(--ink);border-radius:var(--r-card)}
.ticket::before,.ticket::after{content:"";position:absolute;right:92px;width:24px;height:24px;border-radius:50%;background:var(--ink)}
.ticket::before{top:-12px}
.ticket::after{bottom:-12px}
.tk-main{padding:24px 20px}
.tk-kind{display:block;font-size:17px;line-height:1.4}
.tk-date{display:flex;align-items:baseline;margin-top:12px}
.tk-num{font-size:64px;line-height:1;letter-spacing:-.04em;color:var(--accent)}
.tk-unit{font-size:22px;margin-left:4px}
.tk-when{display:block;margin-top:12px;font-size:15px;font-weight:600}
.tk-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 12px;border-left:1.5px dashed rgba(30,26,23,.3)}
.tk-stub small{font-size:12px;font-weight:600;color:var(--ink-2)}
.tk-stub b{font-family:var(--head);font-weight:500;font-size:17px;line-height:1.35;margin-top:4px;word-break:keep-all}
@media (min-width:1024px){
  .stage-band{padding:144px 0}
  .stage-in{display:grid;grid-template-columns:6fr 5fr;grid-column-gap:96px;column-gap:96px;align-items:center}
  .stage-text{font-size:17px;margin-top:24px}
  .ticket{margin:0;grid-template-columns:1fr 136px}
  .ticket::before,.ticket::after{right:124px}
  .tk-main{padding:40px}
  .tk-kind{font-size:20px}
  .tk-num{font-size:96px}
  .tk-unit{font-size:28px}
  .tk-when{font-size:16px}
  .tk-stub{padding:24px}
  .tk-stub b{font-size:20px}
  .tk-stub small{font-size:13px}
}

/* ── 원장 인사: 프로그램북 "인사말" 한 장 ───── */
.dir-in{border-top:1px solid var(--ink);padding-top:40px}
.director blockquote{margin:0}
.director blockquote p{font-size:28px;line-height:1.45;letter-spacing:-.03em}
.dir-body{margin-top:32px;max-width:32em}
.dir-body p{color:var(--ink-2);font-size:16px;line-height:1.75}
.dir-body p+p{margin-top:12px}
.dir-body .sign{margin-top:28px;color:var(--ink);font-weight:600;font-size:15px}
@media (min-width:1024px){
  .dir-in{display:grid;grid-template-columns:7fr 5fr;grid-column-gap:80px;column-gap:80px;align-items:end;padding-top:64px}
  .director .sec-label{grid-column:1 / -1}
  .director blockquote p{font-size:44px;line-height:1.36}
  .dir-body{margin:0}
}

/* 교습비 · 끝 상담 — 프로그램북 명조 숫자 */
.fees td.fee strong{font-size:20px}
.cta-end .wrap>div{border-top-color:var(--ink)}