/* OTIFY system v23 — typography, spacing, pixel buttons, card layers.
   Loaded last on every page. Spec: docs/DESIGN-SYSTEM-v23.md */
:root{
  --font:"Noto Sans KR","Archivo",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --latin:"Archivo","Noto Sans KR",sans-serif;
  --mono:"Space Mono","SFMono-Regular",Menlo,monospace;
  --ink:#20231D; --ink-2:#5A6155; --ink-3:#6A7064;
  --t-display:clamp(36px,4.4vw,64px);
  --t-h2:clamp(30px,3.3vw,48px);
  --t-h3:clamp(22px,1.95vw,28px);
  --t-title:20px;
  --t-lead:18px; --t-body:16px; --t-small:14px; --t-caption:12px; --t-label:11px;
  --sec-y:96px;
  --btn-ink:#20231D; --btn-fill:#FF6A00; --btn-hover:#F6BC4F; --btn-paper:#FBF9F1;
}
@media(max-width:720px){:root{--t-lead:16px;--t-body:15px;--t-small:14px;--sec-y:64px}}

/* ---------- Type ---------- */
html body{font-family:var(--font);color:var(--ink)}
html body .brand,html body .brand span{font-family:var(--latin)}
html body main h1{font-size:var(--t-display)!important;line-height:1.22!important;letter-spacing:-.03em!important;font-weight:500!important}
html body main h2{font-size:var(--t-h2)!important;line-height:1.3!important;letter-spacing:-.025em!important;font-weight:500!important}
html body main .card h3,html body main .application-copy h3,html body main .story-title h3,html body main .journey-title h3,
html body main .engine-step h3,html body main .sec-h h3{font-size:var(--t-h3)!important;line-height:1.4!important;letter-spacing:-.02em!important;font-weight:500!important}
html body main .feature-info h3{font-family:var(--latin);font-size:clamp(34px,3vw,42px)!important;letter-spacing:-.035em!important}
html body main .primary-engine h3{font-size:clamp(40px,4vw,56px)!important}
html body main .cell h3,html body main .signal-card h3,html body main li h3,html body main .next-story h3,
html body main .industry-rows h3,html body main .partner-list h3,html body main a > h3{font-size:var(--t-title)!important;line-height:1.5!important;letter-spacing:-.01em!important;font-weight:500!important}
html body main .k{font-size:var(--t-title)!important;letter-spacing:-.01em}
html body main .big{font-family:var(--latin)}

html body main p.lead,html body main .hero-aside>p,html body main .section-copy,html body main .m-heading>p,
html body main .invitation-copy>p:not(.overline),html body main .feature-sub{font-size:var(--t-lead)!important;line-height:1.8!important;letter-spacing:0!important}
html body main .cell p,html body main .sec p:not(.lead):not(.big):not(.overline):not(.flow-line):not(.industry-state){font-size:var(--t-body);line-height:1.8;letter-spacing:0}
html body main .card p,html body main .feature-info p:not(.feature-sub),html body main .industry-rows p,html body main .engine-step p,
html body main .journey-node p,html body main .application-copy p:not(.flow-line),html body main .masterplan-link p,
html body main .signal-card p,html body main li p,html body main .next-story p{font-size:var(--t-small)!important;line-height:1.75!important;letter-spacing:0!important}

/* captions & meta: never below 12px */
html body main small,html body main figcaption,html body main .cap,html body main .card-status,html body main .feature-status,
html body main .row-state,html body main .industry-state,html body main .world-notice,html body main .world-caption .concept,
html body main .bd,html body main .masterplan-link>span,html body main .feature-top,html body main .engine-step small,
html body main .scroll-hint,html body .page-art figcaption{font-size:var(--t-caption)!important;line-height:1.6!important;letter-spacing:0!important}
/* mono labels: 11px uppercase */
html body main .lbl,html body main .overline,html body main .eyebrow,html body main .flow-line,html body main .art-stamp,
html body main .world-caption,html body main .world-index small,html body main .num,html body main .row-number,
html body main .step-no,html body main .scene-index,html body main .journey-label,html body main .partner-list small{
  font-family:var(--mono)!important;font-size:var(--t-label)!important;letter-spacing:.08em!important;line-height:1.5!important}
html body main .flow-line{letter-spacing:.02em!important}
html body main .map-pin{font-size:11px!important}
html body main .map-pin>span{font-size:10px!important;width:20px!important;height:20px!important}

/* text colors with enough contrast */
html body main .lead,html body main .section-copy,html body main .card p,html body main .cell p{color:var(--ink-2)}

/* text links: quiet */
html body main .lk,html body main .under-link,html body main .plain-button,html body main .invitation-email{
  font-size:15px!important;font-weight:500;letter-spacing:0}
html body main .under-link,html body main .plain-button{font-size:14px!important}

/* ---------- Spacing ---------- */
html body .sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
html body .sec+.sec{padding-top:0}
html body .sec.band+.sec,html body .sec.dark+.sec{padding-top:var(--sec-y)}
html body .hero.art-hero{margin-bottom:0!important;padding-bottom:72px!important}
@media(max-width:720px){html body .hero.art-hero{padding-bottom:48px!important}html body .hero.art-hero+.sec{padding-top:56px}}
html body .hero.art-hero+.sec{padding-top:80px}
html body .hero.art-hero+.sec.band{padding-top:var(--sec-y)}
html body .m-section{padding-top:var(--sec-y)!important;padding-bottom:var(--sec-y)!important}
html body .project-invitation{padding-top:var(--sec-y)!important;padding-bottom:var(--sec-y)!important}
html body main .sec-h{margin-bottom:48px}
html body main .lbl,html body main .overline,html body main .eyebrow{margin-bottom:20px}
html body main p.lead{max-width:640px}
html body main .btns,html body main .hero-cta,html body main .invitation-actions{margin-top:32px}

/* ---------- Pixel kitsch buttons ---------- */
html body .btn,html body .solid-button,html body .menu-btn{
  --px:2px;
  font-family:var(--font)!important;font-size:13px!important;font-weight:600!important;letter-spacing:0!important;line-height:1!important;
  min-height:40px;padding:0 16px!important;gap:12px!important;
  align-items:center;justify-content:space-between;
  color:var(--btn-ink)!important;background:var(--btn-paper)!important;border:0!important;border-radius:0!important;
  margin:var(--px) calc(var(--px)*2) calc(var(--px)*2) var(--px)!important;
  box-shadow:
    calc(var(--px)*-1) 0 0 var(--btn-ink),var(--px) 0 0 var(--btn-ink),
    0 calc(var(--px)*-1) 0 var(--btn-ink),0 var(--px) 0 var(--btn-ink),
    calc(var(--px)*2) calc(var(--px)*2) 0 var(--btn-ink),
    calc(var(--px)*1) calc(var(--px)*2) 0 var(--btn-ink),calc(var(--px)*2) calc(var(--px)*1) 0 var(--btn-ink)!important;
  transition:transform .08s steps(2),background-color .08s steps(2),box-shadow .08s steps(2)!important}
html body .btn.p,html body .solid-button{background:var(--btn-fill)!important}
html body .btn:hover,html body .solid-button:hover,html body .menu-btn:hover{background:var(--btn-hover)!important;color:var(--btn-ink)!important;transform:translate(-1px,-1px)}
html body .btn:active,html body .solid-button:active,html body .menu-btn:active{
  transform:translate(calc(var(--px)*2),calc(var(--px)*2))!important;
  box-shadow:calc(var(--px)*-1) 0 0 var(--btn-ink),var(--px) 0 0 var(--btn-ink),0 calc(var(--px)*-1) 0 var(--btn-ink),0 var(--px) 0 var(--btn-ink)!important}
html body .btn:focus-visible,html body .solid-button:focus-visible{outline:3px solid var(--btn-fill);outline-offset:6px}
html body .btn .ar,html body .solid-button>span{transition:transform .16s steps(2)}
html body .btn:hover .ar,html body .solid-button:hover>span{transform:translateX(4px)}
html body .solid-button>span{font-size:13px!important}
/* header contact: compact */
html body.main-v4 .hdr .cta{margin-right:0!important;padding-right:0!important}
html body .hdr .btn,html body .hdr .cta .btn{min-height:40px;padding:0 16px!important;font-size:13px!important}
html body .menu-btn{min-height:40px;padding:0 14px!important;font-size:13px!important}
/* small (.s) buttons inside content */
html body main .btn.s{min-height:40px;padding:0 16px!important}
@media(max-width:720px){html body .btn,html body .solid-button{min-height:44px}}
@media(prefers-reduced-motion:reduce){html body .btn,html body .solid-button,html body .btn .ar{transition:none!important}}

/* ---------- Card layers: aligned, same frame, same order ---------- */
html body .cards2,html body .applied-proof .cards2{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important;gap:32px!important}
html body .applied-proof .cards2 .card:nth-child(2){margin-top:0!important}
html body .card{border:1px solid #D9DCD0;background:#FCFBF7}
html body .card .img,html body .applied-proof .card .img{aspect-ratio:16/10!important;padding:24px!important;background:#ECEBE3!important}
html body .card-body{padding:28px 32px 28px!important;gap:0}
html body .card .bds{margin:0 0 12px!important;min-height:0}
html body .card .bd{font-size:var(--t-caption)!important}
html body .card .bd::before{content:"";display:inline-block;width:6px;height:6px;background:currentColor;margin-right:8px;vertical-align:2px}
html body .card h3{margin:0 0 12px!important}
html body .card p{margin:0 0 28px!important;max-width:44ch}
html body .card-action{display:grid!important;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;row-gap:12px;align-items:center;padding-top:20px!important;margin-top:auto!important;border-top:1px solid #E0E3D8}
html body .card-status{grid-column:1/-1;grid-row:1;color:var(--ink-3)}
html body .card-action-label{grid-column:1;grid-row:2;margin:0!important;font-size:15px!important;font-weight:500;color:var(--ink)}
html body .card-arrow{grid-column:2;grid-row:2;margin:0!important;width:36px;height:36px;border:2px solid var(--btn-ink)!important;color:var(--btn-ink)}
html body .card:hover .card-arrow,html body .card:focus-visible .card-arrow{background:var(--btn-fill)!important;border-color:var(--btn-ink)!important;color:var(--btn-ink)!important}
@media(max-width:720px){html body .cards2,html body .applied-proof .cards2{grid-template-columns:1fr!important;gap:24px!important}
  html body .card-body{padding:22px 20px 22px!important}}

/* secondary actions: minimal text link, pixel arrow only */
html body main .btn:not(.p){background:transparent!important;box-shadow:none!important;margin:0!important;padding:0 2px!important;min-height:40px;
  font-weight:500!important;border-bottom:2px solid var(--btn-ink)!important;}
html body main .btn:not(.p):hover{background:transparent!important;color:var(--btn-fill)!important;border-color:var(--btn-fill)!important;transform:none}
html body main .btn:not(.p):active{transform:none!important;box-shadow:none!important}
html body main .btns{align-items:center;gap:28px!important}

/* pixel AI mark + wordmark */
html body .brand{display:inline-flex!important;align-items:center;gap:10px!important;font-family:var(--latin)!important;font-size:18px!important;font-weight:600!important;letter-spacing:.02em!important;line-height:1!important}
html body .brand span{font-size:inherit!important;letter-spacing:inherit!important;font-weight:inherit!important}
html body .brand .mark{width:20px;height:18px;color:var(--ink);flex:none}
html body .ftr .brand{font-size:17px!important}

/* v23b: game-style primary buttons — fixed proportions + bevel */
html body .btn.p,html body .solid-button{
  height:44px!important;min-height:44px!important;padding:0 18px 0 20px!important;gap:14px!important;
  font-size:14px!important;font-weight:700!important;letter-spacing:.01em!important;line-height:1!important;
  box-sizing:border-box!important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.42), inset 0 -4px 0 rgba(120,40,0,.28),
    inset 3px 0 0 rgba(255,255,255,.18), inset -3px 0 0 rgba(120,40,0,.14),
    -2px 0 0 var(--btn-ink),2px 0 0 var(--btn-ink),0 -2px 0 var(--btn-ink),0 2px 0 var(--btn-ink),
    4px 4px 0 var(--btn-ink),2px 4px 0 var(--btn-ink),4px 2px 0 var(--btn-ink)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.35)}
html body .btn.p:hover,html body .solid-button:hover{
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(140,80,0,.25),
    inset 3px 0 0 rgba(255,255,255,.22), inset -3px 0 0 rgba(140,80,0,.12),
    -2px 0 0 var(--btn-ink),2px 0 0 var(--btn-ink),0 -2px 0 var(--btn-ink),0 2px 0 var(--btn-ink),
    5px 5px 0 var(--btn-ink),3px 5px 0 var(--btn-ink),5px 3px 0 var(--btn-ink)!important;
  transform:translate(-1px,-1px)!important}
html body .btn.p:active,html body .solid-button:active{
  box-shadow:
    inset 0 4px 0 rgba(120,40,0,.28), inset 0 -2px 0 rgba(255,255,255,.3),
    -2px 0 0 var(--btn-ink),2px 0 0 var(--btn-ink),0 -2px 0 var(--btn-ink),0 2px 0 var(--btn-ink)!important;
  transform:translate(4px,4px)!important}
html body .btn.p .ar{width:12px!important;height:12px!important}
html body .solid-button>span{font-size:14px!important;line-height:1!important}
html body .hdr .btn.p,html body .hdr .cta .btn{height:36px!important;min-height:36px!important;padding:0 14px 0 16px!important;font-size:13px!important}
@media(max-width:720px){html body .btn.p,html body .solid-button{height:44px!important}}
html body .hdr li.cta .btn,html body.main-v4 .hdr li.cta .btn{margin:2px 6px 6px 2px!important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.42),inset 0 -4px 0 rgba(120,40,0,.28),
  -2px 0 0 var(--btn-ink),2px 0 0 var(--btn-ink),0 -2px 0 var(--btn-ink),0 2px 0 var(--btn-ink),
  4px 4px 0 var(--btn-ink),2px 4px 0 var(--btn-ink),4px 2px 0 var(--btn-ink)!important}
/* pixel wordmark */
html body .brand{gap:10px!important}
html body .brand .wordmark{display:block;color:var(--ink);flex:none}
html body .brand .mark{display:block}
html body .brand svg.wordmark{width:64px!important;height:14px!important}
html body .brand svg.mark{width:20px!important;height:18px!important}

/* ---------- Footer: two-tone charcoal ---------- */
html body .ftr{background:#26282A!important;color:#D9D8CF;border-top:0!important;margin-top:0}
html body .ftr .wrap{max-width:none}
html body .ftr .top{max-width:var(--max,1360px);margin:0 auto}
html body .ftr .bot{position:relative;border-top:0!important;color:#8C8F84!important;z-index:0}
html body .ftr .bot::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#18191B;z-index:-1}
html body .ftr .brand,html body .ftr .brand .wordmark{color:#F4F2EA!important}
html body .ftr .sign p{color:#A9ABA0!important}
html body .ftr .sign .mono a,html body .ftr p.mono a{color:#F4F2EA!important}
html body .ftr .col b{color:#8C8F84!important}
html body .ftr .col a{color:#C9CABF!important}
html body .ftr .col a:hover{color:#FF8A3D!important}
html body .ftr .sq i{background:#4A4D45!important}
html body .ftr .sq i.o{background:#FF6A00!important}
html body .ftr{overflow:hidden}

/* ---------- Two-card sections → board (list) layout (cards with .card-body) ---------- */
html body .cards2:has(> .card > .card-body){display:block!important;border-top:1px solid var(--ink)}
html body .cards2 > .card:has(> .card-body){display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:stretch;
  margin:0!important;padding:32px 0!important;border:0!important;border-bottom:1px solid #D9DCD0!important;background:transparent!important;box-shadow:none!important}
html body .cards2 > .card:has(> .card-body) .img{aspect-ratio:16/10!important;border:1px solid #D9DCD0!important}
html body .cards2 > .card:has(> .card-body) .card-body{padding:8px 0 0!important;display:flex;flex-direction:column}
html body .cards2 > .card:has(> .card-body) p{max-width:52ch}
html body .cards2 > .card:has(> .card-body):hover{background:#F1F0E8!important}
html body .sec-h + .cards2:has(> .card > .card-body){border-top:0!important;margin-top:-16px}
html body .cards2 > .card:has(> .card-body):first-child{padding-top:0!important}
@media(max-width:720px){
  html body .cards2 > .card:has(> .card-body){grid-template-columns:1fr;gap:20px;padding:24px 0!important}
  html body .cards2 > .card:has(> .card-body) .card-body{padding:0!important}}

/* ---------- v23c: smaller type scale + compact buttons ---------- */
:root{--t-display:clamp(32px,3.6vw,52px);--t-h2:clamp(26px,2.7vw,38px);--t-h3:clamp(19px,1.6vw,23px);
  --t-title:17px;--t-lead:16px;--t-body:15px;--t-small:13px;--t-caption:12px;--t-label:11px}
@media(max-width:720px){:root{--t-lead:15px;--t-body:14px;--t-small:13px}}
html body main .feature-info h3{font-size:clamp(28px,2.4vw,34px)!important}
html body main .primary-engine h3{font-size:clamp(34px,3.2vw,46px)!important}
html body main p.big{font-size:clamp(28px,2.6vw,36px)!important}
html body main .lk,html body main .invitation-email{font-size:13px!important}
html body main .under-link,html body main .plain-button{font-size:13px!important}
html body .card-action-label{font-size:14px!important}

html body .btn.p,html body .solid-button{
  height:36px!important;min-height:36px!important;padding:0 14px 0 16px!important;gap:10px!important;
  font-size:12px!important;font-weight:700!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(120,40,0,.28),
    inset 2px 0 0 rgba(255,255,255,.18), inset -2px 0 0 rgba(120,40,0,.14),
    -2px 0 0 var(--btn-ink),2px 0 0 var(--btn-ink),0 -2px 0 var(--btn-ink),0 2px 0 var(--btn-ink),
    3px 3px 0 var(--btn-ink),2px 3px 0 var(--btn-ink),3px 2px 0 var(--btn-ink)!important}
html body .btn.p:hover,html body .solid-button:hover{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(140,80,0,.25),
    -2px 0 0 var(--btn-ink),2px 0 0 var(--btn-ink),0 -2px 0 var(--btn-ink),0 2px 0 var(--btn-ink),
    4px 4px 0 var(--btn-ink),2px 4px 0 var(--btn-ink),4px 2px 0 var(--btn-ink)!important}
html body .btn.p:active,html body .solid-button:active{transform:translate(3px,3px)!important}
html body .btn.p .ar{width:10px!important;height:10px!important}
html body .solid-button>span{font-size:12px!important}
html body main .btn:not(.p){font-size:12px!important;min-height:36px}
html body .hdr li.cta .btn,html body.main-v4 .hdr li.cta .btn{height:32px!important;min-height:32px!important;font-size:12px!important;padding:0 12px 0 14px!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -3px 0 rgba(120,40,0,.28),
  -2px 0 0 var(--btn-ink),2px 0 0 var(--btn-ink),0 -2px 0 var(--btn-ink),0 2px 0 var(--btn-ink),
  3px 3px 0 var(--btn-ink),2px 3px 0 var(--btn-ink),3px 2px 0 var(--btn-ink)!important}
@media(max-width:720px){html body .btn.p,html body .solid-button{height:40px!important;min-height:40px!important}}
:root{--t-display:clamp(30px,3.2vw,46px);--t-h2:clamp(24px,2.4vw,34px)}
html body main p.big{font-size:clamp(24px,2.2vw,30px)!important;line-height:1.4!important}
html body main p.big{font-size:clamp(22px,1.9vw,26px)!important}
html body main .sec h3:not(.feature-info h3):not(.primary-engine h3){font-size:var(--t-h3)}
/* v23d: smaller logo — original AI mark + pixel wordmark */
html body .brand{gap:8px!important}
html body .brand svg.mark{display:block;width:15px!important;height:17px!important;color:var(--ink)}
html body .brand svg.wordmark{width:48px!important;height:10.5px!important}
html body .ftr .brand svg.mark{color:#F4F2EA}
/* nav: English labels, Korean hint in dropdown */
html body .hdr .dd a .en{font-family:var(--font)!important;font-size:12px!important;letter-spacing:0!important;color:var(--ink-3);margin-left:0!important}

/* v25 · 사례 피처(이미지 + 정보) 정렬 */
main .feature{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important;gap:48px!important;align-items:stretch!important;margin-top:0}
main .feature + .feature{padding-top:56px;border-top:1px solid var(--line,#D9DCD0)}
main .sec-h + .feature{border-top:0}
main .feature + .feature{margin-top:56px!important}
main .feature > .img{aspect-ratio:16/10!important;height:auto!important;margin:0!important;border:1px solid var(--line,#D9DCD0);background:#fff;overflow:hidden;display:block}
main .feature > .img > img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
main .feature > .img .fig{margin:0;height:100%;border:0;background:#fff;display:flex;align-items:center;justify-content:center}
main .feature > .img .fig .dg{width:100%;max-height:100%}
main .feature > .img .fig .dg svg{width:100%;height:auto;display:block}
main .feature > .card{border:0!important;border-top:2px solid var(--ink,#20231D)!important;background:transparent!important;padding:20px 0 0!important;display:flex!important;flex-direction:column;box-shadow:none!important;min-width:0}
main .feature > .card .bds{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 20px}
main .feature > .card h3{font-size:var(--t-h3,22px)!important;line-height:1.4;margin:0 0 8px!important;word-break:keep-all}
main .feature > .card > p{font-size:14px;color:var(--ink-2,#5A6155);margin:0 0 24px}
main .feature > .card .meta{display:grid!important;grid-template-columns:1fr!important;gap:0!important;border-top:1px solid var(--line,#D9DCD0);margin:0}
main .feature > .card .meta > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line,#D9DCD0);font-size:14px;line-height:1.65;word-break:keep-all}
main .feature > .card .meta b{font-family:var(--font);font-size:12px;font-weight:500;color:var(--ink-3,#6A7064);letter-spacing:0;text-transform:none;display:block;margin:0}
main .feature > .card > div:last-child{margin-top:auto;padding-top:24px}
@media (max-width:860px){
  main .feature{grid-template-columns:1fr!important;gap:24px!important}
  main .feature > .card .meta > div{grid-template-columns:80px minmax(0,1fr)}
}
main .feature > .img .fig,main .feature > .img .fig .dg{border:0!important;padding:0!important;box-shadow:none!important;background:#fff!important}
main .feature > .img .fig .dg{position:relative}
main .feature .dg .lab.o{background:#FFE6D5!important;z-index:2;color:#C2410C}

/* v25 · 진행 중인 일 카드 호버 */
.feature-card .art-stamp,.feature-card .feature-info h3,.feature-card .feature-top span:last-child{transition:background-color .18s steps(2),color .18s steps(2),border-color .18s steps(2),box-shadow .18s steps(2),transform .18s steps(2)}
.feature-card:hover .art-stamp,.feature-card:focus-visible .art-stamp{background:#FF6A00;color:#20231D;border-color:#20231D;box-shadow:3px 3px 0 #20231D}
.feature-card:hover .feature-info h3,.feature-card:focus-visible .feature-info h3{color:#FF6A00}
.feature-card:hover .feature-top span:last-child,.feature-card:focus-visible .feature-top span:last-child{color:#FF6A00;transform:translate(3px,-3px)}
.feature-card:focus-visible{outline:2px solid #FF6A00;outline-offset:3px}

/* v25 · 산업별 탭 활성 상태 */
.application-tabs button{position:relative;transition:color .18s steps(2),box-shadow .18s steps(2)}
.application-tabs button[aria-selected=true] strong:after{content:none!important}
.application-tabs button small{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:18px;padding:0 3px!important;margin-top:2px;border:1px solid transparent;transition:background-color .18s steps(2),color .18s steps(2),border-color .18s steps(2),box-shadow .18s steps(2)}
.application-tabs button[aria-selected=true] small{background:#FF6A00;color:#20231D!important;border-color:#20231D;box-shadow:2px 2px 0 #20231D}
.application-tabs button[aria-selected=true]{color:#20231D;box-shadow:inset 0 -2px 0 #20231D}
.application-tabs button[aria-selected=true] em{color:#5A6155}
.application-tabs button b{transition:transform .18s steps(2),color .18s steps(2)}
.application-tabs button[aria-selected=true] b{color:#FF6A00;transform:translate(3px,-3px)}
.application-tabs button:not([aria-selected=true]):hover{color:#20231D}
.application-panel:not([hidden]) .application-image img{animation:appPanelIn .32s steps(4) both}
.application-panel:not([hidden]) .application-copy{animation:appPanelIn .32s steps(4) .04s both}
@keyframes appPanelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.application-panel:not([hidden]) .application-image img,.application-panel:not([hidden]) .application-copy{animation:none}}
@media (min-width:861px){.application-tabs button{grid-template-columns:32px minmax(0,1fr) 16px!important}.application-tabs button small{font-size:10px!important}}
@media (max-width:860px){.application-tabs button{grid-template-columns:28px minmax(0,1fr)!important}}

/* v25 · 장면 둘러보기 — 커서를 따라 활성 표시 이동 */
.world-switches .scene-button{transition:background-color .16s steps(2),color .16s steps(2)}
.world-switches .scene-button:after{transition:background-color .16s steps(2)}
.world-switches .scene-button:hover,.world-switches .scene-button:focus-visible{background:#eeeede!important;color:#282f23!important;border:0!important;box-shadow:none!important}
.world-switches .scene-button:hover .scene-index,.world-switches .scene-button:focus-visible .scene-index{color:#d45c28!important;opacity:1!important}
.world-switches .scene-button:hover:after,.world-switches .scene-button:focus-visible:after{background:#e65b2b!important}
.world-switches:has(.scene-button:hover) .scene-button[aria-pressed=true]:not(:hover),
.world-switches:has(.scene-button:focus-visible) .scene-button[aria-pressed=true]:not(:focus-visible){background:transparent!important;color:#7b8174!important}
.world-switches:has(.scene-button:hover) .scene-button[aria-pressed=true]:not(:hover) .scene-index,
.world-switches:has(.scene-button:focus-visible) .scene-button[aria-pressed=true]:not(:focus-visible) .scene-index{color:inherit!important;opacity:.7!important}
.world-switches:has(.scene-button:hover) .scene-button[aria-pressed=true]:not(:hover):after,
.world-switches:has(.scene-button:focus-visible) .scene-button[aria-pressed=true]:not(:focus-visible):after{background:transparent!important}

/* v25 · 안쪽 페이지 2단 사례 정렬 (엇갈림 제거) */
.story-pair{grid-template-columns:1fr 1fr!important;align-items:stretch!important;gap:48px!important}
.product-story:nth-child(2),.applied-proof .cards2 .card:nth-child(2){margin-top:0!important}
.product-story{display:flex!important;flex-direction:column;border-top:2px solid #20231D;padding-top:20px}
.story-media{aspect-ratio:16/10!important;padding:0!important;background:#fff!important;border:1px solid var(--line,#D9DCD0)}
.story-media img{object-fit:cover!important;object-position:50% 0}
.story-meta{margin:16px 0 10px!important}
.story-title h3{font-size:var(--t-h3,22px)!important;transition:color .18s steps(2)}
.story-title>span{font-size:20px!important;transition:transform .18s steps(2),color .18s steps(2)!important}
.product-story:hover .story-title h3{color:#FF6A00}
.product-story>p{margin-top:8px!important}
.product-story .media-note{margin-top:auto;padding-top:16px;font-size:12px;color:var(--ink-3,#6A7064)}
@media(max-width:720px){.story-pair{grid-template-columns:1fr!important;gap:40px!important}}
.cards2:has(> .card > .card-body) > .card > .img{padding:0!important;aspect-ratio:16/10!important;height:auto!important;background:#fff!important;border:1px solid var(--line,#D9DCD0)!important;overflow:hidden}
.cards2:has(> .card > .card-body) > .card > .img > img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 0!important}
.cards2:has(> .card > .card-body) > .card > .img .fig{margin:0;height:100%;border:0!important;display:flex;align-items:center;justify-content:center;background:#fff}


/* v25 · CEO 인사말 */
.ceo-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.ceo-letter{border-top:2px solid var(--ink,#20231D);padding-top:24px;max-width:640px}
.ceo-letter p{font-size:16px;line-height:1.9;color:var(--ink,#20231D);margin:0 0 18px;word-break:keep-all}
.ceo-letter p:first-child{font-size:var(--t-title,18px);font-weight:500}
.ceo-sign{display:flex;align-items:baseline;gap:14px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line,#D9DCD0)}
.ceo-sign span{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3,#6A7064)}
.ceo-sign strong{font-size:20px;font-weight:600;letter-spacing:-.02em}
.ceo-career{border-top:2px solid var(--ink,#20231D);padding-top:24px}
.ceo-career .lbl{margin-bottom:12px}
.ceo-career dl{margin:0}
.ceo-career dl>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line,#D9DCD0)}
.ceo-career dt{font-size:12px;color:var(--ink-3,#6A7064);padding-top:2px}
.ceo-career dd{margin:0;font-size:14px;line-height:1.75;color:var(--ink,#20231D);word-break:keep-all}
@media (max-width:860px){.ceo-grid{grid-template-columns:1fr;gap:40px}}


/* v25 · LPM 연산 셀 */
.architecture-pixel .lpm-cell{animation:lpmBlink 2.6s steps(1) infinite}
@keyframes lpmBlink{0%,100%{opacity:1}45%{opacity:.25}55%{opacity:1}}
@media (prefers-reduced-motion:reduce){.architecture-pixel .lpm-cell{animation:none}}

/* v25 · 링크 박스 공통 커서 효과 (박스 어디에 올려도 반응) */
a.cell h3,a.cell .lk,a.cell .lbl,a.card h3,a.card .lk,a.card .card-action,a.card .card-arrow,a.cell .ar,a.card .ar,.next-story h3,a.masterplan-link strong,a.masterplan-link b{transition:color .16s steps(2),transform .16s steps(2)}
a.cell:hover h3,a.cell:focus-visible h3,a.card:hover h3,a.card:focus-visible h3,.next-story:hover h3,a.masterplan-link:hover strong{color:#FF6A00!important}
a.cell:hover .lk,a.cell:focus-visible .lk,a.card:hover .lk,a.card:focus-visible .lk,a.card:hover .card-action,a.card:focus-visible .card-action,a.masterplan-link:hover b{color:#FF6A00!important}
a.cell:hover .lbl,a.cell:focus-visible .lbl{color:#C2410C!important}
a.cell:hover .ar,a.cell:focus-visible .ar,a.card:hover .ar,a.card:focus-visible .ar,a.card:hover .card-arrow{transform:translateX(3px);color:#FF6A00}
a.cell:focus-visible,a.card:focus-visible{outline:2px solid #FF6A00;outline-offset:-2px}

/* v25 · 보조 버튼도 픽셀 테두리 (계단 모서리) */
.hdr .menu-btn,.motion-toggle,.art-motion-toggle,.art-motion-master,.lb button{border:0!important;border-radius:0!important;background:#F8F7F2!important;color:#20231D!important;margin:2px!important;box-shadow:0 -2px 0 #20231D,0 2px 0 #20231D,-2px 0 0 #20231D,2px 0 0 #20231D!important;transition:background-color .14s steps(2),color .14s steps(2),transform .12s steps(2)!important}
.hdr .menu-btn:hover,.motion-toggle:hover,.art-motion-toggle:hover,.art-motion-master:hover,.lb button:hover,
.hdr .menu-btn:focus-visible,.motion-toggle:focus-visible,.lb button:focus-visible{background:#FF6A00!important;color:#20231D!important}
.hdr .menu-btn:active,.motion-toggle:active,.lb button:active{transform:translate(1px,1px)}
.hdr.open .menu-btn{background:#20231D!important;color:#F8F7F2!important}

/* v25 · 메뉴 커서 효과 — 글씨에 포인트 컬러 */
.hdr .nav > li > button,.hdr .nav > li > a:not(.btn),.hdr .dd a,.hdr .dd a .en{transition:color .14s steps(2),background-color .14s steps(2)}
.hdr .nav > li > button:hover,.hdr .nav > li.open > button,.hdr .nav > li > a:not(.btn):hover,.hdr .nav > li > button:focus-visible{color:#FF6A00!important}
.hdr .dd a:hover,.hdr .dd a:focus-visible{color:#FF6A00!important;background:#F1EFE6!important}
.hdr .dd a:hover .en,.hdr .dd a:focus-visible .en{color:#C2410C!important}
.hdr .nav > li > button:hover::after,.hdr .nav > li.open > button::after{border-color:#FF6A00!important;color:#FF6A00!important}

/* v25 · 화살표 포인트 컬러 */
.journey-title>span,.story-title>span,.feature-top span:last-child,.application-tabs button b,.card-arrow,.next-arrow{color:#FF6A00!important}
.journey-node:hover .journey-title h3{color:#FF6A00}

/* v25 · 서비스 목록 커서 효과 + 화살표 */
.partner-list a{transition:background-color .16s steps(2)}
.partner-list a h3,.partner-list a small,.partner-list a>span{transition:color .16s steps(2),transform .16s steps(2)}
.partner-list a>span{font-size:18px!important;color:#FF6A00!important}
.partner-list a:hover h3,.partner-list a:focus-visible h3{color:#FF6A00!important}
.partner-list a:hover>span,.partner-list a:focus-visible>span{transform:translate(3px,-3px)}
.partner-list a:hover small{color:#C2410C!important}
.journey-title>span,.story-title>span,.feature-top span:last-child,.card-arrow,.next-arrow{font-size:18px!important}

/* v25 · 안쪽 페이지 아트 모션 */
.art-video-v25{position:absolute;pointer-events:none;opacity:0;transition:opacity .5s;z-index:1}
.art-video-v25.ready{opacity:1}

/* v25 · 코드 모션 (영상 없는 그림) */
.art-code-v25{overflow:hidden}
.art-code-v25>img{animation:artBreath 9s ease-in-out infinite;transform-origin:50% 60%}
@keyframes artBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.012) translateY(-2px)}}
.art-fx-v25{position:absolute;pointer-events:none;z-index:1;overflow:hidden}
.art-fx-v25 i{position:absolute;width:6px;height:6px;background:var(--c);box-shadow:6px 0 0 var(--c),-6px 0 0 var(--c),0 6px 0 var(--c),0 -6px 0 var(--c);opacity:0;animation:artTwinkle 3s steps(4) infinite}
@keyframes artTwinkle{0%,100%{opacity:0;transform:scale(.4)}40%{opacity:.95;transform:scale(1)}60%{opacity:.6;transform:scale(.7)}}
.art-fx-v25 b{position:absolute;top:0;bottom:0;width:18%;left:-25%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:artSweep 7s linear infinite}
@keyframes artSweep{0%{left:-25%}55%,100%{left:110%}}
@media (prefers-reduced-motion:reduce){.art-code-v25>img,.art-fx-v25 i,.art-fx-v25 b{animation:none}}

/* v25 · 목록형 카드(이미지+정보) 정렬 보정 */
html body main .cards2 > .card:has(> .card-body){column-gap:48px!important;gap:0 48px!important}
html body main .cards2 > .card:has(> .card-body) .card-body{padding:4px 0 0!important;min-width:0}
html body main .cards2 > .card:has(> .card-body) .bds{margin:0 0 14px!important}
html body main .cards2 > .card:has(> .card-body) .card-action{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-top:auto!important;padding:16px 0 0!important;border-top:1px solid var(--line,#D9DCD0)!important;font-size:13px}
html body main .cards2 > .card:has(> .card-body) .card-arrow{width:auto!important;height:auto!important;border:0!important;box-shadow:none!important;background:none!important;padding:0!important;font-size:18px!important;line-height:1;position:static!important}
html body main .cards2 > .card:has(> .card-body):hover{background:transparent!important}
@media(max-width:720px){html body main .cards2 > .card:has(> .card-body){gap:20px!important}}

/* v25 · 피처 이미지 칸 넘침 방지 */
main .feature > .img,main .feature > .card{min-width:0!important;max-width:100%!important;width:100%!important}
main .feature > .img .fig,main .feature > .img .fig .dg{width:100%!important;max-width:100%!important;min-width:0!important}
main .feature > .img .fig .dg svg{max-width:100%!important;height:auto!important}
main .feature > .img .fig .dg .lab{font-size:clamp(9px,.85vw,12px)!important;white-space:nowrap}
@media (max-width:1100px) and (min-width:861px){main .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:32px!important}}

/* v25 · 2단 카드(본문 칸 없는 구조) — 안쪽 여백과 정렬 */
html body main .cards2:not(:has(> .card > .card-body)){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px!important;align-items:stretch!important}
html body main .cards2:not(:has(> .card > .card-body)) > .card{display:flex!important;flex-direction:column!important;padding:0 0 28px!important;margin:0!important;border:1px solid var(--line,#D9DCD0)!important;background:#FBFAF6!important;box-shadow:none!important;min-width:0}
html body main .cards2:not(:has(> .card > .card-body)) > .card > *:not(.img){margin-left:28px!important;margin-right:28px!important}
html body main .cards2:not(:has(> .card > .card-body)) > .card > .img{margin:0 0 24px!important;padding:0!important;aspect-ratio:16/9!important;height:auto!important;background:#fff!important;border:0!important;border-bottom:1px solid var(--line,#D9DCD0)!important;overflow:hidden;display:flex;align-items:center;justify-content:center}
html body main .cards2:not(:has(> .card > .card-body)) > .card > .img .fig{margin:0!important;width:100%;height:100%;border:0!important;background:#fff!important;display:flex;align-items:center;justify-content:center;padding:16px!important}
html body main .cards2:not(:has(> .card > .card-body)) > .card > .img img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
html body main .cards2:not(:has(> .card > .card-body)) > .card .bds{margin-top:0!important;margin-bottom:14px!important}
html body main .cards2:not(:has(> .card > .card-body)) > .card h3{margin-top:0!important;margin-bottom:8px!important;font-size:var(--t-h3,22px)!important}
html body main .cards2:not(:has(> .card > .card-body)) > .card > p{margin-top:0!important;margin-bottom:20px!important;font-size:14px;color:var(--ink-2,#5A6155)}
html body main .cards2:not(:has(> .card > .card-body)) > .card .meta{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 24px!important;border-top:1px solid var(--line,#D9DCD0);padding-top:4px;margin-bottom:20px!important}
html body main .cards2:not(:has(> .card > .card-body)) > .card .meta>div{padding:10px 0;border-bottom:1px solid var(--line,#D9DCD0);font-size:14px;line-height:1.6;word-break:keep-all}
html body main .cards2:not(:has(> .card > .card-body)) > .card .meta b{display:block;font-family:var(--font)!important;font-size:12px!important;font-weight:500;color:var(--ink-3,#6A7064);letter-spacing:0!important;text-transform:none;margin-bottom:2px}
html body main .cards2:not(:has(> .card > .card-body)) > .card > div:last-child:has(.lk),html body main .cards2:not(:has(> .card > .card-body)) > .card > .lk{margin-top:auto!important}
html body main .cards2:not(:has(> .card > .card-body)) > .card .lk{font-size:13px}
@media(max-width:720px){html body main .cards2:not(:has(> .card > .card-body)){grid-template-columns:1fr!important;gap:24px!important}
 html body main .cards2:not(:has(> .card > .card-body)) > .card > *:not(.img){margin-left:20px!important;margin-right:20px!important}}


/* v25 · 단계 그리드 — 빈칸 없이 */
@media (min-width:1101px){html body main .steps:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:1100px) and (min-width:721px){html body main .steps > :last-child:nth-child(odd){grid-column:1 / -1}}

/* v25 · 문의 폼 — 글씨 축소 + 선택 화살표 */
html body main .form label{font-size:13px!important;font-weight:500;gap:6px!important;color:var(--ink-2,#5A6155)}
html body main .form input,html body main .form select,html body main .form textarea{font-size:14px!important;padding:11px 14px!important;line-height:1.5;color:var(--ink,#20231D)}
html body main .form textarea{min-height:140px!important}
html body main .form textarea::placeholder{font-size:13px;color:#9AA08F}
html body main .form .note{font-size:12px!important;line-height:1.7;color:var(--ink-3,#6A7064)}
html body main .form select{-webkit-appearance:none;appearance:none;padding-right:48px!important;cursor:pointer;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h3v3H0zM3 3h3v3H3zM6 6h2v3H6zM8 3h3v3H8zM11 0h3v3h-3z' fill='%2320231D'/%3E%3C/svg%3E")!important;
 background-repeat:no-repeat!important;background-position:right 22px center!important;background-size:14px 9px!important}
html body main .form select:hover,html body main .form select:focus{border-color:#20231D}
@media (max-width:720px){html body main .form input,html body main .form select,html body main .form textarea{font-size:16px!important}}
html body main section:has(form.form) li h3,html body main section:has(form.form) li strong,html body main section:has(form.form) li>b{font-size:15px!important}
html body main section:has(form.form) li{font-size:15px!important}
html body main section:has(form.form) p{font-size:13px!important}
html body main section:has(form.form) h2{font-size:clamp(24px,2.2vw,30px)!important}


/* v25 · CEO 픽셀 캐릭터 */
.ceo-sign{align-items:center!important;gap:20px!important}
.ceo-sign>div{display:flex;flex-direction:column;gap:8px}
.ceo-avatar{margin:0;width:96px;height:120px;flex:none;background:#F1EFE6;box-shadow:0 -2px 0 #20231D,0 2px 0 #20231D,-2px 0 0 #20231D,2px 0 0 #20231D,4px 4px 0 #FF6A00;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.ceo-avatar svg{width:84px;height:105px;display:block;image-rendering:pixelated;animation:ceoBob 2.4s steps(2) infinite}
.ceo-avatar .lid{opacity:0;animation:ceoBlink 4.2s steps(1) infinite}
@keyframes ceoBlink{0%,92%,100%{opacity:0}94%,97%{opacity:1}}
@keyframes ceoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@media (prefers-reduced-motion:reduce){.ceo-avatar svg,.ceo-avatar .lid{animation:none}}

/* v25 · 모션 영상 위로 라벨·배지 올리기 */
.art-stamp,.feature-art .art-stamp,.story-media .media-note{position:absolute;z-index:3!important}
.feature-art,.story-media,.application-image,.journey-art,.page-art{position:relative}

/* v25 · 산업 목록(배너 아래) 화살표·커서 효과 */
.world-index a b{color:#FF6A00!important;font-size:18px!important;font-weight:400;transition:transform .16s steps(2)}
.world-index a span{transition:color .16s steps(2)}
.world-index a:hover span,.world-index a:focus-visible span{color:#FF6A00}
.world-index a:hover b,.world-index a:focus-visible b{transform:translate(3px,-3px)}

/* v25 · 메인 히어로 — 작은 화면에서 폭에 맞춤 */
@media (max-width:960px){
  body.main-v4 .world-panorama{overflow:hidden!important}
  body.main-v4 .world-canvas{min-width:0!important;width:100%!important;max-height:none!important;height:auto!important}
  body.main-v4 .world-image,body.main-v4 .world-video-v24{aspect-ratio:16/9!important;width:100%!important;height:auto!important;object-fit:cover!important;object-position:50% 50%!important}
  body.main-v4 .world-video-v24{height:100%!important}
  body.main-v4 .scroll-hint{display:none!important}
}

/* v26 typography refinement: font sizes only. */
:root{--t-display:clamp(26px,2.6vw,36px);--t-h2:clamp(22px,2vw,28px)}
html body main .feature-info h3{font-size:clamp(22px,1.8vw,26px)!important}
html body main .primary-engine h3{font-size:clamp(26px,2.4vw,32px)!important}
html body main p.big{font-size:clamp(20px,1.6vw,22px)!important}
html body main section:has(form.form) h2{font-size:clamp(22px,1.9vw,26px)!important}
/* Main opening headline only; keep the smaller type scale elsewhere. */
html body.main-v4 main #world-title{font-size:clamp(32px,3.2vw,46px)!important}