/* ------------------------------------------------------------------
   doc.css — 약관/방침 등 긴 문서 페이지 공통 스타일
   앱 WebView 에서 열리는 것을 전제로 모바일 우선으로 작성한다.
   ------------------------------------------------------------------ */

:root {
    --paper:        #f6f2e9;
    --paper-raised: #fffdf7;
    --ink:          #1b1915;
    --ink-soft:     #4d483d;
    --ink-faint:    #8b8477;
    --rule:         #ded5c3;
    --rule-soft:    #eae2d3;
    --accent:       #a3611c;
    --accent-wash:  #f0e3ce;

    --font-display: 'Gowun Batang', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
    --font-body:    'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

    --measure: 40rem;
    --gutter: 1.5rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:        #131210;
        --paper-raised: #1c1a16;
        --ink:          #ece6d9;
        --ink-soft:     #b4ac9b;
        --ink-faint:    #7d766a;
        --rule:         #322e27;
        --rule-soft:    #262320;
        --accent:       #d69a52;
        --accent-wash:  #2b2419;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body.doc {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.85;
    letter-spacing: -0.003em;
    word-break: keep-all;      /* 한국어 어절 단위 줄바꿈 */
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

/* 종이 질감. 정보 전달을 방해하지 않을 만큼만 얹는다. */
body.doc::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    body.doc::before { opacity: 0.5; }
}

/* --- 상단 바 ---------------------------------------------------- */

.doc-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.85rem var(--gutter);
    padding-top: calc(0.85rem + env(safe-area-inset-top));
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--rule);
}

/* 바 내부도 본문과 같은 단 폭에 맞춰 좌측 기준선을 공유한다. */
.doc-bar__inner {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    max-width: var(--measure);
    margin: 0 auto;
}

.doc-bar__mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.doc-bar__label {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --- 본문 래퍼 -------------------------------------------------- */

.doc-wrap {
    position: relative;
    z-index: 1;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter) 5rem;
}

/* --- 표제 ------------------------------------------------------- */

.doc-head {
    padding: 3.5rem 0 2.25rem;
    border-bottom: 1px solid var(--rule);
}

.doc-head__eyebrow {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}

.doc-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.1rem, 9vw, 3.1rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.doc-head__lead {
    margin: 1.5rem 0 0;
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--ink-soft);
}

.doc-head__stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-raised);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
}

.doc-head__stamp::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

/* --- 섹션 ------------------------------------------------------- */

.doc-section {
    position: relative;
    padding: 2.75rem 0;
    border-bottom: 1px solid var(--rule-soft);
}

.doc-section:last-of-type { border-bottom: 0; }

.doc-section__title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: -0.015em;
}

.doc-section__num {
    flex: none;
    font-size: 0.95rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.doc-section p {
    margin: 0 0 1.15rem;
    color: var(--ink-soft);
}

.doc-section p:last-child { margin-bottom: 0; }

/* 넓은 화면에서는 번호를 본문 바깥 여백으로 빼내 편집물처럼 읽히게 한다.
   기준 컨테이너는 제목이다. 섹션 기준으로 잡으면 상단 패딩만큼 번호가 떠오른다. */
@media (min-width: 900px) {
    .doc-section__title {
        position: relative;
        gap: 0;
    }
    .doc-section__num {
        position: absolute;
        left: -3.5rem;
        top: 0.28em;
        font-size: 0.85rem;
        letter-spacing: 0.08em;
    }
}

/* --- 소제목 + 목록 ---------------------------------------------- */

.doc-subhead {
    margin: 1.9rem 0 0.85rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.doc-list {
    margin: 0 0 1.15rem;
    padding: 0;
    list-style: none;
}

.doc-list li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.4rem;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule-soft);
}

.doc-list li:first-child { border-top: 0; }

.doc-list li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 1.25em;
    width: 0.45rem;
    height: 1px;
    background: var(--accent);
}

/* 항목명: 설명 형태의 목록 */
.doc-list b {
    font-weight: 600;
    color: var(--ink);
}

/* --- 강조 상자 -------------------------------------------------- */

.doc-note {
    margin: 1.4rem 0 0;
    padding: 1.1rem 1.25rem;
    background: var(--accent-wash);
    border-left: 2px solid var(--accent);
    border-radius: 0 4px 4px 0;
    font-size: 0.93rem;
    line-height: 1.8;
    color: var(--ink-soft);
}

.doc-note p { margin: 0; color: inherit; }

/* --- 연락처 카드 ------------------------------------------------ */

.doc-contact {
    margin-top: 1.5rem;
    padding: 1.4rem 1.35rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.doc-contact dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 1.1rem;
    margin: 0;
    align-items: baseline;
}

.doc-contact dt {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    white-space: nowrap;
}

.doc-contact dd {
    margin: 0;
    font-weight: 500;
    color: var(--ink);
}

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    transition: border-color 0.18s ease, color 0.18s ease;
}

a:hover {
    border-bottom-color: var(--accent);
}

/* --- 꼬리말 ----------------------------------------------------- */

.doc-foot {
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
    line-height: 1.9;
    color: var(--ink-faint);
}

.doc-foot strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* --- 진입 연출 --------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .doc-head,
    .doc-section,
    .doc-foot {
        animation: doc-rise 0.65s cubic-bezier(0.22, 0.68, 0.36, 1) both;
    }

    .doc-section:nth-of-type(1) { animation-delay: 0.06s; }
    .doc-section:nth-of-type(2) { animation-delay: 0.12s; }
    .doc-section:nth-of-type(3) { animation-delay: 0.18s; }
    .doc-section:nth-of-type(4) { animation-delay: 0.24s; }
    .doc-section:nth-of-type(5) { animation-delay: 0.30s; }
    .doc-foot { animation-delay: 0.36s; }
}

@keyframes doc-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}