/* ===== 한손컴퍼니 · redesign v2 — groove-style monochrome minimal-luxury ===== */
:root{
  --bg:#ffffff; --bg2:#f5f5f3; --bg3:#efeeec; --ink:#0a0a0a; --ink2:#1a1a1a;
  --gray:#6a6a6a; --gray2:#9a9a98; --gray3:#b8b8b5;
  --line:#e7e7e3; --line2:#d6d6d1;
  --accent:#0066ff; --accent-d:#0050d8;
  --maxw:1240px;
  --display:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'DM Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--bg);-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.7;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:clip;word-break:keep-all;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--ink);color:#fff;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,48px);}
section{padding:clamp(64px,9vw,118px) 0;position:relative;}
.bg2{background:var(--bg2);}
.ink-sec{background:var(--ink);color:#fff;}
.ink-sec .lead,.ink-sec .gray{color:#a8a8a6;}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gray2);display:inline-flex;align-items:center;gap:11px;margin-bottom:24px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);}
.ink-sec .eyebrow{color:#9a9a98;} .ink-sec .eyebrow::before{background:var(--accent);}

h1,h2,h3{font-weight:700;letter-spacing:-.6px;line-height:1.32;}
.display{font-family:var(--display);font-weight:900;letter-spacing:-1.8px;}
.lead{color:var(--gray);font-size:clamp(15px,1.85vw,18px);max-width:660px;line-height:1.85;}
.gray{color:var(--gray);}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:12px;font-weight:600;font-size:14.5px;cursor:pointer;border:1px solid var(--accent);transition:background .25s,color .25s,transform .25s,border-color .25s;background:var(--accent);color:#fff;}
.btn:hover{transform:translateY(-2px);background:var(--accent-d);border-color:var(--accent-d);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2);}
.btn.ghost:hover{border-color:var(--ink);background:transparent;}
.ink-sec .btn{background:var(--accent);color:#fff;border-color:var(--accent);}
.ink-sec .btn:hover{background:var(--accent-d);border-color:var(--accent-d);}
.ink-sec .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32);}
.ink-sec .btn.ghost:hover{border-color:#fff;}
.btn .ar{transition:transform .25s;}
.btn:hover .ar{transform:translateX(4px);}
.btn-row{display:flex;gap:13px;flex-wrap:wrap;}

/* ===== nav ===== */
nav.top{position:fixed;top:0;left:0;right:0;z-index:100;height:78px;display:flex;align-items:center;transition:background .35s,border-color .35s,height .35s;border-bottom:1px solid transparent;}
nav.top.scrolled{background:rgba(255,255,255,.86);backdrop-filter:saturate(150%) blur(16px);border-bottom-color:var(--line);height:66px;}
/* 홈: 어두운 히어로 위(스크롤 전)에선 내비 글자를 흰색으로 — 스크롤하면 흰 배경+기본 어두운 글자로 복귀 */
body.home nav.top:not(.scrolled) .brand,body.home nav.top:not(.scrolled) .brand .mk{color:#fff;}
body.home nav.top:not(.scrolled) .menu a{color:rgba(255,255,255,.82);}
body.home nav.top:not(.scrolled) .menu a:hover,body.home nav.top:not(.scrolled) .menu a.active{color:#fff;}
body.home nav.top:not(.scrolled) .burger span{background:#fff;}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.6px;}
.brand .mk{font-family:var(--display);font-weight:700;}
.menu{display:flex;gap:32px;align-items:center;font-size:14px;font-weight:500;color:var(--gray);}
.menu a{position:relative;padding:6px 0;transition:color .2s;}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--accent);transition:width .25s;}
.menu a:hover{color:var(--ink);} .menu a:hover::after,.menu a.active::after{width:100%;}
.menu a.active{color:var(--ink);font-weight:600;}
.nav-cta{padding:11px 24px;background:var(--accent);color:#fff;font-weight:600;border-radius:99px;transition:.2s;}
.nav-cta::after{display:none;} .nav-cta:hover{background:var(--accent-d);color:#fff;transform:translateY(-1px);}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:101;}
.burger span{width:23px;height:2px;background:var(--ink);transition:.25s;}
@media(max-width:900px){
  .menu{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);flex-direction:column;justify-content:center;align-items:flex-start;gap:26px;background:var(--bg);padding:60px 44px;transform:translateX(100%);transition:transform .42s cubic-bezier(.5,0,.2,1);font-size:22px;font-family:var(--display);border-left:1px solid var(--line);}
  .menu.open{transform:none;box-shadow:-30px 0 80px rgba(0,0,0,.08);}
  .menu .nav-cta{font-family:var(--sans);font-size:15px;margin-top:12px;}
  .burger{display:flex;}
  body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.nav-open .burger span:nth-child(2){opacity:0;}
  body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ===== hero (home) ===== */
.hero{min-height:96vh;display:flex;align-items:center;padding:140px 0 90px;}
.hero h1{font-size:clamp(40px,7.2vw,92px);line-height:1.24;letter-spacing:-2.3px;}
.hero .sub{margin-top:32px;}
.hero .btn-row{margin-top:44px;}
.hero-meta{margin-top:70px;display:flex;gap:clamp(26px,5vw,72px);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:30px;}
.hero-meta .hm{display:flex;flex-direction:column;gap:4px;}
.hero-meta .hm .v{font-family:var(--display);font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-1px;display:flex;align-items:baseline;gap:2px;}
.hero-meta .hm .v .suf{font-size:.5em;font-family:var(--sans);font-weight:600;color:var(--gray);}
.hero-meta .hm .k{font-size:12.5px;color:var(--gray);}
.scrollcue{position:absolute;bottom:30px;right:clamp(22px,5vw,48px);font-family:var(--mono);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray2);display:flex;align-items:center;gap:12px;}
.scrollcue::after{content:"";width:40px;height:1px;background:var(--gray2);overflow:hidden;animation:cue 2s ease-in-out infinite;transform-origin:left;}
@keyframes cue{0%,100%{transform:scaleX(.3);opacity:.4;}50%{transform:scaleX(1);opacity:1;}}

/* ===== page hero (subpages) ===== */
.phero{padding:160px 0 clamp(60px,9vw,110px);border-bottom:1px solid var(--line);}
.phero h1{font-size:clamp(34px,5.6vw,68px);line-height:1.2;letter-spacing:-2px;}
.phero .lead{margin-top:26px;}
.phero .crumb{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray2);margin-bottom:26px;}

/* ===== statement / philosophy ===== */
.statement .big{font-family:var(--display);font-size:clamp(25px,4.3vw,50px);font-weight:700;line-height:1.5;letter-spacing:-1px;max-width:20ch;}
.statement .big .mut{color:var(--gray3);}
.statement .body{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:30px 64px;max-width:860px;}
.statement .body p{color:var(--gray);font-size:15.5px;line-height:1.95;}
@media(max-width:720px){.statement .body{grid-template-columns:1fr;gap:20px;}}

/* ===== metrics / stat dashboard ===== */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.metric{background:var(--bg);padding:clamp(32px,4vw,52px);}
.bg2 .metric{background:var(--bg2);}
.metric .num{font-family:var(--display);font-size:clamp(46px,6.4vw,82px);font-weight:700;letter-spacing:-2.5px;line-height:1;display:flex;align-items:baseline;gap:3px;}
.metric .num .suf{font-size:.32em;font-weight:600;color:var(--gray);font-family:var(--sans);letter-spacing:-.5px;}
.metric .lab{margin-top:18px;font-size:15px;font-weight:600;}
.metric .lab small{display:block;color:var(--gray2);font-weight:400;font-size:13px;margin-top:6px;line-height:1.65;}
@media(max-width:760px){.metric-grid{grid-template-columns:1fr;}}

/* ===== section head ===== */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:62px;flex-wrap:wrap;}
.shead h2{font-family:var(--display);font-weight:800;font-size:clamp(27px,3.8vw,46px);letter-spacing:-1.6px;line-height:1.32;}
.shead .lead{margin:0;}
.shead .r{flex:none;max-width:380px;}

/* ===== work list (home + portfolio) ===== */
.work-list{border-top:1px solid var(--ink);}
.work-row{display:grid;grid-template-columns:54px 1.1fr 1.5fr auto;gap:30px;align-items:center;padding:38px 6px;border-bottom:1px solid var(--line);transition:padding .35s,background .35s;}
.work-row:hover{background:var(--bg2);padding-left:22px;padding-right:22px;}
.work-row .idx{font-family:var(--mono);font-size:13px;color:var(--gray2);}
.work-row .name{font-family:var(--display);font-size:clamp(22px,2.8vw,34px);font-weight:700;letter-spacing:-1px;}
.work-row .name span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray2);font-weight:500;margin-bottom:10px;}
.work-row .desc{color:var(--gray);font-size:14.5px;line-height:1.7;}
.work-row .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px;}
.work-row .tags i{font-style:normal;font-size:11.5px;color:var(--gray);border:1px solid var(--line2);border-radius:99px;padding:3px 12px;}
.work-row .go{width:50px;height:50px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:18px;transition:.3s;flex:none;}
.work-row:hover .go{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(-45deg);}
@media(max-width:880px){.work-row{grid-template-columns:1fr auto;gap:14px;padding:28px 4px;}.work-row .idx,.work-row .desc{display:none;}}

/* ===== services grid ===== */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.svc{background:var(--bg);padding:clamp(30px,4vw,52px);transition:background .3s;}
.bg2 .svc{background:var(--bg2);} .svc:hover{background:var(--bg3);}
.svc .n{font-family:var(--mono);font-size:12px;color:var(--gray2);letter-spacing:2px;}
.svc h3{font-family:var(--display);font-size:clamp(21px,2.6vw,29px);margin:18px 0 14px;letter-spacing:-.7px;}
.svc p{color:var(--gray);font-size:14.5px;line-height:1.8;}
.svc ul{list-style:none;margin-top:22px;}
.svc li{font-size:14px;color:var(--gray);padding:8px 0 8px 20px;position:relative;border-top:1px solid var(--line);}
.svc li:first-child{border-top:none;}
.svc li::before{content:"—";position:absolute;left:0;color:var(--ink);}
.svc .tag{display:inline-block;font-size:11px;font-weight:600;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:1px 8px;margin-left:6px;vertical-align:middle;}
@media(max-width:720px){.svc-grid{grid-template-columns:1fr;}}

/* ===== process / numbered steps ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--ink);border-bottom:1px solid var(--line);}
.step{background:var(--bg);padding:42px clamp(22px,2.4vw,32px) 52px;}
.bg2 .step{background:var(--bg2);}
.step .num{font-family:var(--display);font-size:32px;color:var(--ink);font-weight:700;}
.step h3{font-size:18px;margin:20px 0 11px;letter-spacing:-.5px;}
.step p{color:var(--gray);font-size:13.5px;line-height:1.78;}
.step .meta{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--gray2);}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.steps{grid-template-columns:1fr;}}

/* numbered list (long: 01-08 style) */
.numlist{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;}
.numlist .ni{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line);}
.numlist .ni .nn{font-family:var(--mono);font-size:13px;color:var(--gray2);padding-top:3px;}
.numlist .ni h4{font-size:16.5px;font-weight:600;letter-spacing:-.4px;margin-bottom:6px;}
.numlist .ni p{font-size:13.5px;color:var(--gray);line-height:1.7;}
@media(max-width:760px){.numlist{grid-template-columns:1fr;gap:0;}}

/* ===== pricing ===== */
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:clamp(50px,7vw,90px);}
.feat{padding:34px 30px;border:1px solid var(--line);}
.feat .fi{font-family:var(--display);font-size:30px;font-weight:700;margin-bottom:16px;}
.feat h3{font-size:17px;margin-bottom:8px;letter-spacing:-.4px;}
.feat p{font-size:13.5px;color:var(--gray);line-height:1.75;}
@media(max-width:820px){.feat3{grid-template-columns:1fr;max-width:460px;margin-inline:auto;}}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.pcard{border:1px solid var(--line2);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;background:var(--bg);position:relative;transition:transform .3s,box-shadow .3s;}
.pcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(10,10,10,.07);}
.pcard.feature{background:var(--ink);color:#fff;border-color:var(--ink);}
.pcard.feature .desc,.pcard.feature .vat,.pcard.feature li{color:#b4b4b2;}
.pcard.feature li::before{background:#fff;}
.pcard .ptag{position:absolute;top:-12px;left:clamp(28px,3vw,40px);font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;background:var(--ink);color:#fff;padding:5px 12px;}
.pcard.feature .ptag{background:#fff;color:var(--ink);}
.pcard h3{font-size:19px;letter-spacing:-.5px;}
.pcard .desc{font-size:13px;color:var(--gray);margin:8px 0 24px;min-height:38px;line-height:1.6;}
.pcard .amt{font-family:var(--display);font-size:clamp(34px,4vw,46px);font-weight:700;letter-spacing:-2px;line-height:1;}
.pcard .amt small{font-size:.4em;font-weight:600;color:var(--gray);letter-spacing:0;}
.pcard.feature .amt small{color:#b4b4b2;}
.pcard .vat{font-size:11.5px;color:var(--gray2);margin-top:8px;}
.pcard ul{list-style:none;margin:26px 0 30px;flex:1;}
.pcard li{font-size:13.5px;color:var(--gray);padding:9px 0 9px 20px;position:relative;border-top:1px solid var(--line);}
.pcard.feature li{border-top-color:rgba(255,255,255,.12);}
.pcard li::before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;border-radius:50%;background:var(--ink);}
.pcard .btn{width:100%;justify-content:center;}
.pcard.feature .btn{background:var(--accent);color:#fff;border-color:var(--accent);}
.price-note{margin-top:30px;font-size:13px;color:var(--gray2);line-height:1.75;}
@media(max-width:880px){.price-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto;}}

/* quote table (price detail) */
.quote{border:1px solid var(--line);padding:clamp(26px,3.4vw,40px);}
.quote h4{font-size:17px;letter-spacing:-.4px;margin-bottom:6px;}
.quote .qsub{font-size:13.5px;color:var(--gray2);margin-bottom:18px;}
.qrow{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:17px 0;border-top:1px solid var(--line);}
.qrow b{font-size:14.5px;font-weight:600;letter-spacing:-.3px;}
.qrow span{font-size:13.5px;color:var(--gray);line-height:1.65;}
.qtotal{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:20px;border-top:2px solid var(--ink);font-weight:700;}
.qtotal .amt{font-family:var(--display);font-size:26px;letter-spacing:-1px;}
.qnote{font-size:12.5px;color:var(--gray2);margin-top:16px;line-height:1.75;}
@media(max-width:640px){.qrow{grid-template-columns:1fr;gap:4px;}}

/* ===== faq (tabs + accordion) ===== */
.faq-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:46px;}
.faq-tabs button{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--gray);background:none;border:1px solid var(--line2);padding:9px 18px;border-radius:99px;cursor:pointer;transition:.2s;}
.faq-tabs button:hover{border-color:var(--ink);color:var(--ink);}
.faq-tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.faq-list{border-top:1px solid var(--ink);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item.hide{display:none;}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 4px;cursor:pointer;font-size:16.5px;font-weight:600;letter-spacing:-.4px;}
.faq-q .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray2);font-weight:500;margin-right:14px;}
.faq-q .pm{flex:none;width:22px;height:22px;position:relative;}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .25s;}
.faq-q .pm::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq-item.open .faq-q .pm::after{transform:translate(-50%,-50%) rotate(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{padding:0 4px 26px;font-size:14.5px;color:var(--gray);line-height:1.85;max-width:760px;}

/* ===== contact ===== */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,80px);align-items:start;}
.cinfo .ci{padding:24px 0;border-top:1px solid var(--line);}
.cinfo .ci:first-child{border-top:none;}
.cinfo .ci .k{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray2);margin-bottom:8px;}
.cinfo .ci .v{font-size:17px;font-weight:600;letter-spacing:-.3px;}
.cinfo .ci .v small{display:block;font-size:13px;font-weight:400;color:var(--gray);margin-top:5px;}
.form .frow{margin-bottom:20px;}
.form .frow2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:9px;letter-spacing:-.2px;}
.form input,.form select,.form textarea{width:100%;padding:14px 0;border:none;border-bottom:1px solid var(--line2);font-size:15px;font-family:inherit;background:transparent;color:var(--ink);transition:border-color .2s;}
.form input::placeholder,.form textarea::placeholder{color:var(--gray3);}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--accent);}
.cinfo a:hover{color:var(--accent);}
.form select{cursor:pointer;}
.form textarea{resize:vertical;min-height:112px;line-height:1.6;}
.form .btn{margin-top:14px;}
.form .privacy{font-size:11.5px;color:var(--gray2);margin-top:16px;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:48px;}.form .frow2{grid-template-columns:1fr;}}

/* ===== cta ===== */
.cta{text-align:center;padding:clamp(60px,9vw,120px) 0;}
.cta h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,60px);letter-spacing:-1.6px;line-height:1.34;}
.cta p{color:var(--gray);margin:24px auto 40px;max-width:540px;font-size:16px;}
.cta .btn-row{justify-content:center;}
.ink-sec.cta p{color:#a8a8a6;}

/* ===== footer ===== */
footer{background:var(--ink);color:#bdbdba;padding:clamp(60px,8vw,90px) 0 48px;font-size:14px;}
footer .grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:44px;}
footer .brand{color:#fff;margin-bottom:18px;}
footer .desc{color:#8a8a88;font-size:13.5px;line-height:1.8;max-width:340px;}
footer .fcol h4{font-size:11px;font-family:var(--mono);letter-spacing:2px;text-transform:uppercase;color:#6f6f6d;margin-bottom:18px;}
footer .fcol a{display:block;padding:6px 0;color:#bdbdba;transition:color .2s;}
footer .fcol a:hover{color:#fff;}
footer .biz{margin-top:44px;padding-top:30px;border-top:1px solid rgba(255,255,255,.1);color:#7a7a78;font-size:12.5px;line-height:1.95;}
footer .biz .biz-name{color:#9a9a98;font-weight:700;font-size:13.5px;margin-bottom:8px;letter-spacing:-.2px;}
footer .biz p{margin:0;}
footer .biz .biz-links{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;}
footer .biz .biz-links a{color:#bdbdba;}
footer .biz .biz-links a:hover{color:#fff;}
footer .copy{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#6f6f6d;font-size:12.5px;}
@media(max-width:720px){footer .grid{grid-template-columns:1fr 1fr;gap:32px;}footer .fbrand{grid-column:1/-1;}}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .scrollcue::after{animation:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   FIVEPRO-STYLE COMPONENTS  (home)
   ============================================================ */
/* centered section heading: pill → question → title */
.fp-head{text-align:center;max-width:780px;margin:0 auto 60px;}
.pill{display:inline-block;font-size:12.5px;font-weight:700;color:#fff;background:var(--accent);border-radius:99px;padding:7px 16px;margin-bottom:20px;}
.fp-head .q{font-size:15px;color:var(--gray);font-weight:600;margin-bottom:16px;}
.fp-head h2{font-size:clamp(26px,4.2vw,46px);font-weight:800;letter-spacing:-1.6px;line-height:1.32;}
.fp-head h2 .b{color:var(--accent);}

/* ---- dark hero ---- */
.hero-fp{position:relative;min-height:94vh;display:flex;align-items:center;padding:150px 0 96px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 90% at 82% 4%,#16275a 0%,#0b1430 48%,#070b18 100%);}
.hero-fp::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 46% at 78% 26%,rgba(0,102,255,.34),transparent 62%);}
.hero-fp .wrap{position:relative;z-index:1;}
.hero-fp .eyebrow{color:#8fb0ff;} .hero-fp .eyebrow::before{background:var(--accent);}
.hero-fp h1{font-size:clamp(40px,7vw,88px);line-height:1.24;letter-spacing:-2.3px;}
.hero-fp .lead{color:#aeb8d2;}
.hero-fp .btn.ghost{color:#fff;border-color:rgba(255,255,255,.28);}
.hero-fp .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.hero-fp .hero-meta{border-top-color:rgba(255,255,255,.16);}
.hero-fp .hm .v{color:#fff;} .hero-fp .hm .v .suf{color:#8fb0ff;} .hero-fp .hm .k{color:#8893ab;}
.hero-fp .scrollcue{color:#7a85a0;} .hero-fp .scrollcue::after{background:#7a85a0;}

/* ---- trust logo strip ---- */
.logos{padding:46px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.logos .cap{text-align:center;font-size:14px;color:var(--gray);margin-bottom:24px;}
.logos .cap b{color:var(--ink);}
.logos .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;}
.logos .row span{font-size:13.5px;font-weight:600;color:var(--gray);border:1px solid var(--line2);border-radius:99px;padding:9px 18px;}

/* ---- alternating colored panels (signature) ---- */
.altrows{display:flex;flex-direction:column;gap:26px;}
.altrow{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
.altrow:nth-child(even){grid-template-columns:1fr 1.15fr;}
.altrow:nth-child(even) .panel{order:2;}
.panel{border-radius:22px;min-height:300px;padding:34px;display:flex;align-items:flex-end;position:relative;overflow:hidden;}
.panel.cyan{background:linear-gradient(155deg,#3dd0f5,#1aa6e8);}
.panel.mint{background:linear-gradient(155deg,#74dccf,#3fb6a8);}
.panel.purple{background:linear-gradient(155deg,#7b53ec,#5a34d6);}
.panel .mock{width:100%;background:rgba(255,255,255,.92);border-radius:13px;box-shadow:0 24px 50px rgba(8,18,45,.22);padding:14px 16px;}
.panel .mock .bar{display:flex;gap:5px;margin-bottom:12px;}
.panel .mock .bar i{width:9px;height:9px;border-radius:50%;background:#e2e4ea;}
.panel .mock .ln{height:9px;border-radius:5px;background:#e9ebf1;margin:8px 0;}
.panel .mock .ln.s{width:55%;} .panel .mock .ln.m{width:78%;} .panel .mock .ln.a{width:40%;background:var(--accent);opacity:.85;}
.altrow .copy .lab{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);}
.altrow .copy h3{font-size:clamp(21px,2.7vw,30px);font-weight:800;letter-spacing:-1px;margin:14px 0 14px;line-height:1.32;}
.altrow .copy p{color:var(--gray);font-size:15px;line-height:1.8;margin-bottom:18px;}
.altrow .copy ul{list-style:none;}
.altrow .copy li{font-size:14px;color:var(--ink);padding:8px 0 8px 28px;position:relative;}
.altrow .copy li::before{content:"✓";position:absolute;left:0;top:8px;width:18px;height:18px;font-size:11px;color:#fff;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;}
@media(max-width:820px){.altrow,.altrow:nth-child(even){grid-template-columns:1fr;}.altrow:nth-child(even) .panel{order:0;}.panel{min-height:200px;}}

/* ---- feature grid ---- */
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.fitem{background:var(--bg);padding:34px 30px;transition:background .25s;}
.bg2 .fitem{background:var(--bg2);} .fitem:hover{background:var(--bg3);}
.fitem .ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;}
.fitem .ic.b1{background:#e2ecff;} .fitem .ic.b2{background:#e3f7f1;} .fitem .ic.b3{background:#efe8ff;}
.fitem .ic.b4{background:#fdeef0;} .fitem .ic.b5{background:#fff2e0;} .fitem .ic.b6{background:#e6f4ff;}
.fitem h4{font-size:16.5px;font-weight:700;letter-spacing:-.4px;margin-bottom:8px;}
.fitem p{font-size:13.5px;color:var(--gray);line-height:1.72;}
.fitem .more{display:inline-block;margin-top:16px;font-size:12.5px;font-weight:600;color:var(--accent);}
@media(max-width:860px){.featgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.featgrid{grid-template-columns:1fr;}}

/* ---- big stats (rolling numbers) ---- */
.stats-fp{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center;}
.sfp{padding:14px;}
.sfp .v{font-size:clamp(50px,8vw,96px);font-weight:800;letter-spacing:-4px;line-height:1;color:var(--ink);display:flex;align-items:baseline;justify-content:center;gap:2px;}
.sfp .v .suf{font-size:.34em;color:var(--accent);font-weight:700;letter-spacing:-1px;}
.sfp .k{margin-top:16px;font-size:15px;color:var(--gray);font-weight:600;}
.sfp .k small{display:block;color:var(--gray2);font-weight:400;font-size:13px;margin-top:5px;}
@media(max-width:680px){.stats-fp{grid-template-columns:1fr;gap:40px;}}

/* ---- blue gradient CTA banner ---- */
.cta-banner{border-radius:28px;padding:clamp(54px,8vw,104px) clamp(28px,5vw,72px);text-align:center;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(115deg,#0a1f55 0%,#0a45c4 52%,#0066ff 100%);}
.cta-banner::before{content:"";position:absolute;top:-40%;right:-10%;width:560px;height:560px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 64%);pointer-events:none;}
.cta-banner>*{position:relative;z-index:1;}
.cta-banner .pill{background:rgba(255,255,255,.16);}
.cta-banner h2{font-size:clamp(28px,4.6vw,54px);font-weight:800;letter-spacing:-1.6px;line-height:1.34;}
.cta-banner p{color:#c9d8ff;margin:20px auto 36px;max-width:560px;font-size:16px;}
.cta-banner .btn-row{justify-content:center;}
.cta-banner .btn{background:#fff;color:var(--accent);border-color:#fff;}
.cta-banner .btn:hover{background:#e9f1ff;border-color:#e9f1ff;color:var(--accent);}
.cta-banner .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.cta-banner .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}

/* ---- floating help widget ---- */
.float-help{position:fixed;right:24px;bottom:24px;z-index:90;width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 14px 34px rgba(0,102,255,.4);transition:transform .25s,background .25s;}
.float-help:hover{transform:translateY(-3px) scale(1.05);background:var(--accent-d);}
@media(max-width:560px){.float-help{width:52px;height:52px;right:16px;bottom:16px;}}

/* diagonal sheen on CTA banner (fivepro look) */
.cta-banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);}

/* ---- following floating CTA bar (mobile-aware, dismissible) ---- */
.floatbar{position:fixed;z-index:96;left:50%;bottom:22px;transform:translate(-50%,170%);display:flex;align-items:center;gap:14px;
  background:var(--ink);color:#fff;padding:11px 13px 11px 22px;border-radius:99px;box-shadow:0 16px 40px rgba(8,18,45,.34);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.floatbar.show{transform:translate(-50%,0);}
.floatbar .ft{font-size:14px;font-weight:600;white-space:nowrap;}
.floatbar .ft b{color:#7fb2ff;}
.floatbar .btn{padding:11px 20px;font-size:13.5px;}
.floatbar .x{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#9aa6bf;background:none;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;transition:.2s;}
.floatbar .x:hover{background:rgba(255,255,255,.1);color:#fff;}
@media(max-width:560px){
  .floatbar{left:10px;right:10px;bottom:10px;transform:translateY(180%);border-radius:15px;padding:11px 11px 11px 16px;gap:10px;justify-content:space-between;}
  .floatbar.show{transform:none;}
  .floatbar .ft{font-size:12.5px;white-space:normal;line-height:1.3;}
  .floatbar .btn{padding:10px 15px;white-space:nowrap;}
}
@media(prefers-reduced-motion:reduce){.floatbar{transition:none;}}

/* ---- gallery cards (제작 사례) ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.gcard{border:1px solid var(--line);overflow:hidden;background:var(--bg);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s;}
.gcard:hover{transform:translateY(-5px);box-shadow:0 30px 60px rgba(10,20,50,.1);border-color:var(--line2);}
.gcard .thumb{aspect-ratio:2/1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:24px;color:#fff;gap:7px;}
.gcard .thumb.a{background:radial-gradient(120% 120% at 75% 12%,#2a2620,#13110d);}
.gcard .thumb.b{background:radial-gradient(120% 120% at 75% 12%,#16386e,#0b1f44);}
.gcard .thumb.c{background:radial-gradient(120% 120% at 75% 12%,#1b74ff,#0040b0);}
.gcard .thumb .en{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;opacity:.72;}
.gcard .thumb .ko{font-size:21px;font-weight:800;letter-spacing:-.6px;}
.gcard .body{padding:22px;display:flex;flex-direction:column;gap:13px;flex:1;}
.gcard .body p{font-size:13.5px;color:var(--gray);line-height:1.7;}
.gcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;}
.gcard .tags i{font-style:normal;font-size:11px;color:var(--gray);border:1px solid var(--line2);border-radius:99px;padding:3px 11px;}
@media(max-width:820px){.gallery{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}}

/* ---- feature carousel (가로 카드 슬라이더) ---- */
.fcarousel{position:relative;}
.fnav{display:flex;gap:10px;justify-content:flex-end;margin-bottom:22px;}
.fnav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:var(--bg);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s,opacity .2s;}
.fnav button:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink);}
.fnav button:disabled{opacity:.3;cursor:default;}
.ftrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px;margin:-4px;cursor:grab;}
.ftrack:active{cursor:grabbing;}
.ftrack::-webkit-scrollbar{display:none;}
.ftrack .fitem{flex:0 0 calc((100% - 36px)/3);border:1px solid var(--line);scroll-snap-align:start;}
.ftrack .fitem .more{pointer-events:auto;}
@media(max-width:980px){.ftrack .fitem{flex-basis:calc((100% - 18px)/2);}}
@media(max-width:680px){.ftrack .fitem{flex-basis:84%;}}

/* ---- realistic mini-UI inside color panels ---- */
.panel .mock{padding:0;overflow:hidden;background:#fff;border-radius:12px;}
.panel .mock .top{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#fafbfc;border-bottom:1px solid #eef0f4;}
.panel .mock .top i{width:8px;height:8px;border-radius:50%;background:#dfe3ea;}
.panel .mock .top .url{margin-left:8px;flex:1;height:8px;border-radius:4px;background:#eceef3;}
.panel .mock .scr{padding:14px;display:flex;flex-direction:column;gap:9px;}
.panel .mock .h{height:42px;border-radius:8px;background:linear-gradient(120deg,#e9edf5,#dde6f4);position:relative;margin:0;}
.panel .mock .h .btn-s{position:absolute;left:12px;bottom:10px;width:48px;height:12px;border-radius:6px;background:var(--accent);}
.panel .mock .ln{height:8px;border-radius:5px;background:#edeff4;margin:0;width:100%;}
.panel .mock .ln.s{width:48%;} .panel .mock .ln.m{width:72%;}
.panel .mock .grid4{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.panel .mock .th{aspect-ratio:16/10;border-radius:7px;background:#e7ebf3;}
.panel .mock .th.bl{background:#d6e4ff;}
.panel .mock.adm .scr{flex-direction:row;gap:0;padding:0;min-height:150px;}
.panel .mock.adm .side{width:36%;background:#f4f2fc;padding:13px;display:flex;flex-direction:column;gap:8px;}
.panel .mock.adm .side .ln{background:#e4dff6;}
.panel .mock.adm .main{flex:1;padding:14px;display:flex;flex-direction:column;gap:11px;}
.panel .mock.adm .item{display:flex;align-items:center;gap:9px;}
.panel .mock.adm .ck{width:14px;height:14px;border-radius:4px;border:1.5px solid #cdd3e0;flex:none;}
.panel .mock.adm .ck.on{background:var(--accent);border-color:var(--accent);}
.panel .mock.adm .item .ln{flex:1;}

/* ---- pinned horizontal scroll (스크롤 다운 → 카드 휙휙) ---- */
.pin-sec{position:relative;padding:0;}
.pin-stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,4vh,46px);overflow:hidden;background:var(--bg);}
.bg2 .pin-stick{background:var(--bg2);}
.pin-head{margin:0 auto;}
.pin-track{display:flex;gap:30px;will-change:transform;transition:transform .6s cubic-bezier(.65,0,.25,1);counter-reset:feat;}
.pin-track .fitem{flex:0 0 min(760px,86vw);border:1px solid var(--line);min-height:300px;display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,58px);position:relative;}
.pin-track .fitem::after{counter-increment:feat;content:"0" counter(feat);position:absolute;top:26px;right:34px;font-family:var(--mono);font-weight:500;font-size:46px;color:var(--line2);line-height:1;}
.pin-track .fitem .ic{width:64px;height:64px;border-radius:17px;font-size:30px;margin-bottom:22px;}
.pin-track .fitem h4{font-size:clamp(22px,2.8vw,30px);letter-spacing:-.8px;margin-bottom:14px;}
.pin-track .fitem p{font-size:15.5px;line-height:1.8;max-width:48ch;color:var(--gray);}
.pin-track .fitem .more{margin-top:26px;font-size:14px;}
.pin-prog{height:3px;background:var(--line);max-width:220px;margin:0 auto;border-radius:2px;overflow:hidden;}
.pin-prog span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s ease;}
/* mobile / reduced → flat horizontal swipe */
.pin-sec.flat,.pin-sec.flat .pin-stick{height:auto!important;position:static;overflow:visible;}
.pin-sec.flat{padding:clamp(80px,12vw,150px) 0;}
.pin-sec.flat .pin-track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:6px;}
.pin-sec.flat .pin-track::-webkit-scrollbar{display:none;}
.pin-sec.flat .pin-track .fitem{scroll-snap-align:start;flex-basis:82%;}
.pin-sec.flat .pin-prog{display:none;}
@media(max-width:820px){.pin-sec{padding:0;}}

/* ---- richer abstract mock content ---- */
.panel .mock .navrow{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid #eef0f4;}
.panel .mock .navrow .lg{width:30px;height:9px;border-radius:4px;background:var(--accent);}
.panel .mock .navrow .ml{display:flex;gap:8px;margin-left:auto;}
.panel .mock .navrow .ml i{width:20px;height:6px;border-radius:3px;background:#e7eaf0;}
.panel .mock .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.panel .mock .cards3 .c{height:42px;border-radius:8px;background:#f1f3f8;border:1px solid #eaecf2;position:relative;}
.panel .mock .cards3 .c::before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;border-radius:5px;background:#dfe7fb;}
.panel .mock .grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.panel .mock .grid6 .th{aspect-ratio:1/1;border-radius:7px;background:#e7ebf3;}
.panel .mock .grid6 .th.b{background:#d6e4ff;} .panel .mock .grid6 .th.d{background:#cfd6e6;}
.panel .mock .pricerow{display:flex;align-items:center;gap:8px;}
.panel .mock .pricerow .pr{width:42px;height:11px;border-radius:5px;background:var(--accent);opacity:.85;}
.panel .mock.adm .stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.panel .mock.adm .stats3 .s{padding:8px;border:1px solid #eef0f4;border-radius:7px;}
.panel .mock.adm .stats3 .s b{display:block;width:62%;height:11px;border-radius:4px;background:var(--accent);opacity:.85;margin-bottom:5px;}
.panel .mock.adm .stats3 .s i{display:block;width:88%;height:6px;border-radius:3px;background:#edeff4;}
.panel .mock.adm .chart{display:flex;align-items:flex-end;gap:5px;height:44px;}
.panel .mock.adm .chart span{flex:1;background:#dde6fb;border-radius:3px 3px 0 0;}
.panel .mock.adm .chart span.hi{background:var(--accent);}
.panel .mock.adm .main{gap:9px;}

/* ============================================================
   APPLE-STYLE HERO (centered, huge type, glow + shimmer)
   ============================================================ */
.hero-fp{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:100vh;padding:150px 0 110px;
  background:radial-gradient(82% 72% at 50% -2%,#1b2e6b 0%,#0c1430 44%,#05070e 100%);}
.hero-fp::before{content:"";position:absolute;top:-12%;left:50%;transform:translateX(-50%);
  width:92vw;max-width:1150px;height:72vh;pointer-events:none;
  background:radial-gradient(circle,rgba(0,102,255,.42),transparent 60%);filter:blur(34px);
  animation:heroglow 9s ease-in-out infinite;}
@keyframes heroglow{0%,100%{opacity:.7;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.08);}}
.hero-fp .wrap{position:relative;z-index:1;max-width:1020px;display:flex;flex-direction:column;align-items:center;}
.hero-fp .eyebrow{justify-content:center;color:#8fb0ff;margin-bottom:30px;}
.hero-fp .eyebrow::before{display:none;}
.hero-fp h1{font-size:clamp(36px,6vw,82px);line-height:1.16;letter-spacing:-1.8px;font-weight:900;}
/* 4줄 동일 크기 + 애플식 한 줄씩 블러 등장 */
.hero-fp h1.hh span{display:block;opacity:0;animation:lineIn .6s cubic-bezier(.22,.9,.3,1) forwards;}
.hero-fp h1.hh span:nth-child(1){animation-delay:.06s;}
.hero-fp h1.hh span:nth-child(2){animation-delay:.30s;}
.hero-fp h1.hh span:nth-child(3){animation-delay:.54s;}
.hero-fp h1.hh span:nth-child(4){animation-delay:.78s;}
@keyframes lineIn{from{opacity:0;transform:translateY(16px);filter:blur(7px);}to{opacity:1;transform:translateY(0);filter:blur(0);}}
/* 강조: 블루 그라데이션이 글자 위를 좌우로 흐름 (처음 버전) */
.hero-fp h1 .hl{background:linear-gradient(100deg,#6ea8ff,#cfe0ff 32%,#6ea8ff 58%,#aecbff);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 6.5s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .hero-fp h1.hh span{animation:none;opacity:1;}
  .hero-fp h1 .hl{animation:none;}
}
@keyframes shine{to{background-position:200% center;}}
.hero-fp .lead{color:#b8c2da;margin:34px auto 0;max-width:600px;font-size:clamp(16px,2vw,19.5px);text-align:center;}
.hero-fp .btn-row{margin-top:44px;justify-content:center;}
.hero-fp .hero-meta{margin-top:58px;justify-content:center;border-top:none;padding-top:0;gap:clamp(30px,5vw,68px);}
.hero-fp .hm{align-items:center;}
.hero-fp .scrollcue{left:50%;right:auto;transform:translateX(-50%);flex-direction:column;gap:10px;}
.hero-fp .scrollcue::after{width:1px;height:38px;}
/* 등장: 페이드업 + 살짝 스케일 */
.hero-fp .reveal{transform:translateY(34px) scale(.975);}
.hero-fp .reveal.in{transform:none;}
@media(max-width:560px){.hero-fp h1{letter-spacing:-1.5px;}.hero-fp .hero-meta{gap:24px;}}

/* ============================================================
   APPLE-STYLE SCROLL-ZOOM SHOWCASE
   ============================================================ */
.zoom-show{text-align:center;overflow:hidden;}
.zoom-show h2{font-family:var(--display);font-weight:900;font-size:clamp(28px,5vw,58px);letter-spacing:-2px;line-height:1.22;}
.zoom-show .zsub{color:var(--gray);margin:18px auto 0;font-size:clamp(15px,2vw,18px);max-width:560px;}
.zframe-wrap{margin-top:clamp(42px,6vw,76px);}
.zframe{max-width:1040px;margin:0 auto;transform:scale(.84);transform-origin:center;will-change:transform;}
.zframe .bz{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 50px 110px rgba(10,20,50,.18);}
.zframe .bz .top{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#fafbfc;border-bottom:1px solid #eef0f4;}
.zframe .bz .top i{width:11px;height:11px;border-radius:50%;background:#dfe3ea;}
.zframe .bz .top .url{margin-left:10px;flex:1;max-width:280px;height:11px;border-radius:5px;background:#eceef3;}
.zframe .bz .shot{aspect-ratio:16/9;background:radial-gradient(120% 120% at 72% -5%,#1a2c66,#0a1024);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;padding:30px;}
.zframe .bz .shot .en{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#8fb0ff;}
.zframe .bz .shot .bigko{font-size:clamp(20px,3.6vw,44px);font-weight:900;letter-spacing:-1.5px;line-height:1.1;}
.zframe .bz .shot .bigko .g{background:linear-gradient(100deg,#6ea8ff,#cfe0ff,#6ea8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.zframe .bz .shot .row{display:flex;gap:10px;margin-top:8px;}
.zframe .bz .shot .row b{width:96px;height:13px;border-radius:7px;background:var(--accent);}
.zframe .bz .shot .row i{width:74px;height:13px;border-radius:7px;background:rgba(255,255,255,.2);}
@media(max-width:560px){.zframe{transform:scale(.94);}}
@media(prefers-reduced-motion:reduce){.zframe{transform:none!important;}}

/* ============================================================
   FOUNDER LETTER (노회찬체 손글씨) + REVIEWS (trust)
   ============================================================ */
@font-face{font-family:'MiraeNamu';src:url('fonts/MiraeNamu.woff2?v=2') format('woff2');font-weight:normal;font-display:swap;}

.founder{background:var(--bg2);}
.founder .wrap{max-width:920px;}
.founder .fimg{border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#dde6f4;position:relative;box-shadow:0 26px 56px rgba(10,20,50,.16);}
.founder .ftext{max-width:700px;margin:clamp(34px,5vw,54px) auto 0;}
.founder .fimg img{width:100%;height:100%;object-fit:cover;}
.founder .fimg .nb{position:absolute;left:14px;bottom:14px;background:rgba(9,18,40,.72);backdrop-filter:blur(6px);color:#fff;border-radius:12px;padding:10px 15px;}
.founder .fimg .nb b{display:block;font-size:14px;font-weight:800;letter-spacing:-.3px;}
.founder .fimg .nb span{font-size:11.5px;color:#c9d6ef;}
.founder .fhead{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gray2);margin-bottom:18px;display:flex;align-items:center;gap:11px;}
.founder .fhead::before{content:"";width:26px;height:1px;background:var(--accent);}
.founder .letter{font-family:'MiraeNamu',var(--sans);font-size:clamp(19px,2.4vw,27px);line-height:1.78;color:var(--ink);letter-spacing:.2px;}
.founder .letter p{margin-bottom:14px;}
.founder .letter .hl{color:var(--accent);}
.founder .sign{font-family:'MiraeNamu',var(--sans);font-size:clamp(18px,2.2vw,24px);text-align:right;margin-top:20px;color:var(--ink);}
@media(max-width:760px){.founder .fimg{aspect-ratio:16/9;}}
.founder .cred{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);display:flex;gap:10px 26px;flex-wrap:wrap;font-size:13.5px;color:var(--gray);font-weight:600;align-items:center;}
.founder .cred b{color:var(--ink);}
.founder .cred .star{color:#ff9f1a;letter-spacing:1px;}

.reviews .rev-badge{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:12px 22px;margin:0 auto 14px;box-shadow:var(--sh-sm,0 1px 3px rgba(10,20,50,.05));}
.reviews .rev-badge .big{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-1px;}
.reviews .rev-badge .star{color:#ff9f1a;font-size:15px;letter-spacing:1px;}
.reviews .rev-badge .cnt{font-size:13.5px;color:var(--gray);font-weight:600;}
.reviews .rev-note{font-size:13px;color:var(--gray2);margin-bottom:40px;}
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;text-align:left;max-width:860px;margin:0 auto;}
.rev{border:1px solid var(--line);border-radius:15px;padding:24px;background:#fff;transition:transform .25s,box-shadow .25s;}
.rev:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(10,20,50,.08);}
.rev .stars{color:#ff9f1a;font-size:14px;letter-spacing:1px;}
.rev p{font-size:15.5px;color:var(--ink);margin:11px 0 0;line-height:1.6;font-weight:500;}
.rev .src{font-size:12px;color:var(--gray2);margin-top:12px;}
.reviews .more{display:inline-block;margin-top:34px;font-size:14.5px;font-weight:700;color:var(--accent);}
@media(max-width:680px){.rev-grid{grid-template-columns:1fr;}}

/* ============================================================
   HERO MOTION BACKGROUND (animated aurora + drifting grid)
   ============================================================ */
.hero-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.hero-aurora .blob{position:absolute;border-radius:50%;filter:blur(58px);opacity:.7;mix-blend-mode:screen;will-change:transform;}
.hero-aurora .b1{width:48vw;height:48vw;background:radial-gradient(circle,#55a0ff,transparent 68%);top:-10%;left:6%;animation:au1 17s ease-in-out infinite;}
.hero-aurora .b2{width:42vw;height:42vw;background:radial-gradient(circle,#1ee4f2,transparent 68%);top:6%;right:4%;animation:au2 21s ease-in-out infinite;}
.hero-aurora .b3{width:52vw;height:52vw;background:radial-gradient(circle,#9166ff,transparent 70%);bottom:-22%;left:28%;animation:au3 25s ease-in-out infinite;}
@keyframes au1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(9vw,7vh) scale(1.18);}}
@keyframes au2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-8vw,9vh) scale(1.12);}}
@keyframes au3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6vw,-8vh) scale(1.22);}}
.hero-aurora .grid{position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask:radial-gradient(circle at 50% 38%,#000,transparent 72%);mask:radial-gradient(circle at 50% 38%,#000,transparent 72%);
  animation:gridmove 22s linear infinite;}
@keyframes gridmove{to{background-position:56px 56px;}}
.hero-aurora .stars{position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 20% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1.4px 1.4px at 70% 60%,rgba(255,255,255,.4),transparent),radial-gradient(1.2px 1.2px at 40% 80%,rgba(255,255,255,.35),transparent),radial-gradient(1.6px 1.6px at 85% 25%,rgba(255,255,255,.45),transparent),radial-gradient(1.2px 1.2px at 55% 15%,rgba(255,255,255,.3),transparent);animation:twinkle 6s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.5;}50%{opacity:1;}}
@media(prefers-reduced-motion:reduce){.hero-aurora .blob,.hero-aurora .grid,.hero-aurora .stars{animation:none;}}

/* ===== logos marquee (흐르는 신뢰 스트립) ===== */
.logos .marq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.logos .marq .track{display:inline-flex;gap:13px;width:max-content;animation:marq 28s linear infinite;}
.logos:hover .marq .track{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.logos .marq .track{animation:none;}}
.logos .marq .track span{font-size:13.5px;font-weight:600;color:var(--gray);border:1px solid var(--line2);border-radius:99px;padding:9px 18px;white-space:nowrap;flex:none;}

/* ===== real work screenshots in cards/showcase ===== */
.gcard .thumb.has-img{position:relative;}
.gcard .thumb.has-img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;}
/* 영상 썸네일: 상단 브라우저 띠(~16.6%) 잘라내고 4:3 카드에 꽉 채움 */
.gcard .thumb.has-vid > video{position:absolute;left:50%;top:0;width:116%;height:auto;transform:translate(-50%,-16.6%);}
.gcard .thumb.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,16,40,.92),transparent 62%);}
.gcard .thumb.has-img > span{position:relative;z-index:1;}
.zframe .bz .shot.real{padding:0;display:block;background:#0b1f44;}
.zframe .bz .shot.real img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}

/* ============================================================
   PINNED SCROLL-ZOOM (PLANMAX 실사이트 점점 커지며 펼쳐짐)
   ============================================================ */
.zoompin{position:relative;height:340vh;background:var(--bg);padding:0;}
.zoompin-stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.zoompin-head{position:absolute;top:10vh;left:0;right:0;text-align:center;z-index:4;padding:0 22px;transition:opacity .25s;}
.zoompin-head .pill{margin-bottom:14px;}
.zoompin-head h2{font-family:var(--display);font-weight:900;font-size:clamp(28px,5vw,58px);letter-spacing:-2px;line-height:1.15;}
.zoompin-head h2 .b{color:var(--accent);}
.zoompin-head .zsub{color:var(--gray);margin-top:14px;font-size:clamp(14px,1.8vw,17px);max-width:520px;margin-inline:auto;}
.zoompin-frame{width:min(1160px,94vw);will-change:transform;transform-origin:center center;}
.zbz{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 40px 110px rgba(10,20,50,.24);}
.zbar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#f6f8fb;border-bottom:1px solid var(--line);}
.zbar i{width:11px;height:11px;border-radius:50%;background:#dde3ea;}
.zbar .u{margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--gray2);}
.zview{height:clamp(300px,56vh,580px);overflow:hidden;background:#fff;position:relative;}
.zview img{width:100%;display:block;will-change:transform;}
/* 화면기록 영상: 상단 개인 브라우저 띠(탭·북마크 ~16.6%)를 잘라내고 프레임에 꽉 채움 */
.zview video{position:absolute;left:50%;top:0;width:122%;transform:translate(-50%,-16.6%);will-change:transform;}
.zoompin-hint{position:absolute;bottom:5vh;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gray2);z-index:4;transition:opacity .25s;}
.zoompin.flat{height:auto;}
.zoompin.flat .zoompin-stick{position:static;height:auto;flex-direction:column;padding:clamp(70px,11vw,130px) 0;}
.zoompin.flat .zoompin-head{position:static;margin-bottom:36px;}
.zoompin.flat .zoompin-frame{transform:none!important;}
.zoompin.flat .zview{height:auto;max-height:64vh;overflow-y:auto;}
.zoompin.flat .zview img{transform:none!important;}
.zoompin.flat .zoompin-hint{display:none;}

/* ===== countdown floating banner — 남색 트랙 + 파란 드레인 바 (시간 줄수록 우측으로 줄어듦) ===== */
.floatbar.countdown{width:min(1180px,calc(100vw - 28px));background:#0a1733;border-radius:14px;overflow:hidden;
  box-shadow:0 16px 44px rgba(10,23,51,.42);padding:13px 14px 13px 22px;gap:14px;animation:none;}
.floatbar.countdown .cd-bar{position:absolute;inset:0;z-index:0;}
.floatbar.countdown .cd-bar-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#1f6dff,#39a4ff);transform-origin:left center;animation:cddrain 12s linear infinite;}
@keyframes cddrain{0%{width:0;animation-timing-function:cubic-bezier(.25,.85,.4,1);}26%{width:100%;animation-timing-function:linear;}100%{width:0;}}
.floatbar.countdown .cd-clock .cd-ms i{min-width:25px;color:#bcd6ff;}
.floatbar.countdown > :not(.cd-bar){position:relative;z-index:1;}
.floatbar.countdown .cd-tag{font-size:11.5px;font-weight:800;background:rgba(255,255,255,.22);border-radius:99px;padding:5px 11px;white-space:nowrap;color:#fff;}
.floatbar.countdown .cd-label{font-size:13.5px;font-weight:700;white-space:nowrap;color:#fff;}
.floatbar.countdown .cd-timer{display:inline-flex;align-items:center;gap:8px;margin-left:auto;}
.floatbar.countdown .dday{font-size:14.5px;font-weight:900;color:#fff;letter-spacing:-.3px;}
.floatbar.countdown .cd-clock{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-weight:600;font-size:13px;color:#fff;}
.floatbar.countdown .cd-clock i{background:rgba(0,0,0,.34);border-radius:5px;padding:3px 5px;font-style:normal;min-width:25px;text-align:center;}
.floatbar.countdown .btn{background:#fff;color:#0a1733;border-color:#fff;padding:10px 18px;font-weight:800;}
.floatbar.countdown .btn:hover{background:#eaf1ff;color:#0a1733;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22);}
.floatbar.countdown .x{border-color:rgba(255,255,255,.4);color:#fff;}
.floatbar.countdown .x:hover{background:rgba(255,255,255,.16);color:#fff;}
@media(max-width:640px){
  .floatbar.countdown .cd-tag,.floatbar.countdown .cd-label{display:none;}
  .floatbar.countdown{width:auto;left:10px;right:10px;padding:9px 9px 9px 14px;gap:8px;}
  .floatbar.countdown .cd-timer{margin-left:0;}
  .floatbar.countdown .btn{margin-left:auto;padding:9px 13px;font-size:13px;}
  .floatbar.countdown .cd-clock{gap:2px;font-size:12px;}
  .floatbar.countdown .cd-clock i{min-width:20px;padding:3px 4px;}
  .floatbar.countdown .dday{font-size:13.5px;}
}
@media(prefers-reduced-motion:reduce){.floatbar.countdown .cd-bar-fill{animation:none;width:62%;}}

/* ===== founder lecture video ===== */
.founder-video{max-width:880px;margin:clamp(44px,6vw,68px) auto 0;padding:0 clamp(22px,5vw,48px);}
.founder-video .vlabel{text-align:center;font-size:14px;color:var(--gray);font-weight:600;margin-bottom:18px;}
.founder-video .vframe{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(10,20,50,.16);background:#000;}
.founder-video .vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* 대표 사진 자리에 자동재생 영상 */
.founder .fimg.fvid{aspect-ratio:16/9;background:#000;}
.founder .fimg.fvid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.founder .fimg.fvid .nb{z-index:1;}
.founder .fimg.fvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:760px){.founder .fimg.fvid{aspect-ratio:16/9;}}

/* ===== about 페이지 다듬기 ===== */
.phero-stats{margin-top:38px;display:flex;gap:clamp(24px,5vw,58px);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px;}
.phero-stats .ps{display:flex;flex-direction:column;gap:4px;}
.phero-stats .ps b{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,32px);letter-spacing:-1px;display:flex;align-items:baseline;gap:2px;}
.phero-stats .ps b .su{font-size:.5em;font-weight:600;color:var(--gray);}
.phero-stats .ps b .star{color:#ff9f1a;}
.phero-stats .ps span{font-size:12.5px;color:var(--gray);}
.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,54px);align-items:center;margin-top:46px;}
.about-intro p{color:var(--gray);font-size:15.5px;line-height:1.9;margin-bottom:14px;}
.about-intro p b{color:var(--ink);font-weight:700;}
.about-intro .cred{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:10px 24px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--gray);align-items:center;}
.about-intro .cred b{color:var(--ink);}
.about-intro .cred .star{color:#ff9f1a;letter-spacing:1px;}
@media(max-width:760px){.about-intro{grid-template-columns:1fr;gap:26px;}}

/* ===== 서브페이지 톤 매칭(홈 감성): 다크 오로라 히어로 + 카드 모션 ===== */
.phero.dark{position:relative;overflow:hidden;color:#fff;border-bottom:none;
  background:radial-gradient(120% 100% at 82% 0%,#16275a 0%,#0b1430 52%,#070b18 100%);}
.phero.dark .crumb{color:#8fb0ff;}
.phero.dark .lead{color:#b8c2da;}
.phero.dark h1 .hl{background:linear-gradient(100deg,#6ea8ff,#cfe0ff 32%,#6ea8ff 58%,#aecbff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 7s linear infinite;}
.phero.dark .phero-stats{border-top-color:rgba(255,255,255,.16);}
.phero.dark .phero-stats .ps b{color:#fff;}
.phero.dark .phero-stats .ps b .su{color:#8fb0ff;}
.phero.dark .phero-stats .ps span{color:#8893ab;}
.phero .hero-aurora{z-index:0;}
.phero.dark .wrap{position:relative;z-index:1;}

/* svc 카드 → 홈처럼 둥근 카드 + 호버 리프트 + 액센트 번호 */
.svc-grid{gap:16px;background:none;border:none;}
.svc{border:1px solid var(--line);border-radius:18px;transition:transform .25s,box-shadow .25s,border-color .25s,background .25s;}
.svc:hover{transform:translateY(-5px);box-shadow:0 26px 54px rgba(10,20,50,.09);border-color:var(--line2);background:var(--bg);}
.bg2 .svc{background:#fff;} .bg2 .svc:hover{background:#fff;}
.svc .n{color:var(--accent);font-weight:600;}

/* process step → 둥근 카드 + 호버 + 액센트 번호 */
.steps{gap:16px;background:none;border-top:none;border-bottom:none;}
.step{border:1px solid var(--line);border-radius:18px;transition:transform .25s,box-shadow .25s,border-color .25s;}
.step:hover{transform:translateY(-5px);box-shadow:0 26px 54px rgba(10,20,50,.09);border-color:var(--line2);}
.step .num{color:var(--accent);}
.bg2 .step{background:#fff;}

/* ===== about 히어로: 애플 느낌 라이트(홈 다크 네이비와 차별) ===== */
.phero.apple{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#fbfbfd;}
.phero.apple .crumb{color:#86868b;}
.phero.apple .lead{color:#515154;}
.phero.apple h1{color:#1d1d1f;}
.phero.apple .wrap{position:relative;z-index:1;}
.apple-mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;animation:applehue 22s linear infinite;}
.apple-mesh i{position:absolute;display:block;border-radius:50%;filter:blur(74px);opacity:.5;mix-blend-mode:multiply;will-change:transform;}
.apple-mesh .a1{width:38vw;height:38vw;background:radial-gradient(circle,#3b82ff,transparent 64%);top:-12%;left:-2%;animation:am1 19s ease-in-out infinite;}
.apple-mesh .a2{width:34vw;height:34vw;background:radial-gradient(circle,#b15cff,transparent 64%);top:-8%;right:3%;animation:am2 23s ease-in-out infinite;}
.apple-mesh .a3{width:40vw;height:40vw;background:radial-gradient(circle,#ff5f9e,transparent 66%);bottom:-30%;left:16%;animation:am3 21s ease-in-out infinite;}
.apple-mesh .a4{width:30vw;height:30vw;background:radial-gradient(circle,#ff9f43,transparent 64%);bottom:-24%;right:8%;animation:am1 26s ease-in-out infinite reverse;}
@keyframes applehue{to{filter:hue-rotate(360deg);}}
@keyframes am1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6vw,5vh) scale(1.15);}}
@keyframes am2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-7vw,6vh) scale(1.1);}}
@keyframes am3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(5vw,-6vh) scale(1.18);}}
.phero.apple h1 .hl{background:linear-gradient(100deg,#0a84ff,#bf5af2 38%,#ff375f 68%,#ff9f0a);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 8s linear infinite;}
.phero.apple .phero-stats{border-top-color:var(--line);}
.phero.apple .phero-stats .ps b{color:#1d1d1f;}
.phero.apple .phero-stats .ps b .su,.phero.apple .phero-stats .ps span{color:#86868b;}
@media(prefers-reduced-motion:reduce){.apple-mesh,.apple-mesh i{animation:none;}}

/* about 히어로: 배경 팡팡 버스트 */
.ap-bursts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.ap-bursts span{position:absolute;border-radius:50%;opacity:0;will-change:transform,opacity;animation:apburst 3.4s ease-out infinite;}
@keyframes apburst{0%{transform:scale(.2);opacity:0;}14%{opacity:.85;}100%{transform:scale(3.4);opacity:0;}}
.ap-bursts i{position:absolute;border-radius:50%;border:2px solid currentColor;opacity:0;will-change:transform,opacity;animation:apring 3.8s ease-out infinite;}
@keyframes apring{0%{transform:scale(.3);opacity:0;}12%{opacity:.5;}100%{transform:scale(11);opacity:0;}}
@media(prefers-reduced-motion:reduce){.ap-bursts{display:none;}}

/* about 히어로: 글자 하나씩 떠오르기 */
.ap-split .ch{display:inline-block;opacity:0;transform:translateY(.6em) scale(.6) rotate(-6deg);animation:apcharin .62s cubic-bezier(.2,.8,.25,1.4) forwards;}
@keyframes apcharin{to{opacity:1;transform:none;}}
.ap-split .ch.sp{width:.3em;}
.ap-split .ch.apg{background:linear-gradient(92deg,#0a84ff,#bf5af2 40%,#ff375f 68%,#ff9f0a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
@media(prefers-reduced-motion:reduce){.ap-split .ch{animation:none;opacity:1;transform:none;}}

/* about 대표소개: 영상 제거 → 정렬 stretch + 애플톤 패널 */
.about-intro{align-items:stretch;}
.founder-panel{border-radius:22px;padding:clamp(32px,4vw,48px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;min-height:320px;color:#fff;background:linear-gradient(135deg,#0a84ff,#7b5cff 50%,#b15cff);}
.founder-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 80% 8%,rgba(255,255,255,.25),transparent 60%);pointer-events:none;}
.founder-panel .qm{font-family:var(--display);font-size:84px;line-height:.55;opacity:.5;}
.founder-panel p{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.5vw,29px);letter-spacing:-1px;line-height:1.34;margin:8px 0 22px;color:#fff;position:relative;}
.founder-panel .sig{font-size:13.5px;color:rgba(255,255,255,.88);font-weight:600;position:relative;}
.about-intro .who-eyebrow{margin-bottom:18px;}

/* ===== about: 우리 이야기 타임라인 ===== */
.story{position:relative;max-width:760px;margin:50px auto 0;}
.story::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--accent),#b15cff);opacity:.4;}
.story .sitem{position:relative;padding:0 0 40px 46px;}
.story .sitem:last-child{padding-bottom:0;}
.story .sitem .dot{position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 0 0 4px rgba(0,102,255,.1);}
.story .sitem .dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent);}
.story .sitem .ph{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--accent);text-transform:uppercase;}
.story .sitem h3{font-size:clamp(19px,2.4vw,24px);font-weight:800;letter-spacing:-.6px;margin:8px 0 9px;}
.story .sitem p{color:var(--gray);font-size:15px;line-height:1.8;}
.story .sitem b{color:var(--ink);font-weight:700;}

/* ===== about: 애플식 스크롤 확대 미디어 ===== */
.scalewrap{margin:48px auto 14px;width:100%;max-width:1120px;}
.scalestage{position:relative;width:100%;aspect-ratio:16/9;border-radius:clamp(14px,2vw,26px);overflow:hidden;transform:scale(.82);transform-origin:center;will-change:transform;background:#0b1430;box-shadow:0 44px 100px rgba(10,20,50,.2);}
.scalestage video,.scalestage img{width:100%;height:100%;object-fit:cover;display:block;}
.scaleph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;padding:24px;color:#fff;background:linear-gradient(135deg,#0a84ff,#7b5cff 55%,#b15cff);}
.scaleph::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 28%,rgba(255,255,255,.2),transparent 70%);pointer-events:none;}
.scaleph .ic{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;}
.scaleph .t{font-weight:700;font-size:clamp(15px,2vw,18px);position:relative;}
.scaleph .s{font-size:13px;color:rgba(255,255,255,.82);position:relative;max-width:400px;line-height:1.6;}
.scalecap{text-align:center;font-size:13px;color:var(--gray2);margin-top:6px;}
@media(prefers-reduced-motion:reduce){.scalestage{transform:none!important;}}

/* ============================================================
   회사소개 · 애플(MacBook Pro) 스타일
   ============================================================ */
body.ap{background:#fff;overflow-x:clip;}
body.ap nav.top{background:rgba(0,0,0,.7);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.08);}
body.ap nav.top .brand,body.ap nav.top .brand .mk{color:#f5f5f7;}
body.ap nav.top .menu a{color:#d2d2d7;}
body.ap nav.top .menu a:hover,body.ap nav.top .menu a.active{color:#fff;}
body.ap .burger span{background:#f5f5f7;}

.aps{padding:clamp(90px,13vw,165px) 0;position:relative;overflow:hidden;}
.aps .in{max-width:1024px;margin:0 auto;padding:0 24px;}
.apdark{background:#000;color:#f5f5f7;}
.apwhite{background:#fff;color:#1d1d1f;}
.apgrey{background:#f5f5f7;color:#1d1d1f;}
.apkick{font-size:clamp(17px,2.1vw,23px);font-weight:600;color:#2997ff;text-align:center;margin-bottom:10px;letter-spacing:-.01em;}
.aph{font-size:clamp(33px,6.2vw,74px);font-weight:700;letter-spacing:-.035em;line-height:1.07;text-align:center;}
.apsub{font-size:clamp(16px,2.2vw,27px);font-weight:600;color:#86868b;text-align:center;line-height:1.45;margin:clamp(18px,2.2vw,26px) auto 0;max-width:730px;}
.apdark .apsub{color:#a1a1a6;}
.apg{background:linear-gradient(92deg,#2997ff,#7d5cff 38%,#ff5f9e 68%,#ff9f0a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* hero */
.aphero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(120% 90% at 50% 0%,#10131c 0%,#000 60%);color:#f5f5f7;padding:140px 24px 90px;position:relative;}
.aphero .name{font-size:clamp(20px,2.5vw,27px);font-weight:600;color:#f5f5f7;margin-bottom:8px;}
.aphero h1{font-size:clamp(48px,9.6vw,116px);font-weight:700;letter-spacing:-.04em;line-height:.98;}
.apcue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);color:#6e6e73;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;animation:apbob 2.4s ease-in-out infinite;}
@keyframes apbob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}

/* big media */
.apmedia{width:min(92vw,1280px);margin:clamp(44px,6vw,76px) auto 0;}
.apmedia.full{width:min(96vw,1560px);}
.apstage{position:relative;width:100%;aspect-ratio:16/9;border-radius:clamp(16px,2.6vw,38px);overflow:hidden;background:#0b0b0d;box-shadow:0 50px 130px rgba(0,0,0,.45);transform:scale(.72);transform-origin:center;will-change:transform;}
.apdark .apstage{box-shadow:0 50px 130px rgba(0,0,0,.7);}
.apstage video,.apstage img{width:100%;height:100%;object-fit:cover;display:block;}
.apcap{text-align:center;font-size:13px;color:#86868b;margin-top:18px;}

/* feature grid */
.apfeat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);margin-top:clamp(50px,6vw,74px);text-align:left;}
.apfeat .f{background:#f5f5f7;border:1px solid #e8e8ed;border-radius:28px;padding:clamp(30px,4vw,50px);transition:transform .3s,box-shadow .3s;}
.apfeat .f:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(0,0,0,.1);border-color:#dcdce2;}
.apfeat .f .fn{font-size:15px;font-weight:600;color:#2997ff;}
.apfeat .f h3{font-size:clamp(23px,2.9vw,33px);font-weight:700;letter-spacing:-.02em;margin:14px 0 12px;}
.apfeat .f p{font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:#86868b;}
@media(max-width:760px){.apfeat{grid-template-columns:1fr;}}

/* big stats */
.apstats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,48px);margin-top:clamp(50px,6vw,72px);text-align:center;}
.apstats .s b{display:flex;align-items:baseline;justify-content:center;gap:3px;line-height:1;font-weight:700;letter-spacing:-.045em;}
.apstats .s b .n{font-size:clamp(46px,6.8vw,84px);}
.apstats .s b .u{font-size:clamp(19px,2.3vw,29px);color:#86868b;font-weight:600;}
.apstats .s .star{color:#ff9f0a;font-size:.7em;}
.apstats .s .lab{display:block;font-size:clamp(14px,1.5vw,18px);color:#86868b;margin-top:16px;}
.apdark .apstats .s b .n{color:#f5f5f7;}
@media(max-width:680px){.apstats{grid-template-columns:1fr;gap:44px;}}

/* steps */
.apsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(50px,6vw,70px);text-align:left;}
.apsteps .st{padding:30px 26px 34px;border-radius:24px;background:#fff;border:1px solid #e8e8ed;transition:transform .3s,box-shadow .3s;}
.apsteps .st:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.08);}
.apsteps .st .n{font-size:38px;font-weight:700;color:#2997ff;letter-spacing:-.03em;line-height:1;}
.apsteps .st h4{font-size:19px;font-weight:700;margin:16px 0 9px;letter-spacing:-.01em;}
.apsteps .st p{font-size:14.5px;line-height:1.55;color:#86868b;}
.apsteps .st .m{margin-top:16px;font-size:12px;color:#aaa;font-weight:600;}
@media(max-width:900px){.apsteps{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.apsteps{grid-template-columns:1fr;}}

/* founder quote */
.apquote{max-width:920px;margin:0 auto;text-align:center;}
.apquote p{font-size:clamp(26px,4.4vw,50px);font-weight:700;letter-spacing:-.03em;line-height:1.16;}
.apquote .by{font-size:clamp(15px,1.6vw,19px);color:#86868b;margin-top:26px;font-weight:600;}

/* apple buttons */
.apbtn{display:inline-flex;align-items:center;gap:6px;background:#0071e3;color:#fff;font-size:17px;font-weight:500;padding:12px 24px;border-radius:980px;transition:background .2s,transform .2s;}
.apbtn:hover{background:#0077ed;transform:translateY(-1px);}
.apbtn.sec{background:transparent;color:#2997ff;padding:12px 10px;}
.apbtn.sec:hover{background:transparent;text-decoration:underline;}
.apcta-row{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:clamp(30px,4vw,42px);flex-wrap:wrap;}
.apnote{text-align:center;font-size:13.5px;color:#86868b;margin-top:30px;}

/* 휑함 방지: 큰 컬러 글로우 + 디바이스 목업 */
.aps.glow{position:relative;}
.aps.glow::before{content:"";position:absolute;left:50%;top:42%;width:min(94vw,940px);height:min(94vw,940px);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(41,151,255,.26),rgba(125,92,255,.14) 42%,transparent 66%);filter:blur(30px);}
.apwhite.glow::before{background:radial-gradient(circle,rgba(41,151,255,.16),rgba(255,95,158,.1) 46%,transparent 66%);opacity:.8;}
.apgrey.glow::before{background:radial-gradient(circle,rgba(125,92,255,.14),rgba(41,151,255,.1) 46%,transparent 66%);}
.aps.glow .in,.aps.glow .apmedia{position:relative;z-index:1;}

/* 텍스트+비주얼 2단 */
.apsplit{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;max-width:1100px;margin:0 auto;text-align:left;}
.apsplit .apkick,.apsplit .aph,.apsplit .apsub{text-align:left;margin-left:0;margin-right:0;}
.apsplit .aph{font-size:clamp(30px,4.4vw,56px);}
.apsplit .apsub{margin-top:18px;}
@media(max-width:820px){.apsplit{grid-template-columns:1fr;gap:30px;}.apsplit .apvis{order:-1;}}

/* 브라우저 목업 */
.browser{border-radius:clamp(10px,1.4vw,16px);overflow:hidden;background:#1c1c1e;box-shadow:0 44px 110px rgba(0,0,0,.4);width:100%;}
.apdark .browser{box-shadow:0 44px 110px rgba(0,0,0,.6);}
.browser .bar{height:clamp(30px,3.4vw,40px);background:#2c2c2e;display:flex;align-items:center;gap:7px;padding:0 15px;}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#555;}
.browser .bar i:nth-child(1){background:#ff5f57;}.browser .bar i:nth-child(2){background:#febc2e;}.browser .bar i:nth-child(3){background:#28c840;}
.browser .bar .url{margin-left:14px;flex:1;height:20px;border-radius:6px;background:rgba(255,255,255,.08);max-width:280px;}
.browser .body{aspect-ratio:16/10;overflow:hidden;background:#fff;}
.browser .body img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}

/* 폰 목업 */
.phone{width:min(248px,58vw);aspect-ratio:9/19;border-radius:34px;background:#1d1d1f;padding:9px;box-shadow:0 40px 90px rgba(0,0,0,.4);margin:0 auto;flex:none;}
.phone .scr{width:100%;height:100%;border-radius:26px;overflow:hidden;background:#000;position:relative;}
.phone video,.phone img{width:100%;height:100%;object-fit:cover;display:block;}
.apdevices{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap;}
.apdevices .browser{flex:1;min-width:300px;max-width:760px;}

/* ===== 홈 리뷰 가로 스크롤 (영상+텍스트 후기) ===== */
.rev-rail{overflow:hidden;margin-top:36px;-webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);}
.rev-track{display:flex;gap:18px;width:max-content;padding:8px 4px 24px;animation:marq 60s linear infinite;}
.rev-rail:hover .rev-track{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.rev-track{animation:none;}}
.rev-rail.drag{cursor:grabbing;scroll-snap-type:none;}
.rev-rail::-webkit-scrollbar{height:8px;}
.rev-rail::-webkit-scrollbar-track{background:var(--line);border-radius:5px;}
.rev-rail::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px;}
.rev-rail::-webkit-scrollbar-thumb:hover{background:var(--gray3);}
.rev-card{flex:0 0 auto;width:min(400px,78vw);scroll-snap-align:center;border-radius:22px;overflow:hidden;text-align:left;min-height:300px;user-select:none;}
.rev-card.text{padding:clamp(28px,3vw,38px);display:flex;flex-direction:column;}
.rev-card.text.blue{background:linear-gradient(150deg,#2575ff,#0a4fd6);color:#fff;}
.rev-card.text.soft{background:var(--bg2);border:1px solid var(--line);color:var(--ink);}
.rev-card.text .stars{font-size:15px;letter-spacing:2px;margin-bottom:16px;}
.rev-card.text.blue .stars{color:#cfe0ff;} .rev-card.text.soft .stars{color:#ff9f1a;}
.rev-card.text p{font-size:clamp(16px,1.8vw,19px);line-height:1.65;font-weight:500;flex:1;margin:0;}
.rev-card.text.soft p{color:var(--gray);}
.rev-card .who{margin-top:24px;font-size:12.5px;line-height:1.5;}
.rev-card .who b{display:block;font-size:15px;font-weight:700;margin-bottom:2px;}
.rev-card.text.blue .who{color:#bcd4ff;} .rev-card.text.blue .who b{color:#fff;}
.rev-card.text.soft .who{color:var(--gray2);} .rev-card.text.soft .who b{color:var(--ink);}
.rev-card.video{position:relative;background:radial-gradient(120% 110% at 68% 0%,#1a2c63,#0a1020 70%);display:flex;align-items:flex-end;padding:26px;color:#fff;}
.rev-card.video .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:19px;padding-left:4px;transition:transform .25s,background .25s;}
.rev-card.video:hover .play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.28);}
.rev-card.video .vtag{position:absolute;top:20px;left:20px;font-size:11px;font-weight:700;letter-spacing:.03em;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:5px 11px;border-radius:20px;}
.rev-card.video .who{position:relative;z-index:1;color:#dfe6f5;}
.rev-card.video .who b{color:#fff;}
.rev-railhint{text-align:center;font-size:13px;color:var(--gray2);margin-top:2px;}

/* ===== 고객 고민 메신저 채팅 (pop-in) ===== */
.chatwin{max-width:680px;margin:42px auto 0;background:linear-gradient(160deg,#eaf1fb,#f6f9fe);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,40px);box-shadow:0 30px 70px rgba(10,20,50,.07);}
.cbub{display:flex;gap:11px;margin-bottom:18px;align-items:flex-end;max-width:88%;}
.cbub:last-child{margin-bottom:0;}
.cbub .av{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;line-height:1.1;text-align:center;}
.cbub .msg{padding:13px 17px;font-size:15px;line-height:1.55;}
.cbub .msg .nm{display:block;font-size:11.5px;font-weight:700;margin-bottom:4px;opacity:.7;}
.cbub.them .av{background:var(--ink);color:#fff;}
.cbub.them .msg{background:#fff;color:var(--ink);border-radius:6px 18px 18px 18px;box-shadow:0 2px 12px rgba(10,20,50,.06);}
.cbub.me{margin-left:auto;flex-direction:row-reverse;}
.cbub.me .av{background:var(--accent);color:#fff;}
.cbub.me .msg{background:var(--accent);color:#fff;border-radius:18px 6px 18px 18px;}
.cbub.me .msg .nm{opacity:.85;}
.chat-on .cbub{opacity:0;transform:translateY(20px) scale(.92);transition:opacity .45s ease,transform .55s cubic-bezier(.18,.7,.3,1.5);}
.chat-on .cbub.show{opacity:1;transform:none;}
.chat-typing{text-align:center;font-size:12.5px;color:var(--gray2);margin-top:18px;}
.chat-on .chat-typing{opacity:0;transition:opacity .5s;}
.chat-on .chat-typing.show{opacity:1;}
/* 타이핑 점 인디케이터 */
.chat-dots{display:flex;gap:5px;padding:15px 18px;background:#fff;border-radius:6px 18px 18px 18px;box-shadow:0 2px 12px rgba(10,20,50,.06);width:fit-content;}
.chat-dots span{width:7px;height:7px;border-radius:50%;background:#c2ccd9;animation:chatdot 1.2s infinite ease-in-out;}
.chat-dots span:nth-child(2){animation-delay:.2s;} .chat-dots span:nth-child(3){animation-delay:.4s;}
@keyframes chatdot{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-5px);opacity:1;}}
.chat-on .cbub.typing-row{opacity:0;}
.chat-on .cbub.typing-row.show{opacity:1;}

/* 대표 한마디 카드 */
.founder-word{display:flex;align-items:center;gap:46px;}
.founder-word.fw-rev{flex-direction:row-reverse;}
.founder-word.fw-rev .fw-body{text-align:right;}
.fw-emoji{flex:0 0 auto;width:230px;height:230px;border-radius:34px;background:radial-gradient(120% 120% at 50% 26%,#27272f,#0b0b0e);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.2);}
.fw-emoji img,.fw-emoji video{width:140%;height:140%;object-fit:cover;object-position:center 40%;display:block;}
.fw-body{flex:1;min-width:0;}
.fw-quote{font-size:clamp(14.5px,1.78vw,20px);line-height:1.85;color:var(--ink2,#1a1a1a);font-weight:500;letter-spacing:-.4px;}
.fw-name{margin-top:20px;font-weight:700;color:var(--gray);font-size:16.5px;}
.fw-name b{color:var(--ink);}
.ink-sec .fw-emoji{background:transparent;box-shadow:none;border-radius:0;overflow:visible;width:250px;height:250px;}
.ink-sec .fw-emoji video,.ink-sec .fw-emoji img{width:128%;height:128%;object-fit:contain;}
.ink-sec .fw-quote{color:#ededed;}
.ink-sec .fw-name{color:#9a9a98;}
.ink-sec .fw-name b{color:#fff;}
@media(max-width:760px){
  .founder-word,.founder-word.fw-rev{flex-direction:column;text-align:center;gap:20px;}
  .founder-word.fw-rev .fw-body{text-align:center;}
  .fw-emoji{width:170px;height:170px;border-radius:30px;}
  .fw-name{margin-top:14px;}
}

/* PARTNERSHIP 브랜드 자동 슬라이드 */
.partners{overflow:hidden;}
.partners .fp-head h2{line-height:1.3;}
.brands-marq{margin-top:54px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.btrack{display:flex;gap:22px;width:max-content;animation:marq 42s linear infinite;}
.brands-marq:hover .btrack{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.btrack{animation:none;}}
.bcard{flex:none;width:300px;}
.bimg{height:300px;border-radius:18px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);}
.bimg img{width:100%;height:100%;object-fit:cover;display:block;}
.bmeta{padding:16px 4px 0;display:flex;flex-direction:column;gap:7px;}
.bcat{font-size:13px;color:#9a9a98;font-weight:600;}
.bname{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.5px;}
@media(max-width:640px){
  .bcard{width:210px;}
  .bimg{height:210px;}
  .bname{font-size:16px;}
}

/* DATA — 터미널 실행 결과 마감 */
.dd-code .fnm{margin-left:10px;font-family:var(--mono);font-size:11px;color:#5b6b86;letter-spacing:.2px;}
.dd-code .out .res{margin:8px 0 0;white-space:pre;color:#9fb0cf;font-size:12px;line-height:1.75;overflow-x:auto;}
.dd-code .out .res b{color:#e4b85e;font-weight:600;}
.dd-code .out .take{margin-top:13px;color:#7ee0b8;font-size:12.5px;font-weight:600;}
.dd-code .out .take b{color:#fff;font-weight:700;}

/* DATA — BLUF 성과 배너 (결론 먼저) */
.dd-bluf{max-width:760px;margin:0 auto clamp(38px,5vw,58px);text-align:center;background:linear-gradient(180deg,#fff,#f6f9ff);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,4vw,42px);box-shadow:0 18px 46px rgba(0,102,255,.09);}
.dd-bluf .bt{font-size:15px;font-weight:600;color:var(--gray);margin-bottom:22px;letter-spacing:-.3px;}
.dd-bluf .bg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.dd-bluf .bg > div{display:flex;flex-direction:column;gap:9px;position:relative;}
.dd-bluf .bg > div + div::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--line);}
.dd-bluf .bg b{font-family:var(--display);font-size:clamp(33px,5.4vw,56px);font-weight:800;letter-spacing:-2px;color:var(--accent);line-height:1;display:flex;align-items:baseline;justify-content:center;gap:1px;}
.dd-bluf .bg b i{font-size:.42em;font-style:normal;font-weight:700;}
.dd-bluf .bg span{font-size:13.5px;color:var(--gray);font-weight:600;letter-spacing:-.2px;}
.dd-bluf .bs{margin-top:24px;font-size:14px;color:var(--gray2);font-weight:600;}
@media(max-width:560px){.dd-bluf .bg{gap:8px;}.dd-bluf .bg b{letter-spacing:-1px;}.dd-bluf .bg span{font-size:12px;}}

/* DATA — 01 가설설정 인터랙티브 (질문 hover → 코드 타이핑) */
.dd-hyp{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:24px;align-items:start;margin-bottom:clamp(48px,7vw,80px);}
@media(max-width:820px){.dd-hyp{grid-template-columns:1fr;}}
.dd-qs2{display:flex;flex-direction:column;gap:12px;}
.dd-q{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:17px 18px;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;}
.dd-q .qn{flex:none;width:34px;height:34px;border-radius:9px;background:var(--bg2);border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gray);transition:.2s;}
.dd-q .qt2{font-size:15px;font-weight:600;letter-spacing:-.3px;color:var(--ink);line-height:1.45;}
.dd-q:hover{border-color:var(--accent);transform:translateX(3px);}
.dd-q.on{background:linear-gradient(135deg,var(--accent),#3b82ff);border-color:transparent;box-shadow:0 14px 30px rgba(0,102,255,.24);transform:translateX(3px);}
.dd-q.on .qn{background:rgba(255,255,255,.22);border-color:transparent;color:#fff;}
.dd-q.on .qt2{color:#fff;}
.dd-qhint{margin-top:6px;font-size:12.5px;color:var(--gray2);line-height:1.6;letter-spacing:-.2px;}
.dd-term{background:#0d1322;border-radius:16px;padding:14px 16px 16px;box-shadow:0 22px 48px rgba(8,18,45,.2);min-width:0;}
.dd-term .bar{display:flex;align-items:center;gap:6px;margin-bottom:13px;padding:2px;}
.dd-term .bar i{width:10px;height:10px;border-radius:50%;background:#2a3550;}
.dd-term .bar .fnm{margin-left:10px;font-family:var(--mono);font-size:11px;color:#5b6b86;letter-spacing:.2px;}
.dd-typed{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.85;color:#cdd6e6;white-space:pre-wrap;word-break:break-word;min-height:148px;}
.dd-typed .cm{color:#5b6b86;} .dd-typed .kw{color:#7aa2ff;} .dd-typed .st{color:#7ee0b8;} .dd-typed .fn{color:#e4b85e;}
.dd-typed .cv{display:inline-block;width:7px;height:14px;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:ddcaret 1s steps(1) infinite;}
.dd-res2{margin-top:13px;padding-top:13px;border-top:1px dashed #2a3550;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#7ee0b8;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;}
.dd-res2.show{opacity:1;transform:none;}
.dd-res2 b{color:#fff;font-weight:600;}
@media(max-width:560px){.dd-typed{font-size:11.5px;}}