/* 영어 세계 · "송도에서 세계로 부치는 편지" (📚 보드 02_영어 §4)
 * 에어메일 종이 #F7F4EC · 항구 잉크 #16434F(글자·출발판 글자·푸터) · 에어메일 빨강 #B5402E(레벨테스트 예약 버튼 · 모집 중 · 말할 차례 1자리 · 5%)
 * 하늘 면 #D5E5EF(출발판 칸 · 레벨 여정 면만 · 글자색 ✕) · 보조 글 #5A6468
 * 영어 단어·레벨 이름·시각·교습비 숫자 = IBM Plex Mono 500 · 한글 = Pretendard 400/600/700 */
:root{--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.mono,.p-name,.dep-time b,.dep-cls,.lvn,.bento .n,.t-steps .n,.fees td.fee strong,.flap i,.stamp text,.dep-time small{font-family:var(--mono);font-weight:500;letter-spacing:0}

/* 레벨테스트 예약 = 에어메일 빨강 (버튼만) */
.btn-main,.top-nav .btn,.bar .b-main{background:var(--accent);color:#fff}

/* ── 첫 화면: 출발 안내판 ─────────────────── */
.hero{position:relative;padding:32px 0 0}
.board-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--ink-2);padding-bottom:12px;border-bottom:1px solid var(--line)}
.board-head b{color:var(--ink);font-weight:600;margin-left:6px}
.now{display:inline-flex;align-items:center;color:var(--accent);font-weight:600}
.now::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px}
.flaps{--ch:48px;display:grid;grid-template-columns:repeat(12,1fr);grid-column-gap:3px;column-gap:3px;margin-top:16px;padding:8px;background:var(--ink);border-radius:10px}
.flap{position:relative;height:var(--ch);perspective:180px;background:var(--mood);border-radius:3px}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:var(--ink);opacity:.55;z-index:20}
.flap .t,.flap .b{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--mood);opacity:0}
.flap .t{top:0;border-radius:3px 3px 0 0;transform-origin:50% 100%}
.flap .b{bottom:0;border-radius:0 0 3px 3px;transform-origin:50% 0}
.flap i{position:absolute;left:0;right:0;height:var(--ch);line-height:var(--ch);text-align:center;font-style:normal;font-size:24px;color:var(--ink)}
.flap .t i{top:0}
.flap .b i{bottom:0}
.flap .fin{opacity:1}

.eyebrow{display:block;font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.hero-copy{margin-top:36px}
.h-l{display:block;font-size:36px;line-height:1.26;font-weight:700;letter-spacing:-.035em}
.hero-sub{margin-top:16px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.hero-act{margin-top:28px;display:flex;align-items:center;flex-wrap:wrap}
.hero-act .btn{margin-right:20px}

/* 재생 전 모습은 html.fx 에서만 · .go 가 붙으면 한 번 넘기고 멈춤 (transform · opacity 만) */
.fx .hero .h-in{opacity:0;transform:translate3d(0,14px,0)}
.fx .hero.go .h-in{opacity:1;transform:none;transition:opacity 600ms var(--ease-out) var(--d),transform 600ms var(--ease-out) var(--d)}
.fx .hero .flap .t,.fx .hero .flap .b{opacity:0}
.fx .hero .flap .s0{opacity:1}
.fx .hero .flap .b{transform:rotateX(90deg)}
.fx .hero .flap .b.s0{transform:none}
.fx .hero.go .flap .t{opacity:1;transition:opacity 1ms linear var(--in),transform 150ms cubic-bezier(.55,0,.9,.45) var(--out)}
.fx .hero.go .flap .t.gone{transform:rotateX(-90deg)}
.fx .hero.go .flap .b{opacity:1;transform:none;transition:opacity 1ms linear var(--in),transform 210ms cubic-bezier(.2,.75,.3,1) var(--in)}

@media (min-width:1024px){
  .hero{padding:56px 0 0}
  .board-head{font-size:15px;padding-bottom:16px}
  .flaps{--ch:104px;grid-column-gap:8px;column-gap:8px;margin-top:24px;padding:16px;border-radius:14px}
  .flap{perspective:520px;border-radius:6px}
  .flap::after{height:2px;margin-top:-1px}
  .flap .t{border-radius:6px 6px 0 0}
  .flap .b{border-radius:0 0 6px 6px}
  .flap i{font-size:64px}
  .hero-copy{margin-top:56px;display:grid;grid-template-columns:7fr 5fr;grid-column-gap:48px;column-gap:48px;align-items:end}
  .eyebrow{font-size:16px;margin-bottom:16px}
  .h-l{font-size:60px;line-height:1.2}
  .hero-sub{margin:0;font-size:18px}
  .hero-act{margin-top:28px}
}

/* ── 나이로 찾기: 첫 화면 바로 아래 빠른 줄 ─────── */
/* 첫 화면에 걸쳐 보이는 줄이라 도착 재생 대신 첫 화면 재생 끝에 함께 뜸 (.hero.go 형제) */
.fx .ages-in{opacity:0;transform:translate3d(0,14px,0)}
.fx .hero.go~.ages .ages-in{opacity:1;transform:none;transition:opacity 600ms var(--ease-out) 800ms,transform 600ms var(--ease-out) 800ms}
.ages{padding-top:56px}
.ages-title{font-size:21px;line-height:1.4;font-weight:700;letter-spacing:-.025em}
.age-list{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-top:24px}
.age-list a{position:relative;display:block;min-height:76px;padding:16px 16px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);transition:transform 160ms var(--ease-out),border-color 200ms}
.age-list a:active{transform:scale(.96)}
.age-list a:hover{border-color:rgba(22,67,79,.4)}
.age-list .age{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em}
.age-list .lvn{display:block;margin-top:4px;font-size:13px;color:var(--ink-2)}
.age-list svg{position:absolute;right:14px;top:18px;color:var(--ink-2)}
@media (min-width:1024px){
  .ages{padding-top:96px}
  .ages-in{display:grid;grid-template-columns:4fr 8fr;grid-column-gap:48px;column-gap:48px;align-items:end}
  .ages-title{font-size:26px}
  .age-list{grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px;margin:0}
  .age-list a{min-height:96px;padding:20px}
  .age-list .age{font-size:20px}
}

/* ── 다른 점: 크기가 다른 3칸 ─────────────── */
.bento{display:grid;grid-row-gap:12px;row-gap:12px}
.bento li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 20px}
.bento .n{display:block;font-size:14px;color:var(--ink-2);margin-bottom:12px}
.bento h3{font-size:20px;line-height:1.4;font-weight:700;letter-spacing:-.025em}
.bento p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.bento .big h3{font-size:24px;line-height:1.36}
.seats-wrap{margin-top:28px}
.seats{width:100%;max-width:264px;height:auto;overflow:visible}
.seats circle{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}
.seats circle.on{fill:var(--accent);stroke:var(--accent)}
.seats .tbl{fill:var(--bg);stroke:rgba(22,67,79,.35);stroke-width:1.5}
.seat-cap{display:flex;align-items:center;margin-top:14px;font-size:13px;font-weight:600;color:var(--ink-2)}
.seat-cap i{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:8px}
.letter .env{position:absolute;right:20px;top:22px;color:var(--ink)}
.letter h3{padding-right:64px}
@media (min-width:1024px){
  .bento{grid-template-columns:7fr 5fr;grid-template-rows:auto auto;grid-gap:24px;gap:24px}
  .bento li{padding:32px}
  .bento .big{grid-row:1 / span 2;display:flex;flex-direction:column;padding:40px}
  .bento .big h3{font-size:34px;line-height:1.3}
  .bento .big p{font-size:17px;max-width:26em;margin-top:16px}
  .bento .big .seats-wrap{margin-top:auto;padding-top:48px}
  .bento .big .seats{max-width:340px}
  .bento h3{font-size:22px}
  .letter .env{right:32px;top:32px}
}

/* ── 레벨 여정: 하늘 면 위 탑승권 4장 ────────── */
.band{margin-top:var(--sec);padding:96px 0;background:var(--mood)}
.passes{display:grid;grid-row-gap:12px;row-gap:12px}
.pass{position:relative;display:grid;grid-template-columns:1fr 92px;background:var(--surface);border-radius:var(--r-card);overflow:hidden;scroll-margin-top:80px}
.p-main{padding:22px 20px 20px}
.p-grade{display:block;font-size:14px;font-weight:600;color:var(--ink-2)}
.p-name{font-size:26px;line-height:1.3;margin-top:2px;color:var(--ink)}
.p-main p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.p-meta{display:block;margin-top:14px;font-size:13px;font-weight:600;color:var(--ink)}
.p-stub{position:relative;display:flex;align-items:center;justify-content:center;border-left:2px dashed rgba(22,67,79,.3)}
.p-stub::before,.p-stub::after{content:"";position:absolute;left:-9px;width:16px;height:16px;border-radius:50%;background:var(--mood)}
.p-stub::before{top:-8px}
.p-stub::after{bottom:-8px}
.stamp{color:var(--ink);transform:rotate(-12deg)}
.stamp text{font-size:17px}
.fx .pass .stamp{opacity:0;transform:rotate(-12deg) scale(1.12)}
.fx .pass.is-in .stamp{opacity:.9;transform:rotate(-12deg) scale(1);transition:opacity 260ms var(--ease-out) 320ms,transform 420ms var(--ease-out) 320ms}
@media (min-width:1024px){
  .band{padding:144px 0}
  .passes{grid-template-columns:1fr 1fr;grid-gap:24px;gap:24px}
  .pass{grid-template-columns:1fr 136px}
  .p-main{padding:32px 32px 28px}
  .p-name{font-size:32px}
  .p-main p{font-size:16px}
  .stamp{width:80px;height:80px}
}

/* ── 수업 하루: 두 선생님 + 출발 시각표 ───────── */
.roles{display:grid;grid-template-columns:104px 1fr;grid-row-gap:12px;row-gap:12px;margin:-8px 0 32px;font-size:15px}
.roles dt{color:var(--ink-2)}
.roles dd{font-weight:600}
.dep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:8px 20px 20px}
.dep-row{display:grid;grid-template-columns:76px 1fr auto;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.dep-top{border-top:0;padding:12px 0 8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.dep-time b{display:block;font-size:20px;line-height:1.2;color:var(--ink)}
.dep-time small{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.dep-cls{font-size:15px;color:var(--ink)}
.dep-days{display:grid;grid-template-columns:repeat(5,24px);grid-column-gap:4px;column-gap:4px}
.dep-days b{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border-radius:4px;color:var(--ink-2)}
.dep-row:not(.dep-top) .dep-days b{background:var(--bg)}
.dep-days b.on{background:var(--ink)!important;color:#fff}
.dep-note{margin-top:0;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
@media (min-width:1024px){
  .day-in{display:grid;grid-template-columns:5fr 7fr;grid-column-gap:64px;column-gap:64px;align-items:start}
  .roles{margin:0;font-size:16px}
  .dep{padding:12px 32px 28px}
  .dep-row{grid-template-columns:132px 1fr auto;padding:20px 0}
  .dep-time b{font-size:26px}
  .dep-time small{font-size:13px}
  .dep-cls{font-size:17px}
  .dep-days{grid-template-columns:repeat(5,36px);grid-column-gap:6px;column-gap:6px}
  .dep-days b{width:36px;height:32px;font-size:13px}
}

/* ── 레벨테스트 3단계: 에어메일 줄무늬 카드 (줄무늬는 이 한 곳만) ── */
.mail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.stripe{display:block;width:100%;height:8px}
.mail-in{padding:32px 20px 24px}
.mail-head{margin-bottom:32px}
.t-steps{display:grid;grid-row-gap:20px;row-gap:20px}
.t-steps li{display:grid;align-content:start;grid-template-columns:44px 1fr;grid-column-gap:8px;column-gap:8px}
.t-steps .n{grid-row:1 / span 2;width:32px;height:32px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}
.t-steps h3{font-size:18px;line-height:1.45;padding-top:3px;font-weight:700}
.t-steps p{font-size:15px;color:var(--ink-2);line-height:1.6;margin-top:2px}
.mail-act{margin-top:32px;padding-top:24px;border-top:1px dashed rgba(22,67,79,.28)}
.mail-act .btn{width:100%}
.mail-next{display:block;margin-top:14px;font-size:14px;color:var(--ink-2);text-align:center}
.mail-next b{color:var(--ink);font-weight:600;margin-left:4px}
@media (min-width:1024px){
  .stripe{height:10px}
  .mail-in{padding:56px 56px 48px}
  .mail-head{margin-bottom:48px}
  .t-steps{grid-template-columns:repeat(3,1fr);grid-column-gap:40px;column-gap:40px}
  .t-steps li{grid-template-columns:1fr}
  .t-steps .n{grid-row:auto;margin-bottom:16px}
  .t-steps h3{font-size:20px}
  .mail-act{display:flex;align-items:center;margin-top:48px;padding-top:32px}
  .mail-act .btn{width:auto;padding:0 40px}
  .mail-next{margin:0 0 0 24px;text-align:left;font-size:15px}
}

/* ── 원장 인사: 편지 ─────────────────── */
.dir-side .greet{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:16px}
.director blockquote{margin:0}
.director blockquote p{font-size:26px;line-height:1.42;font-weight:700;letter-spacing:-.03em}
.dir-body{margin-top:28px;max-width:34em}
.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:3fr 9fr;grid-column-gap:48px;column-gap:48px}
  .dir-side .greet{font-size:17px}
  .director blockquote p{font-size:42px;line-height:1.36}
  .dir-body{margin-top:40px}
  .dir-body p{font-size:17px}
}

/* ── 교습비: 숫자는 고정폭 ─────────────── */
.fees td.fee strong{font-size:18px}

/* ── 셔틀 노선 ─────────────────────── */
.route-list{display:grid;grid-row-gap:12px;row-gap:12px}
.route{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 20px 18px}
.r-head{display:flex;align-items:baseline;justify-content:space-between}
.r-head b{font-size:16px;font-weight:700}
.r-head span{font-size:14px;color:var(--ink-2)}
.r-line{display:grid;margin-top:18px}
.r-line li{position:relative;padding-top:22px;font-size:14px;color:var(--ink-2);line-height:1.4}
.r-line li::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:var(--surface);box-sizing:border-box;z-index:1}
.r-line li::after{content:"";position:absolute;left:12px;right:0;top:5px;height:2px;background:rgba(22,67,79,.3)}
.r-line li:last-child::after{display:none}
.r-line li:first-child{color:var(--ink);font-weight:600}
.r-line li:first-child::before{background:var(--ink)}
.r-note{margin-top:16px;font-size:14px;color:var(--ink-2)}
.routes+.visit{padding-top:96px}
@media (min-width:1024px){
  .route-list{grid-template-columns:repeat(3,1fr);grid-gap:24px;gap:24px}
  .route{padding:28px}
  .routes+.visit{padding-top:128px}
}

/* ── 바닥글: 항구 잉크 ─────────────────── */
.foot{background:var(--ink);color:rgba(247,244,236,.72);border-top:0}
.foot strong{color:var(--bg)}