/* story — long-form one-page frame shared by 서비스가이드 / 회사소개.
   Six type roles only: display(hero) / title(h2) / subtitle(h3) / body / label / caption.
   Page-specific blocks live in service-guide.css and company.css. */
.story {
  --story-pad:80px;
  --muted:#666;
  --rule:#e5e5e5;
  --display:clamp(64px,8vw,128px);
}

.story .sr {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- type roles ---------- */
.story .display {
  font-size:var(--display);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.045em;
}

.story .display-num {
  font-size:var(--display);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}

.story .stat-num {
  font-size:var(--title);
  font-weight:400;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}

.story .lead {
  font-size:var(--body);
  line-height:1.6;
  color:var(--muted);
}

.story .caption,
.story .section-tag {
  font-size:var(--small);
  letter-spacing:.06em;
  line-height:1.5;
}

.story .section-tag {
  color:var(--muted);
  text-transform:uppercase;
}

.story .source {
  font-size:var(--small);
  line-height:1.6;
  color:var(--muted);
}

.story .button {
  color:var(--ink);
}

.story .is-accent {
  color:var(--accent);
}

/* Highlighter: the accent sweeps in behind the phrase once it is read (motion.css owns the sweep). */
.story .marker {
  background:linear-gradient(var(--accent),var(--accent)) no-repeat left center/var(--mark,100%) 100%;
  color:inherit;
  padding:0 .08em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* On dark, the phrase turns ink only once the sweep is under it, so it is never dark-on-dark. */
[data-tone=dark] .marker:not(.is-unmarked) {
  color:var(--ink);
}

/* ---------- hero ---------- */
.story-hero {
  position:relative;
  min-height:calc(100svh - var(--header-height));
  padding:48px var(--gutter) 112px;
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-rows:1fr auto;
  gap:48px;
  overflow:hidden;
}

.story-hero-head {
  align-self:end;
  display:flex;
  flex-direction:column;
  gap:24px;
  position:relative;
  z-index:1;
}

.story-hero .display {
  font-size:min(var(--display),6.4vw);
}

.story-hero .line {
  display:block;
  overflow:hidden;
  padding-bottom:.06em;
}

.story-hero .line>span {
  display:inline-block;
}

.story-hero .rule {
  display:inline-block;
  vertical-align:middle;
  width:1.4em;
  height:.08em;
  margin-right:.2em;
  background:var(--ink);
}

.story-hero-plate {
  grid-column:2;
  grid-row:1/3;
  min-height:420px;
}

.story-hero-meta {
  grid-column:1;
  display:flex;
  gap:32px;
  flex-wrap:wrap;
  font-size:var(--body);
  color:var(--muted);
}

.story-hero-body {
  grid-column:2;
  grid-row:1/3;
  align-self:end;
  display:flex;
  flex-direction:column;
  gap:24px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.story-hero-body .hero-lead {
  font-size:20px;
  line-height:1.4;
}

.story-hero-body p {
  color:var(--muted);
}

/* ---------- media plate (gray dummy until real assets) ---------- */
.plate {
  position:relative;
  overflow:hidden;
  background:var(--gray);
}

.plate-media {
  position:absolute;
  inset:-12% 0;
  display:flex;
  align-items:flex-end;
  padding:24px;
  background:
    linear-gradient(#0000000a 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,#0000000a 1px,transparent 1px) 0 0/48px 48px,
    var(--gray);
}

.plate-media>span {
  font-size:var(--small);
  letter-spacing:.06em;
  color:#9a9a9a;
  margin-bottom:12%;
}

/* ---------- sections ---------- */
.story-section {
  position:relative;
  padding:var(--story-pad) var(--gutter);
  border-top:1px solid var(--rule);
}

.story-section[data-tone=dark] {
  border-top-color:var(--ink);
}

.section-head {
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:1040px;
  margin-bottom:72px;
}

.story h2 {
  word-break:keep-all;
}

.section-foot {
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--rule);
}

.section-actions {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-top:64px;
  flex-wrap:wrap;
}

.statement {
  margin-top:72px;
  font-size:20px;
  line-height:1.5;
  font-weight:400;
  letter-spacing:-.02em;
  word-break:keep-all;
}

.statement.is-bar {
  padding-left:24px;
  border-left:3px solid var(--accent);
  font-size:var(--body);
}

/* ---------- horizontal track: pinned on PC, native swipe on mobile ---------- */
.htrack {
  position:relative;
}

.htrack-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:24px;
  width:max-content;
}

.htrack-progress {
  margin-top:32px;
  height:1px;
  background:var(--rule);
}

.htrack-progress span {
  display:block;
  height:3px;
  margin-top:-1px;
  width:100%;
  background:var(--ink);
  transform-origin:left;
  transform:scaleX(var(--p,0));
}

[data-tone=dark] .htrack-progress span {
  background:var(--accent);
}

/* ---------- flow line (numbered steps joined by a drawn line) ---------- */
.flow {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
}

.flow-line {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:var(--rule);
}

.flow-line span {
  display:block;
  height:3px;
  margin-top:-1px;
  background:var(--accent);
  transform-origin:left;
}

.flow article {
  padding-top:36px;
  position:relative;
  --step-on:1;
}

.flow article::before {
  content:'';
  position:absolute;
  top:-4px;
  left:0;
  width:8px;
  height:8px;
  background:var(--ink);
}

.flow-num {
  font-size:var(--small);
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:16px;
}

.flow h3 {
  margin-bottom:16px;
}

.flow article p:last-child {
  color:var(--muted);
  word-break:keep-all;
}

/* ---------- closing & next page ---------- */
.story-closing {
  min-height:calc(100svh - var(--header-height));
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:32px;
}

.story .closing-title {
  max-width:18ch;
  word-break:keep-all;
  margin-top:32px;
  font-size:var(--title);
}

.closing-copy {
  max-width:880px;
  color:var(--muted);
  line-height:1.8;
}

.closing-copy b {
  color:var(--accent);
  font-weight:400;
}

.next-page {
  position:relative;
  display:grid;
  grid-template-columns:1fr minmax(0,40%);
  grid-template-rows:auto 1fr;
  gap:16px 48px;
  padding:64px var(--gutter);
  border-top:1px solid var(--line);
  overflow:hidden;
  background:var(--paper);
}

.next-page .caption {
  color:var(--muted);
}

.next-page-title {
  grid-column:1;
  align-self:end;
  display:flex;
  align-items:center;
  gap:24px;
  font-size:var(--title);
  font-weight:400;
  line-height:1;
  letter-spacing:-.045em;
}

.next-page-title span {
  font-size:.5em;
}

.next-page-plate {
  grid-column:2;
  grid-row:1/3;
  height:240px;
}

/* ---------- chapter bar: where am I, what is next ---------- */
.chapter-bar {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  height:48px;
  padding:0 var(--gutter) env(safe-area-inset-bottom);
  box-sizing:content-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(80px,2fr) minmax(0,1fr);
  align-items:center;
  gap:24px;
  background:var(--paper);
  color:var(--ink);
  border-top:1px solid var(--line);
  font-size:var(--small);
}

.chapter-bar[data-tone=dark] {
  background:var(--ink);
  color:var(--paper);
  border-top-color:#333;
}

.chapter-now {
  display:flex;
  gap:16px;
  min-width:0;
  white-space:nowrap;
}

.chapter-name {
  font-weight:400;
}

.chapter-section {
  color:#8a8a8a;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chapter-progress {
  height:1px;
  background:#0000001f;
}

.chapter-bar[data-tone=dark] .chapter-progress {
  background:#ffffff2e;
}

.chapter-progress i {
  display:block;
  height:3px;
  margin-top:-1px;
  background:var(--accent);
  transform-origin:left;
  transform:scaleX(var(--p,0));
}

.chapter-bar[data-tone=light] .chapter-progress i {
  background:var(--ink);
}

.chapter-next {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  white-space:nowrap;
}

.chapter-next .caption {
  color:#8a8a8a;
}

.chapter-next-label {
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- responsive ---------- */
@media(max-width:1020px) {
  .story {
    --story-pad:96px;
  }
  .story-hero {
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }
  .story-hero-plate {
    grid-column:1;
    grid-row:auto;
    min-height:280px;
  }
  .story-hero-body {
    grid-column:1;
    grid-row:auto;
  }
  .flow {
    gap:24px;
  }
}

@media(max-width:760px) {
  .story {
    --story-pad:56px;
    --display:clamp(40px,12vw,56px);
  }
  .story .lead {
    font-size:var(--body);
  }
  .story-hero .display {
    font-size:min(var(--display),9.4vw);
  }
  .story-hero {
    padding:32px var(--gutter) 104px;
    gap:32px;
  }
  .story-hero-plate {
    min-height:220px;
  }
  .story-hero-body .hero-lead {
    font-size:20px;
  }
  .section-head {
    margin-bottom:48px;
    gap:16px;
  }
  .statement {
    margin-top:48px;
    font-size:20px;
  }
  .statement.is-bar {
    font-size:var(--body);
  }
  .flow {
    grid-template-columns:1fr;
    gap:32px;
  }
  .flow-line,
  .flow article::before {
    display:none;
  }
  .flow article {
    border-top:1px solid var(--rule);
    padding-top:24px;
  }
  .htrack-list {
    gap:16px;
  }
  .next-page {
    grid-template-columns:1fr;
    padding:48px var(--gutter) 96px;
  }
  .next-page-plate {
    grid-column:1;
    grid-row:auto;
    height:120px;
  }
  .chapter-bar {
    height:44px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    font-size:var(--small);
  }
  .chapter-progress {
    position:absolute;
    left:0;
    right:0;
    top:0;
  }
  .chapter-section,
  .chapter-next .caption {
    display:none;
  }
  .chapter-next-label {
    max-width:40vw;
  }
}

/* ---------- states driven by story.js (transitions live in motion.css) ---------- */
.story-section:has(.htrack) {
  overflow-x:clip;
}

/* Default: native swipe, the next card partly visible. PC motion switches to .is-pinned. */
.htrack-list {
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  width:auto;
  margin:0 calc(var(--gutter)*-1);
  padding:0 var(--gutter) 8px;
  scroll-padding:0 var(--gutter);
}

.htrack-list>* {
  flex:0 0 auto;
  scroll-snap-align:start;
}

.htrack.is-pinned .htrack-list {
  overflow:visible;
  width:max-content;
  margin:0;
  padding:0;
}

.is-stepping [data-step]:not(.is-on) {
  opacity:1;
}

.story .word {
  display:inline;
}

.chapter-bar.is-away {
  transform:translateY(calc(100% + 2px));
}

/* Informational pages: a compact reading scale, independent of the landing page. */
.story main {
  --title:28px;
  --display:40px;
  --body:16px;
  --small:12px;
  --story-pad:56px;
  font-weight:300;
  line-height:1.7;
}
.story main :is(h1,h2,h3,h4,b,strong,th) { font-weight:400; }
.story main :is(h1,h2,h3,h4) { line-height:1.35; letter-spacing:-.025em; }
.story main h3 { font-size:20px; }
.story main > section { background:#fff; color:var(--ink); scroll-margin-top:88px; }
.story main .story-hero { min-height:0; padding:64px var(--gutter); gap:32px; }
.story main .story-hero .display { font-size:var(--display); line-height:1.35; }
.story main .story-hero .plate { min-height:240px; }
.story main .story-hero-lead { font-size:var(--body); }
.story main .section-head { margin-bottom:32px; gap:16px; }
.story main .section-foot { margin-top:32px; }
.story main .section-actions { margin-top:32px; }
.story main .story-closing { min-height:0; padding-block:64px; gap:24px; }
.story main .story-closing-copy b { color:var(--ink); }
.story main .statement { font-size:20px; margin-top:32px; }
.story main .questions, .story main .values { margin-top:32px; }
.story main .questions p { font-size:20px; }
.story main .channel-card { min-height:280px; padding:24px; border-inline:0; border-color:var(--rule); }
.story main .channel-card.is-answer,
.story main .converge-core,
.story main .anchor-model,
.story main .lane-criteria .lane-cell,
.story main .lane-delivery .lane-cell { background:#f5f5f5; color:var(--ink); border-color:var(--rule); }
.story main .lane-cell :is(p,.cell-en),
.story main .anchor-model li span { color:var(--muted); }
.story main .lane-criteria .lane-cell::before { display:none; }
.story main .capability-grid, .story main .capability-grid li,
.story main .values li, .story main :is(th,td) { border-inline:0; }
.story main .capability-grid li { min-height:156px; }
.story main .capability-grid li:hover { background:#f5f5f5; color:var(--ink); }
.story main .values li { min-height:180px; border-color:var(--rule); }
.story main .values li.is-current { border-color:var(--ink); }
.story main .stat-grid { gap:24px; }
.story main .anchor-model { padding:24px; }
.story main .anchor-model li { border-color:var(--rule); }
.story main .next-page { padding-block:40px; }
.story main .next-page-media { height:160px; }
.story-toc { display:none; }
@media(min-width:1024px) {
  .story main { margin-left:200px; margin-right:0; }
  .story-toc { display:block; position:fixed; left:24px; top:112px; width:152px; max-height:calc(100svh - 144px); overflow:auto; z-index:18; background:#fff; font-size:12px; font-weight:300; line-height:1.5; }
  .story-toc summary { cursor:pointer; padding:12px 0; border-bottom:1px solid #ddd; font-weight:400; }
  .story-toc ol { list-style:none; margin:12px 0 0; padding:0; }
  .story-toc a { display:block; padding:7px 8px; border-left:2px solid transparent; color:#666; text-decoration:none; }
  .story-toc a:hover, .story-toc a:focus-visible { color:#090909; background:#f5f5f5; }
  .story-toc a[aria-current] { color:#090909; border-left-color:#090909; font-weight:400; }
  .story .chapter-bar { display:none; }
}
@media(max-width:760px) {
  .story main { --title:24px; --display:32px; --story-pad:40px; }
  .story main .story-hero { padding:40px var(--gutter) 72px; }
  .story main .section-head { margin-bottom:24px; }
  .story main .story-closing { padding-block:40px; }
  .story main .next-page { padding-bottom:80px; }
}

/* Reading copy stays neutral; lime is reserved for non-text signals. */
.story main .is-accent, .story main .closing-copy b { color:var(--ink); }
.story main .next-page-title { letter-spacing:0; line-height:1.4; }
.story main .next-page-title [data-copy] { font-size:inherit; }
.story main .next-page-title > [aria-hidden] { font-size:.75em; }
.story main .section-head .lead { max-width:72ch; }

.story-toc.is-away { visibility:hidden; pointer-events:none; }

/* ScrollTrigger pin refresh restores scroll positions synchronously. */
html:has(body.story) { scroll-behavior:auto; }

/* The index belongs to the content rail: it scrolls into view below the full-width hero. */
.story-toc-rail { display:none; }
@media(min-width:1024px) {
 .story main { margin:0; display:grid; grid-template-columns:184px minmax(0,1fr); }
 .story main > section, .story main > .next-page { grid-column:2; grid-row:var(--story-row); min-width:0; }
 .story main > .story-hero { grid-column:1/-1; }
 .story-toc-rail { display:block; grid-column:1; padding:48px 16px 48px 24px; }
 .story-toc { position:sticky; top:96px; left:auto; width:auto; max-height:calc(100svh - 120px); visibility:visible; }
 .story-toc a[href="#top"] { display:none; }
}

/* Quiet text-only index and a viewport-edge reading progress line. */
.story-toc ol { margin-top:0; }
.story-toc a, .story-toc a[aria-current] { border:0; background:transparent; font-weight:300; }
.story-toc a:hover, .story-toc a:focus-visible { background:transparent; }
.story-reading-progress { position:fixed; inset:0 0 auto; height:2px; background:#090909; transform:scaleX(0); transform-origin:left center; z-index:1000; pointer-events:none; }

/* Return control belongs to the last content section, above the next-page band. */
.story main :is(#budget,#closing) { position:relative; }
.story main .story-back-to-top {
 position:absolute;
 right:var(--gutter);
 bottom:32px;
 display:inline-flex;
 align-items:center;
 gap:12px;
 padding:12px 0;
 color:var(--ink);
 font-size:14px;
 font-weight:400;
 line-height:1;
 text-decoration:none;
 border-bottom:1px solid currentColor;
}
.story main .story-back-to-top:hover,
.story main .story-back-to-top:focus-visible { border-bottom-width:2px; }
.story main .story-back-to-top:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
@media(max-width:760px) {
 .story main .story-back-to-top { bottom:calc(72px + env(safe-area-inset-bottom)); }
 .story .story-hero .scroll-cue { gap:6px; }
 .story .story-hero .scroll-cue-line { height:36px; }
}

/* Editorial pages share a full-width section background and a transparent reading index. */
@media(min-width:1024px) {
 .story main > section, .story main > .next-page { grid-column:1/-1; }
 .story main > .story-section, .story main > .next-page { padding-left:calc(184px + var(--gutter)); }
 .story .story-toc-rail { z-index:18; pointer-events:none; }
 .story .story-toc { background:transparent; pointer-events:auto; }
 .story .story-toc a[data-tone=dark] { color:#aaa; }
 .story .story-toc a[data-tone=dark]:is([aria-current],:hover,:focus-visible) { color:#fff; }
}