/* ═══════════════════════════════════════════
   METHOD PAGE — DESIGN TOKENS
   GEO 정본 문서 톤 (Editorial / Architectural)
   ═══════════════════════════════════════════ */
:root {
    --m-bg: #f8f7f4;
    --m-bg-dark: #0a1628;
    --m-bg-mid: #f0efe9;
    --m-text: #1a1a1a;
    --m-text-sub: #64748b;
    --m-text-muted: #94a3b8;
    --m-text-dark: #e2e8f0;
    --m-accent: #3b82f6;
    --m-accent-muted: #60a5fa;
    --m-line: #d4d0c8;
    --m-line-dark: #1e293b;
    --m-font-display: 'Bebas Neue', sans-serif;
    --m-font-body: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
    --m-max: 1200px;
    --m-narrow: 820px;
}

/* ═══════════════════════════════════════════
   METHOD PAGE — BASE
   ═══════════════════════════════════════════ */
.method-page {
    font-family: var(--m-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: var(--m-text);
    background: var(--m-bg);
}
.m-container { max-width: var(--m-max); margin: 0 auto; padding: 0 40px; }
.m-container--narrow { max-width: var(--m-narrow); margin: 0 auto; padding: 0 40px; }

/* Section Numbering — Bebas Neue 유지 (장식 요소) */
.m-section-num {
    font-family: var(--m-font-display);
    font-size: 13px;
    letter-spacing: 0.15em;
    color: var(--m-text-muted);
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}
.m-section-num::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--m-line);
}
.m-dark .m-section-num { color: #475569; }
.m-dark .m-section-num::after { background: var(--m-line-dark); }

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.m-hero {
    background: var(--m-bg-dark);
    color: #fff;
    padding: 180px 0 140px;
    position: relative;
    overflow: hidden;
}
.m-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 70% 20%, rgba(59,130,246,0.06) 0%, transparent 60%);
}
.m-hero__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
    position: relative;
}
.m-hero__label {
    font-family: var(--m-font-display);
    font-size: 14px;
    letter-spacing: 0.2em;
    color: var(--m-accent-muted);
    margin-bottom: 24px;
}
/* HERO 큰 타이포 — Bebas Neue 유지 */
.m-hero__title {
    font-family: var(--m-font-display);
    font-size: clamp(72px, 9vw, 120px);
    line-height: 0.9;
    letter-spacing: -0.01em;
    color: #fff;
}
.m-hero__title span {
    display: block;
    color: var(--m-accent-muted);
    font-size: 0.55em;
    margin-top: 8px;
}
.m-hero__right { padding-bottom: 12px; }
/* HERO 본문 텍스트 — Pretendard 400으로 통일 */
.m-hero__subtitle {
    font-family: var(--m-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
    color: #cbd5e1;
    margin-bottom: 16px;
}
/* HERO 태그라인 — 영문 장식 라벨이라 Bebas Neue 유지 */
.m-hero__tagline {
    font-family: var(--m-font-display);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--m-accent-muted);
    margin-bottom: 28px;
}
.m-hero__note {
    font-family: var(--m-font-body);
    font-size: 13px;
    color: #475569;
    line-height: 1.7;
    border-top: 1px solid var(--m-line-dark);
    padding-top: 20px;
}

/* ═══════════════════════════════════════════
   LIGHT SECTION
   ═══════════════════════════════════════════ */
.m-section-light {
    padding: 120px 0;
    border-bottom: 1px solid var(--m-line);
}
.m-section-light:last-of-type { border-bottom: none; }
/* 섹션 헤딩 — Bebas Neue 유지 (Method 정체성) */
.m-section-light h2 {
    font-family: var(--m-font-display);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}
.m-section-light h2 .m-en {
    display: block;
    font-size: 0.5em;
    color: var(--m-text-muted);
    margin-top: 4px;
    letter-spacing: 0.08em;
}
/*
 * m-prose: 본문 읽기 영역
 * font-weight: 300 → 400 변경 (Pretendard 한글 가독성 + 다른 페이지 통일)
 */
.m-prose {
    font-family: var(--m-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    color: #374151;
    max-width: 640px;
}
.m-prose p + p { margin-top: 20px; }
.m-prose strong { font-weight: 600; color: var(--m-text); }

/* Two Column */
.m-two-col {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 80px;
}

/* ═══════════════════════════════════════════
   COMPARE TABLE
   ═══════════════════════════════════════════ */
.m-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 48px;
    border-top: 2px solid var(--m-text);
}
/* Compare 헤더 — Bebas Neue 유지 (라벨 성격) */
.m-compare__header {
    font-family: var(--m-font-display);
    font-size: 16px;
    letter-spacing: 0.1em;
    padding: 16px 0;
    border-bottom: 1px solid var(--m-line);
}
.m-compare__header:first-child { padding-right: 32px; }
.m-compare__header:last-child { padding-left: 32px; border-left: 1px solid var(--m-line); }
/* Compare 셀 — 본문 톤 (Pretendard 400) */
.m-compare__cell {
    font-family: var(--m-font-body);
    font-size: 15px;
    font-weight: 400;
    padding: 20px 0;
    border-bottom: 1px solid var(--m-line);
    color: #374151;
}
.m-compare__cell:nth-child(odd) { padding-right: 32px; }
.m-compare__cell:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--m-line); }

/* ═══════════════════════════════════════════
   DARK SECTION
   ═══════════════════════════════════════════ */
.m-section-dark {
    background: var(--m-bg-dark);
    color: #e2e8f0;
    padding: 120px 0;
}
.m-section-dark h2 {
    font-family: var(--m-font-display);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 12px;
}
.m-section-dark h2 .m-en {
    display: block;
    font-size: 0.5em;
    color: #475569;
    margin-top: 4px;
    letter-spacing: 0.08em;
}
.m-section-dark .m-prose {
    color: #94a3b8;
}

/* ═══════════════════════════════════════════
   BULLET LIST
   ═══════════════════════════════════════════ */
.m-bullets {
    list-style: none;
    margin-top: 40px;
}
/* 불릿 항목 — 본문 톤 (Pretendard 400) */
.m-bullets li {
    font-family: var(--m-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    padding: 16px 0;
    border-bottom: 1px solid var(--m-line);
    display: flex;
    align-items: baseline;
    gap: 16px;
    color: #374151;
}
.m-bullets li::before {
    content: '—';
    color: var(--m-text-muted);
    flex-shrink: 0;
}
.m-dark .m-bullets li {
    border-bottom-color: var(--m-line-dark);
    color: #94a3b8;
}
.m-dark .m-bullets li::before { color: #475569; }
.m-bullets__note {
    font-family: var(--m-font-body);
    font-size: 13px;
    color: var(--m-text-muted);
    margin-top: 24px;
}

/* ═══════════════════════════════════════════
   FRAMEWORK
   ═══════════════════════════════════════════ */
.m-framework { margin-top: 60px; }
.m-framework__step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 32px;
    padding: 40px 0;
    border-bottom: 1px solid var(--m-line-dark);
    align-items: start;
}
.m-framework__step:first-child { padding-top: 0; }
/* Framework 번호 — Bebas Neue 유지 (장식 요소) */
.m-framework__num {
    font-family: var(--m-font-display);
    font-size: 36px;
    color: #334155;
    line-height: 1;
}
/* Framework 타이틀 — Bebas Neue 유지 (영문 라벨, 정체성) */
.m-framework__title {
    font-family: var(--m-font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 8px;
}
/* Framework 설명 — 본문 톤 (Pretendard 400) */
.m-framework__desc {
    font-family: var(--m-font-body);
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.7;
}

/* ═══════════════════════════════════════════
   OBSERVATION
   ═══════════════════════════════════════════ */
.m-observation { margin-top: 60px; }
.m-observation__card {
    background: var(--m-bg-mid);
    padding: 48px;
    margin-bottom: 2px;
}
/* 라벨 — Bebas Neue 유지 (장식 요소) */
.m-observation__label {
    font-family: var(--m-font-display);
    font-size: 12px;
    letter-spacing: 0.15em;
    color: var(--m-text-muted);
    margin-bottom: 8px;
}
/* 쿼리 인용문 — Pretendard, italic 강조 */
.m-observation__query {
    font-family: var(--m-font-body);
    font-size: 19px;
    font-weight: 400;
    font-style: italic;
    color: var(--m-text);
    margin-bottom: 24px;
}
.m-observation__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
/* Row 라벨 — Bebas Neue 유지 (장식 요소) */
.m-observation__row-label {
    font-family: var(--m-font-display);
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--m-text-muted);
    margin-bottom: 6px;
}
/* Row 본문 — Pretendard 400 */
.m-observation__row-text {
    font-family: var(--m-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: #374151;
}

/* ═══════════════════════════════════════════
   MID SECTION
   ═══════════════════════════════════════════ */
.m-section-mid {
    background: var(--m-bg-mid);
    padding: 120px 0;
}
.m-section-mid h2 {
    font-family: var(--m-font-display);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}
.m-section-mid h2 .m-en {
    display: block;
    font-size: 0.5em;
    color: var(--m-text-muted);
    margin-top: 4px;
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════
   SIGNAL LIST
   ═══════════════════════════════════════════ */
.m-signals {
    list-style: none;
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
/* Signal 항목 — Pretendard 400 */
.m-signals li {
    font-family: var(--m-font-body);
    font-size: 15px;
    font-weight: 400;
    color: #374151;
    padding: 24px 0;
    border-bottom: 1px solid var(--m-line);
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.m-signals li:nth-child(odd) { padding-right: 40px; }
.m-signals li:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--m-line); }
.m-signals li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m-accent);
    flex-shrink: 0;
    margin-top: 6px;
}

/* ═══════════════════════════════════════════
   CLOSING
   ═══════════════════════════════════════════ */
.m-closing {
    padding: 120px 0;
    text-align: center;
}
.m-closing__line {
    width: 48px;
    height: 1px;
    background: var(--m-line);
    margin: 0 auto 40px;
}
/* Closing 본문 — Pretendard 400 */
.m-closing__text {
    font-family: var(--m-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    color: #64748b;
    max-width: 560px;
    margin: 0 auto;
}
.m-closing__text p + p { margin-top: 20px; }
/* Closing 라벨 — Bebas Neue 유지 (정본 서명) */
.m-closing__label {
    font-family: var(--m-font-display);
    font-size: 14px;
    letter-spacing: 0.15em;
    color: var(--m-text-muted);
    margin-top: 40px;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════ */
.m-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.m-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .m-hero__layout { grid-template-columns: 1fr; gap: 48px; }
    .m-two-col { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
    .m-container, .m-container--narrow { padding: 0 24px; }
    .m-hero { padding: 120px 0 100px; }
    .m-section-light, .m-section-dark, .m-section-mid { padding: 80px 0; }
    .m-compare { grid-template-columns: 1fr; }
    .m-compare__header:last-child,
    .m-compare__cell:nth-child(even) { padding-left: 0; border-left: none; }
    .m-signals { grid-template-columns: 1fr; }
    .m-signals li:nth-child(even) { padding-left: 0; border-left: none; }
    .m-observation__row { grid-template-columns: 1fr; gap: 24px; }
    .m-observation__card { padding: 32px 24px; }
    .m-framework__step { grid-template-columns: 48px 1fr; gap: 20px; }
}
@media (max-width: 480px) {
    .m-hero__title { font-size: 56px; }
}