/* =====================================================================
   픽핏 디자인 — 지브리 느낌의 따뜻하고 부드러운 손그림 감성
   테마 변수만 바꾸면 전체 색이 바뀜. 클래스·id 이름은 JS와 연결되어 있으니 유지.
   ===================================================================== */
:root, [data-theme="default"] {
  --bg: #f3eee7;            /* 차분한 웜 그레이 크림 */
  --bg-tint: #f3eee7;
  --surface: #ffffff;
  --surface-2: #f4efe8;
  --text: #1f1b17;
  --muted: #7d746b;
  --accent: #d97b4f;        /* 테라코타 (포인트 하나) */
  --accent-soft: #fbe9df;
  --accent-text: #ffffff;
  --sage: #8fb48a;
  --sage-soft: #e6efe3;
  --sky: #a7cbe0;
  --sky-soft: #e4eef5;
  --danger: #d9534f;
  --border: #ebe4da;
  --hairline: rgba(31, 27, 23, 0.06);
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 10px 30px rgba(31, 27, 23, 0.10);
  --shadow-sm: 0 1px 2px rgba(31, 27, 23, 0.05), 0 6px 18px rgba(31, 27, 23, 0.05);
  --tabbar: rgba(255, 255, 255, 0.92);
  --guide: #fff6e6;
  --glass: rgba(18, 14, 11, 0.42);
  --glass-border: rgba(255, 255, 255, 0.22);
}
[data-theme="dark"] {                      /* 밤: 눈부시지 않은 남색 밤하늘 */
  --bg: #15171c;
  --bg-tint: #15171c;
  --surface: #1f2228;
  --surface-2: #2a2e36;
  --text: #f3efe9;
  --muted: #9b958c;
  --hairline: rgba(255, 255, 255, 0.07);
  --accent: #e8a26f;
  --accent-soft: #4a3a2e;
  --accent-text: #1d222c;
  --sage: #8fb48a;
  --sage-soft: #31463a;
  --sky: #8fb8d3;
  --sky-soft: #2e3f4c;
  --border: #3b4453;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --tabbar: rgba(31, 34, 40, 0.94);
  --guide: #ffe9c9;
  --glass: rgba(20, 24, 32, 0.5);
  --glass-border: rgba(255, 240, 220, 0.35);
}
[data-theme="pastel"] {                    /* 봄: 연보라·분홍 */
  --bg: #f6f1fb;
  --bg-tint: #ece4f6;
  --surface: #fffcff;
  --surface-2: #efe7f8;
  --text: #45395a;
  --muted: #9389a8;
  --accent: #b494e0;
  --accent-soft: #e9dcf7;
  --accent-text: #ffffff;
  --sage: #9ccdb6;
  --sage-soft: #ddf0e6;
  --sky: #a9c8f0;
  --sky-soft: #e0ebfb;
  --border: #e4dbf1;
  --tabbar: #fffcff;
  --guide: #f7e3ff;
}
[data-theme="retro"] {                     /* 빛바랜 필름 */
  --bg: #f1e7cf;
  --bg-tint: #e6d9b8;
  --surface: #faf3e1;
  --surface-2: #e8dcc0;
  --text: #3d3222;
  --muted: #7f6f55;
  --accent: #b9573a;
  --accent-soft: #f0d5c5;
  --accent-text: #faf3e1;
  --sage: #7f9c6e;
  --sage-soft: #d9e3c8;
  --sky: #86a9b8;
  --sky-soft: #d3e2e8;
  --border: #d6c8a6;
  --radius: 12px;
  --radius-sm: 8px;
  --tabbar: #faf3e1;
  --guide: #fff1cc;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
/* 한글은 단어 단위로 줄바꿈 ("라 / 쿤"처럼 끊기지 않게), 칸보다 긴 단어만 중간에서 끊음 */
body { word-break: keep-all; overflow-wrap: break-word; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", "Pretendard", -apple-system, "SamsungOneUI", "Roboto", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea { font: inherit; user-select: text; -webkit-user-select: text; }
.hidden { display: none !important; }
a { color: var(--accent); }

/* 앱이 뜨기 전(화면 이름이 정해지기 전)에는 검은 화면만: 켤 때 회색 빈 화면이 보이지 않게 */
html { background: transparent; }   /* 네이티브 카메라 미리보기가 비치도록 html 배경은 항상 투명 */
body:not([data-view]) { background: #000; }
body:not([data-view]) .tabbar, body:not([data-view]) .view { visibility: hidden; }
#app { position: fixed; inset: 0 0 calc(68px + env(safe-area-inset-bottom)) 0; }
.view { position: absolute; inset: 0; display: none; overflow-y: auto; padding-bottom: 28px; }
.view.active { display: block; }

/* ===== 탭바: 떠 있는 둥근 종이 조각 ===== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; height: calc(68px + env(safe-area-inset-bottom)); padding: 4px 8px env(safe-area-inset-bottom);
  background: var(--tabbar); border-top: 1px solid var(--hairline);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 21px; text-decoration: none; color: var(--muted); margin: 4px 2px; transition: color 0.2s, transform 0.15s; }
.tabbar a span { font-size: 10.5px; font-weight: 600; letter-spacing: -0.1px; }
.tabbar a.active { color: var(--accent); }
.tabbar a.active [data-icon] { transform: translateY(-1px); }
body.locked .tabbar { display: none; }

/* ===== 아이콘 (icons.js) ===== */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; vertical-align: -0.3em; flex: none; }
[data-icon] svg { width: 100%; height: 100%; display: block; }
.tabbar a [data-icon] { width: 25px; height: 25px; vertical-align: 0; }
.round [data-icon] { width: 22px; height: 22px; vertical-align: 0; }
.chip [data-icon] { width: 17px; height: 17px; margin-right: 2px; }
.unlock [data-icon] { width: 48px; height: 48px; color: #fff6e6; vertical-align: 0; }
.nav-btn [data-icon] { width: 30px; height: 30px; vertical-align: 0; }


/* ===== 공용 ===== */
.btn {
  min-height: 48px; padding: 11px 18px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform 0.1s, filter 0.15s, background 0.15s;
}
.btn:active { transform: scale(0.97); filter: brightness(0.96); }
.btn.small { min-height: 38px; padding: 7px 13px; font-size: 13px; border-radius: 11px; }
.btn.primary { background: var(--accent); color: var(--accent-text); box-shadow: 0 6px 16px rgba(217, 123, 79, 0.28); }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px rgba(217, 83, 79, 0.35); }
.btn.block { display: flex; width: 100%; margin-top: 10px; }
.btn.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn:disabled { opacity: 0.5; }
.round { width: 44px; height: 44px; border-radius: 50%; font-size: 18px; display: grid; place-items: center; }
.glass { background: var(--glass); color: #fff; border: 1px solid var(--glass-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.chip { padding: 8px 14px; min-height: 38px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; transition: background 0.15s, color 0.15s; }
.chip.selected { background: var(--accent-soft); color: var(--accent); border-color: rgba(217, 123, 79, 0.35); font-weight: 700; }
.chip.glass { background: var(--glass); color: #fff; border-color: var(--glass-border); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chip-row.scroll { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
.chip-row.scroll::-webkit-scrollbar { display: none; }

.input { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); outline: none; transition: border-color 0.15s, background 0.15s; }
.input:focus { background: var(--surface); }
.input:focus { border-color: var(--accent); }
textarea.input { resize: none; }
.input-row { display: flex; gap: 8px; margin: 10px 0; }
.input-row .input { flex: 1; }
.row-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.row-buttons .btn { flex: 1; }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 14.5px; }
.switch-row:last-child { border-bottom: 0; }
/* 켜기·끄기 스위치: 앱 전체 한 가지 크기 (설정·카메라 메뉴·편집기 공통) */
.switch-row input, .set-switch { appearance: none; -webkit-appearance: none; flex: none; align-self: center; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 13px; background: var(--switch-off, #d9d2c8); transition: background 0.2s; cursor: pointer; }
.switch-row input::after, .set-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.switch-row input:checked, .set-switch:checked { background: var(--accent); }
.switch-row input:checked::after, .set-switch:checked::after { transform: translateX(18px); }
[data-theme="dark"] { --switch-off: #3b4453; }
[data-theme="camera"] { --switch-off: #3a3a3c; }
.range { width: 100%; accent-color: var(--accent); }
.slider { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.slider-val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 6px 0; }
.sheet-msg { font-size: 15px; line-height: 1.5; margin: 8px 0; font-weight: 600; }
.hint.warn { color: #b26a00; }
.sheet-label { font-size: 12px; color: var(--muted); margin: 16px 0 6px; font-weight: 700; letter-spacing: 0.2px; }
.field-label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }
.empty { padding: 64px 24px; text-align: center; color: var(--muted); line-height: 1.7; }

.page-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(16px + env(safe-area-inset-top)) 20px 12px; background: var(--bg); }
.page-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.6px; }
.page-head h2 small { font-size: 13px; color: var(--muted); font-weight: 500; }
.head-actions { display: flex; gap: 6px; }

/* ===== 카메라 ===== */
#view-camera { background: #000; overflow: hidden; padding: 0; }
/* 네이티브 카메라: 미리보기가 WebView 뒤에 깔리므로 카메라 화면은 전부 투명 */
html.native-cam body[data-view="camera"], html.native-cam body[data-view="camera"] #app,
html.native-cam body[data-view="camera"] #view-camera, html.native-cam body[data-view="camera"] .cam-stage { background: transparent; }
html.native-cam body[data-view="camera"] #preview { display: none; }
html.native-cam body[data-view="camera"] .lock-layer.dim { background: rgba(10, 8, 6, 0.72); }
#preview { width: 100%; height: 100%; object-fit: cover; background: #000; }
#preview { transform-origin: center; transition: transform 0.12s ease-out; }
.cam-msg { position: absolute; inset: 40% 24px auto; text-align: center; color: #fff; font-size: 15px; line-height: 1.6; }
.cam-msg:empty { display: none; }

/* ===== 카메라 화면: 상단 한 줄 · 미리보기 · 하단 두 줄 · 글자 탭바 (삼성 카메라 느낌) =====
   상·하단 조작부는 검정 띠로 미리보기와 분리. 네이티브 미리보기(CameraX)는 .cam-stage 와 같은 위치·크기로 깔린다(camera.js syncViewport). */
body[data-view="camera"] #app { bottom: calc(40px + env(safe-area-inset-bottom)); }
#view-camera.active { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; color: #fff; }
#view-camera .cam-text { min-width: 48px; min-height: 44px; padding: 0 8px; background: none; border: 0; border-radius: 0; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -0.2px; white-space: nowrap; }
#view-camera .cam-text:active { opacity: 0.55; }
#view-camera .cam-text.on, #view-camera .cam-text.pressing { color: #ffd60a; }

.cam-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: env(safe-area-inset-top) calc(4px + env(safe-area-inset-right)) 0 calc(4px + env(safe-area-inset-left)); background: #000; z-index: 5; }
#view-camera #pet-chip { max-width: 60%; overflow: hidden; text-overflow: ellipsis; text-align: left; color: #8e8e93; }
#view-camera #pet-chip.found { color: #fff; font-weight: 700; }
#view-camera #pet-chip.picked { color: #fff; font-weight: 600; }   /* 알아보진 못했지만 고른 아이 */
#pet-chip.found::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #34c759; vertical-align: 2px; }

/* 미리보기 칸 = 센서와 같은 3:4. 칸이 더 길쭉하면 사진도 그 비율로 잘려(ViewPort) 양옆이 빠지고 조금 줌인된 것처럼 찍힘 */
.cam-stage { position: relative; min-height: 0; min-width: 0; overflow: hidden; width: 100%; aspect-ratio: 3 / 4; max-height: 100%; align-self: center; justify-self: center; }
.cam-stage[style*="height"] { aspect-ratio: auto; }   /* 촬영 비율 설정(camera.js applyRatio)이 크기를 정하면 그 크기로 */
.cam-badges { position: absolute; top: 6px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; z-index: 5; pointer-events: none; }
.badge-pill { padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge-pill.id-badge { display: none; }
.badge-pill.face-badge { display: inline-flex; align-items: center; padding: 3px 7px; color: #ff8fb1; }   /* 얼굴 가리기 켜짐 (작은 표시) */   /* 인식 결과는 상단 왼쪽(없음/이름)에만 */
.badge-pill.preset button { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 12px; }
.cam-caption { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0 auto; width: fit-content; z-index: 5; max-width: calc(100% - 24px); padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; line-height: 1.4; text-align: center; white-space: pre-line; pointer-events: none; }
.cam-caption.ok { background: rgba(30, 90, 50, 0.72); }
/* 배율 조절: 미리보기 아래쪽에 반투명 유리판으로 뜸. 위 = 배율 동그라미, 아래 = 가운데 노란 선 아래로 지나가는 눈금 바퀴 */
.zoom-dial { position: absolute; left: 25%; right: 25%; bottom: 10px; z-index: 7; padding: 5px 0 2px; border-radius: 14px; background: rgba(18, 18, 20, 0.62); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.zoom-dial.hidden { display: none; }
.zd-presets { display: flex; justify-content: center; align-items: center; gap: 3px; }
.zd-preset { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 9.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; transition: width 0.15s, height 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; }
.zd-preset.on { width: 30px; height: 30px; background: rgba(0, 0, 0, 0.55); color: #ffd60a; font-size: 10.5px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 214, 10, 0.55); }
.zd-wheel { position: relative; height: 26px; margin-top: 2px; overflow: hidden; touch-action: none; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.zd-strip { position: absolute; left: 50%; top: 0; bottom: 0; transition: transform 0.12s ease-out; }
.zd-wheel.grab .zd-strip { transition: none; }
.zd-ticks { position: absolute; inset: 0; pointer-events: none; }
.zd-tick { position: absolute; top: 4px; width: 1px; height: 5px; margin-left: -0.5px; border-radius: 1px; background: rgba(255, 255, 255, 0.45); }
.zd-tick.major { top: 2px; width: 1.5px; height: 9px; margin-left: -1px; background: #fff; }
.zd-num { position: absolute; top: 13px; transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zd-mark { position: absolute; left: 50%; top: 0; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: #ffd60a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); pointer-events: none; }
.zd-mark::before { content: ""; position: absolute; left: 50%; top: -1px; margin-left: -4px; border: 4px solid transparent; border-top: 5px solid #ffd60a; }
.cam-stage.zoom-open .cam-caption { bottom: 74px; }
/* 세로형: 배수 버튼 위로 서는 유리 막대. 왼쪽 = 배율 동그라미(아래가 광각), 오른쪽 = 위아래로 도는 눈금 바퀴 */
/* 높이 = 배율 동그라미 수에 맞춤 (고정 높이면 0.6·10 같은 양 끝이 잘려 안 보였음) */
.zoom-dial.vert { left: auto; right: auto; bottom: 8px; width: 74px; height: auto; max-height: calc(100% - 16px); padding: 6px 3px; display: grid; grid-template-columns: 30px 1fr; gap: 2px; }
.zoom-dial.vert .zd-presets { flex-direction: column-reverse; justify-content: center; gap: 3px; }
.zoom-dial.vert .zd-wheel { height: auto; margin: 0; -webkit-mask-image: linear-gradient(0deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(0deg, transparent, #000 22%, #000 78%, transparent); }
.zoom-dial.vert .zd-strip { left: 0; right: 0; top: auto; bottom: 50%; }
.zoom-dial.vert .zd-tick { top: auto; left: 4px; width: 5px; height: 1px; margin: 0 0 -0.5px 0; }
.zoom-dial.vert .zd-tick.major { left: 2px; width: 9px; height: 2px; margin: 0 0 -1px 0; }
.zoom-dial.vert .zd-num { top: auto; left: 13px; transform: translateY(50%); }
.zoom-dial.vert .zd-mark { left: 0; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 0; }
.zoom-dial.vert .zd-mark::before { left: -1px; top: 50%; margin: -4px 0 0 0; border: 4px solid transparent; border-left: 5px solid #ffd60a; }
.cam-stage.zoom-open:has(.zoom-dial.vert) .cam-caption { bottom: 12px; }
#view-camera #zoom-level { touch-action: none; }
/* 상단 가운데: 지금 기온 (작게) */
.cam-top { position: relative; }
.cam-temp { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(var(--ui-rot, 0deg)); height: 44px; display: grid; place-items: center; color: rgba(255, 255, 255, 0.8); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.cam-temp.hidden { display: none; }
.cam-caption.warn { background: rgba(140, 80, 30, 0.75); }
/* 잠금 (시선·이름·여럿은 2026-11-05 뺌): 글자만 (원·배경 없음), 가운데 '이름' = 미리보기 세로 가운데. 터치 영역은 50px 유지 */
/* 세로 위치는 설정(--quick-y, 기본 65%). 묶음이 미리보기 밖으로 나가지 않게 위아래 90px 안쪽으로 */
.cam-quick { position: absolute; right: calc(8px + env(safe-area-inset-right)); top: clamp(90px, var(--quick-y, 65%), calc(100% - 90px)); transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cam-quick.left { right: auto; left: calc(8px + env(safe-area-inset-left)); }
#view-camera .cam-quick .cam-text { display: grid; place-items: center; width: 50px; height: 50px; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; font-size: 15px; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6); }
/* 카메라 화면 버튼: 누를 때 생기는 강조 상자·원·초점 테두리 없음 (글자 색·흐림으로만 반응) */
#view-camera button { -webkit-tap-highlight-color: transparent; outline: none; }
#view-camera button:focus, #view-camera button:focus-visible { outline: none; box-shadow: none; }

.cam-bottom { padding: 0 calc(8px + env(safe-area-inset-right)) 4px calc(8px + env(safe-area-inset-left)); background: #000; z-index: 6; }
.cam-row1, .cam-row2 { width: min(420px, 100%); margin: 0 auto; display: grid; align-items: center; justify-items: center; }
.cam-row1 { grid-template-columns: repeat(5, 1fr); min-height: 44px; }
.cam-row1 .mode-switch { display: contents; }
#view-camera .mode-switch .cam-text { color: #8e8e93; }
#view-camera .mode-switch .cam-text.active { color: #fff; font-weight: 700; }
#zoom-level { font-variant-numeric: tabular-nums; }
#view-camera #zoom-level.on { color: #ffd60a; }
.cam-row2 { grid-template-columns: 1fr 76px 1fr; min-height: 76px; }
#last-thumb { grid-column: 1; }
#last-thumb .thumb-img { display: none; }   /* 앨범은 글자로만 */
#btn-flip, #btn-stop { grid-column: 3; grid-row: 1; }

.shutter { position: relative; grid-column: 2; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 3px solid #000; box-shadow: 0 0 0 3px #fff; transition: transform 0.1s; }
.shutter::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }   /* 터치 영역만 넓게 */
.shutter:active, .shutter.pressing { transform: scale(0.92); }
.shutter.video { background: #ff3b30; }
/* 녹화 중: 촬영 버튼 = 일시정지(‖) / 일시정지 중: 재개(▶) */
.shutter.recording { background: #ff3b30; animation: pulse 1.2s infinite; }
.shutter.recording::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 24px; transform: translate(-50%, -50%); background: linear-gradient(90deg, #fff 0 36%, transparent 36% 64%, #fff 64%); border-radius: 2px; }
.shutter.recording.paused { animation: none; background: #fff; }
.shutter.recording.paused::after { width: 0; height: 0; background: none; border-left: 22px solid #ff3b30; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-radius: 3px; transform: translate(-40%, -50%); }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(255, 59, 48, 0.3); } }
.cam-stop { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; background: none; }
.stop-square { display: block; width: 16px; height: 16px; border-radius: 3px; background: #ff3b30; }

/* 맨 아래 앱 메뉴: 카메라 화면에서는 아이콘 없이 글자만 한 줄 */
body[data-view="camera"] .tabbar { height: calc(40px + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom); background: #000; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-view="camera"] .tabbar a { margin: 0; gap: 0; color: #8e8e93; }
body[data-view="camera"] .tabbar a [data-icon] { display: none; }
body[data-view="camera"] .tabbar a span { font-size: 14px; font-weight: 500; }
body[data-view="camera"] .tabbar a.active { color: #fff; }
body[data-view="camera"] .tabbar a.active span { font-weight: 700; }

/* 폰을 가로로 돌리면 배치는 그대로, 글자·배지만 돌림 (--ui-rot: 0 / 90deg / -90deg / 180deg) */
:root { --ui-rot: 0deg; }
#view-camera .cam-text, .badge-pill, .unlock { transform: rotate(var(--ui-rot)); transition: transform 0.25s ease; }
/* 낮은 화면(가로 창·작은 폰): 셔터 줄을 줄여 미리보기 확보 */
@media (max-height: 560px) {
  .cam-row2 { min-height: 64px; grid-template-columns: 1fr 64px 1fr; }
  .shutter { width: 54px; height: 54px; }
  .cam-top, .cam-row1 { min-height: 40px; }
  #view-camera .cam-text { min-height: 40px; }
}

/* 시선 끌기 점: 상단 띠 가운데(렌즈 쪽) */
.attn-dot { position: absolute; left: 50%; top: calc(4px + env(safe-area-inset-top)); width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #ffd60a; box-shadow: 0 0 10px #ffd60a; z-index: 7; animation: attnBlink 0.5s infinite alternate; pointer-events: none; }
.attn-dot.burst { width: 14px; height: 14px; margin-left: -7px; animation: attnBlink 0.18s infinite alternate; }
body.locked .cam-top, body.locked .cam-bottom, body.locked .cam-quick { opacity: 0.35; }
.unlock:active { background: rgba(255, 246, 230, 0.4); }



.guide { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
/* 가이드: 방해되지 않게 연한 면 + 가는 밝은 윤곽선 (크기는 설정에서 조절) */
.guide svg {
  width: min(38vw, 28vh); height: auto;
  transform: scale(var(--guide-scale, 1));
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
}
/* 희미하게: 면은 거의 없고(5%), 윤곽선만 연하게(35%) */
.guide-shape { fill: var(--guide); fill-opacity: 0.04; stroke: #fff8ec; stroke-opacity: 0.55; stroke-width: 1.4; stroke-dasharray: 3 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.guide-dot { fill: #fff8ec; fill-opacity: 0.6; }
.skin-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.skin-overlay svg { width: 100%; height: 100%; display: block; }
/* 스킨 고르기 카드 */
.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.skin-card { padding: 6px; border-radius: 14px; background: var(--surface-2); border: 2px solid transparent; text-align: center; }
.skin-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.skin-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, #e9d2b8 0%, #b98b67 55%, #6e4f3a 100%); }
.skin-thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; }
.skin-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.skin-name { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--text); }
.skin-card.selected .skin-name { color: var(--accent); }
.act-ic { display: block; width: 24px; height: 24px; }
.act-ic svg { width: 24px; height: 24px; }
.act.on .act-ic { color: #ff6f8e; }
.chip [data-icon], .btn [data-icon] { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.chip [data-icon] svg, .btn [data-icon] svg { width: 16px; height: 16px; }
.guide img { width: min(38vw, 28vh); height: auto; max-height: 40vh; object-fit: contain; transform: scale(var(--guide-scale, 1)); opacity: 0.1; filter: drop-shadow(0 0 1px rgba(255, 248, 236, 0.7)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.4)); }

.flash { position: absolute; inset: 0; background: #fff6e6; opacity: 0; pointer-events: none; }
.flash.go { animation: flash 0.25s ease-out; }
@keyframes flash { from { opacity: 0.8; } to { opacity: 0; } }

.badge-pill.rec { background: rgba(217, 101, 91, 0.9); }
.badge-pill.preset { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 14px; pointer-events: auto; }
.badge-pill.preset.hidden { display: none; }
.badge-pill.angle { background: rgba(217, 139, 92, 0.9); }
.badge-pill.angle.ok { background: rgba(143, 180, 138, 0.95); }
.badge-pill.pet-state { transition: background 0.3s; }
.badge-pill.pet-state[data-state="moving"] { background: rgba(217, 101, 91, 0.9); }
.badge-pill.pet-state[data-state="sitting"], .badge-pill.pet-state[data-state="standing"] { background: rgba(143, 180, 138, 0.95); }
.badge-pill.pet-state[data-state="lying"] { background: rgba(120, 160, 200, 0.9); }
.badge-pill.pet-state[data-state="sleeping"] { background: rgba(120, 105, 170, 0.9); }
.badge-pill.id-badge[data-kind="match"] { background: rgba(217, 139, 92, 0.92); }
.badge-pill.id-badge[data-kind="unknown"] { background: rgba(120, 110, 100, 0.9); }
.badge-pill.id-badge[data-kind="search"] { background: rgba(18, 14, 11, 0.4); }
.badge-pill.id-badge[data-kind="maybe"] { background: rgba(60, 48, 36, 0.55); }
.pet-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--sky-soft); color: #2f5f7a; font-size: 11px; font-weight: 700; vertical-align: middle; }
.ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; pointer-events: none; }


.badge-pill.rec.paused { background: rgba(120, 110, 100, 0.9); }

/* 잠금: 화면 전체 입력 차단, 가운데 자물쇠만 누를 수 있음 */
.lock-layer { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(0, 0, 0, 0.15); touch-action: none; transition: background 0.4s; }
.lock-layer.dim { background: rgba(10, 8, 6, 0.72); }
.lock-layer.dim .lock-info { opacity: 0.35; }
.lock-info { color: #fff; text-align: center; font-size: 14px; line-height: 1.6; text-shadow: 0 1px 3px #000; transition: opacity 0.4s; }
.lock-info small { opacity: 0.75; }
.unlock { width: 108px; height: 108px; border-radius: 50%; font-size: 46px; background: rgba(255, 246, 230, 0.2); border: 2px solid rgba(255, 246, 230, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.15s, background 0.4s; }
.lock-layer.awake .unlock { animation: lock-pulse 1.2s ease-in-out 2; }
@keyframes lock-pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 14px rgba(255, 246, 230, 0.15); } }

/* ===== 앨범 ===== */
.album-grid { padding: 4px 14px; }
.day-group h3 { display: flex; align-items: baseline; gap: 6px; font-size: 14px; margin: 18px 4px 8px; font-weight: 700; }
.day-group h3 span { font-size: 12px; color: var(--muted); font-weight: 500; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(5, 1fr); } }
.cell { position: relative; aspect-ratio: 1; background: var(--surface-2); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); padding: 0; }
.cell-img { position: absolute; inset: 0; background: center/cover no-repeat; }
.cell .badge { position: absolute; right: 5px; bottom: 5px; padding: 2px 7px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; }
.cell .fav { position: absolute; left: 6px; bottom: 4px; color: #ff6f8e; font-size: 15px; text-shadow: 0 0 3px #fff; }
.cell .cloud { position: absolute; left: 5px; top: 4px; color: #fff; font-size: 13px; text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); }
body.selecting .cell .cloud { display: none; }
.choice small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-weight: 500; }
.act.on { color: var(--accent, #d98b5c); }
.cell .auto { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 10px; display: grid; place-items: center; }
body.selecting .cell::after { content: ""; position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.2); }
body.selecting .cell.checked::after { content: "✓"; background: var(--accent); color: var(--accent-text); font-size: 12px; display: grid; place-items: center; }
body.selecting .cell.checked { outline: 3px solid var(--accent); outline-offset: -3px; }
.sel-bar { display: none; position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 10; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.sel-bar span { flex: 1; font-weight: 700; }
body.selecting[data-view="album"] .sel-bar { display: flex; }
body.pet-selecting[data-view="pets"] #pet-sel-bar { display: flex; }
.pet-card.selectable { cursor: pointer; }
.pet-card.selectable.checked { border-color: var(--accent); background: var(--surface-2); }
.pet-check { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; }
.pet-card.checked .pet-check { background: var(--accent); }
.pet-samples { color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; }
.sample-strip { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.sample-mini { width: 48px; height: 48px; border-radius: 10px; background: var(--surface-2) center/cover; display: grid; place-items: center; font-size: 16px; color: var(--muted); }
.sample-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.sample { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); padding: 0; border: 2px solid transparent; }
.sample img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sample-empty { width: 100%; height: 100%; display: grid; place-items: center; font-size: 22px; }
.sample-x { position: absolute; right: 2px; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; display: grid; place-items: center; }
.sample-date { position: absolute; left: 4px; bottom: 3px; font-size: 9px; color: #fff; text-shadow: 0 0 3px #000; }
.sample.own { border-color: var(--accent); }
.sample-check { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; display: none; place-items: center; }
.sample.picked .sample-check { display: grid; }
.sample.picked img { opacity: 0.6; }
.sample.busy { opacity: 0.5; }
.caption-btn { margin-top: 6px; }
.badge-pill.walk { background: rgba(94, 160, 110, 0.9); }
#walk-chip.on { background: rgba(94, 160, 110, 0.85); color: #fff; }
.angle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.angle-slot { position: relative; aspect-ratio: 1; border-radius: 14px; background: var(--surface-2); border: 2px dashed var(--muted); display: grid; place-items: center; overflow: hidden; padding: 0; }
.angle-slot.filled { border-style: solid; border-color: var(--accent); }
.angle-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.angle-emoji { font-size: 26px; }
.angle-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, 0.45); color: #fff; text-align: center; }
.angle-x { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; display: grid; place-items: center; }
.mbti-progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-bottom: 10px; }
.mbti-progress i { display: block; height: 100%; background: var(--accent); }
.mbti-type { font-size: 34px; font-weight: 800; letter-spacing: 2px; color: var(--accent); text-align: center; margin: 6px 0 2px; }
.mbti-type small { display: block; font-size: 15px; letter-spacing: 0; color: var(--text); }
.mbti-row { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--muted); }
.mbti-row span.on { color: var(--accent); font-weight: 800; }
.mbti-row span:last-child { text-align: right; }
.mbti-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.mbti-bar i { display: block; height: 100%; background: var(--accent); }
.meal-thumb { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2) center/cover; flex: none; }
.choice.selected { border-color: var(--accent); }
.today-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--surface-2); font-size: 13px; }
.today-row span { flex: none; width: 56px; color: var(--muted); font-weight: 600; }
.today-row strong { font-weight: 600; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-cell { aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; font-size: 13px; min-height: 40px; }
.cal-cell.empty { background: transparent; }
.cal-cell.has { background: var(--accent-soft); }
.cal-cell.today .cal-d { font-weight: 800; color: var(--accent); }
.cal-cell.selected { outline: 2px solid var(--accent); }
.cal-marks { font-size: 9px; letter-spacing: -1px; line-height: 1; }
.food-check { padding: 10px 12px; border-radius: 12px; margin: 6px 0; background: var(--surface-2); font-size: 13px; }
.food-check p { margin: 4px 0 0; color: var(--muted); }
.food-check-head { display: flex; align-items: center; gap: 6px; }
.food-check-status { margin-left: auto; font-weight: 700; font-size: 12px; }
.food-check.no { background: #fde8e8; } .food-check.no .food-check-status { color: #c0392b; }
.food-check.caution { background: #fff3d6; } .food-check.caution .food-check-status { color: #b26a00; }
.food-check.ok { background: #e4f3e6; } .food-check.ok .food-check-status { color: #2e7d32; }
.food-verdict { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; border-radius: var(--radius); margin-bottom: 8px; }
.food-verdict strong { font-size: 22px; }
.food-verdict-icon { font-size: 40px; }
.food-verdict.no { background: #fde8e8; color: #c0392b; } .food-verdict.caution { background: #fff3d6; color: #b26a00; } .food-verdict.ok { background: #e4f3e6; color: #2e7d32; } .food-verdict.unknown { background: var(--surface-2); }
.page-head .back { text-decoration: none; color: var(--accent); font-size: 28px; margin-right: 4px; display: inline-block; min-width: 40px; }
.hospital-map { height: 260px; margin: 0 16px 12px; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-sm); }
.place { padding: 10px 0; border-bottom: 1px solid var(--surface-2); }
.place-main { display: flex; align-items: center; gap: 8px; }
.place-info { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13px; }
.place-info span { color: var(--muted); }
.place-rating { color: var(--muted); cursor: pointer; }
.place-rating.on { color: #e0a000; font-weight: 700; }
.place-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.place-tag { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.place-stars { color: #e0a000; font-size: 12px; }
.place.mine .place-main { cursor: pointer; }
.visit-last { color: var(--text) !important; font-size: 12.5px; }
.map-hint { margin: -6px 18px 12px; font-size: 12px; }
.leaflet-popup-content .map-reg { margin-top: 8px; width: 100%; }
.visit-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.visit-item { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: inherit; border: 0; }
.visit-item b { font-size: 14.5px; }
.visit-reasons { color: var(--accent); font-size: 13px; font-weight: 600; }
.visit-memo { font-size: 13px; white-space: pre-wrap; }
.visit-item small { color: var(--muted); }
.star-row { display: flex; justify-content: center; gap: 6px; margin: 10px 0; }
.star { font-size: 36px; color: var(--surface-2); background: none; padding: 4px; line-height: 1; }
.star.on { color: #ffb400; }
@keyframes attnBlink { from { opacity: 1; transform: scale(1); } to { opacity: 0.25; transform: scale(0.7); } }
.day-group.best h3 { color: var(--accent); }
.day-group.best .cell { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 오늘의 베스트: 작은 칸 5열 (최대 10장) */
.grid.small { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.grid.small .cell { border-radius: 8px; }
.day-group.best .grid.small .cell { outline-width: 1.5px; }
.grid.small .cell .badge { right: 3px; bottom: 3px; padding: 1px 4px; font-size: 9.5px; }
.grid.small .cell .fav { left: 3px; bottom: 1px; font-size: 11px; }
.grid.small .cell .cloud, .grid.small .cell .auto { display: none; }
.focus-ring { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid #ffd27a; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 4; }
.focus-ring.go { animation: focusRing 0.9s ease-out; }
@keyframes focusRing { 0% { opacity: 1; transform: scale(1.4); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.food-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--surface-2); }
.food-row > div:first-child { flex: 1; min-width: 0; font-size: 13px; }
.food-row span { color: var(--muted); }
.food-grams { font-weight: 700; color: var(--accent); white-space: nowrap; font-size: 13px; }

/* ===== 상세 보기 ===== */
.viewer { position: fixed; inset: 0; z-index: 30; background: #0d0b09; display: none; flex-direction: column; }
.viewer.open { display: flex; }
.viewer-top { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; z-index: 2; display: flex; justify-content: space-between; pointer-events: none; }
.viewer-top .round { pointer-events: auto; }
/* 폰을 가로로 돌려 보면: 정보 패널을 접고 영상·사진이 화면 가득 (ⓘ로 정보 열기) */
@media (orientation: landscape) {
  .viewer .viewer-info { display: none; }
  .viewer.show-info .viewer-info { display: block; position: absolute; left: 0; right: 0; bottom: 0; max-height: 70vh; overflow-y: auto; z-index: 3; }
  .viewer .viewer-media { position: absolute; inset: 0; }
  .viewer .viewer-media img, .viewer .viewer-media video { width: 100%; height: 100%; }
}
.viewer.wide .viewer-media img, .viewer.wide .viewer-media video { width: 100%; }
.viewer-media { flex: 1; min-height: 0; display: grid; place-items: center; }
.viewer-media img, .viewer-media video { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.2s; }
/* 전체화면: 화면 가득, 잘리지 않게 (가로 영상이면 album.js 가 화면을 가로로 돌림) */
.viewer-media video:fullscreen, .viewer-media img:fullscreen { width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; object-fit: contain !important; transform: none !important; background: #000; }
.viewer-media video:-webkit-full-screen, .viewer-media img:-webkit-full-screen { width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; object-fit: contain !important; transform: none !important; background: #000; }
.nav-btn { position: absolute; top: 38%; width: 40px; height: 64px; font-size: 34px; color: #fff; background: rgba(0, 0, 0, 0.25); }
.nav-btn.prev { left: 0; border-radius: 0 14px 14px 0; }
.nav-btn.next { right: 0; border-radius: 14px 0 0 14px; }
.nav-btn:disabled { display: none; }
.video-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(13, 11, 9, 0.9); color: #fff; }
.vb-play { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 15px; }
.vb-seek { flex: 1; accent-color: var(--accent); height: 28px; }
.vb-time { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); min-width: 84px; text-align: right; }
.viewer-info { background: var(--surface); color: var(--text); padding: 16px 18px calc(14px + env(safe-area-inset-bottom)); border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25); }
.meta { display: grid; gap: 4px; font-size: 13px; margin-bottom: 10px; }
/* 사진 정보 패널: 글씨 크게, 가득 차게 */
.viewer-details .meta { font-size: 17px; line-height: 1.5; gap: 8px; margin: 12px 0 12px; }
.viewer-details .meta a { font-weight: 600; }
.viewer-details .input { font-size: 17px; line-height: 1.5; padding: 14px 16px; }
.viewer-details .to-camera { width: 100%; height: 52px; font-size: 17px; margin-bottom: 4px; }
.viewer.show-info .viewer-info { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); max-height: 72vh; overflow-y: auto; }
/* 사진 정보(날짜·아기·위치·설명)는 ⓘ 버튼을 눌렀을 때만. 버튼 줄은 항상 보임 */
.viewer-details { display: none; }
.viewer.show-info .viewer-details { display: block; }
.viewer:not(.show-info) .viewer-info { padding-top: 6px; }
.viewer:not(.show-info) .viewer-actions { margin-top: 0; }
.viewer-actions { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 2px; margin-top: 10px; }
/* 사진 보기 아래 버튼: 글자만 한 줄 (영상은 버튼이 많아 두 줄이 될 수 있음) */
.viewer-actions { justify-content: space-between; gap: 0; flex-wrap: nowrap; }
.viewer-actions .act { min-width: 0; flex: 1 1 auto; padding: 12px 2px; border-radius: 10px; }
.viewer-actions .act span { font-size: 14px; font-weight: 600; color: var(--text, #2b2520); white-space: nowrap; }
.viewer-actions:has(> .act:nth-child(8)) { flex-wrap: wrap; }   /* 영상(버튼 8개)은 4개씩 두 줄 */
.viewer-actions:has(> .act:nth-child(8)) .act { flex-basis: 25%; }
.viewer-actions .act.on span { color: #ff6f8e; }
.viewer-actions .act .act-ic { width: 22px; height: 22px; color: var(--text, #2b2520); }
.viewer-actions .act .act-ic svg { width: 22px; height: 22px; }
.viewer-actions .act.on .act-ic { color: #ff6f8e; }
.viewer-actions .act.on .act-ic svg path { fill: #ff6f8e; }
.viewer-actions .act:first-child span { color: var(--accent, #d98b5c); }
#viewer .text-btn { width: auto; min-width: 56px; padding: 0 16px; font-size: 15px; font-weight: 600; }
#viewer .nav-btn { font-size: 40px; line-height: 1; font-weight: 300; }
.act { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 20px; padding: 6px 8px; border-radius: 14px; }
.act:active { background: var(--surface-2); }
.act span { font-size: 11px; color: var(--muted); font-weight: 600; }
.act.on { color: #ff6f8e; }

/* ===== 편집기 / 실루엣 ===== */
.editor { position: fixed; inset: 0; z-index: 35; background: #16130f; display: none; flex-direction: column; color: #fff; }
.editor.open { display: flex; }
.editor-top { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
.editor-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px; }
#editor-canvas, #sil-canvas { max-width: 100%; max-height: 100%; touch-action: none; border-radius: 10px; }
.editor-tabs { display: flex; gap: 6px; padding: 8px 12px; }
.editor-tabs button { flex: 1; padding: 10px; border-radius: 999px; background: #2a251f; font-size: 14px; font-weight: 600; color: #e9e1d4; }
.editor-tabs button.selected { background: var(--accent); color: var(--accent-text); }
.editor-panel { background: var(--surface); color: var(--text); padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); max-height: 38vh; overflow-y: auto; border-radius: var(--radius) var(--radius) 0 0; }
.sticker-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 4px; }
.sticker-palette button { font-size: 28px; padding: 4px; border-radius: 12px; }
.sticker-palette button:active { background: var(--surface-2); }
.sticker-palette img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.slider-group { margin-top: 6px; }

/* ===== 아기 ===== */
.pet-list { display: grid; gap: 12px; padding: 4px 16px; }
.pet-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 2px solid transparent; box-shadow: var(--shadow-sm); }
.pet-card.selectable { flex-direction: row; align-items: center; gap: 12px; }
.pet-main { display: flex; align-items: center; gap: 12px; }
.pet-shoot { flex: none; min-height: 40px; white-space: nowrap; }
.pet-actions { display: flex; gap: 8px; }
.pet-actions .btn { flex: 1; min-height: 40px; padding: 8px 6px; white-space: nowrap; font-size: 13px; background: var(--surface-2); }
.pet-card.current { border-color: var(--accent); }
.avatar { width: 56px; height: 56px; flex: none; border-radius: 18px; background: var(--surface-2) center/cover; display: grid; place-items: center; font-size: 26px; }
.avatar.big { width: 100px; height: 100px; font-size: 34px; }
.pet-info { flex: 1; display: grid; gap: 3px; min-width: 0; }
.pet-info strong { font-size: 17px; letter-spacing: -0.3px; }
.pet-info span { font-size: 13px; color: var(--muted); }
.pet-info .ellip { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.advice { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: #8a4a26; font-size: 12.5px; line-height: 1.5; }
.hint.pad { padding: 0 4px 8px; }
.pet-breed { color: var(--accent) !important; font-weight: 700; }
.pet-form { display: grid; gap: 10px; }
.avatar-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.sil-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sil-preview { width: 56px; height: 56px; border-radius: 12px; background: #4a4038 center/contain no-repeat; }

/* ===== 품종 분석 ===== */
.breed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
.breed-head strong { font-size: 20px; }
.conf { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; font-weight: 600; }
.conf-높음 { background: var(--sage-soft); color: #3f6b3a; }
.conf-낮음 { background: #fbe0dc; color: #a33; }
.breed-h { margin: 16px 0 6px; font-size: 14px; font-weight: 700; }
.mix-sentence { margin: 0 0 4px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--sage-soft); font-size: 15px; line-height: 1.6; }
.breed-p { margin: 4px 0; font-size: 14px; line-height: 1.6; }
.breed-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.breed-tags .chip { padding: 4px 11px; font-size: 13px; }
.color-chip { display: inline-flex; align-items: center; gap: 6px; }
.color-chip i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); }
.breed-ul { margin: 4px 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
/* 견종 정보 카드: 크기·몸무게·수명 등 두 칸 표 */
.breed-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 6px 0 8px; font-size: 13px; }
.breed-facts div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2, rgba(127,127,127,0.12)); }
.breed-facts span { color: var(--muted, #8e8e93); white-space: nowrap; }
.breed-facts b { font-weight: 600; text-align: right; }
.mix-list { display: grid; gap: 10px; }
.mix-top { display: flex; justify-content: space-between; font-size: 14px; }
.mix-bar { height: 9px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin: 4px 0; }
.mix-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sage), var(--accent)); border-radius: 5px; }
.mix-row small { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* ===== 구도 프리셋 ===== */
.preset-list { display: grid; gap: 8px; }
.preset-item { display: flex; align-items: center; gap: 6px; border-radius: var(--radius-sm); background: var(--surface-2); padding: 6px; }
.preset-item.active { outline: 2px solid var(--accent); }
.preset-main { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; }
.preset-thumb { width: 48px; height: 64px; flex: none; border-radius: 10px; background: #4a4038 center/cover; }
.preset-text { display: grid; gap: 2px; min-width: 0; }
.preset-text span { font-size: 12px; color: var(--muted); }

/* ===== 설정 ===== */
.settings-body { display: grid; gap: 12px; padding: 4px 16px; }
.settings-body > .btn { background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); margin-top: 0; min-height: 52px; font-size: 15px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); border: 1px solid var(--hairline); }
.card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; letter-spacing: -0.3px; }
.card > .hint:first-of-type { margin-top: 0; }
.version { text-align: center; color: var(--muted); font-size: 12px; }

/* ===== 바텀시트 / 토스트 ===== */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(40, 30, 20, 0.4); display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.sheet.open { opacity: 1; pointer-events: auto; }
.sheet-card { width: 100%; max-height: 88vh; overflow-y: auto; background: var(--surface); color: var(--text); border-radius: 26px 26px 0 0; padding: 6px 22px calc(24px + env(safe-area-inset-bottom)); transform: translateY(30px); transition: transform 0.22s cubic-bezier(.2,.8,.3,1); box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.2); }
.sheet.open .sheet-card { transform: none; }
.sheet-card::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--border); margin: 6px auto 2px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.sheet-head strong { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; }
.choice-list { display: grid; gap: 6px; }
.choice { text-align: left; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 600; border: 1px solid transparent; }
.choice.selected { background: var(--accent-soft); color: var(--accent); border-color: rgba(217, 123, 79, 0.35); font-weight: 800; }
.choice.accent { color: var(--accent); font-weight: 800; }
.choice .choice-sub { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; opacity: 0.8; }
@media (min-width: 700px) { .sheet { align-items: center; justify-content: center; } .sheet-card { max-width: 480px; border-radius: var(--radius); } }

.toast { position: fixed; left: 50%; top: calc(20px + env(safe-area-inset-top)); z-index: 60; transform: translate(-50%, -20px); max-width: 86vw; padding: 11px 18px; border-radius: 14px; background: rgba(31, 27, 23, 0.92); color: #fff; font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: 0.25s; text-align: center; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   카메라 테마 (2026-10-28 기본): 검정 바탕 · 셔터 노랑 포인트 · 숫자는 고정폭 · 각진 모서리
   변수 + 아래의 [data-theme="camera"] 덮어쓰기로만 바뀐다. 다른 테마는 그대로.
   ===================================================================== */
[data-theme="camera"] {
  --bg: #0a0a0a;
  --bg-tint: #0a0a0a;
  --surface: #151515;
  --surface-2: #232325;
  --text: #f2f2f0;
  --muted: #8e8e93;
  --accent: #ffd60a;
  --accent-soft: rgba(255, 214, 10, 0.13);
  --accent-text: #000000;
  --sage: #30d158;
  --sage-soft: rgba(48, 209, 88, 0.14);
  --sky: #64d2ff;
  --sky-soft: rgba(100, 210, 255, 0.14);
  --danger: #ff453a;
  --border: #333336;
  --hairline: rgba(255, 255, 255, 0.08);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-sm: none;
  --tabbar: rgba(10, 10, 10, 0.96);
  --guide: #fff6e6;
  --glass: rgba(0, 0, 0, 0.5);
  --glass-border: rgba(255, 255, 255, 0.18);
  --mono: "Roboto Mono", "SFMono-Regular", Menlo, ui-monospace, monospace;
  color-scheme: dark;
}
/* 글자: 숫자·기록 줄은 고정폭, 카드 제목은 작은 라벨 */
[data-theme="camera"] .page-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
/* 고정폭 글꼴은 숫자만 있는 곳에만 (한글이 섞이면 간격이 어색함). 나머지는 숫자 폭만 맞춤 */
[data-theme="camera"] .slider-val,
[data-theme="camera"] .cal-d,
[data-theme="camera"] .vb-time,
[data-theme="camera"] .zd-num { font-family: var(--mono); letter-spacing: 0; }
[data-theme="camera"] .page-head h2 small,
[data-theme="camera"] .day-group h3 span,
[data-theme="camera"] .version,
[data-theme="camera"] .sel-bar span,
[data-theme="camera"] .food-grams,
[data-theme="camera"] .today-row strong { font-variant-numeric: tabular-nums; letter-spacing: 0; font-weight: 500; }
[data-theme="camera"] .card h3 { font-size: 12.5px; font-weight: 600; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 10px; }
[data-theme="camera"] .sheet-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.8px; }
[data-theme="camera"] .day-group h3 { font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; color: var(--muted); margin: 16px 2px 6px; }
/* 카드·버튼·칩: 그림자 없이 가는 선, 각지게 */
[data-theme="camera"] .card { box-shadow: none; border: 1px solid #262628; }
[data-theme="camera"] .settings-body > .btn { box-shadow: none; border: 1px solid #262628; }
[data-theme="camera"] .btn { font-weight: 600; }
[data-theme="camera"] .btn.small { border-radius: 8px; }
[data-theme="camera"] .btn.primary { box-shadow: none; }
[data-theme="camera"] .btn.danger { box-shadow: inset 0 0 0 1px rgba(255, 69, 58, 0.5); }
[data-theme="camera"] .chip { border-radius: 8px; background: transparent; border: 1px solid #3a3a3c; font-weight: 500; }
[data-theme="camera"] .chip.selected { background: transparent; color: var(--accent); border-color: var(--accent); font-weight: 600; }
[data-theme="camera"] .chip.glass { background: var(--glass); border-color: var(--glass-border); }
[data-theme="camera"] .choice { border: 1px solid #2c2c2e; }
[data-theme="camera"] .choice.selected { background: var(--accent-soft); border-color: var(--accent); }
[data-theme="camera"] .hint.warn { color: #ffb340; }
[data-theme="camera"] .advice { color: var(--accent); border: 1px solid rgba(255, 214, 10, 0.3); }
[data-theme="camera"] .pet-tag { color: var(--sky); }
/* 앨범: 사진이 주인공 — 촘촘한 격자, 모서리 거의 없음 */
[data-theme="camera"] .album-grid { padding: 0 2px; }
[data-theme="camera"] .grid { gap: 2px; }
[data-theme="camera"] .cell { border-radius: 2px; box-shadow: none; }
[data-theme="camera"] .cell .fav { text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); }
[data-theme="camera"] body.selecting .cell.checked { outline-width: 2px; outline-offset: -2px; }
[data-theme="camera"] .sel-bar { border: 1px solid #2c2c2e; }
/* 아기·달력·기록 */
[data-theme="camera"] .pet-card { box-shadow: none; border: 1px solid #262628; }
[data-theme="camera"] .pet-card.current { border-color: var(--accent); }
[data-theme="camera"] .avatar { border-radius: 12px; }
[data-theme="camera"] .today-row, [data-theme="camera"] .food-row, [data-theme="camera"] .place { border-bottom-color: var(--hairline); }
[data-theme="camera"] .cal-cell { border-radius: 6px; background: #1c1c1e; }
[data-theme="camera"] .cal-cell.empty { background: transparent; }
[data-theme="camera"] .cal-cell.has { background: var(--accent-soft); }
[data-theme="camera"] .food-check.no, [data-theme="camera"] .food-verdict.no { background: rgba(255, 69, 58, 0.15); color: #ff6961; }
[data-theme="camera"] .food-check.caution, [data-theme="camera"] .food-verdict.caution { background: rgba(255, 214, 10, 0.12); color: #ffd60a; }
[data-theme="camera"] .food-check.ok, [data-theme="camera"] .food-verdict.ok { background: rgba(48, 209, 88, 0.14); color: #30d158; }
[data-theme="camera"] .food-check.no .food-check-status { color: #ff6961; }
[data-theme="camera"] .food-check.caution .food-check-status { color: #ffd60a; }
[data-theme="camera"] .food-check.ok .food-check-status { color: #30d158; }
[data-theme="camera"] .food-check p { color: var(--muted); }
[data-theme="camera"] .conf-높음 { color: #30d158; }
[data-theme="camera"] .conf-낮음 { background: rgba(255, 69, 58, 0.15); color: #ff6961; }
[data-theme="camera"] .sil-preview, [data-theme="camera"] .preset-thumb { background-color: #2a2a2c; }
[data-theme="camera"] .skin-card { border-width: 1px; border-color: #2c2c2e; border-radius: 10px; }
[data-theme="camera"] .skin-card.selected { border-color: var(--accent); }
/* 보기·편집·시트·알림: 카메라처럼 검정 */
[data-theme="camera"] .viewer { background: #000; }
[data-theme="camera"] .viewer-info { box-shadow: none; border-top: 1px solid #222; }
[data-theme="camera"] .editor { background: #000; }
[data-theme="camera"] .editor-tabs button { background: #1c1c1e; color: #e5e5e7; border-radius: 8px; }
[data-theme="camera"] .sheet { background: rgba(0, 0, 0, 0.6); }
[data-theme="camera"] .sheet-card { border-radius: 18px 18px 0 0; border-top: 1px solid #2c2c2e; }
[data-theme="camera"] .toast { background: rgba(28, 28, 30, 0.96); border: 1px solid #333336; border-radius: 10px; }
[data-theme="camera"] .tabbar a span { font-weight: 500; }

/* 달력 날짜 칸 표시: 작은 점 (산책 · 사료 · 사진) */
.cal-marks { display: flex; gap: 3px; justify-content: center; min-height: 5px; }
.cal-marks .mk { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cal-marks .mk.meal { background: var(--sky); }
.cal-marks .mk.photo { background: var(--muted); }
/* 아기 사진이 없을 때: 이름 첫 글자 */
.avatar { font-size: 22px; font-weight: 700; color: var(--muted); }

/* ===== 카메라 테마: 버튼·칩·선택지·목록 크기와 글자 통일 =====
   큰 버튼 48px/15px · 작은 버튼·칩 38px/14px · 선택지(목록) 52px/15px · 시트 제목 18px · 목록 지우기(✕)는 작은 회색 글자 */
[data-theme="camera"] .btn { font-size: 15px; font-weight: 600; min-height: 48px; }
[data-theme="camera"] .btn.small { font-size: 14px; font-weight: 600; min-height: 38px; padding: 7px 13px; }
[data-theme="camera"] .chip { font-size: 14px; min-height: 38px; padding: 8px 14px; }
[data-theme="camera"] .chip-row { gap: 8px; }
[data-theme="camera"] .choice { min-height: 52px; font-size: 15px; font-weight: 500; padding: 14px 16px; }
[data-theme="camera"] .choice.selected, [data-theme="camera"] .choice.accent { font-weight: 600; }
[data-theme="camera"] .choice small, [data-theme="camera"] .choice .choice-sub { font-size: 12.5px; font-weight: 400; color: var(--muted); }
[data-theme="camera"] .sheet-head strong { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
[data-theme="camera"] .sheet-msg { font-size: 15px; font-weight: 500; }
[data-theme="camera"] .switch-row { font-size: 15px; }
[data-theme="camera"] .row-buttons { flex-wrap: wrap; }
[data-theme="camera"] .row-buttons .btn { flex: 1 1 auto; white-space: nowrap; }
[data-theme="camera"] .food-row { min-height: 48px; font-size: 14px; }
[data-theme="camera"] .food-row > div:first-child { font-size: 14px; }
[data-theme="camera"] .food-row > .btn.small { flex: none; width: 36px; min-height: 36px; padding: 0; background: transparent; color: var(--muted); font-size: 15px; }
[data-theme="camera"] .food-grams { font-size: 13.5px; font-weight: 600; }
[data-theme="camera"] .pet-actions .btn { font-size: 14px; }
[data-theme="camera"] .head-actions .btn { min-width: 44px; }
[data-theme="camera"] .avatar { color: var(--accent); background-color: #1c1c1e; }
/* 앨범 선택 막대: 글자는 한 줄, 아이콘만 있는 버튼은 정사각형 */
.sel-bar span { white-space: nowrap; min-width: 30px; color: var(--accent); }
.sel-bar .btn { white-space: nowrap; flex: none; }
.sel-bar .btn.small { padding: 7px 11px; }
.sel-bar .btn[aria-label], .sel-bar #sel-timelapse { width: 38px; padding: 0; }

/* ===== 댕BTI v2: 5점 척도 문항 · 결과지 · 장수 덕담 ===== */
.mbti-q { font-size: 19px; font-weight: 700; line-height: 1.45; margin: 6px 0 18px; min-height: 56px; }
.likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.likert-btn { height: 56px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.likert-btn.selected { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.likert-btn:active { transform: scale(0.96); }
.likert-ends { display: flex; justify-content: space-between; margin: 6px 2px 14px; font-size: 12px; color: var(--muted); }
.mbti-slogan { text-align: center; color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.mbti-row { grid-template-columns: 64px 1fr 64px; position: relative; padding-bottom: 14px; }
.mbti-pct { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mbti-bar.right { direction: rtl; }
.longevity { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent); }
.longevity-head { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.longevity-head strong { font-size: 26px; color: var(--accent); margin: 0 2px; }
.longevity li small { color: var(--muted); font-size: 12px; }
.mbti-card .mbti-type { text-align: left; font-size: 30px; margin: 0; }
.mbti-card .mbti-type small { display: inline; margin-left: 8px; font-size: 15px; }
.mbti-card .mbti-slogan { text-align: left; margin: 2px 0 8px; }
/* 아래 메뉴 7개: 칸이 좁아 글자·아이콘을 조금 작게 */
.tabbar a { margin: 4px 0; }
.tabbar a span { font-size: 10px; white-space: nowrap; }
.tabbar a [data-icon] { width: 23px; height: 23px; }
body[data-view="camera"] .tabbar a span { font-size: 13px; }

/* 댕BTI 안내: 네 축 표 (칸 맞춤) */
.axis-table { margin: 12px 0; border-top: 1px solid var(--hairline); }
.axis-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.axis-row b { color: var(--accent); font-weight: 700; font-size: 17px; }
.axis-l { text-align: left; }
.axis-r { text-align: right; }
.axis-mid { text-align: center; font-size: 12px; color: var(--muted); padding: 0 8px; }
.axis-desc { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--muted); }
/* 문항: 아래 글자를 5개 버튼 칸에 맞춤 */
.likert-ends { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-align: center; }
/* 카메라 테마: 안내 상자는 초록 대신 기본 면 색 */
[data-theme="camera"] .mix-sentence { background: var(--surface-2); border: 1px solid var(--border); }

/* MBTI 화면 설명: 검사 3단계 · 점 목록 · 16유형 표 */
.step-list { list-style: none; counter-reset: step; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.step-list li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; row-gap: 1px; align-items: center; }
.step-list li::before { content: counter(step); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.step-list b { font-size: 15px; }
.step-list span { font-size: 13px; color: var(--muted); }
.dot-list { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.dot-list li::marker { color: var(--accent); }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.type-cell { display: flex; align-items: baseline; gap: 8px; padding: 9px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid transparent; min-width: 0; }
.type-cell b { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; color: var(--accent); flex: none; }
.type-cell span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.type-cell.mine { border-color: var(--accent); }
.type-cell.mine span { color: var(--text); }
.type-cell span { white-space: normal; overflow: visible; line-height: 1.3; }
.type-cell { align-items: center; }

/* DMBTI 결과지: 이런 성격의 강아지는 (조심할 점) */
.caution-box { margin: 16px 0 4px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.caution-head { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.caution-list { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 12px; }
.caution-list li::marker { color: var(--accent); font-weight: 700; }
.caution-list b { display: block; font-size: 15px; margin-bottom: 2px; }
.caution-list span { display: block; font-size: 14px; line-height: 1.55; }
.caution-list small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* 밥 줬어요: 찍은 밥그릇 사진 */
.meal-photo { width: 100%; height: 180px; border-radius: var(--radius); background: var(--surface-2) center / cover no-repeat; margin-bottom: 10px; }

/* 먹여도 될까: 무엇이 얼마나 */
.amount-card { margin: 4px 0 10px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.amount-name { margin: 0 0 10px; font-size: 17px; font-weight: 700; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.amount-name small { font-size: 12px; font-weight: 500; color: var(--muted); }
.amount-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.amount-nums div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--surface); }
.amount-nums b { font-size: 18px; font-variant-numeric: tabular-nums; }
.amount-nums span { font-size: 12px; color: var(--muted); }

/* ===== 설정 (2026-10-29): 항목 목록 → 세부 화면, 묶음 목록 ===== */
.settings-body { gap: 22px; padding: 4px 16px 12px; }
.set-group h3 { margin: 0 4px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); }
.set-list { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.set-foot { margin: 8px 6px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; background: none; border: 0; color: var(--text); text-align: left; font: inherit; text-decoration: none; }
.set-row + .set-row { border-top: 1px solid var(--hairline); }
.set-row.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.set-row.stack .input-row { margin: 0; }
.set-row.nav { cursor: pointer; }
.set-row.nav:active { background: var(--surface-2); }
.set-row.danger strong { color: var(--danger); }
.set-row.link strong { color: var(--accent); font-weight: 600; }
.set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.set-text strong { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.set-text small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.set-pc { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.set-pc b { flex: none; min-width: 26px; font-size: 11.5px; font-weight: 700; line-height: 18px; }
.set-pc.good b { color: var(--sage); }
.set-pc.bad b { color: #c77800; }
.set-pc.good { margin-top: 3px; }
.set-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.set-ico svg { width: 19px; height: 19px; }
.set-chev { flex: none; width: 18px; height: 18px; color: var(--muted); opacity: 0.7; }
.set-chev svg { width: 18px; height: 18px; }
.set-range { flex: 0 0 55%; }
.set-head { display: flex; align-items: center; gap: 2px; font-size: 22px !important; }
.set-back { width: 38px; height: 38px; margin-left: -10px; display: grid; place-items: center; background: none; border: 0; color: var(--accent); }
.set-back svg { width: 26px; height: 26px; }
[data-theme="camera"] .set-list { box-shadow: none; border-color: #262628; }
[data-theme="camera"] .set-group h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.8px; }
[data-theme="camera"] .set-pc.bad b { color: #ff9f0a; }

/* 설정 고르기 (2026-10-29): 짧은 선택지는 분할 버튼, 많거나 길면 "값 >" 한 줄 → 체크 목록 시트 */
.set-segmented { display: grid; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.set-segmented-btn { min-height: 34px; padding: 6px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.set-segmented-btn.selected { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
[data-theme="camera"] .set-segmented-btn.selected { background: #3a3a3c; box-shadow: none; }
[data-theme="dark"] .set-segmented-btn.selected { background: #343841; box-shadow: none; }
.set-value { flex: none; max-width: 60%; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; text-align: right; }
.set-swatch { flex: none; display: inline-block; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--hairline); }
.set-swatch.photo { background: linear-gradient(170deg, #9cc9ff 0 42%, #f2c48d 42% 74%, #6b8f4e 74%); }
.set-pick { display: flex; flex-direction: column; margin: 2px -8px 0; }
.set-pick-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 10px; border: 0; border-radius: 0; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; }
.set-pick-row + .set-pick-row { box-shadow: 0 -1px 0 var(--hairline); }
.set-pick-row:active { background: var(--surface-2); }
.set-pick-row.selected { font-weight: 700; }
.set-pick-label { flex: 1; min-width: 0; }
.set-pick-check { flex: none; width: 20px; height: 20px; color: var(--accent); visibility: hidden; }
.set-pick-check svg { width: 20px; height: 20px; }
.set-pick-row.selected .set-pick-check { visibility: visible; }
.set-pick-row .set-swatch { width: 28px; height: 28px; border-radius: 8px; }
.set-head { display: flex; align-items: center; gap: 12px; min-height: 29px; }
.set-head > strong { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.set-row.stack { gap: 6px; }
.set-row.stack > .set-segmented { margin-top: 4px; }

/* =====================================================================
   아이폰 스타일 (2026-10-29): 카메라 화면을 뺀 모든 화면과 아래 시트에 공통.
   큰 제목 · 둥근 묶음 카드 · 버튼 높이 44 통일 · 하나 고르기 = 분할 버튼 · 여러 개 고르기 = 캡슐 · 초록 스위치
   [data-theme] 를 붙여 기존 테마별 규칙보다 뒤에서 이기게 함
   ===================================================================== */
[data-theme="camera"] { --bg: #000; --surface: #1c1c1e; --surface-2: #2c2c2e; --muted: #8e8e93; --border: #38383a; --hairline: rgba(84, 84, 88, 0.55); --seg-on: #636366; }
[data-theme="dark"] { --seg-on: #3d424c; }
:where(:root) { --seg-on: var(--surface); --ios-green: #34c759; }   /* 기본값: 테마별 값이 이기도록 우선순위 0 */
[data-theme="camera"], [data-theme="dark"] { --ios-green: #30d158; }

/* 큰 제목 + 오른쪽 글자 버튼 */
[data-theme] .page-head { padding: calc(10px + env(safe-area-inset-top)) 20px 10px; }
[data-theme] .page-head h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.8px; }
[data-theme] .page-head h2 small { font-size: 14px; font-weight: 500; letter-spacing: -0.2px; }
[data-theme] .page-head .btn, [data-theme] .page-head .btn.primary { min-height: 36px; padding: 6px 4px 6px 10px; background: none; box-shadow: none; color: var(--accent); font-size: 16px; font-weight: 600; border-radius: 8px; }

/* 둥근 묶음 카드 */
[data-theme] :where(.view:not(#view-camera)) .card { padding: 16px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: none; }
[data-theme] :where(.view:not(#view-camera), #sheet) .card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
[data-theme] :where(.view:not(#view-camera), #sheet) .hint { font-size: 13px; }

/* 버튼: 보통 44 · 작은 32(캡슐) · 주 버튼 50 */
[data-theme] :where(.view:not(#view-camera), #sheet) .btn { min-height: 44px; padding: 10px 16px; border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 16px; font-weight: 600; box-shadow: none; }
[data-theme] :where(.view:not(#view-camera), #sheet) .btn.small { min-height: 32px; padding: 6px 14px; border-radius: 16px; font-size: 14px; font-weight: 600; }
[data-theme] :where(.view:not(#view-camera), #sheet) .btn.primary { background: var(--accent); color: var(--accent-text); }
[data-theme] :where(.view:not(#view-camera), #sheet) .btn.primary.block { min-height: 50px; border-radius: 14px; font-size: 17px; }
[data-theme] :where(.view:not(#view-camera), #sheet) .btn.tinted { background: var(--accent-soft); color: var(--accent); }
[data-theme] :where(.view:not(#view-camera), #sheet) .btn.danger { background: var(--surface-2); color: var(--danger); box-shadow: none; }
[data-theme] :where(.view:not(#view-camera), #sheet) .row-buttons { gap: 10px; }

/* 여러 개 고르기: 캡슐 (고르면 색이 채워짐) */
[data-theme] :where(.view:not(#view-camera), #sheet) .chip:not(.glass) { min-height: 34px; padding: 6px 14px; border: 0; border-radius: 17px; background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 500; }
[data-theme] :where(.view:not(#view-camera), #sheet) .chip:not(.glass).selected { background: var(--accent); color: var(--accent-text); font-weight: 600; }

/* 하나만 고르기: 분할 버튼 */
[data-theme] :where(.view:not(#view-camera), #sheet) .chip-row.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; margin: 8px 0; border-radius: 10px; background: var(--surface-2); }
[data-theme] :where(.view:not(#view-camera), #sheet) .chip-row.seg .chip { min-height: 36px; padding: 6px 4px; border-radius: 8px; background: transparent; color: var(--text); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
[data-theme] :where(.view:not(#view-camera), #sheet) .chip-row.seg .chip.selected { background: var(--seg-on); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
[data-theme] .set-segmented-btn.selected { background: var(--seg-on); }

/* 입력칸 */
[data-theme] :where(.view:not(#view-camera), #sheet) .input { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--surface-2); font-size: 16px; }
[data-theme] :where(.view:not(#view-camera), #sheet) .input:focus { box-shadow: 0 0 0 2px var(--accent); }

/* 스위치: 아이폰 초록 */
[data-theme] .switch-row input:checked, [data-theme] .set-switch:checked { background: var(--ios-green); }

/* 목록 줄 (DMBTI 미검사 · 병원 · 먹여도 될까) */
.list-card { padding: 6px 16px !important; }
.list-card h3 { margin: 10px 0 2px !important; }
.list-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; }
.list-row + .list-row { border-top: 1px solid var(--hairline); }
.list-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--accent); font-weight: 700; }
.list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.list-text strong { font-size: 16px; font-weight: 600; }
.list-text small { font-size: 13px; color: var(--muted); }
.nav-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; }
.nav-card.inset { background: var(--surface-2); border-radius: 12px; margin: 4px 0 12px; }
.nav-card:active { filter: brightness(1.15); }
.nav-chev { flex: none; color: var(--muted); font-size: 24px; line-height: 1; }

/* 아기 카드: 동그란 얼굴, 버튼 줄 정리 */
[data-theme] .pet-card { border: 0; border-radius: 14px; background: var(--surface); box-shadow: none; }
[data-theme] .pet-card.current { box-shadow: inset 0 0 0 1.5px var(--accent); }
[data-theme] .pet-card .pet-avatar, [data-theme] .pet-card .avatar { border-radius: 50%; background-color: var(--surface-2); }
[data-theme] .pet-actions { gap: 8px; }
[data-theme] .pet-actions .btn { flex: 1; }
[data-theme] .pet-card.checked { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* 얼굴 동그라미: 바탕이 보이게, 사진 없을 때 큰 글자 대신 작은 안내 */
[data-theme] :where(.view:not(#view-camera), #sheet) .avatar { border-radius: 50%; background-color: var(--surface-2); }
[data-theme] :where(.view:not(#view-camera), #sheet) .avatar.big { font-size: 15px; font-weight: 600; color: var(--muted); }

/* ===== 사료 봉투 분석 (2026-10-29) ===== */
.kb-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.kb-slot { position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border-radius: 14px; background: var(--surface-2) center/cover no-repeat; color: var(--text); text-align: center; overflow: hidden; }
.kb-slot b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 14px; }
.kb-slot strong { font-size: 15px; font-weight: 600; }
.kb-slot small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.kb-slot.filled strong, .kb-slot.filled small { display: none; }
.kb-slot.filled b { position: absolute; top: 8px; left: 8px; }
.kb-slot.filled::after { content: "다시 고르기"; position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; }
.kb-spin { width: 34px; height: 34px; margin: 18px auto; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--accent); animation: kbspin 0.9s linear infinite; }
@keyframes kbspin { to { transform: rotate(360deg); } }
.kb-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.kb-head strong { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.kb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-tag { padding: 3px 10px; border-radius: 12px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 600; }
.kb-tag.soft { background: var(--surface-2); color: var(--muted); }
.kb-sec { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.kb-sec h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.kb-sec .hint { margin: 8px 0 0; }
.kb-big { margin: 0; font-size: 17px; font-weight: 700; }
.kb-sec .amount-nums div { background: var(--surface); }
.kb-table { display: grid; gap: 2px; font-size: 13px; }
.kb-tr { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 6px; align-items: center; padding: 8px 6px; border-radius: 8px; }
.kb-tr span { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.kb-tr small { font-size: 11.5px; color: var(--muted); }
.kb-th { padding-top: 0; color: var(--muted); font-size: 12px; }
.kb-tr.me { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.kb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kb-stats div { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 10px; background: var(--surface); }
.kb-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.kb-stats span { font-size: 11.5px; color: var(--muted); }
.kb-ings { display: flex; flex-direction: column; }
.kb-ing { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.kb-ing + .kb-ing { border-top: 1px solid var(--hairline); }
.kb-ing-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-ing-text strong { font-size: 14.5px; font-weight: 600; }
.kb-ing-text small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.kb-badge { flex: none; min-width: 38px; margin-top: 1px; padding: 2px 0; border-radius: 6px; text-align: center; font-size: 11.5px; font-weight: 700; }
.kb-badge.good { background: rgba(48, 209, 88, 0.16); color: var(--ios-green); }
.kb-badge.mid { background: var(--surface); color: var(--muted); }
.kb-badge.bad { background: rgba(255, 159, 10, 0.18); color: #ff9f0a; }
.kb-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.kb-list.good li::marker { color: var(--ios-green); }
.kb-list.bad li::marker { color: #ff9f0a; }
.food-row.tappable { cursor: pointer; }
.food-more { color: var(--accent) !important; font-weight: 600; }
.food-grams small { display: block; font-size: 11.5px; color: var(--muted); text-align: right; }

/* 설정 글자 크게 (2026-10-29) + 아래 '기능 설명' 칸 */
[data-theme] .set-group h3 { margin: 0 6px 10px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
[data-theme] .set-row { padding: 14px 16px; }
[data-theme] .set-head { min-height: 32px; }
[data-theme] .set-head > strong, [data-theme] .set-text strong { font-size: 17px; font-weight: 600; }
[data-theme] .set-text small { font-size: 14px; line-height: 1.5; }
[data-theme] .set-pc { font-size: 14px; line-height: 1.55; gap: 8px; }
[data-theme] .set-pc b { font-size: 13px; min-width: 30px; line-height: 21px; }
[data-theme] .set-foot { font-size: 14px; }
[data-theme] .set-value { font-size: 16px; }
/* 분할 버튼은 설정·시트·화면 어디서나 같은 크기 (36px · 14.5px · 고른 것만 굵게) */
[data-theme] .set-segmented-btn { min-height: 36px; color: var(--text); font-size: 14.5px; font-weight: 500; }
[data-theme] .set-segmented-btn.selected { font-weight: 600; }
[data-theme] .set-pick-row { min-height: 56px; font-size: 17px; }
[data-theme] .set-ico { width: 34px; height: 34px; }
.set-help { margin-top: 10px; }
.set-note { gap: 6px !important; }
.set-note-title { font-size: 16px; font-weight: 600; }
.set-chev.up { transform: rotate(90deg); }
.set-row > .set-head { flex: 1; min-width: 0; }   /* 스위치·값은 오른쪽 끝으로 */
.food-portion { margin: 6px 0 0; font-size: 13px; font-weight: 600; opacity: 0.85; }

/* 모든 화면 공통 '자세한 설명' 칸 (2026-10-29): 위는 기능만, 설명은 맨 아래에서 펼침 */
.help-section { margin: 22px 16px 8px; }
.help-section h3 { margin: 0 6px 10px; font-size: 15px; font-weight: 600; color: var(--muted); }
.help-card { border-radius: 14px; background: var(--surface); overflow: hidden; }
.help-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 16px; background: none; color: var(--text); text-align: left; }
.help-toggle strong { flex: 1; font-size: 17px; font-weight: 600; }
.help-count { color: var(--muted); font-size: 15px; }
.help-chev { color: var(--muted); font-size: 24px; line-height: 1; transition: transform 0.2s; }
.help-chev.up { transform: rotate(90deg); }
.help-body { border-top: 1px solid var(--hairline); }
.help-item { padding: 14px 16px; }
.help-item + .help-item { border-top: 1px solid var(--hairline); }
.help-title { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 600; }
.help-item p { margin: 4px 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.help-item .type-grid, .help-item .step-list, .help-item ul, .help-item table { margin-top: 8px; }
.settings-body .help-section { margin: 10px 0 8px; }
.help-item .set-pc { margin-top: 6px; }

/* 펫 카드 아래 같은 크기 2×2 칸 (품종 · 사료 · DMBTI · 병원) */
.pet-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pet-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; height: 62px; padding: 8px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-align: left; }
.pet-tile strong { font-size: 15px; font-weight: 600; }
.pet-tile small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--muted); }
.pet-tile.done small { color: var(--accent); font-weight: 600; }
.pet-tile:active { filter: brightness(1.15); }
.pet-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 댕사주 · 묘사주 */
.saju-note { text-align: center; }
.saju-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 12px; text-align: center; }
.saju-head strong { font-size: 22px; color: var(--accent); }
.saju-head small { font-size: 13px; color: var(--muted); }
.saju-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.saju-col { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; border-radius: 12px; background: var(--surface-2); }
.saju-col b { font: 700 32px/1.15 "Noto Serif CJK KR", "Noto Sans CJK KR", serif; }
.saju-col b.muted { color: var(--muted); opacity: .5; }
.saju-col small { font-size: 12px; color: var(--muted); }
.saju-els { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.saju-el { display: grid; grid-template-columns: 64px 1fr 20px; align-items: center; gap: 8px; font-size: 13px; }
.saju-el-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.saju-el-bar i { display: block; height: 100%; border-radius: 5px; }
.saju-el small { text-align: right; color: var(--muted); }
.saju-score { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface-2); margin-bottom: 6px; }
.saju-score strong { font-size: 30px; color: var(--accent); }
.saju-score small { font-size: 12px; color: var(--muted); }
.saju-legend { margin: 6px 0 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
.saju-legend summary { font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; }
.pick-row.selected { color: var(--accent); font-weight: 600; }
.saju-check { margin-left: auto; color: var(--accent); }
.saju-analyzing { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.saju-analyzing strong { font-size: 17px; color: var(--accent); }
.saju-analyzing small { font-size: 13px; color: var(--muted); }
.saju-analyzing .mbti-progress { margin: 0; }

/* 사료 고르기 목록 */
.pick-group { border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.pick-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 14px; background: none; color: var(--text); text-align: left; }
.pick-row + .pick-row { border-top: 1px solid var(--hairline); }
.pick-row:active { filter: brightness(1.15); }
.pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-text strong { font-size: 15.5px; font-weight: 600; }
.pick-text small { font-size: 13px; color: var(--muted); }
#sheet .input[type=search] { margin: 4px 0 6px; }
.kb-slot em { display: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent); }
.kb-slot.next:not(.filled) { box-shadow: inset 0 0 0 2px var(--accent); }
.kb-slot.next:not(.filled) em { display: block; }

/* ===== 사료 화면 (2026-10-29): 설정과 같은 묶음 목록. 오늘 → 사료 → 먹여도 될까? → 몸무게·생활 ===== */
.food-today { gap: 8px !important; padding-top: 16px; padding-bottom: 14px; }
.food-today-nums { display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.food-today-nums b { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; line-height: 1; }
.food-today-nums span { font-size: 15px; color: var(--muted); }
.food-today-nums em { margin-left: auto; font-style: normal; font-size: 15px; font-weight: 600; color: var(--muted); }
.food-today-nums em.warn { color: #ff9f0a; }
.food-today > small { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.food-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.food-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ios-green, #34c759); transition: width 0.3s; }
.food-bar.over i { background: #ff9f0a; }
.food-item { min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
.food-item.tappable { cursor: pointer; }
.food-item.tappable:active { background: var(--surface-2); }
.food-item .meal-thumb { width: 40px; height: 40px; }
.food-amt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 15px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.food-amt small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.food-del { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: -6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.food-del:active { background: var(--surface-2); }
.food-del svg { width: 16px; height: 16px; }
.food-kg { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 16px; }
.food-kg .food-weight { width: 84px; min-height: 36px; padding: 6px 10px; text-align: right; font-size: 16px; font-variant-numeric: tabular-nums; }
.set-row.stack .chip-row.seg { margin: 0; }
.food-actions { margin-top: 10px !important; }
#food-body > .chip-row.seg { margin: 0; }
/* 오늘: 아침·점심·저녁·간식별 칼로리 */
.food-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.food-slots div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.food-slots span { font-size: 12.5px; }
.food-slots b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.food-slots div.on { color: var(--text); }
.food-feed { width: 100%; margin: 0 !important; }
/* 밥·간식 기록 시트 */
.meal-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.meal-total span { font-size: 14.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-total b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn.small-link { min-height: 36px; padding: 6px 2px; background: none; color: var(--accent); font-size: 14.5px; font-weight: 600; }
.meal-form > .btn.primary.block { margin-top: 16px; }
.food-today-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: -2px; }
/* 검색 뒤 키보드를 닫고 첫 결과로 스크롤할 때 잠깐 테두리로 알려 줌 */
.search-hit { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color 0.6s; }
/* 목록에 없는 사료 알려 주기 (메일) */
.food-mail { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.food-mail p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.food-mail small { color: var(--muted); font-size: 12.5px; }
.food-mail .btn.small-link { flex: none; white-space: nowrap; }
.mbti-card > .btn.small-link { display: block; margin: 8px auto 0; }

/* 자동촬영: 원 안에 아기가 들어오면 원이 초록색 */
#guide.hit .guide-shape { stroke: #34c759; stroke-opacity: 0.95; stroke-dasharray: none; fill: #34c759; fill-opacity: 0.08; }
/* DMBTI 공유: 카드에 넣을 사진 고르기 (가로로 밀기) */
.mbti-photo-pick { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.mbti-photo-pick::-webkit-scrollbar { display: none; }
.mbti-photo { flex: none; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 12px; background: var(--surface-2) center / cover no-repeat; opacity: 0.7; }
.mbti-photo.selected { opacity: 1; outline: 3px solid var(--accent); outline-offset: 1px; }
/* 묶음 제목 오른쪽 작은 버튼 (예: 사료 화면 '오늘 · 공유하기') */
.set-group h3:has(.head-link) { display: flex; align-items: center; justify-content: space-between; }
.set-group h3 .head-link { min-height: 30px; padding: 2px 4px; font-size: 15px; }
/* 사료 화면: 먹은 것 · 움직인 것 */
.bal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bal-meter { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.bal-label { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.bal-meter b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bal-meter small { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bal-bar { height: 6px; margin: 2px 0; border-radius: 3px; background: rgba(127, 127, 127, 0.2); overflow: hidden; }
.bal-bar i { display: block; height: 100%; border-radius: 3px; }
.bal-meter.food .bal-bar i { background: #ff9f0a; }
.bal-meter.walk .bal-bar i { background: var(--ios-green, #34c759); }
.bal-net { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.bal-net b.plus { color: #ff9f0a; }
.bal-net b.minus { color: var(--ios-green, #34c759); }
.bal-verdict { margin: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.bal-verdict.warn { color: #ff9f0a; }
.bal-verdict.good { color: var(--ios-green, #34c759); }
.bal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bal-day { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.bal-day.today span { color: var(--accent); font-weight: 700; }
.bal-cols { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 72px; }
.bal-cols::after { content: ""; position: absolute; left: 0; right: 0; bottom: 66.7%; border-top: 1px dashed rgba(127, 127, 127, 0.45); }   /* 100% 선 (막대는 150%까지) */
.bal-cols i { width: 9px; min-height: 2px; border-radius: 3px 3px 1px 1px; }
.bal-cols i.f { background: #ff9f0a; }
.bal-cols i.w { background: var(--ios-green, #34c759); }
.bal-legend { display: flex; gap: 14px; justify-content: center; font-size: 12px; color: var(--muted); }
.bal-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.bal-legend .f::before { background: #ff9f0a; }
.bal-legend .w::before { background: var(--ios-green, #34c759); }
.bal-legend .line::before { width: 14px; height: 0; border-top: 1px dashed var(--muted); border-radius: 0; vertical-align: 3px; }
/* 산책 경로 지도 */
.route-map { width: 100%; margin: 10px 0 4px; border-radius: 14px; overflow: hidden; background: var(--surface-2); z-index: 0; position: relative; }
/* 3분마다 남는 시간 표시 · 재생 중 움직이는 점의 시간 · 다시 보기 버튼 */
.walk-tick span { display: inline-block; transform: translate(-50%, -50%); padding: 1px 5px; border: 2px solid #e2733a; border-radius: 9px; background: #fff; color: #222; font-size: 10.5px; font-weight: 700; line-height: 14px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.leaflet-tooltip.walk-now { padding: 1px 6px; border: 0; border-radius: 8px; background: #222; color: #fff; font-size: 11px; font-weight: 700; box-shadow: none; }
.leaflet-tooltip.walk-now::before { display: none; }
.route-replay { position: absolute; left: 8px; bottom: 8px; z-index: 800; min-height: 0; padding: 5px 10px; border: 0; border-radius: 14px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 12px; font-weight: 600; }
.route-empty { margin: 8px 0; }
/* 산책 화면 묶음 (2026-10-30 정리): 위 작은 제목 + 카드 */
.walk-sec { display: grid; gap: 10px; }
.walk-sec-title { margin: 0 6px; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.walk-more { display: block; margin: 8px auto 0; }
.card.today .route-map { margin-top: 12px; }
.walk-week { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.walk-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.walk-row:last-of-type { border-bottom: 0; }
.walk-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font: inherit; }
.walk-row-text strong { font-size: 15.5px; font-weight: 600; }
.walk-row-text small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.walk-row > .btn.small { flex: none; width: 34px; min-height: 34px; padding: 0; background: transparent; color: var(--muted); }

/* '분석 중…'·'등록 중…' 표시 (ui.js busy): 화면 위쪽 가운데, 창(시트) 위에도 보이게 */
#busy-pill { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); z-index: 3000; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; background: rgba(20, 20, 22, 0.88); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); transform: translate(-50%, -8px); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; }
#busy-pill.on { opacity: 1; transform: translate(-50%, 0); }
#busy-pill .busy-spin { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: busy-spin 0.8s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }

/* 아기 카드 위쪽 배경 띠: 그 아이의 가장 잘 나온 사진 (petcover.js). 아이콘은 띠에 살짝 걸치게 */
.pet-cover { position: relative; height: 200px; margin: -14px -14px 0; border-radius: 14px 14px 0 0; background: center / cover no-repeat var(--surface-2); cursor: pointer; }
.pet-cover-edit { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 12px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 11.5px; font-weight: 600; }
.pet-card.has-cover .pet-main .avatar { margin-top: -38px; border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.pet-card.has-cover .pet-main { align-items: flex-start; }
.mbti-card h3.mbti-name { display: flex; align-items: center; gap: 10px; }
.mbti-card h3.mbti-name .list-avatar { width: 36px; height: 36px; flex: none; }

/* 고양이 놀이 기록 (play.js) */
.play-row { margin: 2px 0 14px; }
.play-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.play-top span { color: var(--muted); font-size: 13px; }
.play-bar { height: 10px; margin-top: 6px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.play-bar i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.play-bar.done i { background: #34c759; }
.play-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 44px; margin-top: 8px; padding-bottom: 14px; }
.play-week i { position: relative; display: block; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.play-week i.done { background: #34c759; }
.play-week small { position: absolute; left: 0; right: 0; bottom: -15px; text-align: center; font-size: 10px; color: var(--muted); font-style: normal; }
.play-timer { margin: 8px 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.play-list { margin-top: 10px; }
.play-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--surface-2); font-size: 14px; }

/* 앱 정보: 라이선스 원문 · 개인정보처리방침 */
.license-text { white-space: pre-wrap; font: 12px/1.5 var(--mono, monospace); color: var(--muted); margin: 0; }
.policy-frame { width: 100%; height: 70vh; border: 0; border-radius: 12px; background: #fff; }
a.set-row { text-decoration: none; color: inherit; }

/* =====================================================================
   아이폰처럼 부드럽게 (2026-10-31): 화면 전환 · 밀어 넣기 · 시트 · 누름 반응
   움직이는 건 transform·opacity 만 (폰이 그래픽 칩으로 처리해서 끊기지 않음)
   ===================================================================== */
:root { --ease-ios: cubic-bezier(.32, .72, 0, 1); --ease-out: cubic-bezier(.2, .8, .2, 1); }

/* 탭 이동: 새 화면이 살짝 떠오르며 나타남 (카메라 화면은 네이티브 미리보기 위라 그대로) */
.view.active { animation: view-in .24s var(--ease-out); }
#view-camera.active { animation: none; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
/* 세부 화면으로 들어감(설정 항목·병원): 오른쪽에서 밀려 들어옴 / 돌아감: 왼쪽에서 */
.view.active.push { animation: view-push .36s var(--ease-ios); }
.view.active.pop { animation: view-pop .32s var(--ease-ios); }
@keyframes view-push { from { opacity: .4; transform: translateX(34%); } }
@keyframes view-pop { from { opacity: .4; transform: translateX(-22%); } }

/* 바텀시트: 아래 끝에서 끝까지 올라오고, 닫힐 때도 아래로 내려감. 끌어내리는 중엔 손가락을 따라감 */
.sheet { transition: opacity .3s var(--ease-ios); }
.sheet-card { transform: translateY(105%); transition: transform .42s var(--ease-ios); will-change: transform; overscroll-behavior: contain; }
.sheet.open .sheet-card { transform: none; }
.sheet.dragging, .sheet.dragging .sheet-card { transition: none; }
#sheet-body.swap { animation: sheet-swap .22s var(--ease-out); }
@keyframes sheet-swap { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 700px) {
  .sheet-card { transform: scale(.94); opacity: 0; transition: transform .3s var(--ease-ios), opacity .2s; }
  .sheet.open .sheet-card { transform: none; opacity: 1; }
}

/* 사진 보기·편집·실루엣 창: 살짝 커지며 나타남 */
.viewer.open, .editor.open, #silhouette.open { animation: pop-in .26s var(--ease-out); }
@keyframes pop-in { from { opacity: 0; transform: scale(.96); } }

/* 누름 반응: 카드형은 살짝 작아지고, 목록 줄은 바탕이 옅게 깔림 (손을 떼면 부드럽게 돌아옴) */
.pet-tile, .choice, .chip, .round, .act, .tabbar a, .help-toggle, .set-segmented-btn {
  transition: transform .18s var(--ease-out), opacity .18s, background-color .18s, color .18s;
}
.pet-tile:active, .choice:active, .chip:active { transform: scale(.97); }
.round:active, .tabbar a:active { transform: scale(.9); opacity: .7; }
.set-row, .help-toggle { transition: background-color .25s; }
button.set-row:active, a.set-row:active, label.set-row:active, .help-toggle:active { background-color: var(--surface-2); transition: none; }
.set-switch::after, .switch-row input::after { transition: transform .28s var(--ease-ios); }
.set-switch:active::after, .switch-row input:active::after { width: 25px; }   /* 아이폰 스위치처럼 누르는 동안 손잡이가 늘어남 */
.set-switch:checked:active::after, .switch-row input:checked:active::after { transform: translateX(13px); }

/* 움직임 줄이기를 켠 사람에게는 애니메이션 없이 */
@media (prefers-reduced-motion: reduce) {
  .view.active, .view.active.push, .view.active.pop, #sheet-body.swap, .viewer.open, .editor.open, #silhouette.open { animation: none; }
  .sheet-card { transition-duration: .01s; }
}

/* ===== 댕냥이 먹어도 될까 (2026-10-31): 🐶 댕이 · 🐱 냥이 따로 판정 ===== */
.dc-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.dc-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 12px; border-radius: var(--radius); text-align: center; border: 2px solid transparent; }
.dc-card .dc-who { font-size: 15px; font-weight: 800; color: var(--text); }
.dc-card .dc-who small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dc-card .dc-icon { font-size: 34px; line-height: 1.15; }
.dc-card strong { font-size: 16px; letter-spacing: -0.3px; }
.dc-card.mine { border-color: currentColor; }
.dc-card.no { background: #fde8e8; color: #c0392b; } .dc-card.caution { background: #fff3d6; color: #b26a00; } .dc-card.ok { background: #e4f3e6; color: #2e7d32; } .dc-card.unknown { background: var(--surface-2); color: var(--muted); }
.fc-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.fc-head img { width: 64px; height: 64px; flex: none; border-radius: 12px; object-fit: cover; }
.dc-name { margin: 4px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }
.dc-name small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.dc-reasons { display: grid; gap: 6px; margin: 4px 0 8px; }
.dc-reason { margin: 0; padding: 10px 12px; border-radius: 12px; border-left: 4px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 1.55; }
.dc-reason b { display: block; margin-bottom: 2px; font-size: 13.5px; }
.dc-reason.no { border-left-color: #e74c3c; } .dc-reason.no b { color: #c0392b; }
.dc-reason.caution { border-left-color: #f0a500; } .dc-reason.caution b { color: #b26a00; }
.dc-reason.ok { border-left-color: #34c759; } .dc-reason.ok b { color: #2e7d32; }
.food-check[role="button"] { cursor: pointer; transition: transform .18s var(--ease-out); }
.food-check[role="button"]:active { transform: scale(.98); }
.food-check .dc-reasons { margin: 8px 0 0; }
.food-check .dc-reason { margin: 0; padding: 8px 10px; background: rgba(255, 255, 255, 0.6); color: var(--text); font-size: 13px; }
.food-check .food-src { font-size: 12px; }
.dc-badges { display: flex; gap: 4px; flex: none; margin-left: auto; }
.dc-badge { padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--surface); color: var(--muted); }
.dc-badge.no { background: #fbd5d5; color: #c0392b; } .dc-badge.caution { background: #ffe9b0; color: #9a5b00; } .dc-badge.ok { background: #cdebd1; color: #2e7d32; }
.fc-all { margin-top: 12px; }
.fc-log { display: grid; gap: 6px; }
.fc-log-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-align: left; transition: transform .18s var(--ease-out); }
.fc-log-row:active { transform: scale(.98); }
.fc-log-row img, .fc-log-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; background: var(--surface); font-size: 20px; }
.fc-log-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fc-log-text strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.fc-log-text small { font-size: 12px; color: var(--muted); }
.fc-log-row { overflow: hidden; }
.fc-log-badges { flex: none; font-size: 13px; line-height: 1.5; text-align: right; white-space: nowrap; }
.fc-log-clear { margin-top: 8px; }
/* 카메라 테마(기본, 어두운 화면) */
[data-theme="camera"] .dc-card.no, [data-theme="dark"] .dc-card.no { background: rgba(255, 69, 58, 0.15); color: #ff6961; }
[data-theme="camera"] .dc-card.caution, [data-theme="dark"] .dc-card.caution { background: rgba(255, 214, 10, 0.12); color: #ffd60a; }
[data-theme="camera"] .dc-card.ok, [data-theme="dark"] .dc-card.ok { background: rgba(48, 209, 88, 0.14); color: #30d158; }
[data-theme="camera"] .dc-reason.no b, [data-theme="dark"] .dc-reason.no b { color: #ff6961; }
[data-theme="camera"] .dc-reason.caution b, [data-theme="dark"] .dc-reason.caution b { color: #ffd60a; }
[data-theme="camera"] .dc-reason.ok b, [data-theme="dark"] .dc-reason.ok b { color: #30d158; }
[data-theme="camera"] .food-check .dc-reason, [data-theme="dark"] .food-check .dc-reason { background: rgba(0, 0, 0, 0.25); }
[data-theme="camera"] .dc-badge.no, [data-theme="dark"] .dc-badge.no { background: rgba(255, 69, 58, 0.22); color: #ff6961; }
[data-theme="camera"] .dc-badge.caution, [data-theme="dark"] .dc-badge.caution { background: rgba(255, 214, 10, 0.18); color: #ffd60a; }
[data-theme="camera"] .dc-badge.ok, [data-theme="dark"] .dc-badge.ok { background: rgba(48, 209, 88, 0.2); color: #30d158; }

/* 익혀서 이만큼 · 하루 최대 양 (2026-10-31) */
.amt-title { margin: 12px 0 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.amt-rows { display: grid; gap: 4px; }
.amt-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface); font-size: 14px; }
.amt-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt-row.mine { background: var(--accent-soft, rgba(255, 214, 10, 0.15)); border: 1.5px solid var(--accent); font-weight: 700; }
.cook-box { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.cook-box b { display: block; margin-bottom: 2px; font-size: 13.5px; }
.cook-box p { margin: 0; font-size: 14px; line-height: 1.55; }

/* 사료 화면: 댕냥이 먹어도 될까 큰 카드 */
.fc-hero { display: flex; align-items: center; gap: 14px; width: 100%; margin: 12px 0; padding: 18px 16px; border-radius: var(--radius); text-align: left; color: #1d1d1f;
  background: linear-gradient(135deg, #ffe066 0%, #ffb648 100%); box-shadow: 0 6px 18px rgba(255, 170, 40, 0.28); transition: transform .18s var(--ease-out); }
.fc-hero:active { transform: scale(.98); }
.fc-hero-ic { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: rgba(255, 255, 255, 0.6); font-size: 24px; letter-spacing: -4px; }
.fc-hero-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fc-hero-text strong { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; }
.fc-hero-text small { font-size: 13px; line-height: 1.4; color: rgba(0, 0, 0, 0.65); }
.fc-hero-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fc-hero-tags span { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.65); font-size: 11.5px; font-weight: 700; }
.fc-hero .set-chev { flex: none; color: rgba(0, 0, 0, 0.45); }

/* ===== 카메라 더보기 (2026-10-31 정돈): 도구 타일 4칸 + 묶음 카드 ===== */
.more-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 2px 0 18px; }
.more-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 12px 4px 10px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text); }
.more-tile:active { transform: scale(0.96); }
.more-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--text); }
.more-ic svg { width: 22px; height: 22px; }
.more-tile b { font-size: 13.5px; font-weight: 700; letter-spacing: -0.2px; }
.more-tile small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.more-tile.on .more-ic { background: var(--accent); color: var(--on-accent, #111); }
.more-tile.on small { color: var(--accent); font-weight: 600; }
.more-group { margin-bottom: 14px; }
.more-group h4 { margin: 0 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; color: var(--muted); }
.more-card { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.more-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.more-row + .more-row { border-top: 1px solid var(--hairline); }
.more-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.more-text strong { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.more-text small { font-size: 12px; color: var(--muted); }
.more-all { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin: 4px 0 2px; padding: 13px; border-radius: 14px; background: none; border: 1px solid var(--hairline); color: var(--accent); font-size: 14.5px; font-weight: 600; }
.more-chev svg { width: 16px; height: 16px; }

/* 처음 켰을 때 안내 (onboard.js) */
.onboard { position: fixed; inset: 0; z-index: 900; background: var(--bg); color: var(--text); overflow-y: auto; animation: ob-in .25s ease-out; }
.onboard.out { opacity: 0; transition: opacity .25s; }
@keyframes ob-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ob-page { max-width: 440px; margin: 0 auto; min-height: 100%; padding: calc(env(safe-area-inset-top) + 40px) 22px calc(env(safe-area-inset-bottom) + 28px); display: flex; flex-direction: column; gap: 14px; }
.ob-icon { width: 112px; height: 112px; border-radius: 26px; align-self: center; margin-top: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.ob-logo { width: min(64vw, 240px); height: auto; align-self: center; margin-top: 4px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.12)); }
.ob-title { font-size: 28px; line-height: 1.3; text-align: center; margin: 10px 0 6px; font-weight: 800; letter-spacing: -0.5px; }
.ob-points { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ob-points li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); }
.ob-points b { font-size: 16px; }
.ob-points span { font-size: 14px; color: var(--muted); }
.ob-actions { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.ob-actions .small-link { align-self: center; }
.ob-big { min-height: 54px; font-size: 17px; }
.ob-step { font-size: 13px; color: var(--muted); margin: 0; }
.ob-h { font-size: 23px; line-height: 1.35; margin: 0; font-weight: 800; letter-spacing: -0.4px; }
.ob-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-kind { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 18px; background: var(--surface-2); color: var(--text); border: 2px solid transparent; font-size: 16px; font-weight: 700; }
.ob-kind img { width: 92px; height: 92px; object-fit: contain; }
.ob-kind.selected { border-color: var(--accent); }
.ob-form { display: flex; flex-direction: column; gap: 10px; }
.ob-photo { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ob-photo small { color: var(--muted); font-size: 14px; }
.ob-err { color: var(--danger, #e5534b); font-size: 13px; margin: -4px 0 0; min-height: 0; }
.ob-err:empty { display: none; }
.ob-done { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.ob-done b { font-size: 17px; }
.ob-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; }

/* 아기 지우기: 사진도 함께 지우기 체크 */
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); margin: 8px 0; }
.check-row input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--danger, #e5534b); }
.check-row span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.check-row small { color: var(--muted); font-size: 13px; }

/* 품종 고르기 창 (breedpick.js): 첫 안내 위에도 뜨게 */
.breed-pick { position: fixed; inset: 0; z-index: 1000; background: var(--bg); color: var(--text); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 8px) 16px 0; animation: ob-in .2s ease-out; }
.bp-top { display: flex; align-items: center; gap: 6px; min-height: 48px; }
.bp-top strong { font-size: 18px; }
.bp-close { width: 40px; height: 40px; font-size: 30px; line-height: 1; background: none; color: var(--accent); }
.bp-search { margin: 4px 0 8px; }
.bp-list { flex: 1; overflow-y: auto; padding-bottom: calc(env(safe-area-inset-bottom) + 20px); }
.bp-head { margin: 14px 4px 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.bp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; background: none; color: var(--text); text-align: left; border-bottom: 1px solid var(--border); }
.bp-row b { font-size: 16px; font-weight: 600; }
.bp-row small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-row.selected b { color: var(--accent); }
.bp-own { background: var(--surface-2); border: none; margin-bottom: 4px; flex-direction: column; gap: 2px; }
.bp-own small { white-space: normal; }
.bp-empty { color: var(--muted); font-size: 14px; padding: 16px 6px; }
input.input[readonly] { cursor: pointer; }

/* 테스터 모집 칸 (공유 창 아래 · 설정 앱 정보) */
.tester-box { margin: 16px 0 4px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.tester-box b { display: block; font-size: 14.5px; }
.tester-box p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.tester-box .row-buttons { margin-top: 10px; }
.tester-box small { display: block; margin-top: 8px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.set-group .tester-box { margin: 0; border-radius: 0; border: 0; }

/* 새 버전 알림 창 */
.update-box { margin: 4px 0 14px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.update-box b { display: block; font-size: 16px; }
.update-box small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.update-box ul { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; }
#sheet-body .update-box ~ .btn.block { margin-top: 8px; }
.backup-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; max-height: 46vh; overflow-y: auto; }
.backup-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: inherit; text-align: left; }
.backup-item b { font-size: 15.5px; }
.backup-item small { color: var(--muted); font-size: 12px; word-break: break-all; }
.update-link { display: block; margin: 18px auto 6px; padding: 6px 10px; background: none; border: 0; color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.update-link.new { padding: 10px 16px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; }

/* =====================================================================
   왕자 · 공주 테마 (2026-11-02, 픽핏 기본 테마)
   그림은 ChatGPT로 그린 것 (design/ → img/theme, img/tabs). 등록할 때 남자아기 = 왕자, 여자아기 = 공주.
   ===================================================================== */
[data-theme="prince"] {
  --bg: #f3f7ff;
  --bg-tint: #e6efff;
  --surface: #ffffff;
  --surface-2: #edf3fd;
  --text: #1f2a44;
  --muted: #6d7a97;
  --accent: #3d74d6;          /* 로열 블루 */
  --accent-soft: #dde9ff;
  --accent-text: #ffffff;
  --gold: #e3b23c;
  --border: #d9e4f6;
  --hairline: rgba(31, 42, 68, 0.07);
  --radius: 22px;
  --tabbar: rgba(255, 255, 255, 0.9);
  --theme-art: url(../img/theme/prince-bg.webp);
}
[data-theme="princess"] {
  --bg: #fff4f8;
  --bg-tint: #ffe7f0;
  --surface: #ffffff;
  --surface-2: #fdedf3;
  --text: #4a2a3a;
  --muted: #a27b8d;
  --accent: #e8508f;          /* 분홍 */
  --accent-soft: #ffe0ec;
  --accent-text: #ffffff;
  --gold: #e3b23c;
  --border: #f5d8e3;
  --hairline: rgba(74, 42, 58, 0.07);
  --radius: 22px;
  --tabbar: rgba(255, 255, 255, 0.9);
  --theme-art: url(../img/theme/princess-bg.webp);
}
/* 배경 그림: 위·아래에만 장식, 가운데는 연한 색. 스크롤해도 그림은 그 자리에 (카메라 화면은 제외) */
:is([data-theme="prince"], [data-theme="princess"]) .view:not(#view-camera),
:is([data-theme="prince"], [data-theme="princess"]) .onboard { background: var(--bg) var(--theme-art) center / cover no-repeat; }
:is([data-theme="prince"], [data-theme="princess"]) .page-head { background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
:is([data-theme="prince"], [data-theme="princess"]) .card,
:is([data-theme="prince"], [data-theme="princess"]) .set-list { border-color: color-mix(in srgb, var(--gold) 28%, transparent); }
:is([data-theme="prince"], [data-theme="princess"]) .btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 55%, transparent);
}
/* 아래 탭: 테마 그림 아이콘 (안 고른 탭은 흐리게) */
:is([data-theme="prince"], [data-theme="princess"]) .tabbar [data-icon] { width: 32px; height: 32px; background: center / contain no-repeat; }
:is([data-theme="prince"], [data-theme="princess"]) .tabbar [data-icon] svg { display: none; }
:is([data-theme="prince"], [data-theme="princess"]) .tabbar a:not(.active) [data-icon] { opacity: 0.55; filter: saturate(0.6); }
:is([data-theme="prince"], [data-theme="princess"]) .tabbar a.active [data-icon] { transform: translateY(-2px) scale(1.1); }
[data-theme="prince"] .tabbar a[href="#camera"] [data-icon] { background-image: url(../img/tabs/prince-camera.webp); }
[data-theme="prince"] .tabbar a[href="#album"] [data-icon] { background-image: url(../img/tabs/prince-album.webp); }
[data-theme="prince"] .tabbar a[href="#pets"] [data-icon] { background-image: url(../img/tabs/prince-baby.webp); }
[data-theme="prince"] .tabbar a[href="#timeline"] [data-icon] { background-image: url(../img/tabs/prince-timeline.webp); }
[data-theme="prince"] .tabbar a[href="#settings"] [data-icon] { background-image: url(../img/tabs/prince-settings.webp); }
[data-theme="princess"] .tabbar a[href="#camera"] [data-icon] { background-image: url(../img/tabs/princess-camera.webp); }
[data-theme="princess"] .tabbar a[href="#album"] [data-icon] { background-image: url(../img/tabs/princess-album.webp); }
[data-theme="princess"] .tabbar a[href="#pets"] [data-icon] { background-image: url(../img/tabs/princess-baby.webp); }
[data-theme="princess"] .tabbar a[href="#timeline"] [data-icon] { background-image: url(../img/tabs/princess-timeline.webp); }
[data-theme="princess"] .tabbar a[href="#settings"] [data-icon] { background-image: url(../img/tabs/princess-settings.webp); }
/* 빈 화면 그림 (앨범·타임라인) */
.empty-art { display: block; width: min(52vw, 220px); margin: 0 auto 10px; }

/* ===== 타임라인 (timeline.js) ===== */
#timeline-sub { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.tl-babies { margin: 0 0 6px; }
.tl-month { margin: 18px 4px 8px; font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: 0.2px; }
.tl-list { position: relative; }
.tl-item { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding-bottom: 14px; }
.tl-item::before { content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--gold, var(--accent)) 45%, transparent); }
.tl-item:last-child::before { bottom: auto; height: 24px; }
.tl-rail { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: 10px; }
.tl-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-sizing: border-box; }
.tl-badge { width: 46px; height: 46px; margin-top: -4px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15)); }
.tl-card { background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow-sm); border: 1px solid var(--hairline); cursor: pointer; }
.tl-item.milestone .tl-card { border-color: color-mix(in srgb, var(--gold, var(--accent)) 55%, transparent); }
.tl-date { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tl-age { padding: 1px 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tl-title { display: block; margin-top: 4px; font-size: 16px; }
.tl-text { margin: 4px 0 0; white-space: pre-wrap; user-select: text; -webkit-user-select: text; }
.tl-thumbs { display: grid; gap: 4px; margin-top: 10px; }
.tl-thumbs.n1 { grid-template-columns: 1fr; }
.tl-thumbs.n2 { grid-template-columns: 1fr 1fr; }
.tl-thumbs.n3 { grid-template-columns: 1fr 1fr 1fr; }
.tl-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--surface-2) center / cover no-repeat; overflow: hidden; }
.tl-thumbs.n1 .tl-thumb { aspect-ratio: 4 / 3; }
.tl-thumb.video::after, .tl-att.video::after, .tl-pick.video::after { content: "▶"; position: absolute; left: 6px; bottom: 4px; color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.tl-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 20px; font-weight: 800; }
/* 기록 쓰기 창 */
.tl-form .field-label { margin-top: 10px; }
.tl-input { resize: none; }
.tl-count { display: block; text-align: right; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.tl-badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tl-badge-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 14px; border: 2px solid transparent; background: var(--surface-2); font-size: 11px; font-weight: 600; color: var(--text); }
.tl-badge-pick img { width: 44px; height: 44px; }
.tl-badge-pick.selected { border-color: var(--accent); background: var(--accent-soft); }
.tl-attached { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tl-attached .hint { grid-column: 1 / -1; margin: 0; }
.tl-att { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--surface-2) center / cover no-repeat; }
.tl-att-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; line-height: 22px; }
.tl-media-buttons { justify-content: flex-start; flex-wrap: wrap; }
.tl-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; max-height: 300px; overflow-y: auto; }
.tl-picker .hint { grid-column: 1 / -1; }
.tl-pick { position: relative; aspect-ratio: 1; border-radius: 8px; background: var(--surface-2) center / cover no-repeat; }
.tl-pick-check { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.25); color: transparent; font-size: 12px; line-height: 18px; font-weight: 800; }
.tl-pick.on { outline: 3px solid var(--accent); outline-offset: -3px; }
.tl-pick.on .tl-pick-check { background: var(--accent); color: #fff; }
/* 크게 보기 */
.tl-lightbox { position: fixed; inset: 0; z-index: 60; background: #0d0b09; display: flex; flex-direction: column; }
.tl-lb-top { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; color: #fff; }
.tl-lb-count { font-size: 14px; font-weight: 600; }
.tl-lb-stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.tl-lb-stage img, .tl-lb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- 네컷 (fourcut.js) ---------- */
/* 부스: 카메라 미리보기 위에 덮음. 가운데는 비워서 미리보기가 보이게 */
.fc-booth { position: fixed; inset: 0; z-index: 55; pointer-events: none; display: flex; flex-direction: column; color: #fff; }
.fc-booth.hidden { display: none; }
.fc-booth > * { pointer-events: auto; }
body.fc-on .tabbar, body.fc-on nav.tabs { visibility: hidden; }
.fc-top { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.fc-top strong { font-size: 18px; margin-right: auto; letter-spacing: .5px; }
.fc-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 18px; }
.fc-pill { border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.3); color: #fff; border-radius: 99px; padding: 7px 14px; font-size: 14px; font-weight: 600; }
.fc-guide { pointer-events: none !important; align-self: center; margin: auto 0; width: min(86vw, 52vh); border: 3px dashed rgba(255,255,255,.75); border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.18); }
.fc-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none !important; font: 800 30vw/1 "GmarketSans", sans-serif; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.45); }
.fc-count.pop { animation: fc-pop .9s ease-out; }
@keyframes fc-pop { from { transform: scale(1.5); opacity: 0; } 25% { opacity: 1; } to { transform: scale(.9); opacity: .2; } }
.fc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none !important; }
.fc-flash.go { animation: fc-flash .45s ease-out; }
@keyframes fc-flash { from { opacity: .95; } to { opacity: 0; } }
.fc-bottom { margin-top: auto; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7) 30%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fc-thumbs { display: flex; gap: 8px; }
.fc-thumbs i { width: 54px; height: 54px; border-radius: 10px; border: 2px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12) center/cover; position: relative; }
.fc-thumbs i::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px sans-serif; color: rgba(255,255,255,.8); }
.fc-thumbs i.done::after { content: ''; }
.fc-thumbs i.now { border-color: #ff5d8f; box-shadow: 0 0 0 3px rgba(255,93,143,.4); }
.fc-start { min-width: 200px; padding: 15px 28px; border: 0; border-radius: 99px; font-size: 18px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff6f9c, #ff9a5c); box-shadow: 0 6px 18px rgba(255,110,150,.45); }
.fc-start.stop { background: #444; box-shadow: none; }
.fc-hint { font-size: 13px; opacity: .85; }

/* 꾸미기 */
.fc-editor { position: fixed; inset: 0; z-index: 58; background: var(--bg); color: var(--text); display: flex; flex-direction: column; }
body.fc-editing { overflow: hidden; }
.fc-ehead { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 8px; }
.fc-ehead strong { margin-right: auto; font-size: 18px; }
.fc-ehead .fc-x { background: var(--accent-soft); color: var(--text); }
.fc-retake { border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 99px; padding: 7px 14px; font-weight: 700; }
.fc-stage { flex: 0 0 auto; height: 46vh; display: grid; place-items: center; padding: 6px 12px; }
.fc-preview { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.fc-panel { flex: 1; overflow-y: auto; padding: 4px 14px calc(16px + env(safe-area-inset-bottom)); }
.fc-panel h4 { margin: 12px 2px 6px; font-size: 13px; opacity: .7; font-weight: 700; }
.fc-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fc-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line, rgba(0,0,0,.15)); background: var(--card, #fff); color: var(--text); border-radius: 99px; padding: 8px 13px; font-size: 14px; }
.fc-chip.on { border-color: var(--accent); background: var(--accent); color: var(--accent-text); font-weight: 700; }
.fc-sw { width: 16px; height: 16px; border-radius: 50%; border: 2px solid; }
.fc-text { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line, rgba(0,0,0,.15)); background: var(--card, #fff); color: var(--text); font-size: 15px; }
.fc-check { display: flex; align-items: center; gap: 6px; margin: 10px 2px; font-size: 14px; }
.fc-actions { display: flex; gap: 10px; margin-top: 12px; }
.fc-actions button { flex: 1; padding: 14px; border-radius: 14px; border: 0; font-size: 16px; font-weight: 800; }
.fc-save { background: linear-gradient(135deg, #ff6f9c, #ff9a5c); color: #fff; }
.fc-share { background: var(--accent-soft); color: var(--text); }
.fc-share.hidden { display: none; }
/* 카메라 모드 줄의 '네컷' 버튼 */
#view-camera .cam-text.fc-mode { color: #ffb3c9; font-weight: 700; }   /* 사진·영상 옆 네컷 (픽핏: 아래 첫 줄 5칸) */

/* 인물 관계 묶음 · 빠른 등록 (pets.js) */
.rel-quick { display: flex; gap: 8px; margin: 4px 0 10px; }
.rel-quick .btn { flex: 1; }
.rel-head { margin: 14px 4px 6px; font-size: 14px; opacity: .75; }
/* 내 장소 (places.js) */
.cam-place { font-size: 13px; opacity: .85; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-place.named { opacity: 1; color: #ffd27a; }
.pl-now { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--accent-soft); }
.pl-now strong { display: block; font-size: 16px; }
.pl-now small { opacity: .75; font-variant-numeric: tabular-nums; }
.pl-emoji { font-size: 22px; }
.pl-emoji.big { font-size: 34px; }
.pl-refresh { margin: 8px 0 4px; }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.pl-name { flex: 1; min-width: 0; }
.pl-name strong, .pl-name small { display: block; }
.pl-name small { opacity: .7; }
.pl-toggle { display: flex; align-items: center; gap: 6px; margin: 14px 2px 4px; }

/* ---------- 건강 탭 (health.js) ---------- */
.tabbar a span { font-size: 10.5px; }
.hl-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 8px; }
.hl-num { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 6px; border-radius: 16px; background: var(--card, #fff); border: 1px solid var(--line, rgba(0,0,0,.08)); color: var(--text); font: inherit; }
.hl-num strong { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.hl-num small { font-size: 11.5px; opacity: .7; }
.hl-num.burn strong { color: #e8613a; }
.hl-num.weight strong { color: var(--accent); }
.hl-h { margin: 18px 2px 8px; font-size: 16px; }
.hl-actions { display: flex; gap: 8px; }
.hl-actions .btn { flex: 1; padding-left: 4px; padding-right: 4px; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line, rgba(0,0,0,.08)); background: var(--card, #fff); color: var(--text); font: inherit; text-align: left; }
.hl-thumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; background: var(--accent-soft) center/cover; display: grid; place-items: center; font-size: 22px; }
.hl-main { flex: 1; min-width: 0; }
.hl-main strong, .hl-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-main small { opacity: .7; font-size: 12px; }
.hl-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hl-live { padding: 14px; border-radius: 18px; background: linear-gradient(135deg, #ffe7dc, #fff4e0); color: #3a2a1d; }
.hl-live-top { display: flex; align-items: center; gap: 10px; }
.hl-live-top strong, .hl-live-top small { display: block; }
.hl-live-top small { opacity: .75; font-size: 12px; }
.hl-live-emoji { font-size: 30px; }
.hl-live-num { display: flex; align-items: baseline; justify-content: space-between; margin: 10px 2px; }
.hl-timer { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hl-live-num b { font-size: 22px; color: #e8613a; }
.hl-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; padding: 10px 6px; border-radius: 16px; background: var(--card, #fff); border: 1px solid var(--line, rgba(0,0,0,.08)); }
.hl-day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hl-bars { height: 70px; display: flex; align-items: flex-end; gap: 3px; }
.hl-bars i { width: 9px; min-height: 2px; border-radius: 4px 4px 1px 1px; }
.hl-bars i.eat, .hl-legend .eat::before { background: var(--accent); }
.hl-bars i.burn, .hl-legend .burn::before { background: #e8613a; }
.hl-day small { font-size: 11px; opacity: .75; }
.hl-day .kg { font-size: 10px; min-height: 12px; }
.hl-legend { grid-column: 1 / -1; display: flex; gap: 12px; justify-content: center; font-size: 11px; opacity: .75; }
.hl-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.hl-legend span:last-child::before { display: none; }
.hl-src { margin-top: 14px; font-size: 11.5px; }
.hl-food { display: flex; flex-direction: column; gap: 10px; }
.hl-photo { width: 100%; max-height: 32vh; object-fit: cover; border-radius: 14px; }
.hl-cands, .hl-results { display: flex; flex-direction: column; gap: 6px; }
.hl-results { max-height: 55vh; overflow-y: auto; margin-top: 8px; }
.hl-cand { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line, rgba(0,0,0,.1)); background: var(--card, #fff); color: var(--text); font: inherit; text-align: left; }
.hl-cand strong { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-cand small { grid-column: 1; opacity: .7; font-size: 12px; }
.hl-cand b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--accent); font-variant-numeric: tabular-nums; }
.hl-amount { text-align: center; padding: 6px 0 2px; }
.hl-kcal { display: block; font-size: 30px; font-weight: 800; color: var(--accent); }
.hl-amount small { opacity: .75; font-size: 12px; }
.hl-kg { font-size: 22px; text-align: center; }
.hint.warn { color: #c2410c; }
#health-body { padding: 0 16px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; }
#health-body > * { min-width: 0; }
.hl-row { width: 100%; box-sizing: border-box; min-width: 0; }
/* 네컷 다듬기: 미리보기 크기를 화면 높이로 묶고, 부스 아래로 카메라 버튼이 비치지 않게 */
.fc-stage { overflow: hidden; }
.fc-preview { width: auto; height: auto; max-width: 100%; max-height: calc(46vh - 12px); }
body.fc-on #view-camera .cam-bottom, body.fc-on #view-camera .cam-quick, body.fc-on #view-camera .cam-top { visibility: hidden; }

/* 내 정보 · 별자리 · 바이오리듬 · 궁합 (fortune.js, pets.js) */
.my-card { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, var(--accent-soft), var(--card, #fff)); border: 1px solid var(--line, rgba(0,0,0,.08)); color: var(--text); font: inherit; text-align: left; }
.my-card.empty { cursor: pointer; }
.my-card strong { font-size: 17px; }
.my-head { display: flex; flex-direction: column; gap: 2px; }
.my-head span, .my-card.empty span { font-size: 13px; opacity: .8; }
.my-card .btn { align-self: flex-start; }
.pet-fun { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; }
.pet-fun > .ellip { min-width: 0; flex: 1; }
.pet-fun-btn { flex: 0 0 auto; border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 99px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.ft-bars { display: flex; flex-direction: column; gap: 6px; }
.ft-bar { display: grid; grid-template-columns: 34px 1fr 96px; align-items: center; gap: 8px; font-size: 12.5px; }
.ft-bar-track { position: relative; height: 8px; border-radius: 4px; background: rgba(127,127,127,.18); }
.ft-bar-track::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(127,127,127,.6); }
.ft-bar-track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.ft-bar-val { font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85; }
.ft-sheet { display: flex; flex-direction: column; gap: 8px; }
.ft-line { margin: 0; font-weight: 700; }
.ft-h { margin: 8px 0 2px; font-size: 14px; }
.ft-chart { color: var(--text); padding: 6px 0; }
.ft-chart svg { height: 120px; display: block; }
.ft-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; opacity: .85; }
.ft-legend span::before { content: ''; display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 4px; vertical-align: middle; background: var(--c, currentColor); }
.ft-legend .today::before { background: none; border-top: 2px dashed currentColor; height: 0; }
.ft-total { display: flex; flex-direction: column; align-items: center; padding: 10px 0 4px; }
.ft-total strong { font-size: 40px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.ft-total span { font-size: 16px; font-weight: 700; }
.ft-part { padding: 10px 12px; border-radius: 14px; background: var(--card, #fff); border: 1px solid var(--line, rgba(0,0,0,.08)); }
.ft-part-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.ft-part-head span { flex: 1; opacity: .75; }
.ft-part-head em { font-style: normal; font-weight: 800; color: var(--accent); }
.ft-part p { margin: 4px 0 0; font-size: 13.5px; }
/* 성격 유형 (ptype.js) */
.pt-pick { display: flex; flex-direction: column; gap: 0; }
[data-theme] :where(#sheet) .pt-pick .chip-row.seg.pt-axis { margin: 3px 0; }
[data-theme] :where(#sheet) .pt-pick .chip-row.seg .chip { display: flex; flex-direction: column; align-items: center; gap: 0; min-height: 46px; white-space: normal; line-height: 1.2; }
.pt-pick .chip b { font-size: 16px; }
.pt-pick .chip small { font-size: 11px; opacity: .7; font-weight: 400; }
.pt-now { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; opacity: .85; margin-top: 2px; }
.pt-block { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line, rgba(0,0,0,.12)); }
.ft-total.small strong { font-size: 30px; }
[data-theme] :where(#sheet) .chip-row.seg.pt-sits .chip { font-size: 13px; padding: 6px 2px; }
.pt-body { display: flex; flex-direction: column; gap: 8px; }
[data-theme] :where(#sheet) .chip-row.seg.pt-sits { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.pet-fun-btn + .pet-fun-btn { margin-left: -2px; }
/* 사주 (saju.js) */
.sj-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sj-col { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 12px; background: var(--card, #fff); border: 1px solid var(--line, rgba(0,0,0,.08)); }
.sj-col.me { border-color: var(--accent); }
.sj-col b { font-size: 26px; line-height: 1.15; font-family: serif; }
.sj-col small { font-size: 11.5px; opacity: .7; }
.sj-bars { display: flex; flex-direction: column; gap: 5px; }
.sj-bar { display: grid; grid-template-columns: 56px 1fr 18px; align-items: center; gap: 8px; font-size: 12.5px; }
.sj-track { height: 8px; border-radius: 99px; background: var(--surface-2, rgba(0,0,0,.06)); overflow: hidden; }
.sj-track i { display: block; height: 100%; border-radius: 99px; }
.sj-pair { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.sj-pair > div { display: flex; flex-direction: column; }
.sj-pair small { font-size: 12px; opacity: .7; }
.sj-pair b { font-size: 20px; }
.sj-pair span { font-size: 12px; }
.sj-x { font-size: 26px; color: var(--accent); }
/* 음력 생일 (pets.js) */
.lun-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 6px; align-items: center; }
.lun-row .input { min-width: 0; }
.lun-leap { display: flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.lun-out { margin: 4px 2px 0; }
/* 생일 년·월·일 드롭다운 (datepick.js) */
.dp-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; }
.dp-row .input { min-width: 0; }
/* 음식별 자세한 안내 (health.js guideSheet, foodguide.js) */
.gd .hl-amount { padding-top: 0; }
.gd-photo { max-height: 18vh; }
.hl-parts { text-align: center; margin: 0 0 4px; font-size: 12px; }
.hl-ocr:empty { display: none; }
.hl-ocr { margin: 0; font-size: 12.5px; }
.gd-wrap { gap: 6px; margin: 4px 0; }
.gd-wrap .chip { min-height: 34px; padding: 6px 12px; }
.gd-note { margin: 2px 2px 0; font-size: 12px; }
.gd-count { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0; }
.gd-count .btn { min-width: 48px; min-height: 44px; font-size: 22px; padding: 0; }
.gd-count strong { min-width: 90px; text-align: center; font-size: 22px; font-variant-numeric: tabular-nums; }
.gd-why { margin: 4px 0 0; padding: 8px 12px 8px 26px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; line-height: 1.5; }
.gd-tips { margin-top: 12px; font-size: 13px; }
.gd-tips summary { cursor: pointer; font-weight: 600; }
.gd-tips p { margin: 6px 0 0; color: var(--muted); }
.hl-cand.hl-guide { border-color: var(--accent); }   /* 'guide' 는 카메라 안내선(.guide, 화면 전체 덮음)과 겹쳐서 이름을 바꿈 */
.hl-cand.past { background: var(--surface-2); }
.hl-bmi { font-size: 10.5px !important; opacity: .8; }

/* ===== 사진 보기: 카메라(메인) 화면과 같은 모양 (2026-11-05) =====
   검은 바탕 · 위 [닫기 … 더보기] · 아래 흰 글자 한 줄 [앨범 꾸미기 보정 칼로리 공유 ♡]. 사진 정보는 더보기에서 열면 흰 판으로 */
.viewer { background: #000; }
.viewer-top { position: static; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: env(safe-area-inset-top) calc(4px + env(safe-area-inset-right)) 0 calc(4px + env(safe-area-inset-left)); background: #000; pointer-events: auto; }
#viewer .cam-text { min-width: 48px; min-height: 44px; padding: 0 12px; background: none; border: 0; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -0.2px; white-space: nowrap; }
#viewer .cam-text:active { opacity: 0.55; }
.viewer:not(.show-info) .viewer-info { background: #000; color: #fff; box-shadow: none; border-radius: 0; padding: 4px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); }
.viewer:not(.show-info) .viewer-actions { width: min(420px, 100%); margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex-wrap: nowrap; }
.viewer:not(.show-info) .viewer-actions .act { padding: 12px 0; min-height: 48px; justify-content: center; border-radius: 0; background: none; }
.viewer:not(.show-info) .viewer-actions .act span { color: #fff; font-size: 15px; font-weight: 500; }
.viewer:not(.show-info) .viewer-actions .act:first-child span { color: #fff; font-weight: 700; }
.viewer:not(.show-info) .viewer-actions .act:active { opacity: 0.55; background: none; }
.viewer:not(.show-info) .viewer-actions .act .act-ic { color: #fff; }
.viewer:not(.show-info) .viewer-actions .act.on span, .viewer:not(.show-info) .viewer-actions .act.on .act-ic { color: #ff6f8e; }
@media (orientation: landscape) { .viewer .viewer-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: linear-gradient(#000a, transparent); } }
/* 더보기 목록 */
.vm-list { display: flex; flex-direction: column; gap: 2px; }
.vm-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-radius: 12px; background: none; color: var(--text); text-align: left; font: inherit; }
.vm-row:active { background: var(--surface-2); }
.vm-ic { font-size: 22px; width: 30px; text-align: center; }
.vm-txt { display: flex; flex-direction: column; min-width: 0; }
.vm-txt strong { font-size: 15.5px; font-weight: 600; }
.vm-txt small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-row.danger strong { color: var(--danger, #e5484d); }

/* ===== 나의 운세 (luck.js, 2026-11-05) ===== */
.my-luck { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.my-luck-main { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); color: var(--text); text-align: left; font: inherit; }
.my-luck-main span { display: flex; flex-direction: column; min-width: 0; }
.my-luck-main strong { font-size: 14.5px; }
.my-luck-main small { font-size: 12px; color: var(--muted); }
.my-luck-score { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 17px; font-weight: 800; }
.my-luck-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lk { display: flex; flex-direction: column; gap: 10px; }
.lk-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lk-nav strong { font-size: 14.5px; text-align: center; }
.lk-score { display: flex; align-items: center; gap: 14px; }
.lk-score-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lk-score-txt > strong { font-size: 19px; }
.lk-ring { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--surface) 78%, transparent 80%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0); }
.lk-ring b { font-size: 30px; line-height: 1; color: var(--c); }
.lk-ring small { font-size: 11px; color: var(--muted); }
.lk-minis { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-mini { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; border-radius: 99px; background: var(--surface-2); }
.lk-mini small { font-size: 11.5px; color: var(--muted); }
.lk-mini b { font-size: 14px; color: var(--c); }
.lk-total { margin: 0; font-size: 14.5px; line-height: 1.55; }
.lk-star { font-size: 13.5px; color: var(--muted); }
.lk-cats { display: grid; gap: 10px; }
.lk-cat-h { display: flex; justify-content: space-between; font-size: 13.5px; }
.lk-bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 4px 0; }
.lk-bar i { display: block; height: 100%; border-radius: 99px; }
.lk-cat p { margin: 0; font-size: 13px; color: var(--muted); }
.lk-lucky { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lk-lucky span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.lk-lucky small { font-size: 11px; color: var(--muted); }
.lk-lucky b { font-size: 13px; }
.lk-cal { display: flex; flex-direction: column; gap: 8px; }
.lk-modes { margin: 0; }
.lk-friends { margin: 0; }
.lk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.lk-dow span { text-align: center; font-size: 12px; color: var(--muted); }
.lk-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 5px; border-radius: 10px; background: none; color: var(--text); font: inherit; min-height: 52px; }
.lk-day.empty { min-height: 0; }
.lk-day:active { background: var(--surface-2); }
.lk-day.today { outline: 2px solid var(--accent); }
.lk-d { font-size: 12.5px; }
.lk-day b { min-width: 30px; padding: 2px 0; border-radius: 99px; color: #fff; font-size: 12.5px; font-weight: 700; }
.sun, .lk-day.sun .lk-d { color: #e5484d; }
.sat, .lk-day.sat .lk-d { color: #3d7dd8; }
.lk-lotto { display: flex; flex-direction: column; gap: 10px; }
.lk-row { display: flex; align-items: center; gap: 6px; }
.lk-row small { width: 16px; font-weight: 700; color: var(--muted); }
.lk-ball { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }

/* 타임라인 기록 공유 버튼 (timeline.js shareMoment) */
.tl-share { margin-left: auto; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; }
.tl-share:active { opacity: 0.6; }

/* 헬스 기구 고르기 (health.js gymSheet) */
.gym-pick { display: flex; flex-direction: column; gap: 6px; }
.gym-pick .gym-sec[hidden], .gym-pick .chip[hidden] { display: none; }
.gym-pick .sheet-label { margin: 10px 2px 2px; }
.gym-pick .btn.block { margin-top: 12px; }
/* 기구 사용법 · 달리기 안내 (health.js gymInfo · runSheet) */
.gym-info { display: flex; flex-direction: column; gap: 8px; }
.gym-muscle { margin: 0; font-weight: 600; }
.gym-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.gym-warn { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff3e6; color: #8a4b12; line-height: 1.5; }
.gym-basics, .run-sec { border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 14px; padding: 10px 12px; background: var(--card, #fff); }
.gym-basics summary, .run-sec summary { font-weight: 600; cursor: pointer; }
.gym-basics ul, .run-sec ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; line-height: 1.5; }
.hl-live-top .hl-howto { margin-left: auto; flex: 0 0 auto; border: 0; border-radius: 999px; padding: 6px 10px; background: rgba(255,255,255,.7); color: inherit; font: inherit; font-size: 12.5px; }
/* 함께 하면 좋은 것 (together.js) */
.tg { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tg .ft-h { margin-bottom: 0; }
.tg-idea { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line, rgba(0,0,0,.08)); background: var(--card, #fff); }
.tg-idea.top { border-color: var(--accent); background: var(--accent-soft); }
.tg-idea.photo { border-style: dashed; }
.tg-emoji { font-size: 26px; line-height: 1.1; }
.tg-idea strong { display: block; }
.tg-idea p { margin: 2px 0 0; font-size: 13px; opacity: .8; line-height: 1.45; }
.tg-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tg-why span { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.05); }
.tg-tips { padding: 10px 12px; border-radius: 14px; background: #fff7e8; color: #6b4a12; }
.tg-tips ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; line-height: 1.45; font-size: 13.5px; }
.tg-days b { display: block; margin-bottom: 6px; }
.tg-day-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-idea { margin: 4px 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
/* 리퀴파이 (pets.js liquifySection) */
.lq-prev { display: flex; gap: 10px; justify-content: center; margin: 6px 0 10px; }
.lq-prev figure { margin: 0; text-align: center; }
.lq-img { width: 132px; height: 132px; border-radius: 14px; object-fit: cover; background: rgba(0,0,0,.05); display: block; }
.lq-prev figcaption { font-size: 12px; opacity: .7; margin-top: 4px; }
.lq-row { display: grid; grid-template-columns: 72px 1fr 32px; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.lq-row input { width: 100%; accent-color: var(--accent); }
.lq-row b { text-align: right; font-variant-numeric: tabular-nums; }
/* 네컷 리퀴파이 알림 */
.fc-note { font-size: 12px; opacity: .75; margin: 2px 0 6px; min-height: 1em; }
/* 갤 보정 미리보기 (album.js retouchSheet) */
.rt-prev { display: block; width: 100%; max-height: 42vh; object-fit: contain; border-radius: 12px; background: rgba(0,0,0,.06); }
.rt-info { margin: 6px 0 0; text-align: center; }
.rt-sliders { margin: 4px 0; }
/* 보정 미리보기 누르고 있기 (원본 보기) */
.rt-prev, .fc-preview { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rt-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
/* 입술 색 고르기 (album.js 보정) */
.lip-sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
/* 관상 · 손금 · 사상체질 (reading.js) */
.rd-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.my-card-wrap { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.my-card-wrap .my-card { margin: 0; }
.rd-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 14px; background: var(--surface-2); color: var(--text); font: inherit; border: 0; min-width: 0; }
.rd-btn b { font-size: 13.5px; }
.rd-btn small { font-size: 11.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-hero { align-self: stretch; display: grid; place-items: center; padding: 14px 8px; border-radius: 22px; background: var(--accent-soft); }
.rd-hero img { width: 100%; max-height: 150px; object-fit: contain; display: block; }
.rd-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rd-hero.noimg { font-size: 84px; }
.rd-line { display: flex; gap: 10px; align-items: flex-start; }
.rd-line > img { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; }
.rd-line > div { flex: 1; min-width: 0; }
.rd-intro { margin: 0; text-align: center; font-size: 15px; font-weight: 700; }
.rd-tips { margin: 0; padding: 10px 14px 10px 30px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; line-height: 1.7; }
.rd-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-photo { width: 100%; border-radius: 16px; display: block; user-select: none; -webkit-user-select: none; }
.rd-photo.small { width: 60%; align-self: center; }
.rd-warn { color: #d97706; }
.rd-type { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: linear-gradient(135deg, var(--accent-soft), var(--card, #fff)); border: 1px solid var(--line, rgba(0,0,0,.08)); }
.rd-type > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-type small { font-size: 12px; color: var(--muted); }
.rd-type strong { font-size: 22px; font-weight: 800; color: var(--accent); }
.rd-type span { font-size: 13.5px; }
.rd-type em { font-style: normal; font-size: 12px; color: var(--muted); }
.rd-art { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); }
.rd-type.tall .rd-art { height: 128px; }
.rd-art.noimg { font-size: 48px; }
.rd-lead { margin: 0; font-size: 14px; line-height: 1.6; }
.rd-bars .sj-bar { grid-template-columns: 92px 1fr 24px; }
.rd-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
.rd-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 12.5px; }
.rd-legend span { display: inline-flex; align-items: center; gap: 4px; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rd-chip { padding: 3px 9px; border-radius: 999px; font-size: 12.5px; }
.rd-chip.good { background: rgba(34,197,94,.14); color: #15803d; }
.rd-chip.bad { background: rgba(239,68,68,.12); color: #b91c1c; }
.rd-q { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.rd-finger { margin: 0; font-size: 13.5px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
/* 운동 경로 지도 (route.js) */
.rt-map { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 16px; background: #e8e4ef; }
.rt-tile { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.rt-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-attr { position: absolute; right: 4px; bottom: 3px; padding: 1px 5px; border-radius: 6px; background: rgba(255,255,255,.8); color: #555; font-size: 10px; }
.rt-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 13px; color: var(--muted); }
.rt-live { margin: 8px 0; }
.rt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.rt-stats > div { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 14px; background: var(--surface-2); }
.rt-stats small { font-size: 12px; color: var(--muted); }
.rt-stats b { font-size: 18px; font-weight: 800; }
/* 운세 탭 정리 (2026-11-06): 인물 카드 찍기 버튼은 오른쪽 위 작게, 궁합 버튼은 카드 아래 한 줄, 내 정보 묶음 제목 */
.pet-main { align-items: flex-start; }
.pet-main > .avatar { flex: none; }
.pet-shoot { flex: none; align-self: flex-start; min-height: 0; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pet-shoot.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pet-fun-line { font-size: 12.5px; }
.pet-fun-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
.pet-fun-row .pet-fun-btn { margin: 0; padding: 7px 4px; border-radius: 12px; border: 0; background: var(--surface-2); color: var(--text); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.my-sec { display: block; margin: 4px 0 -2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.my-sec-row { display: flex; align-items: center; justify-content: space-between; }
.my-sec-btn { border: 0; background: none; padding: 2px 0; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 700; }
/* 운세 탭 드롭다운·메뉴별 화면 (fortunehub.js, 2026-11-06) */
.fh { display: flex; flex-direction: column; gap: 12px; margin: 2px 0 12px; }
.fh-top { position: relative; }
.fh-switch { width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border: 0; border-radius: 18px; background: linear-gradient(135deg, #8b5cf6, #c084fc 60%, #f5a8c8); color: #fff; font: inherit; text-align: left; box-shadow: 0 6px 18px rgba(139, 92, 246, .28); }
.fh-switch-emo { grid-row: 1 / 3; font-size: 28px; }
.fh-switch b { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.fh-switch small { grid-column: 2; font-size: 12px; opacity: .9; }
.fh-caret { grid-row: 1 / 3; grid-column: 3; font-style: normal; font-size: 16px; transition: transform .2s; }
.fh-switch.open .fh-caret { transform: rotate(180deg); }
.fh-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; padding: 6px; border-radius: 18px; background: var(--surface, #fff); box-shadow: 0 12px 32px rgba(40, 20, 80, .22); }
.fh-menu.hidden { display: none; }
.fh-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; }
.fh-item.on { background: var(--accent-soft, #efe7fb); }
.fh-item > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fh-item b { font-size: 15px; }
.fh-item small { font-size: 12px; color: var(--muted); }
.fh-item-emo { font-size: 22px; width: 30px; text-align: center; }
.fh-badge { padding: 2px 7px; border-radius: 99px; background: linear-gradient(135deg, #f5c26b, #f59e0b); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .3px; }
.fh-body { display: flex; flex-direction: column; gap: 12px; }
.fh-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface, #fff); box-shadow: var(--shadow-sm); }
.fh-h { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.fh-sec { margin: 6px 2px -4px; font-size: 15px; }
.fh-need { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; text-align: center; }
.fh-need p { margin: 0; font-size: 14px; }
.fh-list { display: flex; flex-direction: column; gap: 6px; }
.fh-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--text); font: inherit; text-align: left; }
.fh-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft, #efe7fb); color: var(--accent); font-weight: 800; }
.fh-row-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fh-row-main b { font-size: 14.5px; }
.fh-row-main small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-score { flex: none; min-width: 42px; padding: 5px 0; border-radius: 12px; background: var(--c); color: #fff; font-style: normal; font-weight: 800; text-align: center; }
.fh-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fh-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border-radius: 12px; }
.fh-day.best { background: var(--accent-soft, #efe7fb); }
.fh-day small { font-size: 11.5px; color: var(--muted); }
.fh-day b { font-size: 11.5px; }
.fh-day-bar { position: relative; width: 12px; height: 70px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.fh-day-bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; }
.fh-ilin { display: flex; gap: 12px; align-items: center; }
.fh-ilin-score { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: var(--c); color: #fff; }
.fh-ilin-score b { font-size: 24px; line-height: 1; }
.fh-ilin-score small { font-size: 10.5px; }
.fh-ilin strong { font-size: 15px; }
.fh-ilin p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; }
.fh-sign { display: flex; gap: 14px; align-items: center; }
.fh-sign-sym { flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: linear-gradient(135deg, #312e81, #7c3aed); color: #fde68a; font-size: 40px; }
.fh-sign > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fh-sign small { font-size: 12px; color: var(--muted); }
.fh-sign strong { font-size: 22px; font-weight: 800; color: var(--accent); }
.fh-sign span { font-size: 13px; }
.fh-lead { margin: 0; font-size: 14px; line-height: 1.6; }
.fh-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fh-kv > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.fh-kv small { font-size: 11.5px; color: var(--muted); }
.fh-kv b { font-size: 13px; }
.fh-rank { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.fh-rank li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 14px; }
.fh-rank li.me { background: var(--accent-soft, #efe7fb); font-weight: 800; }
.fh-rank li > span:nth-child(2) { flex: 1; }
.fh-rank-n { width: 22px; text-align: center; font-weight: 800; color: var(--muted); }
.fh-rank em { min-width: 36px; padding: 2px 0; border-radius: 10px; background: var(--c); color: #fff; font-style: normal; font-weight: 800; text-align: center; font-size: 13px; }
.fh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fh-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 12px 12px; border: 0; border-radius: 16px; background: linear-gradient(160deg, var(--surface-2), var(--accent-soft, #efe7fb)); color: var(--text); font: inherit; text-align: left; }
.fh-tile-emo { font-size: 26px; margin-bottom: 4px; }
.fh-tile b { font-size: 15px; }
.fh-tile small { font-size: 12px; color: var(--muted); }
.fh-tile .fh-badge { position: absolute; top: 10px; right: 10px; }
.fh-foot { text-align: center; }
.fh-tap { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
/* 타로 카드 (tarot.js) */
.tr-card { position: relative; width: 140px; aspect-ratio: 5 / 8; padding: 0; border: 0; background: none; perspective: 900px; font: inherit; }
.tr-card.small { width: 86px; }
.tr-inner { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d; }
.tr-card.open .tr-inner { transform: rotateY(180deg); }
.tr-back, .tr-face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.tr-back { display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px), linear-gradient(160deg, #3b2a7a, #6d28d9); border: 3px solid #e9d5ff; color: #fde68a; font-size: 30px; box-shadow: 0 6px 14px rgba(60, 30, 120, .3); }
.tr-face { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 6px 10px; background: linear-gradient(170deg, hsl(var(--h) 80% 96%), hsl(var(--h) 60% 84%)); border: 3px solid hsl(var(--h) 45% 62%); color: hsl(var(--h) 45% 25%); box-shadow: 0 6px 14px rgba(60, 30, 120, .22); }
.tr-card.rev.open .tr-face:not(.art) > :not(.tr-img) { transform: rotate(180deg); }
.tr-card.rev.open .tr-face:not(.art) { flex-direction: column-reverse; }
.tr-card.rev.open .tr-face.art { transform: rotateY(180deg) rotateZ(180deg); }
.tr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tr-num { font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.tr-sym { font-size: 44px; line-height: 1; }
.tr-card.small .tr-sym { font-size: 28px; }
.tr-name { font-size: 13px; font-weight: 800; }
.tr-card.small .tr-name { font-size: 10.5px; }
.fh-tarot-today { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fh-tarot-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; justify-items: center; }
.fh-tarot-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fh-tarot-slot small { font-size: 12px; font-weight: 700; color: var(--muted); }
.fh-tarot-means { display: flex; flex-direction: column; gap: 8px; }
.fh-tarot-sum { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft, #efe7fb); font-size: 13.5px; line-height: 1.55; }
.fh-tarot-dict { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; justify-items: center; }
.fh-tarot-dict .tr-card { width: 78px; }
.tr-mean { width: 100%; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.tr-mean-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.tr-mean-h small { padding: 1px 7px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.tr-mean-h b { font-size: 15px; }
.tr-mean-h span { font-size: 12px; color: var(--muted); }
.tr-mean p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; }
.tr-mean .tr-extra { color: var(--accent); font-weight: 600; }
/* 타로 그림 카드 (TAROT_ART): 그림 위에 번호·이름만 */
.tr-face.art { padding: 0; background: transparent; border: 0; }
.tr-face.art .tr-sym { visibility: hidden; }
.tr-face.art { box-shadow: none; justify-content: space-between; }
.tr-face.art .tr-img { object-fit: contain; }
.tr-face.art .tr-num, .tr-face.art .tr-name { position: relative; margin: 5.5% 0; color: #7a5a2a; }
.tr-card.small .tr-face.art .tr-num { margin: 4% 0 0; font-size: 8px; line-height: 1; }
.tr-card.small .tr-face.art .tr-name { margin: 0 0 6%; font-size: 8.5px; line-height: 1; white-space: nowrap; letter-spacing: -0.3px; }
.fh-tarot-dict .tr-face.art .tr-name { font-size: 8px; }

/* ===== 메인(홈) 화면 (2026-11-07, home.js): 도시 판타지 하늘 + 유리 카드. 앱 테마와 상관없이 늘 이 색 ===== */
#view-home { --hm-ground: #0a081d; --hm-line: rgba(255, 255, 255, .16); --hm-text: #f7f3ff; --hm-muted: rgba(240, 234, 255, .7);
  background: var(--hm-ground); color: var(--hm-text); padding-bottom: 0; overflow-x: hidden; }
#view-home[data-slot="dawn"] { --hm-ground: #1c1838; }
#view-home[data-slot="day"] { --hm-ground: #16213f; }
#view-home[data-slot="dusk"] { --hm-ground: #160d2a; }
body[data-view="home"] { background: #0a081d; }
.hm-sky { position: absolute; left: 0; right: 0; top: 0; height: 560px; overflow: hidden; pointer-events: none; }
.hm-sky-svg, .hm-sky-img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center bottom; }
.hm-sky-img { object-position: center top; }
/* 그림 위 글자가 잘 읽히게 맨 위를 살짝 어둡게 */
.hm-sky:has(.hm-sky-img)::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 190px; z-index: 1; background: linear-gradient(rgba(12, 8, 40, .5), rgba(12, 8, 40, 0)); }
.hm-sky::after { content: ''; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(transparent, var(--hm-ground)); }
.hm-motes { position: absolute; left: 0; right: 0; top: 0; height: 620px; overflow: hidden; pointer-events: none; }
.hm-motes i { position: absolute; bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(#fff6d8, rgba(255, 214, 140, .5) 45%, transparent 70%);
  animation: hm-rise linear infinite; opacity: 0; }
@keyframes hm-rise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translate(18px, -560px); opacity: 0; } }
.hm-twinkle { animation: hm-tw 3.2s ease-in-out infinite; }
@keyframes hm-tw { 50% { opacity: .15; } }
.hm-blink { animation: hm-tw 1.6s steps(2) infinite; }
.hm-drift { animation: hm-drift 40s ease-in-out infinite alternate; }
@keyframes hm-drift { to { transform: translateX(-26px); } }
.hm-float { animation: hm-float 7s ease-in-out infinite; }
@keyframes hm-float { 50% { translate: 0 -6px; } }
.hm-whale { animation: hm-swim 60s linear infinite; }
@keyframes hm-swim { from { transform: translateX(160px); } to { transform: translateX(-420px); } }
.hm-aurora { animation: hm-aur 9s ease-in-out infinite alternate; }
@keyframes hm-aur { to { opacity: .25; transform: translateY(6px); } }

.hm-wrap { position: relative; z-index: 1; padding: calc(18px + env(safe-area-inset-top)) 16px 28px; display: flex; flex-direction: column; gap: 14px; }
.hm-head { text-shadow: 0 1px 3px rgba(10, 6, 40, .45), 0 2px 14px rgba(10, 6, 40, .55); }
.hm-date { display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(12, 8, 40, .35); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hm-head h1 { margin: 10px 0 2px; font-size: 25px; line-height: 1.25; font-weight: 700; letter-spacing: -.5px; }
.hm-motto { margin: 0; font-size: 14px; font-weight: 600; }

.hm-orb { position: relative; align-self: center; width: 216px; height: 216px; margin: 2px 0 -4px; padding: 0; border-radius: 50%; color: #fff; }
.hm-orb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 14px rgba(190, 160, 255, .45)); }
.hm-spin { transform-origin: 110px 110px; animation: hm-spin 80s linear infinite; }
.hm-spin-rev { transform-origin: 110px 110px; animation: hm-spin 120s linear infinite reverse; }
@keyframes hm-spin { to { transform: rotate(360deg); } }
.hm-orb-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-shadow: 0 2px 10px rgba(30, 10, 80, .6); }
.hm-orb-txt small { font-size: 12px; opacity: .85; }
.hm-orb-txt b { font-size: 50px; line-height: 1.05; font-weight: 700; }
.hm-orb-txt em { font-style: normal; font-size: 13px; font-weight: 700; color: #ffe7a8; }

.hm-oracle { text-align: center; padding: 12px 16px; border-radius: 18px; background: rgba(14, 10, 44, .42); border: 1px solid var(--hm-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hm-oracle:empty { display: none; }
.hm-oracle strong { display: block; font-size: 14px; color: #ffe7a8; margin-bottom: 4px; }
.hm-oracle p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.hm-pill { margin-top: 10px; padding: 9px 18px; border-radius: 99px; background: linear-gradient(135deg, #ffd88a, #ff9bd2); color: #2a1648; font-weight: 700; font-size: 14px; }

.hm-cards { display: flex; flex-direction: column; gap: 12px; }
.hm-card { padding: 4px 14px 14px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); border: 1px solid var(--hm-line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hm-card-h { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 0 8px; text-align: left; color: inherit; }
.hm-card-h > span:not(.hm-em) { flex: 1; display: flex; flex-direction: column; }
.hm-card-h b { font-size: 16px; font-weight: 700; }
.hm-card-h small { font-size: 12px; color: var(--hm-muted); }
.hm-card-h > i { font-style: normal; font-size: 22px; color: var(--hm-muted); }
.hm-card-h[disabled] { cursor: default; }
.hm-card-h[disabled] > i { display: none; }
.hm-em { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 20px; object-fit: contain; }
span.hm-em { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), rgba(255, 255, 255, .06) 70%); border: 1px solid rgba(255, 255, 255, .25); }
.hm-em-body { box-shadow: 0 0 16px rgba(255, 120, 150, .45); }
.hm-em-luck { box-shadow: 0 0 16px rgba(120, 240, 170, .4); }
.hm-em-people { box-shadow: 0 0 16px rgba(180, 140, 255, .5); }
.hm-em-check { box-shadow: 0 0 16px rgba(255, 220, 120, .45); }
.hm-tip { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--hm-muted); }

.hm-bars { display: flex; flex-direction: column; gap: 7px; }
.hm-bar { display: grid; grid-template-columns: 34px 1fr 64px; align-items: center; gap: 8px; font-size: 13px; }
.hm-bar small { text-align: right; color: var(--hm-muted); font-size: 12px; }
.hm-bar-t, .hm-cat-t, .hm-prog { height: 7px; border-radius: 9px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.hm-bar-t i, .hm-cat-t i, .hm-prog i { display: block; height: 100%; border-radius: 9px; }
.hm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.hm-stat { padding: 8px 6px; border-radius: 14px; background: rgba(255, 255, 255, .07); text-align: center; display: flex; flex-direction: column; }
.hm-stat b { font-size: 18px; }
.hm-stat small { font-size: 11px; color: var(--hm-muted); }

.hm-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hm-cat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.hm-cat-em { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); }
.hm-cat small { max-width: 100%; font-size: 11.5px; color: var(--hm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-cat b { font-size: 19px; filter: brightness(1.25); }
.hm-cat-t { width: 80%; height: 5px; }
.hm-lucky { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hm-lucky span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .09); border: 1px solid var(--hm-line); font-size: 12.5px; }
.hm-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); }

.hm-rel { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .08); text-align: left; color: inherit; }
.hm-card-h + .hm-rel { border-top: 0; }
.hm-av { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-weight: 700;
  background: linear-gradient(135deg, #a88bff, #ff9bd2); color: #fff; border: 2px solid rgba(255, 255, 255, .5); }
.hm-rel-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hm-rel-m b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-rel-m small { font-size: 12px; color: var(--hm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-score { min-width: 42px; padding: 5px 8px; border-radius: 99px; text-align: center; font-weight: 700; background: rgba(255, 255, 255, .1); border: 1.5px solid var(--c); color: #fff; }
.hm-rel.warn .hm-rel-m small { color: #ffc2a8; }

.hm-prog { height: 8px; }
.hm-prog i { background: linear-gradient(90deg, #ffe29a, #ff9bd2, #9db4ff); transition: width .6s ease; }
.hm-check-msg { margin: 8px 0 4px; }
.hm-chk { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .08); text-align: left; color: inherit; }
.hm-chk-box { width: 22px; height: 22px; flex: none; border-radius: 7px; border: 1.6px solid rgba(255, 255, 255, .5); display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.hm-chk.ok .hm-chk-box { background: linear-gradient(135deg, #ffd88a, #ff9bd2); border-color: transparent; color: #2a1648; box-shadow: 0 0 10px rgba(255, 180, 210, .6); }
.hm-chk-ico { font-size: 18px; }
.hm-chk-m { flex: 1; display: flex; flex-direction: column; }
.hm-chk-m b { font-size: 14.5px; }
.hm-chk.ok .hm-chk-m b { opacity: .7; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .5); }
.hm-chk-m small { font-size: 12px; color: var(--hm-muted); }
.hm-chk > i { font-style: normal; color: var(--hm-muted); font-size: 18px; }

.hm-cta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 22px; text-align: left; color: #2a1648;
  background: linear-gradient(120deg, #ffe29a, #ffb3d9 55%, #b9c6ff); box-shadow: 0 10px 30px rgba(255, 160, 210, .35), inset 0 1px 0 rgba(255, 255, 255, .7); }
.hm-cta-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: rgba(255, 255, 255, .6); }
.hm-cta > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.hm-cta b { font-size: 17px; font-weight: 700; }
.hm-cta small { font-size: 12.5px; opacity: .75; }
.hm-cta > i { font-style: normal; font-size: 26px; }
.hm-cta:active, .hm-card-h:not([disabled]):active, .hm-rel:active, .hm-chk:active, .hm-orb:active { opacity: .7; }

body[data-view="home"] .tabbar { background: rgba(14, 10, 40, .82); border-top-color: rgba(255, 255, 255, .1); }
body[data-view="home"] .tabbar a { color: rgba(240, 234, 255, .55); }
body[data-view="home"] .tabbar a.active { color: #ffd88a; }
@media (prefers-reduced-motion: reduce) {
  .hm-motes, .hm-whale { display: none; }
  .hm-spin, .hm-spin-rev, .hm-twinkle, .hm-blink, .hm-drift, .hm-float, .hm-aurora { animation: none; }
}

/* ===== 홈 v2 (2026-11-07): 오늘의 카드 뒤집기 · 옆으로 넘기는 카드 · 자라는 하늘 섬 ===== */
.hm-tc-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 2px; }
.hm-tc { position: relative; width: min(54vw, 214px); aspect-ratio: 480 / 753; padding: 0; perspective: 1200px; background: none; border-radius: 22px; }
.hm-tc-face { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .85s cubic-bezier(.3, 1.3, .4, 1); box-shadow: 0 16px 40px rgba(10, 4, 40, .55), 0 0 0 1px rgba(255, 230, 170, .25); }
.hm-tc-face > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hm-tc-back { transform: rotateY(0deg); animation: hm-bob 4.5s ease-in-out infinite; }
.hm-tc-front { transform: rotateY(180deg); }
.hm-tc.open .hm-tc-back { transform: rotateY(-180deg); animation: none; }
.hm-tc.open .hm-tc-front { transform: rotateY(0deg); }
@keyframes hm-bob { 50% { translate: 0 -5px; } }
.hm-tc-back::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 48%, transparent 60%); background-size: 260% 100%; animation: hm-shine 3.6s ease-in-out infinite; }
@keyframes hm-shine { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } }
.hm-tc-hint { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); white-space: nowrap; padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(20, 12, 60, .55); border: 1px solid rgba(255, 230, 170, .45); z-index: 1; }
.hm-tc-bg { position: absolute; inset: 0; }
.hm-tc-body { position: absolute; inset: 20% 10% 7%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #3a2470; gap: 2px; }
.hm-tc-body > small { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: #7a5fb8; }
.hm-kw { font-size: clamp(24px, 8vw, 32px); line-height: 1.15; font-weight: 800; letter-spacing: -1px; color: #3a1f78; word-break: keep-all; }
.hm-tc-whale { width: 46%; margin: 2px 0; filter: drop-shadow(0 4px 8px rgba(80, 40, 160, .25)); }
.hm-tc-score { display: flex; align-items: baseline; gap: 6px; }
.hm-tc-score b { font-size: 30px; font-weight: 800; color: #6a3fd0; line-height: 1; }
.hm-tc-score span { font-size: 12.5px; font-weight: 700; color: #8a5fd0; }
.hm-tc-line { margin: 4px 0 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: #4a3488; word-break: keep-all; }
.hm-tc-lucky { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #6a50a8; }
.hm-tc-lucky i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(60, 30, 120, .35); }
.hm-tc-actions { display: flex; gap: 8px; }
.hm-act { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 8px; border-radius: 99px; font-size: 13.5px; font-weight: 700; color: #fff;
  background: rgba(20, 12, 60, .5); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hm-act img { width: 26px; height: 26px; object-fit: contain; }

.hm-stories-wrap { margin: 0 -16px; }
.hm-st-tabs { display: flex; gap: 6px; padding: 0 16px 8px; }
.hm-st-tabs button { padding: 6px 13px; border-radius: 99px; font-size: 13px; font-weight: 700; color: rgba(240, 234, 255, .7); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.hm-st-tabs button.on { color: #2a1648; background: linear-gradient(135deg, #ffe29a, #ffb3d9); border-color: transparent; }
.hm-st-tabs button small { font-size: 11px; opacity: .8; }
.hm-stories { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; align-items: flex-start; }
.hm-stories::-webkit-scrollbar { display: none; }
.hm-stories > .hm-card { flex: 0 0 calc(100% - 28px); scroll-snap-align: start; }
img.hm-em { width: 40px; height: 40px; object-fit: contain; border-radius: 0; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); }
.hm-mascot-s { display: block; width: 96px; margin: 0 auto -4px; }

.hm-island { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  border: 1px solid var(--hm-line); }
.hm-island-img { width: 112px; height: 112px; object-fit: contain; object-position: center bottom; flex: none; animation: hm-float 6s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.hm-island.grow .hm-island-img { animation: hm-grow 1.2s cubic-bezier(.3, 1.6, .5, 1), hm-float 6s ease-in-out 1.2s infinite; }
@keyframes hm-grow { from { transform: scale(.6); opacity: .3; } }
.hm-island-txt { display: flex; flex-direction: column; gap: 3px; }
.hm-island-txt b { font-size: 15px; }
.hm-island-txt small { font-size: 12px; color: var(--hm-muted); }
img.hm-cta-ico { width: 44px; height: 44px; object-fit: contain; background: none; border-radius: 0; }
@media (prefers-reduced-motion: reduce) {
  .hm-tc-face { transition: none; } .hm-tc-back, .hm-tc-back::after, .hm-island-img { animation: none; }
}

/* ===== v2 화면 통일 (2026-11-07): 아래 탭 그림 · 기록 탭 전환 · 나 카드 · 공유 미리보기 · 운세 탭 하늘 ===== */
/* 아래 탭: 3D 그림 아이콘, 가운데 카메라는 큰 동그란 버튼 (카메라 화면 안에서는 원래처럼 글자 탭) */
.tabbar a [data-icon] { background: center / contain no-repeat; }
.tabbar a.t-home [data-icon] { background-image: url(../img/v2/tab-home.webp); }
.tabbar a.t-timeline [data-icon] { background-image: url(../img/v2/tab-record.webp); }
.tabbar a.t-fortune [data-icon] { background-image: url(../img/v2/tab-fortune.webp); }
.tabbar a.t-camera [data-icon] { background-image: url(../img/v2/tab-shutter.webp); }
.tabbar a.t-health [data-icon] { background-image: url(../img/v2/hc-body.webp); }
.tabbar a.t-settings [data-icon] { background-image: url(../img/v2/tab-me.webp); }
body:not([data-view="camera"]) .tabbar a [data-icon] { width: 30px; height: 30px; }
body:not([data-view="camera"]) .tabbar a [data-icon] svg { display: none; }
body:not([data-view="camera"]) .tabbar a:not(.active) [data-icon] { opacity: .6; filter: saturate(.55); }
body:not([data-view="camera"]) .tabbar a.active [data-icon] { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 3px 6px rgba(120, 80, 200, .35)); }
body:not([data-view="camera"]) .tabbar a.t-camera [data-icon] { width: 58px; height: 58px; margin-top: -26px; opacity: 1; filter: drop-shadow(0 6px 14px rgba(120, 80, 200, .45)); }
body:not([data-view="camera"]) .tabbar a.t-camera span { margin-top: -2px; }
/* 기록 탭: 운동·식단 ↔ 타임라인 */
.rec-seg { display: flex; gap: 4px; margin: 0 16px 10px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.rec-seg a { flex: 1; padding: 8px 0; border-radius: 10px; text-align: center; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--muted); }
.rec-seg a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* 나 탭 맨 위 */
.me-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin: 4px 16px 18px; padding: 16px; border-radius: 20px;
  background: linear-gradient(135deg, #2a1d63, #6b4bb8 60%, #c98ad8); color: #fff; box-shadow: 0 10px 24px rgba(80, 50, 160, .25); }
.me-av { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; background: rgba(255, 255, 255, .25) center / cover; border: 2px solid rgba(255, 255, 255, .6); }
.me-main { display: flex; flex-direction: column; min-width: 0; }
.me-main b { font-size: 18px; }
.me-main small { font-size: 12.5px; opacity: .85; }
.me-btns { display: flex; gap: 6px; }
.me-btns .btn { background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
/* 공유 카드 미리보기 */
.sc-sheet { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.sc-preview { width: min(72vw, 300px); aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); object-fit: cover; }
.sc-extra { display: flex; gap: 8px; }
.sc-sheet .row-buttons { width: 100%; }
/* 인물 편집: 생일 모를 때 별자리·띠 */
.approx-box .lun-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 운세 탭: 홈과 같은 판타지 하늘 (운세 하늘 그림 위 유리 카드). 시트(아래에서 올라오는 창)는 그대로 밝은 색 */
#view-pets { --bg: #120d2e; --bg-tint: #120d2e; --surface: #221a4e; --surface-2: #30265f; --text: #f6f1ff; --muted: rgba(236, 228, 255, .7);
  --border: rgba(255, 255, 255, .16); --hairline: rgba(255, 255, 255, .09); --accent: #ffb3d9; --accent-soft: rgba(255, 179, 217, .16); --accent-text: #2a1648;
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .25); color: var(--text);
  background: linear-gradient(rgba(15, 11, 38, 0) 0, rgba(15, 11, 38, .2) 160px, rgba(15, 11, 38, .78) 520px, #0f0b26 900px), #0f0b26 url(../img/v2/fortune-sky.webp) top center / 100% auto no-repeat; }
#view-pets .page-head { background: linear-gradient(rgba(15, 11, 38, .55), rgba(15, 11, 38, 0)); }
#view-pets .page-head h2 { color: #fff; text-shadow: 0 2px 10px rgba(10, 6, 40, .6); }
#view-pets .fh-card, #view-pets .pet-card { background: linear-gradient(160deg, rgba(40, 30, 92, .72), rgba(22, 16, 56, .72)); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#view-pets .fh-tile { background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(180, 148, 224, .12)); color: var(--text); border: 1px solid rgba(255, 255, 255, .12); }
#view-pets .fh-menu { background: #231a52; border: 1px solid rgba(255, 255, 255, .15); }
#view-pets .btn:not(.primary):not(.danger) { background: rgba(255, 255, 255, .12); color: var(--text); border-color: rgba(255, 255, 255, .18); }
#view-pets .hint, #view-pets small { color: var(--muted); }
img.fh-ico { object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); }
img.fh-switch-emo { width: 44px; height: 44px; }
img.fh-item-emo { width: 32px; height: 32px; }
img.fh-tile-emo { width: 48px; height: 48px; margin-bottom: 4px; }
#view-pets .lk-ring b, #view-pets .lk-mini b, #view-pets .fh-score { filter: brightness(1.35); }

/* 빈 화면 하늘 고래 · 타임라인 오늘 한 장 · 그림 배지 · 운동 이번 주 흐름 · 몸 변화 (2026-11-07 v2) */
.empty-whale { display: block; width: 140px; margin: 0 auto 10px; filter: drop-shadow(0 6px 14px rgba(90, 60, 180, .25)); animation: hm-float 6s ease-in-out infinite; }
.tl-badge-img { display: block; object-fit: contain; margin: 0 auto; }
.tl-today { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 14px; border-radius: 18px;
  background: linear-gradient(135deg, #f1e9ff, #ffe8f3); border: 1px solid #e6dbf7; color: #3a2a63; }
.tl-today-h { display: flex; align-items: baseline; justify-content: space-between; }
.tl-today-h b { font-size: 16px; }
.tl-today-h small { color: #8a7aa8; }
.tl-today-ph { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tl-today-ph i { aspect-ratio: 1; border-radius: 12px; background: #e9e0f7 center / cover; }
.tl-today-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-today-chips span { padding: 5px 10px; border-radius: 99px; background: #fff; font-size: 13px; font-weight: 600; }
.hl-flow, .hl-body { margin: 14px 0 4px; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.hl-flow h4, .hl-body h4 { margin: 0 0 10px; font-size: 15px; }
.hl-flow h4 small, .hl-body h4 small { font-weight: 500; color: var(--muted); }
.hl-flow-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; }
.hl-flow-c { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.hl-flow-c b { font-size: 17px; }
.hl-flow-c small { font-size: 11px; color: var(--muted); }
.hl-flow .hint { margin: 10px 0 0; }
.hl-body-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; }
.hl-body-t { flex: 0 0 72px; height: 96px; border-radius: 12px; background: #ddd center / cover; position: relative; }
.hl-body-t small { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 10.5px; }
.hm-stories { transition: height .3s ease; }
.hm-island-pic { flex: none; width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; }
.hm-island-pic .hm-island-img { height: auto; }

/* 오늘의 카드: 카드 전체가 한 바퀴 반 돌며 뒤집힘 (2026-11-07 사용자 요청, home.js .hm-tc-in) */
.hm-tc-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(0deg); }
.hm-tc .hm-tc-face, .hm-tc.open .hm-tc-back, .hm-tc.open .hm-tc-front { transition: none; }
.hm-tc .hm-tc-back { transform: rotateY(0deg); }
.hm-tc .hm-tc-front { transform: rotateY(180deg); }
.hm-tc.open .hm-tc-back { transform: rotateY(0deg); animation: none; }
.hm-tc.open .hm-tc-front { transform: rotateY(180deg); }
.hm-tc.open .hm-tc-in { transform: rotateY(180deg); }
.hm-tc.spin .hm-tc-in { transform: rotateY(540deg) scale(1); transition: transform 1.7s cubic-bezier(.45, .05, .2, 1); animation: hm-lift 1.7s ease-in-out; }
.hm-tc.spin.open .hm-tc-in { transition: none; animation: none; transform: rotateY(180deg); }
.hm-tc.spin .hm-tc-back { animation: none; }
@keyframes hm-lift { 40% { scale: 1.08; } 100% { scale: 1; } }
/* 체크 → 먹은 것·운동 고르기 창 · 배지 더보기 */
.hl-pick { display: flex; flex-direction: column; gap: 8px; }
.tl-badge-more { grid-column: 1 / -1; padding: 10px; border-radius: 12px; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 14px; }
/* 카드 돌기는 사용자가 직접 원한 동작이라 폰의 '애니메이션 줄이기'가 켜져 있어도 돈다 (2026-11-07, 사용자 폰은 애니메이션 배율 0) */
/* 오늘의 체크에서 들어온 칸: 잠깐 빛나서 어디에 기록되는지 보이게 (health.js focusSection) */
.hl-focus { position: relative; border-radius: 16px; animation: hl-glow 2.4s ease-out; }
@keyframes hl-glow { 0%, 30% { box-shadow: 0 0 0 3px #b494e0, 0 0 22px rgba(180, 148, 224, .75); background-color: rgba(180, 148, 224, .16); } 100% { box-shadow: 0 0 0 0 transparent; } }
.hm-more { align-self: flex-end; margin-top: 2px; padding: 4px 0; font-size: 12.5px; font-weight: 700; color: #ffd6f0; }
.hm-tc.hm-pulse { animation: hm-pulse 1.4s ease-out 2; }
@keyframes hm-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 226, 154, .9); } 100% { box-shadow: 0 0 0 22px rgba(255, 226, 154, 0); } }
.tl-private { margin: 2px 0 0; padding: 9px 12px; border-radius: 12px; background: rgba(180, 148, 224, .14); color: #5b3fa0; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: left; }
.tl-private small { font-weight: 500; color: #7d6aa6; }

/* 메뉴 첫 소개 (intro.js) */
.intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(12, 8, 36, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: intro-in .35s ease both; }
.intro.out { animation: intro-out .3s ease both; }
@keyframes intro-in { from { opacity: 0; } }
@keyframes intro-out { to { opacity: 0; } }
.intro-card { width: min(100%, 340px); padding: 22px 22px 18px; border-radius: 28px; text-align: center; color: #fff;
  background: radial-gradient(120% 80% at 50% 0%, #6b4bb8 0%, #2a1d63 55%, #170f3c 100%); border: 1px solid rgba(255, 230, 170, .35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .15); animation: intro-up .5s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes intro-up { from { transform: translateY(30px) scale(.94); opacity: 0; } }
.intro-whale { width: 150px; margin: -6px auto 4px; display: block; filter: drop-shadow(0 8px 18px rgba(180, 150, 255, .5)); animation: hm-float 5s ease-in-out infinite; }
.intro-card h2 { margin: 0 0 12px; font-size: 21px; letter-spacing: -.4px; color: #ffe7a8; }
.intro-card p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: rgba(245, 238, 255, .92); word-break: keep-all; animation: intro-line .6s ease both; }
@keyframes intro-line { from { opacity: 0; transform: translateY(6px); } }
.intro-btn { margin-top: 10px; width: 100%; padding: 13px; border-radius: 16px; font-size: 16px; font-weight: 800; color: #2a1648;
  background: linear-gradient(120deg, #ffe29a, #ffb3d9 55%, #b9c6ff); box-shadow: 0 8px 20px rgba(255, 160, 210, .35); }

/* 오늘의 카드 v3 (2026-11-07 사용자 요청): 더 자세한 앞면 · 누를 때마다 돌며 뒤집힘 (home.js angle) */
.hm-tc { width: min(66vw, 262px); }
.hm-tc-in.anim { transition: transform 1.7s cubic-bezier(.45, .05, .2, 1); }
.hm-tc.lift { animation: hm-lift2 1.7s ease-in-out; }
@keyframes hm-lift2 { 40% { transform: scale(1.06) translateY(-6px); } 100% { transform: none; } }
.hm-tc-body { inset: 17% 9% 6%; gap: 3px; }
.hm-kw { font-size: clamp(24px, 7.4vw, 30px); }
.hm-kw-desc { margin: 0; font-size: 11.5px; line-height: 1.45; color: #5b4296; word-break: keep-all; }
.hm-tc-mid { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 2px 0; }
.hm-tc-mid .hm-tc-whale { width: 34%; margin: 0; }
.hm-tc-list { list-style: none; margin: 0; padding: 6px 8px; width: 100%; border-radius: 10px; background: rgba(255, 255, 255, .45); display: flex; flex-direction: column; gap: 2px; text-align: left; }
.hm-tc-list li { font-size: 11.5px; font-weight: 600; color: #4a3488; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-tc-line { font-size: 12px; margin-top: 3px; }
.hm-tc-lucky { font-size: 11px; }

/* 2026-11-07 정렬 다듬기 (사용자: '카드 디자인이 밀렸어')
   오늘의 카드 앞면: 그림 위 고래 문양(높이 8~22%)·아래 모서리 장식(92%~)을 피해 23%~92% 안에 고르게 */
.hm-tc-body { inset: 23% 10% 8%; justify-content: space-between; gap: 0; overflow: hidden; }
.hm-tc-body > small { font-size: 11px; line-height: 1; }
.hm-kw { font-size: clamp(22px, 7vw, 28px); line-height: 1.1; }
.hm-kw-desc { font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-tc-mid { margin: 0; }
.hm-tc-mid .hm-tc-whale { width: 30%; }
.hm-tc-score b { font-size: 26px; }
.hm-tc-list { padding: 5px 8px; gap: 1px; }
.hm-tc-list li { font-size: 11px; line-height: 1.45; }
.hm-tc-line { margin: 0; font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-tc-lucky { margin-top: 0; font-size: 10.5px; }
/* 운세 탭 위 제목 줄: 아래로 굴린 카드가 제목 밑으로 비쳐 겹쳐 보이지 않게 막힌 바탕 */
#view-pets .page-head { background: rgba(18, 13, 46, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
body[data-view="pets"] .tabbar { background: rgba(14, 10, 40, .9); border-top-color: rgba(255, 255, 255, .1); }
body[data-view="pets"] .tabbar a { color: rgba(240, 234, 255, .55); }
body[data-view="pets"] .tabbar a.active { color: #ffd88a; }
/* 뒤집힌 카드의 반짝이 빛(::after)·글자가 앞면 너머로 비쳐 흐린 네모로 보이던 것 막기 */
.hm-tc-face > *, .hm-tc-back::after { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hm-tc-face { isolation: isolate; }
.hm-tc-line { padding: 0 9%; }
.hm-tc:not(.spinning)[data-side="front"] .hm-tc-back, .hm-tc:not(.spinning)[data-side="back"] .hm-tc-front { visibility: hidden; }
/* 카드 둘레 그림자·금빛 테를 그림의 둥근 모서리(가로 17% · 세로 10.9%)와 맞춤: 모서리 밖으로 흐린 네모가 보이던 것 */
.hm-tc, .hm-tc-face { border-radius: 17% / 10.9%; }
.lk-mini-btn { padding: 0; background: none; border: 0; }
.hm-bars[role="button"] { cursor: pointer; }
/* 운세 탭(어두운 하늘)에서 흰 바탕으로 남던 칸: 사주 기둥(.sj-col)·타고난 성격 등이 쓰는 --card·--line 도 어두운 유리로 (2026-11-07 '사주 글자가 안 보임') */
#view-pets { --card: rgba(255, 255, 255, .08); --line: rgba(255, 255, 255, .16); --on-accent: #2a1648; --seg-on: rgba(255, 255, 255, .18); }
/* 점수 동그라미·알약: 연한 바탕(--c) 위 흰 글자는 잘 안 보여서 진한 글자로 (2026-11-07 글자 대비 점검) */
.fh-score, .fh-rank em, .fh-ilin-score b, .fh-ilin-score small { color: #241446; }
#view-pets .lk-ring b, #view-pets .lk-mini b, #view-pets .fh-score { filter: none; }
#view-pets .lk-ring b, #view-pets .lk-mini b { color: color-mix(in srgb, var(--c) 55%, #fff); }
/* 오늘의 카드: 천천히 한 번만 뒤집힘 (180°, 1.4초) */
.hm-tc-in.anim { transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); }
.hm-tc.lift { animation: hm-lift2 1.4s ease-in-out; }
#view-pets .fh-ilin-score small { color: rgba(36, 20, 70, .75); }
.hm-stats[role="button"] { cursor: pointer; }

/* 카드가 돌 때 은은한 빛 (2026-11-07, js/flipfx.js). '움직임 줄이기'와 관계없이 보임 (카드 돌기와 같음) */
.ffx-host { isolation: isolate; }
.ffx { position: absolute; pointer-events: none; }
/* 카드 뒤 둥근 빛무리 (밝은 하늘 위에서도 보이게 금빛 + 보랏빛 두 겹, 도는 중에도 카드 모양 테두리가 남지 않게 타원) */
.ffx-halo { inset: 6% 10%; z-index: -1; border-radius: 50%; background: rgba(255, 232, 190, .3);
  box-shadow: 0 0 40px 18px rgba(255, 222, 160, .55), 0 0 90px 40px rgba(176, 140, 255, .38);
  opacity: 0; animation: ffx-halo var(--d) ease-in-out forwards; }
.tr-card .ffx-halo { box-shadow: 0 0 22px 10px rgba(255, 222, 160, .55), 0 0 48px 22px rgba(176, 140, 255, .38); }
@keyframes ffx-halo { 0% { opacity: 0; transform: scale(.94); } 45% { opacity: .9; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1); } }
.ffx-dust { inset: 0; z-index: 3; overflow: visible; }
.ffx-dust i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; background: radial-gradient(circle, #fffaf0 0 28%, rgba(255, 214, 140, .85) 48%, transparent 72%);
  box-shadow: 0 0 8px 2px rgba(190, 150, 255, .45);
  opacity: 0; animation: ffx-dust 1.8s ease-out var(--dl) forwards; }
.ffx-dust i.st { background: none; box-shadow: none; display: grid; place-items: center; font-size: var(--s); line-height: 1; font-style: normal;
  color: #fff4cc; text-shadow: 0 0 3px #fff, 0 0 8px rgba(255, 196, 100, .95), 0 0 14px rgba(170, 120, 255, .7); }
@keyframes ffx-dust { 0% { opacity: 0; transform: translateY(0) scale(.3) rotate(0deg); } 30% { opacity: .95; transform: translateY(calc(var(--dy) * .35)) scale(1) rotate(20deg); }
  100% { opacity: 0; transform: translateY(var(--dy)) scale(.6) rotate(45deg); } }
.ffx-sweep { inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; }
.tr-card .ffx-sweep { border-radius: 12px; }
.ffx-sweep::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%); background-size: 280% 100%;
  background-position: 120% 0; opacity: 0; animation: ffx-sweep 1.1s ease-in-out calc(var(--d) * .78) forwards; }
@keyframes ffx-sweep { 0% { opacity: 0; background-position: 120% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } }

/* 탭 5개 (2026-11-07): 설정은 홈 오른쪽 위 내 얼굴 버튼, 설정 화면 머리에 홈으로 ‹ */
.hm-head { position: relative; }
.hm-me { position: absolute; top: -4px; right: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(12, 8, 40, .35); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hm-me img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(10, 6, 40, .4)); }
.hm-me:active { transform: scale(.92); }

/* ===== 밤하늘 테마 (2026-11-07 '테마 하나로'): 홈·운세와 같은 판타지 밤하늘을 앱 전체에. 기본 테마 ===== */
[data-theme="sky"] {
  --bg: #140f33; --bg-tint: #1b1442; --surface: #241c52; --surface-2: #30265f; --text: #f6f1ff; --muted: rgba(236, 228, 255, .68);
  --accent: #c9a6ff; --accent-soft: rgba(201, 166, 255, .18); --accent-text: #22134a;
  --sage: #9ccdb6; --sage-soft: rgba(156, 205, 182, .18); --sky: #a9c8f0; --sky-soft: rgba(169, 200, 240, .16);
  --danger: #ff8f9a; --border: rgba(255, 255, 255, .14); --hairline: rgba(255, 255, 255, .08);
  --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .25);
  --tabbar: rgba(14, 10, 40, .9); --guide: #f7e3ff; --glass: rgba(20, 14, 50, .5); --glass-border: rgba(255, 255, 255, .22);
  --card: rgba(255, 255, 255, .08); --line: rgba(255, 255, 255, .16); --on-accent: #22134a; --seg-on: rgba(255, 255, 255, .18);
  color-scheme: dark;
}
[data-theme="sky"] body { background: #120d2e; }
/* 탭 화면 바탕: 위쪽에 은은한 보랏빛·분홍빛 하늘, 아래로 깊은 남보라 */
[data-theme="sky"] :is(#view-timeline, #view-health, #view-settings, #view-album) {
  background: radial-gradient(120% 420px at 85% -60px, rgba(150, 110, 240, .38), transparent 70%), radial-gradient(90% 360px at -10% 120px, rgba(255, 150, 210, .12), transparent 70%), linear-gradient(#1b1345, #120d2e 520px) #120d2e; }
[data-theme="sky"] :is(#view-timeline, #view-health, #view-settings, #view-album) .page-head { background: rgba(20, 14, 50, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
[data-theme="sky"] .tabbar { background: rgba(14, 10, 40, .9); border-top-color: rgba(255, 255, 255, .1); }
[data-theme="sky"] .tabbar a { color: rgba(240, 234, 255, .55); }
[data-theme="sky"] .tabbar a.active { color: #ffd88a; }
[data-theme="sky"] .btn:not(.primary):not(.danger) { background: rgba(255, 255, 255, .1); color: var(--text); border-color: rgba(255, 255, 255, .16); }

/* 오늘의 체크 한 줄 (타임라인·운동 맨 위, home.js checkStrip) */
.dc-strip { margin: 0 0 14px; padding: 10px 12px 12px; border-radius: 18px; background: linear-gradient(160deg, rgba(150, 110, 240, .22), rgba(255, 150, 210, .1)); border: 1px solid rgba(255, 255, 255, .14); min-height: 92px; }
#health-body > .dc-strip { margin: 0 0 12px; }
.dc-head { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 0 2px 8px; border: 0; background: none; color: var(--text); text-align: left; }
.dc-head b { font-size: 15px; }
.dc-n { font-size: 14px; font-weight: 800; color: #ffd88a; }
.dc-head small { flex: 1; font-size: 12px; color: var(--muted); }
.dc-head i { font-style: normal; color: var(--muted); }
.dc-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dc-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--muted); }
.dc-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 19px; background: rgba(255, 255, 255, .08); border: 1px dashed rgba(255, 255, 255, .28); }
.dc-chip small { font-size: 11px; font-weight: 600; white-space: nowrap; }
.dc-chip.ok .dc-ico { background: linear-gradient(140deg, #ffe2a0, #c9a6ff); border: 0; color: #2a1648; font-weight: 800; box-shadow: 0 0 12px rgba(255, 216, 138, .45); }
.dc-chip.ok small { color: var(--text); }
.dc-chip:active .dc-ico { transform: scale(.92); }
:root:not([data-theme="sky"]) .dc-strip { background: var(--surface); border-color: var(--border); }
:root:not([data-theme="sky"]) .dc-n { color: var(--accent); }
:root:not([data-theme="sky"]) .dc-ico { background: var(--surface-2); border-color: var(--border); }

/* 궁합 초대 코드 (invite.js) */
.hm-iv { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.hm-iv .hm-pill { margin-top: 6px; padding: 8px 14px; font-size: 13px; }
.hm-pill.hm-pill-alt { background: rgba(255, 255, 255, .12); color: #f6f1ff; border: 1px solid rgba(255, 255, 255, .22); }
.iv-box { display: flex; flex-direction: column; gap: 10px; }
.iv-lead { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 600; }
.iv-code { display: block; padding: 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; word-break: break-all; user-select: all; -webkit-user-select: all; }
.iv-in { width: 100%; resize: vertical; font-size: 14px; }

/* 밤하늘 테마: 밝게 박혀 있던 카드들을 밤하늘 유리 카드로 (2026-11-07) */
[data-theme="sky"] .tl-today { background: linear-gradient(150deg, rgba(150, 110, 240, .26), rgba(255, 150, 210, .12)); border-color: rgba(255, 255, 255, .16); color: var(--text); }
[data-theme="sky"] .tl-today-h small { color: var(--muted); }
[data-theme="sky"] .tl-today-ph i { background-color: rgba(255, 255, 255, .1); }
[data-theme="sky"] .tl-today-chips span { background: rgba(255, 255, 255, .12); color: var(--text); }
[data-theme="sky"] .tl-private { background: rgba(201, 166, 255, .14); color: #e4d6ff; }
[data-theme="sky"] .tl-private small { color: var(--muted); }

/* 좋은 날 달력 (goodday.js): 오늘만 열림, 다른 날은 🔒 */
.gd-box { display: flex; flex-direction: column; gap: 12px; }
.gd-items { margin: 0 -4px; }
.gd-cal { padding: 12px; border-radius: 16px; background: var(--card, var(--surface-2)); border: 1px solid var(--line, var(--border)); }
.gd-cal-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.gd-cal-h b { font-size: 16px; }
.gd-cal-h small { color: var(--muted); font-weight: 600; }
.gd-dow, .gd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.gd-dow span { font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.gd-dow span:first-child { color: #ff8fa8; }
.gd-cd { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0 4px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; }
.gd-cd span { font-size: 13px; font-weight: 600; }
.gd-cd i { font-style: normal; font-size: 12px; line-height: 1.2; font-weight: 800; }
.gd-cd.lock { opacity: .38; }
.gd-cd.lock i { font-size: 9px; }
.gd-cd.today { box-shadow: inset 0 0 0 1.5px #ffd88a; }
.gd-cd.on { background: rgba(255, 216, 138, .18); }
.gd-cd.g4 i, .gd-row.g4 em, .gd-pick.g4 .gd-mark { color: #c9a6ff; }
.gd-cd.g3 i, .gd-row.g3 em, .gd-pick.g3 .gd-mark { color: #8fd6b8; }
.gd-cd.g2 i, .gd-row.g2 em, .gd-pick.g2 .gd-mark { color: #f0c27a; }
.gd-cd.g1 i, .gd-row.g1 em, .gd-pick.g1 .gd-mark { color: #ff8f9a; }
.gd-legend { margin: 8px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
.gd-today { display: flex; flex-direction: column; gap: 8px; }
.gd-today-h { display: flex; align-items: baseline; gap: 8px; }
.gd-today-h b { font-size: 16px; }
.gd-today-h small { color: var(--muted); }
.gd-pick { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: var(--accent-soft); }
.gd-pick .gd-mark { font-size: 28px; font-weight: 800; line-height: 1; }
.gd-pick b { display: block; font-size: 15px; }
.gd-pick small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.gd-sub { margin: 6px 2px 0; font-size: 13px; color: var(--muted); }
.gd-list { display: flex; flex-direction: column; gap: 6px; }
.gd-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line, var(--border)); background: var(--card, var(--surface)); color: var(--text); font: inherit; text-align: left; }
.gd-row.on { border-color: #ffd88a; }
.gd-row-e { font-size: 20px; }
.gd-row-m b { display: block; font-size: 14px; }
.gd-row-m small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.gd-row em { font-style: normal; font-size: 12.5px; font-weight: 800; white-space: nowrap; }

/* 사상체질 음식 묶음 (reading.js foodGroups) */
.rd-fg { display: flex; flex-direction: column; gap: 5px; padding: 9px 0 10px; border-top: 1px dashed var(--line, var(--border)); }
.rd-fg:first-of-type { border-top: 0; }
.rd-fg-h { font-size: 13.5px; }
.rd-fg-why { font-size: 12px; color: var(--muted); line-height: 1.45; }
.ft-part-head small { margin-left: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }

/* 손금 양손 (reading.js showPalm) */
.rd-hand-tabs { margin-bottom: 4px; }
.rd-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.rd-role { padding: 10px; border-radius: 12px; background: var(--accent-soft); display: flex; flex-direction: column; gap: 4px; }
.rd-role b { font-size: 13.5px; }
.rd-role small { font-size: 12px; line-height: 1.45; color: var(--muted); }
.rd-lefty { grid-column: 1 / -1; padding: 6px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; }
.rd-side { margin: 6px 0; font-size: 13px; font-weight: 600; color: var(--accent); }
.rd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-pair figure { margin: 0; }
.rd-pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; display: block; }
.rd-pair figcaption { margin-top: 4px; font-size: 12px; text-align: center; color: var(--muted); }
.rd-both-sum { margin: 10px 0 4px; padding: 12px; border-radius: 14px; background: linear-gradient(150deg, rgba(255, 216, 138, .18), rgba(201, 166, 255, .16)); }
.rd-both-sum b { font-size: 16px; }
.rd-both-sum p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.rd-cmp { display: flex; flex-direction: column; gap: 6px; }
.rd-cmp-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: var(--card, var(--surface-2)); }
.rd-cmp-row small { color: var(--muted); }
.rd-cmp-row i { font-style: normal; color: var(--muted); }
.rd-cmp-row em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); min-width: 74px; text-align: right; }
.rd-cmp-row em.up { color: #8fd6b8; }
.rd-cmp-row em.down { color: #f0c27a; }
.rd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.rd-two > div { padding: 8px; border-radius: 10px; background: var(--card, var(--surface-2)); display: flex; flex-direction: column; gap: 2px; }
.rd-two small { font-size: 11px; color: var(--muted); }
.rd-two span { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
/* 밤하늘 테마: 체질 음식 칩 글자가 어두운 바탕에서 잘 보이게 */
[data-theme="sky"] .rd-chip.good, #view-pets .rd-chip.good { background: rgba(143, 214, 184, .18); color: #c6f2de; border-color: rgba(143, 214, 184, .35); }
[data-theme="sky"] .rd-chip.bad, #view-pets .rd-chip.bad { background: rgba(255, 143, 154, .16); color: #ffd0d5; border-color: rgba(255, 143, 154, .35); }

/* 타로: 과거·현재·미래 표시가 분홍 바탕에 흰 글자라 안 보였음 → 진한 글자 (2026-11-07) */
.tr-mean-h small { color: var(--accent-text, #fff); }
#view-pets .tr-mean-h small, [data-theme="sky"] .tr-mean-h small { color: #2a1648; }
.fh-tarot-slot small { font-size: 13px; color: var(--text); }
/* 타로 풀이 이야기 */
.fh-story { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, rgba(201, 166, 255, .2), rgba(255, 179, 217, .1)); border: 1px solid rgba(255, 255, 255, .14); }
.fh-story h4 { margin: 0; font-size: 15.5px; }
.fh-story-p { display: flex; flex-direction: column; gap: 2px; }
.fh-story-p b { font-size: 14px; }
.fh-story-p small { font-size: 12px; color: var(--muted); }
.fh-story-p p, .fh-story-adv p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.6; }
.fh-story-flow { margin: 0; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 13.5px; line-height: 1.55; font-weight: 600; }
.fh-story-adv { padding: 10px 11px; border-radius: 12px; background: rgba(255, 216, 138, .12); }
.fh-story-adv b { font-size: 14px; }
.fh-story-end { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.55; color: #ffd88a; }
:root:not([data-theme="sky"]) .fh-story-end { color: var(--accent); }
.fh-story-one { margin-top: 8px; }
.fh-story-list { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; }
/* 운세 달력: 앞날은 날짜만 흐리게 (점수 없음) */
.lk-day.future { opacity: .35; }
.lk-day.future i { font-style: normal; font-size: 12px; color: var(--muted); }

/* 운세 탭: 쓸어 넘기기 점 + 넘어올 때 살짝 밀려 들어옴 (fortunehub.js) */
.fh-dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px 0 2px; }
.fh-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .28); transition: width .25s, background .25s; }
.fh-dot.on { width: 20px; background: #ffd88a; }
.fh-dot-nav { width: 26px; height: 22px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; }
.fh-dot-nav:disabled { opacity: .25; }
.fh-in-next { animation: fh-in-next .32s ease-out; }
.fh-in-prev { animation: fh-in-prev .32s ease-out; }
@keyframes fh-in-next { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes fh-in-prev { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }

/* 운세 투데이: 큰 점수 하나 + 요약, 나머지는 접기 (luck.js luckView) */
.lk-sum { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.lk-lucky2 { grid-template-columns: 1fr 1fr; }
.lk-more-btn { width: 100%; padding: 10px 0; border: 1px dashed var(--line, var(--border)); border-radius: 12px; background: none; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 700; }
.lk-more { display: flex; flex-direction: column; gap: 12px; }
.lk-more.hidden { display: none; }
.lk-more .lk-lucky { grid-template-columns: 1fr 1fr; }

/* 한 달의 나 · 1년 전 오늘 (report.js) */
.rp-box { display: flex; flex-direction: column; gap: 12px; }
.rp-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; text-align: center; }
.rp-nav strong { display: block; font-size: 22px; }
.rp-nav small { color: var(--muted); font-size: 12.5px; }
.rp-verdict { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; line-height: 1.55; font-weight: 600; }
.rp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rp-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--card, var(--surface-2)); border: 1px solid var(--line, var(--border)); }
.rp-tile span { font-size: 18px; }
.rp-tile b { font-size: 17px; }
.rp-tile small { font-size: 11px; color: var(--muted); text-align: center; }
.rp-kw { display: flex; flex-direction: column; align-items: center; padding: 12px; border-radius: 16px; background: linear-gradient(150deg, rgba(255, 216, 138, .2), rgba(201, 166, 255, .18)); }
.rp-kw small { color: var(--muted); font-size: 12.5px; }
.rp-kw strong { font-size: 30px; }
.rp-best, .rp-badges { margin: 0; font-size: 13.5px; line-height: 1.5; }
.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rp-grid i { aspect-ratio: 1; border-radius: 10px; background: rgba(255, 255, 255, .08) center / cover; }
.rp-open, .rp-arrive { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255, 216, 138, .35); background: linear-gradient(150deg, rgba(255, 216, 138, .16), rgba(201, 166, 255, .12)); color: var(--text); font: inherit; text-align: left; }
.rp-open > span:first-child, .rp-arrive > span:first-child { font-size: 26px; }
.rp-open b, .rp-arrive b { display: block; font-size: 15px; }
.rp-open small, .rp-arrive small { display: block; font-size: 12px; color: var(--muted); }
.rp-open i, .rp-arrive i { font-style: normal; color: var(--muted); }
.rp-arrive { color: #fff; }
.rp-memory { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 0 0 14px; padding: 12px; border-radius: 16px; background: var(--card, var(--surface)); border: 1px solid var(--line, var(--border)); }
.rp-mem-pic { width: 72px; height: 72px; border-radius: 12px; background: center / cover; }
.rp-memory small { font-size: 12px; color: #ffd88a; font-weight: 700; }
.rp-memory p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; }
.hm-month { margin-top: 6px; }