/* =========================================================
   고등부 (_p-high) · 홈 v4 B안 카드형 부품(.b4*) 위에 페이지 배치만
   구역 배경: 흰 → 회 → 흰 → 회 → 흰 → 회 → 흰 → 상담(핑크)
   ========================================================= */
.pg-high main > .gh:first-child { padding-top: 56px; }

/* ---------- 첫 화면 ---------- */
.gh-in { display: grid; grid-template-columns: 1.35fr .65fr; gap: 40px; align-items: end; }
.gh-h1 { margin-top: 18px; font-size: 76px; }
.gh .b4-lead { margin-top: 18px; }
.gh-sch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px; }
.gh-sch a { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 112px; padding: 18px 18px 16px; border-radius: 18px; background: var(--ink); color: #fff; }
.gh-sch b { font-family: "Black Han Sans", "Pretendard", sans-serif; font-weight: 400; font-size: 30px; line-height: 1; }
.gh-sch span { font-size: 14px; font-weight: 700; line-height: 1.4; color: #d9d9d9; }
.gh-sch i { position: absolute; right: 16px; top: 16px; font-style: normal; font-weight: 900; color: var(--pk); }
.gh-sch li:first-child a { background: var(--pk); color: var(--ink); }
.gh-sch li:first-child span { color: var(--ink); }
.gh-sch li:first-child i { color: var(--ink); }
.gh-sch a:hover { box-shadow: 0 0 0 3px var(--pk) inset; }
.gh-ph { position: relative; margin: 0; background: var(--sf, #F4F3F1); background: #F4F3F1; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; }
.gh-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.gh-ph figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border-radius: 14px; padding: 10px 10px 10px 14px; font-size: 15px; }
.gh-ph figcaption small { display: block; font-size: 12px; color: var(--g2); font-weight: 600; margin-top: 2px; }

/* ---------- 학교별 탭 ---------- */
.gs-tabs { display: inline-flex; gap: 4px; margin-top: 24px; padding: 5px; background: #fff; border-radius: 999px; }
.gs-tabs button { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; font-family: inherit; font-size: 17px; font-weight: 900; color: var(--g2); cursor: pointer; }
.gs-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.gs-tabs button:hover { color: var(--ink); }
.gs-tabs button[aria-selected="true"]:hover { color: #fff; }
.gs-p { display: grid; grid-template-columns: .95fr 2fr; gap: 14px; margin-top: 18px; align-items: stretch; }
.gs-p[hidden] { display: none; }
.gs-p > .h-cap { grid-column: 1 / -1; margin-top: 0; }
.gs-res { display: flex; flex-direction: column; gap: 6px; }
.gs-rk { font-size: 14px; font-weight: 800; color: var(--g2); }
.gs-n { font-size: 80px; font-weight: 900; letter-spacing: -0.06em; line-height: .95; color: var(--pk); }
.gs-n small { font-size: .32em; letter-spacing: -0.02em; margin-left: 4px; color: var(--ink); }
.gs-d { font-size: 16px; font-weight: 800; line-height: 1.45; }
.gs-d span { display: block; font-size: 13px; font-weight: 600; color: var(--g2); }
.gs-l { margin-top: 10px !important; border-top: 1px solid #eee; }
.gs-l li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eee; font-size: 14px; line-height: 1.5; }
.gs-l b { flex: none; min-width: 34px; font-weight: 900; }
.gs-go { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 800; color: var(--pk-ink); min-height: 44px; display: inline-flex; align-items: flex-end; }
.gs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gs-th { font-size: 16px; font-weight: 800; color: var(--g2); }
.gs-th b { font-size: 22px; font-weight: 900; color: var(--ink); margin-right: 4px; }
.gs-tr ul { margin-top: 12px !important; }
.gs-tr li { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid #eee; font-size: 14.5px; line-height: 1.5; }
.gs-tr em { font-style: normal; font-size: 17px; font-weight: 900; color: var(--ink); letter-spacing: -0.03em; }
.gs-cl { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 24px; align-items: center; background: var(--ink); color: #fff; }
.gs-cl .gs-th { color: #bbb; }
.gs-cl .gs-th b { color: #fff; }
.gs-days { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.gs-days li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.gs-days li b { color: var(--pk); font-weight: 900; }
.gs-days li span { color: #eee; font-weight: 700; }
.gs-days li a { font-size: 13px; font-weight: 800; color: #fff; text-decoration: underline; display: inline-flex; align-items: center; min-height: 32px; }
.gs-t { display: flex; gap: 8px; }
.gs-t li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #ddd; }
.gs-t img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: #F4F3F1; }
.gs-cap { margin-top: 12px; }

/* ---------- 학년별 ---------- */
.gy-year { margin-top: 26px; background: #F4F3F1; border-radius: 22px; padding: 22px 24px; }
.gy-yh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gy-yh b { font-size: 18px; font-weight: 900; }
.gy-yh span { font-size: 14px; font-weight: 700; color: var(--g2); }
.gy-bar { display: flex; gap: 4px; margin-top: 14px; }
.gy-s { flex: var(--w) 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.gy-s b { font-size: 15px; font-weight: 900; }
.gy-w { background: #fff; }
.gy-n { background: var(--ink); color: #ddd; }
.gy-n b { color: var(--pk); }
.gy-note { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 12px !important; font-size: 13.5px; color: #444; line-height: 1.55; }
.gy-note b { margin-right: 6px; font-weight: 900; color: var(--ink); }
.gy-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.gy-c { display: flex; flex-direction: column; gap: 6px; }
.gy-g { font-family: "Black Han Sans", "Pretendard", sans-serif; font-size: 44px; line-height: 1; color: var(--pk); }
.gy-t { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; }
.gy-t span { font-size: 15px; font-weight: 700; color: var(--g2); }
.gy-c dl { margin: 8px 0 0; }
.gy-c dt { font-size: 13px; font-weight: 800; color: var(--g2); margin-top: 8px; }
.gy-c dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.gy-go { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 800; min-height: 44px; display: inline-flex; align-items: flex-end; }
.gy-go:hover { color: var(--pk-ink); }
.gy-c3 { background: var(--ink); color: #fff; }
.gy-c3 dt { color: #aaa; }
.gy-c3 .gy-go { color: var(--pk); }
.gy-stat { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #262626; font-size: 13px; color: #ccc; }
.gy-stat b { display: block; font-size: 24px; font-weight: 900; color: #fff; letter-spacing: -0.03em; }

/* ---------- 내신 6단계 ---------- */
.gn-six li:nth-child(4) { background: var(--pk); color: var(--ink); }
.gn-six li:nth-child(4) p, .gn-six li:nth-child(4) span { color: var(--ink); }
.gn-six li:nth-child(5) { background: var(--cd); color: var(--ink); }
.gn-six li:nth-child(5) p { color: #555; }
.gn-six li:nth-child(5) span { color: var(--pk-ink); }
.gn-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.gn-h { font-size: 15px; font-weight: 900; }
.gn-flow { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 14px !important; padding-left: 22px !important; }
.gn-flow::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: #dcdad6; }
.gn-flow li { position: relative; font-size: 15px; font-weight: 800; line-height: 1.4; }
.gn-flow li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.gn-flow--pk li:last-child::before { background: var(--pk); }
.gn-flow--pk li:last-child { color: var(--pk-ink); }
@media (min-width: 861px) {
  .gn-flow { flex-direction: row; padding: 22px 0 0 !important; gap: 12px; }
  .gn-flow::before { left: 6px; right: 6px; top: 5px; bottom: auto; width: auto; height: 2px; }
  .gn-flow li { flex: 1; }
  .gn-flow li::before { left: 0; top: -22px; }
}
.gn-foot { margin-top: 18px; font-size: 15px; color: #444; }
.gn-foot b { color: var(--ink); font-weight: 900; }

/* ---------- 자체 제작 ---------- */
.gb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.gb { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.gb-cv { display: flex; justify-content: center; align-items: flex-end; height: 230px; }
.gb-cv img { width: 150px; height: auto; border-radius: 4px; box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.gb-cv3 img { width: 132px; }
.gb-cv3 img + img { margin-left: -84px; }
.gb-cv3 img:nth-child(1) { transform: rotate(-6deg) translateY(6px); }
.gb-cv3 img:nth-child(3) { transform: rotate(6deg) translateY(6px); }
.gb-cv3 img:nth-child(2) { position: relative; z-index: 1; }
.gb figcaption { font-size: 14px; line-height: 1.55; color: #444; }
.gb figcaption i { display: inline-block; font-style: normal; font-size: 12px; font-weight: 900; background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 9px; margin-bottom: 8px; }
.gb figcaption b { display: block; font-size: 21px; font-weight: 900; color: var(--ink); letter-spacing: -0.03em; margin-bottom: 2px; }
.gb-reg { display: flex; align-items: center; gap: 22px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e6e4e1; }
.gb-rc { display: flex; flex: none; }
.gb-rc img { width: 54px; height: auto; border-radius: 3px; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.gb-rc img + img { margin-left: -22px; }
.gb-reg p { font-size: 14.5px; line-height: 1.6; color: #444; }
.gb-reg b { color: var(--ink); font-weight: 900; margin-right: 8px; }

/* ---------- 설명회 (밝은 배경) ---------- */
.gsem .sem-panel { margin-top: 24px; }
.gsem .sem-big { color: var(--ink); }
.gsem .sem-img { border-radius: 18px; }
.gsem .sem-bt span { color: var(--g2); }
.gsem .sem-rows { background: var(--cd); border-radius: 18px; padding: 4px 20px; }
.gsem .sem-rows li { border-top: 1px solid #e6e4e1; }
.gsem .sem-rows li:first-child { border-top: 0; }
.gsem .sem-rows li:last-child { border-bottom: 0; }
.gsem .sem-rows a { color: var(--ink); }
.gsem .sem-rows .d { color: var(--g2); }
.gsem .sem-rows .d b { color: var(--ink); }
.gsem .sem-rows .t span { color: var(--g2); }
.gsem .sem-rows .go { border-color: var(--ink); }

/* ---------- 휴대폰 ---------- */
@media (max-width: 860px) {
  .pg-high main > .gh:first-child { padding-top: 36px; }
  .gh-in { grid-template-columns: 1fr; gap: 0; }
  .gh-h1 { font-size: clamp(40px, 11.4vw, 50px); margin-top: 14px; }
  .gh-ph { display: none; }
  .gh-sch { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
  .gh-sch a { min-height: 92px; padding: 14px; border-radius: 16px; }
  .gh-sch b { font-size: 25px; }
  .gh-sch span { font-size: 13px; }
  .gh-sch i { right: 12px; top: 12px; }

  .gs-tabs { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin-top: 18px; }
  .gs-tabs button { padding: 0 4px; font-size: 15px; }
  .gs-p { grid-template-columns: 1fr; gap: 0; margin-top: 12px; }
  .gs-p > .h-cap { margin-top: 10px; }
  .gs-n { font-size: 64px; }
  .gs-l li { font-size: 13.5px; }
  .gs-row, .gy-row, .gb-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; gap: 10px; }
  .gs-row::-webkit-scrollbar, .gy-row::-webkit-scrollbar, .gb-row::-webkit-scrollbar { display: none; }
  .gs-row > *, .gy-row > *, .gb-row > * { scroll-snap-align: start; }
  .gs-row .b4-hint { display: none; }
  .gs-cl { grid-column: auto; grid-template-columns: 1fr; align-content: start; }
  .gs-tr li { grid-template-columns: 76px 1fr; font-size: 13.5px; }
  .gs-tr em { font-size: 15px; }

  .gy-year { margin-top: 20px; padding: 16px; border-radius: 18px; }
  .gy-bar { flex-direction: column; }
  .gy-s { flex: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 9px 12px; }
  .gy-note { flex-direction: column; font-size: 13px; }
  .gy-g { font-size: 36px; }
  .gy-t { font-size: 18px; }

  .gn-flow li { font-size: 13.5px; }

  .gn-two { gap: 8px; margin-top: 8px; }
  .gn-c { padding: 16px 14px; }
  .gb-row { margin-top: 0; grid-auto-columns: 72%; }
  .gb-cv { height: 190px; }
  .gb-cv img { width: 124px; }
  .gb-cv3 img { width: 110px; }
  .gb-cv3 img + img { margin-left: -74px; }
  .gb-reg { gap: 14px; align-items: flex-start; }
  .gb-rc img { width: 40px; }
  .gb-rc img + img { margin-left: -18px; }
  .gb-reg p { font-size: 13.5px; }

  .gsem .sem-rows { padding: 2px 14px; }
}