@charset "utf-8";
/* /terms/<lang>/ — the Stellar Blade terms of use (#105). Ours, standalone: no
   jQuery, no fullpage, no shared stylesheet. The layout follows
   shiftup.co.kr/other/privacy.php (logo header -> title -> "제N조"
   headings over grey .cont_box blocks -> company footer); the values in the
   "reference" comments are that page's. No webfont is downloaded: the stack
   prefers the reference's Pretendard when installed, then the OS Korean face. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, p, ol, ul, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
address { font-style: normal; }
img { max-width: 100%; height: auto; vertical-align: top; border: 0; }

body {
  font-family: Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #777;
  background: #fff;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: inherit; }
.policy_cont a { color: #222; text-decoration: underline; text-underline-offset: 2px; }
.policy_cont a:hover { color: #000; }
:focus-visible { outline: 2px solid #569a43; outline-offset: 2px; }

/* reference: .w1350 */
.w1350 { max-width: 1350px; width: 90%; margin: 0 auto; }
/* reference: .subpad 80 -> 60 (<=1300) -> 30 (<=980) */
.subpad { padding: 80px 0; }

/* ---- header ---------------------------------------------------------- */
.terms-header { background: #000; }
.terms-header .w1350 { display: flex; align-items: center; height: 96px; }
.terms-logo { display: block; width: 160px; }

/* ---- body (reference: .policy_cont, h4, .cont_box) ------------------- */
.policy_cont { font-size: 1rem; }
.policy_cont .doc-title { font-size: 1.75rem; font-weight: 700; color: #000; letter-spacing: -0.035em; }
.policy_cont .doc-date { margin-top: 6px; color: #777; }
.policy_cont h3 {
  font-size: 1.125rem; font-weight: 700; color: #000;
  padding: 30px 0 10px; letter-spacing: -0.035em;
}
.cont_box {
  padding: 25px; background: #f4f4f4; margin: 7px 0 10px;
  line-height: 1.7; letter-spacing: -0.02em;
}
.cont_box > p + ol, .cont_box > ol + p { margin-top: 8px; }
/* 항/호: the number is part of the text (as in the delivered docx), so hang
   it in the margin instead of drawing a list marker. */
.hang > li { padding-left: 1.6em; text-indent: -1.6em; }
.hang > li + li { margin-top: 4px; }
.hang .hang { margin-top: 4px; text-indent: 0; }

/* ---- footer (reference: #footer #222, address .7, copyright .5) ------ */
.terms-footer { background: #222; color: rgba(255, 255, 255, 0.7); padding: 60px 0; font-size: 0.9375rem; }
.terms-footer address li { display: inline-block; margin-right: 20px; }
.terms-footer address a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.terms-footer .footer_bottom {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 20px;
}
.terms-footer .copyright { color: rgba(255, 255, 255, 0.5); }
.terms-footer .legal_links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.terms-footer .legal_links a { color: #fff; line-height: 1; text-decoration: underline; text-underline-offset: 2px; }
.terms-footer .legal_links a:hover { color: #bbb; }
/* a border, not ::before content — same reason as the main footer (#81) */
.terms-footer .legal_links a + a { border-left: 1px solid #fff; padding-left: 6px; }

/* ---- responsive (reference breakpoints 1300 / 980 / 680) -------------- */
@media (max-width: 1300px) {
  .subpad { padding: 60px 0; }
}
@media (max-width: 980px) {
  .subpad { padding: 30px 0; }
  .terms-header .w1350 { height: 72px; }
  .terms-logo { width: 120px; }
  .cont_box { padding: 18px; }
  .terms-footer { padding: 40px 0; }
}
@media (max-width: 680px) {
  body { font-size: 15px; }
  .policy_cont .doc-title { font-size: 1.375rem; }
  .policy_cont h3 { padding-top: 24px; }
  .terms-footer address li { display: block; margin-right: 0; }
}