@font-face{font-family:"GmarketSans"; src:url("fonts/GmarketSansLight.woff") format("woff"); font-weight:300; font-style:normal; font-display:swap}
@font-face{font-family:"GmarketSans"; src:url("fonts/GmarketSansMedium.woff") format("woff"); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"GmarketSans"; src:url("fonts/GmarketSansBold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap}
:root{
  --navy:#12294A; --navy2:#1C3D68; --navy3:#0C1D38; --ink:#14233B; --muted:#5B6B82; --line:#E3E8F0; --soft:#F4F7FB;
  --coral:#F26B4E; --mustard:#F5B841; --teal:#1F8A70; --sky:#3B82C4; --purple:#7A5AC8; --ivory:#FEF4E8;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --shadow:0 18px 50px -22px rgba(18,41,74,.35); --shadow-sm:0 6px 20px -10px rgba(18,41,74,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{margin:0; font-family:"GmarketSans","Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; color:var(--ink); background:#fff; line-height:1.65; word-break:keep-all; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px}
.eyebrow{font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase}
h1,h2,h3,h4{margin:0; letter-spacing:-.03em; line-height:1.25}
h2{font-size:clamp(26px,3.4vw,38px); font-weight:800}
.lead{color:var(--muted); font-size:17px; margin:12px 0 0}
section{padding:88px 0}
.center{text-align:center}

/* 시안 안내 띠 */
.draftbar{background:#FFF3CD; color:#6B4E00; font-size:13px; padding:8px 0; border-bottom:1px solid #F1DFA0}
.draftbar .wrap{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.draftbar button{border:1px solid #C9A227; background:#fff; color:#6B4E00; border-radius:999px; padding:4px 14px; font-weight:700; font-size:12px}
.memo{display:inline-block; margin-top:8px; font-size:12px; font-weight:500; line-height:1.5; color:#7A4B00; background:#FFF3CD; border:1px dashed #C9A227; border-radius:8px; padding:4px 9px}
.memo::before{content:"확인 필요 · "; font-weight:800}
body.memo-off .memo{display:none}

/* 스크롤 진행 표시 */
.progress{position:fixed; left:0; top:0; height:3px; width:0; z-index:60; background:linear-gradient(90deg,var(--teal),var(--mustard),var(--coral))}

/* 머리글 */
header.top{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; gap:24px; height:84px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand svg{width:50px; height:50px; flex:none; border-radius:14px; box-shadow:var(--shadow-sm)}
.brand b{display:block; font-size:23px; font-weight:800; letter-spacing:-.04em; line-height:1.1}
.brand span{display:block; font-size:12.5px; color:var(--muted); font-weight:500; margin-top:4px}
nav.main{display:flex; gap:4px}
nav.main a{padding:10px 13px; border-radius:999px; font-weight:700; font-size:15px; color:#2B3B55}
nav.main a:hover{background:var(--soft)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:14px 26px; font-weight:800; font-size:16px; transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-teal{background:var(--teal); color:#fff; box-shadow:0 10px 24px -10px rgba(31,138,112,.8)}
.btn-yellow{background:var(--mustard); color:#2A1B00; box-shadow:0 12px 28px -12px rgba(245,184,65,.9)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.55)}
.btn-navy{background:var(--navy); color:#fff}
.btn-line{background:#fff; color:var(--navy); border:1.5px solid var(--navy)}
.btn-sm{padding:10px 18px; font-size:14px}
.btn-kakao{background:#FEE500; color:#191600; box-shadow:0 10px 24px -12px rgba(200,170,0,.9)}

/* 첫 화면 */
.hero{position:relative; color:#fff; padding:84px 0 150px; overflow:hidden;
  background:radial-gradient(900px 520px at 88% 8%, rgba(59,130,196,.42), transparent 62%), radial-gradient(700px 420px at 0% 100%, rgba(31,138,112,.28), transparent 60%), linear-gradient(135deg,var(--navy3) 0%,#143056 55%,var(--navy2) 100%)}
.hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px); background-size:24px 24px; pointer-events:none}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center}
.hero .eyebrow{color:var(--mustard); display:flex; align-items:center; gap:12px}
.hero .eyebrow::before{content:""; width:30px; height:2px; background:var(--mustard)}
.hero h1{font-size:clamp(33px,4.3vw,53px); font-weight:800; line-height:1.22; margin:22px 0 0}
.hero h1 em{font-style:normal; color:var(--mustard)}
.hero p.sub{font-size:18px; color:#D5DFEE; margin:26px 0 0; max-width:520px}
.hero p.sub b{color:#FFE29A; font-weight:700}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}
.hero-art{position:relative; border-radius:36px; overflow:hidden; background:var(--ivory); aspect-ratio:3/2; box-shadow:0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 8px rgba(255,255,255,.08)}
.hero-art img{width:100%; height:100%; object-fit:cover}
.pin{position:absolute; transform:translate(-50%,-50%); background:rgba(255,255,255,.96); color:var(--navy); font-size:clamp(10px,1.05vw,13px); font-weight:800; padding:4px 11px; border-radius:999px; box-shadow:0 4px 12px -4px rgba(18,41,74,.45); white-space:nowrap; letter-spacing:-.02em}
.who{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; grid-column:1 / -1}
.who a{display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:22px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); transition:background .15s, transform .15s}
.who a:hover{background:rgba(255,255,255,.15); transform:translateY(-2px)}
.who .tile{width:58px; height:58px; border-radius:16px; background:#fff; flex:none; padding:5px}
.who small{display:block; color:var(--mustard); font-weight:800; font-size:12.5px; letter-spacing:.06em}
.who b{display:block; font-size:19px; font-weight:800; letter-spacing:-.03em}
.who span{display:block; font-size:14px; color:#C9D5E6}
.who i{margin-left:auto; font-style:normal; font-size:22px; color:var(--mustard)}

/* 공지 */
.notice{position:relative; margin-top:-78px; z-index:2}
.notice .box{border-radius:var(--r-lg); padding:8px 30px; border:2px solid transparent; box-shadow:var(--shadow);
  background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,var(--coral),var(--mustard),var(--sky)) border-box}
.notice .row{display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center; padding:20px 0}
.notice .row + .row{border-top:1px solid var(--line)}
.tag{display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:8px 16px; font-size:14px; font-weight:800; white-space:nowrap}
.tag.o{background:#FFEDE6; color:#C2401F} .tag.b{background:#E6F0FB; color:#1E5FA8} .tag.g{background:#E3F4EE; color:#156B55} .tag.y{background:#FFF3D6; color:#8A5A00} .tag.p{background:#EFE9FB; color:#5B3FB0}
.notice h3{font-size:20px; font-weight:800}
.notice p{margin:3px 0 0; color:var(--muted); font-size:15px}

/* 숫자 */
.stats{padding:44px 0 0}
.stats .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{border:1px solid var(--line); border-radius:var(--r-md); padding:28px 16px; text-align:center; background:linear-gradient(180deg,#fff,#FAFCFF)}
.stat b{display:block; font-size:34px; font-weight:800; letter-spacing:-.04em; color:var(--navy)}
.stat b small{font-size:20px}
.stat > span{display:block; color:var(--muted); font-size:14.5px; margin-top:4px}

/* 하는 일 */
.panel{border-radius:32px; padding:52px 44px; border:1.5px solid #F2CF86; background:linear-gradient(160deg,#F1F5FF 0%,#EAF0FF 55%,#FFF7E8 100%)}
.panel .eyebrow{color:var(--sky)}
.menu{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px}
.menu a{display:grid; grid-template-columns:76px 1fr auto; gap:18px; align-items:center; background:#fff; border-radius:var(--r-md); padding:22px 24px; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s}
.menu a:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.menu img{width:76px; height:76px; border-radius:18px}
.menu small{font-weight:800; font-size:13.5px}
.menu b{display:block; font-size:22px; font-weight:800; letter-spacing:-.03em}
.menu span.d{display:block; color:var(--muted); font-size:14.5px; margin-top:2px}
.menu .go{border-radius:12px; padding:11px 16px; font-weight:800; font-size:14px; color:#fff; white-space:nowrap}

/* 파트너 혜택 */
.benefit{background:radial-gradient(600px 300px at 100% 0%, rgba(245,184,65,.22), transparent 60%), linear-gradient(140deg,var(--navy3),var(--navy2)); color:#fff; border-radius:32px; padding:54px 44px}
.benefit .eyebrow{display:inline-block; background:var(--mustard); color:#2A1B00; border-radius:999px; padding:7px 16px; letter-spacing:.1em}
.benefit h2{margin-top:18px} .benefit h2 em{font-style:normal; color:var(--mustard)}
.benefit .lead{color:#CBD7E8}
.bgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px}
.bcard{background:#fff; color:var(--ink); border-radius:var(--r-md); padding:26px 24px; border-top:6px solid var(--mustard)}
.bcard:nth-child(2){border-top-color:var(--teal)} .bcard:nth-child(3){border-top-color:var(--coral)}
.bcard img{width:72px; height:72px}
.bcard .no{font-weight:800; font-size:13.5px; color:#A56A00; margin-top:10px}
.bcard:nth-child(2) .no{color:var(--teal)} .bcard:nth-child(3) .no{color:#C2401F}
.bcard h3{font-size:22px; font-weight:800; margin-top:2px}
.bcard p{color:var(--muted); font-size:15px; margin:8px 0 12px}
.bcard ul{margin:0; padding:0; list-style:none; display:grid; gap:7px}
.bcard li{background:var(--soft); border-radius:10px; padding:8px 12px; font-size:14.5px; font-weight:500}
.flow{margin-top:22px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-md); padding:20px 22px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.flow b{margin-right:8px; color:var(--mustard)}
.flow span{background:rgba(255,255,255,.12); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:500}

/* 프로그램 */
#programs{background:var(--soft)}
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; justify-content:center}
.seg{display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px}
.seg button{border:0; background:transparent; border-radius:999px; padding:10px 22px; font-weight:800; color:var(--muted); font-size:15px}
.seg button.on{background:var(--navy); color:#fff}
.areas{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:24px}
.areas button{border:1.5px solid var(--line); background:#fff; border-radius:18px; padding:12px 6px 10px; display:grid; justify-items:center; gap:4px; font-weight:800; font-size:14px; color:var(--ink); transition:transform .15s, border-color .15s}
.areas button img{width:62px; height:62px}
.areas button:hover{transform:translateY(-2px)}
.areas button.on{border-color:var(--coral); box-shadow:0 0 0 3px rgba(242,107,78,.18)}
.count{margin:26px 0 14px; font-weight:700; color:var(--muted); font-size:15px}
.count b{color:var(--coral)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.pcard{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:22px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm)}
.pcard .hd{display:flex; gap:14px; align-items:center}
.pcard .hd img{width:60px; height:60px; border-radius:14px; flex:none}
.pcard h3{font-size:20.5px; font-weight:800}
.pcard .meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.chip{font-size:12.5px; font-weight:500; border-radius:999px; padding:4px 10px; background:var(--soft); color:#33445E}
.chip.age{background:#E6F0FB; color:#1E5FA8} .chip.ven{background:#F3EEE3; color:#6B5320}
.pcard ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:7px; flex:1; align-content:start}
.pcard li{position:relative; padding-left:18px; font-size:15px; color:#2E3D57}
.pcard li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--teal)}
.pcard .ft{margin-top:16px; display:flex; justify-content:flex-end}
.pcard .ft a{font-weight:800; font-size:14px; color:var(--navy); border:1.5px solid var(--navy); border-radius:999px; padding:8px 16px}
.pcard .ft a:hover{background:var(--navy); color:#fff}
.help{margin-top:26px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:26px 30px; display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.help h3{font-size:20px; font-weight:800} .help p{margin:6px 0 0; color:var(--muted); font-size:15px; max-width:640px}

/* 행사·운영 지원 */
.two{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px}
.box{border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; background:#fff; box-shadow:var(--shadow-sm)}
.box .hd{display:flex; gap:16px; align-items:center; margin-bottom:8px}
.box .hd img{width:70px; height:70px}
.box h3{font-size:24px; font-weight:800}
.box > p{color:var(--muted); font-size:15.5px; margin:0 0 18px}
.grp{margin-top:16px}
.grp b{display:block; font-size:14px; font-weight:800; margin-bottom:8px}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.pills span{border-radius:999px; padding:7px 14px; font-size:14.5px; font-weight:500; background:var(--soft); color:#2E3D57}
.grp.c1 b{color:#C2401F} .grp.c1 span{background:#FFEDE6}
.grp.c2 b{color:#156B55} .grp.c2 span{background:#E3F4EE}
.grp.c3 b{color:#1E5FA8} .grp.c3 span{background:#E6F0FB}
.grp.c4 b{color:#5B3FB0} .grp.c4 span{background:#EFE9FB}
.sup{display:grid; gap:10px}
.sup div{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; background:var(--soft); border-radius:16px; padding:14px 18px; border-left:5px solid var(--teal)}
.sup div:nth-child(2){border-left-color:var(--coral)} .sup div:nth-child(3){border-left-color:var(--mustard)} .sup div:nth-child(4){border-left-color:var(--sky)} .sup div:nth-child(5){border-left-color:var(--purple)}
.sup b{font-size:17px; font-weight:800} .sup span{color:var(--muted); font-size:14.5px}

/* 학부모 */
#parents{background:linear-gradient(180deg,#FFF9EF 0%,#fff 100%)}
.pgrid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.pgrid .art{border-radius:32px; overflow:hidden; background:var(--ivory); box-shadow:var(--shadow); aspect-ratio:3/2; position:relative}
.pgrid .art img{width:100%; height:100%; object-fit:cover}
.pgrid .art .pin{font-size:clamp(11px,1.1vw,14px)}
#parents .eyebrow{color:var(--coral)}
.steps3{display:grid; gap:12px; margin-top:24px}
.steps3 > div{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; background:#fff; border:1px solid #F3E3C6; border-radius:18px; padding:16px 18px}
.steps3 i{font-style:normal; width:44px; height:44px; border-radius:50%; background:var(--coral); color:#fff; font-weight:800; display:grid; place-items:center; font-size:17px}
.steps3 > div:nth-child(2) i{background:var(--mustard); color:#2A1B00} .steps3 > div:nth-child(3) i{background:var(--teal)}
.steps3 b{font-size:17.5px; font-weight:800; display:block} .steps3 span{color:var(--muted); font-size:15px}
.learn{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
.learn > div{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:20px; display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:center; box-shadow:var(--shadow-sm)}
.learn img{width:64px; height:64px}
.learn b{display:block; font-size:17.5px; font-weight:800; letter-spacing:-.03em} .learn span{color:var(--muted); font-size:14.5px; display:block; margin-top:2px}
.faq{margin-top:36px; display:grid; gap:10px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:16px; padding:0 22px}
.faq summary{cursor:pointer; font-weight:800; font-size:17px; padding:18px 0; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::after{content:"+"; color:var(--coral); font-size:22px; line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 18px; color:#3A4963; font-size:15.5px}

/* 진행 순서 */
.proc{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; counter-reset:s}
.proc div{position:relative; border:1px solid var(--line); border-radius:var(--r-md); padding:26px 22px; background:#fff}
.proc div::before{counter-increment:s; content:"0" counter(s); font-weight:800; font-size:15px; color:var(--coral); letter-spacing:.08em}
.proc b{display:block; font-size:19px; font-weight:800; margin-top:6px} .proc span{color:var(--muted); font-size:15px}

/* 소개 */
#about{background:var(--soft)}
.about{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; margin-top:8px}
.quote{background:#fff; border-radius:var(--r-lg); padding:40px; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.quote h2{font-size:clamp(26px,3.2vw,36px)} .quote h2 em{font-style:normal; color:var(--teal)}
.quote p{font-size:17px; color:#2E3D57; margin:18px 0 0}
.quote .sign{margin-top:26px; font-weight:800; font-size:17px} .quote .sign small{color:var(--muted); font-weight:600; margin-right:8px}
.info{background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:36px}
.info h3{font-size:20px; font-weight:800; color:var(--mustard)}
.info dl{margin:18px 0 0; display:grid; grid-template-columns:86px 1fr; gap:12px 14px; font-size:15.5px}
.info dt{color:#FFD98A; font-weight:800} .info dd{margin:0; color:#E3EAF5}

/* 상담 */
.contact{border:1.5px solid #E5B94F; background:linear-gradient(160deg,#FFFBF1,#FFF4DC); border-radius:32px; padding:48px 44px; display:grid; grid-template-columns:.9fr 1.1fr; gap:40px}
.contact .eyebrow{color:#8A5A00}
.contact h2{margin-top:10px}
.tel{display:grid; gap:10px; margin-top:22px}
.tel a{display:flex; justify-content:space-between; align-items:center; gap:12px; background:#fff; border-radius:14px; padding:15px 18px; border-left:5px solid var(--teal); font-weight:800; box-shadow:var(--shadow-sm)}
.tel a:nth-child(2){border-left-color:var(--coral)} .tel a:nth-child(3){border-left-color:var(--purple)}
.tel small{color:var(--muted); font-weight:700; margin-right:8px} .tel span{font-size:18px; letter-spacing:.02em; color:var(--teal)}
.tel a:nth-child(2) span{color:#C2401F} .tel a:nth-child(3) span{color:var(--purple)}
form{background:#fff; border-radius:var(--r-md); padding:28px; box-shadow:var(--shadow-sm); display:grid; gap:14px}
.fr{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{font-weight:800; font-size:14px; display:grid; gap:6px}
input,select,textarea{font:inherit; font-weight:500; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; width:100%; background:#fff; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(59,130,196,.18)}
.checks{display:flex; flex-wrap:wrap; gap:8px}
.checks label{display:inline-flex; grid-template-columns:none; align-items:center; gap:6px; font-weight:500; font-size:13.5px; background:var(--soft); border-radius:999px; padding:7px 13px; cursor:pointer}
.checks input{width:auto; accent-color:var(--teal)}
.agree{display:flex; gap:8px; align-items:flex-start; font-weight:500; font-size:13.5px; color:var(--muted)} .agree input{width:auto; margin-top:4px}
.sent{display:none; background:#E3F4EE; color:#156B55; border-radius:12px; padding:12px 14px; font-weight:700; font-size:14.5px}

/* 바닥글 */
footer{background:var(--navy); color:#D8E1EE; padding:56px 0 150px; margin-top:88px}
footer .ch{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.18)}
footer .ch > *{display:block; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:16px 18px}
footer .ch b{display:block; color:#fff; font-weight:800} footer .ch span{font-size:13.5px; color:#B7C4D8}
footer dl{display:grid; grid-template-columns:90px 1fr; gap:10px 12px; margin:26px 0 0; font-size:15px}
footer dt{color:var(--mustard); font-weight:800} footer dd{margin:0}
footer .copy{margin-top:22px; font-size:13.5px; color:#9FB0C8}

/* 하단 고정 메뉴 */
.dock{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:55; display:flex; gap:4px; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:28px; padding:8px; box-shadow:0 22px 50px -18px rgba(18,41,74,.5)}
.dock a{display:grid; justify-items:center; gap:5px; padding:8px 4px 6px; border-radius:20px; width:92px; font-size:12.5px; font-weight:800; color:#2B3B55; white-space:nowrap; letter-spacing:-.04em}
.dock i{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:#EEF3FA}
.dock svg{width:22px; height:22px; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.dock a:nth-child(1) i{background:#E8EEF6} .dock a:nth-child(1) svg{stroke:var(--navy)}
.dock a:nth-child(2) i{background:#FFF3D6} .dock a:nth-child(2) svg{stroke:#B67A00}
.dock a:nth-child(3) i{background:#E3F4EE} .dock a:nth-child(3) svg{stroke:var(--teal)}
.dock a:nth-child(4) i{background:#FFEDE6} .dock a:nth-child(4) svg{stroke:#D4502E}
.dock a:nth-child(5) i{background:#EFE9FB} .dock a:nth-child(5) svg{stroke:var(--purple)}
.dock a:nth-child(6) i{background:#E6F0FB} .dock a:nth-child(6) svg{stroke:var(--sky)}
.dock a.on{background:#EEF2F8} .dock a.on i{background:var(--navy)} .dock a.on svg{stroke:#fff}

@media (max-width:1080px){ nav.main{display:none} .cards{grid-template-columns:repeat(2,1fr)} .bgrid{grid-template-columns:1fr} }
@media (max-width:900px){
  section{padding:64px 0}
  .hero{padding:56px 0 130px} .hero .wrap{grid-template-columns:1fr; gap:36px}
  .who,.menu,.two,.pgrid,.about,.contact{grid-template-columns:1fr}
  .stats .grid,.proc{grid-template-columns:repeat(2,1fr)}
  .areas{grid-template-columns:repeat(4,1fr)} .learn{grid-template-columns:1fr 1fr}
  .panel,.benefit,.contact{padding:36px 24px} footer .ch{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .wrap{padding:0 18px} header.top .wrap{height:70px} .brand svg{width:42px; height:42px} .brand b{font-size:19px} .brand span{font-size:11px}
  header.top .btn{padding:10px 16px; font-size:14px}
  .notice .box{padding:4px 18px} .notice .row{grid-template-columns:1fr; gap:10px}
  .menu a{grid-template-columns:60px 1fr} .menu img{width:60px; height:60px} .menu .go{grid-column:1 / -1; text-align:center}
  .cards,.learn,.fr{grid-template-columns:1fr} .areas{grid-template-columns:repeat(3,1fr)}
  .stat b{font-size:28px} .quote,.info,.box{padding:26px 22px}
  .dock{left:10px; right:10px; transform:none; justify-content:space-between; border-radius:24px; padding:6px}
  .dock a{width:auto; flex:1; font-size:10.5px} .dock i{width:38px; height:38px}
  .pin{padding:3px 7px}
}


/* ===== 여러 페이지 공통 추가 ===== */
body{overflow-x:hidden}
nav.main a.on{background:var(--navy); color:#fff}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.hero-art{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero .spark{position:absolute; border-radius:50%; filter:blur(.3px); opacity:.9; pointer-events:none}
.hero .spark.s1{width:14px; height:14px; background:var(--mustard); left:48.5%; top:9%}
.hero .spark.s2{width:9px; height:9px; background:var(--coral); left:51%; top:70%}
.hero .spark.s3{width:11px; height:11px; background:#3FC6A2; left:6%; top:12%}
.badge-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.badge-row span{font-size:13.5px; font-weight:500; color:#E6EDF7; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 13px}

/* 등장 효과 */
.rv{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}

/* 프로그램 이름 띠 */
.ticker{overflow:hidden; margin-top:44px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg,#F7FAFF,#FFF9EF,#F7FAFF)}
.ticker .track{display:flex; gap:12px; width:max-content; padding:16px 0; animation:tick 60s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker span{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 16px 7px 8px; font-weight:700; font-size:14.5px; box-shadow:var(--shadow-sm)}
.ticker img{width:30px; height:30px; border-radius:50%}
@keyframes tick{to{transform:translateX(-50%)}}

/* 영역 타일 */
.atiles{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:34px}
.atile{display:grid; justify-items:center; gap:4px; text-align:center; background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:18px 8px 16px; transition:transform .18s, box-shadow .18s, border-color .18s}
.atile:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--mustard)}
.atile img{width:84px; height:84px}
.atile b{font-size:17px; font-weight:800; letter-spacing:-.03em}
.atile span{font-size:13px; color:var(--muted); font-weight:500}
.more{display:flex; justify-content:center; margin-top:30px}

/* 좌우 나눔 구간 */
.split{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.split.rev > .art{order:2}
.split .art{position:relative; border-radius:32px; overflow:hidden; aspect-ratio:3/2; background:var(--ivory); box-shadow:var(--shadow)}
.split .art img{width:100%; height:100%; object-fit:cover}
.split .eyebrow{color:var(--teal)}
.split h2{margin-top:8px}
.ticks{list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:12px}
.ticks li{position:relative; padding:14px 16px 14px 52px; background:#fff; border:1px solid var(--line); border-radius:16px; font-weight:500; font-size:16px; box-shadow:var(--shadow-sm)}
.ticks li::before{content:""; position:absolute; left:16px; top:50%; width:24px; height:24px; margin-top:-12px; border-radius:50%; background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat}
.ticks li:nth-child(2)::before{background-color:var(--coral)} .ticks li:nth-child(3)::before{background-color:var(--mustard)} .ticks li:nth-child(4)::before{background-color:var(--sky)}
.tint{background:var(--soft)} .warm{background:linear-gradient(180deg,#FFF9EF 0%,#fff 100%)}
.btns{display:flex; flex-wrap:wrap; gap:10px}
.proc.v{grid-template-columns:1fr; margin-top:22px; gap:12px}
.proc.v div{padding:18px 20px}

/* 하위 페이지 머리 */
.phero{position:relative; color:#fff; padding:60px 0 68px; overflow:hidden;
  background:radial-gradient(800px 460px at 90% 0%, rgba(59,130,196,.42), transparent 62%), radial-gradient(600px 360px at 0% 100%, rgba(31,138,112,.28), transparent 60%), linear-gradient(135deg,var(--navy3) 0%,#143056 55%,var(--navy2) 100%)}
.phero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px); background-size:24px 24px; pointer-events:none}
.phero .wrap{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.phero .eyebrow{color:var(--mustard); display:flex; align-items:center; gap:12px}
.phero .eyebrow::before{content:""; width:30px; height:2px; background:var(--mustard)}
.phero h1{font-size:clamp(30px,3.9vw,48px); font-weight:800; line-height:1.24; margin-top:18px}
.phero h1 em{font-style:normal; color:var(--mustard)}
.phero p{color:#D5DFEE; font-size:17.5px; margin:18px 0 0; max-width:540px}
.phero .btns{margin-top:28px}
.phero-art{position:relative; border-radius:30px; overflow:hidden; aspect-ratio:3/2; background:var(--ivory); box-shadow:0 34px 70px -30px rgba(0,0,0,.6), 0 0 0 7px rgba(255,255,255,.08)}
.phero-art img{width:100%; height:100%; object-fit:cover}
.tabs .wrap{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding-top:34px}
.tabs a{display:inline-flex; gap:9px; align-items:center; border:1px solid var(--line); border-radius:999px; padding:10px 20px 10px 11px; font-weight:700; font-size:15px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .15s}
.tabs a:hover{transform:translateY(-2px)}
.tabs a i{font-style:normal; width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:12.5px; font-weight:700}
.tabs a:nth-child(2) i{background:var(--coral)} .tabs a:nth-child(3) i{background:var(--sky)} .tabs a:nth-child(4) i{background:var(--teal)} .tabs a:nth-child(5) i{background:var(--purple)}
.tabs a.on{background:var(--navy); color:#fff; border-color:var(--navy)} .tabs a.on i{background:var(--mustard); color:#2A1B00}
section.first{padding-top:56px}
.steps3.h{grid-template-columns:repeat(3,1fr); margin-top:30px}

/* 카드 묶음 */
.g2{display:grid; grid-template-columns:1fr 1fr; gap:20px} .g3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px} .g4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:26px; box-shadow:var(--shadow-sm)}
.card h3{font-size:21px; font-weight:800}
.card p{color:var(--muted); font-size:15.5px; margin:8px 0 0}
.card .hd{display:flex; gap:14px; align-items:center; margin-bottom:12px}
.card .hd img{width:64px; height:64px}
.card.c-o{border-top:6px solid var(--coral)} .card.c-g{border-top:6px solid var(--teal)} .card.c-b{border-top:6px solid var(--sky)} .card.c-p{border-top:6px solid var(--purple)} .card.c-y{border-top:6px solid var(--mustard)}
.card .pills{margin-top:14px}
.note{margin-top:26px; background:#fff; border:1px dashed #C9D3E2; border-radius:16px; padding:16px 20px; color:var(--muted); font-size:15px}
.benefit.flat{border-radius:32px}
.benefit.flat .flow + .flow{margin-top:12px}
section > .wrap > .bgrid .bcard{border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm)}

/* 상담 띠 */
.ctaband{padding:80px 0 0}
main > section:last-child{padding-bottom:0}
.contact.band{grid-template-columns:1.05fr .95fr; align-items:center}
.contact.band .tel{margin-top:0}
.fnote{font-size:13.5px; color:var(--muted); margin:0}
.result{background:#F2F8FF; border:1.5px solid #BBD6F2; border-radius:16px; padding:18px}
.result pre{white-space:pre-wrap; font:inherit; font-size:14.5px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin:10px 0 14px; line-height:1.6}
.result b{font-weight:800}
.err{display:none; background:#FFEDE6; color:#B03A1B; border-radius:12px; padding:10px 14px; font-weight:700; font-size:14.5px}
.mapbox{display:block; margin-top:18px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:13px 16px; font-weight:700; text-align:center; color:#fff}
.mapbox:hover{background:rgba(255,255,255,.18)}

/* 바닥글 */
footer{padding:56px 0 150px}
.fgrid{display:grid; grid-template-columns:1.2fr .8fr 1.2fr; gap:36px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.18)}
.fgrid .fb{font-size:24px; font-weight:800; color:#fff; letter-spacing:-.04em}
.fgrid p{margin:10px 0 18px; color:#B7C4D8; font-size:15px}
.fgrid h4{font-size:14px; color:var(--mustard); font-weight:800; margin-bottom:12px; letter-spacing:.04em}
.fgrid ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:15px}
.fgrid ul a:hover, .fgrid dd a:hover{color:#fff; text-decoration:underline}
.fgrid dl{margin:0; display:grid; grid-template-columns:64px 1fr; gap:8px 12px; font-size:15px}
.fgrid dt{color:#FFD98A; font-weight:700} .fgrid dd{margin:0}

@media (prefers-reduced-motion:reduce){ .hero-art,.ticker .track{animation:none} .rv{opacity:1; transform:none; transition:none} }
/* 무료 호스팅 배지(오른쪽 아래)와 하단 메뉴가 겹치지 않게 */
@media (max-width:1080px){ .dock{bottom:76px} footer{padding-bottom:210px} }
@media (max-width:1080px){ .g3{grid-template-columns:1fr 1fr} .g4{grid-template-columns:1fr 1fr} .atiles{grid-template-columns:repeat(4,1fr)} }
@media (max-width:900px){
  .split,.phero .wrap,.contact.band,.fgrid,.g2,.steps3.h{grid-template-columns:1fr} .split{gap:30px} .split.rev > .art{order:0}
  .phero{padding:44px 0 52px} .phero .wrap{gap:30px} .hero .spark{display:none}
  .atiles{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .g3,.g4{grid-template-columns:1fr} .atile img{width:66px; height:66px} .atile b{font-size:15px}
  .tabs a{padding:8px 14px 8px 9px; font-size:13.5px} .card{padding:22px}
  .ticks li{font-size:15px}
}