/* v4.css — 스크롤 방향에 따른 GNB 숨김/노출, 스토리텔링 컴포넌트, 사진·영상 와이어프레임 */

/* ---------- GNB: 아래로 스크롤하면 숨김, 위로 스크롤하면 노출 ---------- */
.header{transition:background .3s linear,transform .4s cubic-bezier(.645,.045,.355,1)}
.header.hide{transform:translateY(-100%)}
.header.hide .gnb .depth2{visibility:hidden}

/* ---------- 사진·영상 와이어프레임 ---------- */
.wf{position:relative;width:100%;margin:0}
.wf-box{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center;border:2px dashed #B8C6D8;border-radius:18px;
  background:repeating-linear-gradient(135deg,#F4F7FA 0 14px,#EEF2F6 14px 28px);color:var(--engGray)}
.wf.r169{aspect-ratio:16/9}.wf.r43{aspect-ratio:4/3}.wf.r11{aspect-ratio:1/1}.wf.r916{aspect-ratio:9/16}
.wf-ic{display:flex;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--sub);align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,36,84,.08);margin-bottom:6px}
.wf-ic .ic{width:30px;height:30px}
.wf-video .wf-ic{background:var(--main);color:#fff}
.wf-tag{font-family:var(--eng);font-size:.722rem;font-weight:700;letter-spacing:.5px;color:var(--sub3)}
.wf-box strong{font-size:1rem;color:var(--black);letter-spacing:-.4px;line-height:1.4}
.wf-note{font-size:.778rem;line-height:1.55;max-width:30em;color:var(--engGray)}
.wf.sm .wf-ic{width:42px;height:42px}.wf.sm .wf-ic .ic{width:22px;height:22px}.wf.sm .wf-box{padding:14px;border-radius:14px}
.wf.mt{margin-top:28px}
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:28px}
.wf-grid .wf-box{padding:16px 12px}
.wf-grid .wf-note{font-size:.722rem}

/* ---------- 2단 배치 ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.split.wide-l{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.split.wide-r{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.split.mid{align-items:center}
.split .wf.r916{max-width:340px;margin:0 auto}

/* ---------- 스토리 도입 문단 ---------- */
.story-lead{position:relative;padding:30px 34px 30px 92px;margin-bottom:36px;border-radius:20px;background:#fff;border:1px solid var(--border)}
.story-lead .sl-ic{position:absolute;left:30px;top:30px;display:flex;width:42px;height:42px;border-radius:12px;background:var(--grayBg);color:var(--sub);align-items:center;justify-content:center}
.story-lead p{font-size:1.111rem;line-height:1.85;color:var(--black);max-width:40em}
.split .story-lead{margin-bottom:0}

/* ---------- 이런 순간 → 이렇게 도와드려요 ---------- */
.ig-scenes{display:grid;gap:14px}
.ig-scenes li{display:grid;grid-template-columns:1fr 1fr;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#fff}
.sc-q{display:flex;gap:14px;align-items:flex-start;padding:22px 22px;background:#F7F9FB}
.sc-ic{display:flex;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);color:var(--engGray);align-items:center;justify-content:center;flex:none}
.sc-q p{font-size:.944rem;line-height:1.65;color:var(--black);font-weight:500}
.sc-a{padding:22px 22px;background:#F2F8FE}
.sc-a b{display:flex;align-items:center;gap:6px;font-size:.778rem;color:var(--sub);margin-bottom:6px}
.sc-a b .ic{width:16px;height:16px}
.sc-a p{font-size:.944rem;line-height:1.65;color:var(--main);font-weight:600}

/* ---------- 지금 → 목표 ---------- */
.ig-goals ul{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ig-goals li{display:grid;grid-template-columns:46px 1fr 28px 1fr;gap:12px;align-items:center;padding:20px 22px;border-radius:18px;background:#fff;border:1px solid var(--border)}
.gl-ic{display:flex;width:46px;height:46px;border-radius:14px;background:var(--grayBg);color:var(--sub);align-items:center;justify-content:center}
.ig-goals em{display:block;font-family:var(--eng);font-size:.667rem;font-weight:700;letter-spacing:1px;margin-bottom:4px}
.gl-b em{color:var(--engGray)}.gl-a em{color:var(--brand-mint)}
.gl-b p{font-size:.889rem;line-height:1.55;color:var(--basic)}
.gl-a p{font-size:.944rem;line-height:1.55;color:var(--main);font-weight:700}
.gl-ar{color:#2F9ACF}
.ig-goals .ig-note{text-align:left}

/* ---------- 상담 대화 예시 ---------- */
.ig-chat{padding:26px 26px 22px;border-radius:20px;background:var(--grayBg)}
.ch-title{display:flex;align-items:center;gap:8px;font-size:.833rem;font-weight:700;color:var(--sub);margin-bottom:16px}
.ch-title .ic{width:18px;height:18px}
.ig-chat ol{display:grid;gap:12px}
.ig-chat li{max-width:86%;display:flex;flex-direction:column;gap:4px}
.ch-who{font-size:.722rem;font-weight:700;color:var(--engGray)}
.ig-chat li p{padding:14px 18px;border-radius:18px;font-size:.944rem;line-height:1.6}
.ch-g p{background:#fff;color:var(--black);border-top-left-radius:4px}
.ch-c{margin-left:auto;align-items:flex-end}
.ch-c p{background:var(--main);color:#fff;border-top-right-radius:4px}

/* ---------- 하루 루틴 ---------- */
.ig-routine ol{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.ig-routine ol::before{content:'';position:absolute;left:6%;right:6%;top:62px;height:2px;background:repeating-linear-gradient(90deg,#2F9ACF 0 6px,transparent 6px 12px)}
.ig-routine li{position:relative;text-align:center;padding:0 8px}
.rt-when{display:inline-block;font-size:.778rem;font-weight:700;color:var(--sub);background:#F2F8FE;border-radius:20px;padding:3px 12px;margin-bottom:12px}
.rt-ic{position:relative;z-index:1;display:flex;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:#fff;border:2px solid #2F9ACF;color:#1657AD;align-items:center;justify-content:center}
.rt-ic .ic{width:30px;height:30px}
.ig-routine h3{font-size:1.056rem;font-weight:700;color:var(--black);letter-spacing:-.4px}
.ig-routine p{font-size:.889rem;line-height:1.6;color:var(--basic);margin-top:6px}

/* ---------- FAQ TOP3 ---------- */
.ig-top3{display:grid;gap:12px}
.ig-top3 a{display:grid;grid-template-columns:auto 44px 1fr;grid-template-rows:auto auto auto;column-gap:14px;padding:20px 22px;border-radius:18px;border:1px solid var(--border);background:#fff;transition:box-shadow .3s,transform .3s}
.ig-top3 a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,36,84,.08)}
.t3-n{grid-row:1/4;font-family:var(--eng);font-weight:700;font-size:1.333rem;color:var(--sub3);align-self:center}
.t3-ic{grid-row:1/4;display:flex;width:44px;height:44px;border-radius:12px;background:var(--grayBg);color:var(--sub);align-items:center;justify-content:center;align-self:center}
.ig-top3 h3{font-size:1.056rem;font-weight:700;color:var(--black)}
.ig-top3 p{font-size:.889rem;line-height:1.6;color:var(--basic);margin:4px 0 6px}
.ig-top3 em{display:flex;align-items:center;gap:4px;font-size:.778rem;font-weight:700;color:var(--sub)}
.ig-top3 em .ic{width:14px;height:14px}

/* ---------- 재활사례 카드 사진 자리 ---------- */
.ig-cases .wf{margin-bottom:14px}

/* ---------- 메인 Story 섹션 ---------- */
#story{background:#fff}
#story .table{justify-content:center}
#story .story_in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:center;max-width:1180px;margin:34px auto 0;width:100%}
#story .ig-scenes{gap:10px}
#story .sc-q,#story .sc-a{padding:16px 18px}
#story .sc-q p,#story .sc-a p{font-size:.889rem}

/* ---------- 반응형 ---------- */
@media (max-height:870px){#story .story_in{max-width:1100px;margin-top:20px}#story .sc-q,#story .sc-a{padding:12px 16px}}
@media (max-width:980px){
  .split,.split.wide-l,.split.wide-r{grid-template-columns:1fr;gap:24px}
  .story-lead{padding:22px 20px 22px 20px}
  .story-lead .sl-ic{position:static;margin-bottom:12px}
  .story-lead p{font-size:1rem}
  .ig-scenes li{grid-template-columns:1fr}
  .ig-goals ul{grid-template-columns:1fr}
  .ig-goals li{grid-template-columns:40px 1fr;row-gap:10px;padding:16px}
  .gl-ar{display:none}.gl-a{grid-column:2}
  .gl-ic{width:40px;height:40px}
  .ig-routine ol{grid-template-columns:1fr 1fr;row-gap:28px}
  .ig-routine ol::before{display:none}
  .wf-grid{grid-template-columns:repeat(2,1fr)}
  .ig-chat li{max-width:94%}
  #story .story_in{grid-template-columns:1fr;gap:20px;margin-top:20px}
}
/* 큰 와이어프레임 폭 제한 */
.sub-sec .wf.r169.mt{max-width:820px;margin:28px auto 0}
.sub-sec .wf-map.r169{max-width:1000px;margin:0 auto}
.pf-body .wf.sm{max-width:520px;margin-top:20px}