/* ============================================================
   하위 페이지 공통 스타일 (about · programs · process · contact)
   style.css 다음에 링크한다. 토큰은 style.css :root 값을 그대로 쓴다.
   ============================================================ */
/* 소형 히어로 밴드 */
.pg{background:var(--teal-900);color:var(--ondark);position:relative;overflow:hidden;padding-block:clamp(56px,8vw,96px)}
.pg .mk{position:absolute;right:-4%;top:-20%;width:34%;opacity:.06;pointer-events:none}
.pg .wrap{position:relative;max-width:820px;margin-left:max(20px,(100% - 1120px)/2)}
.pg h1{font-size:clamp(30px,4.6vw,52px);line-height:1.2;margin-top:18px}
.pg h1 em{font-style:normal;color:var(--orange)}
.pg p{color:#C9D6DA;font-size:clamp(15px,1.5vw,18px);max-width:36em;margin:18px 0 0}

/* 섹션 변형 */
.s.tint{background:var(--teal-50)}
.lead{font-size:17px;max-width:44em;color:var(--muted)}

/* 그리드 */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* 패널: 틸 틴트 + 오렌지 좌측 3px 보더 (브랜드 강조 패널) */
.panel{background:var(--teal-100);border-left:3px solid var(--orange);padding:22px 24px}
.panel h3{font-size:18px;margin-bottom:8px}.panel p{margin:0;font-size:14.5px;color:var(--muted)}

/* 수치 타일 */
.tile{background:var(--panel);border-top:4px solid var(--teal-800);padding:24px 22px;box-shadow:0 2px 24px rgba(20,66,78,.06)}
.tile b{display:block;font-family:var(--fd);font-size:clamp(30px,3.6vw,42px);line-height:1;color:var(--teal-800);font-variant-numeric:tabular-nums}
.tile b small{font-size:.5em}
.tile span{display:block;margin-top:10px;font-size:13.5px;color:var(--muted)}
.tile i{display:block;margin-top:6px;font-size:12px;color:var(--muted);font-style:normal}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tile b{color:#BFDCE4}}

/* 표: 틸 헤더 + 옅은 지브라 + 헤어라인 */
.tblw{overflow-x:auto;margin-top:28px;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.tbl th{background:var(--teal-800);color:var(--ondark);text-align:left;font-weight:500;padding:11px 12px;font-size:13px;letter-spacing:.02em}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl tbody tr:nth-child(even) td{background:var(--teal-50)}
.tbl td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tfoot td{font-weight:700;background:var(--teal-100);border-bottom:0}
.tbl-cap{font-size:12.5px;color:var(--muted);margin-top:10px}
.tbl-cap a{color:var(--teal-800)}

/* 연혁 타임라인 */
.tl{list-style:none;margin:40px 0 0;padding:0;border-left:1px solid var(--hair)}
.tl li{position:relative;padding:0 0 26px 28px}
.tl li::before{content:"";position:absolute;left:-5px;top:9px;width:9px;height:9px;background:var(--orange)}
.tl b{font-family:var(--fd);font-size:20px;color:var(--teal-800);display:block;line-height:1;margin-bottom:6px}
.tl p{margin:0;font-size:14.5px;color:var(--muted)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tl b{color:#BFDCE4}}

/* 절차 타임라인(가로 6단) */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:44px;border-top:1px solid var(--hair)}
.flow .f{padding:24px 18px 22px 0;border-right:1px solid var(--hair)}
.flow .f:last-child{border-right:0}
.flow small{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--orange-600);display:block;line-height:1}
.flow h3{font-size:16px;margin:12px 0 8px}.flow p{margin:0;font-size:13.5px;color:var(--muted)}
@media(max-width:900px){.flow{grid-template-columns:repeat(3,1fr)}.flow .f:nth-child(3n){border-right:0}}
@media(max-width:560px){.flow{grid-template-columns:1fr 1fr}.flow .f:nth-child(3n){border-right:1px solid var(--hair)}.flow .f:nth-child(2n){border-right:0}}

/* STEAM 상세 행 */
.lens{display:grid;grid-template-columns:120px 1fr 260px;gap:32px;align-items:center;padding:34px 0;border-top:1px solid var(--hair)}
.lens:last-of-type{border-bottom:1px solid var(--hair)}
.lens .L{font-family:var(--fd);font-size:84px;line-height:1;color:var(--orange-600)}
.lens h3{font-size:22px;margin:6px 0 10px}.lens p{margin:0;color:var(--muted);font-size:15px}
.lens ul{margin:12px 0 0;padding-left:0;list-style:none;font-size:14px}
.lens li{padding-left:16px;position:relative;margin:4px 0}
.lens li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--teal-800)}
.lens figure{margin:0;aspect-ratio:1}
.lens img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 42%,rgba(0,0,0,.6) 56%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 42%,rgba(0,0,0,.6) 56%,transparent 72%)}
@media(max-width:820px){.lens{grid-template-columns:1fr;gap:12px}.lens .L{font-size:56px}.lens figure{width:min(60vw,240px)}}

/* 사례 벤토 그리드 */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,auto);gap:16px;margin-top:40px}
.bento .c{background:var(--panel);border-top:4px solid var(--teal-800);padding:24px 22px;box-shadow:0 2px 24px rgba(20,66,78,.06);display:flex;flex-direction:column}
.bento .c.big{grid-column:span 2;grid-row:span 2;background:var(--teal-800);color:var(--ondark);border-top-color:var(--orange)}
.bento .c.big p,.bento .c.big li{color:#C9D6DA}
.bento .k{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:500}
.bento .c.big .k{color:#F2B978}
.bento h3{font-size:19px;margin:8px 0 8px}.bento p{margin:0;font-size:14px;color:var(--muted)}
.bento .meta{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bento .c.big .meta{color:#9FB3BA}
.bento svg{width:100%;height:auto;margin-top:14px}
@media(max-width:820px){.bento{grid-template-columns:1fr}.bento .c.big{grid-column:auto;grid-row:auto}}

/* FAQ */
.faq{margin-top:36px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:baseline;padding:18px 0;font-weight:700;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--fd);font-weight:700;color:var(--orange-600);font-size:20px;flex:0 0 28px}
.faq summary::after{content:"+";margin-left:auto;color:var(--muted);font-weight:400;font-size:20px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px 44px;color:var(--muted);font-size:15px}

/* QR 시연 이미지 2장 */
.qr2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;max-width:620px;margin:32px auto 0}
.qr2 figure{margin:0;text-align:center}
.qr2 img{margin:0 auto;box-shadow:0 24px 50px -20px rgba(14,42,51,.45)}
.qr2 figcaption{font-size:12.5px;color:var(--muted);margin-top:10px}

/* 문의 폼 */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:36px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
.form label.full{grid-column:1/-1}
.form input,.form textarea{font:inherit;font-size:15px;color:var(--fg);background:var(--panel);border:1px solid var(--hair);padding:12px 14px;border-radius:2px;width:100%}
.form input:focus,.form textarea:focus{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange)}
.form input:user-invalid{border-color:var(--orange-600)}
.form textarea{min-height:140px;resize:vertical}
.form .act{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.form .act small{color:var(--muted);font-size:12.5px;width:100%}
.form button.btn{border:0;cursor:pointer;font-family:inherit}
.btn-t{background:var(--teal-800);color:var(--ondark)}
@media(max-width:600px){.form{grid-template-columns:1fr}}

/* 연락처 키-값 */
.kv{margin:32px 0 0;display:grid;grid-template-columns:110px 1fr;gap:12px 16px;font-size:15px}
.kv dt{color:var(--muted);font-size:13.5px;padding-top:2px}.kv dd{margin:0}
.kv a{color:var(--teal-800);text-decoration:none;border-bottom:1px solid var(--hair)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .kv a{color:#BFDCE4}}
.need{color:var(--muted);font-size:12.5px}

/* 모션 축소: 하위 페이지 전용 전환 없음 */
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ── 2차 삽화 ─────────────────────────────────────────── */
.card .ci{margin:-28px -26px 20px;aspect-ratio:4/3;overflow:hidden;background:var(--teal-100)}
.card .ci img{width:100%;height:100%;object-fit:cover;display:block}
.pics figure{margin:0;overflow:hidden;background:var(--teal-100)}
.pics img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.pics figcaption{font-size:13px;color:var(--muted);padding:10px 2px 0}
.panel .ico{width:64px;height:64px;margin-bottom:12px;display:block}
.s.map{background:var(--teal-50) url(../img/map_wash.jpg) center/cover no-repeat}
.s.map{background-image:image-set(url(../img/map_wash.webp) type("image/webp"),url(../img/map_wash.jpg) type("image/jpeg"))}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .s.map{background-image:none}}

/* 제안 요청 폼: 로봇용 숨은 칸 · 전송 상태 */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.req-status{width:100%;margin:6px 0 0;font-size:14px;min-height:1.4em}
.req-status.ok{color:var(--teal-800);font-weight:700}.req-status.err{color:var(--orange-600);font-weight:700}

/* 동의 체크박스 · 개인정보처리방침 본문 */
.form label.consent{flex-direction:row;align-items:flex-start;gap:10px;font-size:13px;line-height:1.55;color:var(--muted)}
.form label.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--teal-800);flex:0 0 auto}
.form label.consent a{color:var(--teal-800)}
.legal h2{font-size:20px;margin:40px 0 12px}.legal h2:first-of-type{margin-top:24px}
.legal p,.legal li{font-size:15px;color:var(--fg)}.legal ul{padding-left:20px}.legal li{margin:6px 0}
.legal .tbl{min-width:0}.legal .kv{margin-top:16px}

/* 사례 사진 갤러리(가로 스냅) */
.gal{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:18px;padding-bottom:6px;scrollbar-width:thin}
.gal figure{flex:0 0 min(72%,420px);scroll-snap-align:start;margin:0;cursor:zoom-in}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:rgba(255,255,255,.06)}
.gal figcaption{font-size:12px;color:#C9D6DA;margin-top:6px;line-height:1.4}.gal figcaption b{color:#F2B978;font-weight:500;letter-spacing:.06em;margin-right:6px}
.gal figure:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.gal-note{font-size:12px;color:#9FB3BA;margin:8px 0 0}
.lb img{background:#000}