/* 하위 페이지 공통 모양 (홈 index.html 의 색·글꼴·펠트 질감을 그대로 따라요) */
@font-face { font-family:"Board"; src:url("/assets/Hakgyoansim_BoardmarkerR.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Nadeuri"; src:url("/assets/Hakgyoansim_NadeuriL.woff2") format("woff2"); font-display:swap; }
:root { --ink:#26324A; --or:#EC6A2C; --navy:#1E2C57; --gray:#7E7464; --paper:#FBF8F1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"Board","Malgun Gothic",sans-serif; color:var(--ink); background:#F8F2E7 url("/assets/paper.jpg"); line-height:1.7; font-size:18px; word-break:keep-all; overflow-wrap:break-word; }
a { color:inherit; }
img { max-width:100%; height:auto; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }

/* 펠트 카드 */
.felt { position:relative; background-color:var(--c, var(--paper)); box-shadow:3px 6px 14px rgba(40,25,10,.22); outline:6px solid var(--paper); outline-offset:-1px; border-radius:12px; }
.felt::before { content:""; position:absolute; inset:0; background:url("/assets/felt.png"); opacity:.45; pointer-events:none; border-radius:inherit; }
.felt > * { position:relative; }
.stitch::after { content:""; position:absolute; inset:9px; border:2px dashed rgba(255,255,255,.55); border-radius:inherit; pointer-events:none; }
.tape { display:inline-block; position:relative; background:var(--paper); padding:8px 24px; font-size:26px; transform:rotate(-1.2deg); box-shadow:2px 4px 8px rgba(40,25,10,.22); }
.tape::before, .tape::after { content:""; position:absolute; top:-11px; width:70px; height:24px; background:rgba(236,226,196,.85); }
.tape::before { left:-20px; transform:rotate(-32deg); } .tape::after { right:-20px; transform:rotate(32deg); }

/* 머리 */
header.top { position:sticky; top:0; z-index:10; background:rgba(248,242,231,.94); backdrop-filter:blur(6px); border-bottom:1px solid rgba(38,50,74,.08); }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:64px; max-width:1240px; }
header.top .logo img { height:40px; display:block; }
header.top nav { display:flex; align-items:center; gap:4px 18px; flex-wrap:wrap; justify-content:flex-end; }
header.top nav a { text-decoration:none; font-size:17px; white-space:nowrap; }
header.top nav a[aria-current="page"] { color:var(--or); }
header.top nav a.cta { background:var(--or); color:#fff; padding:7px 15px; border-radius:6px; }

/* 본문 */
.crumb { font-size:14px; color:var(--gray); margin:26px 0 0; }
.crumb ol { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:4px; }
.crumb li + li::before { content:"›"; margin:0 6px 0 2px; }
.crumb a { text-decoration:none; }
.pagehead { padding:18px 0 10px; }
.pagehead .kicker { color:var(--or); font-size:18px; }
.pagehead h1 { font-weight:normal; font-size:clamp(30px,4.2vw,46px); line-height:1.35; margin:6px 0 14px; }
.pagehead .lede { font-size:clamp(17px,1.6vw,20px); color:var(--ink); max-width:46em; margin:0; line-height:1.85; }
.updated { font-size:13.5px; color:var(--gray); margin-top:14px; }
main section { padding:38px 0; }
main h2 { font-weight:normal; margin:0 0 22px; }
main h3 { font-weight:normal; font-size:24px; margin:0 0 8px; }
main p { margin:0 0 14px; }
.muted { color:var(--gray); }
.note { font-size:14px; color:var(--gray); margin-top:12px; }

.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.card { padding:26px 26px 22px; }
.card .tag { color:var(--or); font-size:16px; }
.card h3 a { text-decoration:none; }
.card p { font-size:17px; }
.more { display:inline-block; margin-top:4px; color:var(--or); text-decoration:none; font-size:17px; }
.more::after { content:" →"; }

/* 사실 표 */
table.facts { width:100%; border-collapse:separate; border-spacing:0; background:var(--paper); border-radius:12px; overflow:hidden; box-shadow:1px 3px 10px rgba(40,25,10,.12); font-size:17px; }
table.facts caption { text-align:left; font-size:15px; color:var(--gray); padding:0 0 8px; }
table.facts th, table.facts td { text-align:left; padding:12px 16px; border-bottom:1px dashed rgba(38,50,74,.18); vertical-align:top; }
table.facts thead th { background:#F1E7D6; font-weight:normal; color:var(--gray); font-size:15px; }
table.facts tbody th { font-weight:normal; color:var(--or); white-space:nowrap; }
table.facts tr:last-child th, table.facts tr:last-child td { border-bottom:0; }
table.facts td.num, table.facts th.num { text-align:right; white-space:nowrap; }
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.facts.scores td:first-child { min-width:9em; } table.facts.scores thead th.num { white-space:nowrap; }
@media (max-width:860px) { table.facts.scores th, table.facts.scores td { padding:9px 7px; font-size:14px; } table.facts.scores thead th.num { white-space:normal; } }

/* 단계 */
ol.steps { list-style:none; padding:0; margin:0; display:grid; gap:18px; }
ol.steps li { display:grid; grid-template-columns:150px 1fr; gap:18px; padding:20px 22px; }
ol.steps .per { color:var(--or); font-size:17px; }
ol.steps .per b { display:block; font-weight:normal; font-size:26px; color:var(--ink); line-height:1.25; }
ol.steps .acts { color:var(--gray); font-size:15.5px; margin:0 0 6px; }
ol.steps p { margin:0; font-size:17px; }

/* 숫자 */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; }
.stat { padding:22px 16px; text-align:center; }
.stat b { display:block; font-weight:normal; font-size:clamp(26px,3vw,36px); color:var(--or); line-height:1.25; }
.stat span { display:block; font-size:15px; color:var(--gray); margin-top:6px; }

/* 학생 말 */
.quotes { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.quote { margin:0; padding:20px 20px 16px; border-radius:18px; font-family:"Nadeuri","Board",sans-serif; font-size:20px; line-height:1.55; }
.quote figcaption { font-family:"Board",sans-serif; font-size:13.5px; color:var(--gray); margin-top:10px; }

/* 사진 */
.photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px; }
.photos figure { margin:0; padding:10px 10px 8px; background:var(--paper); box-shadow:2px 5px 12px rgba(40,25,10,.2); transform:rotate(var(--r,0deg)); }
.photos img { display:block; width:100%; height:200px; object-fit:cover; }
.photos figcaption { font-size:15px; text-align:center; margin-top:6px; }

/* 선생님 */
.team { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px; }
.mem { padding:20px 18px 18px; text-align:center; }
.mem img { width:110px; height:110px; object-fit:contain; display:block; margin:0 auto 6px; }
.mem h3 { font-size:23px; margin:0; }
.mem .role { color:var(--or); font-size:15px; }
.mem ul { list-style:none; padding:10px 0 0; margin:10px 0 0; border-top:1px dashed rgba(38,50,74,.25); font-size:14.5px; line-height:1.55; }
.mem ul li + li { margin-top:8px; }

/* 자주 묻는 질문 */
.qa { display:grid; gap:12px; }
.qa div { background:var(--paper); border-radius:12px; box-shadow:1px 3px 8px rgba(40,25,10,.12); padding:16px 22px; }
.qa h3 { font-size:20px; margin:0 0 6px; }
.qa p { margin:0; color:var(--gray); font-size:17px; }

/* 버튼과 신청 */
.btn { display:inline-block; text-decoration:none; background:var(--or); color:#fff; padding:13px 24px; border-radius:8px; font-size:19px; box-shadow:2px 4px 0 rgba(40,25,10,.2); }
.btn.ghost { background:var(--paper); color:var(--ink); }
.cta { padding:40px 32px; text-align:center; --c:#1E2C57; color:#fff; }
.cta h2 { margin-bottom:10px; }
.cta p { color:#C9D3E6; margin:0 auto; max-width:40em; }
.cta .ways { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:22px; }
.cta .ways a { text-decoration:none; background:var(--paper); color:var(--ink); padding:13px 20px; border-radius:10px; font-size:18px; box-shadow:2px 4px 0 rgba(0,0,0,.2); }
.cta .ways a.main { background:var(--or); color:#fff; }
.related { display:flex; flex-wrap:wrap; gap:10px; }
.related a { text-decoration:none; background:var(--paper); padding:8px 16px; border-radius:20px; box-shadow:1px 2px 5px rgba(40,25,10,.18); font-size:16px; }

/* 꼬리 */
footer { padding:40px 0 60px; text-align:center; color:var(--gray); font-size:15px; }
footer img { height:46px; opacity:.9; }
footer .ftag b { display:block; font-weight:normal; font-size:17px; color:var(--ink); }
footer nav.sitemap { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; margin:18px auto 0; max-width:820px; }
footer nav.sitemap a { text-decoration:none; color:var(--ink); font-size:15px; }
footer .biz { margin:16px auto 0; max-width:760px; font-size:13.5px; line-height:1.9; }
footer .biz span { display:inline-block; margin:0 8px; }
footer .biz a { color:inherit; text-decoration:none; }
footer .copy { margin-top:10px; font-size:12.5px; opacity:.8; }

@media (max-width:860px) {
  body { font-size:17px; }
  header.top .wrap { flex-direction:column; align-items:stretch; gap:6px; padding-top:8px; padding-bottom:8px; }
  header.top .logo { align-self:center; }
  header.top nav { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap:16px; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  header.top nav::-webkit-scrollbar { display:none; }
  header.top nav a { font-size:16px; }
  .grid2, .grid3 { grid-template-columns:1fr; }
  ol.steps li { grid-template-columns:1fr; gap:6px; }
  .card { padding:22px 20px 18px; }
  .cta { padding:30px 18px; }
  table.facts { font-size:15.5px; } table.facts th, table.facts td { padding:10px 12px; }
  footer .biz span { display:block; margin:0; } footer .biz br { display:none; }
}