/* 이벗 통합계정 — 약관/방침 전용
   출처: ebut-home support/terms.jsp · privacy.jsp 의 <style> 블록 (2026-08-29)
   ※ 원본 클래스명(terms-* / privacy-*)을 유지해 본문을 손대지 않았다 */

/* ============================================================================
   ★★ box-sizing 리셋 — 2026-09-06 추가

   ☠ **모바일에서 본문이 화면 밖으로 잘려 있었다.**
     `.container` 가 `width:100%` + `padding:0 24px` 인데 리셋이 없어
     **뷰포트보다 48px 넓어졌다.** 375px 화면에서 오른쪽 글자가 잘렸다.

   ★ 정책 페이지는 `variables.css` + 이 파일만 부른다.
     `layout.css` · `login.css` 에는 이 리셋이 있는데 여기만 없었다.
     ("어떤 화면은 되고 어떤 화면은 안 된다" 의 원인이 이런 자리다)

   ★ 값은 `layout.css` 와 같게 맞춘다. 이 파일은 정책 페이지 전용이라
     다른 화면에 영향이 없다.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* ===== terms ===== */
.terms-wrap { padding: 80px 0 120px; }
    .terms-header { margin-bottom: 56px; }
    .terms-label {
      font-size: 13px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: #0068C8; margin-bottom: 16px;
    }
    .terms-title {
      font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800;
      letter-spacing: -.03em; color: #0D1B2A; margin-bottom: 12px; line-height: 1.2;
    }
    .terms-meta { font-size: .9rem; color: #8A9BB0; }
    .terms-meta strong { color: #4A5568; }

    /* 목차 */
    .terms-toc {
      background: #F7F9FC; border-radius: 16px;
      border: 1.5px solid #E2E8F0; padding: 28px 32px;
      margin-bottom: 56px;
    }
    .terms-toc__title {
      font-size: .95rem; font-weight: 800; color: #0D1B2A; margin-bottom: 16px;
    }
    .terms-toc__list {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 6px 32px; list-style: none; padding: 0; margin: 0;
    }
    .terms-toc__item a {
      font-size: .88rem; color: #4A5568; text-decoration: none;
      display: flex; align-items: center; gap: 6px;
      transition: color .15s;
    }
    .terms-toc__item a:hover { color: #0068C8; }
    .terms-toc__item a::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: #C0CEDC; flex-shrink: 0; transition: background .15s;
    }
    .terms-toc__item a:hover::before { background: #0068C8; }

    /* 본문 */
    .terms-body { max-width: 800px; }
    .terms-chapter {
      margin-bottom: 56px;
      padding-bottom: 56px;
      border-bottom: 1px solid #EFF2F7;
    }
    .terms-chapter:last-child { border-bottom: none; }
    .terms-chapter__title {
      font-size: 1.1rem; font-weight: 800; color: #0068C8;
      letter-spacing: -.01em; margin-bottom: 28px;
      padding: 10px 16px; background: #EBF4FF;
      border-radius: 8px; border-left: 3px solid #0068C8;
    }
    .terms-article { margin-bottom: 32px; }
    .terms-article:last-child { margin-bottom: 0; }
    .terms-article__title {
      font-size: 1rem; font-weight: 800; color: #0D1B2A;
      margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px;
      /* ★★ flex 함정 — 자식이 「배지 + 제목 텍스트」 둘이다.
             제목이 익명 flex 아이템이라 min-width:0 을 줄 수 없다.
             배지가 flex-shrink:0 이므로 좁아지면 제목이 삐져나온다.
         ★ wrap 이 답이다 — 좁으면 제목이 배지 아래로 내려간다.
           「제29조 (API 이용주체 및 제3자 이용 제한)」 처럼 긴 제목이 실제로 있다 */
      flex-wrap: wrap;
    }
    /* ★ 제6·7장 제목은 h3 다. 브라우저 기본 margin 을 없애야 앞 장들과 간격이 같아진다 */
    h3.terms-article__title { margin-top: 0; }
    .terms-article__title .art-num {
      font-size: .8rem; font-weight: 700;
      background: #0068C8; color: white;
      padding: 2px 8px; border-radius: 99px;
      flex-shrink: 0;
    }
    .terms-article__body {
      font-size: .95rem; color: #4A5568; line-height: 1.85;
    }
    .terms-article__body p { margin-bottom: 10px; }
    .terms-article__body p:last-child { margin-bottom: 0; }
    .terms-list {
      list-style: none; padding: 0; margin: 10px 0 0;
      display: flex; flex-direction: column; gap: 7px;
    }
    .terms-list li {
      display: flex; gap: 8px;
      font-size: .92rem; color: #4A5568; line-height: 1.7;
    }
    .terms-list li::before {
      content: '–'; color: #A0AEC0; flex-shrink: 0; margin-top: 1px;
    }
    .terms-ol {
      padding: 0; margin: 10px 0 0;
      display: flex; flex-direction: column; gap: 7px; list-style: none;
      counter-reset: terms-counter;
    }
    .terms-ol > li {
      display: flex; gap: 10px;
      font-size: .92rem; color: #4A5568; line-height: 1.7;
      counter-increment: terms-counter;
      flex-direction: row; align-items: flex-start;
    }
    .terms-ol > li::before {
      content: counter(terms-counter) ".";
      color: #0068C8; font-weight: 700; flex-shrink: 0;
      min-width: 22px; margin-top: 1px;
    }
    /* li 내부 div: 텍스트+하위목록 세로 쌓기 */
    .terms-ol > li > div {
      flex: 1; display: flex; flex-direction: column; gap: 0;
    }
    /* ★★★ flex 함정 — 2026-09-06. **모바일에서 「각 호」가 세로로 쪼개졌다**
         `.terms-ol > li` 가 flex 컨테이너인데, 자식이 「텍스트 + 중첩 ol」 **둘**이다.
         중첩 목록이 옆 칸으로 밀려 폭이 한 글자만큼 남는다.

         ☠ 왜 일부만 그런가 — **감싸는 div 가 있느냐로 갈린다.**
           제6·11·14·17·18조 : `<li><div>글 <ul>…</ul></div></li>`  → 위 규칙이 받는다
           제7·28·29조        : `<li>글 <ol>…</ol></li>`             → **받을 것이 없다**
           법무 문구를 그대로 넣느라 div 로 감싸지 않았다.

         ★ 마크업(법적 문구)을 건드리지 않고 CSS 로 푼다 —
           **줄을 나눠 중첩 목록이 한 줄을 통째로 쓰게 한다** */
    .terms-ol > li { flex-wrap: wrap; }
    .terms-ol > li > ol,
    .terms-ol > li > ul { flex-basis: 100%; margin-top: 8px; margin-bottom: 0; }
    /* 중첩 「각 호」 — 번호는 브라우저 기본(decimal)을 쓰되 들여쓰기만 맞춘다 */
    .terms-ol > li > ol {
      padding-left: 22px; color: #4A5568; line-height: 1.7;
    }
    .terms-ol > li > ol > li { margin-bottom: 5px; }
    .terms-ol > li .terms-list { margin-top: 8px; }

    /* 부칙 */
    .terms-addendum {
      background: #F7F9FC; border-radius: 16px;
      border: 1.5px solid #E2E8F0; padding: 24px 28px;
      font-size: .92rem; color: #4A5568; line-height: 1.7;
    }
    .terms-addendum strong { color: #0D1B2A; font-weight: 700; }

    /* 상단 이동 버튼 */
    .terms-top {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .85rem; color: #8A9BB0; text-decoration: none;
      border: 1px solid #E2E8F0; border-radius: 99px;
      padding: 6px 14px; transition: all .2s; margin-bottom: 8px;
    }
    .terms-top:hover { color: #0068C8; border-color: #0068C8; }

    @media (max-width: 640px) {
      .terms-toc__list { grid-template-columns: 1fr; }
    }

/* ===== privacy ===== */
.privacy-wrap { padding: 80px 0 120px; }

    .privacy-header { margin-bottom: 56px; }
    .privacy-label {
      font-size: 13px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: #0068C8; margin-bottom: 16px;
    }
    .privacy-title {
      font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800;
      letter-spacing: -.03em; color: #0D1B2A;
      margin-bottom: 12px; line-height: 1.2;
    }
    .privacy-meta { font-size: .9rem; color: #8A9BB0; line-height: 1.8; }
    .privacy-meta strong { color: #4A5568; }

    /* 목차 */
    .privacy-toc {
      background: #F7F9FC; border-radius: 16px;
      border: 1.5px solid #E2E8F0; padding: 28px 32px;
      margin-bottom: 56px;
    }
    .privacy-toc__title { font-size: .95rem; font-weight: 800; color: #0D1B2A; margin-bottom: 16px; }
    .privacy-toc__list {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 6px 32px; list-style: none; padding: 0; margin: 0;
    }
    .privacy-toc__item a {
      font-size: .88rem; color: #4A5568; text-decoration: none;
      display: flex; align-items: center; gap: 6px; transition: color .15s;
    }
    .privacy-toc__item a:hover { color: #0068C8; }
    .privacy-toc__item a::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: #C0CEDC; flex-shrink: 0; transition: background .15s;
    }
    .privacy-toc__item a:hover::before { background: #0068C8; }

    /* 본문 */
    .privacy-body { max-width: 800px; }
    .privacy-section {
      margin-bottom: 52px; padding-bottom: 52px;
      border-bottom: 1px solid #EFF2F7;
    }
    .privacy-section:last-child { border-bottom: none; margin-bottom: 0; }

    .privacy-section__title {
      font-size: 1.1rem; font-weight: 800; color: white;
      padding: 12px 18px; border-radius: 10px;
      background: #0068C8; margin-bottom: 24px;
      display: flex; align-items: center; gap: 10px;
    }
    .privacy-section__num {
      background: rgba(255,255,255,.25); font-size: .8rem;
      font-weight: 800; padding: 2px 9px; border-radius: 99px;
      flex-shrink: 0;
    }

    .privacy-content {
      font-size: .95rem; color: #4A5568; line-height: 1.85;
    }
    .privacy-content p { margin-bottom: 12px; }
    .privacy-content p:last-child { margin-bottom: 0; }

    .privacy-ol {
      padding: 0; margin: 10px 0;
      display: flex; flex-direction: column; gap: 8px;
      list-style: none; counter-reset: priv-counter;
    }
    .privacy-ol > li {
      display: flex; gap: 10px;
      font-size: .92rem; color: #4A5568; line-height: 1.75;
      counter-increment: priv-counter;
    }
    .privacy-ol > li::before {
      content: "①②③④⑤⑥⑦⑧⑨⑩";
      content: counter(priv-counter, cjk-heavenly-stem);
      font-size: .85rem; color: #0068C8; font-weight: 700;
      flex-shrink: 0; min-width: 18px; margin-top: 1px;
    }
    /* ★ 위탁업체 표 (제6항) — 개인정보보호법상 법정 기재사항이라 표로 보여준다.
       ★★ 좁은 화면에서 넘치지 않게 감싸는 쪽에 overflow 를 준다 */
    /* ★★ 감싸는 쪽이 가로로 스크롤한다. **본문(body)이 가로로 밀리면 안 된다**
           — 표가 넘칠 때 페이지 전체가 흔들리는 대신 표 안에서만 밀리게 한다 */
    .privacy-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .privacy-table {
      width: 100%; border-collapse: collapse;
      margin: 10px 0 4px; font-size: .9rem; line-height: 1.6;
    }
    .privacy-table th,
    .privacy-table td {
      border: 1px solid #E2E8F0; padding: 9px 12px;
      text-align: left; vertical-align: top; color: #4A5568;
    }
    .privacy-table th { background: #F7FAFC; font-weight: 600; color: #2D3748; white-space: nowrap; }

    .privacy-list {
      list-style: none; padding: 0;
      margin: 8px 0 4px 18px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .privacy-list li {
      display: flex; gap: 8px;
      font-size: .9rem; color: #4A5568; line-height: 1.7;
    }
    .privacy-list li::before {
      content: '–'; color: #A0AEC0; flex-shrink: 0;
    }

    /* 담당자 카드 */
    .privacy-manager {
      background: #EBF4FF; border-radius: 14px;
      border: 1.5px solid #BDD9F8; padding: 24px 28px;
      margin-top: 16px;
    }
    .privacy-manager__title {
      font-size: .9rem; font-weight: 800; color: #0068C8;
      margin-bottom: 12px;
    }
    .privacy-manager__row {
      display: flex; gap: 12px;
      font-size: .9rem; color: #4A5568; margin-bottom: 7px;
    }
    .privacy-manager__row:last-child { margin-bottom: 0; }
    .privacy-manager__key {
      color: #0068C8; font-weight: 700; min-width: 60px; flex-shrink: 0;
    }

    /* 목차로 버튼 */
    .privacy-top {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .85rem; color: #8A9BB0; text-decoration: none;
      border: 1px solid #E2E8F0; border-radius: 99px;
      padding: 6px 14px; transition: all .2s; margin-top: 8px;
    }
    .privacy-top:hover { color: #0068C8; border-color: #0068C8; }

    /* 공고일 배너 */
    .privacy-dates {
      display: flex; gap: 24px; flex-wrap: wrap;
      background: white; border: 1.5px solid #E2E8F0;
      border-radius: 14px; padding: 20px 24px; margin-top: 40px;
    }
    .privacy-dates__item { font-size: .9rem; color: #4A5568; }
    .privacy-dates__item strong { color: #0D1B2A; font-weight: 700; }

    @media (max-width: 640px) {
      .privacy-toc__list { grid-template-columns: 1fr; }
    }

/* ============================================================================
   ★ .container — 2026-08-30 추가

   본문이 브라우저 왼쪽에 딱 붙어 여백이 없던 문제.

   원인 — 원본 마크업이 <div class="container"> 로 감싸는데,
          그 클래스는 ebut-home 의 **사이트 공통 CSS**(reset.css)에 있다.
          나는 페이지의 <style> 블록만 옮겨왔기 때문에
          **감싸는 상자만 있고 상자의 크기·여백이 없었다.**

   ★ 본문 마크업을 고치지 않으려면 이 클래스를 여기서 정의해야 한다.
     원본(ebut-home/css/reset.css)의 값을 그대로 옮긴다 —
     변수(--max-width 1200px / --space-6 1.5rem)는 ebut-my 에 없어 실제 값으로 푼다.

   ※ "왜 여기에 .container 가 있지" 를 나중에 묻지 않도록 남긴다.
     이 파일은 정책 페이지 전용이므로 다른 화면에 영향이 없다.
   ============================================================================ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;        /* 원본 --space-6 = 1.5rem */
}

/* 좁은 화면에서는 좌우 여백을 줄인다 — 글이 길어 읽는 폭이 더 중요하다 */
@media (max-width: 640px) {
    .container      { padding: 0 16px; }
    .terms-wrap,
    .privacy-wrap   { padding: 40px 0 60px; }
}

/* ---- ebut-my 전용 껍데기 (원본 nav/footer 를 대체한다) ---- */
.policy-body { margin:0; background:var(--bg, #f7f8fa); }
.policy-top  { padding:16px 20px; border-bottom:1px solid var(--border, #e5e7eb); background:#fff; }
.policy-home { color:var(--text-sub, #6b7280); text-decoration:none; font-size:14px; }
.policy-home:hover { color:var(--primary, #3b5bdb); }
.policy-foot { padding:24px 20px 40px; text-align:center; color:var(--text-sub, #6b7280); font-size:13px; }
.policy-foot a { color:var(--text-sub, #6b7280); text-decoration:none; }
.policy-foot a:hover { text-decoration:underline; }