/* IB Core 페이지 전용. site.css 에 없는 것만 — 점수표와 출처 목록.
 *
 * 브랜드 가이드 그대로다: 브랜드 색은 forest 와 brass 둘뿐이고 중립은 ivory ·
 * sage · bronze 셋뿐이다. 여기서 새 색을 들이지 않는다 — 점수의 세기는 forest 의
 * 농도로만 표현하고, 실패 조건은 색이 아니라 bronze 중립과 글자 처리로 구분한다.
 * 각진 모서리, 그림자 없음, 그라디언트 없음.
 */

.matrix-h{font-family:var(--serif);font-weight:500;letter-spacing:-.018em}

/* 표는 좁은 화면에서 본문을 밀지 않고 자기 안에서 가로로 움직인다. */
.matrix-wrap{overflow-x:auto;margin-top:18px;border:1px solid var(--line)}
.matrix{border-collapse:collapse;width:100%;min-width:520px;
  font-variant-numeric:tabular-nums}
.matrix caption{caption-side:bottom;text-align:left;padding:12px 16px 14px}
.matrix th,.matrix td{padding:13px 10px;text-align:center;
  border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.matrix thead th{font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;color:var(--muted);background:rgba(22,39,28,.05)}
.matrix tbody th{font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--forest);background:rgba(22,39,28,.05)}
.matrix thead th:first-child,.matrix tbody th{text-align:left;padding-left:16px}
.matrix .corner{font-size:10px;letter-spacing:.08em;color:var(--muted)}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix th:last-child,.matrix td:last-child{border-right:0}

/* 점수 칸은 값이 클수록 진하다. 표를 훑기만 해도 3점이 어디 몰려 있는지 읽힌다. */
.matrix td{font-family:var(--serif);font-size:19px;color:var(--forest)}
.matrix .p3{background:rgba(22,39,28,.16);font-weight:600}
.matrix .p2{background:rgba(22,39,28,.09)}
.matrix .p1{background:rgba(22,39,28,.04)}
.matrix .p0{color:var(--muted)}
/* 실패 조건은 색이 아니라 서체와 중립 하나로 구분한다. */
.matrix .pf{font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;color:var(--bronze);background:rgba(139,122,63,.08)}

.srclist{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.srclist li{padding:13px 0;border-bottom:1px solid var(--line-2);font-size:15px;
  color:var(--ink-2)}

@media (max-width:640px){
  .matrix th,.matrix td{padding:11px 8px}
  .matrix td{font-size:17px}
}

/* ══ About IB 섹션 ══════════════════════════════════════════════
 * 움직이는 것은 전부 사실을 담는다. 나이 축의 막대는 실제 연령 구간에서
 * 자라고, 숫자는 실제 규모까지 올라가고, 채점 막대는 실제 비중만큼 찬다.
 * 뜻 없는 장식은 넣지 않는다 — 그게 가장 티 나는 실패다.
 *
 * 초기 상태를 CSS 에 두지 않는다. 자바스크립트가 `.mo` 를 붙이면서 숨기고,
 * 스크롤이 닿으면 `.in` 으로 되돌린다. JS 가 죽어도 글은 그대로 보인다.
 */

/* 섹션 안쪽 이동 — 헤더 아래 얇은 띠 */
.subnav{background:var(--ivory);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.subnav .wrap{display:flex;gap:clamp(14px,2.4vw,30px);align-items:center;
  min-height:48px;flex-wrap:wrap}
.subnav .lab{font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin-right:auto}
.subnav a{position:relative;font-size:14px;color:var(--ink-2);
  text-decoration:none;padding:13px 0;transition:color .18s}
.subnav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;
  height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.subnav a:hover{color:var(--forest)}
.subnav a:hover::after,.subnav a[aria-current]::after{transform:scaleX(1)}
.subnav a[aria-current]{color:var(--forest);font-weight:600}
@media(max-width:620px){.subnav .lab{display:none}
  .subnav .wrap{gap:16px;justify-content:space-between}}

/* ── 나이 축 — 세 프로그램이 실제 연령에서 겹친다 ───────────────── */
.ages{margin-top:28px;border:1px solid var(--line);padding:clamp(20px,3vw,34px)}
.ages .axis{position:relative;height:22px;border-bottom:1px solid var(--line);
  margin-bottom:6px}
.ages .tick{position:absolute;bottom:0;transform:translateX(-50%);
  font-family:var(--sans);font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.ages .tick::after{content:"";position:absolute;left:50%;bottom:-5px;width:1px;
  height:5px;background:var(--line)}
.ages .row{position:relative;height:38px;margin-top:7px}
.ages .bar{position:absolute;top:0;height:38px;display:flex;align-items:center;
  padding:0 14px;border:1px solid var(--forest);background:var(--ivory);
  transform:scaleX(.02);transform-origin:left center;
  transition:transform .62s cubic-bezier(.2,.7,.3,1)}
.ages .bar > span{opacity:0;transition:opacity .3s .34s}
.ages .row.in .bar{transform:scaleX(1)}
.ages .row.in .bar > span{opacity:1}
.ages .bar b{font-family:var(--serif);font-weight:500;font-size:16px;
  color:var(--forest);white-space:nowrap}
.ages .bar i{font-style:normal;font-family:var(--sans);font-size:11.5px;
  color:var(--muted);margin-left:9px;white-space:nowrap}
.ages .bar.dp{background:var(--forest);border-color:var(--forest)}
.ages .bar.dp b{color:var(--ivory)}
.ages .bar.dp i{color:var(--brass)}
/* 막대가 가로로 늘어나므로 글자는 되돌려 늘어나지 않게 한다 */
.ages .bar > span{display:flex;align-items:center}
/* 기숙 구간은 자기 줄을 갖는다. 막대 위에 겹쳐 그리면 글자를 가린다. */
.ages .bandrow{position:relative;height:30px;margin-top:10px}
.ages .band{position:absolute;top:0;height:30px;display:flex;align-items:center;
  justify-content:center;border:1px dashed var(--bronze);
  background:rgba(139,122,63,.06)}
.ages .band em{font-style:normal;font-family:var(--sans);font-size:10.5px;
  font-weight:600;letter-spacing:.08em;color:var(--bronze);white-space:nowrap}
@media(max-width:560px){.ages .band em{font-size:9.5px;letter-spacing:.02em}}
.ages .note-row{margin-top:26px;font-size:13.5px;color:var(--ink-2)}
@media(max-width:700px){
  .ages .bar{padding:0 9px}.ages .bar b{font-size:13.5px}
  .ages .bar i{display:none}
}

/* ── 규모 숫자 — 실제 값까지 올라간다 ───────────────────────────── */
.scale{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;margin-top:26px}
.scale > div{background:var(--ivory);outline:1px solid var(--line);
  padding:22px 20px}
.scale .n{font-family:var(--serif);font-weight:500;
  font-size:clamp(28px,4.4vw,44px);line-height:1;color:var(--forest);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block}
.scale .n small{font-family:var(--sans);font-size:14px;font-weight:400;
  color:var(--muted);margin-left:4px;letter-spacing:0}
.scale .k{display:block;font-family:var(--sans);font-size:10.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:11px}

/* ── 맞다 / 맞지 않다 ───────────────────────────────────────────── */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:26px}
@media(max-width:760px){.fit{grid-template-columns:1fr}}
.fit > div{background:var(--ivory);outline:1px solid var(--line);
  padding:clamp(22px,2.6vw,32px)}
.fit .h{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.fit .h b{font-family:var(--serif);font-weight:500;font-size:21px}
.fit .h span{font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.fit.yn .yes{background:rgba(22,39,28,.035)}
.fit .yes .h b{color:var(--forest)}
.fit .yes .h span{color:var(--forest)}
.fit .no .h b{color:var(--bronze)}
.fit .no .h span{color:var(--bronze)}
.fit ul{list-style:none;margin-top:14px;border-top:1px solid var(--line-2)}
.fit li{padding:13px 0;border-bottom:1px solid var(--line-2);font-size:14.5px;
  line-height:1.62;color:var(--ink-2)}
.fit li:last-child{border-bottom:0}
.fit li b{color:var(--forest);font-weight:600;display:block;margin-bottom:3px}
.fit .no li b{color:var(--bronze)}

/* ── 공통 등장 — 자바스크립트가 붙이는 것만 움직인다 ─────────────── */
.mo{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),
             transform .5s cubic-bezier(.2,.7,.3,1)}
.mo.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .mo,.mo.in{opacity:1;transform:none;transition:none}
  .ages .bar{transform:scaleX(1);transition:none}
  .ages .bar > span{opacity:1;transition:none}
  .subnav a::after{transition:none}
}

/* ── 2년 달력 — Core 가 언제 몰리는가 ──────────────────────────────
 * 월은 쓰지 않는다. IB 는 고정 일정을 공시하지 않고 교내 마감은 학교가 정한다.
 * 출처로 확인된 것은 순서와 밀도뿐이라 그것만 그린다 — 학기 네 칸 위에.
 */
.cal2{margin-top:26px;border:1px solid var(--line);overflow-x:auto}
.cal2 .inner{min-width:660px;padding:clamp(18px,2.6vw,30px)}
.cal2 .terms{display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:4px}
.cal2 .terms span{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.06em;color:var(--muted);text-align:center;
  border-left:1px solid var(--line-2);padding:0 6px}
.cal2 .terms span:first-child{border-left:0}
.cal2 .lane{display:grid;grid-template-columns:78px 1fr;gap:14px;
  align-items:center;padding:13px 0;border-bottom:1px solid var(--line-2)}
.cal2 .lane:last-of-type{border-bottom:0}
.cal2 .who{font-family:var(--serif);font-weight:500;font-size:17px;
  color:var(--forest)}
.cal2 .who i{display:block;font-style:normal;font-family:var(--sans);
  font-size:10.5px;color:var(--muted);letter-spacing:.04em;margin-top:2px}
.cal2 .track{position:relative;height:34px}
/* 칸 구분선을 배경으로 깔아 네 학기가 계속 읽히게 한다 */
.cal2 .track::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to right,transparent 0,transparent calc(25% - 1px),
    var(--line-2) calc(25% - 1px),var(--line-2) 25%)}
.cal2 .run{position:absolute;top:11px;height:12px;background:var(--forest);
  transform:scaleX(.02);transform-origin:left;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.cal2 .run.soft{background:var(--sage)}
.cal2 .in .run{transform:scaleX(1)}
.cal2 .mark{position:absolute;top:0;transform:translateX(-50%);text-align:center;
  opacity:0;transition:opacity .34s}
.cal2 .in .mark{opacity:1}
.cal2 .mark b{display:block;width:11px;height:11px;margin:11px auto 0;
  background:var(--brass);border:1px solid var(--forest);border-radius:50%}
.cal2 .mark.key b{background:var(--forest);width:13px;height:13px;margin-top:10px}
.cal2 .mark em{position:absolute;top:26px;left:50%;transform:translateX(-50%);
  font-style:normal;font-family:var(--sans);font-size:10.5px;color:var(--ink-2);
  white-space:nowrap}
.cal2 .lane.tall .track{height:52px}
.cal2 .foot{margin-top:16px;font-size:13px;color:var(--ink-2)}

/* ── 지원서와 재료 ──────────────────────────────────────────────── */
.feeds{margin-top:26px;border-top:1px solid var(--line)}
.feeds .r{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(16px,3vw,44px);padding:20px 0;border-bottom:1px solid var(--line-2);
  align-items:start}
@media(max-width:700px){.feeds .r{grid-template-columns:1fr;gap:8px}}
.feeds .slot{font-family:var(--serif);font-weight:500;font-size:19px;
  color:var(--forest);position:relative}
.feeds .slot i{display:block;font-style:normal;font-family:var(--sans);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.feeds .src{font-size:14.5px;color:var(--ink-2);line-height:1.65}
.feeds .src b{color:var(--forest);font-weight:600}
.feeds .src .from{display:inline-block;font-family:var(--sans);font-size:10.5px;
  font-weight:600;letter-spacing:.1em;color:var(--bronze);
  border:1px solid var(--bronze);padding:2px 7px;margin-right:9px;
  vertical-align:2px}

@media (prefers-reduced-motion:reduce){
  .cal2 .run{transform:scaleX(1);transition:none}
  .cal2 .mark{opacity:1;transition:none}
}

/* ── 대학이 공시한 기준선 ────────────────────────────────────────
 * 숫자 옆에 "보너스 포함/제외"를 항상 붙인다. 이 표는 그 구분을 보이려고
 * 만든 것이고, 구분 없는 숫자는 상담에서 오해를 만든다. */
.bars{margin-top:24px;border-top:1px solid var(--line)}
.bars .r{display:grid;grid-template-columns:minmax(0,3fr) 78px minmax(0,4fr);
  gap:clamp(12px,2.4vw,26px);align-items:baseline;padding:15px 0;
  border-bottom:1px solid var(--line-2)}
@media(max-width:620px){.bars .r{grid-template-columns:1fr auto;gap:4px 12px}
  .bars .r .basis{grid-column:1/-1}}
.bars .u{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--forest)}
.bars .p{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--forest);
  font-variant-numeric:tabular-nums;text-align:right}
.bars .basis{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.bars .basis b{color:var(--bronze);font-weight:600}

/* ── 대학별 학점 표 (유학원용 참고) ─────────────────────────────── */
.uni{border-collapse:collapse;width:100%;min-width:720px;font-size:13.5px}
.uni th{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:0 12px 9px 0;
  border-bottom:1px solid var(--line)}
.uni td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line-2);
  vertical-align:top;color:var(--ink-2);line-height:1.55}
.uni td:first-child{font-family:var(--serif);font-size:15.5px;color:var(--forest)}
.uni td b{color:var(--forest);font-weight:600;font-variant-numeric:tabular-nums}
.uni td i{display:block;font-style:normal;font-family:var(--sans);font-size:11px;
  color:var(--muted);margin-top:3px}
.uni tr:last-child td{border-bottom:0}
.band .uni th{color:var(--sage);border-bottom-color:var(--line-on-forest)}
.band .uni td{color:#D3DCD5;border-bottom-color:var(--line-on-forest)}
.band .uni td:first-child,.band .uni td b{color:var(--ivory)}
.band .uni td i{color:var(--brass)}
.band .uni a.lnk{color:var(--ivory)}

/* 넓은 표는 본문을 밀지 않고 자기 안에서 가로로 움직인다. site.css 에는 이
   래퍼가 없어서(camp.css·bw.css 에만 있다) 여기서 정의한다. */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:820px){
  .tw::after{content:"← 옆으로 밀어서 보세요 →";display:block;text-align:center;
    font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--muted);
    padding:10px 0 2px}
  .band .tw::after{color:var(--sage)}
}