@charset "UTF-8";
/* ================================================================
   방수119 — 사이트 전용 디자인 CSS (웹루트 /css/style.css, order 10)
   컨셉: 90s Y2K 다마고치 LCD 화면 인터페이스
   팔레트: 크림 핑크 / 민트 / 라벤더 파스텔 LCD, 도트 매트릭스 텍스처
   ※ 테마(theme/daisyui)는 건드리지 않는다. 이 파일이 브랜드 룩을 담당.
   ================================================================ */

/* --- 픽셀 폰트 (Galmuri: 한글 지원 비트맵 폰트) --- */
@import url("https://cdn.jsdelivr.net/gh/quiple/galmuri/dist/Galmuri7.css");
@import url("https://cdn.jsdelivr.net/gh/quiple/galmuri/dist/Galmuri11.css");
@import url("https://cdn.jsdelivr.net/gh/quiple/galmuri/dist/Galmuri14.css");

/* ----------------------------------------------------------------
   1) daisyUI v5 시맨틱 컬러 → 파스텔 LCD 팔레트로 재정의 (사이트 전역)
   ---------------------------------------------------------------- */
:root,
[data-theme="light"] {
    --color-base-100: #fff7fb;   /* 표면(카드) : 크림 화이트 */
    --color-base-200: #f3e9f6;   /* 페이지 배경 : 옅은 라벤더 */
    --color-base-300: #e4d1ec;   /* 경계선 */
    --color-base-content: #4a3b63; /* 본문 잉크(진한 자두빛) */

    --color-primary: #f6a5c0;    /* 핑크 */
    --color-primary-content: #4a2b40;
    --color-secondary: #9fdcc2;  /* 민트 */
    --color-secondary-content: #234a3b;
    --color-accent: #c3a9ee;     /* 라벤더 */
    --color-accent-content: #38295a;
    --color-neutral: #6b5b8a;    /* 자두 뉴트럴 */
    --color-neutral-content: #fff6fb;

    --color-info: #a8d8f0;    --color-info-content: #204457;
    --color-success: #b6e3c6; --color-success-content: #1f4a30;
    --color-warning: #ffe0a0; --color-warning-content: #5c4410;
    --color-error: #f6aeb8;   --color-error-content: #5a1f2a;

    /* 다마고치답게 각진 모서리 */
    --radius-selector: 0.25rem;
    --radius-field: 0.25rem;
    --radius-box: 0.375rem;

    /* 브랜드 로컬 변수 */
    --lcd-ink: #5b4b7a;
    --lcd-screen: #d8ecdf;   /* 민트 LCD 화면 */
    --lcd-screen-pink: #ffe0ec;
    --lcd-screen-lav: #e7dcfa;
    --lcd-shell: #ffc7dc;    /* 다마고치 본체 핑크 셸 */
    --lcd-shell-2: #f7b0cd;
}

/* ----------------------------------------------------------------
   2) 전역 브랜드 톤 — UI 크롬에 픽셀 폰트 (본문 가독성은 유지)
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.card-title, .btn, .menu, .badge, .tab,
.stat-value, .stat-title, .stat-desc,
#site-header, #site-footer {
    font-family: "Galmuri11", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    letter-spacing: 0.02em;
}

/* 헤더 / 푸터 살짝 레트로하게 (전 페이지 공통, 게시판 가독성은 그대로) */
#site-header.navbar {
    border-bottom: 3px solid var(--color-base-300);
}
#site-header .menu a { border-radius: 0.25rem; }

#site-footer {
    border-top: 3px solid var(--color-base-300);
}

/* 이미지 렌더링 픽셀화(마스코트/아이콘) */
.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ================================================================
   3) 랜딩 페이지 전용 (.y2k 스코프) — LCD / 다마고치 룩
   home main.php 콘텐츠를 <div class="y2k"> 로 감싼다.
   ================================================================ */
.y2k {
    font-family: "Galmuri11", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    color: var(--lcd-ink);
}
.y2k .pixel-title {
    font-family: "Galmuri14", "Galmuri11", sans-serif;
    line-height: 1.5;
}
.y2k .pixel-sm { font-family: "Galmuri7", "Galmuri11", sans-serif; }

/* --- 도트 매트릭스 LCD 화면 패널 --- */
.y2k .lcd {
    position: relative;
    background-color: var(--lcd-screen);
    background-image: radial-gradient(var(--lcd-ink) 0.6px, transparent 0.7px);
    background-size: 4px 4px;
    background-position: -1px -1px;
    border: 3px solid var(--lcd-ink);
    border-radius: 0.5rem;
    box-shadow: 0 5px 0 0 rgba(91, 75, 122, 0.28);
    color: var(--lcd-ink);
}
.y2k .lcd-pink { background-color: var(--lcd-screen-pink); }
.y2k .lcd-lav  { background-color: var(--lcd-screen-lav); }

/* LCD 화면 안 글자는 화면색 위에서 진하게 */
.y2k .lcd :where(h1,h2,h3,h4,p,span,div) { color: var(--lcd-ink); }

/* --- 픽셀 박스(각진 하드 섀도) --- */
.y2k .pixel-box {
    background: var(--color-base-100);
    border: 3px solid var(--lcd-ink);
    border-radius: 0.375rem;
    box-shadow: 4px 4px 0 0 rgba(91, 75, 122, 0.22);
}

/* --- 다마고치 본체 셸 --- */
.y2k .tama-shell {
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,0.55) 0 22%, transparent 40%),
        linear-gradient(160deg, var(--lcd-shell) 0%, var(--lcd-shell-2) 100%);
    border: 4px solid var(--lcd-ink);
    border-radius: 2.5rem;
    box-shadow: 6px 8px 0 0 rgba(91, 75, 122, 0.25), inset 0 3px 0 rgba(255,255,255,0.4);
}

/* 다마고치 하단 물리 버튼 3개 */
.y2k .tama-btns { display: flex; justify-content: center; gap: 1.75rem; }
.y2k .tama-btn {
    width: 2.75rem; height: 2.75rem; border-radius: 9999px;
    border: 3px solid var(--lcd-ink);
    background: linear-gradient(160deg, #fff 0%, #f3d9e6 100%);
    box-shadow: 0 4px 0 0 rgba(91,75,122,0.3);
    display: grid; place-items: center;
    color: var(--lcd-ink); font-size: 1rem;
    transition: transform .08s ease, box-shadow .08s ease;
    cursor: pointer;
}
.y2k .tama-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 rgba(91,75,122,0.3); }
.y2k a.tama-btn:hover { background: linear-gradient(160deg,#fff 0%, #ffc7dc 100%); }

/* --- 상단 상태바(배터리/하트) --- */
.y2k .statusbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; font-family: "Galmuri7", sans-serif; font-size: 0.7rem;
    padding: 0.35rem 0.6rem;
    border-bottom: 2px dashed rgba(91,75,122,0.4);
}
.y2k .battery {
    display: inline-flex; align-items: center; gap: 2px;
    border: 2px solid var(--lcd-ink); border-radius: 2px;
    padding: 1px 2px; position: relative;
}
.y2k .battery::after {
    content: ""; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
    width: 2px; height: 6px; background: var(--lcd-ink); border-radius: 0 1px 1px 0;
}
.y2k .battery i { width: 3px; height: 8px; background: var(--lcd-ink); display: inline-block; }
.y2k .battery i.off { opacity: 0.18; }

/* 픽셀 하트 게이지 */
.y2k .hearts { letter-spacing: 2px; color: #e46a8a; }

/* --- 픽셀 아이콘 타일 --- */
.y2k .pixel-icon {
    width: 3.5rem; height: 3.5rem; display: grid; place-items: center;
    border: 3px solid var(--lcd-ink); border-radius: 0.5rem;
    font-size: 1.4rem;
    box-shadow: 3px 3px 0 0 rgba(91,75,122,0.18);
}
.y2k .ico-pink { background: var(--lcd-screen-pink); }
.y2k .ico-mint { background: var(--lcd-screen); }
.y2k .ico-lav  { background: var(--lcd-screen-lav); }

/* --- 큰 번호 타일(주요 작업 01~04) --- */
.y2k .num-tile {
    font-family: "Galmuri14", sans-serif;
    display: grid; place-items: center; gap: 0.25rem;
    padding: 1.25rem 0.5rem;
}
.y2k .num-tile .num {
    font-size: 2rem; line-height: 1;
    -webkit-text-stroke: 1px var(--lcd-ink);
    color: transparent;
}

/* --- 픽셀 버튼(CTA) --- */
.y2k .btn.pixel-btn,
.y2k .pixel-btn {
    border: 3px solid var(--lcd-ink) !important;
    border-radius: 0.375rem;
    box-shadow: 4px 4px 0 0 rgba(91,75,122,0.28);
    font-family: "Galmuri11", sans-serif;
}
.y2k .pixel-btn:active { transform: translateY(2px); box-shadow: 2px 2px 0 0 rgba(91,75,122,0.28); }

/* 배지(챕터 태그) */
.y2k .chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: "Galmuri7", sans-serif; font-size: 0.72rem;
    padding: 0.2rem 0.6rem; border: 2px solid var(--lcd-ink);
    border-radius: 9999px; background: var(--color-base-100);
}

/* 점멸(깜빡이는 NEW / 커서) */
@keyframes y2k-blink { 0%,60% { opacity: 1; } 61%,100% { opacity: 0; } }
.y2k .blink { animation: y2k-blink 1.1s steps(1) infinite; }

/* 마스코트 살짝 통통 튀기 */
@keyframes y2k-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.y2k .bob { animation: y2k-bob 1.6s ease-in-out infinite; }

/* 게시판(free) 영역이 LCD 안에서도 읽히도록 */
.y2k .lcd .latest,
.y2k .lcd table { color: var(--lcd-ink); }

/* 모션 최소화 선호 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
    .y2k .blink, .y2k .bob { animation: none; }
}

/* ----------------------------------------------------------------
   사이트 푸터 (#site-footer) — 다마고치 LCD 화면(도트 매트릭스)
   ---------------------------------------------------------------- */
#site-footer {
    background-color: var(--lcd-screen-pink);
    background-image: radial-gradient(var(--lcd-ink) 0.6px, transparent 0.7px);
    background-size: 4px 4px;
    background-position: -1px -1px;
    border-top: 3px solid var(--lcd-ink);
    color: var(--lcd-ink);
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, .4);
}
/* LCD 화면 위 글자 — 진한 잉크로 통일 */
#site-footer p,
#site-footer a,
#site-footer address { color: var(--lcd-ink); }
/* 회사명 — 픽셀(Galmuri) 타이틀 */
#site-footer address p:first-child {
    font-family: "Galmuri14", "Galmuri11", sans-serif;
    font-weight: 700;
}
#site-footer nav a { font-family: "Galmuri11", sans-serif; }
#site-footer nav a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }