/* ============================================
   JJin JJap v4.0 — Mobile-First Design System
   Community App for 10~20대 명품 진품/가품 판별
   ============================================ */

/* ── Google Fonts ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════════════
   1. DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  /* --- Brand Colors (로고 퍼플 그라데이션 기준) --- */
  --brand-primary:   #7C3AED;
  --brand-primary-d: #5B21B6;
  --brand-primary-l: #A78BFA;
  --brand-primary-bg:#F5F3FF;
  --brand-primary-soft: #DDD6FE;
  --brand-logo-from: #8B5CF6;
  --brand-logo-to:   #4F46E5;

  --brand-accent:    #F97316;
  --brand-accent-d:  #EA6C00;
  --brand-accent-bg: #FFF7ED;

  --status-real:     #10B981;
  --status-real-bg:  #ECFDF5;
  --status-fake:     #EF4444;
  --status-fake-bg:  #FEF2F2;
  --status-hold:     #6B7280;
  --status-hold-bg:  #F9FAFB;

  --gray-50:  #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-150: #EFEFEF;
  --gray-200: #E4E4E7;
  --gray-300: #D1D5DB;
  --gray-400: #A1A1AA;
  --gray-500: #71717A;
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #18181B;

  --white:  #FFFFFF;
  --black:  #09090B;
  --bg-app: #F4F4F5;

  --font-ko: 'Noto Sans KR', -apple-system, sans-serif;
  --font-en: 'Inter', -apple-system, sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   900;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  --sh-xs: 0 1px 2px rgba(0,0,0,.06);
  --sh-sm: 0 2px 8px rgba(0,0,0,.08);
  --sh-md: 0 4px 16px rgba(0,0,0,.10);
  --sh-lg: 0 8px 28px rgba(0,0,0,.12);
  --sh-xl: 0 16px 48px rgba(0,0,0,.14);
  --sh-fab: 0 6px 20px rgba(124,58,237,.45);

  --ease-fast:  150ms cubic-bezier(.4,0,.2,1);
  --ease-base:  250ms cubic-bezier(.4,0,.2,1);
  --ease-slow:  400ms cubic-bezier(.4,0,.2,1);
  --ease-spring:300ms cubic-bezier(.34,1.56,.64,1);

  --app-max-w:  600px;
  --header-h:   56px;
  --bottom-nav-h: 64px;
  --safe-top:   env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ko);
  font-size: var(--text-base);
  color: var(--gray-900);
  background: var(--bg-app);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; font-family: inherit; font-size: inherit; color: inherit; -webkit-appearance: none; }
img { max-width: 100%; display: block; }
input, textarea, select { font-family: inherit; font-size: inherit; -webkit-appearance: none; border: none; outline: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: var(--weight-bold); }
p { margin: 0; }

.app-shell {
  position: relative;
  width: 100%;
  max-width: var(--app-max-w);
  margin: 0 auto;
  background: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,.15);
}

.top-nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h); padding: 0 var(--sp-4); padding-top: var(--safe-top);
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-100);
  display: flex; align-items: center; justify-content: space-between;
}

.top-nav__logo { display: flex; align-items: center; gap: 7px; }

.logo-img {
  width: 32px; height: 32px; object-fit: cover; display: block; flex-shrink: 0;
  border-radius: 9px; box-shadow: 0 2px 8px rgba(91,33,182,.25);
}

.logo-wordmark {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 18px; font-weight: 900; letter-spacing: -0.6px; line-height: 1; user-select: none;
  background: linear-gradient(135deg, #8B5CF6 0%, #4F46E5 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.logo-mark { display: none; }
.logo-text  { display: none; }

.top-nav__actions { display: flex; align-items: center; gap: 2px; }

.icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-700); transition: background var(--ease-fast); position: relative;
}
.icon-btn:active { background: var(--gray-100); }
.icon-btn i { font-size: 20px; }

.icon-btn .badge {
  position: absolute; top: 9px; right: 9px; width: 7px; height: 7px;
  background: var(--brand-accent); border-radius: var(--r-full); border: 1.5px solid white;
}

.category-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); overflow-x: auto; scrollbar-width: none;
  background: var(--white); -webkit-overflow-scrolling: touch;
}
.category-bar::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 34px; padding: 0 var(--sp-4); border-radius: var(--r-full);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--gray-500); background: var(--gray-100); border: 1.5px solid transparent;
  transition: all var(--ease-fast); white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
.chip:active { transform: scale(.96); }
.chip.active {
  color: var(--brand-primary); background: var(--brand-primary-bg);
  border-color: var(--brand-primary-soft); font-weight: var(--weight-semi);
}
.chip i { font-size: 12px; }

.page-content {
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

.hero-banner {
  margin: var(--sp-4); border-radius: var(--r-2xl); overflow: hidden;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #A78BFA 100%);
  padding: var(--sp-6) var(--sp-5); position: relative;
}
.hero-banner::before {
  content: ''; position: absolute; top: -30%; right: -10%;
  width: 200px; height: 200px; background: rgba(255,255,255,.08); border-radius: 50%;
}
.hero-banner::after {
  content: ''; position: absolute; bottom: -20%; right: 20%;
  width: 120px; height: 120px; background: rgba(255,255,255,.06); border-radius: 50%;
}

.hero-tag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.9); font-size: var(--text-xs); font-weight: var(--weight-semi);
  padding: 4px 10px; border-radius: var(--r-full); margin-bottom: var(--sp-3); letter-spacing: .3px;
}

.hero-title {
  font-size: var(--text-2xl); font-weight: var(--weight-black); color: white;
  line-height: 1.25; margin-bottom: var(--sp-2); letter-spacing: -0.5px;
}

.hero-sub { font-size: var(--text-sm); color: rgba(255,255,255,.75); margin-bottom: var(--sp-5); line-height: 1.55; }

.hero-cta {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-5);
  background: white; color: var(--brand-primary-d); border-radius: var(--r-full);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  box-shadow: 0 4px 14px rgba(0,0,0,.2); transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}
.hero-cta:active { transform: scale(.97); box-shadow: 0 2px 8px rgba(0,0,0,.15); }

.hero-stats { display: flex; gap: var(--sp-4); margin-top: var(--sp-5); position: relative; z-index: 1; }
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat__num { font-family: var(--font-en); font-weight: var(--weight-black); font-size: var(--text-xl); color: white; line-height: 1; }
.hero-stat__label { font-size: var(--text-xs); color: rgba(255,255,255,.65); }
.hero-stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,.2); align-self: center; }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
}
.section-head__title {
  font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--gray-900);
  display: flex; align-items: center; gap: var(--sp-2);
}
.section-head__title .hot-dot {
  width: 7px; height: 7px; background: var(--brand-accent); border-radius: 50%; display: inline-block;
}
.section-head__more {
  display: flex; align-items: center; gap: 2px;
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--gray-400);
}

.h-scroll {
  display: flex; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-3);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.h-scroll::-webkit-scrollbar { display: none; }

.hot-card {
  flex-shrink: 0; width: 148px; background: var(--white);
  border-radius: var(--r-xl); border: 1px solid var(--gray-100); overflow: hidden;
  box-shadow: var(--sh-sm); cursor: pointer;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
  display: flex; flex-direction: column;
}
.hot-card:active { transform: scale(.96); box-shadow: var(--sh-xs); }

.hot-card__thumb {
  width: 100%; aspect-ratio: 1 / 1; background: var(--gray-100);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.hot-card__placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  background: linear-gradient(145deg, var(--brand-primary-bg) 0%, #EDE9FE 100%);
}
.hot-card__abbr {
  font-family: var(--font-en); font-size: 24px; font-weight: var(--weight-black);
  color: var(--brand-primary-soft); letter-spacing: -1px; line-height: 1;
}
.hot-card__icon { font-size: 12px; color: var(--brand-primary-soft); opacity: .6; }

.hot-card__badge {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  display: inline-flex; align-items: center; gap: 3px;
  height: 20px; padding: 0 7px; border-radius: var(--r-full);
  font-size: 10px; font-weight: var(--weight-bold);
}
.hot-card__badge.real { background: var(--status-real); color: white; }
.hot-card__badge.fake { background: var(--status-fake); color: white; }
.hot-card__badge.hold { background: rgba(255,255,255,.88); color: var(--gray-600); border: 1px solid var(--gray-200); }

.hot-card__votebar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(0,0,0,.08); }
.hot-card__votebar-fill {
  height: 100%; background: linear-gradient(90deg, var(--status-real), #34D399);
  border-radius: 0 var(--r-full) var(--r-full) 0;
}

.hot-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: 3px; }
.hot-card__brand { font-size: 9px; font-weight: var(--weight-bold); color: var(--brand-primary); text-transform: uppercase; letter-spacing: .7px; }
.hot-card__name {
  font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--gray-900);
  line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hot-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--gray-100);
}
.hot-card__votes { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: var(--weight-medium); color: var(--gray-400); }
.hot-card__votes i { font-size: 9px; }
.hot-card__votes--cta { color: var(--brand-primary); font-weight: var(--weight-bold); }
.hot-card__votes--cta i { color: var(--brand-primary); }
.hot-card__ai { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: var(--weight-bold); padding: 2px 5px; border-radius: var(--r-full); }
.hot-card__ai i { font-size: 9px; }
.hot-card__ai.ai-high { background: var(--status-real-bg); color: var(--status-real); }
.hot-card__ai.ai-mid  { background: var(--brand-accent-bg); color: var(--brand-accent-d); }
.hot-card__ai.ai-low  { background: var(--status-fake-bg); color: var(--status-fake); }

.rating-card {
  flex-shrink: 0; width: 148px; background: var(--white);
  border-radius: var(--r-xl); border: 1px solid var(--gray-100); overflow: hidden;
  box-shadow: var(--sh-sm); transition: transform var(--ease-fast); cursor: pointer;
}
.rating-card:active { transform: scale(.97); }
.rating-card__img { width: 100%; aspect-ratio: 1/1; background: var(--gray-100); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rating-card__img img { width: 100%; height: 100%; object-fit: cover; }
.img-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); background: linear-gradient(135deg, var(--brand-primary-bg), var(--gray-100)); }
.img-placeholder i { font-size: 28px; color: var(--brand-primary-soft); }
.img-placeholder span { font-family: var(--font-en); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--gray-300); letter-spacing: 1px; }
.status-badge { position: absolute; top: var(--sp-2); left: var(--sp-2); display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 var(--sp-2); border-radius: var(--r-full); font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .2px; }
.status-badge.real { background: var(--status-real); color: white; }
.status-badge.fake { background: var(--status-fake); color: white; }
.status-badge.hold { background: rgba(255,255,255,.9); color: var(--gray-500); border: 1px solid var(--gray-200); }
.vote-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--gray-200); }
.vote-bar__fill { height: 100%; background: linear-gradient(90deg, var(--status-real), #34D399); border-radius: 0 var(--r-full) var(--r-full) 0; }
.rating-card__body { padding: var(--sp-3); }
.rating-card__brand { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--brand-primary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.rating-card__name { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--gray-900); line-height: 1.3; margin-bottom: var(--sp-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.rating-card__meta { display: flex; align-items: center; justify-content: space-between; }
.vote-count { font-size: var(--text-xs); color: var(--gray-400); display: flex; align-items: center; gap: 3px; }
.vote-count i { font-size: 10px; }

.brand-scroll { display: flex; gap: var(--sp-4); padding: 0 var(--sp-4) var(--sp-3); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.brand-scroll::-webkit-scrollbar { display: none; }
.brand-item { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); cursor: pointer; touch-action: manipulation; }
.brand-item:active .brand-icon { transform: scale(.92); }
.brand-icon { width: 56px; height: 56px; border-radius: var(--r-xl); background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: 13px; font-weight: var(--weight-black); color: var(--gray-700); letter-spacing: -0.5px; transition: transform var(--ease-spring); border: 1.5px solid var(--gray-150); }
.brand-item.active .brand-icon { background: var(--brand-primary-bg); border-color: var(--brand-primary-soft); color: var(--brand-primary-d); }
.brand-name { font-size: 10px; font-weight: var(--weight-medium); color: var(--gray-500); letter-spacing: .2px; }

/* 2열 Feed Grid */
.feed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-3); background: var(--white); }

.feed-card { background: var(--white); border-radius: var(--r-xl); border: 1px solid var(--gray-100); overflow: hidden; box-shadow: var(--sh-sm); cursor: pointer; transition: transform var(--ease-fast), box-shadow var(--ease-fast); touch-action: manipulation; display: flex; flex-direction: column; }
.feed-card:active { transform: scale(.97); box-shadow: var(--sh-xs); }

.feed-card__thumb { width: 100%; aspect-ratio: 1 / 1; background: var(--gray-100); position: relative; overflow: hidden; flex-shrink: 0; }
.feed-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.feed-card__placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(145deg, var(--brand-primary-bg) 0%, #EDE9FE 100%); }
.feed-card__placeholder-abbr { font-family: var(--font-en); font-size: 26px; font-weight: var(--weight-black); color: var(--brand-primary-soft); letter-spacing: -1px; line-height: 1; }
.feed-card__placeholder-icon { font-size: 13px; color: var(--brand-primary-soft); opacity: .6; }

.feed-card__badge { position: absolute; top: var(--sp-2); left: var(--sp-2); display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: var(--r-full); font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .1px; backdrop-filter: blur(4px); }
.feed-card__badge.real { background: var(--status-real); color: white; }
.feed-card__badge.fake { background: var(--status-fake); color: white; }
.feed-card__badge.hold { background: rgba(255,255,255,.88); color: var(--gray-600); border: 1px solid var(--gray-200); }

.feed-card__votebar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(0,0,0,.1); }
.feed-card__votebar-fill { height: 100%; background: linear-gradient(90deg, var(--status-real), #34D399); border-radius: 0 var(--r-full) var(--r-full) 0; }

.feed-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); flex: 1; display: flex; flex-direction: column; gap: 4px; }
.feed-card__brand { font-size: 9px; font-weight: var(--weight-bold); color: var(--brand-primary); text-transform: uppercase; letter-spacing: .8px; }
.feed-card__name { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--gray-900); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

.feed-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--gray-100); }
.feed-card__votes { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: var(--weight-medium); color: var(--gray-400); line-height: 1; }
.feed-card__votes i { font-size: 9px; }
.feed-card__votes--cta { color: var(--brand-primary); font-weight: var(--weight-bold); }
.feed-card__votes--cta i { color: var(--brand-primary); }
.feed-card__ai { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: var(--weight-bold); line-height: 1; padding: 2px 6px; border-radius: var(--r-full); }
.feed-card__ai i { font-size: 9px; }
.feed-card__ai.ai-high { background: var(--status-real-bg); color: var(--status-real); }
.feed-card__ai.ai-mid  { background: var(--brand-accent-bg); color: var(--brand-accent-d); }
.feed-card__ai.ai-low  { background: var(--status-fake-bg); color: var(--status-fake); }
.feed-card__pct { display: none; }

.feed-list { display: flex; flex-direction: column; gap: 1px; background: var(--gray-100); }
.feed-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--white); cursor: pointer; transition: background var(--ease-fast); touch-action: manipulation; }
.feed-item:active { background: var(--gray-50); }
.feed-item__thumb { flex-shrink: 0; width: 80px; height: 80px; border-radius: var(--r-lg); background: var(--gray-100); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.feed-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.feed-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--brand-primary-bg), var(--gray-100)); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: var(--weight-black); font-size: 18px; color: var(--brand-primary-soft); letter-spacing: -0.5px; }
.feed-item__content { flex: 1; min-width: 0; }
.feed-item__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
.feed-brand-chip { font-size: 10px; font-weight: var(--weight-bold); color: var(--brand-primary); text-transform: uppercase; letter-spacing: .8px; }
.feed-item__title { font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--gray-900); line-height: 1.35; margin-bottom: var(--sp-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.feed-item__bottom { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.feed-item__time { font-size: var(--text-xs); color: var(--gray-400); }
.feed-dot { width: 3px; height: 3px; background: var(--gray-300); border-radius: 50%; }
.feed-vote-chip { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--gray-500); }

/* Banner Cards */
.banner-card { margin: 0 var(--sp-4); border-radius: var(--r-xl); padding: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); cursor: pointer; transition: transform var(--ease-fast), box-shadow var(--ease-fast); box-shadow: var(--sh-md); }
.banner-card:active { transform: scale(.99); }
.banner-card.indigo { background: linear-gradient(135deg, var(--brand-primary-d) 0%, var(--brand-primary) 100%); color: white; }
.banner-card.orange { background: linear-gradient(135deg, var(--brand-accent-d) 0%, var(--brand-accent) 100%); color: white; }
.banner-card.emerald { background: linear-gradient(135deg, #059669 0%, #10B981 100%); color: white; }
.banner-card__content {}
.banner-card__eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semi); opacity: .75; margin-bottom: 4px; letter-spacing: .4px; }
.banner-card__title { font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.25; margin-bottom: 4px; }
.banner-card__sub { font-size: var(--text-xs); opacity: .7; }
.banner-card__icon { flex-shrink: 0; width: 52px; height: 52px; background: rgba(255,255,255,.15); border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; font-size: 22px; }

/* Community */
.community-post { padding: var(--sp-4); background: var(--white); border-bottom: 1px solid var(--gray-100); cursor: pointer; }
.community-post:active { background: var(--gray-50); }
.community-post__header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.user-avatar { width: 36px; height: 36px; border-radius: var(--r-full); overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--brand-primary-bg), var(--brand-primary-soft)); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--brand-primary-d); }
.user-info { flex: 1; }
.user-name { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--gray-900); display: flex; align-items: center; gap: 4px; }
.user-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 4px; font-size: 9px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .4px; }
.user-badge.expert { background: var(--brand-primary-bg); color: var(--brand-primary-d); }
.user-badge.pro { background: #FEF3C7; color: #92400E; }
.post-time { font-size: var(--text-xs); color: var(--gray-400); margin-top: 1px; }
.community-post__body { font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--gray-800); line-height: 1.55; margin-bottom: var(--sp-3); }
.community-post__images { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); margin-bottom: var(--sp-3); border-radius: var(--r-md); overflow: hidden; }
.post-img-item { aspect-ratio: 1/1; background: var(--gray-100); position: relative; overflow: hidden; }
.post-img-item img { width:100%; height:100%; object-fit:cover; }
.post-img-more { position: absolute; inset: 0; background: rgba(0,0,0,.5); color: white; display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--text-lg); }
.community-post__footer { display: flex; align-items: center; gap: var(--sp-4); }
.post-action-btn { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); color: var(--gray-400); padding: var(--sp-2) 0; min-height: 44px; min-width: 44px; transition: color var(--ease-fast); }
.post-action-btn.liked { color: var(--status-fake); }
.post-action-btn.liked i { color: var(--status-fake); }
.post-action-btn i { font-size: 16px; }

/* Bottom Nav */
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--app-max-w); height: calc(var(--bottom-nav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--gray-100); display: flex; align-items: flex-start; padding-top: var(--sp-2); z-index: 100; }
.nav-items { display: flex; width: 100%; justify-content: space-around; align-items: flex-start; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--sp-1) 0; min-height: 48px; cursor: pointer; position: relative; touch-action: manipulation; }
.nav-item:active .nav-item__icon { transform: scale(.88); }
.nav-item__icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; position: relative; transition: transform var(--ease-spring); }
.nav-item__icon i { font-size: 20px; color: var(--gray-400); }
.nav-item.active .nav-item__icon i { color: var(--brand-primary); }
.nav-item__label { font-size: 10px; font-weight: var(--weight-medium); color: var(--gray-400); letter-spacing: .2px; }
.nav-item.active .nav-item__label { color: var(--brand-primary); font-weight: var(--weight-bold); }
.nav-item__dot { position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; background: var(--brand-accent); border-radius: 50%; border: 1.5px solid white; }

.nav-fab { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; touch-action: manipulation; }
.nav-fab__btn { width: 50px; height: 50px; border-radius: var(--r-full); background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-d) 100%); color: white; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-fab); transform: translateY(-8px); transition: transform var(--ease-spring), box-shadow var(--ease-fast); }
.nav-fab:active .nav-fab__btn { transform: translateY(-8px) scale(.92); box-shadow: 0 4px 12px rgba(99,102,241,.3); }
.nav-fab__btn i { font-size: 20px; }
.nav-fab__label { font-size: 10px; font-weight: var(--weight-bold); color: var(--brand-primary); margin-top: -13px; }

/* Sheet */
.sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; opacity: 0; pointer-events: none; transition: opacity var(--ease-base); }
.sheet-overlay.open { opacity: 1; pointer-events: all; }
.bottom-sheet { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); width: 100%; max-width: var(--app-max-w); background: white; border-radius: var(--r-2xl) var(--r-2xl) 0 0; z-index: 201; padding-bottom: var(--safe-bottom); transition: transform var(--ease-slow); will-change: transform; max-height: 90vh; overflow-y: auto; }
.bottom-sheet.open { transform: translateX(-50%) translateY(0); }
.sheet-handle { width: 36px; height: 4px; background: var(--gray-200); border-radius: var(--r-full); margin: var(--sp-3) auto var(--sp-2); }
.sheet-header { padding: 0 var(--sp-4) var(--sp-4); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-100); }
.sheet-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--gray-900); }

/* Upload */
.upload-page { padding: var(--sp-4); padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 80px); }
.form-section { margin-bottom: var(--sp-5); }
.form-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--gray-700); margin-bottom: var(--sp-2); }
.form-label .req { color: var(--status-fake); margin-left: 2px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.photo-add-btn { aspect-ratio: 1/1; border-radius: var(--r-lg); border: 2px dashed var(--brand-primary-soft); background: var(--brand-primary-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); cursor: pointer; transition: all var(--ease-fast); }
.photo-add-btn:active { border-color: var(--brand-primary); background: var(--brand-primary-bg); transform: scale(.97); }
.photo-add-btn i { font-size: 22px; color: var(--brand-primary); }
.photo-add-btn span { font-size: var(--text-xs); color: var(--brand-primary); font-weight: var(--weight-medium); line-height: 1.2;}
.photo-slot { aspect-ratio: 1/1; border-radius: var(--r-lg); background: var(--gray-100); position: relative; overflow: hidden; }
.text-input { width: 100%; height: 48px; padding: 0 var(--sp-4); background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: var(--r-lg); font-size: var(--text-base); color: var(--gray-900); transition: border-color var(--ease-fast), background var(--ease-fast); }
.text-input:focus { border-color: var(--brand-primary); background: var(--white); box-shadow: 0 0 0 3px var(--brand-primary-bg); }
.textarea-input { width: 100%; min-height: 100px; padding: var(--sp-3) var(--sp-4); background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: var(--r-lg); font-size: var(--text-base); color: var(--gray-900); resize: none; line-height: 1.55; transition: border-color var(--ease-fast), background var(--ease-fast); }
.textarea-input:focus { border-color: var(--brand-primary); background: var(--white); box-shadow: 0 0 0 3px var(--brand-primary-bg); }
.submit-btn { position: fixed; bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--sp-3)); left: 50%; transform: translateX(-50%); width: calc(100% - var(--sp-8)); max-width: calc(var(--app-max-w) - var(--sp-8)); height: 52px; border-radius: var(--r-full); background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-d) 100%); color: white; font-size: var(--text-base); font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); box-shadow: var(--sh-fab); transition: transform var(--ease-fast), box-shadow var(--ease-fast); z-index: 50; }
.submit-btn:active { transform: translateX(-50%) scale(.98); }

/* Detail */
.detail-page { background: var(--white); }
.detail-image-area { position: relative; background: var(--gray-100); aspect-ratio: 4/3; }
.detail-image-area img { width:100%; height:100%; object-fit:cover; }
.detail-image-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); background: linear-gradient(135deg, var(--brand-primary-bg) 0%, var(--gray-100) 100%); }
.detail-image-placeholder i { font-size: 48px; color: var(--brand-primary-soft); }
.detail-image-placeholder span { font-family: var(--font-en); font-weight: var(--weight-black); font-size: var(--text-2xl); color: var(--gray-300); letter-spacing: -1px; }
.detail-back-btn { position: absolute; top: calc(var(--sp-4) + var(--safe-top)); left: var(--sp-4); width: 40px; height: 40px; border-radius: var(--r-full); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: var(--gray-700); box-shadow: var(--sh-sm); cursor: pointer; z-index: 10; }
.detail-share-btn { position: absolute; top: calc(var(--sp-4) + var(--safe-top)); right: var(--sp-4); width: 40px; height: 40px; border-radius: var(--r-full); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: var(--gray-700); box-shadow: var(--sh-sm); cursor: pointer; }
.img-dots { position: absolute; bottom: var(--sp-3); left: 50%; transform: translateX(-50%); display: flex; gap: var(--sp-1); }
.img-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.img-dot.active { width: 18px; border-radius: var(--r-full); background: white; }
.detail-content { padding: var(--sp-4); }
.detail-status-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.big-status-badge { display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; border-radius: var(--r-full); font-size: var(--text-sm); font-weight: var(--weight-bold); padding: 0px 5px;}
.big-status-badge.real { background: var(--status-real-bg); color: var(--status-real); border: 1.5px solid var(--status-real); }
.big-status-badge.fake { background: var(--status-fake-bg); color: var(--status-fake); border: 1.5px solid var(--status-fake); }
.detail-brand { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--brand-primary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--sp-1); }
.detail-title { font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--gray-900); line-height: 1.25; margin-bottom: var(--sp-4); letter-spacing: -0.3px; }
.vote-result-card { background: var(--gray-50); border: 1px solid var(--gray-150); border-radius: var(--r-xl); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.vote-result-title { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--gray-600); margin-bottom: var(--sp-3); }
.vote-progress-wrap { margin-bottom: var(--sp-3); }
.vote-progress-labels { display: flex; justify-content: space-between; margin-bottom: var(--sp-2); }
.vote-label-real { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--status-real); display: flex; align-items: center; gap: var(--sp-1); }
.vote-label-fake { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--status-fake); display: flex; align-items: center; gap: var(--sp-1); }
.vote-bar-full { height: 8px; display: flex; border-radius: var(--r-full); overflow: hidden; background: var(--gray-200); }
.vote-bar-real-fill { height: 100%; background: linear-gradient(90deg, var(--status-real), #34D399); border-radius: var(--r-full) 0 0 var(--r-full); transition: width 0.5s var(--ease-slow); flex-shrink: 0; }
.vote-bar-fake-fill { height: 100%; background: linear-gradient(90deg, #F87171, var(--status-fake)); border-radius: 0 var(--r-full) var(--r-full) 0; transition: width 0.5s var(--ease-slow); flex-shrink: 0; }
.vote-count-row { display: flex; justify-content: space-between; }
.vote-count-num { font-family: var(--font-en); font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--gray-900); }
.vote-count-sub { font-size: var(--text-xs); color: var(--gray-400); }
.vote-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.vote-btn { height: 52px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--text-base); font-weight: var(--weight-bold); border: 2px solid; transition: all var(--ease-fast); cursor: pointer; }
.vote-btn:active { transform: scale(.97); }
.vote-btn.real-btn { border-color: var(--status-real); color: var(--status-real); background: var(--status-real-bg); }
.vote-btn.real-btn.selected { background: var(--status-real); color: white; }
.vote-btn.fake-btn { border-color: var(--status-fake); color: var(--status-fake); background: var(--status-fake-bg); }
.vote-btn.fake-btn.selected { background: var(--status-fake); color: white; }

/* AI Result */
.ai-result-card { background: var(--white); border: 1.5px solid var(--brand-primary-soft); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-4); }
.ai-result-header { background: linear-gradient(135deg, var(--brand-primary-d) 0%, var(--brand-primary) 100%); padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }
.ai-result-header i { color: white; font-size: 16px; }
.ai-result-title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: white; flex: 1; }
.ai-pro-badge { height: 20px; padding: 0 var(--sp-2); background: var(--brand-accent); border-radius: var(--r-full); font-size: 10px; font-weight: var(--weight-bold); color: white; display: flex; align-items: center; }
.ai-result-body { padding: var(--sp-4); }
.ai-score-row { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.ai-score-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--status-real-bg); border: 3px solid var(--status-real); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-score-num { font-family: var(--font-en); font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--status-real); line-height: 1; }
.ai-score-label { font-size: 9px; color: var(--status-real); font-weight: var(--weight-semi); }
.ai-desc { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.6; }
.ai-check-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.ai-check-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--gray-700); }
.ai-check-item.pass i { color: var(--status-real); }
.ai-check-item.fail i { color: var(--status-fake); }

/* Profile */
.profile-header { background: linear-gradient(175deg, var(--brand-primary-bg) 0%, var(--white) 100%); padding: calc(var(--sp-5) + var(--safe-top)) var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--gray-100); }
.profile-info-row { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.profile-avatar { width: 72px; height: 72px; border-radius: var(--r-full); background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-d) 100%); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); color: white; font-weight: var(--weight-black); flex-shrink: 0; }
.profile-name { font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--gray-900); margin-bottom: var(--sp-1); }
.profile-handle { font-size: var(--text-sm); color: var(--gray-400); margin-bottom: var(--sp-2); }
.profile-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-100); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--gray-100); }
.profile-stat-item { background: white; padding: var(--sp-3) var(--sp-2); text-align: center; }
.profile-stat-num { font-family: var(--font-en); font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--brand-primary); display: block; }
.profile-stat-label { font-size: var(--text-xs); color: var(--gray-500); margin-top: 2px; }

/* Guide */
.guide-card { margin: 0 var(--sp-4) var(--sp-3); border-radius: var(--r-xl); overflow: hidden; background: white; border: 1px solid var(--gray-100); box-shadow: var(--sh-sm); cursor: pointer; transition: transform var(--ease-fast), box-shadow var(--ease-fast); }
.guide-card:active { transform: scale(.99); box-shadow: var(--sh-xs); }
.guide-card__cover { width: 100%; aspect-ratio: 16/7; background: linear-gradient(135deg, var(--brand-primary-d), var(--brand-primary-l)); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: var(--weight-black); font-size: var(--text-4xl); color: rgba(255,255,255,.25); letter-spacing: -2px; position: relative; overflow: hidden; }
.guide-card__cover-text { position: absolute; font-family: var(--font-en); font-size: 55px; font-weight: var(--weight-black); color: rgba(255,255,255,.08); letter-spacing: -4px; text-align: center;}
.guide-card__body { padding: var(--sp-4); }
.guide-card__brand-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--sp-3); background: var(--brand-primary-bg); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--brand-primary-d); margin-bottom: var(--sp-2); letter-spacing: .5px; }
.guide-card__title { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--gray-900); margin-bottom: var(--sp-1); }
.guide-card__meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-xs); color: var(--gray-400); }

/* Search */
.search-wrap { padding: var(--sp-3) var(--sp-4); background: var(--white); border-bottom: 1px solid var(--gray-100); }
.search-bar { display: flex; align-items: center; gap: var(--sp-3); height: 44px; padding: 0 var(--sp-4); background: var(--gray-100); border-radius: var(--r-full); border: 1.5px solid transparent; transition: all var(--ease-fast); }
.search-bar:focus-within { background: white; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-bg); }
.search-bar i { color: var(--gray-400); font-size: 16px; flex-shrink: 0; }
.search-bar input { flex: 1; background: none; font-size: var(--text-base); color: var(--gray-900); caret-color: var(--brand-primary); }
.search-bar input::placeholder { color: var(--gray-400); }

.notif-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--status-fake); color: white; font-size: 10px; font-weight: var(--weight-bold); }

.divider { height: 8px; background: var(--gray-100); border-top: 1px solid var(--gray-150); border-bottom: 1px solid var(--gray-150); }
.divider-thin { height: 1px; background: var(--gray-100); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.bold { font-weight: var(--weight-bold); }
.muted { color: var(--gray-400); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }

.empty-state { padding: var(--sp-12) var(--sp-8); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.empty-state i { font-size: 48px; color: var(--gray-300); }
.empty-state__title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--gray-500); }
.empty-state__sub { font-size: var(--text-sm); color: var(--gray-400); }

.page { display: none; animation: pageFadeIn var(--ease-base) forwards; }
.page.active { display: block; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.skeleton { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-150) 50%, var(--gray-100) 75%); background-size: 600px 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--r-sm); }

.toast-container { position: fixed; bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--sp-4)); left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); pointer-events: none; width: calc(100% - var(--sp-8)); max-width: calc(var(--app-max-w) - var(--sp-8)); }
.toast { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--gray-900); border-radius: var(--r-xl); color: white; font-size: var(--text-sm); font-weight: var(--weight-medium); box-shadow: var(--sh-lg); width: 100%; animation: toastIn .3s var(--ease-spring) forwards; }
.toast.fade-out { animation: toastOut .3s var(--ease-base) forwards; }
.toast i { font-size: 18px; flex-shrink: 0; }
.toast.success i { color: var(--status-real); }
.toast.error i   { color: var(--status-fake); }
.toast.info i    { color: var(--brand-primary-l); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-6px) scale(.95); } }

@media (max-width: 360px) {
  :root { font-size: 14px; }
  .rating-card { width: 132px; }
  .brand-icon  { width: 48px; height: 48px; font-size: 11px; }
  .hero-title  { font-size: var(--text-xl); }
}
@media (min-width: 600px) {
  .app-shell { border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); }
}

/* ══════════════════════════════════════════
   서브 페이지 공통 헤더 (← 뒤로 + 제목 + 오른쪽 액션)
   injectSubPageHeader() 함수와 함께 사용
══════════════════════════════════════════ */
.page-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-4); height: 56px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-100);
}
.page-header__title {
  font-size: var(--text-lg); font-weight: var(--weight-black);
  color: var(--gray-900); flex: 1; text-align: center;
}
.page-header__back {
  display: flex; align-items: center; gap: 2px;
  font-size: var(--text-sm); font-weight: var(--weight-semi);
  color: var(--gray-700); min-width: 40px; background: none; border: none; cursor: pointer;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; margin-left: calc(-1 * var(--sp-1));
  -webkit-tap-highlight-color: transparent;
}
.page-header__back i { font-size: 16px; line-height: 1; }
.page-header__back-label { white-space: nowrap; letter-spacing: -0.02em; padding-left: 10px;}
.page-header__right {
  display: flex; align-items: center; gap: var(--sp-1);
  min-width: 40px; justify-content: flex-end;
}