/* v3 n2 — structure: page openings shaped by each page's job, one spacing scale (96/160/224),
   one type scale (13/14/17/21/28/52/86). Loads right after /g.css; g.css itself is untouched. */
:root{
  --s-1:96px;  /* connective */
  --s-2:160px; /* base section */
  --s-3:224px; /* statement section */
  --t-label:13px;
  --t-small:14px;
  --t-body:17px;
  --t-lead:clamp(1.0625rem,1.45vw,1.3125rem);  /* 17 → 21 */
  --t-h3:clamp(1.3125rem,2vw,1.75rem);         /* 21 → 28 */
  --t-h2:clamp(2rem,3.6vw,3.25rem);            /* 32 → 52 */
  --t-display:clamp(2.5rem,6vw,5.375rem);      /* 40 → 86 */
}
/* phones: the same three steps, scaled (64/96/128) so a 390px screen is not mostly gap */
@media (max-width:860px){:root{--s-1:64px;--s-2:96px;--s-3:128px}}

/* ---------- spacing scale ---------- */
.sec{padding:var(--s-2) 0}
.sec.s-tight{padding-top:var(--s-1);padding-bottom:var(--s-1)}
.sec.s-statement{padding-top:var(--s-3);padding-bottom:var(--s-3)}
.sec.s-follow{padding-top:0}                 /* section that continues straight out of the opening */
.hero,.inner .hero{padding:var(--s-1) 0}
.dark .plate{margin-top:var(--s-1)}
.plate-mid{margin-bottom:var(--s-2)}
.plate-close{padding:var(--s-1) 0 var(--s-2)}
.policy{padding:var(--s-1) 40px var(--s-2)}
@media (max-width:860px){.policy{padding:var(--s-1) 22px var(--s-2)}}

/* ---------- type scale ---------- */
.hero h1,.inner .hero h1{font-size:var(--t-display)}
.sec h2,.ask h2,.policy h1{font-size:var(--t-h2)}
.policy h2{font-size:var(--t-h3)}
.lead{font-size:var(--t-lead)}
.verbs b,.crew h3,.pg h3,.pg b,.rewards b,.foot .mark{font-size:var(--t-h3)}
.kinds b,.reach b,.ix b,.steps h3,.faq summary,.faq summary::after,.hero-row .index li::before{font-size:var(--t-lead)}
.sec-index .num,.team-main .head .num,.verbs .num{font-size:var(--t-h2)}
.steps li::before{font-size:var(--t-h3)}
.nav-d a,.login,.tools .ico,.nav-m summary,.foot,.kakao{font-size:var(--t-body)}
.top .btn-line,.actions small,.plate figcaption,.note,.help,.biz,.policy table,.steps .you,.verbs .you,.me-menu a,.me-menu button,.form input[type=file]::file-selector-button{font-size:var(--t-small)}
@media (max-width:860px){
  .sec-index .num{font-size:var(--t-h2)}
  .verbs .num{font-size:var(--t-h3)}
}
.verbs .num{white-space:nowrap}
@media (min-width:861px){.verbs li{grid-template-columns:112px 240px minmax(0,1fr)}} /* room for "viii." at 52px */

/* ---------- left rail: a margin that travels with its section ---------- */
@media (min-width:861px){
  .sec-index{position:sticky;top:32px;align-self:start}
  .team-plate{position:sticky;top:32px}
  .team-plate .frame{aspect-ratio:4/5}
}
/* g.css `.plate img{aspect-ratio:21/9;height:auto}` shrank the photo to a strip inside its frame */
.team-plate .frame img{height:100%;aspect-ratio:auto}
/* captions sit right under their image */
.plate figcaption{padding-top:8px}
.team-plate figcaption{display:flex;gap:18px;align-items:baseline;padding-top:8px;color:var(--text-muted)}

/* ---------- openings, one per page job ---------- */
/* about — an essay: the three fragments become a quiet column of lines beside the lead */
.op-essay .hero-row .index,.op-essay .hero-row .index li,.op-essay .hero-row .index li:first-child{display:block;flex:none;min-width:0;border:0}
.op-essay .hero-row .index{margin:0 0 32px}
.op-essay .hero-row .index li,.op-essay .hero-row .index li:first-child{padding:14px 0;border-top:1px solid var(--rule);font-family:var(--f-display);font-weight:400;font-size:var(--t-lead);letter-spacing:0;color:var(--text)}
.op-essay .hero-row .index li:last-child{border-bottom:1px solid var(--rule)}
.op-essay .hero-row .index li::before{content:none}
@media (min-width:861px){
  .op-essay .hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 32px;margin-top:56px}
  .op-essay .hero-row .index{grid-column:1/5;margin:0}
  .op-essay .hero-row .hero-body{grid-column:6/13;max-width:none}
}

/* make + price — title on the left, what you need to decide on the right */
@media (min-width:861px){
  .op-menu .wrap,.op-ledger .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 32px;align-items:start}
  .op-menu .wrap > .label,.op-ledger .wrap > .label{grid-column:1/-1}
  .op-menu .hero-row,.op-ledger .hero-row{display:contents}
  .op-menu h1{grid-column:1/8;grid-row:2}
  .op-menu .hero-body{grid-column:8/13;grid-row:2;align-self:end;max-width:none}
  .op-menu .hero-row .index{grid-column:1/-1;grid-row:3;margin:56px 0 0;border-top:1px solid var(--accent)}
  .op-ledger h1{grid-column:1/7;grid-row:2/4}
  .op-ledger .hero-row .index{grid-column:7/13;grid-row:2;margin:0 0 24px}
  .op-ledger .hero-body{grid-column:7/13;grid-row:3;max-width:none}
}
/* make: the strip is the page's table of contents (its numbers match the sections) */
.op-menu .index a{font-family:var(--f-display);font-size:var(--t-lead);color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:7px}
@media (hover:hover){.op-menu .index a:hover{text-decoration-thickness:2px}}
/* price: the strip lists what is included, so it reads as one line, not a numbered sequence */
.op-ledger .hero-row .index{display:flex;flex-wrap:wrap;gap:0;border:0}
.op-ledger .hero-row .index li,.op-ledger .hero-row .index li:first-child{flex:none;min-width:0;padding:0 14px;border:0;border-left:1px solid var(--rule);font-size:var(--t-small);color:var(--text)}
.op-ledger .hero-row .index li:first-child{padding-left:0;border-left:0}
.op-ledger .hero-row .index li::before{content:none}
.op-ledger .actions{margin-top:28px}

/* process — the opening is the first step: title, one line, the four stages */
.op-steps .hero-row .index{margin-bottom:0}

/* review / portfolio / shop — honest "not yet" pages: text and one picture on a single screen */
.op-wait .op-figure img{aspect-ratio:4/5;object-fit:cover}
@media (min-width:861px){
  .op-wait .op-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 32px;align-items:end}
  .op-wait .op-text{grid-column:1/9}
  .op-wait .op-figure{grid-column:9/13}
  .op-wait .hero-row{margin-top:32px}
}
@media (max-width:860px){
  .op-wait .op-figure{margin-top:48px}
  .op-wait .op-figure img{aspect-ratio:4/3}
}

/* ---------- price tables ---------- */
/* values in the body face (the display serif made the 디자인 row shout) */
.price-table td,.price-table td b{font-family:var(--f-body);font-weight:600;font-size:var(--t-body)}
@media (max-width:860px){
  .price-table th,.price-table td{font-size:var(--t-small)}
  .price-table td,.price-table td b{font-size:var(--t-body)}
  /* the feature table reflows instead of running off the screen */
  .price-table.fit{table-layout:fixed}
  .price-table.fit th:first-child{width:28%}
  .price-table.fit td{white-space:normal;font-size:var(--t-small);text-align:center}
  .price-table.fit thead th:not(:first-child){text-align:center}
  .price-table.fit tbody th small{white-space:normal}
}
/* scroll cue: an edge shadow appears only on the side that still has content */
.table-wrap{background:
  linear-gradient(to right,var(--surface) 40%,transparent) left center/40px 100% no-repeat local,
  linear-gradient(to left,var(--surface) 40%,transparent) right center/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) left center/14px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) right center/14px 100% no-repeat scroll}

/* ---------- floating consult button ---------- */
/* phones and narrow laptops: a 48px square that keeps its accessible name (aria-label) and
   stays out of the opening screen, appearing once the reader scrolls */
@media (max-width:1279px){
  .kakao{width:48px;height:48px;min-height:48px;padding:0;justify-content:center;border-radius:var(--r-sm)}
  .kakao span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@supports (animation-timeline:scroll()){
  @media (max-width:860px){
    .kakao{animation:v3-kakao-in linear both;animation-timeline:scroll(root);animation-range:0 60vh}
  }
}
@keyframes v3-kakao-in{0%,70%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}