/* 학원 시안 공용 뼈대 — 업종마다 tokens(:root)와 세계(world.css)만 바꾼다
 * 숫자 정본: 02_학습/CARD_SECTION_STANDARD.md v1.1 · 카톡 인앱(P25): dvh · flex gap · :has 안 씀 (grid gap 은 가능)
 * 굵기 3단계: 400 · 600 · 제목 700 */
:root{
  --bg:#F7F5F0; --surface:#FFFFFF; --ink:#15263D; --ink-2:#4F5968; --line:rgba(21,38,61,.12); --accent:#C8961A;
  --on-ink:#FFFFFF;
  --pad:20px; --max:1168px;
  --sec:104px; --sec-head:32px;
  --card-pad:20px; --card-gap:12px;
  --r-card:12px; --r-btn:8px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --bar-h:64px;
}
@media (min-width:1024px){ :root{ --pad:40px; --sec:144px; --sec-head:48px; --card-pad:32px; --card-gap:24px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;letter-spacing:-.01em;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:var(--sec) 0 0}
.sec-label{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);margin-bottom:12px}
.sec-title{font-size:26px;line-height:1.3;font-weight:700;letter-spacing:-.025em}
.sec-head{margin-bottom:var(--sec-head)}
.sec-lead{margin-top:12px;color:var(--ink-2);max-width:34em}
@media (min-width:1024px){ .sec-title{font-size:36px;line-height:1.28} }

/* 버튼 — 누름 scale(.96) 160ms */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:var(--r-btn);
  font-size:16px;font-weight:600;letter-spacing:-.01em;transition:transform 160ms var(--ease-out),background-color 200ms}
.btn:active{transform:scale(.96)}
.btn-main{background:var(--ink);color:var(--on-ink)}
.btn-line{border:1px solid var(--line);color:var(--ink);background:transparent}
.link-arrow{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}
.link-arrow svg{margin-left:6px;transition:transform 200ms var(--ease-out)}
.link-arrow:hover svg{transform:translateX(3px)}

/* 머리 막대 — backdrop-filter 없음 */
.top{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid transparent;transition:border-color 200ms}
.top.is-scrolled{border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:center;font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand svg{margin-right:8px}
.top-nav{display:none}
.top-call{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--ink-2)}
.top-call svg{margin-right:6px}
@media (min-width:1024px){
  .top-in{height:72px}
  .top-nav{display:flex;align-items:center}
  .top-nav a{margin-left:32px;font-size:15px;color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center}
  .top-nav a:hover{color:var(--ink)}
  .top-nav .btn{min-height:44px;padding:0 20px;font-size:15px;color:var(--on-ink);margin-left:32px}
  .top-call{display:none}
}

/* 폰 아래 고정 상담 막대 — 전화 · 카카오 · 네이버 예약 */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr 1.35fr;grid-gap:8px;gap:8px}
.bar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:var(--r-btn);font-size:15px;font-weight:600;
  transition:transform 160ms var(--ease-out)}
.bar a:active{transform:scale(.96)}
.bar a svg{margin-right:6px;flex:none}
.bar .b-sub{border:1px solid var(--line)}
.bar .b-main{background:var(--ink);color:var(--on-ink)}
body{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
@media (min-width:1024px){
  .bar{left:auto;right:32px;bottom:32px;width:auto;border:1px solid var(--line);border-radius:12px;padding:8px;grid-template-columns:auto auto auto}
  .bar a{padding:0 18px;min-height:44px;font-size:14px}
  body{padding-bottom:0}
}

/* 교습비 표 */
.fees{width:100%;border-collapse:collapse;font-size:15px}
.fees th,.fees td{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.fees thead th{font-size:13px;font-weight:600;color:var(--ink-2);padding-top:0}
.fees td.fee,.fees th.fee{text-align:right;white-space:nowrap}
.fees td.fee strong{font-size:18px;font-weight:700}
.fees .course{font-weight:600}
.fees .meta{display:block;color:var(--ink-2);font-size:14px;margin-top:2px}
.fee-note{margin-top:16px;font-size:14px;color:var(--ink-2)}

/* 자주 묻는 질문 — details 기본 동작 · 화살표만 돌림 */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;padding:20px 0;min-height:44px;
  font-size:17px;font-weight:600;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;margin:3px 0 0 16px;transition:transform 240ms var(--ease-out);color:var(--ink-2)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .a{padding:0 0 24px;color:var(--ink-2);max-width:40em}

/* 오시는 길 */
.visit dl{display:grid;grid-template-columns:88px 1fr;grid-row-gap:16px;row-gap:16px;font-size:15px}
.visit dt{color:var(--ink-2)}
.visit dd{font-weight:600;line-height:1.55}
.visit dd span{display:block;font-weight:400;color:var(--ink-2);font-size:14px}
.map-links{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-top:32px}
.map-links .btn{min-height:48px;font-size:15px;padding:0 12px}

/* 끝 상담 */
.cta-end{padding:var(--sec) 0}
.cta-end .wrap>div{border-top:1px solid var(--line);padding-top:48px}
.cta-end h2{font-size:26px;line-height:1.3;font-weight:700;letter-spacing:-.025em}
.cta-end p{margin-top:12px;color:var(--ink-2)}
.cta-end .btn{margin-top:32px;width:100%}
@media (min-width:1024px){ .cta-end h2{font-size:36px} .cta-end .btn{width:auto;padding:0 40px} .cta-end .wrap>div{padding-top:64px} }

.foot{padding:40px 0 48px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);line-height:1.8}
.foot strong{color:var(--ink);font-weight:600}

/* 도착하면 재생 (M-H13) — html.fx 일 때만 숨김 */
.fx .ar-item{opacity:0;transform:translate3d(0,16px,0);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.fx .ar-item.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ *{transition-duration:1ms!important;animation-duration:1ms!important} }