/* ========================================================================
     * 테마 시스템 · Dark (default) / Light
     * html[data-theme="light"] 가 붙으면 아래 override 가 적용된다.
     * Tailwind 하드코딩 색상(bg-black, text-white 등)은 별도 rule 에서 override.
     * ======================================================================== */
    :root {
        /* 골드 액센트 (다크 모드 기준) */
        --gold-primary: #BFA159;
        --gold-dark: #7A5D2E;
        --gold-light: #E6D29D;

        /* 배경 · 표면 */
        --bg:         #020202;
        --bg-alt:     #0A0A0A;
        --bg-soft:    #0F0F0F;
        --card:       rgba(255, 255, 255, 0.015);
        --card-hover: rgba(255, 255, 255, 0.03);

        /* 텍스트 */
        --text:        #FFFFFF;
        --text-body:   #D1D1D1;
        --text-muted:  #9A9A9A;
        --text-faint:  #666;

        /* 경계·그림자 */
        --border:        rgba(255, 255, 255, 0.05);
        --border-strong: rgba(255, 255, 255, 0.12);
        --gold-border:   rgba(191, 161, 89, 0.15);

        /* 효과 강도 */
        --godray-opacity: 0.2;
        --godray-blur: 160px;
        --bg-noise-opacity: 0.04;

        /* alias 유지 */
        --bg-black: var(--bg);

        /* ====== Liturgical Motion System ======
           브랜드 모션 페이스 — 의례적 느림(slow-luxe), 의도된 감속.
           모든 transition / animation 이 이 변수로 통일되어야 함. */
        --ease-liturgy: cubic-bezier(0.16, 1, 0.3, 1);     /* 의례적 등장 — 우아한 감속 */
        --ease-vellum:  cubic-bezier(0.25, 0.1, 0.25, 1);  /* 양피지에 잉크 번지듯 */
        --ease-quill:   cubic-bezier(0.86, 0, 0.07, 1);    /* 펜이 종이에 닿는 순간 */
        --ease-precise: cubic-bezier(0.4, 0, 0.2, 1);      /* UI 정밀 움직임 */

        --dur-instant:  120ms;   /* 미세 피드백 (커서 변형) */
        --dur-quick:    400ms;   /* 버튼·링크 호버 */
        --dur-base:     720ms;   /* 표준 transition */
        --dur-slow:     1200ms;  /* 섹션 reveal */
        --dur-ritual:   1800ms;  /* 시그니처 모션 (gold hairline draw 등) */
    }

    html[data-theme="light"] {
        /* 골드 — 라이트 배경에 맞춰 어두운 범위로 */
        --gold-primary: #8B6F2F;
        --gold-dark:    #5F4A1C;
        --gold-light:   #C09A4F;

        /* 배경 계열 — 크림 아이보리 */
        --bg:         #F8F3E8;
        --bg-alt:     #EFE7D5;
        --bg-soft:    #FBF7EE;
        --card:       #FFFFFF;
        --card-hover: #FDF9EC;

        /* 텍스트 — 딥 세피아 브라운 */
        --text:        #1F1611;
        --text-body:   #3A2E22;
        --text-muted:  #7A6A55;
        --text-faint:  #A79880;

        /* 경계·그림자 */
        --border:        rgba(42, 32, 21, 0.08);
        --border-strong: rgba(42, 32, 21, 0.2);
        --gold-border:   rgba(191, 161, 89, 0.3);

        /* 효과 */
        --godray-opacity: 0.12;
        --godray-blur: 140px;
        --bg-noise-opacity: 0.02;
    }

    /* 다크/라이트 공통: 부드러운 전환 */
    html, body { transition: background-color 0.4s ease, color 0.4s ease; }

    /* i18n · 언어별 URL 분리 MPA 체제로 전환.
       빌드가 다른 언어 span 을 이미 제거하므로 런타임 CSS 규칙이 필요 없음.
       (예전의 .xx-only { display:none } + html[lang="xx"] .xx-only { display: revert } 제거) */

    /* ========================================================================
     * 기울임체 마지막 글자 clipping 방지
     * · 이탤릭 글리프는 오른쪽으로 기울어져 있어 display:inline-block / overflow:hidden /
     *   background-clip:text 등의 컨텍스트에서 마지막 획이 박스 경계에 잘림.
     * · 내부 여백을 약간 확보해 잘림을 방지. (layout flow 는 em 기준이라 다른 언어에서도 안전)
     * ------------------------------------------------------------------------ */
    .italic { padding-inline-end: 0.08em; }
    /* gold-gradient 이탤릭은 background-clip:text 로 더 민감 → 추가 여유 */
    .italic.gold-gradient-text { padding-inline-end: 0.12em; }

    /* ========================================================================
     * 히어로 타이핑 효과
     * · 각 글자는 `.tw-char` 로 감싸지며, 시작 상태에선 배경에 흐릿하게(opacity 0.12)
     *   "이미 새겨져 있을" 위치가 보인다. staggered delay 로 한 글자씩 선명해지며
     *   컬러가 입혀져 "필사" 의 감각을 전한다.
     * · 마지막 글자 뒤엔 깜빡이는 caret 이 붙는다.
     * · prefers-reduced-motion 에선 즉시 최종 상태로 표시.
     * ------------------------------------------------------------------------ */
    .hero-typewrite { visibility: hidden; }
    .hero-typewrite.typewrite-ready { visibility: visible; }
    .hero-typewrite .tw-char {
        display: inline-block;
        opacity: var(--tw-start-opacity, 0.12);
        will-change: opacity, transform;
        /* 글자가 "찍히듯" 순간 입혀지는 타자기 느낌: opacity 는 거의 즉시, 짧은 scale bounce */
        animation: tw-reveal 0.14s cubic-bezier(0.2, 1.4, 0.3, 1) both;
        animation-delay: calc(var(--tw-i) * 150ms + 700ms);
        transform-origin: 50% 50%;              /* 중앙 기준으로 scale — descender 잘림 방지 */
        line-height: inherit;
        vertical-align: baseline;
    }
    /* descender (g / p / y / q) 가 line box 밖으로 삐져나가지 않게 hero 영역 자체에 여유 */
    .hero-typewrite .block { line-height: 1.2; padding-bottom: 0.15em; }
    /* 라이트 모드에선 초기 흐림 값을 올려야 크림 배경 위 어두운 글자가 보인다 */
    html[data-theme="light"] { --tw-start-opacity: 0.22; }
    /* gold-gradient-text 부모 안의 tw-char 는 stacking context 때문에 부모의 text-clip
       그라데이션이 전파되지 않는다. 각 char 에 동일 그라데이션을 직접 적용해 해결. */
    .hero-typewrite .gold-gradient-text .tw-char {
        background: linear-gradient(to bottom, var(--gold-light), var(--gold-primary), var(--gold-dark));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    /* 이탤릭 컨텍스트 안의 .tw-char 는 inline-block 이라 문자 꼬리가 자기 box 에서 잘린다.
       이탤릭 글자는 오른쪽으로만이 아니라 descender(g/p/y/q) 의 왼쪽 루프도 box 경계를 넘어감.
       양쪽 모두에 여유 + overflow visible 로 clipping 방지. */
    .hero-typewrite .italic .tw-char { padding-inline-end: 0.08em; padding-inline-start: 0.05em; }
    .hero-typewrite .gold-gradient-text .tw-char { padding-inline-end: 0.1em; padding-inline-start: 0.08em; }
    .hero-typewrite .block { overflow: visible; }
    @keyframes tw-reveal {
        0%   { opacity: var(--tw-start-opacity, 0.12); transform: scale(0.88); }
        20%  { opacity: 1; transform: scale(1.12); }  /* 즉시 컬러 + 크게 "팡" */
        60%  { opacity: 1; transform: scale(0.98); }  /* 약간 쪼그라들며 */
        100% { opacity: 1; transform: scale(1); }     /* 제자리 */
    }
    .hero-typewrite .tw-caret {
        display: inline-block;
        width: 2px;
        height: 0.85em;
        background: var(--gold-primary);
        margin-left: 0.08em;
        vertical-align: -0.08em;
        border-radius: 1px;
        box-shadow: 0 0 8px rgba(191,161,89,0.6);
        opacity: 0;
        animation: tw-caret-appear 0.2s ease-out forwards, tw-caret-blink 1.05s step-end infinite;
        /* caret 등장 시점 = 마지막 글자 reveal 중반. JS 가 --tw-total 을 주입 */
        animation-delay:
            calc((var(--tw-total, 20) - 1) * 150ms + 900ms),
            calc((var(--tw-total, 20) - 1) * 150ms + 1100ms);
    }
    @keyframes tw-caret-appear { to { opacity: 1; } }
    @keyframes tw-caret-blink { 50% { opacity: 0; } }
    @media (prefers-reduced-motion: reduce) {
        .hero-typewrite .tw-char { animation: none; opacity: 1; transform: none; filter: none; }
        .hero-typewrite .tw-caret { display: none; }
    }
    html { scroll-padding-top: 76px; }
    @media (min-width: 640px) { html { scroll-padding-top: 94px; } }
    @media (min-width: 768px) { html { scroll-padding-top: 112px; } }
    body { font-family: 'Inter', sans-serif; background-color: var(--bg-black); color: #D1D1D1; margin: 0; padding-top: 76px; overflow-x: clip; position: relative; }

    /* ====== Paper Grain Texture (전역 재질감) ======
       Body 에 일반 background-image 로 적용 (attachment: fixed 제거 — 휠 스크롤 jank 방지).
       텍스처는 콘텐츠와 함께 스크롤되지만 시각 차이는 미미하고 스크롤 반응성은 크게 향상. */
    body {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.75  0 0 0 0 0.65  0 0 0 0 0.4  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        background-size: 180px 180px;
        background-repeat: repeat;
    }

    /* ====== Signature Pattern A: Gold Hairline ======
       섹션 분리선이 골드 그라디언트. 진입 시 좌→우 draw 애니메이션.
       JS (cursor.js) 의 IntersectionObserver 가 .in-view 클래스 부여. */
    .gold-hairline {
        position: relative;
        height: 1px;
        max-width: 80rem;
        margin: 0 auto;
        background: linear-gradient(90deg, transparent 0%, rgba(191,161,89,0.05) 15%, rgba(230,210,157,0.6) 50%, rgba(191,161,89,0.05) 85%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--dur-ritual) var(--ease-quill);
    }
    .gold-hairline.in-view { transform: scaleX(1); }

    /* 섹션 자체에 가벼운 적용 — border-t 대체. 진입 시 ::before 가 좌→우 draw. */
    .section-hairline { border-top: 0 !important; }
    .section-hairline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 1.5rem;
        right: 1.5rem;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(191,161,89,0.05) 15%, rgba(230,210,157,0.55) 50%, rgba(191,161,89,0.05) 85%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--dur-ritual) var(--ease-quill);
        pointer-events: none;
    }
    .section-hairline.in-view::before { transform: scaleX(1); }

    @media (min-width: 640px) { body { padding-top: 94px; } }
    @media (min-width: 768px) { body { padding-top: 112px; } }
    .font-serif { font-family: 'Playfair Display', serif; }
    .font-kr-serif { font-family: 'Nanum Myeongjo', 'Playfair Display', serif; }

    @keyframes orbit { from { transform: rotate(0deg) translateX(var(--radius)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg); } }
    .animate-orbit { position: absolute; top: 50%; left: 50%; animation: orbit var(--speed) linear infinite var(--direction); transform-origin: center; white-space: nowrap; }

    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .animate-marquee { display: flex; width: max-content; animation: marquee 80s linear infinite; }

    @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); filter: blur(10px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
    .reveal { animation: fade-in-up 1.4s cubic-bezier(0.16, 1, 0.3, 1) both; }

    @keyframes float-dot { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.6; } }
    .float-dot { animation: float-dot 3s ease-in-out infinite; }

    .btn-luxury { position: relative; overflow: hidden; transition: transform var(--dur-base) var(--ease-liturgy), box-shadow var(--dur-base) var(--ease-liturgy), filter var(--dur-base) var(--ease-liturgy), background var(--dur-base) var(--ease-vellum), border-color var(--dur-base) var(--ease-vellum), color var(--dur-base) var(--ease-vellum); border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; height: 44px; padding: 0 24px; }
    .btn-primary { background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark)); color: #000 !important; box-shadow: 0 8px 24px rgba(122, 93, 46, 0.3); }
    .btn-primary:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 18px 44px rgba(122, 93, 46, 0.55), 0 0 0 1px rgba(230, 210, 157, 0.4) inset; filter: brightness(1.08); }
    .btn-primary:active { transform: translateY(-1px) scale(0.99); transition-duration: var(--dur-instant); }
    .btn-secondary { border: 1px solid rgba(191, 161, 89, 0.3); background: rgba(255, 255, 255, 0.02); color: var(--gold-primary); }
    .btn-secondary:hover { background: rgba(191, 161, 89, 0.08); border-color: var(--gold-primary); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(191, 161, 89, 0.18); }
    .btn-secondary:active { transform: translateY(-1px); transition-duration: var(--dur-instant); }
    .btn-hero { height: 52px; padding: 0 36px; font-size: 11px; letter-spacing: 0.15em; }

    /* Gold Foil — 멀티-스톱 그라디언트로 금속 shine 효과 (정적, 애니메이션 없음) */
    .gold-gradient-text {
        background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-primary) 30%, var(--gold-light) 50%, var(--gold-dark) 70%, var(--gold-primary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .nav-menu-link { position: relative; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #6b6b6b; padding: 8px 2px; transition: color var(--dur-quick) var(--ease-vellum); cursor: pointer; white-space: nowrap; }
    .nav-menu-link:hover { color: #fff; }
    .nav-menu-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-primary), transparent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-base) var(--ease-quill); }
    .nav-menu-link:hover::after { transform: scaleX(1); }

    .content-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-top: 2.5rem; padding-bottom: 4rem; cursor: grab; scroll-behavior: smooth; }
    .content-scroll::-webkit-scrollbar { display: none; }
    .content-card { flex: 0 0 72%; scroll-snap-align: center; margin-right: 1.2rem; transition: transform var(--dur-base) var(--ease-liturgy); cursor: pointer; }
    @media (min-width: 768px) { .content-card { flex: 0 0 21rem; margin-right: 1.5rem; } }
    .content-card .content-img-container { transition: border-color var(--dur-base) var(--ease-vellum), box-shadow var(--dur-base) var(--ease-liturgy); }
    .content-card:hover { transform: translateY(-6px); }
    .content-card:hover .content-img-container { border-color: rgba(191,161,89,0.35); box-shadow: 0 24px 56px rgba(0,0,0,0.45), 0 0 0 1px rgba(230, 210, 157, 0.18) inset; }
    .content-card-img svg { transition: transform var(--dur-slow) var(--ease-liturgy); }
    .content-card:hover .content-card-img svg { transform: scale(1.03); }

    .content-img-container { background: rgba(255, 255, 255, 0.03); border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; margin-bottom: 1.5rem; position: relative; aspect-ratio: 1 / 1; }
    .content-card-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
    .content-card-img svg { width: 100%; height: 100%; display: block; }
    .content-card-film       { background: radial-gradient(ellipse at 30% 30%, #1a1208 0%, #000 70%); }
    .content-card-art        { background: radial-gradient(ellipse at 70% 30%, #1a1510 0%, #000 75%); }
    .content-card-place      { background: radial-gradient(ellipse at 50% 60%, #0c1a1e 0%, #000 75%); }
    .content-card-story      { background: radial-gradient(ellipse at 20% 80%, #1d1218 0%, #000 75%); }
    .content-card-music      { background: radial-gradient(ellipse at 60% 40%, #1a1408 0%, #000 75%); }
    .content-card-literature { background: radial-gradient(ellipse at 40% 50%, #14110a 0%, #000 75%); }
    .content-card-meta { position: absolute; top: 20px; left: 20px; font-size: 9px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-primary); opacity: 0.7; }

    .price-card { background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(191, 161, 89, 0.1); border-radius: 24px; transition: all 0.4s ease; position: relative; overflow: hidden; }
    .price-card:hover { border-color: var(--gold-primary); background: rgba(255, 255, 255, 0.03); transform: translateY(-8px); }
    .price-card.featured { border-color: var(--gold-primary); background: rgba(191, 161, 89, 0.05); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }

    .faq-item { border: 1px solid rgba(191, 161, 89, 0.1); background: rgba(255, 255, 255, 0.01); border-radius: 16px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); margin-bottom: 12px; }
    .faq-item.active { border-color: rgba(191, 161, 89, 0.4); background: rgba(191, 161, 89, 0.03); }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out, opacity 0.3s ease; opacity: 0; padding: 0 1.5rem; }
    .faq-item.active .faq-answer { max-height: 600px; opacity: 1; padding-bottom: 1.5rem; }
    .faq-icon { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
    .faq-item.active .faq-icon { transform: rotate(180deg); color: var(--gold-primary); }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #020202; }
    ::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

    /* MPA 전환 후: 모든 페이지는 기본 노출. SPA 시절의 .page { display:none } 규칙 제거.
       .active 는 진입 애니메이션만 담당. */
    .page.active { animation: fade-in-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }

    .detail-tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border: 1px solid rgba(191, 161, 89, 0.2); background: rgba(191, 161, 89, 0.04); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(191, 161, 89, 0.8); }
    .detail-item { background: rgba(255,255,255,0.015); border: 1px solid rgba(191, 161, 89, 0.08); border-radius: 24px; padding: 2.5rem 2rem; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
    .detail-item:hover { border-color: rgba(191, 161, 89, 0.3); background: rgba(255,255,255,0.03); transform: translateY(-4px); }

    .verse-panel { background: rgba(191, 161, 89, 0.04); border-left: 2px solid var(--gold-primary); padding: 1.5rem 1.75rem; border-radius: 4px; margin: 1.5rem 0; }
    .verse-ref { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-primary); margin-bottom: 0.75rem; }

    .map-wrap { position: relative; aspect-ratio: 16/9; background: radial-gradient(ellipse at center, #0a0a0c 0%, #020202 80%); border-radius: 24px; border: 1px solid rgba(191, 161, 89, 0.1); overflow: hidden; }
    .map-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .map-pin { position: absolute; transform: translate(-50%, -100%); cursor: pointer; z-index: 5; }
    .map-pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold-primary); box-shadow: 0 0 0 4px rgba(191,161,89,0.15), 0 0 20px rgba(191,161,89,0.5); transition: all 0.3s; }
    .map-pin:hover .map-pin-dot { transform: scale(1.4); box-shadow: 0 0 0 6px rgba(191,161,89,0.25), 0 0 25px rgba(191,161,89,0.8); }
    .map-pin.active .map-pin-dot { background: #fff; transform: scale(1.4); box-shadow: 0 0 0 6px rgba(255,255,255,0.1), 0 0 30px rgba(191,161,89,0.9); }
    .map-pin-label { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-primary); white-space: nowrap; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); padding: 4px 10px; border-radius: 4px; border: 1px solid rgba(191,161,89,0.2); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
    .map-pin:hover .map-pin-label, .map-pin.active .map-pin-label { opacity: 1; }
    /* .map-info 는 .map-wrap 바깥, 공통 부모 .map-section 안의 형제.
       데스크톱에선 지도 좌하단에 absolute 로 겹쳐 보이게 하고,
       모바일에선 지도 아래로 자연스럽게 흐르게 한다. */
    .map-section { position: relative; }
    .map-section .map-info { background: rgba(10,10,10,0.85); backdrop-filter: blur(14px); border: 1px solid rgba(191,161,89,0.2); border-radius: 16px; padding: 28px; }
    @media (min-width: 768px) {
        .map-section .map-info { position: absolute; bottom: 24px; left: 24px; max-width: 440px; }
    }
    @media (max-width: 767px) {
        .map-section .map-info { margin-top: 16px; }
    }

    .story-detail-card { background: rgba(255,255,255,0.015); border: 1px solid rgba(191, 161, 89, 0.1); border-radius: 28px; padding: 3rem 2.5rem; position: relative; overflow: hidden; }
    .story-detail-card::before { content: '"'; position: absolute; top: -20px; left: 30px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 200px; line-height: 1; color: var(--gold-primary); opacity: 0.08; }
    @media (max-width: 640px) { .story-detail-card { padding: 2rem 1.5rem; } }

    .back-link { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #6b6b6b; transition: all 0.4s; cursor: pointer; padding: 8px 0; }
    .back-link:hover { color: var(--gold-primary); gap: 16px; }

    /* Blog / Article styling */
    .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: #555; }
    .breadcrumb a, .breadcrumb span.crumb { cursor: pointer; transition: color 0.3s; }
    .breadcrumb a:hover, .breadcrumb span.crumb:hover { color: var(--gold-primary); }
    .breadcrumb .sep { color: #333; }
    .breadcrumb .current { color: var(--gold-primary); }

    .article-meta { display: flex; flex-wrap: wrap; gap: 24px; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #666; padding: 16px 0; border-top: 1px solid rgba(191,161,89,0.1); border-bottom: 1px solid rgba(191,161,89,0.1); }
    .article-meta span { display: inline-flex; align-items: center; gap: 8px; }
    .article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-primary); opacity: 0.6; }

    .prose-article { color: #b8b8b8; font-size: 16px; line-height: 1.85; font-weight: 300; }
    .prose-article p { margin-bottom: 1.5rem; }
    .prose-article h2 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 400; color: #fff; margin: 3rem 0 1.25rem; line-height: 1.3; }
    .prose-article h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 400; color: #fff; margin: 2.5rem 0 1rem; line-height: 1.35; }
    .prose-article blockquote { border-left: 2px solid var(--gold-primary); padding: 1rem 1.5rem; margin: 2rem 0; background: rgba(191,161,89,0.04); font-style: italic; color: #d4d4d4; font-family: 'Playfair Display', serif; font-size: 18px; }
    .prose-article strong { color: #fff; font-weight: 600; }
    .prose-article em { color: var(--gold-light); }
    .prose-article ul { margin: 1.5rem 0; padding-left: 1.5rem; list-style: none; }
    .prose-article ul li { position: relative; padding-left: 1.25rem; margin-bottom: 0.75rem; }
    .prose-article ul li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 6px; height: 1px; background: var(--gold-primary); }
    .prose-article a { color: var(--gold-primary); text-decoration: underline; text-decoration-color: rgba(191,161,89,0.3); text-underline-offset: 4px; }
    .prose-article a:hover { color: var(--gold-light); text-decoration-color: var(--gold-primary); }
    @media (max-width: 640px) { .prose-article { font-size: 15px; } .prose-article h2 { font-size: 24px; } .prose-article h3 { font-size: 19px; } .prose-article blockquote { font-size: 16px; padding: 0.75rem 1.25rem; } }

    .article-hero { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16/9; background: linear-gradient(135deg, #0a0a0a 0%, #1a1408 50%, #000 100%); border: 1px solid rgba(191,161,89,0.12); }
    .article-hero svg,
    .article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @media (max-width: 640px) { .article-hero { aspect-ratio: 4/3; border-radius: 18px; } }

    .post-card { display: block; background: rgba(255,255,255,0.015); border: 1px solid rgba(191,161,89,0.1); border-radius: 20px; overflow: hidden; transition: transform var(--dur-base) var(--ease-liturgy), border-color var(--dur-base) var(--ease-vellum), background var(--dur-base) var(--ease-vellum), box-shadow var(--dur-base) var(--ease-liturgy); cursor: pointer; }
    .post-card:hover { border-color: rgba(191,161,89,0.45); background: rgba(255,255,255,0.03); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(230, 210, 157, 0.15) inset; }
    .post-card-thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, #0a0a0a, #1a1408); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .post-card-thumb svg, .post-card-thumb img { width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease-liturgy); }
    .post-card:hover .post-card-thumb svg, .post-card:hover .post-card-thumb img { transform: scale(1.04); }
    .post-card-body { padding: 1.5rem 1.5rem 1.75rem; }

    .share-bar { display: flex; gap: 10px; align-items: center; padding: 1.25rem 0; border-top: 1px solid rgba(191,161,89,0.08); border-bottom: 1px solid rgba(191,161,89,0.08); margin: 2.5rem 0; }
    .share-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(191,161,89,0.2); border-radius: 50%; color: #888; transition: all 0.3s; cursor: pointer; background: transparent; padding: 0; }
    .share-btn svg { width: 15px; height: 15px; display: block; }
    .share-btn:hover { border-color: var(--gold-primary); color: var(--gold-primary); transform: translateY(-2px); }

    /* ====== Showcase (Designed for Insight) ====== */
    .showcase-scroll, .discover-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-top: 2.5rem; padding-bottom: 4rem; cursor: grab; scroll-behavior: smooth; }
    .showcase-scroll::-webkit-scrollbar, .discover-scroll::-webkit-scrollbar { display: none; }

    /* 가로 스크롤 컨테이너 — max-w-7xl 안에 바운드, 양쪽 대칭 정렬.
       카드 너비 22rem (352px) 고정 + 자연 peek 26% 로 "더 있다" 신호 전달. */

    .showcase-card { flex: 0 0 72%; scroll-snap-align: center; margin-right: 1.2rem; transition: transform var(--dur-base) var(--ease-liturgy); }
    @media (min-width: 768px) { .showcase-card { flex: 0 0 22rem; margin-right: 1.75rem; } }
    .showcase-card .showcase-img-container { transition: border-color var(--dur-base) var(--ease-vellum), box-shadow var(--dur-base) var(--ease-liturgy); }
    .showcase-card:hover { transform: translateY(-4px); }
    .showcase-card:hover .showcase-img-container { border-color: rgba(191,161,89,0.3); box-shadow: 0 20px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(230, 210, 157, 0.15) inset; }

    .showcase-img-container { aspect-ratio: 1 / 1.5; background: rgba(255,255,255,0.02); border-radius: 28px; border: 1px solid rgba(191,161,89,0.1); overflow: hidden; margin-bottom: 1.25rem; position: relative; display: flex; align-items: center; justify-content: center; padding: 44px 12px 16px; box-sizing: border-box; }
    .showcase-img-container svg { width: 100%; height: 100%; display: block; }
    .showcase-img-1 { background: radial-gradient(ellipse at 50% 30%, #1a1408 0%, #000 75%); }
    .showcase-img-2 { background: radial-gradient(ellipse at 50% 40%, #0f1418 0%, #000 75%); }
    .showcase-img-3 { background: radial-gradient(ellipse at 50% 50%, #141018 0%, #000 75%); }
    .showcase-img-4 { background: radial-gradient(ellipse at 50% 60%, #101010 0%, #000 75%); }
    .showcase-meta { position: absolute; top: 20px; left: 24px; font-size: 9px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold-primary); opacity: 0.7; z-index: 2; }

    /* ====== Features (Exceptional Capability) ====== */
    .feature-row { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; margin-bottom: 6rem; }
    @media (min-width: 768px) { .feature-row { grid-template-columns: 1fr 1fr; gap: 6rem; margin-bottom: 9rem; } }
    .feature-row:last-child { margin-bottom: 0; }
    .feature-frame { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #0a0a0a 0%, #1a1408 55%, #000 100%); border: 1px solid rgba(191,161,89,0.12); padding: 1.25rem; display: flex; align-items: center; justify-content: center; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
    .feature-frame:hover { transform: scale(1.02); }
    .feature-frame svg { width: 100%; height: 100%; display: block; border-radius: 18px; }
    .feature-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold-primary); opacity: 0.7; margin-bottom: 1rem; }
    .feature-title { font-family: 'Playfair Display', serif; font-size: clamp(22px, 3vw, 32px); font-weight: 400; color: #fff; margin-bottom: 1.25rem; line-height: 1.25; }
    .feature-desc { color: #9a9a9a; font-size: 15px; line-height: 1.85; font-weight: 300; }
    @media (min-width: 768px) { .feature-desc { font-size: 16px; } }

    /* ====== Discover More ====== */
    .discover-card { flex: 0 0 78%; scroll-snap-align: center; margin-right: 1.2rem; transition: transform var(--dur-base) var(--ease-liturgy); cursor: pointer; }
    @media (min-width: 768px) { .discover-card { flex: 0 0 22rem; margin-right: 1.75rem; } }
    .discover-card .discover-img-container { transition: border-color var(--dur-base) var(--ease-vellum), box-shadow var(--dur-base) var(--ease-liturgy); }
    .discover-card:hover { transform: translateY(-6px); }
    .discover-card:hover .discover-img-container { border-color: rgba(191,161,89,0.35); box-shadow: 0 22px 52px rgba(0,0,0,0.5), 0 0 0 1px rgba(230, 210, 157, 0.18) inset; }

    .discover-img-container { aspect-ratio: 1.2 / 1; border-radius: 24px; border: 1px solid rgba(191,161,89,0.1); overflow: hidden; margin-bottom: 1.25rem; position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem; }
    .discover-img-container svg { width: 72%; height: 72%; opacity: 0.9; }
    .discover-card-bg-1 { background: linear-gradient(135deg, #1a1408 0%, #000 100%); }
    .discover-card-bg-2 { background: linear-gradient(135deg, #0c1a1e 0%, #000 100%); }
    .discover-card-bg-3 { background: linear-gradient(135deg, #1d1218 0%, #000 100%); }
    .discover-card-bg-4 { background: linear-gradient(135deg, #1a1510 0%, #000 100%); }
    .discover-card-bg-5 { background: linear-gradient(135deg, #10141a 0%, #000 100%); }

    .discover-nav-btn { width: 44px; height: 44px; border-radius: 9999px; border: 1px solid rgba(191,161,89,0.2); background: rgba(255,255,255,0.02); color: #bfa159; display: inline-flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); cursor: pointer; }
    .discover-nav-btn:hover { border-color: var(--gold-primary); background: rgba(191,161,89,0.08); color: #fff; transform: translateY(-2px); }

    /* ====== Luxury Footer ====== */
    .site-footer { position: relative; z-index: 20; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.7) 100%); padding: 96px 0 0; margin-top: 120px; overflow: hidden; }
    .site-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1200px, 90%); height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(191,161,89,0.4) 50%, transparent 100%); }
    .site-footer::after { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 120px; height: 1px; background: var(--gold-primary); box-shadow: 0 0 24px rgba(191,161,89,0.6); }

    .footer-inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
    @media (max-width: 640px) { .footer-inner { padding: 0 24px; } }

    .footer-editorial { text-align: center; padding: 32px 0 72px; border-bottom: 1px solid rgba(191,161,89,0.08); margin-bottom: 80px; }
    .footer-editorial .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-primary); opacity: 0.7; margin-bottom: 20px; }
    .footer-editorial .line { font-family: 'Playfair Display', serif; font-weight: 300; font-size: clamp(28px, 4vw, 44px); line-height: 1.25; color: #EAE4D4; letter-spacing: -0.01em; max-width: 720px; margin: 0 auto; }
    .footer-editorial .line em { font-style: italic; background: linear-gradient(to bottom, var(--gold-light), var(--gold-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    @media (max-width: 640px) { .footer-editorial { padding: 16px 0 48px; margin-bottom: 56px; } }

    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 64px; }
    @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; } .footer-grid > .footer-brand { grid-column: 1 / -1; max-width: 520px; } }
    @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; padding-bottom: 48px; } }

    .footer-brand .brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
    .footer-brand .brand-mark { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #1a1408, #000); border: 1px solid rgba(191,161,89,0.25); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 12px rgba(191,161,89,0.08); }
    .footer-brand .brand-mark span { font-family: 'Playfair Display', serif; font-style: italic; color: var(--gold-primary); font-size: 20px; }
    .footer-brand .brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
    .footer-brand .brand-name { display: inline-flex; flex-direction: column; align-items: flex-start; font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 500; letter-spacing: 0.01em; color: #D6D3CC; }
    .footer-brand .brand-name em { display: inline-block; font-family: 'Inter', sans-serif; font-style: normal; font-size: 9px; font-weight: 500; letter-spacing: 0.32em; color: #6a6a6a; text-transform: uppercase; margin-top: 6px; }
    .footer-brand p { font-size: 13px; line-height: 1.75; color: #7a7a7a; font-weight: 300; max-width: 320px; margin-bottom: 28px; }

    .footer-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid rgba(191,161,89,0.2); border-radius: 999px; background: rgba(191,161,89,0.04); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; }
    .footer-badge:hover { border-color: var(--gold-primary); background: rgba(191,161,89,0.08); transform: translateY(-2px); }
    .footer-badge svg { width: 16px; height: 16px; color: var(--gold-primary); }
    .footer-badge .top { display: block; font-size: 8px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #888; line-height: 1; margin-bottom: 3px; }
    .footer-badge .bottom { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #E6D29D; line-height: 1; }

    .footer-col h5 { font-size: 10px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold-primary); opacity: 0.7; margin-bottom: 24px; position: relative; padding-bottom: 14px; }
    .footer-col h5::after { content: ''; position: absolute; bottom: 0; left: 0; width: 20px; height: 1px; background: rgba(191,161,89,0.3); }

    .footer-col ul { list-style: none; padding: 0; margin: 0; }
    .footer-col ul li { margin-bottom: 12px; }
    .footer-col ul a, .footer-col ul .link { font-size: 13px; color: #8a8a8a; font-weight: 300; letter-spacing: 0.02em; transition: all 0.35s ease; cursor: pointer; display: inline-block; position: relative; text-decoration: none; }
    .footer-col ul a:hover, .footer-col ul .link:hover { color: var(--gold-light); transform: translateX(3px); }
    .footer-col ul a::before, .footer-col ul .link::before { content: ''; position: absolute; left: -14px; top: 50%; width: 6px; height: 1px; background: var(--gold-primary); opacity: 0; transition: opacity 0.35s; }
    .footer-col ul a:hover::before, .footer-col ul .link:hover::before { opacity: 1; }

    .footer-contact { font-size: 12px; color: #666; font-weight: 300; line-height: 1.8; }
    .footer-contact a { color: #8a8a8a; transition: color 0.3s; }
    .footer-contact a:hover { color: var(--gold-primary); }
    .footer-contact .label { font-size: 9px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #555; display: block; margin-bottom: 4px; margin-top: 14px; }
    .footer-contact .label:first-child { margin-top: 0; }

    .footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
    .footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(191,161,89,0.15); display: flex; align-items: center; justify-content: center; color: #777; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); background: rgba(255,255,255,0.01); }
    .footer-social a:hover { border-color: var(--gold-primary); color: var(--gold-primary); background: rgba(191,161,89,0.06); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(191,161,89,0.15); }
    .footer-social a i, .footer-social a svg { width: 15px; height: 15px; }

    .footer-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(191,161,89,0.15) 15%, rgba(191,161,89,0.15) 85%, transparent 100%); margin: 0; }

    .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding: 36px 0 48px; }
    .footer-copy { font-size: 11px; color: #444; letter-spacing: 0.12em; font-weight: 400; }
    .footer-copy em { font-style: italic; color: #666; font-family: 'Playfair Display', serif; }
    .footer-meta { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
    .footer-meta span, .footer-meta a { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #555; font-weight: 600; transition: color 0.3s; }
    .footer-meta a { cursor: pointer; text-decoration: none; }
    .footer-meta a:hover { color: var(--gold-primary); }
    .footer-meta .pill { padding: 5px 12px; border: 1px solid rgba(191,161,89,0.12); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: #666; }
    .footer-meta .pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-primary); box-shadow: 0 0 6px var(--gold-primary); animation: float-dot 3s ease-in-out infinite; }

    @media (max-width: 640px) {
        .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 0 36px; }
        .footer-meta { gap: 14px; }
    }

    .mobile-menu { position: fixed; inset: 0; background: rgba(2,2,2,0.98); backdrop-filter: blur(20px); z-index: 100; display: none; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 80px) 28px calc(env(safe-area-inset-bottom, 0px) + 40px); overflow-y: auto; }
    .mobile-menu.open { display: flex; }
    .mobile-menu-link { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 400; color: #fff; padding: 18px 0; border-bottom: 1px solid rgba(191,161,89,0.08); cursor: pointer; display: block; text-decoration: none; }
    .mobile-menu-link .meta { display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-primary); margin-top: 4px; }
    .mobile-menu-heading { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-primary); opacity: 0.6; padding: 4px 0 14px; }
    @media (min-width: 640px) { .mobile-menu-link { font-size: 28px; } }

    /* ========================================================================
     * Topic chip (Pillar-Cluster · category page / tag links)
     * ------------------------------------------------------------------------ */
    .topic-chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .topic-chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px; border-radius: 999px;
        background: rgba(191,161,89,0.05); border: 1px solid rgba(191,161,89,0.18);
        font-size: 11px; font-weight: 600; color: #bdbdbd;
        letter-spacing: 0.04em; text-decoration: none;
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .topic-chip:hover { background: rgba(191,161,89,0.1); border-color: var(--gold-primary); color: #fff; }
    .topic-chip-count { font-size: 10px; color: var(--gold-primary); opacity: 0.7; }

    /* ========================================================================
     * Nav · Blog 드롭다운 (데스크톱)
     * ------------------------------------------------------------------------ */
    .nav-dropdown { position: relative; }
    .nav-menu-parent { cursor: pointer; text-decoration: none; }
    .nav-dropdown-panel {
        position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
        min-width: 240px; background: rgba(10,10,10,0.96); border: 1px solid rgba(191,161,89,0.15);
        border-radius: 14px; padding: 8px; box-shadow: 0 20px 48px rgba(0,0,0,0.55);
        backdrop-filter: blur(14px);
        opacity: 0; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
        z-index: 60;
    }
    .nav-dropdown:hover > .nav-dropdown-panel,
    .nav-dropdown:focus-within > .nav-dropdown-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
    .nav-dropdown-item {
        display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 10px;
        color: #bdbdbd; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
        transition: background-color 0.3s ease, color 0.3s ease; text-decoration: none;
    }
    .nav-dropdown-item:hover { background: rgba(191,161,89,0.08); color: #fff; }
    .nav-dropdown-index { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.3em; color: var(--gold-primary); opacity: 0.65; min-width: 22px; }
    .nav-dropdown-label { flex: 1; }
    .nav-menu-link[aria-current="page"],
    .nav-dropdown-item[aria-current="page"] { color: #fff; }
    .nav-menu-link[aria-current="page"]::after { transform: scaleX(1); }

    /* ========================================================================
     * Blog landing · 허브 카드 (4 카테고리)
     * ------------------------------------------------------------------------ */
    .blog-hub-card {
        display: flex; flex-direction: column; overflow: hidden;
        background: rgba(255,255,255,0.015); border: 1px solid rgba(191,161,89,0.1);
        border-radius: 28px; text-decoration: none; color: inherit;
        transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease, background-color 0.4s ease;
    }
    .blog-hub-card:hover { transform: translateY(-4px); border-color: rgba(191,161,89,0.35); background: rgba(255,255,255,0.03); }
    .blog-hub-thumb { position: relative; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .blog-hub-thumb svg { width: 100%; height: 100%; display: block; }
    .blog-hub-index { position: absolute; top: 18px; left: 22px; font-size: 9px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold-primary); opacity: 0.7; }
    .blog-hub-body { padding: 1.75rem 1.75rem 2rem; }
    .blog-hub-title { font-family: 'Playfair Display', serif; font-size: clamp(22px, 2.5vw, 28px); font-weight: 400; color: #fff; margin-bottom: 0.75rem; line-height: 1.2; }
    .blog-hub-desc { font-size: 14px; line-height: 1.75; color: #8f8f8f; font-weight: 300; margin-bottom: 1.25rem; }
    .blog-hub-more { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-primary); transition: gap 0.35s ease; }
    .blog-hub-card:hover .blog-hub-more { gap: 14px; }

    /* ========================================================================
     * 모바일 성능 · blur 반경 축소 / 무한 애니메이션 비활성
     * god-rays 의 blur(160px) 은 iOS Safari compositor 에 큰 부담이라 조정.
     * ------------------------------------------------------------------------ */
    @media (max-width: 767px) {
        #god-rays { filter: blur(60px); opacity: 0.12 !important; }
        /* 궤도는 initOrbit 이 렌더 자체를 생략. 안전망으로 CSS 로도 차단. */
        #orbit-layer { display: none; }
        /* marquee 는 유지하되 속도를 낮춰 부담 경감 */
        .animate-marquee { animation-duration: 140s; }
        /* nav / mobile-menu backdrop-blur 강도 경감 */
        #site-nav { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
        .mobile-menu { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    }

    /* 감속 모드 존중 */
    @media (prefers-reduced-motion: reduce) {
        .animate-marquee, .animate-orbit, .float-dot, .reveal { animation: none !important; }
        .reveal { opacity: 1 !important; filter: none !important; transform: none !important; }
        #god-rays { display: none; }
        #orbit-layer { display: none; }
    }

    /* ========================================================================
     * 라이트 모드 · Tailwind 하드코딩 색상 override
     * 다크 모드 기준으로 쓰인 유틸을 라이트에서 재정의.
     * ------------------------------------------------------------------------ */
    html[data-theme="light"] body { background-color: var(--bg); color: var(--text-body); }
    html[data-theme="light"] #mystic-bg { opacity: 0.6; mix-blend-mode: multiply; }

    html[data-theme="light"] .bg-black\/60,
    html[data-theme="light"] .bg-black\/20 { background-color: rgba(248, 243, 232, 0.75); }
    html[data-theme="light"] .bg-black { background-color: var(--bg); }
    html[data-theme="light"] .bg-\[\#0A0A0A\] { background-color: var(--card); }
    html[data-theme="light"] .bg-white\/\[0\.015\],
    html[data-theme="light"] .bg-white\/\[0\.01\],
    html[data-theme="light"] .bg-white\/\[0\.02\],
    html[data-theme="light"] .bg-white\/\[0\.03\] { background-color: var(--card); }
    html[data-theme="light"] .bg-white\/5,
    html[data-theme="light"] .bg-white\/10 { background-color: rgba(42, 32, 21, 0.04); }

    html[data-theme="light"] .text-white { color: var(--text); }
    html[data-theme="light"] .text-gray-300,
    html[data-theme="light"] .text-gray-200 { color: var(--text-body); }
    html[data-theme="light"] .text-gray-400 { color: var(--text-body); }
    html[data-theme="light"] .text-gray-500 { color: var(--text-muted); }
    html[data-theme="light"] .text-gray-600,
    html[data-theme="light"] .text-gray-700 { color: var(--text-faint); }

    html[data-theme="light"] .border-white\/5,
    html[data-theme="light"] .border-white\/10,
    html[data-theme="light"] .border-white\/\[0\.04\],
    html[data-theme="light"] .border-white\/\[0\.05\],
    html[data-theme="light"] .border-white\/\[0\.08\] { border-color: var(--border); }

    html[data-theme="light"] .content-card-film,
    html[data-theme="light"] .content-card-art,
    html[data-theme="light"] .content-card-place,
    html[data-theme="light"] .content-card-story,
    html[data-theme="light"] .showcase-img-1,
    html[data-theme="light"] .showcase-img-2,
    html[data-theme="light"] .showcase-img-3,
    html[data-theme="light"] .showcase-img-4,
    html[data-theme="light"] .discover-card-bg-1,
    html[data-theme="light"] .discover-card-bg-2,
    html[data-theme="light"] .discover-card-bg-3,
    html[data-theme="light"] .discover-card-bg-4,
    html[data-theme="light"] .discover-card-bg-5,
    html[data-theme="light"] .content-card-music,
    html[data-theme="light"] .content-card-literature,
    html[data-theme="light"] .blog-hub-thumb.content-card-music,
    html[data-theme="light"] .blog-hub-thumb.content-card-literature,
    html[data-theme="light"] .blog-hub-thumb.content-card-film,
    html[data-theme="light"] .blog-hub-thumb.content-card-art,
    html[data-theme="light"] .blog-hub-thumb.content-card-place,
    html[data-theme="light"] .blog-hub-thumb.content-card-story {
        background: linear-gradient(135deg, #F5EAD0 0%, #E6D29D 100%);
    }

    html[data-theme="light"] .article-hero,
    html[data-theme="light"] .post-card-thumb {
        background: linear-gradient(135deg, #F5EAD0 0%, #E6D29D 100%) !important;
        border: 1px solid var(--gold-border);
    }
    /* 아티클 hero · teaser card SVG 내 다크 그라데이션 rect 를 숨겨 라이트 배경이 드러나게 */
    html[data-theme="light"] .article-hero svg rect[fill^="url"],
    html[data-theme="light"] .post-card-thumb svg rect[fill^="url"],
    html[data-theme="light"] .post-card-thumb svg rect[fill="#1a0f12"],
    html[data-theme="light"] .post-card-thumb svg rect[fill="#0a1218"],
    html[data-theme="light"] .content-card-img svg rect[fill^="url"],
    html[data-theme="light"] .showcase-img-container svg rect[fill^="url"] { opacity: 0; }
    html[data-theme="light"] .feature-frame {
        background: var(--card) !important;
        border: 1px solid var(--border);
    }

    html[data-theme="light"] #site-nav {
        background: rgba(248, 243, 232, 0.85) !important;
        border-bottom-color: var(--border);
    }
    /* Nav 로고 컨테이너 (from-[#1a1408] to-black border-[#BFA159]/20) → 라이트 전용 override */
    html[data-theme="light"] #site-nav .bg-gradient-to-br.from-\[\#1a1408\] {
        background: linear-gradient(135deg, #FFF9E6, #F3E4B8) !important;
        border-color: var(--gold-primary) !important;
    }
    html[data-theme="light"] #site-nav .bg-\[\#BFA159\] { background-color: rgba(191, 161, 89, 0.4) !important; }

    /* "Every detail, built for writing" 섹션 — iPad 시뮬레이션 프레임 (from-[#0d0906]) 라이트 대응 */
    html[data-theme="light"] .bg-gradient-to-br.from-\[\#0d0906\] {
        background: linear-gradient(135deg, #F5EAD0 0%, #FDF9EC 50%, #F3E9CE 100%) !important;
    }
    /* 외부 프레임 (bg-black/40 둘러싼 카드) */
    html[data-theme="light"] .bg-black\/40 {
        background-color: rgba(191, 161, 89, 0.08) !important;
    }
    /* 프레임 내부 verse 카드 텍스트 — 어두운 gold 로 대비 확보 */
    html[data-theme="light"] .bg-gradient-to-br.from-\[\#0d0906\] .text-\[\#BFA159\] { color: var(--gold-dark) !important; }
    html[data-theme="light"] .bg-gradient-to-br.from-\[\#0d0906\] .text-\[\#BFA159\]\/60 { color: var(--gold-primary) !important; opacity: 0.75; }
    html[data-theme="light"] .bg-gradient-to-br.from-\[\#0d0906\] .text-white { color: var(--text) !important; }
    html[data-theme="light"] .mobile-menu { background: rgba(248, 243, 232, 0.98); }
    html[data-theme="light"] .site-footer {
        background: linear-gradient(180deg, transparent 0%, rgba(239, 231, 213, 0.5) 30%, rgba(239, 231, 213, 0.8) 100%);
    }
    html[data-theme="light"] .footer-editorial .line { color: var(--text); }
    html[data-theme="light"] .footer-col ul a,
    html[data-theme="light"] .footer-col ul .link { color: var(--text-muted); }
    html[data-theme="light"] .footer-col ul a:hover,
    html[data-theme="light"] .footer-col ul .link:hover { color: var(--gold-dark); }
    html[data-theme="light"] .footer-brand p,
    html[data-theme="light"] .footer-contact { color: var(--text-muted); }
    html[data-theme="light"] .footer-copy { color: var(--text-faint); }
    html[data-theme="light"] .footer-meta span,
    html[data-theme="light"] .footer-meta a { color: var(--text-faint); }
    html[data-theme="light"] .footer-badge {
        background: var(--card);
        border-color: var(--gold-border);
    }
    html[data-theme="light"] .footer-badge .top { color: var(--text-muted); }
    html[data-theme="light"] .footer-badge .bottom { color: var(--gold-dark); }
    html[data-theme="light"] .footer-social a {
        background: var(--card);
        border-color: var(--border);
        color: var(--text-muted);
    }
    html[data-theme="light"] .footer-social a:hover { border-color: var(--gold-primary); color: var(--gold-dark); }
    html[data-theme="light"] .footer-brand .brand-mark {
        background: linear-gradient(135deg, #FFF9E6, #F3E4B8);
        border-color: var(--gold-primary);
    }
    html[data-theme="light"] .footer-brand .brand-name { color: var(--text); }
    html[data-theme="light"] .footer-brand .brand-name em { color: var(--text-faint); }

    html[data-theme="light"] .btn-secondary {
        background: var(--card);
        color: var(--gold-dark);
        border-color: var(--border-strong);
    }
    html[data-theme="light"] .btn-secondary:hover {
        background: var(--card-hover);
        border-color: var(--gold-primary);
        color: var(--text);
    }
    html[data-theme="light"] .btn-primary { color: #FFF9E6 !important; }

    html[data-theme="light"] .nav-menu-link { color: var(--text-muted); }
    html[data-theme="light"] .nav-menu-link:hover { color: var(--text); }
    html[data-theme="light"] .nav-dropdown-panel {
        background: rgba(251, 247, 238, 0.98);
        border-color: var(--border-strong);
    }
    html[data-theme="light"] .nav-dropdown-item { color: var(--text-body); }
    html[data-theme="light"] .nav-dropdown-item:hover {
        background: rgba(191, 161, 89, 0.08);
        color: var(--text);
    }
    html[data-theme="light"] #lang-dropdown {
        background: var(--card);
        border-color: var(--border-strong);
    }
    html[data-theme="light"] #current-lang-text { color: var(--text-muted); }

    html[data-theme="light"] .verse-panel {
        background: #F3E9CE;
        border-left-color: var(--gold-primary);
    }
    html[data-theme="light"] .verse-panel p { color: var(--text); }
    html[data-theme="light"] .verse-ref { color: var(--gold-dark); }
    html[data-theme="light"] .detail-tag {
        background: rgba(191, 161, 89, 0.08);
        border-color: var(--gold-border);
        color: var(--gold-dark);
    }
    html[data-theme="light"] .detail-item,
    html[data-theme="light"] .story-detail-card {
        background: var(--card);
        border-color: var(--border);
        box-shadow: 0 2px 10px rgba(42, 32, 21, 0.04);
    }
    html[data-theme="light"] .detail-item:hover {
        border-color: var(--gold-border);
        background: var(--card-hover);
    }

    html[data-theme="light"] .prose-article { color: var(--text-body); }
    html[data-theme="light"] .prose-article h2,
    html[data-theme="light"] .prose-article h3 { color: var(--text); }
    html[data-theme="light"] .prose-article strong { color: var(--text); }
    html[data-theme="light"] .prose-article em { color: var(--gold-dark); }
    html[data-theme="light"] .prose-article blockquote {
        background: #F3E9CE;
        color: var(--text);
    }

    html[data-theme="light"] .post-card,
    html[data-theme="light"] .blog-hub-card {
        background: var(--card);
        border-color: var(--border);
        box-shadow: 0 2px 10px rgba(42, 32, 21, 0.04);
    }
    html[data-theme="light"] .post-card:hover,
    html[data-theme="light"] .blog-hub-card:hover {
        background: var(--card-hover);
        border-color: var(--gold-primary);
        box-shadow: 0 16px 40px rgba(42, 32, 21, 0.1), 0 0 0 1px rgba(139, 111, 47, 0.08) inset;
    }
    /* 라이트 모드 — content/showcase/discover 카드 hover 시 부드러운 골드-크림 톤 그림자 */
    html[data-theme="light"] .content-card:hover .content-img-container,
    html[data-theme="light"] .showcase-card:hover .showcase-img-container,
    html[data-theme="light"] .discover-card:hover .discover-img-container {
        border-color: rgba(139, 111, 47, 0.3);
        box-shadow: 0 18px 44px rgba(42, 32, 21, 0.1), 0 0 0 1px rgba(139, 111, 47, 0.1) inset;
    }
    html[data-theme="light"] .post-card-body,
    html[data-theme="light"] .blog-hub-body { color: var(--text-body); }
    html[data-theme="light"] .blog-hub-title { color: var(--text); }
    html[data-theme="light"] .blog-hub-desc { color: var(--text-muted); }

    html[data-theme="light"] .breadcrumb { color: var(--text-faint); }
    html[data-theme="light"] .breadcrumb a,
    html[data-theme="light"] .breadcrumb span.crumb { color: var(--text-muted); }
    html[data-theme="light"] .breadcrumb .current { color: var(--gold-dark); }
    html[data-theme="light"] .breadcrumb .sep { color: var(--text-faint); }

    /* ── FAQ 라이트 세부 ─────────────────────────────────────────── */
    html[data-theme="light"] .faq-item {
        background: var(--card);
        border-color: var(--gold-border);
        box-shadow: 0 2px 10px rgba(42, 32, 21, 0.04);
    }
    html[data-theme="light"] .faq-item:hover { border-color: rgba(191, 161, 89, 0.4); }
    html[data-theme="light"] .faq-item.active { border-color: var(--gold-primary); background: #FDF9EC; }
    html[data-theme="light"] .faq-item .group-hover\:text-white { color: var(--text-body); }
    html[data-theme="light"] .faq-item.active .group-hover\:text-white,
    html[data-theme="light"] .faq-item:hover .group-hover\:text-white { color: var(--text); }
    html[data-theme="light"] .faq-answer p { color: var(--text-muted); }
    html[data-theme="light"] .faq-icon { color: var(--text-muted); }
    html[data-theme="light"] .faq-item.active .faq-icon { color: var(--gold-dark); }

    /* ── Pricing 라이트 세부 ─────────────────────────────────────── */
    html[data-theme="light"] .price-card {
        background: var(--card);
        border-color: var(--gold-border);
        box-shadow: 0 2px 10px rgba(42, 32, 21, 0.04);
    }
    html[data-theme="light"] .price-card:hover {
        border-color: var(--gold-primary);
        background: var(--card-hover);
        box-shadow: 0 20px 50px rgba(42, 32, 21, 0.1);
    }
    html[data-theme="light"] .price-card.featured {
        border-color: var(--gold-primary);
        background: #FDF9EC;
        box-shadow: 0 20px 50px rgba(95, 74, 28, 0.15);
    }
    /* Popular 뱃지 (bg-[#BFA159] + text-black) → 라이트에선 어두운 골드 + 크림 텍스트 */
    html[data-theme="light"] .price-card .bg-\[\#BFA159\] {
        background-color: var(--gold-dark) !important;
        color: #FFF9E6 !important;
    }
    html[data-theme="light"] .price-card .text-\[\#BFA159\] { color: var(--gold-dark) !important; }
    html[data-theme="light"] .price-card .text-\[\#BFA159\]\/70,
    html[data-theme="light"] .price-card i.text-\[\#BFA159\] { color: var(--gold-primary) !important; }

    html[data-theme="light"] .topic-chip {
        background: rgba(191, 161, 89, 0.08);
        border-color: var(--gold-border);
        color: var(--text-body);
    }
    html[data-theme="light"] .topic-chip:hover {
        background: rgba(191, 161, 89, 0.15);
        border-color: var(--gold-primary);
        color: var(--text);
    }

    html[data-theme="light"] .showcase-meta,
    html[data-theme="light"] .content-card-meta,
    html[data-theme="light"] .blog-hub-index { color: var(--gold-dark); }

    /* Showcase / content card / feature SVG 내 텍스트 · 라인 — 라이트 대비 조정 */
    html[data-theme="light"] .showcase-img-container svg text,
    html[data-theme="light"] .content-card-img svg text,
    html[data-theme="light"] .article-hero svg text,
    html[data-theme="light"] .post-card-thumb svg text,
    html[data-theme="light"] .blog-hub-thumb svg text,
    html[data-theme="light"] .feature-frame svg text {
        fill: #5F4A1C !important;
    }
    html[data-theme="light"] .showcase-img-container svg [fill="#E6D29D"],
    html[data-theme="light"] .content-card-img svg [fill="#E6D29D"],
    html[data-theme="light"] .article-hero svg [fill="#E6D29D"],
    html[data-theme="light"] .post-card-thumb svg [fill="#E6D29D"],
    html[data-theme="light"] .blog-hub-thumb svg [fill="#E6D29D"] { fill: #8B6F2F !important; }
    html[data-theme="light"] .showcase-img-container svg [stroke="#BFA159"],
    html[data-theme="light"] .content-card-img svg [stroke="#BFA159"],
    html[data-theme="light"] .article-hero svg [stroke="#BFA159"],
    html[data-theme="light"] .blog-hub-thumb svg [stroke="#BFA159"],
    html[data-theme="light"] .feature-frame svg [stroke="#BFA159"] { stroke: #8B6F2F !important; }

    html[data-theme="light"] #god-rays {
        opacity: var(--godray-opacity) !important;
        filter: blur(var(--godray-blur)) !important;
        background: radial-gradient(circle at 50% 0%, #E6D29D 0%, transparent 55%) !important;
        mix-blend-mode: multiply;
    }
    html[data-theme="light"] #orbit-layer { opacity: 0.15; }
    html[data-theme="light"] .animate-orbit span { color: var(--gold-dark) !important; opacity: 0.3; }

    html[data-theme="light"] .hero-typewrite .tw-caret {
        background: var(--gold-dark);
        box-shadow: 0 0 6px rgba(139, 111, 47, 0.4);
    }

    /* 테마 토글 버튼 */
    .theme-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.05);
        background: rgba(255, 255, 255, 0.05);
        color: #9a9a9a;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        flex-shrink: 0;
    }
    .theme-toggle:hover {
        background: rgba(191, 161, 89, 0.12);
        color: var(--gold-light);
        border-color: var(--gold-primary);
    }
    html[data-theme="light"] .theme-toggle {
        background: #FFFFFF;
        border-color: var(--border-strong);
        color: var(--gold-dark);
    }
    /* UX 관행: 다크 모드 → sun 버튼 노출 (클릭 시 라이트로 전환 "안내"),
       라이트 모드 → moon 버튼 노출 (클릭 시 다크로 전환 안내) */
    .theme-toggle .icon-sun { display: block; }
    .theme-toggle .icon-moon { display: none; }
    html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
    html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
    @media (min-width: 640px) {
        .theme-toggle { width: 42px; height: 42px; }
    }
    @media (min-width: 768px) {
        .theme-toggle { width: 44px; height: 44px; }
    }