@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');
/* =============================================================================
 * 방수119 (alrimi.co.kr) — 사이트 디자인
 * -----------------------------------------------------------------------------
 * 컨셉      : "Retro Y2K Desktop / Vaporwave"
 *             2000년대 나이브 퓨처리즘. 두툼한 베벨 프레임의 컴퓨터 창(window),
 *             파스텔 그라디언트 + 도트 그리드 배경, 별·하트 픽셀 스티커,
 *             펄(pearly) 텍스처, 고대비, 넉넉한 여백.
 * 팔레트    : primary  = 핫핑크  oklch(72% .17 350)
 *             secondary= 시안    oklch(80% .11 205)
 *             accent   = 퍼플    oklch(66% .17 300)
 *             ink(외곽선/그림자) = 딥인디고 #1b1b3a
 * 폰트      : 픽셀 라틴 = VT323 / Press Start 2P (.pixel / .pixel-xs, 라틴·숫자 전용)
 *             한글 본문 = 테마 기본 시스템 폰트(가독성 유지)
 * 형태      : 창 라운드 0.6rem, 2px 잉크 외곽선 + 하드 드롭섀도(3~5px)
 * -----------------------------------------------------------------------------
 * 규약(STYLE.md): 디자인 수정은 이 파일에서만. 테마(theme/daisyui) 폴더 수정 금지.
 *                 이 CSS 는 테마 뒤(order 10)에 로드되어 테마 CSS 를 이긴다.
 *                 마크업 커스텀은 웹루트 main.php 에서만(테마 덮어쓰기에 안전).
 * ============================================================================= */

:root {
    --ink: #1b1b3a;                 /* 창 외곽선·하드 섀도 */

    /* --- 시맨틱 컬러 (Y2K 파스텔) --- */
    --color-primary: oklch(72% 0.17 350);      /* 핫핑크 */
    --color-primary-content: oklch(22% 0.05 340);

    --color-secondary: oklch(80% 0.11 205);    /* 시안 */
    --color-secondary-content: oklch(25% 0.05 250);

    --color-accent: oklch(66% 0.17 300);       /* 퍼플 */
    --color-accent-content: oklch(99% 0 0);

    --color-neutral: oklch(38% 0.09 285);      /* 딥 인디고 패널 */
    --color-neutral-content: oklch(97% 0.02 320);

    --color-base-100: oklch(99% 0.01 320);     /* 펄 화이트(창 표면) */
    --color-base-200: oklch(93% 0.03 320);     /* 본문 배경 베이스 */
    --color-base-300: oklch(84% 0.04 315);     /* 보더/구분선 */
    --color-base-content: oklch(26% 0.06 288); /* 딥 인디고 텍스트 */

    --color-info: oklch(80% 0.11 205);
    --color-success: oklch(80% 0.14 150);
    --color-warning: oklch(88% 0.15 95);
    --color-error: oklch(70% 0.19 20);

    /* --- 형태 --- */
    --radius-box: 0.6rem;
    --radius-field: 0.5rem;
    --radius-selector: 0.4rem;
    --border: 2px;
    --depth: 0;
}

/* ===== 배경: 파스텔 그라디언트 + 도트/그리드 (베이퍼웨이브 데스크톱) ===== */
.drawer-content {
    background-color: #e7dcff;
    background-image:
        radial-gradient(120% 90% at 50% -20%, rgba(255,214,245,.85), rgba(255,214,245,0) 55%),
        radial-gradient(rgba(120,90,200,.18) 1.4px, transparent 1.5px),
        linear-gradient(180deg, #ece0ff 0%, #dfe7ff 45%, #d8f6ff 100%);
    background-size: 100% 100%, 26px 26px, 100% 100%;
    background-attachment: fixed;
}

/* ===== 헤더 / 푸터 — 펄 베벨 바 ===== */
#site-header {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(7px);
    border-bottom: 2px solid var(--ink);
    box-shadow: 0 4px 0 rgba(27,27,58,.14);
}
#site-footer {
    background: linear-gradient(180deg, #fff, #f2e9ff);
    border-top: 2px solid var(--ink);
    box-shadow: 0 -4px 0 rgba(27,27,58,.10);
}

/* ===== 본문 버튼 — 두툼한 베벨 + 눌리는 인터랙션 ===== */
#site-main .btn {
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    font-weight: 800;
    transition: transform .05s ease, box-shadow .05s ease;
}
#site-main .btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
#site-main .btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }

/* ===== 픽셀 폰트 (라틴·숫자 전용) ===== */
.pixel    { font-family: 'VT323', ui-monospace, monospace; letter-spacing: .01em; line-height: 1; }
.pixel-xs { font-family: 'Press Start 2P', ui-monospace, monospace; letter-spacing: .02em; }

/* ===== 레트로 창(window) 프레임 ===== */
.win {
    position: relative;
    background: var(--color-base-100);
    border: 2px solid var(--ink);
    border-radius: var(--radius-box);
    box-shadow:
        4px 4px 0 rgba(27,27,58,.85),
        inset 2px 2px 0 rgba(255,255,255,.95),
        inset -3px -3px 0 rgba(178,158,224,.35);
    overflow: hidden;
}
.win--tall { height: 100%; }

/* 창 타이틀바 */
.win-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .7rem;
    background: linear-gradient(180deg, #ffa8de 0%, #c56bd6 100%);
    color: #fff;
    border-bottom: 2px solid var(--ink);
    text-shadow: 1px 1px 0 rgba(27,27,58,.35);
    font-weight: 800;
    font-size: .85rem;
}
.win-bar.is-cyan   { background: linear-gradient(180deg, #9fe6ff, #4aa9e0); }
.win-bar.is-purple { background: linear-gradient(180deg, #b9a3ff, #7a5cf0); }
.win-bar .dot { width: .7rem; height: .7rem; border-radius: 999px; border: 2px solid var(--ink); }
.win-bar .dot.r { background: #ff6b8b; }
.win-bar .dot.y { background: #ffd76b; }
.win-bar .dot.g { background: #7be0a0; }
.win-bar .ctrl {
    margin-left: auto;
    display: inline-grid;
    place-items: center;
    width: 1.15rem; height: 1.15rem;
    background: #fff6; border: 2px solid var(--ink); border-radius: 4px;
    color: var(--ink); font-size: .6rem; font-weight: 900;
}
.win-body { padding: 1.25rem; }

/* ===== 스티커 (별·하트·픽셀) ===== */
.sticker {
    position: absolute;
    font-size: 1.9rem;
    line-height: 1;
    filter: drop-shadow(2px 2px 0 rgba(27,27,58,.25));
    pointer-events: none;
    user-select: none;
    z-index: 5;
    animation: bob 4s ease-in-out infinite;
}
.sticker:nth-child(even) { animation-delay: -2s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } }

/* ===== 통계 칩 ===== */
.stat-chip {
    border: 2px solid var(--ink);
    border-radius: var(--radius-box);
    background: linear-gradient(180deg, #fff, #fdeaf7);
    box-shadow: 3px 3px 0 rgba(27,27,58,.75);
    text-align: center;
    padding: 1.25rem 1rem;
}

/* ===== 번호 뱃지 (주요 작업 01~04) ===== */
.num-badge {
    display: inline-grid; place-items: center;
    width: 3.2rem; height: 3.2rem;
    border: 2px solid var(--ink); border-radius: 999px;
    background: linear-gradient(180deg, #d8ffe9, #8fe6c6);
    box-shadow: 3px 3px 0 rgba(27,27,58,.6);
    font-size: 1.5rem; color: var(--ink);
}

/* ===== 플로팅 3D 뮤직 위젯 ===== */
.music {
    box-shadow: 5px 5px 0 rgba(27,27,58,.85), inset 2px 2px 0 rgba(255,255,255,.95);
}
.cd {
    width: 3rem; height: 3rem; border-radius: 999px;
    border: 2px solid var(--ink);
    background:
        radial-gradient(circle at 50% 50%, #fff 0 16%, transparent 17%),
        conic-gradient(from 0deg, #ff9ed8, #a3e4ff, #c3a3ff, #ffe08a, #ff9ed8);
    box-shadow: inset 0 0 0 2px rgba(27,27,58,.15);
    animation: spin 3.5s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.player-btn {
    width: 1.9rem; height: 1.9rem; border-radius: 6px;
    border: 2px solid var(--ink); background: #fff;
    box-shadow: 2px 2px 0 var(--ink);
    display: inline-grid; place-items: center; color: var(--ink);
}

/* ===== 상단 마퀴 배너 ===== */
.marquee {
    border: 2px solid var(--ink);
    border-radius: var(--radius-field);
    background: linear-gradient(90deg, #ffd7f2, #d7e6ff, #d7fff4);
    box-shadow: 3px 3px 0 rgba(27,27,58,.7);
    overflow: hidden;
    white-space: nowrap;
}
.marquee__track {
    display: inline-block;
    padding: .5rem 0;
    animation: slide 22s linear infinite;
    font-weight: 700;
    color: var(--ink);
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== 게시판 리스트 미세 보정(레트로 구분선) ===== */
#site-main .win-body .divide-y > li { border-color: rgba(27,27,58,.14); }

@media (prefers-reduced-motion: reduce) {
    .sticker, .cd, .marquee__track { animation: none; }
}

/* ---------------------------------------------------------------------------
 * 사이트 푸터 (#site-footer) — Retro Y2K 데스크톱 / 창(window) 프레임
 * ------------------------------------------------------------------------- */
#site-footer {
    position: relative;
    background: linear-gradient(180deg, #ffffff, #f2e9ff);
    border-top: 2px solid var(--ink);
    box-shadow: 0 -4px 0 rgba(27, 27, 58, .10);
}
/* 상단 타이틀바 스트립(핫핑크→퍼플) */
#site-footer::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 6px;
    background: linear-gradient(180deg, #ffa8de 0%, #c56bd6 100%);
    border-bottom: 2px solid var(--ink);
}
#site-footer .container { padding-top: 2.25rem; }   /* 타이틀바 공간 확보 */
/* 회사명 — 잉크 볼드 */
#site-footer address p:first-child {
    font-weight: 800;
    color: var(--ink);
    letter-spacing: .01em;
}
/* 정책 링크 — 굵고 밑줄 hover */
#site-footer nav a { font-weight: 800; color: var(--color-neutral); }
#site-footer nav a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}