/* =============================================================================
 * mcstock.co.kr — 사이트 디자인 CSS  (daisyUI 테마용 사이트 오버라이드)
 * 이 파일은 theme/daisyui 의 head.def.php 가 항상 "맨 마지막(order 10)" 으로 로드한다.
 * → 여기 규칙이 테마의 모든 CSS 를 이긴다. theme/daisyui 폴더는 절대 수정하지 않는다.
 *   (자세한 규약: theme/daisyui/STYLE.md)
 *
 * ── 디자인 컨셉 (MC STOCK — 개인 주식 추천 서비스) ──────────────────────────
 *  · 톤 & 무드 : 역동적이고 신뢰감 있는 프리미엄 핀테크. 홈(webroot main.php)과 동일 아이덴티티.
 *  · 주조색    : Signal Red   #e11d2b   (primary) — 상승/시그널을 상징하는 강렬한 레드
 *  · 보조색    : Deep Maroon  #8f1119   (secondary)
 *  · 강조색    : Amber Flash  #ff6a1a   (accent) — 하이라이트/알림
 *  · 잉크/중립 : Near-black   #16181d   (neutral / base-content)
 *  · 배경/표면 : #ffffff / #f5f6f8 / #e4e6ea
 *  · 라운드    : box 1rem / field 0.5rem / selector 0.5rem,  border 1px, depth 1
 *  · 타이포    : Pretendard, letter-spacing -0.01em
 * ── 유지보수 메모 ──────────────────────────────────────────────────────────
 *  홈(main.php)의 인라인 <style> 토큰([data-theme="mcstock"])을 이 파일이 게시판·회원·
 *  쇼핑 페이지에 동일하게 이식한 것. 홈 브랜드가 바뀌면 아래 토큰도 함께 갱신한다.
 * =========================================================================== */

/* Pretendard — 홈과 동일 폰트 (Google Fonts 미호스팅 → 공식 CDN) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@latest/dist/web/static/pretendard.min.css");

/* ── 1순위: daisyUI 디자인 토큰 재정의 ─────────────────────────────────────
 * 테마 <html> 은 data-theme="light" 고정 → 같은 앵커로 재정의(로드 순서상 이 파일이 이김). */
:root,
[data-theme="light"] {
    color-scheme: light;

    --color-base-100: #ffffff;   /* 표면(카드) */
    --color-base-200: #f5f6f8;   /* 본문 배경 */
    --color-base-300: #e4e6ea;   /* 보더/구분선 */
    --color-base-content: #16181d;

    --color-primary: #e11d2b;            /* Signal red */
    --color-primary-content: #ffffff;
    --color-secondary: #8f1119;          /* Deep maroon */
    --color-secondary-content: #ffffff;
    --color-accent: #ff6a1a;             /* Amber flash */
    --color-accent-content: #ffffff;
    --color-neutral: #16181d;
    --color-neutral-content: #ffffff;

    --color-info: #2b6cb0;
    --color-info-content: #ffffff;
    --color-success: #15a34a;
    --color-success-content: #ffffff;
    --color-warning: #d97706;
    --color-warning-content: #ffffff;
    --color-error: #dc2626;
    --color-error-content: #ffffff;

    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 1rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

/* ── 2순위: 안정 앵커 + daisyUI 클래스 보강 ─────────────────────────────── */

body {
    font-family: "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo",
        "Malgun Gothic", sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* 헤더: 반투명 + 하단 레드 헤어라인으로 브랜드 정체성 부여 */
#site-header {
    background-color: color-mix(in oklab, var(--color-base-100) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--color-base-300);
}

/* 상단/드로어 메뉴: hover·focus·active = 빨간 배경 + 흰 텍스트 (가독성)
 * daisyUI 기본 active 배경(어두운 neutral)을 덮어써 "검정배경+빨강텍스트" 문제 해결. */
#site-header .menu :where(a, summary):hover,
#site-header .menu :where(a, summary):focus,
#site-header .menu :where(a, summary).menu-active,
#site-header .menu :where(a, summary):focus-visible,
#site-header .menu :where(li > a, li > summary).active,
#site-drawer .menu :where(a, summary):hover,
#site-drawer .menu :where(a, summary):focus,
#site-drawer .menu :where(a, summary).menu-active,
#site-drawer .menu :where(li > a, li > summary).active {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
}

/* 로고: 테마가 렌더하는 이미지(/img/logo.png)를 그대로 사용. */

/* 버튼 대비 보정 (테마 depth 로 인한 톤 편차 방지) */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-content);
}
.btn-primary:hover {
    background-color: #c4111f;
    border-color: #c4111f;
}
.btn-accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-content);
}
.btn-accent:hover {
    background-color: #e85a10;
    border-color: #e85a10;
}

/* 게시판 등 본문 카드에 은은한 상단 강조선(선택적) — 중립 유지 위해 과하지 않게 */
#site-main .card {
    border: 1px solid var(--color-base-300);
}

/* 링크 컬러를 브랜드 레드로 (본문 한정) */
#site-main a:not(.btn):not(.badge):not(.tab):hover {
    color: var(--color-primary);
}

/* ── 재사용 컴포넌트 (홈 main.php + recommend 등에서 공통 사용) ───────────── */
.mc-num { font-variant-numeric: tabular-nums; }

/* Hero: 레드 그라디언트 배너 */
.mc-hero {
    position: relative; overflow: hidden; border-radius: 1.5rem; color: #fff;
    background:
        radial-gradient(120% 120% at 85% 0%, rgba(255,106,26,0.35) 0%, rgba(255,106,26,0) 45%),
        radial-gradient(120% 120% at 10% 100%, rgba(225,29,43,0.55) 0%, rgba(225,29,43,0) 50%),
        linear-gradient(135deg, #7a0f18 0%, #c4111f 45%, #16181d 100%);
}
.mc-hero::before {
    content: ""; position: absolute; inset: 0; opacity: 0.12; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(80% 80% at 70% 20%, #000 0%, transparent 70%);
            mask-image: radial-gradient(80% 80% at 70% 20%, #000 0%, transparent 70%);
}
.mc-blob { position: absolute; border-radius: 9999px; filter: blur(38px); opacity: 0.5; pointer-events: none; }
.mc-blob-1 { width: 260px; height: 260px; background: #ff6a1a; top: -60px; right: -40px; animation: mcFloat 9s ease-in-out infinite; }
.mc-blob-2 { width: 220px; height: 220px; background: #e11d2b; bottom: -70px; left: 10%; animation: mcFloat2 11s ease-in-out infinite; }
@keyframes mcFloat  { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(16px,-24px,0) scale(1.08)} }
@keyframes mcFloat2 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-22px,18px,0) scale(1.1)} }

/* LIVE 점멸 */
.mc-live-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: mcPulse 1.6s infinite; }
@keyframes mcPulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)} 70%{box-shadow:0 0 0 8px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }

/* 회원 전용 잠금 오버레이 */
.mc-lock { position: relative; }
.mc-lock__blur { filter: blur(6px); user-select: none; pointer-events: none; }
.mc-lock__veil {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .75rem; text-align: center; padding: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,.96) 100%);
}
