/* ===========================================================================
   자동 사진첩 - 인생네컷 감성 디자인 시스템

   왜 따로 두는가: 사진첩 화면이 5개(랜딩/목록/업로드/장면정리/휴지통)인데, 이 프로젝트에는
   공통 base 템플릿이 없어서 지금까지 페이지마다 <style>을 따로 적어왔다. 그래서 색 하나
   바꾸려면 5군데를 고쳐야 했고 실제로 화면마다 조금씩 달라져 있었다.
   이 파일은 각 페이지의 인라인 <style> **뒤에** 붙어서 겉모습만 덮어쓴다. DOM 구조와
   클래스 이름은 그대로 두므로 장면 정리 화면의 드래그앤드롭 같은 기능이 깨지지 않는다.

   도록(디지털 도록)에는 붙이지 않는다. 두 서비스는 성격이 정반대라 -- 도록은 작가의
   작품을 거는 조용한 전시, 사진첩은 여행의 기록 -- 같은 옷을 입히면 둘 다 애매해진다.

   컨셉: 인생네컷 (즉석 사진 부스)
     · 검은 배경 위에 흰 사진 프레임 -- 부스에서 갓 뽑은 사진 띠
     · 형광 라임 포인트 -- 화면에서 딱 한 가지만 튀게
     · 필름 구멍(퍼포레이션) 띠로 "필름" 은유를 반복
     · 아주 굵은 제목 + 좁은 자간, 날짜는 등폭 글꼴로 카메라 날짜 각인처럼
   =========================================================================== */

:root {
    --ink:    #0e0e10;   /* 배경 */
    --ink2:   #17171b;   /* 한 단계 밝은 면 */
    --ink3:   #202026;   /* 눌린 면 / 입력칸 */
    --paper:  #ffffff;   /* 사진 프레임 */
    --pop:    #ccff00;   /* 형광 라임 -- 포인트는 이것 하나만 */
    --pop-d:  #b2e000;
    --pop2:   #ff3d71;   /* 핫핑크 -- 삭제·경고 (어두운 바탕에서) */
    --pop2-d: #d4144a;   /* 흰 사진 프레임 위에 얹을 때. 밝은 핑크는 흰 바탕에서 안 읽힌다 */
    --line:   rgba(255,255,255,0.13);
    --muted:  #8b8b95;
    --mono:   ui-monospace, "SFMono-Regular", "Consolas", "D2Coding", monospace;

    /* 기존 파일들이 쓰던 변수도 새 값으로 덮는다 (그대로 두면 옛 청록이 남는다) */
    --primary: #ccff00;
    --primary-hover: #b2e000;
    --text-dark: #ffffff;
    --text-light: #8b8b95;
    --teal: #ccff00;
    --teal-dark: #b2e000;
    --glass-bg: #17171b;
    --glass-border: rgba(255,255,255,0.13);
    --glass-shadow: none;
}

/* --- 바탕 --------------------------------------------------------------- */
html, body {
    background: var(--ink) !important;
    color: #fff;
    animation: none !important;          /* 기존의 파란 그라데이션 애니메이션 정지 */
    -webkit-font-smoothing: antialiased;
}
/* 맨 위 필름 구멍 띠가 내용을 가리지 않도록 그만큼 아래로 민다 */
body { font-family: 'Pretendard', -apple-system, sans-serif; padding-top: 14px; }
.app-container { min-height: calc(100vh - 14px) !important; }

::selection { background: var(--pop); color: #000; }

/* 필름 구멍 띠. 화면 맨 위에 한 줄 깔아 "필름"을 계속 상기시킨다. */
body::before {
    content: '';
    position: fixed; top: 0; left: 0; right: 0; height: 14px; z-index: 50;
    background:
        radial-gradient(circle at 8px 7px, var(--ink) 3.2px, transparent 3.6px) 0 0 / 16px 14px,
        var(--pop);
    pointer-events: none;
}

/* --- 판(패널) ----------------------------------------------------------- */
.glass-panel {
    background: var(--ink2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    border-radius: 14px !important;
}

.app-container { padding-top: 30px; }

/* --- 사이드바 ----------------------------------------------------------- */
.sidebar .logo {
    color: #fff; font-weight: 900; letter-spacing: -0.6px;
    font-size: 20px; padding-bottom: 4px;
}
/* 로고 아래 필름 구멍 한 줄 */
.sidebar .logo::after {
    content: ''; display: block; height: 10px; margin: 12px -4px 0;
    background: radial-gradient(circle at 6px 5px, var(--ink2) 2.4px, transparent 2.8px)
                0 0 / 12px 10px, var(--line);
    border-radius: 2px;
}
.sidebar > div { color: var(--muted) !important; border-bottom-color: var(--line) !important; }
.sidebar > div div { color: #fff !important; }
.sidebar a[href="/logout"] {
    border-color: var(--line) !important; color: var(--muted) !important;
    background: transparent !important;
}
.sidebar a[href="/logout"]:hover { border-color: var(--pop) !important; color: var(--pop) !important; }

.nav-item {
    color: var(--muted) !important; font-weight: 700; border-radius: 9px;
    border: 1px solid transparent; transition: 0.14s;
}
.nav-item:hover {
    background: var(--ink3) !important; color: #fff !important;
    transform: none !important; border-color: var(--line);
}
.nav-item.active {
    background: var(--pop) !important; color: #000 !important;
    box-shadow: none !important; font-weight: 800;
}

/* --- 머리말 ------------------------------------------------------------- */
.main-header h1, .page-head h1 {
    font-weight: 900 !important; letter-spacing: -1.2px; color: #fff;
}
.main-header p, .page-head p { color: var(--muted) !important; }

/* 큰 제목 옆 "촬영 중" 느낌의 빨간 점 */
.main-header h1::after {
    content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--pop2); margin-left: 10px; vertical-align: middle;
    animation: rec 1.6s ease-in-out infinite;
}
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.btn-new, .cta {
    background: var(--pop) !important; color: #000 !important;
    border-radius: 999px !important; font-weight: 900 !important;
    box-shadow: none !important; border: 0; letter-spacing: -0.3px;
}
.btn-new:hover, .cta:hover {
    background: #fff !important; color: #000 !important; transform: translateY(-2px);
}

/* --- 통계 타일 ---------------------------------------------------------- */
.stat-tile { border-radius: 12px !important; }
.stat-tile b { color: var(--pop); font-family: var(--mono); font-weight: 700; }
.stat-tile span { color: var(--muted); font-weight: 600; }

/* --- 목록 판 ------------------------------------------------------------ */
.list-section h2 { color: #fff; font-weight: 900; letter-spacing: -0.5px; }
.list-section h2::before {
    content: '● '; color: var(--pop2); font-size: 11px; vertical-align: 3px;
}

/* =========================================================================
   사진집 카드 -- 여기가 이 디자인의 핵심.
   검은 배경 위에 흰 사진 프레임을 얹어 "부스에서 갓 뽑은 사진 띠"처럼 보이게 한다.
   아래쪽을 두껍게 비우는 게 즉석 사진의 특징이라 padding으로 만든다.
   ========================================================================= */
.book-card {
    background: var(--paper) !important;
    border: 0 !important;
    border-radius: 3px !important;
    padding: 11px 11px 0 !important;
    overflow: visible !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.book-card:hover {
    transform: translateY(-5px) rotate(-0.8deg) !important;   /* 흩어놓은 사진처럼 살짝 기울기 */
    box-shadow: 0 16px 34px rgba(0,0,0,0.62) !important;
}

.bc-cover {
    height: 190px !important;
    background-color: #d8d8d8 !important;
    border-radius: 0 !important;
    position: relative;
    filter: contrast(1.06) saturate(1.05);
}
/* 사진 위 오른쪽 아래 날짜 각인 (필름 카메라의 날짜 인쇄).
   밝은 사진 위에서는 주황 글자가 묻히므로, 아래쪽에 어두운 그라데이션을 깔아준다. */
.bc-cover::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    pointer-events: none;
}
.bc-cover::after {
    content: attr(data-stamp);
    position: absolute; right: 9px; bottom: 7px;
    font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px;
    color: #ffb43c; text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
/* 날짜가 없는 사진집에는 그림자만 남으면 어색하므로 둘 다 숨긴다 */
.bc-cover[data-stamp=""]::before, .bc-cover[data-stamp=""]::after { display: none; }

.bc-body { padding: 14px 5px 16px !important; }
.bc-body h3 {
    color: #0e0e10 !important; font-weight: 900 !important;
    letter-spacing: -0.5px; font-size: 17px !important;
}
.bc-meta { color: #56565e !important; }
/* 흰 사진 프레임 위의 회색은 충분히 진해야 읽힌다 (연회색은 대비 3.4로 모자랐다) */
.bc-meta > div { font-family: var(--mono); font-size: 11.5px; color: #5f5f68; }

/* 배지는 스티커처럼 -- 각지고, 살짝 기울고, 검정/라임 */
.badge {
    border-radius: 3px !important; font-weight: 800 !important;
    font-size: 10.5px !important; letter-spacing: 0.2px;
    padding: 4px 8px !important; text-transform: uppercase;
}
.badge.on  { background: var(--pop) !important; color: #000 !important; }
.badge.off { background: #ebebee !important; color: #4a4a52 !important; }
.badge.warn { background: var(--pop2) !important; color: #fff !important; }

/* --- 카드 안 버튼 ------------------------------------------------------- */
.bc-btn {
    border-radius: 4px !important; font-weight: 800 !important; letter-spacing: -0.2px;
    border: 1.5px solid #0e0e10 !important; transition: 0.14s;
}
.bc-primary { background: #0e0e10 !important; color: var(--pop) !important; }
.bc-primary:hover { background: var(--pop) !important; color: #000 !important; }
.bc-outline { background: transparent !important; color: #0e0e10 !important; }
.bc-outline:hover { background: #0e0e10 !important; color: #fff !important; }
/* 카드는 흰 바탕이므로 진한 핑크를 쓴다 */
.bc-danger {
    background: transparent !important; color: var(--pop2-d) !important;
    border-color: var(--pop2-d) !important;
}
.bc-danger:hover { background: var(--pop2-d) !important; color: #fff !important; }
.bc-restore { background: var(--pop) !important; color: #000 !important; border-color: #0e0e10 !important; }
.bc-restore:hover { background: #0e0e10 !important; color: var(--pop) !important; }
.bc-purge { background: transparent !important; color: var(--pop2-d) !important; border-color: var(--pop2-d) !important; }
.bc-purge:hover { background: var(--pop2-d) !important; color: #fff !important; }

.bc-save {
    background: transparent !important; color: #0e0e10 !important;
    border: 1.5px dashed #0e0e10 !important; border-radius: 4px !important;
    font-weight: 800 !important;
}
.bc-save:hover { background: #0e0e10 !important; color: var(--pop) !important; border-style: solid !important; }
.bc-save small { font-family: var(--mono); opacity: 0.6; }

.game-group { border-top: 1.5px dashed #d4d4da !important; }
.game-label {
    color: #6e6e78 !important; text-transform: uppercase;
    font-size: 10px !important; letter-spacing: 1.4px !important; font-weight: 800 !important;
}

/* --- 안내 띠 (보관 권장) ------------------------------------------------ */
.keep-note {
    background: var(--ink2) !important; border: 1px solid var(--line) !important;
    border-left: 4px solid var(--pop) !important; border-radius: 12px;
    color: #fff;
}
.keep-note b { color: var(--pop) !important; }
.keep-note span { color: var(--muted) !important; }

.trash-link, .back-btn, .back-link {
    background: transparent !important; border: 1px solid var(--line) !important;
    color: var(--muted) !important; font-weight: 700 !important; border-radius: 999px !important;
}
.trash-link:hover, .back-btn:hover, .back-link:hover {
    border-color: var(--pop2) !important; color: var(--pop2) !important;
}
.trash-link b { color: var(--pop2) !important; font-family: var(--mono); }

/* --- 비어있을 때 -------------------------------------------------------- */
.empty { color: var(--muted) !important; }
.empty h3 { color: #fff !important; font-weight: 900; letter-spacing: -0.5px; }
.empty p { color: var(--muted) !important; }
.empty .big { opacity: 0.6; }   /* 이모지라 filter 를 걸면 뭉개진다 -- 투명도만 준다 */

/* =========================================================================
   랜딩 화면 (/photo)
   ========================================================================= */
.topbar .brand { color: #fff !important; font-weight: 900; letter-spacing: -0.8px; }
.topbar .links a {
    background: transparent !important; border-color: var(--line) !important;
    color: var(--muted) !important; font-weight: 700;
}
.topbar .links a:hover { border-color: #fff !important; color: #fff !important; }
.topbar .links a.primary {
    background: var(--pop) !important; color: #000 !important; border-color: var(--pop) !important;
}
.topbar .links a.primary:hover { background: #fff !important; border-color: #fff !important; }

.hero {
    background: var(--ink2) !important;
    border: 1px solid var(--line);
    border-radius: 18px !important;
    position: relative; overflow: hidden;
}
/* 히어로 위아래에 필름 구멍 띠 */
.hero::before, .hero::after {
    content: ''; position: absolute; left: 0; right: 0; height: 15px;
    background: radial-gradient(circle at 9px 7.5px, var(--ink2) 3.4px, transparent 3.8px)
                0 0 / 18px 15px, var(--pop);
}
.hero::before { top: 0; }
.hero::after  { bottom: 0; }
.hero h1 {
    font-family: 'Pretendard', sans-serif !important;
    font-weight: 900 !important; letter-spacing: -2px !important; color: #fff;
}
/* 제목 둘째 줄을 형광펜으로 그은 것처럼 */
.hero h1 .hl {
    background: var(--pop); color: #000; padding: 0 12px;
    border-radius: 3px; display: inline-block; transform: rotate(-1.2deg);
}
.hero p { color: var(--muted) !important; }
.hero p b { color: #fff; }

h2.sec { color: #fff; font-weight: 900 !important; letter-spacing: -1px !important; }
h2.sec::after {
    content: ''; display: block; width: 44px; height: 4px; background: var(--pop);
    margin: 14px auto 0; border-radius: 2px;
}
p.sub { color: var(--muted) !important; }

.step {
    background: var(--ink2) !important; border: 1px solid var(--line) !important;
    box-shadow: none !important; border-radius: 14px !important;
}
.step:hover { border-color: rgba(204,255,0,0.4) !important; }
.step .n {
    background: var(--pop) !important; color: #000 !important;
    border-radius: 6px !important; font-family: var(--mono); font-weight: 800;
}
.step h3 { color: #fff !important; font-weight: 900; letter-spacing: -0.5px; }
.step p { color: var(--muted) !important; }

/* 공개 사진집 카드도 흰 프레임으로 */
.book {
    background: var(--paper) !important; border: 0 !important;
    border-radius: 3px !important; padding: 10px 10px 0 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.book:hover { transform: translateY(-5px) rotate(-0.8deg) !important; }
.book .cov { border-radius: 0 !important; filter: contrast(1.06) saturate(1.05); }
.book .bd { padding: 13px 4px 15px !important; }
.book h3 { color: #0e0e10 !important; font-weight: 900; letter-spacing: -0.4px; }
.book span { color: #5f5f68 !important; font-family: var(--mono); font-size: 12px !important; }

footer { border-top: 1px solid var(--line) !important; }
footer a { color: var(--muted) !important; }
footer a:hover { color: var(--pop) !important; }
footer p { color: #7a7a82 !important; }

/* =========================================================================
   업로드 화면 (/photobook/new)
   ========================================================================= */
.wrap .page-head h1 { color: #fff; }
.top-fields input, .top-fields select, input[type="text"], select, textarea {
    background: var(--ink3) !important; color: #fff !important;
    border: 1px solid var(--line) !important; border-radius: 8px !important;
}
input[type="text"]:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--pop) !important;
}
label { color: var(--muted) !important; }

.tip {
    background: var(--ink3) !important; border: 1px solid var(--line) !important;
    border-left: 3px solid var(--pop) !important; color: var(--muted) !important;
}
.tip b { color: var(--pop) !important; }

.bar-outer { background: var(--ink3) !important; border-radius: 999px !important; }
.bar-inner { background: var(--pop) !important; }
.submit-hint { color: var(--muted) !important; }
.alert-error {
    background: rgba(255,61,113,0.12) !important; color: #ff8fab !important;
    border: 1px solid rgba(255,61,113,0.4) !important;
}

/* 드래그앤드롭 영역 (drop_zone.js 가 쓰는 공용 클래스) */
.drop-zone, #drop-zone, [class*="drop"] {
    border-color: var(--line) !important;
}

/* =========================================================================
   장면 정리 화면 (/photobook/<id>/review)
   드래그앤드롭 기능이 클래스에 묶여 있으므로 구조는 그대로 두고 색만 바꾼다.
   ========================================================================= */
.scene {
    background: var(--ink2) !important; border: 1px solid var(--line) !important;
    border-radius: 12px !important;
}
.scene-head { border-bottom: 1px solid var(--line) !important; }
.scene-no {
    background: var(--pop) !important; color: #000 !important;
    font-family: var(--mono); font-weight: 800; border-radius: 5px !important;
}
.scene-head input { color: #fff !important; }
.scene-meta { color: var(--muted) !important; font-family: var(--mono); font-size: 12px; }

/* 사진 한 장 = 인화된 사진. 흰 테두리를 둘러 필름 컷처럼 보이게 한다. */
.shot {
    background: var(--paper) !important; padding: 5px 5px 5px !important;
    border-radius: 2px !important; border: 0 !important;
    transition: transform 0.14s ease;
}
.shot:hover { transform: translateY(-3px) rotate(-1deg); }
.shot img { border-radius: 0 !important; }
.shot.picked, .shot.selected {
    outline: 3px solid var(--pop) !important; outline-offset: 2px;
}

.strip { border-color: var(--line) !important; }
.sim-group { border-color: var(--line) !important; }
.sim-toggle {
    background: var(--ink3) !important; color: var(--pop) !important;
    border: 1px solid var(--line) !important; font-weight: 800;
}
.sim-toggle:hover { background: var(--pop) !important; color: #000 !important; }
.sim-split {
    background: transparent !important; color: var(--muted) !important;
    border: 1px solid var(--line) !important;
}
.sim-split:hover { border-color: var(--pop2) !important; color: var(--pop2) !important; }
.scene-flash {
    background: rgba(204,255,0,0.12) !important; color: var(--pop) !important;
    border: 1px solid rgba(204,255,0,0.32);
}
#btn-merge-sim {
    background: #000 !important; color: var(--pop) !important; border: 0 !important;
    border-radius: 4px !important; font-weight: 800;
}
#btn-merge-sim:hover { background: #fff !important; color: #000 !important; }

.badge-exact { background: var(--pop) !important; color: #000 !important; }
.badge-guess { background: #ffb03a !important; color: #000 !important; }
.badge-none  { background: var(--ink3) !important; color: var(--muted) !important; }
/* 밝은 핑크 + 흰 글자는 대비 3.4라 작은 배지에서 안 읽힌다. 진한 쪽을 쓴다. */
.badge-similar { background: var(--pop2-d) !important; color: #fff !important; }

.btn-merge {
    background: transparent !important; color: var(--pop) !important;
    border: 1.5px solid var(--pop) !important; font-weight: 800;
}
.btn-merge:hover { background: var(--pop) !important; color: #000 !important; }
.btn-del {
    background: transparent !important; color: var(--pop2) !important;
    border: 1.5px solid var(--pop2) !important; font-weight: 800;
}
.btn-del:hover { background: var(--pop2) !important; color: #fff !important; }

.per-page select { background: var(--ink3) !important; color: #fff !important; }
.guide { background: var(--ink3) !important; color: var(--muted) !important; border: 1px solid var(--line) !important; }
.guide b { color: var(--pop) !important; }

.pick-bar, .undo-bar {
    background: var(--pop) !important; color: #000 !important;
    border: 0 !important; font-weight: 800;
}
.pick-bar button, .undo-bar button {
    background: #000 !important; color: var(--pop) !important; border: 0 !important;
    font-weight: 800; border-radius: 4px !important;
}

.footer-bar {
    background: var(--ink2) !important; border-top: 1px solid var(--line) !important;
    backdrop-filter: none !important;
}

/* 테마 고르기 카드 */
.theme-card {
    background: var(--ink3) !important; border: 1.5px solid var(--line) !important;
    border-radius: 10px !important; color: #fff;
}
.theme-card:hover { border-color: rgba(204,255,0,0.5) !important; }
.theme-card input:checked + *, .theme-card.on {
    border-color: var(--pop) !important;
}
.theme-head { color: #fff !important; font-weight: 800; }
.swatch { border-radius: 5px !important; border: 1px solid var(--line) !important; }

/* =========================================================================
   명시도 싸움에서 지는 것들

   각 페이지의 인라인 <style>에 있는 id 규칙(#btn-submit)이나 겹친 클래스
   (.theme-card.on)는 이 파일보다 나중에 실려도 명시도가 높아서 이깁니다.
   그대로 두면 "라임 배경 + 흰 글자"나 "흰 배경 + 흰 글자"처럼 안 보이는 조합이
   생기므로, 같은 명시도로 하나씩 되받아 적는다.
   ========================================================================= */

/* --- 업로드 화면 --- */
#drop-zone {
    border: 2px dashed rgba(204,255,0,0.45) !important;
    background: var(--ink2); border-radius: 14px;
}
#drop-zone:hover { border-color: var(--pop) !important; background: #1c1c21; }
#drop-zone.dragover {
    background: rgba(204,255,0,0.10) !important; border-color: var(--pop) !important;
}
#drop-zone .headline { color: #fff; font-weight: 900; letter-spacing: -0.4px; }
#drop-zone .sub { color: var(--muted); }
/* 이모지에는 filter 를 걸지 않는다. grayscale+brightness 를 주니 흰 덩어리로 뭉개졌다. */

#summary { color: #fff; }
#summary .warn { color: var(--pop2); }
#progress-box { color: #fff; }
#progress-label { color: #fff; font-family: var(--mono); }
#progress-detail { color: var(--muted); font-family: var(--mono); }

/* 라임 바탕에는 반드시 검은 글자 (흰 글자는 거의 안 보인다) */
#btn-submit {
    background: var(--pop) !important; color: #000 !important;
    border-radius: 999px !important; font-weight: 900 !important;
    box-shadow: none !important;
}
#btn-submit:hover:not(:disabled) { background: #fff !important; color: #000 !important; }
/* 못 누르는 상태를 "흐린 라임"으로 두면 탁한 올리브가 되어 오히려 제일 눈에 띈다.
   아예 회색으로 빼서 "지금은 할 수 없는 것"임이 한눈에 보이게 한다. */
#btn-submit:disabled, #btn-finalize:disabled, #btn-suggest:disabled {
    background: var(--ink3) !important; color: #6a6a74 !important; opacity: 1 !important;
}

/* --- 장면 정리 화면 --- */
#btn-suggest {
    background: var(--pop) !important; color: #000 !important; font-weight: 900;
}
#btn-suggest:hover { background: #fff !important; color: #000 !important; }
#btn-reanalyze {
    background: transparent !important; color: var(--muted) !important;
    border: 1px solid var(--line) !important;
}
#btn-reanalyze:hover {
    background: transparent !important; border-color: var(--pop) !important;
    color: var(--pop) !important;
}
#suggest-note { color: var(--pop) !important; font-family: var(--mono); }

/* 이 화면에서 가장 중요한 버튼. --primary 를 라임으로 바꾼 탓에 "라임 바탕 + 흰 글자"가
   되어 대비 1.18 (사실상 안 보임)이 됐던 곳이다. 브라우저 검사가 잡아냈다. */
#btn-finalize {
    background: var(--pop) !important; color: #000 !important;
    border-radius: 999px !important; font-weight: 900 !important;
    box-shadow: none !important; letter-spacing: -0.3px;
}
#btn-finalize:hover { background: #fff !important; color: #000 !important; }
.footer-inner .note { color: var(--muted) !important; }

/* 흰 배경 + 흰 글자가 되던 곳 */
.theme-card.on {
    background: var(--ink3) !important; border-color: var(--pop) !important;
    box-shadow: 0 0 0 2px rgba(204,255,0,0.25);
}
.theme-card small { color: var(--muted) !important; }

/* 대표 사진 딱지: 라임 바탕이므로 글자는 검정 */
.shot .rep-tag { background: var(--pop) !important; color: #000 !important; border-radius: 3px !important; }
.shot .pick { background: rgba(255,255,255,0.9) !important; border-color: #0e0e10 !important; }
.shot .pick::after { color: #000 !important; }
.shot .pick:hover { border-color: var(--pop2) !important; }
.shot.picked .pick { background: var(--pop) !important; border-color: #0e0e10 !important; }
.shot.is-rep img, .shot.picked img { border-color: var(--pop) !important; }
.shot.picked img { box-shadow: 0 0 0 3px rgba(204,255,0,0.35) !important; }
.shot:hover img { border-color: rgba(204,255,0,0.5) !important; }

.scene.drop-target {
    background: rgba(204,255,0,0.10) !important; border-color: var(--pop) !important;
}
.strip.photo-drop {
    outline-color: var(--pop) !important; background: rgba(204,255,0,0.08) !important;
}
.drag-handle { color: var(--muted) !important; }
.drag-handle:hover { background: var(--ink3) !important; color: var(--pop) !important; }

/* 선택 안내 띠는 라임(할 일), 되돌리기 띠는 핑크(지운 것) -- 색으로 뜻을 구분한다 */
.pick-bar { background: var(--pop) !important; border: 0 !important; box-shadow: none !important; }
.pick-bar .hint { color: rgba(0,0,0,0.62) !important; font-weight: 600; }
.undo-bar {
    background: var(--pop2) !important; color: #fff !important; border: 0 !important;
}
.undo-bar button { background: #fff !important; color: var(--pop2) !important; }

/* =========================================================================
   작은 화면
   ========================================================================= */
@media (max-width: 900px) {
    body::before { height: 10px; background-size: 12px 10px, auto; }
    .app-container { padding-top: 18px; }
    .book-card:hover { transform: translateY(-3px) !important; }   /* 모바일에선 기울이지 않는다 */
    .hero::before, .hero::after { height: 11px; background-size: 14px 11px, auto; }
}

/* 움직임을 줄이도록 설정한 사용자는 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) {
    .main-header h1::after { animation: none; }
    .book-card, .book, .shot { transition: none; }
    .book-card:hover, .book:hover, .shot:hover { transform: none !important; }
}