/* 이용약관·개인정보처리방침·404 공용 스타일.
   색상·타이포·버튼·헤더·푸터는 index.html(Atommerce Core Design System v26-1)과 같은 값을 쓴다.
   index.html의 디자인 토큰이 바뀌면 여기도 같이 맞출 것. */
@font-face{font-family:"AtomSans";src:url("/assets/fonts/atomsans-6642fe7f.woff2") format("woff2");font-weight:45 920;font-style:normal;font-display:swap}

:root{
  --ref-base-white:#ffffff; --ref-base-black:#151818;
  --ref-primary-10:#d4f8f8; --ref-primary-100:#70dcdc; --ref-primary-200:#3cd0d0; --ref-primary-300:#00bbba;
  --ref-primary-400:#009696; --ref-primary-500:#007777; --ref-primary-600:#006969; --ref-primary-700:#005454;
  --ref-primary-800:#004141; --ref-primary-900:#003232;
  --ref-neutral-10:#fafbfc; --ref-neutral-50:#f3f5f7; --ref-neutral-150:#e1e4e8; --ref-neutral-300:#b6bdc4;
  --ref-neutral-400:#9aa4ad; --ref-neutral-600:#65717c; --ref-neutral-900:#373d44;

  --bg:var(--ref-base-white); --bg-soft:var(--ref-neutral-50);
  --ink:var(--ref-neutral-900); --ink-2:var(--ref-neutral-600); --line:var(--ref-neutral-150);
  --mint:var(--ref-primary-400); --mint-ink:var(--ref-primary-500);
  --deep-2:var(--ref-primary-900); --on-deep:var(--ref-neutral-10); --on-deep-2:var(--ref-neutral-300);
  --deep-line:color-mix(in srgb,var(--ref-base-white) 16%,transparent);
  --btn-bg:var(--ref-primary-500); --btn-bg-hover:var(--ref-primary-600); --btn-bg-active:var(--ref-primary-700); --btn-fg:var(--ref-base-white);

  --font-brand:"AtomSans","Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,system-ui,sans-serif;
  /* 본문은 서브셋 폰트에 없는 글자가 많아 시스템 폰트로 통일 */
  --font-text:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--ref-base-black); --bg-soft:var(--ref-primary-900);
    --ink:var(--ref-neutral-50); --ink-2:var(--ref-neutral-400); --line:var(--ref-primary-700);
    --mint:var(--ref-primary-200); --mint-ink:var(--ref-primary-100);
    --deep-2:var(--ref-base-black); --on-deep:var(--ref-neutral-10); --on-deep-2:var(--ref-neutral-400);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--ref-base-black); --bg-soft:var(--ref-primary-900);
  --ink:var(--ref-neutral-50); --ink-2:var(--ref-neutral-400); --line:var(--ref-primary-700);
  --mint:var(--ref-primary-200); --mint-ink:var(--ref-primary-100);
  --deep-2:var(--ref-base-black); --on-deep:var(--ref-neutral-10); --on-deep-2:var(--ref-neutral-400);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:3px}
svg{flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* button (design system: md 40px, Primary) */
.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:8px 12px;border-radius:10px;font-family:var(--font-brand);font-weight:700;font-size:16px;line-height:1;text-decoration:none;white-space:nowrap;background:var(--btn-bg);color:var(--btn-fg);transition:background-color .2s}
.btn:hover{background:var(--btn-bg-hover)}
.btn:active{background:var(--btn-bg-active)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:28px;height:66px}
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--ref-primary-300);line-height:1}
.logo svg{display:block;height:27px;width:227px;max-width:100%;fill:currentColor}
.top .btn{margin-left:auto}

/* document */
.doc{max-width:820px;margin-inline:auto;padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,112px)}
.doc h1{margin:0;font-family:var(--font-brand);font-size:clamp(28px,2.4vw + 16px,45px);font-weight:700;line-height:1.4;letter-spacing:0}
.doc .meta{margin:12px 0 0;color:var(--ink-2);font-size:14px}
.doc .actions{margin-top:28px}
.doc-body{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);color:var(--ink);font-size:16px;line-height:1.75}
.doc-body h2,.doc-body h3{margin:44px 0 12px;font-size:18px;font-weight:700;line-height:1.6}
.doc-body h4{margin:28px 0 8px;font-size:16px;font-weight:700;line-height:1.6}
.doc-body > :first-child{margin-top:0}
.doc-body p{margin:0 0 10px}
.doc-body ol,.doc-body ul{margin:6px 0 20px;padding-left:1.4em}
.doc-body li{margin-bottom:8px}
.doc-body table{width:100%;border-collapse:collapse;margin:12px 0 24px;font-size:14px;display:block;overflow-x:auto}
.doc-body th,.doc-body td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.doc-body th{background:var(--bg-soft)}
.doc-body a{color:var(--mint-ink)}
.doc-body .contact{margin:16px 0 20px;padding:18px 20px;border-radius:12px;background:var(--bg-soft)}
.doc-body .contact p{margin:0}
.state{padding:48px 0;color:var(--ink-2);text-align:center}

/* footer (index.html과 동일) */
.foot{background:var(--deep-2);color:var(--on-deep-2);font-family:var(--font-brand);font-size:14px;line-height:1.6}
.foot .wrap{padding-block:44px 48px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px 48px}
.foot .wrap > div{min-width:0}
.foot .logo{color:var(--on-deep)}
.foot .logo svg{height:25px;width:210px}
.foot-info{margin:14px 0 0}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.foot h4{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--on-deep)}
.foot ul{list-style:none;padding:0;margin:0}
.foot a{text-decoration:none}
.foot a:hover,.foot a[aria-current="page"]{color:var(--on-deep)}
.foot-bottom{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-top:20px;border-top:1px solid var(--deep-line)}
.foot-bottom div{display:flex;gap:18px}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}}
@media (max-width:620px){
  .top-in{height:60px}
  .top .logo svg{height:22px;width:185px}
  .foot .wrap{padding-block:36px 40px}
  .foot li a{display:inline-block;padding-block:4px}
  .foot-cols{gap:16px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}