/* 2026 KIDP 사업 소개 페이지 — 스타일 B (치지직 라이트 시각 언어 × KIDP 레드) */
:root{
  --k:#D00D22;          /* KIDP 레드 (로고 워드마크) */
  --k-on-dark:#FF5C6A;  /* 어두운 면 위 짧은 강조 글자 */
  --bg:#FFFFFF; --bg2:#F9F9F9; --s1:#F0F1F2; --s2:#E1E1E5;
  --bd:#D0D1D3; --bd2:#C0C1C2;
  --t1:#0E0F10; --t2:#202224; --t3:#4D4D4D; --t4:#6D6E70;
  --dk:#141517; --dk2:#0E0F10; --dsurf:#202224; --dbd:#2E3033;
  --dt2:#DFE2EA; --dt3:#9DA5B6; --dt4:#697183;
  --r-chip:4px; --r-card:12px; --r-sheet:20px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --w:480px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:var(--font);background:var(--dk2);color:var(--t1);letter-spacing:-.3px;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--k);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:var(--t1);padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page{max-width:var(--w);margin:0 auto;background:var(--bg);min-height:100vh;position:relative;box-shadow:0 0 0 1px var(--dbd)}

/* 상단 바 */
.appbar{position:sticky;top:0;z-index:42;height:56px;padding:0 8px 0 20px;display:flex;align-items:center;justify-content:space-between;background:var(--dk)}
.appbar .logo{font-size:15px;font-weight:700;color:#fff}
.iconbtn{width:44px;height:44px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.iconbtn:hover{background:rgba(255,255,255,.05)}
.iconbtn i{display:block;width:20px;height:2px;background:#fff;border-radius:1px;transition:transform .2s}
.iconbtn[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.iconbtn[aria-expanded="true"] i:nth-child(2){opacity:0}
.iconbtn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 첫 화면 */
.hero{background:var(--dk);color:#fff;padding:36px 20px 32px}
.hero h1{font-size:40px;line-height:48px;font-weight:800}
.hero .lead{display:inline-block;margin-top:20px;font-size:13px;font-weight:700;line-height:17px;color:var(--k-on-dark);border:1px solid var(--k);border-radius:var(--r-chip);padding:5px 8px}
.hero p{font-size:15px;line-height:22px;color:var(--dt2);margin-top:14px}
.flow{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:24px;list-style:none}
.flow li{font-size:13px;font-weight:600;line-height:17px;padding:7px 11px;border-radius:9999px;background:var(--dsurf);color:var(--dt2);border:1px solid var(--dbd);white-space:nowrap}
.flow li.ar{background:none;border:0;padding:0;color:var(--dt4);font-weight:400}
.cta{display:flex;align-items:center;justify-content:center;gap:6px;height:48px;border-radius:24px;background:var(--k);color:#fff;font-size:15px;font-weight:700;margin-top:28px;background-image:linear-gradient(transparent,transparent)}
.cta:hover{background-image:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05))}
.cta:active{background-image:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12))}

/* 섹션 */
.sec{padding:48px 20px;scroll-margin-top:56px}
.band{background:var(--bg2)}
.no{font-size:12px;font-weight:700;line-height:16px;color:var(--k);letter-spacing:0}
h2{font-size:28px;line-height:36px;font-weight:700;margin-top:6px}
.intro{font-size:15px;line-height:22px;color:var(--t3);margin-top:10px}
.card{background:#fff;border:1px solid var(--bd);border-radius:var(--r-card);padding:20px;margin-top:12px}
.tag{display:inline-block;font-size:12px;font-weight:700;line-height:16px;padding:3px 7px;border-radius:var(--r-chip);background:var(--s1);color:var(--t2)}
.card h3{font-size:17px;font-weight:800;line-height:24px;margin-top:12px}
.card p{font-size:15px;line-height:22px;color:var(--t3);margin-top:8px}
.card p.small{font-size:13px;line-height:19px}
.mini{display:flex;gap:8px;margin-top:14px}
.mini div{flex:1;background:var(--s1);border-radius:8px;padding:12px}
.mini small{display:block;font-size:12px;font-weight:700;color:var(--t4)}
.mini b{display:block;font-size:17px;font-weight:800;margin-top:4px}
.mini span{display:block;font-size:12px;color:var(--t3);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;list-style:none}
.chips li{font-size:13px;font-weight:600;padding:6px 10px;border-radius:9999px;background:var(--s1);color:var(--t2)}

/* 용어 버튼 (점선 밑줄) */
.term{display:inline;font-weight:inherit;text-decoration:underline dotted var(--t4);text-underline-offset:3px;padding:0;color:inherit}
.term:hover,.term[aria-expanded="true"]{text-decoration:underline solid var(--k);text-decoration-thickness:2px;color:var(--t1)}

/* 공정선 */
.rail{position:relative;padding:24px 0 0}
.steps{list-style:none;padding:0}
.rail svg.line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rail svg .loop{opacity:1;transition:opacity .3s,transform .3s;transform-box:fill-box;transform-origin:center}
.anim .rail:not(.done) svg .loop{opacity:0;transform:scale(.6)}
.step{position:relative;padding:0 20px 56px 92px;scroll-margin-top:120px}
.step.r{padding:0 92px 56px 20px}
.step .node{position:absolute;left:24px;top:14px;width:40px;height:40px;border-radius:20px;background:var(--k);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2}
.step.r .node{left:auto;right:24px}
.step .node:after{content:"";position:absolute;top:19px;left:44px;width:24px;border-top:1.2px dashed var(--t1)}
.step.r .node:after{left:auto;right:44px}
.pc{position:relative;background:#fff;border:1px solid var(--bd);border-radius:var(--r-card);padding:14px 14px 16px;z-index:1}
.pc-h{display:flex;gap:8px;align-items:center}
.pc-h svg{flex-shrink:0}
.pc-k{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--k)}
.pc-n{font-size:17px;font-weight:800;line-height:22px}
.pc-s{font-size:12px;color:var(--t4);margin-top:1px}
.pc-t{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;line-height:16px;padding:3px 7px;border-radius:var(--r-chip);color:var(--k);border:1px solid var(--k)}
.pc-b{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;padding:2px 6px;border-radius:var(--r-chip);border:1px solid var(--bd2);color:var(--t3)}
.pc-a{font-size:14px;line-height:21px;margin-top:8px;color:var(--t2)}
.pc-l{font-size:11px;font-weight:700;color:var(--t4);margin-top:12px}
.pc-r{font-size:13px;line-height:18px;margin-top:4px;color:var(--t2)}
.pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;list-style:none}
.pills li{font-size:12px;font-weight:600;padding:4px 8px;border-radius:var(--r-chip);background:var(--s1);color:var(--t2)}
.exit{position:relative;padding:0 20px 48px 66px;font-size:13px;font-weight:700}
.exit span{display:block;font-weight:400;color:var(--t3);font-size:12px;margin-top:2px}
/* JS 없을 때: 단순 세로선 */
.no-js .rail{border-left:3px solid var(--t1);margin-left:42px}

/* 03 탭 */
.tabs{position:sticky;top:56px;z-index:20;background:var(--bg2);display:flex;align-items:flex-end;gap:10px;padding:12px 20px 0;border-bottom:1px solid var(--bd);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{position:relative;font-size:12px;font-weight:600;color:var(--t4);padding-bottom:8px;white-space:nowrap;flex-shrink:0}
.tabs a:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--k);transform:scaleX(1);transform-origin:left;transition:transform .3s ease-out}
.anim .tabs a:after{transform:scaleX(0)}
.anim .tabs a.done:after{transform:scaleX(1)}
.tabs a.done{color:var(--t2)}
.tabs a[aria-current="true"]{color:var(--t1);font-weight:700}
.tabs em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;padding-bottom:8px;color:var(--t3);white-space:nowrap;padding-left:8px;transition:color .2s}
.tabs.done em{color:var(--k)}

/* 04 사례 */
.filters{display:flex;gap:6px;margin:18px -20px 0;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{flex-shrink:0;font-size:13px;font-weight:600;height:34px;padding:0 14px;border-radius:17px;background:var(--s1);color:var(--t2)}
.filters button[aria-pressed="true"]{background:var(--t1);color:#fff;font-weight:700}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px;margin-top:16px;list-style:none}
.case{display:block;text-align:left;width:100%}
.case .ph{position:relative;aspect-ratio:1/1;border-radius:var(--r-card);background:var(--s1);display:flex;align-items:center;justify-content:center;overflow:hidden}
.case .ph:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .2s}
.case:hover .ph:after{background:rgba(0,0,0,.05)}
.badge{position:absolute;top:6px;height:20px;line-height:20px;padding:0 6px;border-radius:var(--r-chip);background:rgba(0,0,0,.8);color:#fff;font-size:12px;font-weight:700}
.badge.n{left:6px}.badge.s{right:6px}
.case b{display:block;font-size:13px;font-weight:600;line-height:18px;margin-top:8px;color:var(--t2)}
.case span{display:block;font-size:12px;color:var(--t4);margin-top:3px}
.case[hidden]{display:none}
.empty{margin-top:18px;border:1px dashed var(--bd2);border-radius:var(--r-card);padding:28px 16px;text-align:center;font-size:14px;line-height:21px;color:var(--t3);background:#fff}

/* 하단 */
.foot{background:var(--dk);color:#fff;padding:32px 20px 40px}
.foot b{font-size:15px;font-weight:700}
.foot p{font-size:13px;line-height:20px;color:var(--dt3);margin-top:6px}
.foot .cta{margin-top:20px}

/* 메뉴 */
.menu{position:fixed;left:50%;transform:translateX(-50%);top:56px;width:100%;max-width:var(--w);background:#fff;padding:8px 20px 20px;z-index:40;border-radius:0 0 var(--r-sheet) var(--r-sheet)}
.menu a.it{display:flex;justify-content:space-between;align-items:center;height:60px;border-bottom:1px solid var(--s1)}
.menu .it b{font-size:17px;font-weight:800;display:flex;align-items:center}
.menu .it span{font-size:13px;color:var(--t4);margin-left:8px;font-weight:400}
.menu .it em{font-style:normal;font-size:12px;font-weight:700;color:var(--t4)}
.menu .it.cur b:before{content:"";display:inline-block;width:6px;height:6px;border-radius:3px;background:var(--k);margin-right:8px}
.menu .it.cur em{color:var(--k)}
.menu .gl{width:100%;margin-top:16px;display:flex;justify-content:space-between;align-items:center;background:var(--s1);border-radius:var(--r-card);padding:14px 16px;text-align:left}
.menu .gl b{font-size:15px;font-weight:700;display:block}.menu .gl small{display:block;font-size:13px;color:var(--t3);margin-top:2px}.menu .gl em{font-style:normal;font-size:20px;color:var(--t3)}
.menu .cta{margin-top:16px}
.dim{position:fixed;inset:0;background:rgba(14,15,16,.6);z-index:35}
.dim.top{z-index:45}

/* 말풍선 */
.pop{position:absolute;z-index:25;width:min(335px,calc(100vw - 40px));background:#fff;border:1px solid var(--bd);border-radius:var(--r-card);padding:16px}
.pop:before{content:"";position:absolute;top:-7px;left:var(--ax,40px);width:12px;height:12px;background:#fff;border-left:1px solid var(--bd);border-top:1px solid var(--bd);transform:rotate(45deg)}
.pop.up:before{top:auto;bottom:-7px;transform:rotate(225deg)}
.pop b{font-size:15px;font-weight:800}
.abbr{display:inline-block;font-size:11px;font-weight:700;padding:1px 5px;border-radius:var(--r-chip);border:1px solid var(--bd2);color:var(--t3);margin-left:6px;vertical-align:2px}
.pop p{font-size:14px;line-height:21px;color:var(--t3);margin-top:6px}
.pop .ft{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--s1)}
.pop .ft button{font-size:13px;font-weight:700;color:var(--k)}
.pop .ft span{font-size:12px;color:var(--t4)}

/* 시트 (용어 목록 · 기업 상세) */
.sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--w);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);background:#fff;border-radius:var(--r-sheet) var(--r-sheet) 0 0;z-index:50;display:flex;flex-direction:column;animation:up .25s ease-out}
@keyframes up{from{transform:translate(-50%,24px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.sheet .handle{width:40px;height:4px;border-radius:2px;background:var(--bd);margin:8px auto 0;flex-shrink:0}
.sheet .body{overflow-y:auto;padding:0 20px 28px;overscroll-behavior:contain}
.sh-h{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.sh-h h2{font-size:22px;line-height:30px;margin:0}
.pill2{height:34px;padding:0 14px;border-radius:17px;background:var(--s2);font-size:13px;font-weight:600}
.sh-s{font-size:13px;color:var(--t4);margin-top:2px}
.gl-list{list-style:none;margin-top:8px}
.gl-list li{padding:14px 12px;margin:0 -12px;border-bottom:1px solid var(--s1);scroll-margin-top:12px}
.gl-list li.on{background:var(--s1);border-radius:8px;border-bottom-color:transparent}
.gl-list li.on b:before{content:"";display:inline-block;width:6px;height:6px;border-radius:3px;background:var(--k);margin-right:6px;vertical-align:3px}
.gl-list b{font-size:15px;font-weight:800}
.gl-list p{font-size:14px;line-height:21px;color:var(--t3);margin-top:3px}

/* 기업 상세 */
.cd-h{display:flex;align-items:center;gap:12px;margin-top:16px}
.num{width:36px;height:36px;border-radius:18px;background:var(--k);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cd-h h2{font-size:17px;font-weight:800;line-height:22px;margin:0}
.cd-h span{font-size:13px;color:var(--t4)}
.close{margin-left:auto;width:36px;height:36px;border-radius:18px;background:var(--s2);position:relative;flex-shrink:0}
.close i{position:absolute;left:11px;top:17px;width:14px;height:2px;background:var(--t1)}
.close i:first-child{transform:rotate(45deg)}.close i:last-child{transform:rotate(-45deg)}
.cnav{display:flex;justify-content:space-between;align-items:center;margin:12px -20px 0;padding:6px 12px;border-bottom:1px solid var(--s1);font-size:12px;color:var(--t4)}
.cnav button{padding:8px;font-size:12px;color:var(--t4)}
.cnav button:disabled{visibility:hidden}
.cnav b{font-size:13px;font-weight:700;color:var(--t1)}
.cimg{aspect-ratio:335/230;border-radius:var(--r-card);background:var(--s1);margin-top:16px;display:flex;align-items:center;justify-content:center}
.q{font-size:20px;line-height:28px;font-weight:800;margin-top:18px}
.st{display:flex;gap:6px;align-items:center;margin-top:10px;flex-wrap:wrap;list-style:none}
.st li{font-size:12px;font-weight:700;height:26px;line-height:24px;padding:0 9px;border-radius:13px;border:1px solid var(--bd2);color:var(--t2)}
.st li.main{background:var(--t1);border-color:var(--t1);color:#fff}
.st li.cap{border:0;padding:0;font-weight:400;color:var(--t4)}
.h4{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;margin-top:28px;padding-bottom:10px;border-bottom:1px solid var(--bd)}
.chip{font-size:11px;font-weight:700;padding:2px 6px;border-radius:var(--r-chip);background:var(--s1);color:var(--t3)}
.txt{font-size:15px;line-height:22px;color:var(--t2);margin-top:12px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;list-style:none}
.g2 li{background:var(--s1);border-radius:var(--r-card);padding:14px 12px}
.g2 small{font-size:11px;font-weight:700;color:var(--k)}
.g2 b{display:block;font-size:15px;font-weight:800;margin-top:2px}
.g2 p{font-size:13px;line-height:19px;color:var(--t3);margin-top:4px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ba small{display:block;font-size:12px;font-weight:700;color:var(--t4);margin-bottom:6px}
.ba .box{height:128px;border-radius:var(--r-card);border:1px dashed var(--bd2);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--t4);background:var(--bg2)}
.ba .af .box{border-color:var(--t1);color:var(--t1);background:#fff}
.lg{display:flex;gap:14px;font-size:12px;color:var(--t3);margin-top:12px;align-items:center}
.lg i{display:inline-block;width:12px;height:12px;border-radius:6px;vertical-align:-2px;margin-right:4px}
.chart svg{width:100%;height:auto;margin-top:8px}
.tot{display:flex;justify-content:space-between;align-items:center;background:var(--dk);color:#fff;border-radius:var(--r-card);padding:16px;margin-top:16px}
.tot span{font-size:14px;color:var(--dt2)}.tot b{font-size:22px;font-weight:800;color:var(--k-on-dark)}
.res{list-style:none}
.res li{display:flex;justify-content:space-between;align-items:center;min-height:48px;border-bottom:1px solid var(--s1);font-size:14px;color:var(--t2)}
.res em{font-style:normal;color:var(--t4)}
.next{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:56px;border-radius:var(--r-card);border:1px solid var(--bd);padding:0 16px;margin-top:24px;font-size:14px;color:var(--t3);text-align:left}
.next b{color:var(--t1);font-weight:800;margin:0 6px}
.prep{margin-top:24px;padding:20px 16px;border-radius:var(--r-card);background:var(--s1);font-size:14px;line-height:21px;color:var(--t3)}

/* ── 스크롤 인터랙션 (스토리보드 ①~④) — JS가 html.anim 을 붙였을 때만 ── */
.anim .step .node{transform:scale(.6);background:var(--bg2);color:var(--t4);box-shadow:inset 0 0 0 1.5px var(--t4);transition:transform .24s ease-out,background .24s,color .24s,box-shadow .24s}
.anim .step.on .node{transform:scale(1);background:var(--k);color:#fff;box-shadow:none}
.anim .step .node:after{width:0;transition:width .2s ease-out .12s}
.anim .step.on .node:after{width:24px}
.anim .step .pc{opacity:0;transform:translateY(16px);transition:opacity .28s ease-out .2s,transform .28s ease-out .2s}
.anim .step.on .pc{opacity:1;transform:none}
.anim .rail .exit{opacity:0;transition:opacity .3s}
.anim .rail.done .exit{opacity:1}
.chart .after{transform-box:fill-box;transform-origin:center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}