/*
Theme Name: AI스마트가든
Theme URI: https://smartgardenedu.smartfarmas.com
Author: 스마트팜
Description: 학교·교육기관을 위한 AI스마트가든 교육형 브랜드 사이트 테마
Version: 1.0
Text Domain: aismartgarden
*/

:root{
  --white:#ffffff;
  --beige:#f4efe6;
  --beige-deep:#e9e0cf;
  --green:#3f6b4a;
  --green-deep:#2c4d35;
  --green-soft:#7fa87e;
  --charcoal:#232420;
  --ink:#2a2a26;
  --muted:#6b6a63;
  --radius:14px;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.3;margin:0 0 .5em}
.eyebrow{
  display:inline-block;font-size:.85rem;letter-spacing:.14em;
  color:var(--green);font-weight:700;text-transform:uppercase;margin-bottom:14px;
}
.section{padding:88px 0}
.section--tight{padding:56px 0}
.section--beige{background:var(--beige)}
.section--charcoal{background:var(--charcoal);color:#f2f0e8}
.section--charcoal .eyebrow{color:var(--green-soft)}
.center{text-align:center}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 30px;border-radius:999px;font-weight:700;font-size:1rem;
  border:2px solid var(--green-deep);transition:transform .15s ease,background .2s ease;
}
.btn--solid{background:var(--green-deep);color:#fff}
.btn--solid:hover{background:var(--green);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.btn--ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn--dark{border-color:var(--charcoal);color:var(--charcoal)}
.btn--dark:hover{background:var(--charcoal);color:#fff}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.site-logo{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--green-deep)}
.site-nav{display:none;gap:28px}
.site-nav a{font-size:.95rem;font-weight:600;color:var(--ink)}
.site-nav a:hover{color:var(--green-deep)}
.header-cta{display:flex;align-items:center;gap:10px}
.header-cta .btn{padding:11px 18px;font-size:.9rem}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-toggle-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;cursor:pointer}
.nav-toggle-btn span{display:block;width:100%;height:2px;background:var(--ink)}
@media(min-width:960px){.site-nav{display:flex}}
@media(max-width:959px){
  .nav-toggle-btn{display:flex}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;padding:8px 24px;border-bottom:1px solid rgba(0,0,0,.06)}
  .site-nav a{padding:14px 0;border-top:1px solid rgba(0,0,0,.06)}
  .nav-toggle:checked ~ .site-nav{display:flex}
}

/* 배경 사진을 실제 <img> alt 태그로 노출하기 위한 공통 클래스 */
.imgbg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* hero */
.hero{position:relative;height:80vh;min-height:480px;overflow:hidden}
.hero-content{padding:48px 0 56px}
.hero-content h1{font-size:1.8rem;letter-spacing:.18em;font-weight:700;color:var(--green);text-transform:uppercase;margin-bottom:22px}
.hero-headline{font-size:1.08rem;font-weight:800;letter-spacing:-.02em;margin:0 0 20px;color:var(--ink)}
.hero-sub{max-width:560px;font-size:1.08rem;color:var(--muted);margin-bottom:34px}

/* visual story */
.story-block{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.story-block::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,10,.72) 0%,rgba(10,14,10,.15) 60%)}
.story-inner{position:relative;z-index:1;max-width:520px;padding:0 24px}
.story-q{font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:800;margin-bottom:16px}
.story-a{font-size:1.05rem;color:rgba(255,255,255,.9)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in-view{opacity:1;transform:none}
.story-quote{padding:70px 0;text-align:center;background:var(--beige)}
.story-quote p{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700;color:var(--green-deep);max-width:720px;margin:0 auto;line-height:1.6}

/* section head */
.section-head{max-width:640px;margin-bottom:48px}
.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;letter-spacing:-.01em}
.section-head p{color:var(--muted);font-size:1.05rem}

/* case archive - horizontal scroll */
.archive-scroller{display:flex;gap:22px;overflow-x:auto;padding:6px 0 20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.archive-scroller::-webkit-scrollbar{height:8px}
.archive-scroller::-webkit-scrollbar-thumb{background:var(--beige-deep);border-radius:8px}
.archive-card{flex:0 0 82%;max-width:560px;scroll-snap-align:start}
.archive-card img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover}
.archive-card h3{margin-top:20px;font-size:1.3rem;font-weight:800}
.archive-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0;font-size:.92rem;color:var(--muted)}
.archive-meta b{color:var(--ink)}
.archive-card p{color:var(--muted)}
@media(min-width:720px){.archive-card{flex-basis:44%}}
@media(min-width:1100px){.archive-card{flex-basis:32%}}

/* programs timeline */
.program-row{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding:36px 0;border-top:1px solid rgba(0,0,0,.08)}
.program-row:last-child{border-bottom:1px solid rgba(0,0,0,.08)}
.program-num{font-size:.85rem;letter-spacing:.12em;font-weight:800;color:var(--green)}
.program-row h3{font-size:1.5rem;font-weight:800;margin:6px 0 10px}
.program-row img{border-radius:var(--radius);aspect-ratio:16/10;object-fit:cover}
@media(min-width:860px){
  .program-row{grid-template-columns:1fr 1.1fr;gap:48px}
  .program-row.reverse .program-media{order:2}
}

/* experience Q flow */
.qa-grid{display:grid;gap:20px;grid-template-columns:1fr}
.qa-card{background:var(--white);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:26px}
.qa-card .q{font-weight:800;font-size:1.08rem;margin-bottom:10px;color:var(--ink)}
.qa-card .a{color:var(--muted)}
.qa-card .a b{color:var(--green-deep)}
@media(min-width:860px){.qa-grid{grid-template-columns:repeat(3,1fr)}}
.flow-line{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:44px 0 8px;font-weight:700;color:var(--white)}
.flow-line span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:10px 16px;border-radius:999px;font-size:.92rem}
.flow-line i{opacity:.5}

/* operation steps */
.op-grid{display:grid;grid-template-columns:1fr;gap:24px}
.op-card{background:var(--white);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(0,0,0,.07)}
.op-card img{aspect-ratio:4/3;object-fit:cover}
.op-card .op-body{padding:20px 22px}
.op-card .op-num{font-size:1.8rem;font-weight:800;color:var(--beige-deep);display:block;margin-bottom:4px}
.op-card h3{font-size:1.15rem;font-weight:800;margin-bottom:6px}
.op-card p{color:var(--muted);font-size:.96rem;margin:0}
@media(min-width:720px){.op-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.op-grid{grid-template-columns:repeat(5,1fr)}}

/* gallery strip */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gallery-grid img{border-radius:10px;aspect-ratio:1/1;object-fit:cover}
@media(min-width:640px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.gallery-grid{grid-template-columns:repeat(6,1fr)}}

/* seo text */
.prose{max-width:760px;font-size:1.05rem;color:var(--ink)}
.prose p{margin:0 0 1.3em}
.prose h3{font-size:1.25rem;font-weight:800;margin:1.6em 0 .6em}

/* faq */
.faq-list{max-width:820px}
.faq-item{border-bottom:1px solid rgba(0,0,0,.1);padding:6px 0}
.faq-item summary{
  cursor:pointer;list-style:none;font-weight:700;font-size:1.05rem;
  padding:18px 34px 18px 0;position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:4px;top:14px;font-size:1.4rem;color:var(--green);
}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-a{padding:0 0 22px;color:var(--muted)}

/* final cta */
.final-cta{text-align:center;padding:48px 0;background:var(--green-deep);color:#fff}
.final-cta h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;margin-bottom:16px}
.final-cta p{color:rgba(255,255,255,.88);max-width:540px;margin:0 auto 34px}
.final-cta .btn{background:#fff;color:var(--green-deep);border-color:#fff;font-size:.95rem;padding:13px 26px}
.final-cta .btn:hover{background:var(--beige);transform:translateY(-2px)}

/* footer */
.site-footer{background:var(--charcoal);color:rgba(255,255,255,.72);padding:52px 0 100px;font-size:.92rem}
.site-footer .foot-brand{color:#fff;font-weight:800;font-size:1.15rem;margin-bottom:14px}
.site-footer dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.site-footer dt{color:rgba(255,255,255,.5)}
.site-footer dd{margin:0}
.site-footer .foot-sites{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.site-footer .foot-sites-label{color:rgba(255,255,255,.5);font-size:.82rem;margin:0 0 10px}
.site-footer .foot-sites ul{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0}
.site-footer .foot-sites a{color:rgba(255,255,255,.72);font-size:.82rem;text-decoration:underline}
.site-footer .foot-bottom{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.4);font-size:.82rem}

/* mobile sticky cta */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;background:#fff;box-shadow:0 -4px 18px rgba(0,0,0,.12);
}
.mobile-cta a{flex:1;text-align:center;padding:16px 8px;font-weight:800}
.mobile-cta a.call{background:var(--charcoal);color:#fff}
.mobile-cta a.consult{background:var(--green-deep);color:#fff}
@media(min-width:960px){.mobile-cta{display:none}}
body{padding-bottom:64px}
@media(min-width:960px){body{padding-bottom:0}}

/* ===== 상세페이지 공통(스타일 무관) ===== */
.detail{--accent:var(--green-deep)}
.detail-h1{display:block;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.8;margin-bottom:14px;color:inherit}
.breadcrumb{padding:18px 0;font-size:.85rem;color:var(--muted)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.detail .eyebrow{color:var(--accent)}
.detail .btn--solid{background:var(--accent);border-color:var(--accent)}
.detail .program-num,.detail .archive-meta b{color:var(--accent)}
.detail-related{padding:40px 0 80px}
.detail-related h3{font-size:1.1rem;font-weight:800;margin-bottom:16px}
.detail-related ul{display:flex;flex-wrap:wrap;gap:10px 16px;padding:0;margin:0;list-style:none}
.detail-related a{font-size:.92rem;padding:9px 16px;border:1px solid rgba(0,0,0,.12);border-radius:999px;color:var(--ink)}
.detail-related a:hover{border-color:var(--accent);color:var(--accent)}
.lead-answer{font-size:1.15rem;font-weight:600;max-width:720px;padding:14px 20px;border-left:4px solid var(--accent);background:var(--beige);border-radius:0 10px 10px 0;margin-bottom:36px}
.geo-table,.data-table{width:100%;border-collapse:collapse;margin:36px 0;border:1px solid rgba(0,0,0,.1);border-radius:var(--radius);overflow:hidden}
.geo-table tr,.data-table tr{border-top:1px solid rgba(0,0,0,.08)}
.geo-table tr:first-child,.data-table tr:first-child{border-top:none}
.geo-table th,.geo-table td,.data-table th,.data-table td{padding:16px 20px;text-align:left;vertical-align:top}
.geo-table th{width:120px;color:var(--accent);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;background:var(--beige)}
.geo-table td{color:var(--ink)}
.data-table caption{caption-side:top;text-align:left;font-weight:800;font-size:1.1rem;margin-bottom:10px}
.data-table thead th{background:var(--accent);color:#fff;font-weight:800;font-size:.88rem}
.data-table td{color:var(--muted)}
.data-table tbody tr:nth-child(even){background:var(--beige)}
@media(max-width:640px){.geo-table th,.geo-table td,.data-table th,.data-table td{padding:12px 14px;font-size:.92rem}.geo-table th{width:96px}}
.hero-answer{font-size:1.1rem;font-weight:600;max-width:640px;margin:0 0 18px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.updated-date{color:var(--muted);font-size:.82rem}

/* ---- 스타일 A: 파노라마 ---- */
.dA-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.dA-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,18,.1) 0%,rgba(10,14,10,.75) 100%)}
.dA-hero-inner{position:relative;z-index:1;padding:52px 0 60px}
.dA-hero-inner h2{font-size:clamp(1.8rem,4.2vw,3rem);font-weight:800;max-width:760px}

/* ---- 스타일 B: 스플릿 ---- */
.dB-hero{display:grid;grid-template-columns:1fr;gap:0;background:var(--beige)}
.dB-hero-text{padding:64px 24px;display:flex;flex-direction:column;justify-content:center}
.dB-hero-text h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800}
.dB-hero-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(min-width:860px){.dB-hero{grid-template-columns:1fr 1fr;align-items:stretch}.dB-hero-text{padding:64px 56px}}
.dB-row{display:grid;grid-template-columns:1fr;gap:24px;padding:34px 0;align-items:center}
.dB-row img{border-radius:var(--radius);aspect-ratio:16/10;object-fit:cover}
@media(min-width:860px){.dB-row{grid-template-columns:1fr 1fr;gap:44px}.dB-row.rev .dB-media{order:2}}

/* ---- 스타일 C: 매거진 ---- */
.dC-hero{position:relative;overflow:hidden;background:var(--charcoal);color:#f2f0e8;padding:70px 0 56px}
.dC-hero .wrap{position:relative;z-index:1}
.dC-hero h2{font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:800;max-width:820px}
.dC-hero p{color:rgba(255,255,255,.72);max-width:600px;font-size:1.05rem}
.dC-quote{text-align:center;padding:60px 24px;font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700;color:var(--accent);max-width:760px;margin:0 auto}
.masonry{columns:1;gap:14px}
.masonry img{width:100%;margin-bottom:14px;border-radius:10px;break-inside:avoid}
@media(min-width:640px){.masonry{columns:2}}
@media(min-width:960px){.masonry{columns:3}}

/* ---- 스타일 D: 타임라인 ---- */
.dD-hero{max-width:var(--maxw);margin:0 auto;padding:48px 24px 0}
.dD-hero img{border-radius:var(--radius);aspect-ratio:21/9;object-fit:cover;width:100%}
.dD-hero h2{margin-top:28px;font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800}
.timeline{position:relative;padding:20px 0}
.timeline::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:2px;background:rgba(0,0,0,.1)}
.timeline-item{position:relative;padding:0 0 40px 54px}
.timeline-item::before{content:"";position:absolute;left:12px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--white)}
.timeline-item h3{font-size:1.2rem;font-weight:800;margin-bottom:6px}
.timeline-item p{color:var(--muted);margin:0}
@media(min-width:860px){
  .timeline::before{left:50%}
  .timeline-item{width:46%;padding:0 0 50px}
  .timeline-item:nth-child(odd){margin-right:54%}
  .timeline-item:nth-child(even){margin-left:54%}
  .timeline-item::before{left:auto}
  .timeline-item:nth-child(odd)::before{right:-35px}
  .timeline-item:nth-child(even)::before{left:-35px}
}

/* ---- 스타일 E: 비교 ---- */
.dE-hero{position:relative;min-height:46vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.dE-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,10,.35),rgba(10,14,10,.7))}
.dE-hero-inner{position:relative;z-index:1;padding:40px 0}
.dE-hero-inner h2{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:800;max-width:700px}
.compare{display:grid;grid-template-columns:1fr;gap:16px;margin:30px 0}
.compare .col{border-radius:var(--radius);padding:26px}
.compare .col.old{background:var(--beige);color:var(--muted)}
.compare .col.new{background:var(--accent);color:#fff}
.compare .col b{display:block;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;opacity:.85}
.compare .col ul{margin:0;padding-left:18px}
.compare .col li{margin-bottom:8px}
@media(min-width:760px){.compare{grid-template-columns:1fr 1fr}}

/* ===== 지역 허브 페이지 ===== */
.region-group{padding:34px 0}
.region-group:first-child{padding-top:0}
.region-group h3{font-size:1.3rem;font-weight:800;display:flex;align-items:center}
.region-group-desc{color:var(--muted);margin:0 0 22px}
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.region-card{display:block;background:var(--white);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(0,0,0,.07);transition:transform .2s ease,box-shadow .2s ease}
.region-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.1)}
.region-card-media{overflow:hidden;aspect-ratio:4/3}
.region-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.region-card:hover .region-card-media img{transform:scale(1.06)}
.region-card-body{padding:18px 20px}
.region-card-body h4{font-size:1.08rem;font-weight:800;margin:0 0 8px}
.region-card-body p{color:var(--muted);font-size:.92rem;margin:0 0 14px}
.region-card-link{font-weight:700;font-size:.9rem;color:var(--green-deep)}

.region-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:720px){.region-gallery-grid{grid-template-columns:repeat(4,1fr)}}
.gallery-tile{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:1/1}
.gallery-tile.wide{grid-column:span 2;aspect-ratio:21/9}
.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery-tile:hover img{transform:scale(1.06)}
.gallery-tile-caption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;font-size:.85rem;background:linear-gradient(0deg,rgba(10,14,10,.75),transparent)}
.gallery-tile-caption b{display:block;font-size:.95rem;margin-bottom:2px}

/* ---- 스타일 F: 갤러리 ---- */
.dF-hero{padding:46px 0 10px}
.dF-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:720px}
.dF-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0 40px}
.dF-grid img{border-radius:10px;aspect-ratio:1/1;object-fit:cover}
.dF-grid .wide{grid-column:span 2;aspect-ratio:21/9}
@media(min-width:720px){.dF-grid{grid-template-columns:repeat(4,1fr)}}

/* ---- 스타일 G: 질문형(문제해결) ---- */
.dG-hero{position:relative;min-height:58vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.dG-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,10,.45),rgba(10,14,10,.82))}
.dG-hero-inner{position:relative;z-index:1;padding:44px 0}
.dG-question{font-size:clamp(1.4rem,3.2vw,2.2rem);font-weight:800;max-width:720px;font-style:italic}
.dG-question::before{content:"“"}.dG-question::after{content:"”"}
.dG-problems{display:grid;grid-template-columns:1fr;gap:16px;margin:30px 0}
.dG-problem-card{background:var(--white);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:24px;border-left:4px solid var(--accent)}
.dG-problem-q{font-weight:800;font-size:1.02rem;margin-bottom:10px;color:var(--ink)}
.dG-problem-q::before{content:"Q. "; color:var(--accent)}
.dG-problem-a{color:var(--muted)}
.dG-problem-a b{color:var(--accent);margin-right:6px}
@media(min-width:860px){.dG-problems{grid-template-columns:repeat(2,1fr)}}

/* ---- 스타일 H: 포토 에세이(대형 갤러리) ---- */
.dH-hero{position:relative;min-height:64vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.dH-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,18,.05),rgba(10,14,10,.7))}
.dH-hero-inner{position:relative;z-index:1;padding:40px 0 48px}
.dH-hero-inner h2{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:800;max-width:760px}
.dH-story{padding:20px 0}
.dH-item{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:8px}
.dH-item img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
.dH-item .dH-cap{padding:16px 4px 40px;max-width:520px;font-size:1.02rem;color:var(--muted)}
.dH-item:nth-child(even) .dH-cap{margin-left:auto;text-align:right}
.dH-item .dH-num{display:block;font-size:.8rem;letter-spacing:.1em;font-weight:800;color:var(--accent);margin-bottom:6px}

/* ---- 스타일 K: 단계별 프로세스 레일 ---- */
.dK-hero{padding:48px 0 10px}
.dK-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:760px}
.dK-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:24px}
.dK-rail{display:flex;gap:18px;overflow-x:auto;padding:36px 4px;scroll-snap-type:x mandatory}
.dK-rail::-webkit-scrollbar{height:8px}
.dK-rail::-webkit-scrollbar-thumb{background:var(--beige-deep);border-radius:8px}
.dK-step{flex:0 0 240px;scroll-snap-align:start;position:relative;padding-top:44px}
.dK-step::before{content:attr(data-num);position:absolute;top:0;left:0;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.88rem}
.dK-step::after{content:"";position:absolute;top:17px;left:34px;right:-18px;height:2px;background:rgba(0,0,0,.1)}
.dK-step:last-child::after{display:none}
.dK-step h3{font-size:1.1rem;font-weight:800;margin:0 0 8px}
.dK-step p{color:var(--muted);font-size:.92rem;margin:0}
@media(min-width:960px){.dK-rail{overflow:visible;flex-wrap:wrap}}

/* ---- 스타일 M: 공간 설계(존 배치) ---- */
.dM-hero{position:relative;min-height:52vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.dM-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,10,.78) 0%,rgba(10,14,10,.2) 65%)}
.dM-hero-inner{position:relative;z-index:1;padding:40px 0;max-width:640px}
.dM-zones{display:grid;grid-template-columns:1fr;gap:20px;margin:30px 0}
.dM-zone{position:relative;background:var(--white);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);overflow:hidden}
.dM-zone img{width:100%;aspect-ratio:16/10;object-fit:cover}
.dM-zone-badge{position:absolute;top:14px;left:14px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.dM-zone-body{padding:20px 22px}
.dM-zone-body h3{font-size:1.1rem;font-weight:800;margin:0 0 8px}
.dM-zone-body p{color:var(--muted);font-size:.94rem;margin:0}
@media(min-width:860px){.dM-zones{grid-template-columns:repeat(2,1fr)}}
.dM-checklist{list-style:none;margin:30px 0;padding:0;max-width:700px}
.dM-checklist li{position:relative;padding:12px 0 12px 32px;border-top:1px solid rgba(0,0,0,.08);color:var(--ink)}
.dM-checklist li:before{content:"✓";position:absolute;left:0;top:12px;color:var(--accent);font-weight:800}

/* ---- 스타일 S: 제안서 ---- */
.dS-hero{background:var(--charcoal);color:#f2f0e8;padding:56px 0 0;position:relative;overflow:hidden}
.dS-doc-tag{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:999px;margin-bottom:18px;color:rgba(255,255,255,.8)}
.dS-hero h2{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:800;max-width:760px}
.dS-hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);font-size:.88rem;color:rgba(255,255,255,.65)}
.dS-hero-meta b{color:#fff}
.dS-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;margin-top:40px;opacity:.92}

/* ---- 스타일 J: 수업계획서 ---- */
.dJ-hero{padding:44px 0 0}
.dJ-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-bottom:28px}
.dJ-sheet{border:1px dashed rgba(0,0,0,.25);border-radius:var(--radius);padding:28px;background:var(--beige)}
.dJ-sheet h2{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:800;margin-bottom:18px}
.dJ-info{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px}
.dJ-info div{background:var(--white);border-radius:10px;padding:12px 16px}
.dJ-info b{display:block;font-size:.78rem;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
@media(min-width:720px){.dJ-info{grid-template-columns:repeat(4,1fr)}}
.dJ-activities{counter-reset:dj;list-style:none;margin:30px 0;padding:0}
.dJ-activities li{counter-increment:dj;position:relative;padding:14px 0 14px 44px;border-top:1px solid rgba(0,0,0,.08)}
.dJ-activities li::before{content:counter(dj);position:absolute;left:0;top:14px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.dJ-activities b{display:block;margin-bottom:4px}
.dJ-activities span{color:var(--muted);font-size:.94rem}

/* ---- 스타일 L: 코딩 인터페이스 ---- */
.dL-hero{background:var(--charcoal);color:#f2f0e8;padding:56px 0}
.dL-hero h2{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:800;max-width:760px}
.dL-code{background:#1b1c19;color:#d7e4d0;border-radius:var(--radius);padding:24px 26px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92rem;line-height:1.9;margin-top:28px;overflow-x:auto;white-space:pre}
.dL-code .kw{color:#7fb3ff}.dL-code .fn{color:#f2c96b}.dL-code .cm{color:#7a8577}
.dL-flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:36px 0 8px;font-weight:700}
.dL-flow span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:10px 16px;border-radius:999px;font-size:.9rem;color:#fff}
.dL-flow i{opacity:.5;color:#fff}
.dL-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:36px}

/* ---- 스타일 N: 체험 스토리(시간대) ---- */
.dN-hero{position:relative;min-height:56vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.dN-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,10,.3),rgba(10,14,10,.78))}
.dN-hero-inner{position:relative;z-index:1;padding:40px 0}
.dN-hero-inner h2{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:800;max-width:700px}
.dN-story{margin:30px 0}
.dN-panel{display:grid;grid-template-columns:1fr;gap:16px;padding:28px 0;border-top:1px solid rgba(0,0,0,.08)}
.dN-panel:first-child{border-top:none}
.dN-tag{display:inline-block;background:var(--accent);color:#fff;font-size:.8rem;font-weight:800;padding:5px 14px;border-radius:999px;margin-bottom:10px}
.dN-panel img{border-radius:var(--radius);aspect-ratio:16/10;object-fit:cover}
.dN-panel p{margin:0;font-size:1.03rem}
@media(min-width:860px){.dN-panel{grid-template-columns:1fr 1.2fr;align-items:center}.dN-panel:nth-child(even) .dN-media{order:2}}

/* ---- 스타일 Q: 기술 체험 워크숍(스테이션) ---- */
.dQ-hero{padding:46px 0 8px}
.dQ-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:740px}
.dQ-rail{display:flex;gap:20px;overflow-x:auto;padding:28px 2px 36px;scroll-snap-type:x mandatory}
.dQ-rail::-webkit-scrollbar{height:8px}
.dQ-rail::-webkit-scrollbar-thumb{background:var(--beige-deep);border-radius:8px}
.dQ-station{flex:0 0 260px;scroll-snap-align:start;background:var(--white);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);overflow:hidden}
.dQ-station img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dQ-station-body{padding:16px 18px}
.dQ-station-tag{font-size:.76rem;font-weight:800;letter-spacing:.08em;color:var(--accent);text-transform:uppercase}
.dQ-station-body h3{font-size:1.05rem;font-weight:800;margin:6px 0 8px}
.dQ-station-body p{color:var(--muted);font-size:.92rem;margin:0}
@media(min-width:1100px){.dQ-rail{overflow:visible;flex-wrap:wrap}.dQ-station{flex:1 1 22%}}

/* ---- 스타일 R: 융합 도메인 카드 ---- */
.dR-hero{padding:48px 0 8px}
.dR-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:740px}
.dR-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:24px}
.dR-domains{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0}
.dR-domain{background:var(--white);border:1px solid rgba(0,0,0,.08);border-left:4px solid var(--accent);border-radius:10px;padding:20px}
.dR-domain b{display:block;color:var(--accent);font-size:.95rem;font-weight:800;margin-bottom:6px}
.dR-domain p{margin:0;color:var(--muted);font-size:.92rem}
@media(min-width:720px){.dR-domains{grid-template-columns:repeat(3,1fr)}}
.dF-text{max-width:720px;margin:0 auto 30px}

/* ---- 스타일 I: 진로 시나리오 ---- */
.dI-hero{position:relative;min-height:52vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.dI-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,10,.35),rgba(10,14,10,.76))}
.dI-hero-inner{position:relative;z-index:1;padding:40px 0}
.dI-hero-inner h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;max-width:700px}
.dI-scenarios{margin:30px 0}
.dI-scenario{padding:26px 28px;border-radius:var(--radius);margin-bottom:16px}
.dI-scenario:nth-child(odd){background:var(--beige)}
.dI-scenario:nth-child(even){background:var(--white);border:1px solid rgba(0,0,0,.08)}
.dI-scenario b{display:block;color:var(--accent);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.dI-scenario p{margin:0;font-size:1.05rem;line-height:1.75}

/* ---- 스타일 O: 대상별 비교 ---- */
.dO-hero{padding:48px 0 8px}
.dO-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:740px}
.dO-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:24px}

/* ---- 스타일 P: 로드맵(마일스톤) ---- */
.dP-hero{padding:48px 0 8px}
.dP-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:740px}
.dP-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:24px}
.dP-road{position:relative;padding:20px 0 0 44px;margin:30px 0}
.dP-road::before{content:"";position:absolute;left:15px;top:8px;bottom:24px;width:2px;background:rgba(0,0,0,.1)}
.dP-milestone{position:relative;padding-bottom:36px}
.dP-milestone::before{content:attr(data-step);position:absolute;left:-44px;top:2px;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.dP-milestone h3{font-size:1.15rem;font-weight:800;margin:0 0 8px}
.dP-milestone p{color:var(--muted);margin:0}

/* ---- 스타일 T: 전문 서비스 소개 ---- */
.dT-hero{background:var(--charcoal);color:#f2f0e8;padding:56px 0}
.dT-tag{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:999px;margin-bottom:18px;color:rgba(255,255,255,.8)}
.dT-hero h2{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:800;max-width:760px}
.dT-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:36px;opacity:.92}
.dT-pillars{display:grid;grid-template-columns:1fr;gap:20px;margin:30px 0}
.dT-pillar{border-top:3px solid var(--accent);padding-top:16px}
.dT-pillar span{font-size:1.6rem;font-weight:800;color:var(--beige-deep);display:block;margin-bottom:8px}
.dT-pillar h3{font-size:1.1rem;font-weight:800;margin:0 0 8px}
.dT-pillar p{color:var(--muted);margin:0;font-size:.94rem}
@media(min-width:860px){.dT-pillars{grid-template-columns:repeat(3,1fr)}}

/* ---- 스타일 U: 오감 체험 카드 ---- */
.dU-hero{padding:46px 0 8px}
.dU-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:720px}
.dU-senses{display:grid;grid-template-columns:1fr;gap:16px;margin:28px 0}
.dU-sense{background:var(--white);border-radius:20px;overflow:hidden;border:1px solid rgba(0,0,0,.07)}
.dU-sense img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dU-sense-body{padding:18px 20px}
.dU-sense-body b{color:var(--accent);font-size:1.02rem;font-weight:800;display:block;margin-bottom:6px}
.dU-sense-body p{margin:0;color:var(--muted);font-size:.94rem}
@media(min-width:720px){.dU-senses{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.dU-senses{grid-template-columns:repeat(4,1fr)}}

/* ---- 스타일 V: 메이커 빌드로그 ---- */
.dV-hero{padding:48px 0 8px}
.dV-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:740px}
.dV-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:24px}
.dV-build{margin:30px 0}
.dV-step{display:flex;gap:16px;align-items:flex-start;background:var(--white);border-radius:12px;padding:18px 20px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.dV-step-mark{flex:0 0 30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.dV-step h3{font-size:1.05rem;font-weight:800;margin:0 0 6px}
.dV-step p{margin:0;color:var(--muted);font-size:.94rem}

/* ---- 스타일 W: 협업 보드(칸반) ---- */
.dW-hero{padding:48px 0 8px}
.dW-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:740px}
.dW-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:24px}
.dW-board{display:flex;gap:16px;overflow-x:auto;padding:28px 2px 36px}
.dW-col{flex:0 0 240px;background:var(--beige);border-radius:var(--radius);padding:16px}
.dW-col h3{font-size:.95rem;font-weight:800;letter-spacing:.04em;color:var(--accent);text-transform:uppercase;margin:0 0 12px}
.dW-col-item{background:var(--white);border-radius:8px;padding:12px 14px;margin-bottom:10px;font-size:.92rem;box-shadow:0 1px 4px rgba(0,0,0,.06)}
@media(min-width:960px){.dW-board{overflow:visible;flex-wrap:wrap}.dW-col{flex:1 1 22%}}

/* ---- 스타일 X: 니즈 매칭 ---- */
.dX-hero{padding:48px 0 8px}
.dX-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:740px}
.dX-hero-img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:24px}
.dX-matches{margin:30px 0}
.dX-match{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:18px 0;border-top:1px solid rgba(0,0,0,.08)}
.dX-match:first-child{border-top:none}
.dX-match .need{color:var(--muted)}
.dX-match .arrow{color:var(--accent);font-weight:800;font-size:1.2rem}
.dX-match .solution{font-weight:700}
@media(max-width:640px){.dX-match{grid-template-columns:1fr;gap:6px}.dX-match .arrow{display:none}}

/* ---- 스타일 Y: 통합 솔루션 요소 ---- */
.dY-hero{padding:48px 0 8px}
.dY-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:740px}
.dY-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:24px}
.dY-elements{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:30px 0}
.dY-el{text-align:center;padding:24px 14px;background:var(--beige);border-radius:16px}
.dY-el:nth-child(even){margin-top:22px}
.dY-el-badge{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 12px}
.dY-el h3{font-size:1rem;font-weight:800;margin:0 0 6px}
.dY-el p{margin:0;color:var(--muted);font-size:.88rem}
@media(min-width:860px){.dY-elements{grid-template-columns:repeat(4,1fr)}.dY-el:nth-child(even){margin-top:0}.dY-el:nth-child(odd){margin-top:22px}}

/* ---- 스타일 Z: 미래직업 카드 ---- */
.dZ-hero{padding:48px 0 8px}
.dZ-hero h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;max-width:740px}
.dZ-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);margin-top:24px}
.dZ-jobs{display:grid;grid-template-columns:1fr;gap:16px;margin:30px 0}
.dZ-job{background:var(--white);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:22px}
.dZ-job-tag{display:inline-block;background:var(--accent);color:#fff;font-size:.74rem;font-weight:800;padding:4px 12px;border-radius:999px;margin-bottom:10px}
.dZ-job h3{font-size:1.1rem;font-weight:800;margin:0 0 8px}
.dZ-job p{margin:0;color:var(--muted);font-size:.94rem}
@media(min-width:720px){.dZ-jobs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.dZ-jobs{grid-template-columns:repeat(3,1fr)}}

/* ---- 상세페이지 공통: 히어로 아래 현장사진 4장 (photo band) ---- */
.photo-band{padding:40px 0 8px}
.photo-band .pb-title{font-size:clamp(1.25rem,3.4vw,1.6rem);font-weight:800;margin:0 0 18px}
.pb-grid{display:grid;grid-template-columns:1fr;gap:12px}
.pb-grid figure{margin:0;border-radius:12px;overflow:hidden;background:var(--beige);aspect-ratio:4/3}
.pb-grid img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:600px){.pb-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(min-width:960px){
  .pb-row .pb-grid{grid-template-columns:repeat(4,1fr)}
  .pb-row .pb-grid figure{aspect-ratio:1/1}
  .pb-quad .pb-grid figure{aspect-ratio:16/9}
  .pb-feature .pb-grid{grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,150px)}
  .pb-feature .pb-grid figure{aspect-ratio:auto;position:relative;min-height:0}
  .pb-feature .pb-grid img{position:absolute;inset:0}
  .pb-feature .pb-grid figure:first-child{grid-row:1/4}
}
@media(min-width:600px) and (max-width:959px){.pb-feature .pb-grid figure:first-child{grid-column:1/3}}
.prose-break{margin:1.8em 0;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--beige)}
.prose-break img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- 상세페이지 모바일 공통 ---- */
body{overflow-x:clip}
.detail img{max-width:100%}
@media(max-width:640px){
  .detail .wrap{padding-left:20px;padding-right:20px}
  .detail .prose,.detail .lead-answer,.detail .hero-answer{line-height:1.8}
  .detail .prose p{font-size:1rem}
  .detail-h1,.detail h1{overflow-wrap:anywhere}
  .dA-hero,.dC-hero,.dE-hero,.dG-hero,.dH-hero,.dI-hero,.dM-hero,.dN-hero,.dS-hero,.dT-hero{min-height:0}
  .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .geo-table{table-layout:fixed}
  .geo-table td{overflow-wrap:anywhere}
  .detail .btn,.final-cta .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .detail-related a{display:inline-block;padding:11px 16px}
}
.dT-body,.dL-body{background:var(--charcoal);color:#f2f0e8}
@media(max-width:640px){
  .dD-hero img,.dK-hero img,.dS-hero img,.dJ-hero img,.dL-hero img,.dO-hero img,.dT-hero img,.dY-hero img{aspect-ratio:4/3}
  .dB-hero-text{padding:36px 20px}
}