@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://hangeul.pstatic.net/hangeul_static/css/maru-buri.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap");

/* =============================================================
   사주클럽 (saju.club) — 사이트 디자인  [ 천상의 서재 · Dark Celestial Luxury ]
   -------------------------------------------------------------
   [톤 & 무드]
     천상의 서재에 들어가 내 운명이 적힌 책을 펼친다.
     깊은 밤보라 바탕 위에 절제된 금선, 은은한 별빛.
     화려함보다 정적인 신비로움과 고급스러움. 핵심 데이터는 장식 없이.
     (dream.saju.club 과 톤이 겹쳐도 된다 — 추후 통합 예정, 2026-11-07)

   [팔레트]  기획: /UPDATE.md 3장
       바탕 #0B0816 · 구획 #151022 · 카드 #271638
       금(주요) #E2AA62 · 보라(보조) #A78BCC · 제목 #F3EBDD · 본문 #CBBEDB
       오행(원국·그래프 전용, 전 사이트 공통):
         木 --wx-wood · 火 --wx-fire · 土 --wx-earth · 金 --wx-metal · 水 --wx-water

   [테마 전환]  기본 다크. <html data-sc-theme="light"> 이면 "한지·먹" 라이트.
     전환·FOUC 방지는 기존 그대로(extend/saju.theme.php, /js/theme-toggle.js).

   [형태]  카드 0.75rem · 버튼 0.5rem(알약 아님) · 테두리 1px 금선 · 그림자 대신 옅은 안쪽 광.
   [타이포] 제목 MaruBuri · 본문 Pretendard · 원국 한자 Noto Serif KR.

   [규약]  STYLE.md — 디자인은 이 파일에서만. 테마 폴더 수정 금지.
           inline style·!important 금지. prefers-reduced-motion 에서 모션 정지.
           Tailwind 브라우저 JIT 는 색+투명도 유틸을 못 만든다 → 여기서 rgba/var 로.

   [미리보기]  지금은 개발자 IP 에게만 /css/style.css 대신 이 파일이 나간다
               (extend/saju.celestial.php). 전환 시 이 파일이 style.css 가 된다.
   ============================================================= */

:root {
    /* --- 공통(테마 무관) --- */
    --font-title: "MaruBuri", "Noto Serif KR", serif;
    --font-body: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", sans-serif;
    --font-hanja: "Noto Serif KR", "MaruBuri", serif;

    --radius-box: 0.75rem;
    --radius-field: 0.5rem;
    --radius-selector: 0.375rem;
    --border: 1px;
    --depth: 0;

    /* 금·보라 rgb (rgba 조합용) */
    --sc-gold: 226, 170, 98;
    --sc-violet: 167, 139, 204;
    --sc-star: 243, 235, 221;

    /* 오행 — 원국·오행 그래프 전용 */
    --wx-wood: #5DB596;
    --wx-fire: #E0705A;
    --wx-earth: #D49E5C;
    --wx-metal: #D9D6E0;
    --wx-water: #6F8BD8;

    /* =========== 다크 (기본) =========== */
    --color-primary: #E2AA62;
    --color-primary-content: #1A1208;
    --color-secondary: #A78BCC;
    --color-secondary-content: #140D20;
    --color-accent: #9FB6DE;              /* 달빛 은청 */
    --color-accent-content: #0E1424;
    --color-neutral: #3A2A50;
    --color-neutral-content: #F3EBDD;
    --color-base-100: #221432;            /* 카드·입력 표면 */
    --color-base-200: #0B0816;            /* 본문 배경 */
    --color-base-300: #3A2852;            /* 구분선·hover */
    --color-base-content: #CBBEDB;
    --color-info: #8FB3E8;
    --color-success: #7CC9A2;
    --color-warning: #E6C26E;
    --color-error: #E4806E;

    --sc-title: #F3EBDD;
    --sc-bg: #0B0816;
    --sc-body-image:
        radial-gradient(1200px 700px at 50% -12%, rgba(var(--sc-violet), 0.16), transparent 60%),
        radial-gradient(900px 600px at 100% 30%, rgba(var(--sc-gold), 0.05), transparent 60%),
        linear-gradient(180deg, #151022 0%, #0B0816 45%, #0B0816 100%);
    --sc-card: rgba(39, 22, 56, 0.86);
    --sc-line: rgba(var(--sc-gold), 0.26);
    --sc-line-strong: rgba(var(--sc-gold), 0.55);
    --sc-bar: rgba(11, 8, 22, 0.82);
    --sc-card-glow: inset 0 1px 0 rgba(var(--sc-gold), 0.10), 0 18px 40px -22px rgba(0, 0, 0, 0.8);
    --sc-star-op: 0.75;
}

/* =========== 라이트 — 한지·먹 =========== */
:root[data-sc-theme="light"] {
    --color-primary: #B0782E;
    --color-primary-content: #FFFDF8;
    --color-secondary: #7A5FA6;
    --color-secondary-content: #FFFFFF;
    --color-accent: #4F6A9E;
    --color-accent-content: #FFFFFF;
    --color-neutral: #3B3046;
    --color-neutral-content: #FBF7EF;
    --color-base-100: #FFFDF8;
    --color-base-200: #F4EEE2;
    --color-base-300: #E3D7C2;
    --color-base-content: #2E2638;
    --color-info: #3E6FB0;
    --color-success: #3C8A62;
    --color-warning: #A87A1E;
    --color-error: #B8513E;

    --wx-metal: #8C8796;                  /* 밝은 바탕에서 백은은 회은으로 */
    --wx-earth: #A8743A;

    --sc-title: #241C2E;
    --sc-bg: #F4EEE2;
    --sc-body-image:
        radial-gradient(1100px 650px at 50% -12%, rgba(var(--sc-gold), 0.16), transparent 60%),
        linear-gradient(180deg, #F8F3E9 0%, #F4EEE2 60%, #EFE7D8 100%);
    --sc-card: rgba(255, 253, 248, 0.92);
    --sc-line: rgba(176, 120, 46, 0.30);
    --sc-line-strong: rgba(176, 120, 46, 0.60);
    --sc-bar: rgba(251, 247, 239, 0.88);
    --sc-card-glow: 0 10px 28px -20px rgba(60, 40, 10, 0.35);
    --sc-star-op: 0;
}

/* =============================================================
   배경 — 밤하늘 + 별빛 (데스크톱만 반짝임)
   ============================================================= */

body {
    font-family: var(--font-body);
    color: var(--color-base-content);
    background-color: var(--sc-bg);
    background-image: var(--sc-body-image);
    background-attachment: fixed;
    word-break: keep-all;
}

/* 별 — 크기 다른 점 세 겹 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(var(--sc-star), 0.9), transparent 60%),
        radial-gradient(1px 1px at 68% 9%, rgba(var(--sc-star), 0.8), transparent 60%),
        radial-gradient(1.5px 1.5px at 84% 42%, rgba(var(--sc-gold), 0.9), transparent 60%),
        radial-gradient(1px 1px at 33% 64%, rgba(var(--sc-star), 0.7), transparent 60%),
        radial-gradient(1.5px 1.5px at 52% 30%, rgba(var(--sc-star), 0.8), transparent 60%),
        radial-gradient(1px 1px at 91% 77%, rgba(var(--sc-star), 0.7), transparent 60%),
        radial-gradient(1px 1px at 6% 86%, rgba(var(--sc-gold), 0.8), transparent 60%),
        radial-gradient(1px 1px at 44% 92%, rgba(var(--sc-star), 0.6), transparent 60%);
    background-size: 420px 420px;
    opacity: var(--sc-star-op);
}
@media (min-width: 1024px) {
    body::after { animation: sc-twinkle 6s ease-in-out infinite alternate; }
}
@keyframes sc-twinkle {
    from { opacity: calc(var(--sc-star-op) * 0.45); }
    to   { opacity: var(--sc-star-op); }
}

#site-header { z-index: 2; }
#site-main,
#site-footer { position: relative; z-index: 1; }

/* =============================================================
   카드 · 바 — 얇은 금선
   ============================================================= */

#site-main .card,
#site-main .collapse,
#site-main .stats {
    background-color: var(--sc-card);
    border: 1px solid var(--sc-line);
    box-shadow: var(--sc-card-glow);
}
#site-main .stats .stat {
    border: none;
    box-shadow: none;
    background-color: transparent;
}

#site-header {
    background-color: var(--sc-bar);
    border-bottom: 1px solid var(--sc-line);
    backdrop-filter: blur(10px);
}
#site-footer {
    background-color: var(--sc-bar);
    border-top: 1px solid var(--sc-line);
}

/* 다크모드 토글 버튼 — JS 가 헤더에 주입, 모바일에서만 노출 */
#site-header .sc-theme-toggle {
    display: none;
    color: var(--color-base-content);
}
@media (max-width: 1023px) {
    #site-header .sc-theme-toggle { display: inline-flex; }
}
#site-header .sc-theme-toggle .fa { font-size: 1.1rem; }

/* =============================================================
   타이포
   ============================================================= */

#site-main h1,
#site-main h2,
#site-main h3,
#site-main .card-title {
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--sc-title);
    letter-spacing: -0.01em;
}

/* 제목 아래 짧은 금선 — 섹션 제목(h2)에만 */
#site-main section > h2::after,
#site-main section > header h2::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 1px;
    margin: 0.75rem auto 0;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

/* 원국 한자용 (마크업에서 클래스로 지정) */
.sc-hanja {
    font-family: var(--font-hanja);
    font-weight: 700;
}

/* =============================================================
   버튼 — 금 채움(주요) / 금선(보조)
   ============================================================= */

#site-main .btn {
    font-weight: 600;
    letter-spacing: 0.01em;
}
#site-main .btn-primary {
    border: 1px solid rgba(var(--sc-gold), 0.9);
    background-image: linear-gradient(180deg, #EEC48A 0%, #E2AA62 55%, #C98E4C 100%);
    color: var(--color-primary-content);
    transition: box-shadow 0.2s ease, filter 0.2s ease;
}
:root[data-sc-theme="light"] #site-main .btn-primary {
    background-image: linear-gradient(180deg, #C48A40 0%, #B0782E 100%);
}
#site-main .btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 0 0 1px rgba(var(--sc-gold), 0.4), 0 0 22px -4px rgba(var(--sc-gold), 0.65);
}
#site-main .btn-outline,
#site-main .btn-ghost {
    border-color: var(--sc-line-strong);
}

/* 입력칸 — 표면보다 한 단계 깊게, 포커스는 금선 */
#site-main .input,
#site-main .select,
#site-main .textarea {
    border-color: var(--sc-line);
}
#site-main .input:focus-within,
#site-main .select:focus-within,
#site-main .textarea:focus {
    border-color: var(--color-primary);
    outline-color: rgba(var(--sc-gold), 0.45);
}

/* =============================================================
   랜딩 — Hero · 소개 카드 (마크업은 4단계에서 교체)
   ============================================================= */

#site-main > section:first-child {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 50% -10%, rgba(var(--sc-gold), 0.14), transparent 60%);
}
#site-main > section:first-child h1 {
    background-image: linear-gradient(180deg, #F8DCB0 0%, #E2AA62 60%, #BF8446 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
:root[data-sc-theme="light"] #site-main > section:first-child h1 {
    background-image: linear-gradient(180deg, #8E5E22 0%, #B0782E 100%);
}

#site-main #intro article.card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#site-main #intro article.card:hover {
    border-color: var(--sc-line-strong);
    box-shadow: var(--sc-card-glow), 0 0 26px -10px rgba(var(--sc-gold), 0.5);
}
#site-main #intro article.card .text-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 9999px;
    border: 1px solid var(--sc-line-strong);
    background: radial-gradient(circle, rgba(var(--sc-gold), 0.14), transparent 70%);
    color: var(--color-primary);
}

/* =============================================================
   모션 최소화 존중
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    body::after { animation: none; }
    #site-main .btn-primary,
    #site-main #intro article.card { transition: none; }
}

/* =============================================================
   로고 — 표시 이미지만 금색 SVG 로 교체 (테마 파일 수정 없이)
   ============================================================= */
#site-header img[src$="/logo.png"],
#site-footer img[src$="/logo.png"],
img.logo[src$="/logo.png"] { content: url("/logo.celestial.svg?v=2"); }
:root[data-sc-theme="light"] #site-header img[src$="/logo.png"],
:root[data-sc-theme="light"] #site-footer img[src$="/logo.png"],
:root[data-sc-theme="light"] img.logo[src$="/logo.png"] { content: url("/logo.celestial.light.svg?v=2"); }

/* 폼 로고(img.logo) 크기 제약 — 스킨 custom.css 의 .logo 규칙이 주석 안이라 무효 */
img.logo { max-width: 160px; height: auto; }

/* =============================================================
   원국 4기둥 — start/result.php (.sc-wonguk, SC_CELESTIAL 갈래)
   장식 없이: 오행색 옅은 바탕 + 같은 색 선 + 한자. 일주만 금테.
   ============================================================= */
:root[data-sc-theme="light"] {
    /* 한지 바탕에서 글자로 읽히도록 한 단계 진하게 (막대·바탕은 같은 변수를 옅게 섞어 씀) */
    --wx-wood: #2F8467;
    --wx-fire: #C0503A;
    --wx-water: #4A66B8;
}
.sc-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.sc-pillar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.35rem 0.6rem;
    border-radius: var(--radius-field);
    border: 1px solid transparent;
    animation: sc-rise 0.7s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--d, 0) * 0.14s);
}
.sc-pillar.is-self {
    border-color: rgba(var(--sc-gold), 0.55);
    background: linear-gradient(180deg, rgba(var(--sc-gold), 0.10), transparent 70%);
    box-shadow: 0 0 24px -10px rgba(var(--sc-gold), 0.6);
}
.sc-pillar-name {
    text-align: center;
    font-size: 0.75rem;
    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
.sc-pillar.is-self .sc-pillar-name { color: var(--color-primary); font-weight: 700; }
.sc-gz {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1.05;
    border-radius: var(--radius-field);
    border: 1px solid color-mix(in oklab, var(--el) 50%, transparent);
    background: color-mix(in oklab, var(--el) 14%, transparent);
    color: var(--el);
    line-height: 1;
}
.sc-gz .sc-hanja { font-size: clamp(1.6rem, 8vw, 2.1rem); }
.sc-gz small {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}
.sc-gz.is-unknown {
    border: 1px dashed var(--color-base-300);
    background: none;
    color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
    font-size: 0.8rem;
}
/* 오행 분포 한 줄 막대 */
.sc-wx-strip {
    display: flex;
    gap: 2px;
    height: 1.4rem;
    border-radius: 9999px;
    overflow: hidden;
}
.sc-wx-strip span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    background: color-mix(in oklab, var(--el) 70%, transparent);
    color: #120C1E;
}
@keyframes sc-rise {
    from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* 유형 카드 — 진한 오행 채움 대신 카드 바탕 + 오행빛 테두리·후광 */
#site-main .card.sc-type {
    color: var(--color-base-content);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--el) 24%, transparent), transparent 60%),
        var(--color-base-100);
    border: 1px solid color-mix(in oklab, var(--el) 45%, transparent);
}
#site-main .card.sc-type h1 { color: var(--sc-title); }
#site-main .card.sc-type .badge {
    background: color-mix(in oklab, var(--el) 18%, transparent);
    color: var(--el);
    border: 1px solid color-mix(in oklab, var(--el) 40%, transparent);
}

/* =============================================================
   전체 명식 — calc/saju.php
   그 파일 <style>(본문 안, 링크보다 뒤)이 같은 선택자로 색을 박아 두어 body 를 붙여 이긴다.
   ============================================================= */
body #saju-calc {
    --color-tree: var(--wx-wood);
    --color-fire: var(--wx-fire);
    --color-earth: var(--wx-earth);
    --color-metal: var(--wx-metal);
    --color-water: var(--wx-water);
    --ring-active: var(--color-primary);
    --ring-active-bg: rgba(var(--sc-gold), 0.14);
}
body #saju-calc .hanja { font-family: var(--font-hanja); }
body #saju-calc .bg-el-solid-tree  { --el: var(--wx-wood); }
body #saju-calc .bg-el-solid-fire  { --el: var(--wx-fire); }
body #saju-calc .bg-el-solid-earth { --el: var(--wx-earth); }
body #saju-calc .bg-el-solid-metal { --el: var(--wx-metal); }
body #saju-calc .bg-el-solid-water { --el: var(--wx-water); }
body #saju-calc [class*="bg-el-solid-"] {
    background: color-mix(in oklab, var(--el) 16%, transparent);
    color: var(--el);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--el) 50%, transparent);
}
body #saju-calc .pillar-box { border-radius: var(--radius-field); font-weight: 700; }
body #saju-calc .pillar-table .col-self { background: rgba(var(--sc-gold), 0.08); }
body #saju-calc .el-bar-fill { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
    .sc-pillar { animation: none; }
}

/* =============================================================
   헤더·푸터 로고 — 이미지(옛 둥근 글꼴) 대신 제목 글꼴(마루부리) 글자로
   이미지 SVG 안에서는 웹폰트를 못 쓰므로 링크 안 img 를 숨기고 ::after 로 그린다.
   ============================================================= */
#site-header a:has(> img[src$="/logo.png"]),
#site-footer a:has(> img[src$="/logo.png"]) {
    text-decoration: none;
}
#site-header a:has(> img[src$="/logo.png"]) > img,
#site-footer a:has(> img[src$="/logo.png"]) > img { display: none; }
#site-header a:has(> img[src$="/logo.png"])::after,
#site-footer a:has(> img[src$="/logo.png"])::after {
    content: "사주클럽" / "사주클럽";
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: 0.02em;
    background-image: linear-gradient(180deg, #F8DCB0 0%, #E2AA62 60%, #BF8446 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#site-footer a:has(> img[src$="/logo.png"])::after { font-size: 1.4rem; }

/* 회원 화면(로그인·가입·비밀번호 등) 폼 로고 img.logo — 헤더와 같은 글자 로고로 */
a:has(> img.logo[src$="/logo.png"]) { display: inline-block; text-decoration: none; }
a:has(> img.logo[src$="/logo.png"]) > img { display: none; }
a:has(> img.logo[src$="/logo.png"])::after {
    content: "사주클럽" / "사주클럽";
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    background-image: linear-gradient(180deg, #F8DCB0 0%, #E2AA62 60%, #BF8446 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}