/*! UPINTER v3 · legal pages (개인정보처리방침 · 이용약관) · 2026-09-29
   Same hierarchy as the other detail pages — a sheet laid over the receded home — but the sheet is a plain
   document that scrolls on its own, so the full text stays readable. Motion: the sheet rises in (view transition),
   the title settles once, and the contents rail follows the reader. */

/* v4.1 (2026-10-08 노션 피드백): an ordinary page in this window — no sheet over the home, the window scrolls */
.detail.legal{--peek:0px}
.js .detail.legal{background:var(--bg)}
.js .legal .sheet{position:relative;background:var(--bg)}
.no-js .legal .sheet{background:var(--bg)}
.legal .sheet:focus{outline:none}
.detail.legal:has(.peek:hover) .sheet,.detail.legal:has(.peek:focus-visible) .sheet{transform:translateY(10px)}

/* the header rides on the sheet: same paper, same top corners, so text never scrolls under the menu */
.legal .hd{background:var(--bg)}
.no-js .legal .hd{position:relative;top:0}

/* contents rail on the left from the top; title and text on the right */
.doc{display:grid;grid-template-columns:minmax(200px,3fr) minmax(0,8fr);grid-template-rows:auto 1fr;gap:0 clamp(32px,5vw,96px);max-width:1440px;margin:0 auto;padding:calc(var(--hd) + clamp(40px,8vh,96px)) var(--gx) 56px}
.dh{grid-column:2;grid-row:1;margin-bottom:clamp(40px,7vh,80px);max-width:880px;min-width:0}
.dh .label{margin-bottom:16px}
.dh h1{margin:0}
.dh .lead{max-width:52ch;overflow-wrap:anywhere}
.dh .meta{display:flex;flex-wrap:wrap;gap:10px 40px;margin:28px 0 0;font-size:14px}
.dh .meta div{min-width:0}
.dh .meta dt{color:var(--t3);font-weight:600;margin-bottom:2px}
.dh .meta dd{margin:0;font-weight:650}

/* contents rail */
.toc{grid-column:1;grid-row:1 / span 2;position:sticky;top:calc(var(--hd) + 28px);align-self:start;font-size:14px;padding-top:6px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.toc li a{display:flex;gap:10px;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;text-decoration:none;color:var(--t2);line-height:1.45;transition:color .25s,border-color .35s var(--ease)}
.toc li a:hover{color:var(--ink)}
.toc li a[aria-current="true"]{color:var(--ink);border-left-color:var(--brand);font-weight:650}
.toc .no{flex:none;min-width:3.4em;color:var(--t3);font-variant-numeric:tabular-nums}
.toc a[aria-current="true"] .no{color:var(--brand)}
.toc .other{display:inline-block;margin:22px 0 0 16px;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.toc .other:hover{color:var(--brand)}

/* body text */
.body{grid-column:2;grid-row:2;min-width:0;max-width:70ch;font-size:16px;line-height:1.85;color:#2A292B;overflow-wrap:anywhere}
.body section{padding:0 0 clamp(28px,4vh,44px);scroll-margin-top:calc(var(--hd) + 24px)}
.body section + section{border-top:1px solid var(--rule2);padding-top:clamp(28px,4vh,44px)}
.body h2{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font-size:clamp(19px,1.5vw,23px);line-height:1.35;font-weight:780;letter-spacing:-.025em;color:var(--ink)}
.body h2 .no{flex:none;font-size:.72em;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.body h2:focus{outline:none}
.body p{margin:0 0 12px}
.body ul{margin:0 0 12px;padding:0;list-style:none}
.body li{position:relative;padding-left:16px;margin:0 0 6px}
.body li::before{content:"";position:absolute;left:2px;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--t3)}
.body li b{font-weight:700;color:var(--ink)}
.body a{text-underline-offset:3px}
.body .prevail{font-size:14px;color:var(--t2)}

.legal .ft{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(40px,7vh,72px);padding-top:22px;border-top:1px solid var(--rule);font-size:13px;color:var(--t3)}
.legal .ft a{color:var(--t2);text-decoration:none}
.legal .ft a:hover{color:var(--ink)}
.legal .ft a[aria-current="page"]{color:var(--ink);font-weight:650}
.legal .ft-sns{display:flex;flex-wrap:wrap;gap:8px 18px;margin-left:auto}
.legal .ft-lang{display:flex;gap:10px}

/* the one entrance: title and rail settle when the sheet has arrived */
@keyframes v3-legal-rise{from{opacity:0;transform:translateY(22px)}}
.js .legal .dh > *{animation:v3-legal-rise .9s var(--ease) both}
.js .legal .dh > :nth-child(2){animation-delay:.08s}
.js .legal .dh > :nth-child(3){animation-delay:.16s}
.js .legal .dh > :nth-child(4){animation-delay:.24s}
.js .legal .toc,.js .legal .body{animation:v3-legal-rise 1s var(--ease) .28s both}

@media (max-width:1023px){
  .doc{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .dh,.toc,.body{grid-column:1;grid-row:auto}
  .toc{position:static;margin-bottom:36px;padding-top:0}
  .toc ol{columns:2;column-gap:24px}
  .toc li{break-inside:avoid}
}
@media (max-width:767px){
  .doc{padding-top:calc(var(--hd) + 32px);padding-bottom:88px}
  .toc ol{columns:1}
  .body{font-size:15.5px;line-height:1.8}
}
@media (prefers-reduced-motion:reduce){
  .js .legal .sheet{transition:none}
}

/* v4.1 · the project CTA is vermilion (hover: ink on this light page); no sheet transition between pages */
.legal .hd .btn{background:var(--brand);border-color:var(--brand);color:#fff}
.legal .hd .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
@view-transition{navigation:none}