/* ============================================================
   서울·경기 SAT·IB 학원 디렉토리 — 스타일시스템
   컨셉: "성적표(Score Report)" — 시험 준비 학원 정보를 다루는
   사이트이므로, 실제 SAT/IB 성적표의 얇은 罫선·모노스페이스 숫자·
   구간 뱃지 모티프를 절제된 형태로 차용한다.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root{
  /* Color */
  --navy-900: #0B1B33;
  --navy-800: #142850;
  --navy-600: #2C4270;
  --coral-500: #FF5A36;
  --coral-600: #E64420;
  --gold-500: #F5A623;
  --bg: #F6F7FB;
  --card: #FFFFFF;
  --line: #E4E7EE;
  --text-900: #171B26;
  --text-600: #565E70;
  --text-400: #8890A0;

  /* Type */
  --font-display: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;

  --radius: 14px;
  --max-w: 480px; /* mobile-first canvas */
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text-900);
  font-family: var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  padding-bottom: 64px;
}

/* ---------- Top App Bar ---------- */
.topbar{
  position: sticky; top:0; z-index: 40;
  background: var(--navy-900);
  color:#fff;
  padding: 12px 18px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar .brand{
  display:flex; align-items:center; gap:8px;
  font-weight:800; font-size:15px; letter-spacing:-.01em;
}
.topbar .brand .dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--coral-500);
  box-shadow: 0 0 0 3px rgba(255,90,54,.25);
}
.topbar nav{ display:flex; gap:14px; font-size:12.5px; color:rgba(255,255,255,.7); }
.topbar nav a.active{ color:#fff; font-weight:700; }

/* ---------- Hero / Score band ---------- */
.hero{
  background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-800) 62%, var(--navy-600) 100%);
  color:#fff;
  padding: 28px 20px 22px;
  position: relative;
  overflow: hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:auto -20% -60% -20%;
  height: 180px;
  background: radial-gradient(closest-side, rgba(255,90,54,.25), transparent 70%);
}
.hero .eyebrow{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em;
  color: var(--coral-500);
  text-transform: uppercase;
  margin-bottom:10px;
}
.hero h1{
  font-size: 25px; font-weight: 800; letter-spacing:-.02em;
  line-height:1.35;
}
.hero p.sub{
  margin-top:10px; font-size:13.5px; color: rgba(255,255,255,.68);
  max-width: 34ch;
}

/* score-report stat rule */
.scoreline{
  margin-top:18px;
  display:grid; grid-template-columns: repeat(3,1fr);
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  position: relative; z-index:1;
}
.scoreline div{
  padding: 10px 4px;
  text-align:center;
  border-left: 1px solid rgba(255,255,255,.12);
}
.scoreline div:first-child{ border-left:none; }
.scoreline b{
  display:block; font-family: var(--font-mono); font-size:18px; font-weight:700;
}
.scoreline span{ font-size:10.5px; color: rgba(255,255,255,.55); }

/* ---------- Section headers ---------- */
.section{ padding: 22px 18px 6px; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: 12px;
}
.section-head h2{
  font-size:16.5px; font-weight:800; letter-spacing:-.01em;
}
.section-head .count{
  font-family: var(--font-mono); font-size:11.5px; color: var(--text-400);
}
.section-note{
  font-size:12px; color: var(--text-600);
  background: #FFF6F3; border:1px solid #FFE0D5; color:#9A4326;
  padding:10px 12px; border-radius:10px; margin: 0 18px 8px;
}

/* ---------- Filter chips ---------- */
.filters{
  display:flex; gap:8px; overflow-x:auto; padding: 4px 18px 14px;
  scrollbar-width:none;
}
.filters::-webkit-scrollbar{ display:none; }
.chip{
  flex: 0 0 auto;
  font-size:12.5px; font-weight:600;
  padding: 7px 13px; border-radius: 999px;
  background: var(--card); border:1px solid var(--line); color: var(--text-600);
  white-space:nowrap;
}
.chip.is-active{
  background: var(--navy-900); color:#fff; border-color: var(--navy-900);
}

/* ---------- Academy card ---------- */
.card-list{ padding: 0 18px; display:flex; flex-direction:column; gap:10px; }
.acard{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px;
  display:flex; gap:12px;
}
.acard .idx{
  flex: 0 0 30px;
  font-family: var(--font-mono);
  font-size:12px; font-weight:700; color: var(--text-400);
  padding-top:2px;
}
.acard .body{ flex:1; min-width:0; }
.acard .row1{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.acard h3{
  font-size:14.5px; font-weight:800; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acard .area{
  font-size:11px; color: var(--text-400); font-family: var(--font-mono);
  flex:0 0 auto;
}
.acard .desc{
  margin-top:4px; font-size:12.5px; color: var(--text-600); line-height:1.5;
}
.acard .tags{ margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.acard .tag{
  font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px;
  background:#EEF2FA; color: var(--navy-600);
}
.acard .tag.math{ background:#FFF1EC; color:var(--coral-600); }
.acard .tag.ib{ background:#FFF7E8; color:#9A6B0E; }
.acard .link{
  margin-top:9px; display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:700; color: var(--coral-600);
}
.acard .link:after{ content:"→"; }

/* ---------- Guide / prose blocks ---------- */
.prose{ padding: 4px 18px 8px; font-size:13.5px; color: var(--text-600); }
.prose h2{ font-size:16px; font-weight:800; color:var(--text-900); margin: 18px 0 8px; }
.prose h3{ font-size:14px; font-weight:800; color:var(--text-900); margin: 14px 0 6px; }
.prose ol, .prose ul{ padding-left: 18px; list-style: decimal; }
.prose ul{ list-style: disc; }
.prose li{ margin: 4px 0; }
.prose .callout{
  background: var(--card); border:1px solid var(--line); border-left:3px solid var(--coral-500);
  border-radius: 10px; padding:12px 14px; margin: 12px 0; font-size:12.8px;
}

/* ---------- Breadcrumb ---------- */
.crumb{
  padding: 10px 18px 0; font-size:11.5px; color: var(--text-400); font-family: var(--font-mono);
}
.crumb a{ color: var(--text-600); }

/* ---------- Footer ---------- */
.footer{
  margin-top: 28px; padding: 22px 18px 90px;
  border-top:1px solid var(--line);
  font-size:11.5px; color: var(--text-400);
}
.footer .fnav{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:12px; }
.footer .fnav a{ color: var(--text-600); font-weight:600; font-size:12px; }

/* ---------- Bottom tab bar (mobile) ---------- */
.tabbar{
  position: fixed; left:50%; transform: translateX(-50%);
  bottom:0; width:100%; max-width: var(--max-w);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-top:1px solid var(--line);
  display:flex; z-index: 50;
}
.tabbar a{
  flex:1; text-align:center; padding: 10px 4px 8px;
  font-size:10.5px; font-weight:700; color: var(--text-400);
}
.tabbar a .ic{ font-size:16px; display:block; margin-bottom:2px; }
.tabbar a.is-active{ color: var(--coral-600); }

@media (min-width: 481px){
  .wrap{ box-shadow: 0 0 0 1px var(--line); }
}