/* ══════════════════════════════════════════════════════════
 * L5 한뼘학원 — 조판
 *
 * ★ 브랜드 시트(2팀) 값 그대로. ☠ 여기 색을 «지어내지» 않는다.
 *   바탕 #F2F6FA — 라인에서 «처음으로 파랑기가 도는» 바탕이다
 *   강조 #1D6FB8 (바탕 위 4.81 · 흰 글자 얹으면 5.23) · 보조 노랑 #F5B841
 * ☠☠ **노랑을 «글자색»으로 쓰지 않는다 — 바탕 위 1.64 다(2팀 실측).** 면으로만 쓴다.
 * ☠ 「합격·향상」을 붉은색으로 강조하지 않는다 — 과장으로 읽히는 색이다.
 *
 * ☠ **가장 작은 글씨 14px.** 한글 12px 하한보다 «올려» 잡는다 — 부모 세대가 읽는 화면이다.
 *   교습비·시간표는 «16px 이상». 표에서 작아지기 쉬운 자리라 따로 못 박는다.
 * ══════════════════════════════════════════════════════════ */

.hp-l5{
  --hp-paper:#F2F6FA; --hp-surface:#FFFFFF;
  --hp-ink:#141A21; --hp-ink-2:#3A4652; --hp-ink-3:#5A6875;
  --hp-accent:#1D6FB8; --hp-accent-deep:#155589;
  --hp-warm:#F5B841;                     /* ☠ 면으로만 */
  --hp-rule:#D6E0EA;                     /* 장식 구분선 */
  --hp-field:#6E8798;                    /* 입력칸·단추 테두리 — 선이 «두 벌»이다 */
  --hp-radius:12px;
}
.hp-l5{background:var(--hp-paper); color:var(--hp-ink-2);
  font-family:"프리텐다드",Pretendard,-apple-system,sans-serif; font-size:16px; line-height:1.75; word-break:keep-all;}
.hp-l5 h1,.hp-l5 h2,.hp-l5 h3{font-family:"Sunflower","프리텐다드",sans-serif; color:var(--hp-ink); text-wrap:balance;}
.hp-l5 h2{font-size:clamp(22px,3.4vw,30px); line-height:1.3; margin:0 0 12px;}
.hp-l5 h3{font-size:18px; margin:0 0 8px;}
.hp-l5 a{color:var(--hp-accent-deep);}

/* ── 표 (교습비·시간표) — ☠ 16px 아래로 내리지 않는다 ── */
.hp-tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hp-rule);
  border-radius:var(--hp-radius); background:var(--hp-surface);}
.hp-fee, .hp-sched{width:100%; min-width:420px; border-collapse:collapse; font-size:16px;}
.hp-fee th,.hp-sched th{text-align:left; padding:13px 16px; font-family:"Sunflower",sans-serif; font-weight:700;
  font-size:15px; color:var(--hp-accent-deep); background:#E8F0F7; border-bottom:1px solid var(--hp-rule); white-space:nowrap;}
.hp-fee td,.hp-sched td{padding:13px 16px; border-bottom:1px solid var(--hp-rule); color:var(--hp-ink-2);}
.hp-fee tr:last-child td,.hp-sched tr:last-child td{border-bottom:0;}
.hp-fee .num,.hp-sched .num{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--hp-ink); font-weight:600;}
.hp-note{font-size:14px; color:var(--hp-ink-3); margin:10px 0 0;}

/* ── 카드 격자 — auto-fit 이라 «개수»를 감당한다(고객이 늘려도 안 깨진다) ── */
.hp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;}
.hp-card{background:var(--hp-surface); border:1px solid var(--hp-rule); border-radius:var(--hp-radius); padding:18px 20px;}
.hp-card h3{margin:0 0 10px;}
.hp-kv{display:flex; gap:8px; margin:0 0 6px; font-size:15px;}
.hp-kv .k{flex:0 0 52px; color:var(--hp-ink-3);}
.hp-kv .v{color:var(--hp-ink); font-weight:600;}
.hp-desc{margin:8px 0 0; font-size:15px; color:var(--hp-ink-2);}
.hp-face img{width:100%; height:auto; border-radius:10px; display:block; margin-bottom:12px;}
.hp-reviews blockquote{margin:0 0 10px; font-size:15.5px; color:var(--hp-ink-2);}
.hp-reviews figcaption{font-size:14px; color:var(--hp-ink-3);}
/* ☠ 노랑은 «면»으로만 — 글자로 쓰면 1.64 다 */
.hp-tag{display:inline-block; background:var(--hp-warm); color:#2A2410; font-size:14px;
  padding:2px 9px; border-radius:100px; margin-left:6px;}

.hp-shuttle{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
.hp-shuttle li{background:var(--hp-surface); border:1px solid var(--hp-rule); border-radius:10px; padding:11px 14px; font-size:15px;}

/* ── ☠ 학원법 §15 필수 표기 ── */
.hp-legal{background:var(--hp-surface); border:1px solid var(--hp-rule); border-radius:var(--hp-radius); padding:18px 20px;}
.hp-legal h3{font-size:15px; margin:0 0 10px; color:var(--hp-ink-3);}
.hp-legal dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:15px;}
.hp-legal dt{color:var(--hp-ink-3); white-space:nowrap;}
.hp-legal dd{margin:0; color:var(--hp-ink);}
.hp-legal-warn{margin:12px 0 0; padding:10px 12px; background:#FDECEA; border-radius:8px; font-size:14px; color:#7A1C15;}

/* ── 폼 ── */
.hp-formwrap{background:var(--hp-surface); border:1px solid var(--hp-rule); border-radius:16px; padding:24px;}
.hp-formwrap .hp-lead{font-size:15px; color:var(--hp-ink-3); margin:0 0 16px;}
.hp-row{margin:0 0 14px;}
.hp-row label{display:block; font-size:15px; font-weight:600; color:var(--hp-ink); margin-bottom:6px;}
.hp-opt{font-weight:400; color:var(--hp-ink-3); font-size:14px;}
.hp-req{color:var(--hp-accent-deep);}
.hp-row input,.hp-row select,.hp-row textarea{width:100%; box-sizing:border-box; font:inherit; font-size:16px;
  padding:12px 14px; border:1px solid var(--hp-field); border-radius:10px; background:#fff; color:var(--hp-ink);}
/* ⚠ 16px 아래로 내리지 않는다 — iOS 가 입력칸을 확대한다 */
.hp-row input:focus,.hp-row select:focus,.hp-row textarea:focus{outline:2px solid var(--hp-accent); outline-offset:1px;}
.hp-row input.err{border-color:#b32d2e;}
.hp-agree{display:flex; gap:9px; align-items:flex-start; font-size:14.5px; color:var(--hp-ink-2); margin:4px 0 16px;}
.hp-agree input{margin-top:3px; width:18px; height:18px; flex:0 0 auto;}
/* ★ 「전문 보기」는 «단추가 아니라 글줄»이다(동의 서식 규칙) */
.hp-lk{background:none; border:0; padding:0; font:inherit; color:var(--hp-accent-deep); text-decoration:underline; cursor:pointer;}
.hp-pot{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important;}
.hp-submit{width:100%; min-height:52px; font:inherit; font-size:17px; font-weight:700;
  background:var(--hp-accent); color:#fff; border:0; border-radius:12px; cursor:pointer;}
.hp-submit:hover{background:var(--hp-accent-deep);}
.hp-ok{display:none; margin:12px 0 0; font-size:15px; color:var(--hp-accent-deep);}
.hp-ok small{display:block; color:var(--hp-ink-3); font-size:14px; margin-top:3px;}
.hp-formwrap.is-done form>*:not(.hp-ok){display:none;}
.hp-formwrap.is-done .hp-ok{display:block;}

/* ── 하단 고정 단추 — ★ 모바일에서만. 데스크탑은 화면이 넓어 필요 없다 ── */
.hp-dock{display:none;}
@media(max-width:767px){
  .hp-dock{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; gap:8px; padding:10px 12px;
    background:rgba(255,255,255,.96); border-top:1px solid var(--hp-rule);}
  /* ☠ `display:flex` 는 자식 «사이의 공백»을 삼킨다 — 「전화 02-000-0000」이
     「전화02-000-0000」으로 붙어 나왔다. `gap` 으로 되돌린다(공백 문자로 때우지 않는다). */
  .hp-dock a{flex:1; display:flex; align-items:center; justify-content:center; gap:5px; min-height:48px;
    border-radius:10px; font-size:16px; font-weight:700; text-decoration:none;}
  /* ☠☠ `.hp-l5 a`(클래스1+요소1) 가 `.hp-dock-cta`(클래스1) 를 «이긴다» —
     글자색이 파랑으로 되돌아가 파란 바탕에 파란 글씨(1.49:1)가 됐다. 실측으로 잡혔다.
     ★ 이 판에서 «세 번째» 같은 함정이다(hp-jump · hp-btn · 여기). 링크에 색을 줄 때는
       반드시 `a.` 를 붙여 자릿수를 올린다. */
  .hp-l5 .hp-dock a.hp-dock-tel{border:1px solid var(--hp-field); color:var(--hp-ink);}
  .hp-l5 .hp-dock a.hp-dock-cta{background:var(--hp-accent); color:#fff;}
  /* ⚠ 고정 단추가 마지막 구획을 가린다 — 그만큼 아래를 비운다 */
  .hp-l5 body,.hp-l5{padding-bottom:0;}
  .hp-l5 footer{padding-bottom:84px;}
}

/* ── 붙여넣은 카카오 지도 — ☠ 함정 «셋»(L1 에서 실측) ── */
.ecomap{max-width:100%;}
.ecomap img{max-width:100%; height:auto;}
/* ☠ 출처 줄에 인라인 width:482px 가 박혀 있다 — !important 라야 이긴다. box-sizing 도 함께 */
.ecomap .hide{display:block; width:auto !important; max-width:100%; box-sizing:border-box;}
.ecomap>a{display:block; line-height:0;}

@media(prefers-reduced-motion:reduce){.hp-l5 *{animation:none!important; transition:none!important;}}

/* ── 1팀 문안(2026-09-04)으로 들어온 것들 ───────────────────────── */

/* 칸 밑 한 줄 안내 — 「별칭도 됩니다」가 여기 붙는다.
   ☠ 이 줄을 «작고 흐리게» 만들지 말 것. 부모가 이름을 적기 전에 «읽어야» 하는 줄이다. */
.hp-hint{margin:6px 0 0; font-size:14px; line-height:1.55; color:var(--hp-ink-3);}

/* 짧은 폼의 단추는 «링크»다(자바스크립트 없이도 내려가야 하니까)
   ☠☠ `.hp-l5 a`(0,1,1)가 `.hp-submit`(0,1,0)을 «이긴다» — 글자색이 파랑으로 되돌아간다.
      그래서 여기서만 `.hp-l5 a.hp-jump`(0,2,1)로 올려 쓴다. 클래스만 늘리면 안 먹는다. */
.hp-l5 a.hp-jump{display:block; text-align:center; text-decoration:none; color:#fff;
  padding:15px 16px; line-height:1.35;}
.hp-l5 a.hp-jump:hover{color:#fff;}

/* 동의 상자 — 문안은 1팀 것. ☠ 「전문 보기」는 글줄(.hp-lk)이다 */
.hp-agree-t{font-weight:600; color:var(--hp-ink);}
.hp-agree-d{display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 14px;
  margin:10px 0 0; padding:12px 14px; font-size:14px; line-height:1.6;
  background:#EDF3F8; border-radius:10px;}
.hp-agree-d dt{color:var(--hp-ink-3); white-space:nowrap;}
.hp-agree-d dd{margin:0; color:var(--hp-ink-2);}
/* ★ 만 14세 미만 안내 — 노랑은 «면»으로만(브랜드 규칙). 글자는 잉크색 그대로 */
.hp-agree-n{margin:10px 0 0; padding:11px 13px; font-size:14px; line-height:1.65;
  color:var(--hp-ink-2); background:#FDF4DF; border-left:3px solid var(--hp-warm); border-radius:0 8px 8px 0;}

/* 관심 있는 반 — 여러 개 고르기 */
.hp-lb{display:block; margin-bottom:8px; font-weight:600; color:var(--hp-ink);}
.hp-checks{display:flex; flex-wrap:wrap; gap:8px;}
.hp-chk{display:flex; align-items:center; gap:7px; padding:9px 13px; font-size:15px;
  background:var(--hp-surface); border:1px solid var(--hp-field); border-radius:999px; cursor:pointer;}
.hp-chk input{width:17px; height:17px; margin:0; flex:0 0 auto;}
.hp-chk:has(input:checked){background:#E8F0F7; border-color:var(--hp-accent); color:var(--hp-accent-deep);}
/* :has 를 모르는 브라우저를 위해 «테두리는 항상» 보이게 해 두었다 — 위 규칙은 덤이다 */

/* 신뢰 셋 — 말이 아니라 절차 */
.hp-trust{list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
.hp-trust li{padding:20px; background:var(--hp-surface); border:1px solid var(--hp-rule);
  border-radius:var(--hp-radius);}
.hp-trust b{display:block; margin-bottom:7px; font-size:17px; color:var(--hp-accent-deep);}
.hp-trust span{display:block; font-size:15px; line-height:1.7; color:var(--hp-ink-2);}

/* ★ 리포트 견본 — 가장 넓은 구획 */
.hp-report{margin:0; max-width:520px;}
.hp-report-card{padding:22px 22px 24px; background:var(--hp-surface);
  border:1px solid var(--hp-rule); border-radius:var(--hp-radius);
  box-shadow:0 1px 3px rgba(20,26,33,.05);}
.hp-report-h{margin:0 0 16px; padding-bottom:13px; font-size:15px; font-weight:700;
  color:var(--hp-accent-deep); border-bottom:1px solid var(--hp-rule);}
.hp-report dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px 16px; margin:0;}
.hp-report dt{font-size:14px; color:var(--hp-ink-3); white-space:nowrap;}
.hp-report dd{margin:0; font-size:15px; color:var(--hp-ink);}
.hp-report-t{margin:18px 0 7px; font-size:14px; color:var(--hp-ink-3);}
.hp-report blockquote{margin:0; padding:13px 15px; font-size:15px; line-height:1.7;
  color:var(--hp-ink-2); background:#EDF3F8; border-radius:10px;}
/* ☠☠ 이 줄이 «법»이다. 흐리게 만들지 말 것 — 실제 기록으로 읽히면 과장광고가 된다 */
.hp-report figcaption{margin:12px 0 0; padding:9px 12px; font-size:14px; line-height:1.6;
  color:var(--hp-ink-2); background:#FDF4DF; border-left:3px solid var(--hp-warm);
  border-radius:0 8px 8px 0;}

/* 선생님 한 마디 — 학력 대신 «말»을 보여 주는 자리 */
.hp-word{margin:12px 0 0; padding:11px 14px; font-size:15px; line-height:1.7;
  color:var(--hp-ink-2); background:#EDF3F8; border-radius:10px;}

/* ══ 쪽 조판 — 빌더 트리의 `_cssClasses` 와 «짝»이다 ═══════════════════
   ☠ 이름을 전부 `hp-` 로 시작한다. `.top` `.wrap` 같은 맨 이름은 워드프레스가 몸통에 붙이는
     클래스(`.home` `.blog` `.page` …)나 테마 것과 «부딪친다». 한 번 부딪치면 화면이 통째로 무너진다.
   ⚠ 트리에서 클래스 이름을 바꾸면 여기도 바꿔야 한다. 한쪽만 고치면 «조용히» 세로로 쌓인다. */
/* ☠☠ Bricks 의 `section`·`div` 는 기본이 «flex» 다(bricks-gotchas ⑭).
   그래서 안쪽 상자가 `min-width:auto` 가 되어 «내용 폭»만큼 벌어진다 —
   375 폭에서 교습비 표(420) 때문에 구획이 통째로 438 로 넘쳤다. 실측으로 잡혔다.
   ★ `overflow-x:auto` 를 표에 걸어 둬도 «부모가 안 좁아지면» 소용이 없다.
     가로 스크롤은 «좁아진 상자» 안에서만 생긴다.
   ⚠ 상단 바는 «일부러» flex 다 — 선택자가 한 자리 길어 그대로 이긴다. */
.hp-l5 .hp-sec{display:block; padding:60px 20px;}
.hp-l5 .hp-wrap{display:block; min-width:0;}
.hp-l5 .hp-sec.alt{background:var(--hp-surface);}
.hp-l5 .hp-wrap{max-width:1060px; margin:0 auto;}  /* 위에서 display·min-width 를 이미 잡았다 */
.hp-l5 .hp-narrow{max-width:720px;}

/* 상단 바 */
.hp-l5 .hp-top{padding:11px 20px; background:var(--hp-surface); border-bottom:1px solid var(--hp-rule);}
.hp-l5 .hp-top .hp-wrap{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.hp-l5 .hp-bi{font-size:17px; font-weight:700; color:var(--hp-ink);}
/* ☠ 전화번호는 «끊기면 안 된다» — 375 에서 「02-000-」/「0000」 두 줄로 잘렸다.
   전화번호가 두 줄이면 «다른 번호처럼» 읽힌다. */
.hp-l5 .hp-toptel{font-size:15px; font-weight:600; color:var(--hp-accent-deep);
  text-decoration:none; white-space:nowrap;}

/* 첫 화면 */
.hp-l5 .hp-hero{padding:52px 20px 46px;}
.hp-l5 .hp-eyebrow{display:inline-block; margin-bottom:16px; padding:6px 13px; font-size:14px;
  font-weight:600; color:var(--hp-accent-deep); background:#E8F0F7; border-radius:999px;}
.hp-l5 .hp-h1{margin:0 0 18px; font-size:44px; line-height:1.24; letter-spacing:-.02em;
  font-weight:800; color:var(--hp-ink); word-break:keep-all;}
.hp-l5 .hp-sub{margin:0 0 26px; font-size:18px; line-height:1.75; color:var(--hp-ink-2); word-break:keep-all;}
.hp-l5 .hp-btns{display:flex; flex-wrap:wrap; gap:11px;}
/* ☠ `.hp-l5 a`(0,1,1) 가 `.hp-btn`(0,1,0) 을 이긴다 — 글자색이 파랑으로 돌아간다. 특정성을 올린다 */
.hp-l5 a.hp-btn{display:inline-block; padding:15px 26px; font-size:17px; font-weight:700;
  color:#fff; background:var(--hp-accent); border-radius:12px; text-decoration:none;}
.hp-l5 a.hp-btn:hover{background:var(--hp-accent-deep); color:#fff;}
.hp-l5 a.hp-btn2{display:inline-block; padding:15px 26px; font-size:17px; font-weight:700;
  color:var(--hp-accent-deep); background:var(--hp-surface); border:1px solid var(--hp-field);
  border-radius:12px; text-decoration:none;}
.hp-l5 a.hp-btn2:hover{background:#E8F0F7; color:var(--hp-accent-deep);}

/* 구획 제목 */
.hp-l5 .hp-h2{margin:0 0 10px; font-size:29px; line-height:1.35; font-weight:800;
  color:var(--hp-ink); letter-spacing:-.02em; word-break:keep-all;}
.hp-l5 .hp-sublead{margin:0 0 26px; font-size:16px; line-height:1.7; color:var(--hp-ink-3);}

/* ★ 리드 — 「인정 → 빈틈 → 위협 → 우리」. 볼드만 이어 읽어도 이야기가 간다(1팀) */
.hp-l5 .hp-story p{margin:0 0 17px; font-size:17px; line-height:1.9; color:var(--hp-ink-2); word-break:keep-all;}
.hp-l5 .hp-story p:last-child{margin-bottom:0;}
.hp-l5 .hp-story b{color:var(--hp-ink); font-weight:700;}

.hp-l5 .hp-two{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.hp-l5 .hp-addr{margin:14px 0 0; font-size:16px; line-height:1.8; color:var(--hp-ink-2);}

/* 맺음 — 면책 한 줄은 «흐리게 만들지 않는다». 과장으로 읽히는 것을 막는 줄이다 */
.hp-l5 .hp-fine{margin:22px 0 0; font-size:14px; line-height:1.7; color:var(--hp-ink-3);}

@media(max-width:767px){
  .hp-l5 .hp-sec{padding:42px 16px;}
  .hp-l5 .hp-hero{padding:34px 16px 30px;}
  .hp-l5 .hp-h1{font-size:32px;}
  .hp-l5 .hp-h2{font-size:24px;}
  .hp-l5 .hp-sub{font-size:16px;}
  .hp-l5 .hp-story p{font-size:16px;}
  .hp-l5 .hp-btns{flex-direction:column;}
  .hp-l5 a.hp-btn,.hp-l5 a.hp-btn2{text-align:center;}
  /* 하단 고정 단추에 가리지 않게 바닥을 비운다 */
  .hp-l5 .hp-sec:last-of-type{padding-bottom:96px;}
}

/* 바닥 */
.hp-l5 .hp-foot{padding:26px 20px 34px; background:var(--hp-ink); color:#C6D2DC;}
.hp-l5 .hp-foot p{margin:0 0 8px; font-size:14px; line-height:1.75;}
.hp-l5 .hp-foot p:last-child{margin-bottom:0;}
.hp-l5 .hp-foot .hp-foot-b b{color:#fff;}
/* ☠ 어두운 바닥에서는 링크 색이 «따로»다 — 밝은 판 잉크색(#155589)을 그대로 쓰면 안 보인다 */
.hp-l5 .hp-foot a,.hp-l5 .hp-foot .pv-open{color:#9FC6E6; font-size:14px;}
@media(max-width:767px){ .hp-l5 .hp-foot{padding-bottom:96px;} }