/* ============================================
   JJin JJap v5.0 — Pages CSS
   각 페이지 고유 스타일 통합 모음
   (이 파일은 style.css 와 함께 모든 페이지에 로드됩니다)
   ============================================ */

/* ─────────────────────────────────────────────
   스켈레톤 로딩 애니메이션
   ───────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* ─────────────────────────────────────────────
   [pages/splash.html] 앱 인트로 스플래시
   ───────────────────────────────────────────── */
#splash {
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(160deg,#5B21B6 0%,#7C3AED 55%,#A78BFA 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  transition:opacity .4s ease, transform .4s ease;
  cursor:pointer;
}
#splash.hide { opacity:0; transform:scale(1.04); pointer-events:none; }
#splash-logo { width:96px; height:96px; object-fit:cover; border-radius:26px; box-shadow:0 8px 32px rgba(0,0,0,.25); animation:splashPop .6s cubic-bezier(.34,1.56,.64,1) forwards; }
#splash-wordmark { font-family:'Inter',sans-serif; font-size:28px; font-weight:900; letter-spacing:-1px; color:white; margin:0; animation:splashFade .7s .15s ease forwards; opacity:0; }
#splash-wordmark span { opacity:.75; }
#splash-tagline { font-family:'Noto Sans KR',sans-serif; font-size:15px; font-weight:500; color:rgba(255,255,255,.8); letter-spacing:.5px; animation:splashFade .8s .3s ease forwards; opacity:0; }
#splash-dot-wrap { display:flex; gap:8px; animation:splashFade .8s .5s ease forwards; opacity:0; }
.splash-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); animation:dotPulse 1.2s infinite ease-in-out; }
.splash-dot:nth-child(2) { animation-delay:.2s; }
.splash-dot:nth-child(3) { animation-delay:.4s; }
@keyframes splashPop  { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes splashFade { to{opacity:1} }
@keyframes dotPulse   { 0%,100%{background:rgba(255,255,255,.3);transform:scale(1)} 50%{background:rgba(255,255,255,.9);transform:scale(1.3)} }

/* ─────────────────────────────────────────────
   [login.html] 로그인 화면
   ───────────────────────────────────────────── */
.login-wrap {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--sp-6) var(--sp-5);
  max-width: var(--app-max-w); margin: 0 auto;
}
.login-logo-area {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3); margin-bottom: var(--sp-8);
}
.login-logo-img {
  width: 72px; height: 72px; border-radius: 20px;
  box-shadow: 0 8px 24px rgba(124,58,237,.25);
}
.login-logo-wordmark {
  font-family: var(--font-en); font-size: 26px; font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #7C3AED, #4F46E5);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.login-logo-sub {
  font-size: var(--text-sm); color: var(--gray-500);
  font-weight: var(--weight-medium); margin-top: -var(--sp-2);
}
.social-btn {
  width: 100%; height: 52px; border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); font-size: var(--text-base);
  font-weight: var(--weight-semi); cursor: pointer;
  border: none; transition: all var(--ease-fast);
  margin-bottom: var(--sp-3); position: relative;
}
.social-btn:active { transform: scale(.98); }
.social-btn-naver { background: #03C75A; color: white; }
.social-btn-kakao { background: #FEE500; color: #191919; }
.social-btn-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px;
}
.social-btn-naver .social-btn-icon { background: #03C75A; color: white; font-family: var(--font-en); letter-spacing:-1px; }
.social-btn-kakao .social-btn-icon { }
.divider-or {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-4) 0; width: 100%;
}
.divider-or::before, .divider-or::after {
  content: ''; flex: 1; height: 1px; background: var(--gray-200);
}
.divider-or span { font-size: var(--text-xs); color: var(--gray-400); font-weight: var(--weight-medium); }
.login-form { width: 100%; }
.login-input-group { margin-bottom: var(--sp-3); }
.login-input-label {
  display: block; font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: var(--gray-600); margin-bottom: var(--sp-2); letter-spacing: .3px;
}
.login-input {
  width: 100%; height: 52px; padding: 0 var(--sp-4);
  border: 1.5px solid var(--gray-200); border-radius: var(--r-xl);
  font-size: var(--text-base); color: var(--gray-900);
  background: white; transition: border-color var(--ease-fast);
  box-sizing: border-box;
}
.login-input:focus { outline: none; border-color: var(--brand-primary); }
.login-input.error { border-color: var(--status-fake); }
.input-err-msg { font-size: var(--text-xs); color: var(--status-fake); margin-top: 5px; display: none; }
.input-err-msg.show { display: block; }
.login-submit-btn {
  width: 100%; height: 52px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #7C3AED, #4F46E5);
  color: white; font-size: var(--text-base); font-weight: var(--weight-bold);
  border: none; cursor: pointer; margin-top: var(--sp-2);
  transition: all var(--ease-fast); display: flex;
  align-items: center; justify-content: center; gap: var(--sp-2);
}
.login-submit-btn:active { transform: scale(.98); opacity: .9; }
.login-bottom-links {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); margin-top: var(--sp-4);
}
.login-link {
  font-size: var(--text-sm); color: var(--gray-500);
  font-weight: var(--weight-medium); cursor: pointer;
  text-decoration: none;
}
.login-link:hover { color: var(--brand-primary); }
.login-link-sep { width: 1px; height: 12px; background: var(--gray-200); }
.login-signup-row {
  margin-top: var(--sp-6); text-align: center;
  font-size: var(--text-sm); color: var(--gray-500);
}
.login-signup-row a {
  color: var(--brand-primary); font-weight: var(--weight-bold);
  text-decoration: none; margin-left: var(--sp-1);
}
.auto-login-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: var(--sp-2) 0;
}
.check-label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); color: var(--gray-600); cursor: pointer;
}
.check-label input[type=checkbox] { display: none; }
.check-box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--gray-300); display: flex;
  align-items: center; justify-content: center;
  transition: all var(--ease-fast); flex-shrink: 0;
}
.check-label input:checked + .check-box {
  background: var(--brand-primary); border-color: var(--brand-primary);
}
.check-label input:checked + .check-box::after {
  content: ''; width: 4px; height: 8px;
  border: 2px solid white; border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
}

/* ─────────────────────────────────────────────
   [upload.html] 판별 요청 / 브랜드 선택
   ───────────────────────────────────────────── */
.brand-select-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2); }
.brand-select-chip { display:flex; flex-direction:column; align-items:center; gap:4px; padding:var(--sp-2) 5px; border-radius:var(--r-lg); border:1.5px solid var(--gray-200); background:white; cursor:pointer; transition:all var(--ease-fast); }
.brand-select-chip:active { transform:scale(.95); }
.brand-select-chip.selected { border-color:var(--brand-primary); background:var(--brand-primary-bg); }
.brand-chip-icon { width:40px; height:40px; border-radius:var(--r-md); background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-family:var(--font-en); font-weight:var(--weight-black); font-size:11px; color:var(--gray-600); letter-spacing:-0.5px; }
.brand-select-chip.selected .brand-chip-icon { background:var(--brand-primary-bg); color:var(--brand-primary-d); }
.brand-chip-name { font-size:10px; font-weight:var(--weight-medium); color:var(--gray-500); }
.brand-select-chip.selected .brand-chip-name { color:var(--brand-primary-d); font-weight:var(--weight-bold); }
.brand-more-chip { display:flex; flex-direction:column; align-items:center; gap:4px; padding:var(--sp-2) 0; border-radius:var(--r-lg); border:1.5px dashed var(--gray-300); background:var(--gray-50); cursor:pointer; transition:all var(--ease-fast); }
.brand-more-chip:active { transform:scale(.95); }
.brand-more-chip .brand-chip-icon { background:transparent; color:var(--brand-primary); font-size:18px; }
.brand-more-chip .brand-chip-name { color:var(--brand-primary); font-weight:var(--weight-semi); }
.sheet-close-btn { width:36px; height:36px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; color:var(--gray-500); cursor:pointer; transition:color var(--ease-fast); }
.sheet-close-btn:active { color:var(--gray-700); }

/* 브랜드 모달 UX 개선 (구 버전 - 호환용) */
.brand-modal-sheet { display:flex; flex-direction:column; overflow:hidden; max-height:85vh; }
.brand-modal-sheet .brand-modal-header { position:sticky; top:0; z-index:10; background:white; padding:var(--sp-4); padding-bottom:var(--sp-3); border-bottom:1px solid var(--gray-100); flex-shrink:0; }
.brand-modal-sheet .brand-modal-header .sheet-title { font-size:var(--text-xl); font-weight:var(--weight-black); color:var(--gray-900); margin:0 0 var(--sp-1); }
.brand-modal-desc { font-size:var(--text-sm); color:var(--gray-500); margin:0 0 var(--sp-4); line-height:1.4; }
.brand-modal-header { position:relative; }
.brand-modal-header .sheet-close-btn { position:absolute; top:0; right:0; }
.brand-modal-search-wrap { position:relative; display:flex; align-items:center; }
.brand-modal-search-icon { position:absolute; left:var(--sp-4); color:var(--gray-400); font-size:14px; pointer-events:none; }
.brand-modal-search-input { width:100%; height:48px; padding:0 var(--sp-4) 0 40px; background:var(--gray-50); border:1.5px solid var(--gray-200); border-radius:var(--r-xl); font-size:var(--text-base); color:var(--gray-900); transition:border-color var(--ease-fast), background var(--ease-fast); }
.brand-modal-search-input::placeholder { color:var(--gray-400); }
.brand-modal-search-input:focus { outline:none; border-color:var(--brand-primary); background:white; box-shadow:0 0 0 3px var(--brand-primary-bg); }
.brand-modal-list-wrap { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.brand-modal-list { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-2); padding:var(--sp-4); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.brand-modal-item { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-1); padding:var(--sp-3); border-radius:var(--r-xl); border:2px solid var(--gray-200); background:white; cursor:pointer; transition:all var(--ease-fast); min-height:72px; }
.brand-modal-item:active { transform:scale(0.97); }
.brand-modal-item:hover { border-color:var(--gray-300); }
.brand-modal-item.selected { border-color:var(--brand-primary); background:var(--brand-primary-bg); box-shadow:0 0 0 1px var(--brand-primary); }
.brand-modal-item-inner { display:flex; flex-direction:column; align-items:center; gap:4px; }
.brand-modal-item .brand-chip-icon { width:36px; height:36px; border-radius:var(--r-md); background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-family:var(--font-en); font-weight:var(--weight-black); font-size:10px; color:var(--gray-600); letter-spacing:-0.3px; }
.brand-modal-item.selected .brand-chip-icon { background:var(--brand-primary); color:white; }
.brand-modal-item .brand-chip-name { font-size:10px; font-weight:var(--weight-medium); color:var(--gray-600); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; line-height:1.3; }
.brand-modal-item.selected .brand-chip-name { color:var(--brand-primary-d); font-weight:var(--weight-bold); }
.brand-modal-check { position:absolute; top:6px; right:6px; width:16px; height:16px; padding:2px; border-radius:50%; background:var(--brand-primary); color:white; font-size:10px; display:flex; align-items:center; justify-content:center; }
.brand-modal-empty { grid-column:1/-1; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2); padding:var(--sp-12); color:var(--gray-400); }
.brand-modal-empty i { font-size:40px; opacity:0.6; }
.brand-modal-empty p { font-size:var(--text-base); font-weight:var(--weight-semi); color:var(--gray-500); margin:0; }
.brand-modal-empty span { font-size:var(--text-sm); color:var(--gray-400); }
.brand-modal-loading, .brand-modal-error { grid-column:1/-1; padding:var(--sp-12); text-align:center; color:var(--gray-500); font-size:var(--text-sm); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.brand-modal-loading i { font-size:24px; }

/* ── 브랜드 모달 v2 (리디자인: 리스트형 + 검색 + 인덱스) ── */
.brand-modal-sheet-v2 {
  display:flex; flex-direction:column; overflow:hidden; max-height:90vh;
  padding:0; padding-bottom:var(--safe-bottom);
}
.brand-modal-sheet-v2 .sheet-handle { display:none; }
.brand-modal-v2__header {
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-4) var(--sp-2); border-bottom:1px solid var(--gray-100);
}
.brand-modal-v2__title { font-size:var(--text-xl); font-weight:var(--weight-black); color:var(--gray-900); margin:0; }
.brand-modal-v2__close {
  width:40px; height:40px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center;
  color:var(--gray-500); background:var(--gray-100); border:none; cursor:pointer; transition:all var(--ease-fast);
}
.brand-modal-v2__close:active { background:var(--gray-200); color:var(--gray-700); }
.brand-modal-v2__search {
  flex-shrink:0; position:relative; display:flex; align-items:center;
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
}
.brand-modal-v2__search i:first-child { position:absolute; left:var(--sp-5); color:var(--gray-400); font-size:16px; pointer-events:none; }
.brand-modal-v2__search input {
  width:100%; height:48px; padding:0 44px 0 44px;
  background:var(--gray-50); border:1.5px solid var(--gray-200); border-radius:var(--r-xl);
  font-size:var(--text-base); color:var(--gray-900); transition:all var(--ease-fast);
}
.brand-modal-v2__search input::placeholder { color:var(--gray-400); }
.brand-modal-v2__search input:focus { outline:none; border-color:var(--brand-primary); background:white; box-shadow:0 0 0 3px var(--brand-primary-bg); }
.brand-modal-v2__search-clear {
  position:absolute; right:var(--sp-4); width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gray-500); background:var(--gray-200);
  border:none; cursor:pointer; transition:all var(--ease-fast); flex-shrink:0;
}
.brand-modal-v2__search-clear:active { background:var(--gray-300); }
.brand-modal-v2__body {
  flex:1; min-height:0; display:flex; overflow:hidden; position:relative;
}
.brand-modal-v2__index {
  flex-shrink:0; width:44px; min-width:44px; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:var(--sp-3) var(--sp-1); font-size:13px; font-weight:var(--weight-bold); color:var(--gray-500);
  overflow-y:auto; -webkit-overflow-scrolling:touch; -webkit-tap-highlight-color:transparent;
}
.brand-modal-v2__index span {
  min-width:40px; min-height:40px; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:var(--r-md); transition:all var(--ease-fast);
}
.brand-modal-v2__index span:active { background:var(--brand-primary-bg); color:var(--brand-primary); transform:scale(0.95); }
.brand-modal-v2__index span.active { color:var(--brand-primary); }
.brand-modal-v2__list-wrap {
  flex:1; min-width:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.brand-modal-v2__list { padding:0 var(--sp-4) var(--sp-8); }
.brand-modal-v2__group { padding:var(--sp-1) 0; }
.brand-modal-v2__group-title {
  position:sticky; top:0; z-index:1; padding:var(--sp-2) 0 var(--sp-1);
  font-size:var(--text-xs); font-weight:var(--weight-black); color:var(--brand-primary);
  background:linear-gradient(to bottom, white 60%, transparent); letter-spacing:.5px;
}
.brand-modal-v2__row {
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-3); margin:0 calc(-1 * var(--sp-3));
  border-radius:var(--r-lg); cursor:pointer; transition:all var(--ease-fast); -webkit-tap-highlight-color:transparent;
}
.brand-modal-v2__row:active { background:var(--gray-50); }
.brand-modal-v2__row.selected { background:var(--brand-primary-bg); }
.brand-modal-v2__row.selected .brand-modal-v2__row-icon { background:var(--brand-primary); color:white; }
.brand-modal-v2__row.selected .brand-modal-v2__row-name { color:var(--brand-primary-d); font-weight:var(--weight-bold); }
.brand-modal-v2__row-icon {
  flex-shrink:0; width:44px; height:44px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-weight:var(--weight-black); font-size:13px; color:var(--gray-600);
  background:var(--gray-100); letter-spacing:-0.3px;
}
.brand-modal-v2__row-name { font-size:var(--text-base); font-weight:var(--weight-medium); color:var(--gray-800); flex:1; }
.brand-modal-v2__row-check { color:var(--brand-primary); font-size:16px; flex-shrink:0; }
.brand-modal-v2__empty, .brand-modal-v2__loading, .brand-modal-v2__error {
  min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-3);
  padding:var(--sp-8); color:var(--gray-500); text-align:center;
}
.brand-modal-v2__empty i, .brand-modal-v2__loading i { font-size:40px; opacity:0.6; }
.brand-modal-v2__empty p, .brand-modal-v2__loading p, .brand-modal-v2__error p { font-size:var(--text-base); font-weight:var(--weight-semi); margin:0; color:var(--gray-600); }
.brand-modal-v2__empty span, .brand-modal-v2__loading span { font-size:var(--text-sm); color:var(--gray-400); }

/* ── 브랜드 모달 v3 (UX 개선: 퀵피크 + 수평 알파벳바) ── */
.brand-modal-v3 {
  display:flex; flex-direction:column; overflow:hidden; max-height:92vh; height: 92vh;
  padding:0; padding-bottom:var(--safe-bottom); background:var(--gray-50);
}
.brand-modal-v3 .sheet-handle { display:none; }
.brand-modal-v3__header {
  flex-shrink:0; position:relative; padding:var(--sp-5) var(--sp-4) var(--sp-4);
  background:linear-gradient(165deg, var(--brand-primary) 0%, var(--brand-primary-d) 100%);
  color:white;
}
.brand-modal-v3__title { font-size:var(--text-xl); font-weight:var(--weight-black); margin:0 0 4px; letter-spacing:-0.5px; }
.brand-modal-v3__sub { font-size:var(--text-sm); opacity:.9; margin:0; font-weight:var(--weight-regular); }
.brand-modal-v3__close {
  position:absolute; top:var(--sp-4); right:var(--sp-4);
  width:40px; height:40px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.9); background:rgba(255,255,255,.15); border:none; cursor:pointer;
  transition:background var(--ease-fast), transform var(--ease-fast);
}
.brand-modal-v3__close:active { background:rgba(255,255,255,.25); transform:scale(.95); }
.brand-modal-v3__quick {
  flex-shrink:0; padding:var(--sp-3) var(--sp-4); background:white; border-bottom:1px solid var(--gray-100);
}
.brand-modal-v3__quick-label { font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--gray-400); margin:0 0 var(--sp-2); letter-spacing:.5px; }
.brand-modal-v3__quick-scroll {
  display:flex; gap:var(--sp-2); overflow-x:auto; padding-bottom:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.brand-modal-v3__quick-scroll::-webkit-scrollbar { display:none; }
.brand-modal-v3__quick-chip {
  flex-shrink:0; display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-full); border:1.5px solid var(--gray-200); background:white; cursor:pointer;
  transition:all var(--ease-fast); -webkit-tap-highlight-color:transparent;
}
.brand-modal-v3__quick-chip:active { transform:scale(.97); }
.brand-modal-v3__quick-chip.selected { border-color:var(--brand-primary); background:var(--brand-primary-bg); }
.brand-modal-v3__quick-chip .chip-icon {
  width:32px; height:32px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-weight:var(--weight-black); font-size:11px; color:var(--gray-600);
  background:var(--gray-100); letter-spacing:-0.3px;
}
.brand-modal-v3__quick-chip.selected .chip-icon { background:var(--brand-primary); color:white; }
.brand-modal-v3__quick-chip .chip-name { font-size:var(--text-sm); font-weight:var(--weight-semi); color:var(--gray-800); white-space:nowrap; }
.brand-modal-v3__quick-chip.selected .chip-name { color:var(--brand-primary-d); }
.brand-modal-v3__search {
  flex-shrink:0; position:relative; display:flex; align-items:center;
  padding:var(--sp-4); background:white; border-bottom:1px solid var(--gray-100);
}
.brand-modal-v3__search > i:first-of-type {
  position:absolute; left:28px; top:50%; transform:translateY(-50%);
  color:var(--gray-400); font-size:18px; pointer-events:none; z-index:1;
}
.brand-modal-v3__search input {
  width:100%; height:52px; padding:0 52px 0 52px;
  background:var(--gray-50); border:1.5px solid var(--gray-200); border-radius:var(--r-xl);
  font-size:var(--text-base); color:var(--gray-900); transition:all var(--ease-fast);
}
.brand-modal-v3__search input::placeholder { color:var(--gray-400); }
.brand-modal-v3__search input:focus { outline:none; border-color:var(--brand-primary); background:white; box-shadow:0 0 0 3px var(--brand-primary-bg); }
.brand-modal-v3__search-clear {
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-500); background:var(--gray-200); font-size:14px;
  border:none; cursor:pointer; transition:all var(--ease-fast); z-index:1;
}
.brand-modal-v3__search-clear:active { background:var(--gray-300); }
.brand-modal-v3__alpha-bar {
  flex-shrink:0; display:flex; align-items:center; gap:6px; padding:var(--sp-2) var(--sp-4);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; background:white;
  border-bottom:1px solid var(--gray-100);
}
.brand-modal-v3__alpha-bar::-webkit-scrollbar { display:none; }
.brand-modal-v3__alpha-bar.hidden { display:none; }
.brand-modal-v3__alpha-btn {
  flex-shrink:0; min-width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:var(--weight-bold); color:var(--gray-500); background:var(--gray-100);
  border-radius:var(--r-lg); border:none; cursor:pointer; transition:all var(--ease-fast);
}
.brand-modal-v3__alpha-btn:active { background:var(--brand-primary-bg); color:var(--brand-primary); transform:scale(.95); }
.brand-modal-v3__list-wrap {
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:white; margin:0 var(--sp-4); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:0 -2px 12px rgba(0,0,0,.04);
}
.brand-modal-v3__list { padding:var(--sp-3) var(--sp-4) var(--sp-8); }
.brand-modal-v3__group { padding-bottom:var(--sp-2); }
.brand-modal-v3__group-title {
  position:sticky; top:0; z-index:1; padding:var(--sp-2) 0 var(--sp-2);
  font-size:12px; font-weight:var(--weight-black); color:var(--brand-primary); letter-spacing:1px;
  background:linear-gradient(to bottom, white 80%, transparent);
}
.brand-modal-v3__row {
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-3); margin:0 calc(-1 * var(--sp-3));
  border-radius:var(--r-xl); cursor:pointer; transition:all var(--ease-fast); -webkit-tap-highlight-color:transparent;
}
.brand-modal-v3__row:active { background:var(--gray-50); }
.brand-modal-v3__row.selected { background:var(--brand-primary-bg); }
.brand-modal-v3__row.selected .brand-modal-v3__row-icon { background:var(--brand-primary); color:white; }
.brand-modal-v3__row.selected .brand-modal-v3__row-name { color:var(--brand-primary-d); font-weight:var(--weight-bold); }
.brand-modal-v3__row-icon {
  flex-shrink:0; width:48px; height:48px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-weight:var(--weight-black); font-size:14px; color:var(--gray-600);
  background:var(--gray-100); letter-spacing:-0.3px;
}
.brand-modal-v3__row-name { font-size:var(--text-base); font-weight:var(--weight-medium); color:var(--gray-800); flex:1; }
.brand-modal-v3__row-check { color:var(--brand-primary); font-size:18px; flex-shrink:0; }
.brand-modal-v3__empty, .brand-modal-v3__loading, .brand-modal-v3__error {
  min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-3);
  padding:var(--sp-8); color:var(--gray-500); text-align:center; background:white;
  margin:0 var(--sp-4); border-radius:var(--r-xl); box-shadow:0 -2px 12px rgba(0,0,0,.04);
}
.brand-modal-v3__empty i, .brand-modal-v3__loading i { font-size:44px; opacity:0.5; color:var(--gray-300); }
.brand-modal-v3__empty p, .brand-modal-v3__loading p, .brand-modal-v3__error p { font-size:var(--text-base); font-weight:var(--weight-semi); margin:0; color:var(--gray-600); }
.brand-modal-v3__empty span, .brand-modal-v3__loading span { font-size:var(--text-sm); color:var(--gray-400); }

/* 사진 업로드: 5개/화면, 6개 시 가로 슬라이드 */
.photo-grid-wrap { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1 * var(--sp-4)); padding:0 var(--sp-4); }
.photo-grid-wrap::-webkit-scrollbar { display:none; }
.upload-page .photo-grid { display:flex; flex-wrap:nowrap; gap:var(--sp-2); grid-template-columns:unset; }
.upload-page .photo-preview,
.upload-page .photo-add-btn { flex:0 0 calc((100% - var(--sp-2) * 4) / 5); min-width:calc((100% - var(--sp-2) * 4) / 5); aspect-ratio:1/1; }
.upload-page .photo-add-btn.hidden { display:none; }
.photo-preview { border-radius:var(--r-lg); overflow:hidden; background:var(--gray-100); position:relative; flex-shrink:0; }
.photo-preview img { width:100%; height:100%; object-fit:cover; }
.photo-del-btn { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.5); color:white; display:flex; align-items:center; justify-content:center; font-size:10px; cursor:pointer; }

/* 업로드 로딩 오버레이 */
.upload-loading-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:300; display:flex; align-items:center; justify-content:center; }
.upload-loading-content { background:white; border-radius:var(--r-xl); padding:var(--sp-6); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); box-shadow:0 8px 32px rgba(0,0,0,.2); }
.upload-loading-content i { font-size:36px; color:var(--brand-primary); }
.upload-loading-content p { font-size:var(--text-base); font-weight:var(--weight-semi); color:var(--gray-800); margin:0; }
.upload-loading-content span { font-size:var(--text-sm); color:var(--gray-500); }
.submit-btn:disabled { opacity:0.7; cursor:not-allowed; }

/* ─────────────────────────────────────────────
   [my.html] 마이페이지 설정
   ───────────────────────────────────────────── */
.setting-group { margin-bottom:var(--sp-2); }
.setting-group-title { font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--gray-400); text-transform:uppercase; letter-spacing:.8px; padding:var(--sp-4) var(--sp-4) var(--sp-2); }
.setting-item { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4); background:white; border-bottom:1px solid var(--gray-100); cursor:pointer; transition:background var(--ease-fast); }
.setting-item:active { background:var(--gray-50); }
.setting-item__left { display:flex; align-items:center; gap:var(--sp-3); }
.setting-item__icon { width:36px; height:36px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:16px; }
.setting-item__label { font-size:var(--text-base); font-weight:var(--weight-medium); color:var(--gray-900); }
.setting-item__right { display:flex; align-items:center; gap:var(--sp-2); color:var(--gray-400); font-size:var(--text-sm); }
.setting-item__right i { font-size:14px; }
.toggle-wrap { position:relative; width:46px; height:26px; }
.toggle-wrap input { display:none; }
.toggle-track { width:100%; height:100%; background:var(--gray-300); border-radius:var(--r-full); transition:background var(--ease-fast); cursor:pointer; }
.toggle-wrap input:checked + .toggle-track { background:var(--brand-primary); }
.toggle-thumb { position:absolute; top:3px; left:3px; width:20px; height:20px; background:white; border-radius:50%; box-shadow:var(--sh-sm); transition:transform var(--ease-spring); pointer-events:none; }
.toggle-wrap input:checked ~ .toggle-thumb { transform:translateX(20px); }

/* ─────────────────────────────────────────────
   [community.html / guide.html] 공통 내부 탭
   ───────────────────────────────────────────── */
.inner-tab-bar { display:flex; background:white; border-bottom:1px solid var(--gray-100); position:sticky; top:var(--header-h); z-index:50; }
.inner-tab { flex:1; height:44px; display:flex; align-items:center; justify-content:center; font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--gray-500); cursor:pointer; border-bottom:2px solid transparent; transition:all var(--ease-fast); }
.inner-tab.active { color:var(--brand-primary); border-color:var(--brand-primary); font-weight:var(--weight-bold); }

/* ─────────────────────────────────────────────
   [detail.html] 판별 상세 / 댓글
   ───────────────────────────────────────────── */
/* 이미지 슬라이드 */
.detail-slider-wrap {
  overflow: hidden;
  position: relative;
}
.detail-slider-track {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.detail-slider-track:active {
  cursor: grabbing;
}
.detail-slider-track::-webkit-scrollbar { display: none; }
.detail-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); position: relative;
}
.detail-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.detail-slide.detail-image-placeholder {
  flex-direction: column; gap: var(--sp-2);
  background: linear-gradient(135deg, var(--brand-primary-bg) 0%, var(--gray-100) 100%);
}
.detail-slide.detail-image-placeholder i { font-size: 48px; color: var(--brand-primary-soft); }
.detail-slide.detail-image-placeholder span { font-family: var(--font-en); font-weight: var(--weight-black); font-size: var(--text-2xl); color: var(--gray-300); }
.ai-desc { white-space: pre-line; }
.detail-extra-section {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
  padding: var(--sp-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-xl);
}
.detail-extra-content {
  font-size: var(--text-sm);
  color: var(--gray-700);
  line-height: 1.7;
  white-space: pre-line;
}

.comment-item { display:flex; gap:var(--sp-3); padding:var(--sp-4); border-bottom:1px solid var(--gray-100); }
.comment-body { font-size:var(--text-sm); color:var(--gray-800); line-height:1.55; margin-bottom:var(--sp-2); }
.comment-meta { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--text-xs); color:var(--gray-400); }
.comment-item-header { flex-wrap: wrap; }
.comment-delete-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 6px 8px;
  min-width: 32px;
  min-height: 32px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color 0.2s, background 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.comment-delete-btn:hover { color: var(--status-fake); background: var(--gray-100); }
.comment-delete-btn:active { background: var(--gray-200); }
.comment-input-bar {
  position:fixed;
  bottom:calc(var(--bottom-nav-h) + var(--safe-bottom));
  left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--app-max-w);
  padding:var(--sp-3) var(--sp-4);
  background:white; border-top:1px solid var(--gray-100);
  display:flex; align-items:center; gap:var(--sp-2); z-index:50;
}
.comment-input-bar input { flex:1; height:40px; padding:0 var(--sp-3); background:var(--gray-100); border-radius:var(--r-full); font-size:var(--text-sm); color:var(--gray-900); }
.comment-send-btn { width:40px; height:40px; border-radius:var(--r-full); background:var(--brand-primary); color:white; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }

/* ─────────────────────────────────────────────
   [notifications.html] 알림 목록
   ───────────────────────────────────────────── */
.notif-item { display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-4); border-bottom:1px solid var(--gray-100); cursor:pointer; transition:background var(--ease-fast); }
.notif-item:active { background:var(--gray-50); }
.notif-item.unread { background:var(--brand-primary-bg); }
.notif-icon { width:42px; height:42px; border-radius:var(--r-full); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
.notif-icon.real { background:var(--status-real-bg); color:var(--status-real); }
.notif-icon.fake { background:var(--status-fake-bg); color:var(--status-fake); }
.notif-icon.info { background:var(--brand-primary-bg); color:var(--brand-primary); }
.notif-title { font-size:var(--text-sm); font-weight:var(--weight-semi); color:var(--gray-900); margin-bottom:2px; }
.notif-body  { font-size:var(--text-xs); color:var(--gray-500); line-height:1.5; margin-bottom:4px; }
.notif-time  { font-size:var(--text-xs); color:var(--gray-400); }

/* ─────────────────────────────────────────────
   [my-requests.html] 내 판별 요청 목록
   ───────────────────────────────────────────── */
.status-filter-bar {
  display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  overflow-x: auto; scrollbar-width: none; background: white;
  border-bottom: 1px solid var(--gray-100);
}
.status-filter-bar::-webkit-scrollbar { display: none; }
.my-req-item {
  display: flex; gap: var(--sp-3); padding: var(--sp-4);
  background: white; border-bottom: 1px solid var(--gray-100);
  cursor: pointer; transition: background var(--ease-fast);
}
.my-req-item:active { background: var(--gray-50); }
.my-req-thumb {
  width: 72px; height: 72px; border-radius: var(--r-lg);
  background: var(--brand-primary-bg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.my-req-thumb-abbr {
  font-family: var(--font-en); font-size: 18px; font-weight: 900;
  color: var(--brand-primary-soft);
}
.my-req-content { flex: 1; min-width: 0; }
.my-req-brand { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--gray-400); letter-spacing: .5px; margin-bottom: 2px; }
.my-req-name { font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--sp-2); }
.my-req-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.my-req-stat { font-size: var(--text-xs); color: var(--gray-500); display: flex; align-items: center; gap: 3px; }
.my-req-action-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.my-req-btn {
  height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-full);
  font-size: 11px; font-weight: var(--weight-bold);
  border: 1.5px solid var(--gray-200); color: var(--gray-600);
  background: white; cursor: pointer; transition: all var(--ease-fast);
  display: flex; align-items: center; gap: 4px;
}
.my-req-btn:active { background: var(--gray-50); }
.my-req-btn.delete { border-color: #FED7D7; color: var(--status-fake); }
.my-req-btn.delete:active { background: #FFF5F5; }
.stats-summary {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3);
  padding: var(--sp-4); background: white; border-bottom: 1px solid var(--gray-100);
}
.stat-card {
  background: var(--gray-50); border-radius: var(--r-lg);
  padding: var(--sp-3); text-align: center;
}
.stat-card__num { font-size: var(--text-xl); font-weight: 900; color: var(--brand-primary); display: block; }
.stat-card__label { font-size: 10px; color: var(--gray-500); margin-top: 2px; }

/* ─────────────────────────────────────────────
   [my-votes.html] 내 투표 내역
   ───────────────────────────────────────────── */
.vote-hist-item { display:flex;gap:var(--sp-3);padding:var(--sp-4);background:white;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background var(--ease-fast); }
.vote-hist-item:active { background:var(--gray-50); }
.vote-hist-thumb { width:64px;height:64px;border-radius:var(--r-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-size:16px;font-weight:900; }
.vote-hist-content { flex:1;min-width:0; }
.vote-hist-brand { font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--gray-400);margin-bottom:2px; }
.vote-hist-name { font-size:var(--text-base);font-weight:var(--weight-semi);color:var(--gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:var(--sp-2); }
.vote-hist-meta { display:flex;align-items:center;gap:var(--sp-2); }
.my-vote-badge { height:24px;padding:0 var(--sp-3);border-radius:var(--r-full);font-size:11px;font-weight:var(--weight-bold);display:flex;align-items:center;gap:4px; }
.my-vote-badge.voted-real { background:var(--status-real-bg);color:var(--status-real); }
.my-vote-badge.voted-fake { background:var(--status-fake-bg);color:var(--status-fake); }
.stats-bar { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);padding:var(--sp-4);background:white;border-bottom:1px solid var(--gray-100); }
.stat-mini { background:var(--gray-50);border-radius:var(--r-lg);padding:var(--sp-3);text-align:center; }
.stat-mini__num { font-size:var(--text-xl);font-weight:900;color:var(--brand-primary);display:block; }
.stat-mini__label { font-size:10px;color:var(--gray-500); }
.accuracy-card { margin:var(--sp-4);background:white;border:1.5px solid var(--gray-100);border-radius:var(--r-xl);padding:var(--sp-4); }
.acc-title { font-size:var(--text-sm);font-weight:var(--weight-black);color:var(--gray-700);margin-bottom:var(--sp-3); }
.acc-bar-wrap { display:flex;align-items:center;gap:var(--sp-3); }
.acc-bar { flex:1;height:12px;background:var(--gray-100);border-radius:var(--r-full);overflow:hidden; }
.acc-bar-fill { height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--brand-primary),var(--brand-accent));transition:width .6s cubic-bezier(.34,1.56,.64,1); }
.acc-pct { font-size:var(--text-lg);font-weight:900;color:var(--brand-primary);min-width:44px;text-align:right; }

/* ─────────────────────────────────────────────
   [saved.html] 저장된 항목
   ───────────────────────────────────────────── */
.saved-grid { display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);padding:var(--sp-4); }
.saved-card { background:white;border-radius:var(--r-xl);border:1.5px solid var(--gray-100);overflow:hidden;cursor:pointer;transition:all var(--ease-fast);position:relative; }
.saved-card:active { transform:scale(.97); }
.saved-card__thumb { aspect-ratio:1/1;background:var(--brand-primary-bg);display:flex;align-items:center;justify-content:center;position:relative; }
.saved-card__abbr { font-family:var(--font-en);font-size:28px;font-weight:900;color:var(--brand-primary-soft); }
.saved-card__remove { position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.45);color:white;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;z-index:2; }
.saved-card__body { padding:var(--sp-3); }
.saved-card__brand { font-size:10px;font-weight:var(--weight-black);color:var(--gray-400);letter-spacing:.5px;margin-bottom:2px; }
.saved-card__name { font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--gray-900);line-height:1.35;margin-bottom:var(--sp-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.saved-card__meta { display:flex;align-items:center;justify-content:space-between; }
.saved-tabs { display:flex;background:white;border-bottom:1px solid var(--gray-100); }
.saved-tab { flex:1;height:44px;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--gray-500);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--ease-fast); }
.saved-tab.active { color:var(--brand-primary);border-color:var(--brand-primary);font-weight:var(--weight-bold); }
.saved-count-badge { display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--brand-primary);color:white;font-size:10px;font-weight:700;margin-left:4px; }

/* ─────────────────────────────────────────────
   [guide-detail.html] 가이드 상세
   ───────────────────────────────────────────── */
.gd-cover { height:220px;position:relative;display:flex;align-items:flex-end;padding:var(--sp-5);overflow:hidden; }
.gd-cover-abbr { position:absolute;right:-10px;bottom:-20px;font-family:var(--font-en);font-size:120px;font-weight:900;opacity:.08;line-height:1; }
.gd-cover-content { position:relative;z-index:1; }
.gd-cover-badge { display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border-radius:var(--r-full);padding:4px 12px;font-size:var(--text-xs);font-weight:var(--weight-bold);color:white;margin-bottom:var(--sp-2); }
.gd-cover-title { font-size:var(--text-xl);font-weight:900;color:white;line-height:1.3; }
.gd-meta-bar { display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-4) 0;border-bottom:1px solid var(--gray-100);padding-bottom:var(--sp-4); }
.gd-meta-item { display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:var(--gray-500); }
.gd-meta-item i { font-size:14px;color:var(--brand-primary); }
.gd-point-box { background:var(--brand-primary-bg);border-radius:var(--r-xl);padding:var(--sp-4);margin:var(--sp-4); }
.gd-point-title { font-size:var(--text-sm);font-weight:var(--weight-black);color:var(--brand-primary);margin-bottom:var(--sp-3); }
.gd-point-item { display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-3); }
.gd-point-item:last-child { margin-bottom:0; }
.gd-point-num { width:22px;height:22px;border-radius:50%;background:var(--brand-primary);color:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0;margin-top:1px; }
.gd-point-text { font-size:var(--text-sm);color:var(--gray-700);line-height:1.6; }
.gd-section { padding:0 var(--sp-4) var(--sp-4); }
.gd-section-title { font-size:var(--text-base);font-weight:var(--weight-black);color:var(--gray-900);margin-bottom:var(--sp-3);padding-top:var(--sp-4); }
.checkpoint-card { background:white;border:1.5px solid var(--gray-100);border-radius:var(--r-xl);padding:var(--sp-4);margin-bottom:var(--sp-3); }
.checkpoint-num { font-family:var(--font-en);font-size:var(--text-xs);font-weight:900;color:var(--brand-primary);margin-bottom:var(--sp-1); }
.checkpoint-title { font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--gray-900);margin-bottom:var(--sp-2); }
.checkpoint-desc { font-size:var(--text-sm);color:var(--gray-600);line-height:1.6; }
.checkpoint-tip { background:var(--brand-primary-bg);border-radius:var(--r-lg);padding:var(--sp-3);margin-top:var(--sp-3); }
.checkpoint-tip-text { font-size:var(--text-xs);color:var(--brand-primary);line-height:1.5; }
.gd-gallery { display:grid;grid-template-columns:1fr;gap:var(--sp-3); }
.gd-gallery__item { display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--gray-100);background:var(--gray-50); }
.gd-gallery__item img { display:block;width:100%;height:auto; }
.gd-image-modal { position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;padding:var(--sp-4); }
.gd-image-modal img { max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; }
.gd-image-modal__close { position:absolute;top:calc(var(--safe-top) + 10px);right:12px;width:40px;height:40px;border-radius:999px;border:none;background:rgba(255,255,255,.18);color:white;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.gd-fab { position:fixed;bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--sp-4));right:var(--sp-4);display:flex;align-items:center;gap:var(--sp-2);height:48px;padding:0 var(--sp-5);border-radius:var(--r-full);background:linear-gradient(135deg,#7C3AED,#4F46E5);color:white;font-size:var(--text-sm);font-weight:var(--weight-bold);border:none;cursor:pointer;box-shadow:0 4px 16px rgba(124,58,237,.35);transition:all var(--ease-fast); }
.gd-fab:active { transform:scale(.95); }

/* ─────────────────────────────────────────────
   [find-account.html] 아이디·비밀번호 찾기
   ───────────────────────────────────────────── */
.find-tab-bar {
  display: flex; background: white; border-bottom: 1px solid var(--gray-100);
}
.find-tab {
  flex: 1; height: 48px; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: var(--weight-medium);
  color: var(--gray-500); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all var(--ease-fast);
}
.find-tab.active { color: var(--brand-primary); border-color: var(--brand-primary); font-weight: var(--weight-bold); }
.find-body { padding: var(--sp-6) var(--sp-4); }
.find-input-group { margin-bottom: var(--sp-4); }
.find-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--gray-700); margin-bottom: var(--sp-2); }
.find-input-row { display: flex; gap: var(--sp-2); }
.find-input {
  flex: 1; height: 52px; padding: 0 var(--sp-4);
  border: 1.5px solid var(--gray-200); border-radius: var(--r-xl);
  font-size: var(--text-base); color: var(--gray-900); background: white;
  transition: border-color var(--ease-fast); box-sizing: border-box;
}
.find-input:focus { outline: none; border-color: var(--brand-primary); }
.find-send-btn {
  height: 52px; padding: 0 var(--sp-4); border-radius: var(--r-xl);
  background: var(--brand-primary); color: white;
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  border: none; cursor: pointer; white-space: nowrap; transition: all var(--ease-fast);
}
.find-send-btn:active { opacity: .85; }
.find-result-card {
  background: var(--brand-primary-bg); border: 1.5px solid var(--brand-primary-soft);
  border-radius: var(--r-xl); padding: var(--sp-5); margin-top: var(--sp-5);
  display: none;
}
.find-result-card.show { display: block; }
.find-result-icon { font-size: 32px; margin-bottom: var(--sp-3); }
.find-result-title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--gray-900); margin-bottom: var(--sp-2); }
.find-result-id {
  font-family: var(--font-en); font-size: var(--text-xl); font-weight: 900;
  color: var(--brand-primary); letter-spacing: -0.5px;
}
.find-result-sub { font-size: var(--text-sm); color: var(--gray-500); margin-top: var(--sp-2); }
.find-main-btn {
  width: 100%; height: 52px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #7C3AED, #4F46E5);
  color: white; font-size: var(--text-base); font-weight: var(--weight-bold);
  border: none; cursor: pointer; margin-top: var(--sp-4);
  transition: all var(--ease-fast); display: flex;
  align-items: center; justify-content: center; gap: var(--sp-2);
}
.find-main-btn:active { transform: scale(.98); }
.find-divider { height: 1px; background: var(--gray-100); margin: var(--sp-6) 0; }
.verify-code-wrap {
  display: none; margin-top: var(--sp-3);
}
.verify-code-wrap.show { display: flex; gap: var(--sp-2); }
.verify-code-input {
  flex: 1; height: 52px; padding: 0 var(--sp-4);
  border: 1.5px solid var(--brand-primary); border-radius: var(--r-xl);
  font-size: var(--text-lg); font-weight: var(--weight-black);
  text-align: center; letter-spacing: 8px; color: var(--brand-primary);
  background: white; box-sizing: border-box;
}
.verify-code-input:focus { outline: none; }
.verify-confirm-btn {
  height: 52px; padding: 0 var(--sp-4); border-radius: var(--r-xl);
  background: var(--brand-primary); color: white;
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  border: none; cursor: pointer; white-space: nowrap;
}
.new-pw-wrap { display: none; margin-top: var(--sp-4); }
.new-pw-wrap.show { display: block; }

/* ─────────────────────────────────────────────
   [register.html] 회원가입
   ───────────────────────────────────────────── */
.reg-body { padding: var(--sp-5) var(--sp-4); padding-bottom: 120px; }
.step-bar {
  display: flex; align-items: center; gap: 0;
  margin-bottom: var(--sp-6);
}
.step-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-1); position: relative;
}
.step-item:not(:last-child)::after {
  content: ''; position: absolute; top: 14px; left: 50%; width: 100%;
  height: 2px; background: var(--gray-200); z-index: 0;
}
.step-item.done::after { background: var(--brand-primary); }
.step-circle {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--weight-black);
  background: var(--gray-200); color: var(--gray-500);
  position: relative; z-index: 1; transition: all var(--ease-fast);
}
.step-item.active .step-circle { background: var(--brand-primary); color: white; }
.step-item.done .step-circle { background: var(--brand-primary); color: white; }
.step-label { font-size: 10px; font-weight: var(--weight-medium); color: var(--gray-400); }
.step-item.active .step-label { color: var(--brand-primary); font-weight: var(--weight-bold); }
.form-field { margin-bottom: var(--sp-5); }
.form-field-label {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.form-field-label span { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--gray-700); }
.form-field-label .req { color: var(--brand-primary); margin-left: 2px; }
.field-input-row { display: flex; gap: var(--sp-2); }
.field-input {
  flex: 1; height: 50px; padding: 0 var(--sp-4);
  border: 1.5px solid var(--gray-200); border-radius: var(--r-xl);
  font-size: var(--text-base); color: var(--gray-900); background: white;
  transition: border-color var(--ease-fast); box-sizing: border-box;
}
.field-input:focus { outline: none; border-color: var(--brand-primary); }
.field-input.error { border-color: var(--status-fake); }
.field-input.success { border-color: var(--status-real); }
.field-check-btn {
  height: 50px; padding: 0 var(--sp-4); border-radius: var(--r-xl);
  background: var(--brand-primary); color: white; font-size: var(--text-sm);
  font-weight: var(--weight-bold); border: none; cursor: pointer;
  white-space: nowrap; transition: all var(--ease-fast); flex-shrink: 0;
}
.field-check-btn:active { opacity: .85; }
.field-hint {
  font-size: var(--text-xs); margin-top: var(--sp-1);
  display: flex; align-items: center; gap: 4px;
}
.field-hint.info { color: var(--gray-400); }
.field-hint.ok { color: var(--status-real); }
.field-hint.fail { color: var(--status-fake); }
.pw-strength-bar {
  height: 4px; border-radius: 2px; background: var(--gray-100);
  margin-top: var(--sp-2); overflow: hidden;
}
.pw-strength-fill { height: 100%; border-radius: 2px; transition: all .3s; }
.terms-box {
  background: white; border-radius: var(--r-xl);
  border: 1.5px solid var(--gray-200); overflow: hidden;
}
.terms-all-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4); border-bottom: 1px solid var(--gray-100);
}
.terms-item-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
}
.terms-item-row:not(:last-child) { border-bottom: 1px solid var(--gray-100); }
.terms-check-label {
  display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; flex: 1;
}
.terms-check-label input[type=checkbox] { display: none; }
.terms-check-box {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--gray-300);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--ease-fast); flex-shrink: 0;
}
.terms-check-label input:checked + .terms-check-box {
  background: var(--brand-primary); border-color: var(--brand-primary);
}
.terms-check-label input:checked + .terms-check-box::after {
  content: ''; width: 5px; height: 9px;
  border: 2px solid white; border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
}
.terms-label-text { font-size: var(--text-sm); color: var(--gray-700); font-weight: var(--weight-medium); }
.terms-label-req { color: var(--status-fake); font-size: var(--text-xs); margin-left: 4px; }
.terms-label-opt { color: var(--gray-400); font-size: var(--text-xs); margin-left: 4px; }
.terms-detail-btn {
  font-size: var(--text-xs); color: var(--gray-400);
  text-decoration: underline; cursor: pointer; flex-shrink: 0; margin-left: var(--sp-2);
}
.terms-all-text { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--gray-900); }
.reg-submit-area {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--app-max-w);
  padding: var(--sp-4); background: white;
  border-top: 1px solid var(--gray-100);
  box-sizing: border-box;
}
.reg-submit-btn {
  width: 100%; height: 52px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #7C3AED, #4F46E5);
  color: white; font-size: var(--text-base); font-weight: var(--weight-bold);
  border: none; cursor: pointer; transition: all var(--ease-fast);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.reg-submit-btn:active { transform: scale(.98); }
.reg-submit-btn:disabled { background: var(--gray-300); cursor: not-allowed; }

/* ─────────────────────────────────────────────
   [edit-profile.html] 프로필 수정
   ───────────────────────────────────────────── */
.ep-save-btn {
  font-size: var(--text-sm); font-weight: var(--weight-black);
  color: var(--brand-primary); background: none; border: none; cursor: pointer;
}
.ep-body { padding: 0 var(--sp-4) 120px; }
.ep-avatar-section {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-6) 0 var(--sp-5);
}
.ep-avatar-wrap { position: relative; cursor: pointer; }
.ep-avatar {
  width: 88px; height: 88px; border-radius: 100%;
  background: linear-gradient(135deg, var(--brand-primary-bg), var(--brand-primary-soft));
  color: var(--brand-primary-d);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ep-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ep-avatar-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold); font-size: var(--text-2xl);
}
.ep-avatar-edit-btn {
  position: absolute; bottom: -4px; right: -4px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; border: 2px solid white;
}
.ep-avatar-hint { font-size: var(--text-xs); color: var(--gray-400); margin-top: var(--sp-3); }
.ep-section-title {
  font-size: var(--text-xs); font-weight: var(--weight-black);
  color: var(--gray-400); text-transform: uppercase; letter-spacing: .8px;
  padding: var(--sp-4) 0 var(--sp-2);
}
.ep-field { margin-bottom: var(--sp-4); }
.ep-label { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--gray-700); margin-bottom: var(--sp-2); display: block; }
.ep-input {
  width: 100%; height: 52px; padding: 0 var(--sp-4);
  border: 1.5px solid var(--gray-200); border-radius: var(--r-xl);
  font-size: var(--text-base); color: var(--gray-900); background: white;
  transition: border-color var(--ease-fast); box-sizing: border-box;
}
.ep-input:focus { outline: none; border-color: var(--brand-primary); }
.ep-input:disabled { background: var(--gray-50); color: var(--gray-400); }
.ep-input-row { display: flex; gap: var(--sp-2); }
.ep-check-btn {
  height: 52px; padding: 0 var(--sp-4); border-radius: var(--r-xl);
  background: var(--brand-primary); color: white;
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.ep-textarea {
  width: 100%; padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--gray-200); border-radius: var(--r-xl);
  font-size: var(--text-base); color: var(--gray-900); background: white;
  transition: border-color var(--ease-fast); box-sizing: border-box;
  resize: none; font-family: var(--font-ko);
}
.ep-textarea:focus { outline: none; border-color: var(--brand-primary); }
.ep-char-count { text-align: right; font-size: var(--text-xs); color: var(--gray-400); margin-top: 4px; }
.pw-change-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4); background: white;
  border: 1.5px solid var(--gray-200); border-radius: var(--r-xl);
  cursor: pointer; transition: all var(--ease-fast); margin-bottom: var(--sp-4);
}
.pw-change-toggle:active { background: var(--gray-50); }
.pw-change-section { display: none; }
.pw-change-section.open { display: block; }
.danger-zone {
  margin-top: var(--sp-6); padding: var(--sp-4);
  background: #FFF5F5; border: 1.5px solid #FED7D7;
  border-radius: var(--r-xl);
}
.danger-zone-title { font-size: var(--text-sm); font-weight: var(--weight-black); color: var(--status-fake); margin-bottom: var(--sp-3); }
.danger-btn {
  width: 100%; height: 44px; border-radius: var(--r-xl);
  background: white; border: 1.5px solid var(--status-fake);
  color: var(--status-fake); font-size: var(--text-sm);
  font-weight: var(--weight-bold); cursor: pointer; transition: all var(--ease-fast);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.danger-btn:active { background: #FFF5F5; }
.ep-bottom-area {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--app-max-w);
  padding: var(--sp-4); background: white;
  border-top: 1px solid var(--gray-100); box-sizing: border-box;
}
.ep-submit-btn {
  width: 100%; height: 52px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #7C3AED, #4F46E5);
  color: white; font-size: var(--text-base); font-weight: var(--weight-bold);
  border: none; cursor: pointer; transition: all var(--ease-fast);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.ep-submit-btn:active { transform: scale(.98); }

/* ─────────────────────────────────────────────
   [report.html] 신고하기
   ───────────────────────────────────────────── */
.rp-body { padding:var(--sp-5) var(--sp-4);padding-bottom:120px; }
.report-target-card { background:var(--gray-50);border-radius:var(--r-xl);padding:var(--sp-4);margin-bottom:var(--sp-5);display:flex;align-items:center;gap:var(--sp-3); }
.report-target-icon { width:48px;height:48px;border-radius:var(--r-lg);background:var(--status-fake-bg);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.report-target-brand { font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--gray-400);margin-bottom:2px; }
.report-target-name { font-size:var(--text-base);font-weight:var(--weight-semi);color:var(--gray-900); }
.report-type-grid { display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-bottom:var(--sp-5); }
.report-type-card { padding:var(--sp-3) var(--sp-3);border-radius:var(--r-xl);border:1.5px solid var(--gray-200);background:white;cursor:pointer;transition:all var(--ease-fast);text-align:center; }
.report-type-card.selected { border-color:var(--status-fake);background:#FFF5F5; }
.report-type-card:active { transform:scale(.97); }
.report-type-icon { font-size:22px;margin-bottom:var(--sp-1); }
.report-type-label { font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--gray-700); }
.report-type-card.selected .report-type-label { color:var(--status-fake); }
.report-textarea { width:100%;padding:var(--sp-3) var(--sp-4);height:120px;border:1.5px solid var(--gray-200);border-radius:var(--r-xl);font-size:var(--text-sm);color:var(--gray-900);background:white;resize:none;box-sizing:border-box;font-family:var(--font-ko);line-height:1.6;transition:border-color var(--ease-fast); }
.report-textarea:focus { outline:none;border-color:var(--status-fake); }
.report-notice { background:#FFF5F5;border:1.5px solid #FED7D7;border-radius:var(--r-xl);padding:var(--sp-4);margin-bottom:var(--sp-5); }
.report-notice-title { font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--status-fake);margin-bottom:var(--sp-2); }
.report-notice-list { padding-left:var(--sp-4); }
.report-notice-list li { font-size:var(--text-xs);color:var(--gray-600);line-height:1.7;margin-bottom:2px; }
.report-submit-area { position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--app-max-w);padding:var(--sp-4);background:white;border-top:1px solid var(--gray-100);box-sizing:border-box; }
.report-submit-btn { width:100%;height:52px;border-radius:var(--r-xl);background:var(--status-fake);color:white;font-size:var(--text-base);font-weight:var(--weight-bold);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);transition:all var(--ease-fast); }
.report-submit-btn:active { transform:scale(.98);opacity:.9; }
.report-label { font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--gray-700);margin-bottom:var(--sp-3);display:block; }

/* ─────────────────────────────────────────────
   [notice.html] 공지사항
   ───────────────────────────────────────────── */
.notice-item { background:white;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background var(--ease-fast);overflow:hidden; }
.notice-item:active { background:var(--gray-50); }
.notice-item-header { display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4); }
.notice-badge { height:20px;padding:0 var(--sp-2);border-radius:var(--r-full);font-size:10px;font-weight:var(--weight-black);display:flex;align-items:center;flex-shrink:0; }
.notice-badge.new { background:var(--status-fake-bg);color:var(--status-fake); }
.notice-badge.update { background:var(--brand-primary-bg);color:var(--brand-primary); }
.notice-badge.info { background:var(--gray-100);color:var(--gray-500); }
.notice-badge.event { background:#FFF7ED;color:var(--brand-accent); }
.notice-badge.notice { background:var(--status-fake-bg);color:var(--status-fake); }
.notice-title { font-size:var(--text-base);font-weight:var(--weight-semi);color:var(--gray-900);flex:1;line-height:1.4; }
.notice-meta { display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2); }
.notice-date { font-size:var(--text-xs);color:var(--gray-400); }
.notice-views { font-size:var(--text-xs);color:var(--gray-400);display:flex;align-items:center;gap:3px; }
.notice-detail { max-height:0;overflow:hidden;transition:max-height .4s ease;background:var(--gray-50); }
/* 본문이 길어도 페이지 스크롤로 끝까지 읽을 수 있도록 상한을 크게 둠 (600px 고정 시 하단 잘림) */
.notice-item.open .notice-detail { max-height:min(32000px,500vh);overflow:visible; }
.notice-detail-body { padding:var(--sp-4);border-top:1px solid var(--gray-100); }
.notice-detail-text { font-size:var(--text-sm);color:var(--gray-700);line-height:1.8;white-space:pre-line;word-break:break-word; }
.notice-detail-html { font-size:var(--text-sm);color:var(--gray-700);line-height:1.75;word-break:break-word; }
.notice-detail-html p { margin:0 0 var(--sp-2); }
.notice-detail-html p:last-child { margin-bottom:0; }
.notice-detail-html img { max-width:100%;height:auto;border-radius:var(--r-lg);margin:var(--sp-2) 0; }
.notice-detail-html a { color:var(--brand-primary);text-decoration:underline; }
.notice-detail-html ul,.notice-detail-html ol { margin:var(--sp-2) 0;padding-left:var(--sp-5); }
.notice-detail-html h1,.notice-detail-html h2,.notice-detail-html h3 { font-size:var(--text-base);font-weight:var(--weight-bold);margin:var(--sp-3) 0 var(--sp-2); }
.notice-detail-html blockquote { margin:var(--sp-2) 0;padding-left:var(--sp-3);border-left:3px solid var(--gray-200);color:var(--gray-600); }
.notice-chevron { font-size:14px;color:var(--gray-300);transition:transform var(--ease-fast);flex-shrink:0;margin-top:2px; }
.notice-item.open .notice-chevron { transform:rotate(180deg);color:var(--brand-primary); }
.notice-pinned { background:var(--brand-primary-bg); }
.notice-pinned .notice-title { color:var(--brand-primary-d); }
.notice-filter { display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);overflow-x:auto;scrollbar-width:none;background:white;border-bottom:1px solid var(--gray-100); }
.notice-filter::-webkit-scrollbar { display:none; }

/* ─────────────────────────────────────────────
   [support.html] 고객센터
   ───────────────────────────────────────────── */
.faq-item {
  background: white; border-bottom: 1px solid var(--gray-100);
  overflow: hidden; transition: all var(--ease-fast);
}
.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4); cursor: pointer; gap: var(--sp-3);
}
.faq-question:active { background: var(--gray-50); }
.faq-q-text { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--gray-900); flex: 1; }
.faq-icon { font-size: 14px; color: var(--gray-400); transition: transform var(--ease-fast); flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(180deg); color: var(--brand-primary); }
.faq-item.open .faq-q-text { color: var(--brand-primary); font-weight: var(--weight-bold); }
.faq-answer {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  padding: 0 var(--sp-4);
}
.faq-item.open .faq-answer { max-height: 300px; padding-bottom: var(--sp-4); }
.faq-answer-text { font-size: var(--text-sm); color: var(--gray-600); line-height: 1.7; }
.inquiry-form {
  padding: var(--sp-4); background: white;
  border-radius: var(--r-xl); margin: 0 var(--sp-4) var(--sp-4);
  /* border: 1.5px solid var(--gray-100); */
}
.inq-select {
  width: 100%; height: 50px; padding: 0 var(--sp-4);
  border: 1.5px solid var(--gray-200); border-radius: var(--r-xl);
  font-size: var(--text-base); color: var(--gray-900); background: white;
  margin-bottom: var(--sp-3); appearance: none; cursor: pointer;
}
.inq-input {
  width: 100%; height: 50px; padding: 0 var(--sp-4);
  border: 1.5px solid var(--gray-200); border-radius: var(--r-xl);
  font-size: var(--text-base); color: var(--gray-900); background: white;
  margin-bottom: var(--sp-3); box-sizing: border-box;
}
.inq-input:focus, .inq-select:focus { outline: none; border-color: var(--brand-primary); }
.inq-textarea {
  width: 100%; padding: var(--sp-3) var(--sp-4); height: 140px;
  border: 1.5px solid var(--gray-200); border-radius: var(--r-xl);
  font-size: var(--text-base); color: var(--gray-900); background: white;
  margin-bottom: var(--sp-3); box-sizing: border-box; resize: none;
  font-family: var(--font-ko); line-height: 1.6;
}
.inq-textarea:focus { outline: none; border-color: var(--brand-primary); }
.inq-submit {
  width: 100%; height: 52px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #7C3AED, #4F46E5);
  color: white; font-size: var(--text-base); font-weight: var(--weight-bold);
  border: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: var(--sp-2); transition: all var(--ease-fast);
}
.inq-submit:active { transform: scale(.98); }
.channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-4); }
.channel-card {
  background: white; border: 1.5px solid var(--gray-100);
  border-radius: var(--r-xl); padding: var(--sp-4);
  cursor: pointer; transition: all var(--ease-fast); text-align: center;
}
.channel-card:active { transform: scale(.97); background: var(--gray-50); }
.channel-card__icon { font-size: 28px; margin-bottom: var(--sp-2); }
.channel-card__title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--gray-900); }
.channel-card__sub { font-size: 10px; color: var(--gray-400); margin-top: 3px; }
.sp-section { padding: var(--sp-5) var(--sp-4) var(--sp-3); }
.sp-section-title { font-size: var(--text-base); font-weight: var(--weight-black); color: var(--gray-900); }
.sp-section-sub { font-size: var(--text-sm); color: var(--gray-500); margin-top: 3px; }
.faq-cat-badge {
  font-size: 10px; font-weight: var(--weight-bold); padding: 2px 7px;
  border-radius: var(--r-full); margin-right: var(--sp-2); flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   [terms.html / privacy.html] 약관·정책 문서
   ───────────────────────────────────────────── */
.doc-body { padding:var(--sp-5) var(--sp-4);padding-bottom:40px; }
.doc-updated { font-size:var(--text-xs);color:var(--gray-400);margin-bottom:var(--sp-5); }
.doc-chapter { margin-bottom:var(--sp-6); }
.doc-chapter-title { font-size:var(--text-base);font-weight:var(--weight-black);color:var(--gray-900);margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:2px solid var(--brand-primary-soft); }
.doc-article { margin-bottom:var(--sp-4); }
.doc-article-title { font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--gray-800);margin-bottom:var(--sp-2); }
.doc-text { font-size:var(--text-sm);color:var(--gray-600);line-height:1.8; }
.doc-list { padding-left:var(--sp-4);margin-top:var(--sp-2); }
.doc-list li { font-size:var(--text-sm);color:var(--gray-600);line-height:1.8;margin-bottom:4px; }
.doc-highlight { background:var(--brand-primary-bg);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0; }
.doc-highlight p { font-size:var(--text-sm);color:var(--brand-primary-d);line-height:1.7; }
/* privacy.html 전용 - 개인정보 테이블 */
.info-table { width:100%;border-collapse:collapse;margin-top:var(--sp-2);font-size:var(--text-xs); }
.info-table th { background:var(--brand-primary-bg);color:var(--brand-primary-d);padding:var(--sp-2) var(--sp-3);text-align:left;font-weight:var(--weight-bold);border:1px solid var(--brand-primary-soft); }
.info-table td { padding:var(--sp-2) var(--sp-3);border:1px solid var(--gray-100);color:var(--gray-600);line-height:1.5; }
.info-table tr:nth-child(even) td { background:var(--gray-50); }

/* ─────────────────────────────────────────────
   [community] 후기·팁 리스트 / 글쓰기 FAB
   ───────────────────────────────────────────── */
.community-post-list { padding: 0 var(--sp-4) var(--sp-6); }
.community-post-row {
  display: block; padding: var(--sp-4); margin-bottom: var(--sp-3);
  background: white; border: 1px solid var(--gray-100); border-radius: var(--r-xl);
  box-shadow: var(--sh-sm); text-decoration: none; color: inherit;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}
.community-post-row:active { transform: scale(.99); box-shadow: var(--sh-xs); }
.community-post-row__title { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--gray-900); margin-bottom: var(--sp-2); line-height: 1.35; }
.community-post-row__preview { font-size: var(--text-sm); color: var(--gray-500); line-height: 1.45; margin-bottom: var(--sp-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.community-post-row__meta { font-size: var(--text-xs); color: var(--gray-400); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.comm-fab-write {
  position: fixed; right: max(var(--sp-4), calc(50% - min(var(--app-max-w), 100vw) / 2 + var(--sp-4)));
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--sp-4));
  z-index: 60; display: none; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-5); height: 48px; border-radius: var(--r-full);
  border: none; cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-bold);
  background: linear-gradient(135deg, var(--brand-primary-d), var(--brand-primary));
  color: white; box-shadow: 0 8px 24px rgba(124, 58, 237, .35);
}
.comm-fab-write:active { transform: scale(.97); }
.community-post-body { font-size: var(--text-base); color: var(--gray-800); line-height: 1.65; word-break: break-word; }
.community-post-body img { max-width: 100%; height: auto; border-radius: var(--r-lg); margin: var(--sp-3) 0; }

/* Quill — 커뮤니티 글쓰기 */
.community-quill-editor {
  min-height: 220px;
  background: white;
  border-radius: var(--r-lg);
  border: 1px solid var(--gray-200);
}
.community-quill-editor .ql-container {
  font-family: inherit;
  font-size: var(--text-base);
  min-height: 180px;
}
.community-quill-editor .ql-toolbar {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-color: var(--gray-200);
  background: var(--gray-50);
}
.community-quill-editor .ql-container {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  border-color: var(--gray-200);
}