/* =========================
   0. KINIMA Brand Font
========================= */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital@1&display=swap');

.kinima-text {
    font-family: 'Lato', sans-serif;
    font-style: italic;
}

/* =========================
   0. Date Input Calendar Icon
========================= */

/* 어드민 date input 달력 아이콘 색상 */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7) brightness(1.8);
    cursor: pointer;
    opacity: 0.8;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* =========================
   1. Design Tokens
========================= */

:root {
    --bg: #000000;
    --text: #e2e2e2;
    --text-sub: #888888;
    --border: #2a2a2a;

    --space-section: 80px;
    --space-section-sm: 56px;

    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 16px;
    --font-lg: 20px;
    --font-xl: 28px;
}


/* =========================
   2. Global
========================= */

body {
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    font-size: var(--font-base);
    line-height: 1.6;
}


/* =========================
   3. Section System
========================= */

.section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
}

.section-sm {
    padding-top: var(--space-section-sm);
    padding-bottom: var(--space-section-sm);
}

.section-divider {
    border-bottom: 1px solid var(--border);
}


/* =========================
   4. Typography System
========================= */

.text-xs {
    font-size: var(--font-xs);
}

.text-sm {
    font-size: var(--font-sm);
}

.text-base {
    font-size: var(--font-base);
}

.text-lg {
    font-size: var(--font-lg);
}

.text-xl {
    font-size: var(--font-xl);
}

.text-sub {
    color: var(--text-sub);
}


/* =========================
   5. Layout Helpers
========================= */

.container-narrow {
    max-width: 720px;
    margin: 0 auto;
}

.container-wide {
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================
   6. UI Tone
========================= */

.border-soft {
    border-color: var(--border);
}

.bg-soft {
    background-color: #0a0a0a;
}


/* =========================
   7. Existing 유지
========================= */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.grain-texture {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDCkWL6_INaCNoP6lhRENowNnKVvS-Z0rjO7FjW-4aQ4WxYSeBuiMSArnM8GzIYB6ilejWHCO8xoC6IwFSoeTyFCsm9ytjfXDIrz-YDOTgsZS3WL3ZE0MsfysAlWZd1rECLX6HJdnnPlAPwZdBr05iT30XRvhc27LAb7b2s-1sOFo-PeWq3DiLS0TPVnmCeV3-vmTJTtZR7nkpnklLBh_kOwMpTMjpQuT6wMycgHm-La0mpOIQSFqsXhNd5lMME8a9cq-cQBcuDPseK);
    opacity: 0.03;
}

/* hover 효과 유지 */
.cinematic-bleed {
    filter: grayscale(100%);
    transition: filter 0.5s ease-in-out;
}

.cinematic-bleed:hover {
    filter: grayscale(0%);
}


/* =========================
   8. Quill Alignment Classes
========================= */

.ql-align-center  { text-align: center; }
.ql-align-right   { text-align: right; }
.ql-align-justify { text-align: justify; }

/* Tailwind Preflight이 img를 display:block으로 만들어 text-align이 적용 안 되므로 margin으로 보완 */
.ql-align-center img  { margin-left: auto; margin-right: auto; }
.ql-align-right  img  { margin-left: auto; margin-right: 0; }


/* =========================
   8. Prose Content (detail page)
========================= */

.prose-content {
    font-size: var(--font-base);
    line-height: 1.65;
    letter-spacing: -0.03em;
    color: #c6c6c6;
    font-weight: 300;
    word-break: normal;
    overflow-wrap: break-word;
    text-align: left;
}

.prose-content p {
    margin: 0 0 0.6em !important;
    line-height: 1.65;
}

/* ✅ 항목 및 대담 행간 */
.prose-content p.spaced-item {
    margin-top: 1.5em !important;
}
.prose-content p.spaced-item:first-child {
    margin-top: 0 !important;
}

/* 대담 화자 이름 (색상은 JS에서 인라인으로 통일 적용, 미설정 시 폴백) */
.prose-content .speaker-name {
    color: #e2e2e2;
    font-weight: 600;
    font-style: normal;
}

/* Quill 빈 단락 완전 제거 */
.prose-content p:empty,
.prose-content p > br:only-child {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
    height: 0;
    overflow: hidden;
}

.prose-content h2,
.prose-content h3 {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 700;
    color: #e2e2e2;
    margin-top: 1.5em !important;
    margin-bottom: 0.35em !important;
    letter-spacing: -0.05em;
}

.prose-content h2 { font-size: 1.5rem; line-height: 1.4; }
.prose-content h3 { font-size: 1.15rem; line-height: 1.5; }

.prose-content strong {
    color: #ffffff;
    font-weight: 600;
}

.prose-content em {
    font-style: italic;
    color: #aaabab;
}

.prose-content ul,
.prose-content ol {
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}

.prose-content li {
    margin-bottom: 0.5em;
}

.prose-content blockquote {
    border-left: 2px solid #474747;
    padding-left: 1.25em;
    color: #aaabab;
    font-style: italic;
    margin: 2em 0;
}


/* =========================
   9. Typography Scale (위계 시스템)
========================= */

/*
  L1 — 페이지 제목 (h1)
       clamp(1rem,2vw,1.5rem)  |  font-bold  |  tracking[-0.05em]  |  uppercase
       클래스: .type-page-title

  L2 — 섹션 제목 (h2)
       1.875rem(30px)  |  font-bold  |  tracking[-0.05em]  |  line-height 1.15
       클래스: .type-section-title

  L3 — 카드·서브 제목 (h3 / h4)
       1.5rem(24px)  |  font-bold  |  tracking[-0.05em]  |  line-height 1.3
       클래스: .type-card-title

  L4 — 본문
       16px  |  font-normal  |  line-height 1.65  |  letter-spacing -0.03em
       클래스: .type-body

  L5 — 보조 본문 / 캡션
       14px  |  font-normal  |  line-height 1.6  |  letter-spacing -0.02em
       클래스: .type-body-sm

  L6 — 라벨 / Eyebrow
       0.6875rem  |  tracking-[0.2em]  |  uppercase
       클래스: .type-label

  L7 — 마이크로 라벨
       0.625rem  |  tracking-[0.15em]  |  uppercase  |  font-bold
       클래스: .type-micro
*/

.type-page-title {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
}
@media (min-width: 768px) {
    .type-page-title { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
}

.type-section-title {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 1.875rem;   /* 30px */
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #ffffff;
    line-height: 1.15;
}

.type-card-title {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 1.5rem;   /* 24px */
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #ffffff;
    line-height: 1.3;
}

.type-body {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 1rem;   /* 16px */
    font-weight: 300;
    color: #c6c6c6;
    line-height: 1.65;
    letter-spacing: -0.03em;
}

.type-body-sm {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 0.875rem;   /* 14px */
    font-weight: 400;
    color: #c6c6c6;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

.type-label {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #aaabab;
}

.type-micro {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 0.625rem;   /* 10px */
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* =========================
   10. Page Header (공통 패턴)
========================= */

.page-header {
    padding-top: 8rem;   /* reduced from 10rem (~20%) */
    padding-bottom: 2.5rem; /* reduced from 3rem (~17%) */
    border-bottom: 1px solid rgba(71, 71, 71, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .page-header {
        flex-direction: row;
        align-items: flex-end;
    }
}

.page-header__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #aaabab;
    display: block;
    margin-bottom: 1rem;
}

.page-header__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
}