/* AX LIVING LAB — additions on top of vinyl-x.com interaction.css + pages.css */
body{font-family:'Inter',-apple-system,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",sans-serif;word-break:keep-all}
body.no-scroll{overflow:hidden}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:#fff;color:#1a1a1a;padding:8px 12px;z-index:200}
.logo-text,.footer-logo-text{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:.04em;color:#fff;font-size:18px;line-height:22px;white-space:nowrap}
.footer-logo-text{font-size:28px;line-height:1.1}
.gnb-nav{gap:28px}
.gnb-link{letter-spacing:0;font-size:15px}
.gnb-link.is-current::after{width:100%}
.gnb-cta{border:1px solid #fff;padding:6px 14px;border-radius:30px}
.gnb-cta::after{display:none}
.menu-toggle{cursor:pointer}
@media (min-width:1101px){.menu-toggle{display:none}}
@media (max-width:1100px){.gnb-nav{display:none}}
.menu-link{font-size:clamp(34px,5vw,64px)}
/* home intro (Korean headline needs looser leading than .92) */
.ax-home .insight-intro h1{line-height:1.08;letter-spacing:-.05em}
.ax-home .insight-intro{padding-bottom:56px}
.ax-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.ax-btn{display:inline-flex;align-items:center;padding:12px 22px;border:1px solid #1a1a1a;border-radius:40px;font-size:14px;font-weight:600;color:#1a1a1a;transition:background .3s ease,color .3s ease}
.ax-btn:hover{background:#1a1a1a;color:#fff}
.ax-btn-solid{background:#1a1a1a;color:#fff}
.ax-btn-solid:hover{background:#000}
.ax-block{padding-top:96px}
.ax-h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.15;margin:14px 0 36px}
.ax-p{color:rgba(26,26,26,.68);font-size:16px;line-height:1.8;max-width:560px}
.ax-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ax-split .insight-sources{margin-top:0}
.ax-person{border-left:1px solid #1a1a1a;padding-left:28px}
.ax-person p{margin:0 0 10px}
.ax-next{margin-top:96px}
/* blueprint lanes figure in vinyl-x palette */
.lanes{margin:0;background:#fff;border:1px solid rgba(26,26,26,.12);padding:28px 28px 18px}
.lanes-h{width:100%;height:auto;display:block}
.lane-l{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;fill:rgba(26,26,26,.5);letter-spacing:.02em}
.judge{stroke:#1a1a1a;stroke-width:1;stroke-dasharray:5 6}
.judge-l{font-size:12px;fill:rgba(26,26,26,.55)}
.nodes rect{fill:#fff;stroke:#1a1a1a;stroke-width:1.2;rx:0}
.nodes rect.ai{fill:#1a1a1a;stroke:#1a1a1a}
.nodes rect.own{fill:#f0ebe4;stroke:#1a1a1a}
.nodes text{font-size:16px;font-weight:700;fill:#1a1a1a;text-anchor:middle;letter-spacing:-.02em}
.nodes rect.ai+text{fill:#fff}
.flow path{stroke:#1a1a1a;stroke-width:1.4;fill:none}
.flow path.loop{stroke-dasharray:3 5;stroke-width:1}
#ar path{fill:#1a1a1a}
.lanes figcaption{font-size:13px;line-height:1.6;color:rgba(26,26,26,.55);margin-top:10px}
.lanes-v{display:none}
/* hub article: lead paragraph sits in summary box */
.insight-article-summary p{margin:0}
.service-article .insight-article-body h2:first-child{margin-top:48px}
/* contact */
.ax-contact{margin-top:72px}
.ax-form select.form-input{appearance:none;background:transparent}
.ax-note{font-size:13px;color:rgba(26,26,26,.55);margin:8px 0 20px}
@media (max-width:900px){.ax-split{grid-template-columns:1fr;gap:48px}}
@media (max-width:768px){
  .lanes{padding:18px}
  .lanes-h{display:none}
  .lanes-v{display:grid;gap:8px;list-style:none;margin:0;padding:0}
  .lanes-v li{padding:12px 14px;border:1px solid #1a1a1a;font-weight:700;display:flex;justify-content:space-between;align-items:center;font-size:15px}
  .lanes-v li.a{background:#1a1a1a;color:#fff;margin-left:28px}
  .lanes-v li.o{background:#f0ebe4}
  .lanes-v small{font-weight:500;font-size:12px;opacity:.6}
  .ax-block{padding-top:72px}
}

/* ───────── Accent layer (from styletech.kr) ─────────
   vinyl-x type scale and components stay as-is.
   Borrowed: lime accent #c8e628, warm line #D4CFC7, sub text #595959,
   the overlapping "×" mark, dark program band, big numerals with small units. */
:root{--ax-lime:#c8e628;--ax-lime-d:#b5d118;--ax-line:#D4CFC7;--ax-sub:#595959;--ax-ink:#1a1a1a}
::selection{background:var(--ax-lime);color:var(--ax-ink)}
:focus-visible{outline:2px solid var(--ax-lime-d);outline-offset:3px}

/* mark: a small lime × before the wordmark */
.ax-x{display:inline-block;width:.78em;height:.78em;margin-right:.42em;vertical-align:-.06em;position:relative}
.ax-x::before,.ax-x::after{content:"";position:absolute;left:50%;top:50%;width:118%;height:24%;background:var(--ax-lime);transform:translate(-50%,-50%) rotate(45deg)}
.ax-x::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* GNB call to action */
/* header keeps vinyl-x's difference blend, so it stays monochrome; the × follows the text colour there */
.header .ax-x::before,.header .ax-x::after{background:currentColor}

/* hero: oversized × overlapping the headline, like STYLETECH's ABOUT mark */
.ax-hero h1{position:relative;display:inline-block;z-index:0}
.ax-hero-x{position:absolute;right:-.62em;top:-.12em;width:.9em;height:.9em;z-index:-1;pointer-events:none}
.ax-hero-x::before,.ax-hero-x::after{content:"";position:absolute;left:50%;top:50%;width:122%;height:22%;background:var(--ax-lime);transform:translate(-50%,-50%) rotate(45deg);mix-blend-mode:multiply}
.ax-hero-x::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* buttons */
.ax-btn{border-color:var(--ax-ink)}
.ax-btn-solid:hover{background:var(--ax-lime);border-color:var(--ax-lime);color:var(--ax-ink)}

/* labels get a lime tick */
.insight-article-label::before{content:"";display:inline-block;width:8px;height:8px;background:var(--ax-lime);margin-right:10px;vertical-align:1px}

/* dark program band (full bleed) */
.insight-index>.ax-band{max-width:none;margin:88px calc(-1 * var(--section-padding-x)) 0;padding:104px var(--section-padding-x) 96px;background:var(--ax-ink);color:#e8e4dd}
.ax-band>*{max-width:1400px;margin-left:auto;margin-right:auto}
.ax-band-head{margin-bottom:48px}
.ax-band .ax-h2{color:#fff;margin:14px 0 0}
.ax-band .insight-article-label{color:rgba(255,255,255,.6)}
.ax-band .lanes{background:transparent;border:1px solid #3a3835;padding:36px 32px 22px}
.ax-band .lane-l{fill:rgba(255,255,255,.55)}
.ax-band .judge{stroke:var(--ax-lime);stroke-dasharray:4 6;opacity:.8}
.ax-band .judge-l{fill:var(--ax-lime)}
.ax-band .nodes rect{fill:transparent;stroke:#e8e4dd}
.ax-band .nodes text{fill:#fff}
.ax-band .nodes rect.ai{fill:var(--ax-lime);stroke:var(--ax-lime)}
.ax-band .nodes rect.ai+text{fill:var(--ax-ink)}
.ax-band .nodes rect.own{fill:#fff;stroke:#fff}
.ax-band .nodes rect.own+text{fill:var(--ax-ink)}
.ax-band .flow path{stroke:rgba(255,255,255,.7)}
.ax-band #ar path{fill:rgba(255,255,255,.7)}
.ax-band .lanes figcaption{color:rgba(255,255,255,.55)}

/* numbers */
.ax-numbers{padding-top:96px;display:grid;grid-template-columns:minmax(220px,1fr) 3fr;gap:48px;border-bottom:1px solid var(--ax-line);padding-bottom:56px}
.ax-numbers-title{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.35;margin:14px 0 24px}
.ax-numbers-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:0}
.ax-numbers-grid>div{border-left:1px solid var(--ax-line);padding:0 0 0 28px}
.ax-numbers-grid dt{font-size:14px;color:var(--ax-sub);margin-bottom:24px}
.ax-numbers-grid dd{margin:0;font-size:clamp(56px,7vw,104px);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.ax-numbers-grid small{font-size:14px;letter-spacing:0;font-weight:500;margin-left:6px;color:var(--ax-sub)}

/* cards and lists */
.insight-card{border-color:var(--ax-line)}
.insight-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;background:var(--ax-lime);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.insight-card{position:relative}
.insight-card:hover::before{transform:scaleX(1)}
.insight-sources a:hover{background:linear-gradient(transparent 62%,rgba(200,230,40,.55) 0)}
.insight-article-summary{border-left:4px solid var(--ax-lime);padding-left:28px}
.insight-article-body a{text-decoration-color:var(--ax-lime-d);text-decoration-thickness:2px;text-underline-offset:3px}
.insight-article-body blockquote{border-left-color:var(--ax-lime)}
.ax-person{border-left:4px solid var(--ax-lime)}

/* footer and contact */
.footer-section a:hover{color:var(--ax-lime)}
.contact-cta.form-submit:hover .cta-arrow{background:var(--ax-lime);color:var(--ax-ink)}

@media (max-width:900px){
  .ax-numbers{grid-template-columns:1fr;gap:24px}
}
@media (max-width:768px){
  .insight-index>.ax-band{margin:64px -25px 0;padding:64px 25px}
  .ax-band .lanes{padding:16px}
  .ax-band .lanes-v li{border-color:#e8e4dd;color:#fff}
  .ax-band .lanes-v li.a{background:var(--ax-lime);border-color:var(--ax-lime);color:var(--ax-ink)}
  .ax-band .lanes-v li.o{background:#fff;color:var(--ax-ink)}
  .ax-numbers-grid{grid-template-columns:1fr}
  .ax-numbers-grid>div{border-left:0;border-top:1px solid var(--ax-line);padding:20px 0 4px;display:flex;justify-content:space-between;align-items:flex-end}
  .ax-numbers-grid dt{margin:0 0 8px}
  .ax-numbers-grid dd{font-size:64px}
  .ax-hero-x{right:-.2em;top:-.5em;width:.8em;height:.8em}
}
@media (prefers-reduced-motion:reduce){.insight-card::before{transition:none}}