/* 스팟 pages.v3.css: legal pages, 고객센터 (help) and 404 (2026-10-17 redesign). */

/* ---------- legal ---------- */
.legal{padding:clamp(40px,6vw,96px) var(--gut) clamp(96px,10vw,144px)}
.legal .doc{max-width:720px;margin:0 auto;font-size:16px;line-height:1.8;color:var(--ink)}
@media (min-width:768px){.legal .doc{font-size:17px}}
.p-legal .doc :is(p,li,dd,td){text-wrap:pretty}

/* title block */
.lg-head{padding-bottom:28px;border-bottom:1px solid var(--ink)}
.legal h1{font-size:clamp(34px,2.4vw + 22px,52px);font-weight:760;line-height:1.16;letter-spacing:-.032em;text-wrap:balance}
.lg-meta{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:16px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.lg-meta span{display:inline-flex;gap:6px}
.lg-meta b{font-weight:650;color:var(--ink)}
.legal .lead{margin-top:20px;font-size:17px;font-weight:450;line-height:1.75;color:var(--ink-2);text-wrap:pretty}

/* collapsible contents */
.legal .toc{margin-top:0;border-bottom:1px solid var(--line)}
.legal .toc summary{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 2px;font-size:16px;font-weight:700;letter-spacing:-.01em;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.legal .toc summary::-webkit-details-marker{display:none}
.lg-tc{margin-left:auto;font-size:14px;font-weight:500;color:var(--ink-2)}
.legal .toc summary::after{content:"";flex:none;width:8px;height:8px;margin:0 6px 4px 0;border-right:1.6px solid var(--ink-2);border-bottom:1.6px solid var(--ink-2);transform:rotate(45deg);transition:transform .22s cubic-bezier(.23,1,.32,1)}
.legal .toc[open] summary::after{transform:translateY(4px) rotate(-135deg)}
.legal .toc>ol{margin:0 0 20px;padding:0;list-style:none;border-top:1px solid var(--line)}
.legal .toc li{list-style:none}
.legal .toc>ol>li>a,.legal .toc ol ol a{display:block;padding:12px 0 11px;font-size:15px;line-height:1.5;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.legal .toc ol ol{margin:0;padding:0 0 0 16px}
.legal .toc .toc-ch>a{font-weight:700}
.legal .toc>ol>li:last-child>a{border-bottom:0}
.legal .toc>ol>li:last-child>ol>li:last-child>a{border-bottom:0}
@media (min-width:900px){.legal .toc>ol:not(:has(.toc-ch)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}.legal .toc>ol:not(:has(.toc-ch))>li:last-child>a{border-bottom:1px solid var(--line)}}
@media (hover:hover) and (pointer:fine){.legal .toc a:hover{text-decoration:underline;text-underline-offset:4px}.legal .toc summary:hover{color:var(--ink-2)}}
.legal .toc[open] summary{border-bottom:0}

/* body */
.legal .body{margin-top:8px}
.legal .body>p:first-child{margin-top:32px}
.legal .body h2{margin:72px 0 18px;font-size:clamp(22px,.6vw + 19px,27px);font-weight:740;line-height:1.35;letter-spacing:-.022em;scroll-margin-top:calc(var(--hdr) + 20px)}
.legal .body>h2:first-child{margin-top:44px}
.legal .body h3{margin:40px 0 10px;font-size:clamp(17px,.3vw + 16px,19px);font-weight:700;line-height:1.5;letter-spacing:-.012em;scroll-margin-top:calc(var(--hdr) + 20px)}
.legal .body h2+h3{margin-top:24px}
.legal .body p{margin:0 0 12px}
.legal .body ul{margin:0 0 14px;padding-left:1.25em;list-style:disc}
.legal .body li{margin:0 0 6px}
.legal .body ol.steps{margin:0 0 14px;padding-left:1.5em;list-style:decimal}
.legal .body ol.steps li::marker{font-weight:700}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:3px}
.legal .toc a{text-decoration:none}
.legal strong{font-weight:700}
.legal .note{margin-top:16px;font-size:15px;color:var(--ink-2)}
.legal .cl{display:flex;gap:.4em}
.legal .cl .mk{flex:none;min-width:1.15em;font-variant-numeric:tabular-nums}
.legal .cl .tx{flex:1 1 auto;min-width:0}
.legal .cl.ho{padding-left:1.2em}
.legal .cl.ho .mk{min-width:1.6em}
.legal .blank{display:inline-block;min-width:4.5em;height:1.05em;margin:0 .15em;border-bottom:1.5px solid var(--ink-3);vertical-align:-.2em}
.legal .pending{text-decoration:underline dotted var(--ink-3);text-underline-offset:.2em}

/* tables: real tables from 640px, stacked rows on phones */
.legal .tw{margin:20px 0 28px}
.legal .tw table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.65}
.legal .tw th,.legal .tw td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);word-break:keep-all;overflow-wrap:anywhere}
.legal .tw thead th{padding-top:0;border-bottom:1px solid var(--ink);font-size:13px;font-weight:650;letter-spacing:.01em;color:var(--ink-2);white-space:nowrap}
.legal .tw :is(th,td):first-child{padding-left:0}
.legal .tw :is(th,td):last-child{padding-right:0}
.legal .tw tbody td:first-child{font-weight:650}
@media (min-width:640px){
  .legal .tw{overflow-x:auto;contain:paint}
  .legal .tw--wide table{min-width:720px}
  .legal .tw--2 tbody td:first-child{width:32%}
}
@media (max-width:639px){
  .legal .tw table,.legal .tw tbody,.legal .tw tr,.legal .tw td{display:block;width:auto}
  .legal .tw thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .legal .tw table{border-top:1px solid var(--ink);font-size:15px}
  .legal .tw tr{padding:14px 0 15px;border-bottom:1px solid var(--line)}
  .legal .tw td{padding:0;border:0}
  .legal .tw td:first-child{font-size:16px;font-weight:650;line-height:1.55;color:var(--ink)}
  .legal .tw td+td{margin-top:6px}
  .legal .tw:not(.tw--2) td+td::before{content:attr(data-h);display:block;margin-bottom:1px;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
  .legal .tw--2 td+td{margin-top:4px;color:var(--ink)}
}
@media print{.legal .toc{display:none}.legal .tw{overflow:visible;contain:none}}
@media (prefers-reduced-motion:reduce){.legal .toc summary::after{transition:none}}

/* ---------- help (고객센터) ---------- */
.p9w{max-width:var(--stage,1240px);margin:0 auto;padding:0 var(--gut)}
.p9h{padding:clamp(48px,7vw,104px) 0 clamp(32px,4vw,56px)}
.p9k{font-size:15px;font-weight:600;color:var(--ink-2)}
.p9h__t{margin-top:10px;font-size:clamp(38px,3vw + 22px,64px);font-weight:760;line-height:1.1;letter-spacing:-.035em}
.p9s{padding-bottom:clamp(96px,10vw,144px)}
.p9cards{display:grid;gap:0;background:linear-gradient(var(--ink),var(--ink)) no-repeat var(--gut) 0/calc(100% - 2 * var(--gut)) 1px}
@media (min-width:768px){.p9cards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}
.p9card{display:flex;flex-direction:column;gap:10px;padding:28px 0 30px;border-bottom:1px solid var(--line)}
.p9card h2{font-size:clamp(20px,.4vw + 18px,23px);font-weight:720;line-height:1.35;letter-spacing:-.018em}
.p9card p{font-size:16px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
.p9card b{font-weight:650;color:var(--ink)}
.p9dl{padding-top:2px}
.p9dl p{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;color:var(--ink)}
.p9dl span{font-size:13px;font-weight:600;color:var(--ink-2)}
.p9dl a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:4px}
.p9links{margin-top:2px}
.p9links .more{font-size:15px}
.p9pol{display:grid;margin-top:-2px}
.p9pol a{display:flex;align-items:center;justify-content:space-between;min-height:48px;border-bottom:1px solid var(--line);font-size:16px;font-weight:550;color:var(--ink);text-decoration:none}
.p9pol li:last-child a{border-bottom:0}
.p9pol a::after{content:"";width:7px;height:7px;margin-right:4px;border-top:1.6px solid var(--ink-3);border-right:1.6px solid var(--ink-3);transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.p9pol a:hover,.p9dl a:hover{text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:4px}}

/* ---------- 404 ---------- */
.e404{display:grid;place-items:center;min-height:calc(100svh - var(--hdr) - 120px);padding:clamp(72px,10vw,144px) var(--gut)}
.e404__in{display:grid;justify-items:center;gap:20px;max-width:560px;text-align:center}
.e404__icon{width:72px;height:72px;border-radius:22.5%;box-shadow:0 14px 32px rgba(194,48,42,.22)}
.e404__h{margin-top:8px;font-size:clamp(36px,2.8vw + 22px,64px);font-weight:760;line-height:1.12;letter-spacing:-.035em}
.e404__p{font-size:var(--t-lead);font-weight:500;line-height:1.5;color:var(--ink-2)}
.e404 .btn{margin-top:12px}

/* r24: long legal documents lay out only the blocks near the screen (steady speed score; text stays in the page for search and find-in-page) */
.p-legal .doc .body>*{content-visibility:auto;contain-intrinsic-size:auto 100px}