/* 영재원 지점 디자인 (body.st-look-gift — layout.php, 지점 메인은 pages/home_gift.php) — root.css · branch.css 다음에 읽는다
 *  메인 · 초중등부와 같은 것: 글꼴(Wanted Sans · LINE Seed), kicker + 큰 제목, 둥근 카드, 알약 단추, 그 자리 펼침, 레이어 팝업, 떠 있는 메뉴, 남색 꼬리, 공용 _sec_* 구역,
 *   하위 화면 꼴(branch.css — 색만 여기 변수)
 *  다른 것: 영재학교 · 과학고 · 영재원 목표 학생 · 학부모용 '진지하고 성과 중심인 편집(에디토리얼)형' — 짙은 남색 ~ 쪽빛 첫 화면과 큰 글자 문장(사진은 오른쪽에 어둡게 깔림),
 *   실적 숫자 띠(금색 숫자), 진학 로드맵 도식(단계 3개를 선으로 잇기), 일정 타임라인(날짜 축) + 공지 · 바로가기 두 단 목록, 하위 화면 첫 줄도 짙은 바탕
 *  초중등부(밝은 벤토 · 연두)와 겹치지 않게 색(쪽빛 · 금색)뿐 아니라 배치(한 줄 문장 + 띠 + 도식 + 축)를 바꿨다
 *  효과: .st-rv(들어올 때) · [data-count] — 스크립트가 없거나 reduced-motion 이면 다 보인다 */
.st-look-gift{--g-ink:#0a1130;--g-navy:#111a45;--g-indigo:#3b3fa8;--g-gold:#e2b84d;--g-gold-d:#9a7414;
  --b-accent:#3740a6;--b-accent-d:#272e86;--b-line:#e3e6f2;--b-soft:#eef0fb;--b-ok:#e9f6ee;--b-pill:#fbf3dd;--b-pill-fg:#7a5a0e;--b-crumb:#f0cf7a;
  --b-ring:rgba(55,64,166,.16);--b-ring2:rgba(55,64,166,.35);--b-shadow:rgba(55,64,166,.25);--b-bg:#f5f6fb;--b-sub-bg:linear-gradient(135deg,#0a1130 0%,#1b2363 60%,#3b3fa8 130%)}

/* 머리 — 흰 막대 + 지점 메뉴 알약(root.css), 지금 화면 알약은 쪽빛, 아래에 금색 → 쪽빛 가는 띠 */
.st-look-gift .st-header-branch::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--g-gold),var(--g-indigo) 55%,var(--g-ink));pointer-events:none}
.st-look-gift .st-header-root .st-nav a.on,.st-look-gift .st-header-root .st-nav a.on:hover,.st-look-gift .st-r-subbar a.on,.st-look-gift .st-drawer-nav a.on{background:var(--g-indigo);box-shadow:0 4px 12px rgba(59,63,168,.3)}
.st-look-gift .st-header-root .st-nav a:hover{color:var(--g-indigo);background:rgba(59,63,168,.08)}

/* 1 첫 화면 — 짙은 바탕 위 큰 글자. 지점 사진은 오른쪽 절반에 어둡게 깔리고 왼쪽으로 사라진다 */
.st-g-hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 0% 0%,#1d2669 0%,var(--g-ink) 62%);color:#fff}
.st-g-hero-photo{position:absolute;top:0;right:0;bottom:0;width:58%;background:center/cover no-repeat;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.st-g-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,17,48,0) 60%,rgba(10,17,48,.6) 100%);pointer-events:none}
.st-g-hero-in{position:relative;z-index:1;padding-top:72px;padding-bottom:64px}
/* 지점 이름 배지(금색 테 알약) · 큰 문장(흰 글자) — 구조는 branch.css .st-hero-h */
.st-g-badge{background:rgba(226,184,77,.14);color:var(--g-gold);box-shadow:inset 0 0 0 1px rgba(226,184,77,.55)}
.st-g-badge::before{background:var(--g-gold)}
.st-g-lead{color:#fff}
.st-g-lead em{color:var(--g-gold)}
.st-g-lead>span+span{color:rgba(255,255,255,.8)}
.st-g-lead b{color:#fff}
.st-g-hero .st-hero-desc{color:rgba(255,255,255,.72)}
.st-g-season{display:inline-flex;align-items:center;gap:8px;margin:26px 0 0;padding:12px 18px;border-radius:999px;background:var(--g-gold);color:#1d1503;font-family:var(--f-wanted);font-weight:600;font-size:15px;box-shadow:0 10px 24px rgba(226,184,77,.25)}
.st-g-season:hover{background:#f0c85e}
.st-g-contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:30px 0 18px;font-size:15px;color:rgba(255,255,255,.78)}
.st-g-contact span{display:inline-flex;align-items:center;gap:6px;word-break:keep-all}
.st-g-tel{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-wanted);font-weight:700;font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.st-g-actions{display:flex;flex-wrap:wrap;gap:10px}
.st-g-act{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:#fff;font-family:var(--f-wanted);font-weight:600;font-size:15px;transition:background-color .2s,border-color .2s}
.st-g-act:hover{background:rgba(255,255,255,.1);border-color:#fff}
.st-g-act img{width:18px;height:18px;object-fit:contain}
.st-g-act.is-main{background:var(--g-gold);border-color:var(--g-gold);color:#1d1503}
.st-g-act.is-main:hover{background:#f0c85e}
.st-g-act.is-kakao{background:#fee500;border-color:#fee500;color:#191600}
@media (min-width:1024px){.st-g-hero-in{padding-top:104px;padding-bottom:96px}}
@media (max-width:767px){.st-g-hero-photo{width:100%;opacity:.25;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 90%);mask-image:linear-gradient(180deg,#000 0%,transparent 90%)}
  .st-g-actions{display:grid;grid-template-columns:1fr 1fr}.st-g-act{justify-content:center;padding:0 10px}}

/* 2 실적 숫자 띠 — 금색 큰 숫자, 세로 가는 선으로 나눔 */
.st-g-stats{background:var(--g-navy);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.st-g-stats-in{display:grid;gap:18px 32px;align-items:center;padding-top:30px;padding-bottom:30px}
.st-g-stats-k{margin:0;font-family:var(--f-wanted);font-weight:600;font-size:15px;color:rgba(255,255,255,.7)}
.st-g-stats-k b{display:block;font-size:28px;color:#fff;letter-spacing:.02em}
.st-g-stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.st-g-stats li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;padding-left:18px;border-left:1px solid rgba(255,255,255,.18)}
.st-g-stats li b{font-family:var(--f-wanted);font-weight:700;font-size:clamp(40px,4.4vw,58px);line-height:1;color:var(--g-gold);font-variant-numeric:tabular-nums}
.st-g-stats li small{font-size:17px;color:var(--g-gold)}
.st-g-stats li span{flex-basis:100%;margin-top:6px;font-size:14px;color:rgba(255,255,255,.75);word-break:keep-all}
.st-g-stats-go{justify-self:start;display:inline-flex;align-items:center;gap:6px;color:#fff;font-family:var(--f-wanted);font-weight:600;font-size:15px;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
@media (min-width:1024px){.st-g-stats-in{grid-template-columns:auto 1fr auto}}

/* 공통 구역 여백 */
.st-g-sec{padding:84px 0}
.st-look-gift .st-r-sec{padding:84px 0}
@media (max-width:1023px){.st-g-sec,.st-look-gift .st-r-sec{padding:64px 0}}
.st-look-gift .st-r-kicker{color:var(--g-indigo)}
.st-look-gift .st-r-dark .st-r-kicker{color:var(--g-gold)}

/* 3 진학 로드맵 — 단계 3개를 가로로(모바일 세로) 선으로 잇는 도식, 끝 단계는 쪽빛으로 채움 */
.st-g-road{background:#fff}
.st-g-road-list{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:minmax(0,1fr);counter-reset:road}
.st-g-node{position:relative;min-width:0;padding:26px 24px 24px;border:1px solid var(--b-line);border-radius:22px;background:#fff}
.st-g-node:last-child{background:linear-gradient(150deg,var(--g-navy),var(--g-indigo));border-color:transparent;color:#fff}
.st-g-node-step{display:inline-block;margin-bottom:12px;font-family:var(--f-wanted);font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--g-indigo)}
.st-g-node:last-child .st-g-node-step{color:var(--g-gold)}
.st-g-node h3{margin:0 0 8px;font-family:var(--f-wanted);font-weight:700;font-size:clamp(20px,2vw,24px);word-break:keep-all}
.st-g-node p{margin:0;font-size:15px;line-height:1.7;color:var(--r-sub);word-break:keep-all}
.st-g-node:last-child p{color:rgba(255,255,255,.82)}
.st-g-node-n{display:inline-flex;align-items:baseline;gap:4px;margin-top:16px;padding-top:12px;border-top:1px solid var(--b-line);font-weight:700;color:var(--g-ink)}
.st-g-node-n b{font-family:var(--f-wanted);font-size:30px;color:var(--g-indigo);font-variant-numeric:tabular-nums}
.st-g-node-n small{margin-left:6px;font-size:13px;font-weight:400;color:var(--r-sub)}
.st-g-node:last-child .st-g-node-n{border-top-color:rgba(255,255,255,.2);color:#fff}
.st-g-node:last-child .st-g-node-n b{color:var(--g-gold)}
.st-g-node:last-child .st-g-node-n small{color:rgba(255,255,255,.7)}
.st-g-node:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-18px;width:2px;height:18px;background:var(--g-indigo)}
@media (min-width:900px){
  .st-g-road-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
  /* 카드 사이 이음: 틈 한가운데 흰 동그라미 + 남색 꺾쇠(›) — 선 · 금색 화살 겹침은 어색해 뺐다 */
  .st-g-node:not(:last-child)::after{left:auto;right:-32px;top:calc(50% - 14px);bottom:auto;width:28px;height:28px;box-sizing:border-box;border:1px solid var(--b-line);border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(30,41,90,.08);z-index:1}
  .st-g-node:not(:last-child)::before{content:"";position:absolute;right:-21px;top:calc(50% - 4px);width:8px;height:8px;box-sizing:border-box;border-top:2px solid var(--g-indigo);border-right:2px solid var(--g-indigo);transform:rotate(45deg);z-index:2}
}

/* 4 일정 타임라인(날짜 축) + 공지 · 바로가기 — 두 단 (데스크톱), 모바일은 위아래 */
.st-g-sched{background:var(--b-bg)}
.st-g-two{display:grid;gap:56px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.st-g-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}   /* 일정 | 공지(5건) — 같은 폭, 높이가 비슷하게 */
.st-g-col{min-width:0}
.st-g-more{margin-left:10px;display:inline-flex;align-items:center;gap:4px;vertical-align:middle;font-size:15px;font-weight:600;color:var(--g-indigo)}
.st-g-timeline{position:relative;list-style:none;margin:20px 0 0;padding:0 0 0 0}
.st-g-timeline::before{content:"";position:absolute;left:35px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--g-indigo),var(--g-gold))}
.st-g-timeline li{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:8px 0}
.st-g-date{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#fff;border:2px solid var(--g-indigo);color:var(--g-ink);font-variant-numeric:tabular-nums}
.st-g-date b{font-family:var(--f-wanted);font-weight:700;font-size:19px;line-height:1}
.st-g-date small{margin-top:3px;font-size:12px;color:var(--r-sub)}
.st-g-ev{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:4px 10px;align-items:center;padding:14px 18px;border-radius:18px;background:#fff;border:1px solid var(--b-line);color:var(--g-ink);transition:border-color .2s,box-shadow .2s}
.st-g-ev:hover{border-color:var(--g-indigo);box-shadow:0 10px 24px rgba(17,26,69,.08)}
.st-g-ev-k{grid-row:1/3;align-self:center;padding:4px 10px;border-radius:999px;font-family:var(--f-wanted);font-weight:700;font-size:12px;white-space:nowrap;background:var(--b-soft);color:var(--g-indigo)}
.st-g-ev-k.is-exam{background:var(--g-ink);color:var(--g-gold)}
.st-g-ev-k.is-special{background:var(--b-pill);color:var(--b-pill-fg)}
.st-g-ev-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-wanted);font-weight:600;font-size:16px}
.st-g-ev-n{display:inline-flex;align-items:center;gap:2px;font-size:13px;color:var(--r-sub)}
.st-g-empty{margin:20px 0 0;padding:28px 20px;border:1.5px dashed #cdd2e6;border-radius:20px;color:var(--r-sub);text-align:center;background:#fff}
.st-g-list{list-style:none;margin:20px 0 0;padding:0;border-top:2px solid var(--g-ink)}
.st-g-list li{border-bottom:1px solid var(--b-line)}
.st-g-list a{display:flex;align-items:baseline;gap:14px;padding:16px 4px;color:var(--g-ink)}
.st-g-list a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.st-g-list a small{flex:none;font-size:13px;color:var(--r-sub);font-variant-numeric:tabular-nums}
.st-g-list a:hover span{color:var(--g-indigo);text-decoration:underline;text-underline-offset:3px}
.st-g-list a{padding:18px 4px}

/* 5 공용 구역 — 교육이념 짧은 카드 · 학습관리 · 수업 프로세스 색 조금 (구조는 root.css) */
.st-look-gift .st-r-idea-card{background:#fff;border:1px solid var(--b-line)}
.st-look-gift .st-r-idea{background:var(--b-bg)}

/* 하위 화면 첫 줄 — 짙은 남색 ~ 쪽빛 바탕, 흰 글자, 위치는 반투명 알약 (구조는 branch.css .st-b-subhero) */
.st-look-gift .st-b-subhero{color:#fff}
.st-look-gift .st-b-subhero::before{content:"";position:absolute;right:-80px;top:-120px;width:320px;height:320px;border-radius:50%;border:1px solid rgba(226,184,77,.35);pointer-events:none}
.st-look-gift .st-b-subhero h1{color:#fff}
.st-look-gift .st-b-subhero p{color:rgba(255,255,255,.8)}
.st-look-gift .st-b-crumb a{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.st-look-gift .st-b-crumb a .icon{color:var(--g-gold)}
.st-look-gift .st-b-crumb a:hover{background:rgba(255,255,255,.2);color:#fff}
.st-look-gift .st-b-crumb,.st-look-gift .st-b-crumb span{color:rgba(255,255,255,.6)}

/* 꼬리 — 위에 금색 → 쪽빛 띠 */
.st-look-gift .st-rfoot-branch{position:relative}
.st-look-gift .st-rfoot-branch::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--g-gold),var(--g-indigo))}

@media (prefers-reduced-motion:reduce){.st-g-act,.st-g-ev{transition:none}}
