/* 해피트리 학교연구소 — 디자인 시스템
   네이비(브랜드) + 코랄(행동) + 라임(강조) + 크림(바탕).
   여백을 넉넉히, 모서리를 크게, 테두리 대신 그림자로 층을 만든다. */

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

:root{
  --navy:#1B2E4C; --navy-deep:#122238; --navy-soft:#EDF1F7;
  --coral:#EF6B5A; --coral-soft:#FDEDEA; --coral-deep:#D3543F;
  --lime:#B8DC58; --lime-soft:#EEF7D6; --lime-ink:#4F6B12;
  --gold:#C9A227;
  --bg:#F4F1E8; --card:#ffffff; --ink:#1B2430; --muted:#7C8794;
  --line:#E9E4D6; --line-soft:#F1EDE2;
  --green:#2E7D5B; --red:#B3432F;

  --r:18px; --r-sm:12px; --r-pill:999px;
  --sh:0 1px 2px rgba(27,46,76,.04), 0 6px 20px rgba(27,46,76,.06);
  --sh-lift:0 2px 4px rgba(27,46,76,.06), 0 14px 34px rgba(27,46,76,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",
              "Malgun Gothic",system-ui,sans-serif;
  font-size:15px; line-height:1.7; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit; cursor:pointer; border:none; background:none}
a{color:var(--navy); text-underline-offset:3px}

/* ---------------------------------------------------------------- 헤더 */
header{background:var(--navy); color:#fff; position:sticky; top:0; z-index:50}
.hd{max-width:1120px; margin:0 auto; padding:16px 22px; display:flex; align-items:center; gap:14px}
.hd img{width:40px; height:40px; border-radius:11px; background:#fff; padding:2px}
.hd h1{font-size:19px; margin:0; font-weight:800; letter-spacing:-.03em}
.hd h1 small{
  display:block; font-size:11px; font-weight:600; letter-spacing:.06em;
  color:var(--lime); margin-bottom:2px;
}
.hd .sp{flex:1}
.ghost{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);
  padding:9px 16px; border-radius:var(--r-pill); font-size:13.5px; font-weight:600;
  transition:background .15s;
}
.ghost:hover{background:rgba(255,255,255,.24)}

main{max-width:1120px; margin:0 auto; padding:32px 22px 100px}

/* ---------------------------------------------------------------- 카드 · 제목 */
.card{
  background:var(--card); border-radius:var(--r); padding:26px 28px;
  margin-bottom:20px; box-shadow:var(--sh);
}
/* 작은 컬러 라벨 + 큰 제목 위계 */
.eyebrow{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.12em;
  color:var(--coral); margin-bottom:6px;
}
.card > h2{margin:0 0 6px; font-size:21px; font-weight:800; letter-spacing:-.03em; color:var(--ink)}
.sub{color:var(--muted); font-size:13.5px; margin:0 0 20px; line-height:1.65}

label.f{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; font-weight:700}
select,input[type=text],input[type=password],textarea{
  width:100%; padding:12px 15px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); font:inherit; transition:border-color .15s, box-shadow .15s;
}
select:focus,input:focus,textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 4px var(--navy-soft);
}

/* ---------------------------------------------------------------- 버튼 */
.btn{
  background:var(--navy); color:#fff; padding:12px 22px; border-radius:var(--r-pill);
  font-size:14.5px; font-weight:700; transition:transform .12s, box-shadow .15s, background .15s;
  box-shadow:0 2px 8px rgba(27,46,76,.18);
}
.btn:hover{background:var(--navy-deep); transform:translateY(-1px); box-shadow:var(--sh-lift)}
.btn:active{transform:none}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none; box-shadow:none}
.btn.gold{background:var(--coral); color:#fff; box-shadow:0 2px 8px rgba(239,107,90,.28)}
.btn.gold:hover{background:var(--coral-deep)}
.btn.line{background:#fff; color:var(--navy); border:1.5px solid var(--line); box-shadow:none}
.btn.line:hover{background:var(--navy-soft); border-color:var(--navy); transform:none}
.btn.big{font-size:16px; padding:15px 30px}
.btn small{font-size:11px; opacity:.8; font-weight:600; margin-left:5px}

.acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

.row{display:grid; gap:14px}
.row.c4{grid-template-columns:repeat(4,1fr)}
.row.c3{grid-template-columns:repeat(3,1fr)}
.row.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){ .row.c4,.row.c3,.row.c2{grid-template-columns:1fr} }

.msg{padding:14px 16px; border-radius:var(--r-sm); font-size:13.5px; margin:14px 0; line-height:1.65}
.msg.err{background:var(--coral-soft); color:var(--coral-deep)}
.msg.ok{background:var(--lime-soft); color:var(--lime-ink)}
.msg.info{background:var(--navy-soft); color:var(--navy)}

.spin{display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- 학군 프리셋 */
.presets{display:flex; flex-wrap:wrap; gap:9px; align-items:stretch; margin-bottom:22px}
.plabel{
  display:flex; align-items:center; font-size:12px; font-weight:800; letter-spacing:.04em;
  color:var(--navy); background:var(--navy-soft); padding:0 15px; border-radius:var(--r-pill);
}
.pbtn{
  background:#fff; border:1.5px solid var(--line); color:var(--navy);
  border-radius:var(--r-pill); padding:10px 20px; font-size:14.5px; font-weight:700;
  text-align:left; transition:all .15s;
}
.pbtn small{display:block; font-size:11px; font-weight:500; color:var(--muted); margin-top:1px}
.pbtn:hover{border-color:var(--navy); background:var(--navy-soft); transform:translateY(-1px)}
.pbtn.gold{border-color:var(--coral); color:var(--coral-deep); background:var(--coral-soft)}
.pbtn.gold small{color:var(--coral-deep); opacity:.75}
.pbtn.gold:hover{background:#fbe0db}
select[multiple]{height:48px; padding:8px 12px}
select[multiple]:focus{height:auto; min-height:140px}

/* ---------------------------------------------------------------- 학교 목록 */
.schools{max-height:440px; overflow:auto; display:grid; gap:9px; padding:2px}
.sch{
  display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer;
  background:#fff; border-radius:var(--r-sm); box-shadow:var(--sh);
  border:1.5px solid transparent; transition:all .14s;
}
.sch:hover{border-color:var(--navy); transform:translateX(3px); box-shadow:var(--sh-lift)}
.sch b{font-size:15.5px; font-weight:700}
.sch span{color:var(--muted); font-size:12.5px}
.sch .go{margin-left:auto; color:var(--navy); font-size:20px; opacity:.35; transition:opacity .14s}
.sch:hover .go{opacity:1}
.sch.pin{background:linear-gradient(90deg,var(--lime-soft),#fff 55%)}
.badge{
  display:inline-block; margin-left:7px; padding:2px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:800; background:var(--lime-soft); color:var(--lime-ink);
}

/* ---------------------------------------------------------------- 학교 헤더 */
.shead{
  background:var(--navy); color:#fff; border-radius:var(--r);
  padding:32px 34px; margin-bottom:20px; position:relative; overflow:hidden;
}
.shead::after{
  content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px;
  border-radius:50%; background:rgba(184,220,88,.10);
}
.shead h2{margin:0; font-size:30px; font-weight:800; letter-spacing:-.04em; position:relative}
.shead .tags{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; position:relative}
.shead .tag{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  padding:4px 13px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600;
}
.shead .meta{font-size:13px; opacity:.8; line-height:1.95; position:relative}
.shead a{color:var(--lime)}

/* ---------------------------------------------------------------- 지표 카드 */
.kpi{
  background:#fff; border-radius:var(--r-sm); padding:20px;
  box-shadow:var(--sh); border-top:3px solid var(--navy-soft); transition:transform .14s;
}
.kpi:hover{transform:translateY(-2px); box-shadow:var(--sh-lift)}
.kpi .t{font-size:12.5px; color:var(--muted); font-weight:700}
.kpi .v{font-size:32px; font-weight:800; color:var(--navy); line-height:1.2; margin:5px 0 2px;
  letter-spacing:-.04em}
.kpi .v small{font-size:14px; font-weight:700; margin-left:3px; color:var(--muted)}
.kpi .c{font-size:12.5px; color:var(--muted)}
.kpi .rank{
  display:inline-block; margin-top:10px; padding:3px 11px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:800; background:var(--navy-soft); color:var(--navy);
}
.kpi .rank.top{background:var(--lime-soft); color:var(--lime-ink)}
.kpi .na{color:var(--muted); font-size:16px; font-weight:700; margin:5px 0}

/* ---------------------------------------------------------------- 인사이트 */
.ins{
  background:#fff; border-radius:var(--r-sm); padding:18px 22px; margin-bottom:11px;
  box-shadow:var(--sh); border-left:5px solid var(--navy);
}
.ins.good{border-left-color:var(--lime)}
.ins.watch{border-left-color:var(--coral)}
.ins.info{border-left-color:var(--gold)}
.ins b{display:block; font-size:15.5px; font-weight:700; margin-bottom:4px}
.ins p{margin:0; font-size:13.8px; color:#5A6673; line-height:1.75}

/* ---------------------------------------------------------------- 표 */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{padding:11px 12px; border-bottom:1px solid var(--line-soft); text-align:right}
th:first-child,td:first-child{text-align:left}
thead th{
  color:var(--muted); font-size:11.5px; font-weight:800;
  letter-spacing:.05em; border-bottom:2px solid var(--line); padding-bottom:9px;
}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--bg)}
tbody tr.me{background:var(--lime-soft); font-weight:700}
tbody tr.me:hover{background:var(--lime-soft)}
tbody tr.me td:first-child::before{content:"★ "; color:var(--lime-ink)}
.scroll{overflow-x:auto; margin:0 -4px; padding:0 4px}
table.txt th, table.txt td{text-align:left; vertical-align:top; white-space:normal}
table.txt td:first-child{white-space:nowrap; width:1%}
td.wrap{white-space:normal; line-height:1.65}

.bar{height:10px; background:var(--navy-soft); border-radius:var(--r-pill); overflow:hidden; min-width:70px}
.bar i{display:block; height:100%; background:var(--navy); border-radius:var(--r-pill)}

.dl{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:13.5px}
.dl dt{color:var(--muted); font-weight:600}
.dl dd{margin:0; text-align:right; font-weight:600}

.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  background:var(--navy-soft); color:var(--navy); border-radius:var(--r-pill);
  padding:5px 13px; font-size:12.5px; font-weight:700;
}

.gh{margin:26px 0 3px; font-size:16.5px; font-weight:800; letter-spacing:-.02em}
.gh small{font-weight:500; color:var(--muted); font-size:12.5px; margin-left:6px}

/* ---------------------------------------------------------------- 레이더 점수 */
.radar{
  display:flex; gap:34px; align-items:center; background:var(--navy); color:#fff;
  border-radius:var(--r); padding:30px 34px; margin-bottom:20px;
  position:relative; overflow:hidden;
}
.radar::after{
  content:""; position:absolute; left:-60px; bottom:-90px; width:240px; height:240px;
  border-radius:50%; background:rgba(184,220,88,.07);
}
.dial{
  flex:0 0 142px; width:142px; height:142px; border-radius:50%; position:relative;
  background:conic-gradient(var(--lime) var(--deg), rgba(255,255,255,.14) 0);
  display:flex; align-items:center; justify-content:center;
}
.dial .hole{
  width:110px; height:110px; border-radius:50%; background:var(--navy);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.dial b{font-size:40px; font-weight:800; color:#fff; line-height:1; letter-spacing:-.04em}
.dial span{font-size:11px; color:rgba(255,255,255,.6); margin-top:3px}
.rbody{flex:1; min-width:0; position:relative}
.rbody h3{margin:0 0 6px; font-size:19px; font-weight:800; color:#fff; letter-spacing:-.03em}
.rbody h3 em{
  font-style:normal; background:var(--lime); color:var(--navy-deep); font-size:12px;
  font-weight:800; padding:3px 12px; border-radius:var(--r-pill); margin-left:10px; vertical-align:3px;
}
.rbody p{margin:0 0 6px; font-size:14px; color:rgba(255,255,255,.9)}
.rbody .sub{color:rgba(255,255,255,.6); margin:0}
.rbody .sub b{color:#fff}
.axes{display:grid; gap:9px; margin-top:18px}
.axis{display:grid; grid-template-columns:88px 1fr 58px; gap:12px; align-items:center; font-size:12.5px}
.axis .an{color:rgba(255,255,255,.7); font-weight:600}
.axis .bar{background:rgba(255,255,255,.13); height:8px}
.axis .bar i{background:var(--lime)}
.axis .av{text-align:right; color:#fff; font-weight:800}
@media(max-width:760px){
  .radar{flex-direction:column; align-items:stretch; text-align:center}
  .dial{margin:0 auto} .axis{grid-template-columns:80px 1fr 52px; text-align:left}
}

/* ---------------------------------------------------------------- 탭 */
.tabs{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap}
.tab{
  padding:11px 22px; font-size:14.5px; font-weight:700; color:var(--muted);
  background:#fff; border-radius:var(--r-pill); box-shadow:var(--sh); transition:all .15s;
}
.tab:hover{color:var(--navy); transform:translateY(-1px)}
.tab.on{background:var(--navy); color:#fff; box-shadow:0 3px 12px rgba(27,46,76,.24)}
.panel{display:none; animation:fade .22s ease}
.panel.on{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.card.hero{background:linear-gradient(135deg,var(--coral-soft) 0%,#fff 62%)}
.card.hero > h2{color:var(--coral-deep)}
.act{
  background:#fff; border-radius:var(--r-sm); padding:18px 22px; margin-bottom:11px;
  box-shadow:var(--sh); border-left:5px solid var(--gold);
}
.act .when{
  display:inline-block; background:var(--navy-soft); color:var(--navy); font-size:11px;
  font-weight:800; padding:3px 11px; border-radius:var(--r-pill); margin-bottom:7px;
}
.act b{display:block; font-size:15.5px; font-weight:700; margin-bottom:4px}
.act p{margin:0; font-size:13.8px; color:#5A6673; line-height:1.75}

/* ---------------------------------------------------------------- 전기·후기 배지 */
.ph{display:inline-block; padding:2px 11px; border-radius:var(--r-pill); font-size:11.5px;
  font-weight:800; vertical-align:2px}
.ph.early{background:var(--coral-soft); color:var(--coral-deep)}
.ph.late{background:var(--navy-soft); color:var(--navy)}
.ph.free{background:var(--lime-soft); color:var(--lime-ink)}

/* ---------------------------------------------------------------- 인쇄용 문서 */
.sheet{
  background:#fff; border-radius:var(--r); padding:44px 50px; font-size:14px;
  line-height:1.8; box-shadow:var(--sh);
}
.sh-top{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:28px}
.sh-head{
  display:flex; gap:20px; align-items:center;
  border-bottom:3px solid var(--navy); padding-bottom:20px; margin-bottom:28px;
}
.sh-head img{width:62px; height:62px; border-radius:14px}
.sh-ac{font-size:11.5px; font-weight:800; color:var(--coral); letter-spacing:.1em}
.sh-head h1{margin:3px 0 4px; font-size:28px; font-weight:800; color:var(--navy); letter-spacing:-.04em}
.sh-head p{margin:0; font-size:13.5px; color:var(--muted)}
.sheet section{margin-bottom:32px}
.sheet h2{
  font-size:18px; font-weight:800; color:var(--navy); margin:0 0 14px;
  padding-left:13px; border-left:5px solid var(--lime); letter-spacing:-.02em;
}
.sheet h3{font-size:15.5px; font-weight:800; color:var(--navy); margin:22px 0 9px}
.sheet ul{margin:12px 0 0; padding-left:20px}
.sheet li{margin-bottom:8px}
.sheet table{margin:10px 0 6px}
.sheet tbody tr.me{background:var(--lime-soft); font-weight:700}
.sheet tr.gh2 td{background:var(--navy-soft); text-align:left; color:var(--navy); font-size:12.5px}
.sh-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:8px}
.sh-kpis div{background:var(--bg); border-radius:var(--r-sm); padding:16px 12px; text-align:center}
.sh-kpis b{display:block; font-size:27px; font-weight:800; color:var(--navy); line-height:1.2;
  letter-spacing:-.04em}
.sh-kpis span{font-size:11.5px; color:var(--muted); font-weight:600}
.sh-meta,.sh-note{font-size:12.5px; color:var(--muted); margin:10px 0 0; line-height:1.7}
.sh-brief{background:var(--bg); border-radius:var(--r-sm); padding:15px 18px; margin:8px 0 4px;
  font-size:14px}
.sh-subj{display:grid; gap:11px; margin:14px 0 10px}
.sh-subj > div{border-left:5px solid var(--lime); background:var(--lime-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:14px 18px}
.sh-subj b{display:block; font-size:15px; font-weight:800; color:var(--navy); margin-bottom:4px}
.sh-subj b em{font-style:normal; font-size:11px; font-weight:700; color:var(--muted);
  background:#fff; border-radius:var(--r-pill); padding:2px 9px; margin-left:7px; vertical-align:1px}
.sh-subj p{margin:0; font-size:13.5px; line-height:1.75}
.sh-ment{background:var(--navy-soft); border-radius:var(--r-sm); padding:22px 26px}
.sh-ment h3{margin-top:0}
.sh-ment p{font-size:15px; line-height:1.9; margin:0 0 14px}
.sh-ac-box{background:var(--navy); color:#fff; border-radius:var(--r); padding:24px 28px}
.sh-ac-box h2{color:#fff; border-left-color:var(--lime); margin-bottom:8px}
.sh-ac-box p{margin:0; font-size:14px; opacity:.9}
.sh-src{font-size:11.5px; color:var(--muted); text-align:center; margin:26px 0 0}
div.sh-break{height:1px; background:var(--line); margin:40px 0}
@media(max-width:700px){ .sheet{padding:26px 20px} .sh-kpis{grid-template-columns:repeat(2,1fr)} }

/* ---------------------------------------------------------------- 보고서(무료·AI) */
.ai{background:#fff; border-radius:var(--r); padding:38px 44px; box-shadow:var(--sh)}
.ai h2{font-size:20px; font-weight:800; color:var(--navy); margin:32px 0 14px;
  padding-left:13px; border-left:5px solid var(--lime); letter-spacing:-.02em}
.ai h2:first-child{margin-top:0}
.ai h3{font-size:16px; font-weight:800; color:var(--navy); margin:20px 0 8px}
.ai p{margin:0 0 12px}
.ai ul,.ai ol{margin:0 0 14px; padding-left:22px}
.ai li{margin-bottom:7px}
.ai table{margin:10px 0 18px}
.ai strong{color:var(--navy); font-weight:700}

/* ---------------------------------------------------------------- 모달 */
.mask{position:fixed; inset:0; background:rgba(18,34,56,.5); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:100}
/* display:flex 가 hidden 속성(=display:none)을 덮어쓰므로 명시적으로 다시 숨긴다. */
.mask[hidden]{display:none}
.modal{background:var(--card); border-radius:22px; padding:32px; width:100%;
  max-width:580px; max-height:88vh; overflow:auto; box-shadow:var(--sh-lift)}
.modal h3{margin:0 0 6px; font-size:22px; font-weight:800; color:var(--navy); letter-spacing:-.03em}
.modal .f2{margin-bottom:18px}
.modal .row.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){ .modal .row.c3{grid-template-columns:1fr} }
.hint{font-size:12px; color:var(--muted); margin-top:7px; line-height:1.7}

/* ---------------------------------------------------------------- 인쇄 */
@media print{
  body{background:#fff; font-size:11pt}
  header,.noprint{display:none !important}
  main{max-width:none; padding:0}
  .card,.ai{border:1px solid #ddd; break-inside:avoid; box-shadow:none; margin-bottom:12px}
  .shead,.radar,.tabs{display:none !important}
  .panel{display:block !important}
  .kpi,.ins,.act,thead th,tbody tr.me{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  /* 인쇄용 문서가 열려 있으면 그것만 인쇄한다. */
  body:has(.sheet) #report,
  body:has(.sheet) #finder,
  body:has(.sheet) main > p.sub{display:none !important}
  .sheet{border:none; padding:0; font-size:10.5pt; box-shadow:none}
  .sheet *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .sheet section{break-inside:avoid}
  div.sh-break{break-before:page; height:0; background:none; margin:0}
  @page{size:A4; margin:14mm}
}