/* ── /child : 성장기 아동 교정 ──
   styles.css·ux.css 뒤에 로드되며, 두 파일이 쓰는 토큰을 모두 덮어씀.
   ux.css의 :root가 --navy·--accent 등 별도 이름을 쓰므로 함께 지정해야 한다. */
:root, html{
  --paper:#f7fafc;          /* 아주 옅은 하늘빛 배경 */
  --paper-deep:#eaf2f8;
  --ink:#12263f;            /* 남색 계열 본문 */
  --ink-soft:#54697f;
  --hairline:#dfeaf2;
  --hairline-strong:#bcd4e6;
  --gold:#2f6fa8;           /* 포인트 */
  --gold-deep:#1d4f7c;
  --navy:#12263f;           /* ux.css 버튼·헤더용 */
  --accent:#2f6fa8;         /* ux.css 강조색 */
  --sky:#5aa9dd;
  --sky-soft:#d7ecf9;
}
/* ux.css의 sticky 헤더 배경이 기존 크림색으로 고정돼 있어 별도 지정 */
.site-header{background:rgba(247,250,252,.97)}
.site-footer{background:var(--paper)}
.consult-section{background:#e6eff7}

/* 히어로 */
.child-hero{padding:64px 0 46px;background:linear-gradient(180deg,#eaf4fb 0%,var(--paper) 100%)}
.child-hero .shell{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.child-hero h1{font-family:'Noto Serif KR',serif;font-weight:500;font-size:40px;line-height:1.35;margin:0 0 20px;color:var(--ink);letter-spacing:-0.01em}
.child-hero h1 em{font-style:normal;color:var(--gold)}
.child-hero .sub{font-size:16px;color:var(--ink-soft);line-height:1.85;margin:0 0 28px;max-width:44ch}
.child-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.04em;color:var(--gold-deep);margin:0 0 18px}
.child-hero .eyebrow span{width:7px;height:7px;background:var(--sky);border-radius:50%}
.hero-visual{position:relative}
.hero-visual img{width:100%;height:auto;display:block;border-radius:4px}

/* 연령 타임라인 */
.age-track{position:relative;margin:8px 0 0;padding:34px 0 0}
.age-track::before{content:"";position:absolute;left:4%;right:4%;top:46px;height:2px;background:linear-gradient(90deg,var(--sky-soft),var(--sky),var(--sky-soft))}
.age-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.age-step{text-align:center;padding-top:26px;position:relative}
.age-step::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid var(--sky)}
.age-step.key::before{background:var(--gold);border-color:var(--gold)}
.age-step .age-yr{display:block;font-family:'Noto Serif KR',serif;font-size:19px;color:var(--ink);margin-bottom:5px}
.age-step .age-lb{display:block;font-size:13px;color:var(--ink-soft);line-height:1.6}
@media(max-width:760px){
  .age-steps{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .age-track::before{display:none}
}

/* 고민 카드 */
.worry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.worry-card{display:block;padding:26px 22px 22px;background:#fff;border:1px solid var(--hairline);
  border-radius:4px;transition:.18s;text-decoration:none}
.worry-card:hover{border-color:var(--sky);transform:translateY(-2px);box-shadow:0 6px 18px rgba(47,111,168,.08)}
.worry-card .q{font-family:'Noto Serif KR',serif;font-size:17px;color:var(--ink);margin:0 0 9px;line-height:1.5}
.worry-card p{font-size:14px;color:var(--ink-soft);line-height:1.75;margin:0}
@media(max-width:860px){.worry-grid{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:560px){.worry-grid{grid-template-columns:1fr}}

/* 시기 안내 박스 */
.timing-box{background:var(--sky-soft);border-left:3px solid var(--sky);padding:26px 26px 22px;border-radius:0 4px 4px 0}
.timing-box h3{margin:0 0 12px;font-family:'Noto Serif KR',serif;font-weight:500;font-size:18px;color:var(--ink)}
.timing-box p{margin:0 0 10px;font-size:14.5px;color:var(--ink-soft);line-height:1.8}
.timing-box p:last-child{margin-bottom:0}

/* 상단 전환 링크 */
.site-switch{background:var(--ink);color:#a9c4da;font-size:12.5px;padding:8px 20px;
  display:flex;justify-content:center;align-items:center;gap:18px;letter-spacing:.01em}
.site-switch span{opacity:.85}
.site-switch a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.site-switch a:hover{border-color:var(--sky)}
@media(max-width:600px){.site-switch{gap:10px;font-size:11.5px;padding:7px 14px}.site-switch span{display:none}}
@media(max-width:700px){
  .child-hero{padding:38px 0 32px}
  .child-hero .shell{grid-template-columns:1fr;gap:28px}
  .child-hero h1{font-size:29px}
}

/* child 칼럼 목록 */
.kid-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.kid-col{border-top:1px solid var(--hairline-strong);padding:22px 0 26px;display:flex;flex-direction:column;min-width:0}
.kid-col .tag{font-size:12px;color:var(--gold-deep);margin:0 0 11px}
.kid-col h3{font-family:'Noto Serif KR',serif;font-weight:500;font-size:19px;line-height:1.6;margin:0 0 11px;letter-spacing:-.02em}
.kid-col h3 a:hover{color:var(--gold)}
.kid-col p:not(.tag){font-size:14.5px;line-height:1.8;color:var(--ink-soft);margin:0 0 18px}
.kid-col .more{font-size:13.5px;margin-top:auto;align-self:flex-start;color:var(--ink);border-bottom:1px solid var(--sky);padding-bottom:2px}
@media(max-width:860px){.kid-columns{grid-template-columns:1fr 1fr;gap:0 22px}}
@media(max-width:600px){.kid-columns{grid-template-columns:1fr}}

/* child — 칼럼 그리드 (성인 사이트와 동일 구조) */
#columns{background:#eef5fa}
#columns .sub{max-width:700px;font-size:15.5px;color:var(--ink-soft);margin:0 0 4px}
.child-page .col-item{border:0;border-top:1px solid var(--hairline-strong);padding:22px 0 28px;display:flex;flex-direction:column;margin:0;min-width:0}
.child-page .col-item .tag{font-size:12px;color:var(--gold-deep);margin:0 0 11px}
.child-page .col-item h3{font-family:'Noto Serif KR',serif;font-weight:500;font-size:20px;line-height:1.62;margin:0 0 11px;letter-spacing:-.025em}
.child-page .col-item h3 a:hover{color:var(--gold)}
.child-page .col-item>p:not(.tag){font-size:14.5px;line-height:1.82;color:var(--ink-soft);margin:0 0 20px}
.child-page .col-item .more{font-size:13.5px;margin-top:auto;align-self:flex-start;color:var(--ink);border:0}
.child-page .column-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 34px}
@media(max-width:860px){.child-page .column-grid{grid-template-columns:1fr 1fr;gap:0 22px}}
@media(max-width:600px){.child-page .column-grid{grid-template-columns:1fr}}

/* child — 케이스 */
.child-page .case-filters{display:flex;flex-wrap:wrap;gap:8px;margin-block:26px 28px}
.child-page .cf{font-size:14px;padding:9px 16px;border:1px solid var(--hairline-strong);border-radius:2px;
  min-height:42px;background:transparent;color:var(--ink-soft);cursor:pointer;font-family:inherit}
.child-page .cf.on{background:var(--gold);border-color:var(--gold);color:#fff}
.child-page .case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}
.case-empty-note{grid-column:1/-1;text-align:center;padding:46px 20px;background:#fff;
  border:1px dashed var(--hairline-strong);color:var(--ink-soft);font-size:14.5px;margin:0}
.child-page .case-note{font-size:13px;color:var(--ink-soft);margin-top:24px;line-height:1.8}
@media(max-width:860px){.child-page .case-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.child-page .case-grid{grid-template-columns:1fr}.child-page .cf{font-size:13px;padding:8px 12px}}
