/* =========================================================
   링크업 (LinkUp) - 라이트 테마 카드/그리드 UI
   ========================================================= */

:root {
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --brand-light: #eef2ff;
  --accent: #f59e0b;
  --bg: #f6f7fb;
  --card: #ffffff;
  --border: #e5e7eb;
  --text: #1f2330;
  --text-sub: #6b7280;
  --text-faint: #9ca3af;
  --danger: #ef4444;
  --success: #16a34a;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
  --shadow-hover: 0 8px 24px rgba(17, 24, 39, 0.12);
  /* 하단 내비바의 "기본값" 높이. 실제로는 common.js의 syncBottomNavHeight()가
     .bottom-nav를 렌더링 직후 매번 실측(getBoundingClientRect)해 이 변수를
     JS로 덮어쓴다. 아래 --app-font-scale이 커지면 .bottom-nav의 텍스트/아이콘도
     함께 커져 실제 높이가 이 기본값보다 커지는데, 실측값을 CSS 변수에 반영해
     .list-ad-banner가 항상 정확한 높이 위에 밀착되도록 한다. 이 값은 JS가 아직
     실행되지 않은 최초 페인트나 JS 실패 시의 안전한 폴백일 뿐이다.
     (2026-09-13: 조사 결과 Android Chrome은 OS 접근성 "글꼴 크기" 설정 자체를
     웹 콘텐츠에 반영하지 않는 것이 Chrome의 공식적인 동작(Firefox는 반영하나
     Chrome/Safari는 미반영) - text-size-adjust로는 해결이 불가능함을 확인하고,
     대신 앱 자체에 글자 크기 조절 기능(--app-font-scale)을 추가함) */
  --bottom-nav-height: 62.5px;
  /* 앱 자체 "글자 크기 조절" 기능의 배율. common.js의 applyFontScale()이
     localStorage에 저장된 사용자 선택값(0.9/1/1.15/1.3)으로 이 변수를 덮어쓴다.
     styles.css의 모든 font-size 선언은 calc(Npx * var(--app-font-scale))
     형태로 이 변수를 참조하므로, 값이 바뀌면 앱 전체 텍스트가 함께 커지거나
     작아진다. 기본값 1은 기존 디자인 그대로의 크기. */
  --app-font-scale: 1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
.hidden { display: none !important; }

/* ---------------- App shell / Header ---------------- */
.app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.top-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  font-size: calc(20px * var(--app-font-scale));
  font-weight: 800;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.brand-en { font-size: calc(12px * var(--app-font-scale)); font-weight: 600; color: var(--text-faint); }
.brand-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

.top-header-nav {
  display: none;
  gap: 4px;
  flex: 1;
}
.top-header-nav .nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 600;
  color: var(--text-sub);
}
.top-header-nav .nav-item-active { background: var(--brand-light); color: var(--brand); }
.top-header-nav .nav-item:hover { background: #f3f4f6; }

.top-header-write-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: calc(14px * var(--app-font-scale));
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s;
}
.top-header-write-btn:hover { background: var(--brand-dark); }

.header-login-box {
  display: none;
  align-items: center;
  gap: 6px;
}
.header-auth-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  font-size: calc(13px * var(--app-font-scale));
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: background .15s;
}
.header-auth-btn:hover { background: #f3f4f6; }
.header-auth-btn-google i { color: #ea4335; }
.header-auth-btn-kakao { background: #FEE500; border-color: #FEE500; color: #191919; }
.header-auth-btn-kakao:hover { background: #fdd800; }
.header-auth-btn-kakao i { color: #191919; }

.header-user-chip {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
}
.header-user-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.header-user-name { font-size: calc(13px * var(--app-font-scale)); font-weight: 700; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-logout-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: none; background: none; color: var(--text-faint); font-size: calc(13px * var(--app-font-scale));
}
.header-logout-btn:hover { color: var(--danger); }

@media (min-width: 860px) {
  .top-header-nav { display: flex; }
  .top-header-write-btn { display: flex; }
  .header-login-box { display: flex; }
  .header-user-chip { display: flex; }
}

/* 헤더 우측 로그인/마이페이지 진입 버튼 (모바일 포함 항상 표시) */
/* margin-left:auto 로 top-header-inner(flex) 안에서 남는 공간을 모두 흡수해
   항상 우측 끝(컨테이너 padding 만큼의 여백만 남기고)에 붙도록 고정한다.
   flex-shrink:0 으로 다른 요소에 밀려 줄어들지 않게 보강. */
.header-mypage-auth-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto !important;
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 700;
  font-size: calc(13px * var(--app-font-scale));
  white-space: nowrap;
  transition: background .15s;
}
.header-mypage-auth-btn:hover { background: var(--brand); color: #fff; }
.header-mypage-auth-btn.is-logged-in { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.header-mypage-auth-btn.is-logged-in:hover { background: #f3f4f6; color: var(--text); }
@media (min-width: 860px) {
  .header-mypage-auth-btn { display: none; }
}

/* ---------------- 글자 크기 조절 옵션 버튼(마이페이지 "바"에서 사용) ----------------
   Android Chrome이 OS 접근성 "글꼴 크기" 설정을 웹 콘텐츠에 반영하지 않는
   것이 브라우저의 공식 동작이라(Firefox는 반영하나 Chrome/Safari는 미반영),
   OS 설정에 기대는 대신 앱 자체에 글자 크기 조절 기능을 넣어 사용자가 직접
   텍스트 크기를 키울 수 있게 한다. 선택값은 :root의 --app-font-scale
   변수에 반영되고, styles.css의 모든 font-size가 이 변수를 참조하므로 앱
   전체 텍스트가 함께 커진다(2026-09-13, 마이페이지 상시노출 바로 이동). */
.font-size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-sub);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.font-size-option-preview { font-weight: 800; color: var(--text); line-height: 1; }
.font-size-option:hover { background: var(--brand-light); }
.font-size-option.font-size-option-active {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand);
}
.font-size-option.font-size-option-active .font-size-option-preview { color: var(--brand); }

/* ---------------- 로그인 필요 안내 게이트 (링크업 등록 / 팀원모집 / 후기&댓글 작성) ---------------- */
.auth-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px 20px;
  border-radius: var(--radius-sm);
  background: var(--brand-light);
  border: 1px dashed var(--border);
  margin-bottom: 16px;
}
.auth-gate-icon { font-size: calc(22px * var(--app-font-scale)); color: var(--brand); }
.auth-gate-desc { font-size: calc(13px * var(--app-font-scale)); color: var(--text-sub); margin: 0; }
.auth-gate-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.auth-gate-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  font-size: calc(13px * var(--app-font-scale));
  border: 1px solid var(--border);
  white-space: nowrap;
}
.auth-gate-btn:hover { background: #f3f4f6; }
.auth-gate-btn-google i { color: #ea4335; }
.auth-gate-btn-kakao { background: #FEE500; border-color: #FEE500; color: #191919; }
.auth-gate-btn-kakao:hover { background: #fdd800; }
.auth-gate-btn-kakao i { color: #191919; }

.main-content {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 16px 90px;
}
@media (min-width: 860px) {
  .main-content { padding: 32px 24px 60px; }
}

/* ---------------- Bottom Nav (mobile) ---------------- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  /* :root의 --bottom-nav-height를 실제 최소 높이로 강제해, 텍스트가 커져도
     내비바 자체 높이가 .list-ad-banner가 가정하는 값(같은 변수)보다 작아지지
     않도록 보장한다(safe-area 여백은 별도로 더해짐). */
  min-height: var(--bottom-nav-height);
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(env(safe-area-inset-bottom, 0) + 6px);
}
@media (min-width: 860px) { .bottom-nav { display: none; } }
.bottom-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 600;
  color: var(--text-faint);
  border-radius: 12px;
}
.bottom-nav .nav-item i { font-size: calc(18px * var(--app-font-scale)); }
/* 5탭 모두 기본 상태는 동일한 색상(--text-faint)으로 통일하고, 현재 탭(active)만
   브랜드 색상으로 표시한다. 별도의 원형 배지/배경색은 사용하지 않는다. */
.bottom-nav .nav-item-active { color: var(--brand); }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1f2330;
  color: #fff;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 860px) { .toast { bottom: 24px; } }

/* ---------------- Common: Search / Tabs ---------------- */
.feed-hero { margin-bottom: 20px; }
.feed-hero-title {
  font-size: calc(21px * var(--app-font-scale));
  font-weight: 800;
  margin: 0 0 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 480px) {
  .feed-hero-title { font-size: calc(24px * var(--app-font-scale)); }
}

.feed-search, .list-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 18px;
  box-shadow: var(--shadow);
}
.feed-search i, .list-search i { color: var(--text-faint); }
.feed-search input, .list-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: calc(14px * var(--app-font-scale)); color: var(--text);
}

.list-toolbar-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.list-toggle-closed-btn {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); font-size: calc(13.5px * var(--app-font-scale)); font-weight: 600; color: var(--text-sub);
  cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.list-toggle-closed-btn:hover { border-color: var(--brand); color: var(--brand); }
.list-toggle-closed-btn:active { transform: scale(0.97); }
.list-toggle-closed-btn.is-showing-closed { background: var(--brand-light); color: var(--brand); border-color: var(--brand); }

.feed-filter-tabs, .list-tabbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 16px 0 20px;
  padding-bottom: 2px;
}
.feed-filter-tab, .list-tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 600;
  color: var(--text-sub);
  transition: all .15s;
}
.feed-filter-tab-active, .list-tab-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.list-page-title { font-size: calc(22px * var(--app-font-scale)); font-weight: 800; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }

.genre-tabbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 20px;
  padding-bottom: 2px;
}
.genre-tab {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 600;
  color: var(--text-sub);
  transition: all .15s;
}
.genre-tab-active {
  background: var(--brand-light, #eef2ff);
  border-color: var(--brand);
  color: var(--brand);
}

.feed-loading, .list-loading, .feed-empty, .list-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-faint);
}
.feed-loading i, .list-loading i { font-size: calc(26px * var(--app-font-scale)); color: var(--brand); }
.feed-empty i, .list-empty i { font-size: calc(34px * var(--app-font-scale)); margin-bottom: 10px; display: block; }

/* 무한 스크롤: 추가 로딩 인디케이터 + 감지용 sentinel(화면에 보이지 않지만 높이를 차지해 스크롤 트리거) */
.feed-loading-more {
  text-align: center;
  padding: 20px;
  color: var(--text-faint);
  font-size: calc(13px * var(--app-font-scale));
}
.feed-loading-more i { color: var(--brand); margin-right: 6px; }
.scroll-sentinel { width: 100%; height: 1px; }

/* ---------------- Feed grid & cards ---------------- */
.feed-grid, .list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .feed-grid, .list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .feed-grid, .list-grid { grid-template-columns: repeat(3, 1fr); }
}

.post-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.post-card.is-closed { opacity: 0.68; }

/* ---------------- 카드 상단 이미지 영역 ----------------
   포스터 이미지(대부분 세로형)가 항상 "시원하게" 채워지도록
   4/5(세로 지향) 비율 고정 컨테이너 + object-fit:cover, object-position:top
   조합을 사용한다(포스터 상단의 제목/핵심 정보가 잘리지 않도록 top 기준 크롭).
   이미지가 없거나 로드 실패 시에는 카테고리별 그라디언트+아이콘 폴백(.media-fallback)으로
   전환되어 빈 화면/깨진 아이콘이 노출되지 않는다. */
.post-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-size: calc(30px * var(--app-font-scale));
  flex-shrink: 0;
}
.post-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.post-card-media.media-fallback {
  font-size: calc(34px * var(--app-font-scale));
}
.post-card-media.media-fallback i {
  opacity: 0.9;
}
/* 카테고리별 폴백 그라디언트 테마 (8가지 순환 + 팀원모집/광고 전용).
   .media-fallback.cat-N 형태로 범용화하여 post-card-media 뿐 아니라
   list-card-thumb / tile-card 등 다른 이미지 컨테이너에서도 재사용한다. */
.media-fallback.cat-1 { background: linear-gradient(135deg, #eef2ff, #c7d2fe); color: #4338ca; }
.media-fallback.cat-2 { background: linear-gradient(135deg, #ecfeff, #a5f3fc); color: #0e7490; }
.media-fallback.cat-3 { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); color: #15803d; }
.media-fallback.cat-4 { background: linear-gradient(135deg, #fff7ed, #fed7aa); color: #c2410c; }
.media-fallback.cat-5 { background: linear-gradient(135deg, #eff6ff, #bfdbfe); color: #1d4ed8; }
.media-fallback.cat-6 { background: linear-gradient(135deg, #faf5ff, #e9d5ff); color: #7e22ce; }
.media-fallback.cat-7 { background: linear-gradient(135deg, #fef2f2, #fecaca); color: #b91c1c; }
.media-fallback.cat-8 { background: linear-gradient(135deg, #fefce8, #fde68a); color: #a16207; }
.media-fallback.cat-ad { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #475569; }
.post-card-dday {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fff;
  color: var(--text);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.post-card-dday.urgent { background: var(--danger); color: #fff; }
.post-card-dday.closed { background: #6b7280; color: #fff; }

.post-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.post-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(12px * var(--app-font-scale));
  color: var(--text-sub);
}
.post-card-author-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(11px * var(--app-font-scale));
  flex-shrink: 0;
}
.post-card-cat {
  display: inline-block;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-light);
  padding: 2px 8px;
  border-radius: 6px;
  width: fit-content;
}
.post-card-title {
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-desc {
  font-size: calc(13px * var(--app-font-scale));
  color: var(--text-sub);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #f1f2f5;
  font-size: calc(12px * var(--app-font-scale));
  color: var(--text-faint);
}
.post-card-actions { display: flex; gap: 12px; }
.post-card-actions button {
  display: flex; align-items: center; gap: 4px;
  border: none; background: none;
  font-size: calc(12px * var(--app-font-scale)); color: var(--text-faint);
  padding: 2px;
}
.post-card-actions button.liked { color: var(--danger); }
.post-card-actions button:hover { color: var(--brand); }

/* ---------------- List page cards (variant) ---------------- */
.list-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.list-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.list-card-thumb {
  width: 76px; height: 76px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  font-size: calc(22px * var(--app-font-scale));
}
.list-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* 카테고리 폴백 그라디언트는 .post-card-media.cat-N 규칙을 그대로 재사용(class 조합) */
.list-card-thumb.media-fallback i,
.tile-card-fallback-icon {
  opacity: 0.9;
}
.list-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.list-card-organizer { font-size: calc(12px * var(--app-font-scale)); color: var(--text-sub); margin: 0; }
.list-card-title {
  font-size: calc(14px * var(--app-font-scale)); font-weight: 700; margin: 0; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.list-card-footer { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.list-card-dday { font-size: calc(11px * var(--app-font-scale)); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f1f2f5; color: var(--text-sub); }
.list-card-dday.urgent { background: #fee2e2; color: var(--danger); }
.list-card-dday.closed { background: #e5e7eb; color: var(--text-faint); }
.list-card-cat { font-size: calc(11px * var(--app-font-scale)); color: var(--brand); font-weight: 600; }
.list-card-like { align-self: center; color: var(--text-faint); font-size: calc(18px * var(--app-font-scale)); padding: 4px; }
.list-card-like.liked { color: var(--danger); }
.is-closed { opacity: 0.65; }

/* ---------------- Write page ---------------- */
.write-page { display: flex; justify-content: center; }
.write-card {
  width: 100%;
  max-width: 720px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
}
.write-title { font-size: calc(22px * var(--app-font-scale)); font-weight: 800; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.write-sub { font-size: calc(13px * var(--app-font-scale)); color: var(--text-sub); margin: 0 0 24px; }
.write-form { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) {
  .write-form { grid-template-columns: 1fr 1fr; }
  .write-field-full { grid-column: 1 / -1; }
}
.write-field { display: flex; flex-direction: column; gap: 6px; }
.write-label { font-size: calc(13px * var(--app-font-scale)); font-weight: 700; color: var(--text); }
.write-hint { font-size: calc(11px * var(--app-font-scale)); color: var(--text-faint); }
.write-field input[type="text"],
.write-field input[type="datetime-local"],
.write-field select,
.write-field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: calc(14px * var(--app-font-scale));
  color: var(--text);
  background: #fafafa;
  outline: none;
  transition: border-color .15s;
}
.write-field input:focus, .write-field select:focus, .write-field textarea:focus {
  border-color: var(--brand);
  background: #fff;
}
.write-field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }

.write-image-drop {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: #fafafa;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.write-image-drop:hover, .write-image-drop.drag-over { border-color: var(--brand); background: var(--brand-light); }
.write-image-placeholder { text-align: center; color: var(--text-faint); padding: 20px; }
.write-image-placeholder i { font-size: calc(28px * var(--app-font-scale)); margin-bottom: 8px; display: block; color: var(--brand); }
.write-image-placeholder p { font-size: calc(13px * var(--app-font-scale)); margin: 0 0 4px; color: var(--text-sub); }
.write-image-placeholder span { font-size: calc(11px * var(--app-font-scale)); color: var(--text-faint); }
.write-image-preview-wrap { position: relative; width: 100%; }
.write-image-preview { width: 100%; max-height: 260px; object-fit: contain; display: block; background: #fff; }
.write-image-remove {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(17,24,39,0.75); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
}
.write-image-status { font-size: calc(12px * var(--app-font-scale)); color: var(--brand); margin: 4px 0 0; min-height: 14px; }
.write-image-status.error { color: var(--danger); }

.write-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* ---------------- Write Preview Sheet (게시 전 미리보기) ---------------- */
.write-preview-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  z-index: 61;
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
}
.write-preview-sheet.show { transform: translate(-50%, 0); }
@media (min-width: 860px) {
  .write-preview-sheet {
    top: 50%; bottom: auto;
    transform: translate(-50%, -46%) scale(0.96);
    border-radius: 20px;
    opacity: 0;
  }
  .write-preview-sheet.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.write-preview-header {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 20px 14px;
  font-size: calc(16px * var(--app-font-scale)); font-weight: 800; color: var(--text);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.write-preview-header i { color: var(--brand); }
.write-preview-body { overflow-y: auto; padding: 20px; flex: 1; }
.write-preview-notice {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 16px; padding: 12px 14px;
  background: #f8f9fb; border-radius: var(--radius-sm);
  font-size: calc(12px * var(--app-font-scale)); line-height: 1.6; color: var(--text-faint);
}
.write-preview-notice i { color: var(--brand); margin-top: 1px; }
.write-preview-actions {
  display: flex; gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.write-preview-actions .btn-ghost,
.write-preview-actions .btn-primary { flex: 1; justify-content: center; }

/* ---------------- Buttons (shared) ---------------- */
.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: calc(14px * var(--app-font-scale)); font-weight: 700;
  border: none;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary { background: var(--brand-light); color: var(--brand); }
.btn-secondary:hover { background: #dfe3ff; }
.btn-ghost { background: #f1f2f5; color: var(--text-sub); }
.btn-ghost:hover { background: #e5e7eb; }

/* ---------------- Detail Sheet (info/review) ---------------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(17,24,39,0.5);
  z-index: 60; opacity: 0; transition: opacity .25s;
}
.sheet-backdrop.show { opacity: 1; }
.detail-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  z-index: 61;
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
}
.detail-sheet.show { transform: translate(-50%, 0); }
@media (min-width: 860px) {
  .detail-sheet {
    top: 50%; bottom: auto;
    transform: translate(-50%, -46%) scale(0.96);
    border-radius: 20px;
    opacity: 0;
  }
  .detail-sheet.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 10px auto 4px; flex-shrink: 0; }
.sheet-close-btn {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #f1f2f5; border: none; color: var(--text-sub);
  display: flex; align-items: center; justify-content: center;
}
.sheet-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sheet-tab {
  flex: 1; padding: 14px 0; border: none; background: none;
  font-size: calc(14px * var(--app-font-scale)); font-weight: 700; color: var(--text-faint);
  border-bottom: 2px solid transparent;
}
.sheet-tab-active { color: var(--brand); border-bottom-color: var(--brand); }
.sheet-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 3px;
  border-radius: 9px; background: #eef0f4; color: var(--text-sub);
  font-size: calc(11px * var(--app-font-scale)); font-weight: 700; vertical-align: middle;
}
.sheet-tab-active .sheet-tab-count { background: var(--brand); color: #fff; }
.sheet-body { overflow-y: auto; padding: 20px; flex: 1; }

.sheet-media {
  width: 100%; max-height: 420px; object-fit: contain;
  border-radius: var(--radius-sm); margin-bottom: 14px; display: block;
  background: var(--brand-light);
}
.sheet-organizer { font-size: calc(13px * var(--app-font-scale)); color: var(--text-sub); margin: 0 0 4px; }
.sheet-source-label { color: var(--text-faint); font-size: calc(12px * var(--app-font-scale)); }
.sheet-title { font-size: calc(19px * var(--app-font-scale)); font-weight: 800; margin: 0 0 12px; line-height: 1.4; }
.sheet-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.badge {
  font-size: calc(11px * var(--app-font-scale)); font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #f1f2f5; color: var(--text-sub);
}
.badge-dday { background: var(--brand-light); color: var(--brand); }
.badge-dday.urgent { background: #fee2e2; color: var(--danger); }
.badge-closed { background: #e5e7eb; color: var(--text-faint); }
.badge-category { background: var(--brand-light); color: var(--brand); }
.badge-source { background: #fef3c7; color: #b45309; }

.sheet-info-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #f1f2f5; font-size: calc(13px * var(--app-font-scale)); }
.sheet-info-label { color: var(--text-faint); }
.sheet-info-value { color: var(--text); font-weight: 600; }
.sheet-desc { font-size: calc(14px * var(--app-font-scale)); line-height: 1.7; color: var(--text); margin: 16px 0; white-space: pre-wrap; }
.sheet-attachments { margin: 12px 0; }
.attachment-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #f8f9fb; border-radius: 8px; margin-bottom: 6px;
  font-size: calc(13px * var(--app-font-scale)); color: var(--brand);
}
.sheet-source-btn {
  width: 100%; padding: 13px; margin-top: 8px;
  background: var(--brand); color: #fff; border: none; border-radius: 12px;
  font-size: calc(15px * var(--app-font-scale)); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sheet-source-btn:hover { background: var(--brand-dark); }

/* 법적 면책 안내 문구 - 모든 공모전 상세 뷰(정보 제공 탭) 하단에 공통 고정 노출.
   운영상 정보 정확성에 대한 책임 소지를 방어하기 위한 필수 안내이므로 눈에 띄되
   과도하게 시선을 끌지 않는 회색 톤의 작은 텍스트 박스로 표시한다. */
.sheet-disclaimer {
  display: flex; align-items: flex-start; gap: 6px;
  background: #f3f4f6; color: var(--text-faint);
  font-size: calc(11.5px * var(--app-font-scale)); line-height: 1.5;
  padding: 10px 12px; margin-top: 14px; border-radius: 10px;
}
.sheet-disclaimer i { margin-top: 1px; color: #9ca3af; flex-shrink: 0; }

/* ---------------- AI 분석 탭 (Gemini 기반 공모전 특색/심사경향/합격팁) ---------------- */
.ai-loading, .ai-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 20px; text-align: center; color: var(--text-sub);
}
.ai-loading i { font-size: calc(30px * var(--app-font-scale)); color: var(--brand); }
.ai-loading p, .ai-error p { font-size: calc(13.5px * var(--app-font-scale)); line-height: 1.6; margin: 0; }
.ai-error i { font-size: calc(26px * var(--app-font-scale)); color: #f59e0b; }
.ai-retry-btn {
  margin-top: 4px; padding: 9px 18px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--text); font-size: calc(13px * var(--app-font-scale)); font-weight: 600;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.ai-retry-btn:hover { background: #f8f9fb; }

.ai-disclaimer {
  display: flex; align-items: flex-start; gap: 6px;
  background: #f3f4f6; color: var(--text-faint);
  font-size: calc(11.5px * var(--app-font-scale)); line-height: 1.5;
  padding: 10px 12px; margin-bottom: 16px; border-radius: 10px;
}
.ai-disclaimer i { margin-top: 1px; color: #9ca3af; flex-shrink: 0; }

.ai-card {
  background: linear-gradient(135deg, var(--brand-light) 0%, #f8f9fb 100%);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; margin-bottom: 14px;
}
.ai-card-title {
  display: flex; align-items: center; gap: 7px;
  font-size: calc(14px * var(--app-font-scale)); font-weight: 800; color: var(--brand); margin-bottom: 8px;
}
.ai-card-body { font-size: calc(13.5px * var(--app-font-scale)); line-height: 1.7; color: var(--text); margin: 0; white-space: pre-wrap; }
.ai-tips-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.ai-tips-list li { font-size: calc(13.5px * var(--app-font-scale)); line-height: 1.6; color: var(--text); }

/* ============================================================
   공모전 목록 페이지: 카드형/캘린더형 뷰 전환 서브탭 + 월간 달력
   ============================================================ */
.list-view-tabbar {
  display: flex; gap: 8px; margin-bottom: 18px;
}
.list-view-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--card); font-size: calc(14px * var(--app-font-scale)); font-weight: 700; color: var(--text-sub);
  transition: all .15s; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.list-view-tab-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.list-view-panel.hidden { display: none; }

/* ---------------- 공모전 페이지 하단 고정 배너 광고 ----------------
   목록형(카드)/캘린더형 뷰 중 무엇을 보고 있든 항상 노출되도록, 뷰 패널이
   아니라 페이지 최하단(하단 내비바 바로 위)에 고정된 별도 레이어로 둔다. */
.list-ad-banner {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 39; /* .bottom-nav(40) 바로 아래에 붙어 내비바 위에 쌓이도록 */
  display: flex;
  justify-content: center;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 14px 16px;
}
.list-ad-banner.hidden { display: none; }
@media (max-width: 859px) {
  /* 모바일: 하단 내비바(.bottom-nav) 바로 위에 여유 간격 없이 밀착 고정한다.
     --bottom-nav-height는 common.js의 syncBottomNavHeight()가 .bottom-nav의
     실제 렌더링 높이(getBoundingClientRect)로 매번 갱신하므로, 안드로이드
     OS 접근성 "글꼴 크기" 설정이 얼마나 커지든 항상 실제 내비바 높이와
     정확히 일치한다(2026-09-13). */
  .list-ad-banner { bottom: calc(env(safe-area-inset-bottom, 0) + var(--bottom-nav-height)); }
}
/* 배너가 렌더링된 뒤(body.has-list-ad-banner)에는 리스트 페이지 콘텐츠가
   배너에 가려지지 않도록 공모전 페이지 하단 여백을 넉넉히 확보한다.
   (구형 WebView 호환을 위해 :has() 대신 body 클래스 + 페이지 클래스 조합을 사용)
   168px는 "내비바 + 배너"의 기본 높이 합산 근사치였으나, 두 요소 모두 텍스트
   확대에 따라 실제 높이가 달라지므로 syncBottomNavHeight()가 실측해 채우는
   --list-ad-banner-height 변수를 --bottom-nav-height와 합산해 항상 실제
   필요한 여백만큼만 확보한다(2026-09-13, 여유값 12px 포함). */
body.has-list-ad-banner .list-page,
body.has-board-ad-banner .board-page {
  padding-bottom: calc(var(--bottom-nav-height) + var(--list-ad-banner-height, 96px) + 12px);
}

.list-ad-banner-house {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 640px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-radius: var(--radius-sm);
  padding: 16px 18px 16px 40px;
}
.list-ad-banner-badge {
  position: absolute; top: 10px; left: 10px; background: #f59e0b; color: #fff;
  font-size: calc(9px * var(--app-font-scale)); font-weight: 800; padding: 2px 6px; border-radius: 5px;
}
.list-ad-banner-icon { font-size: calc(18px * var(--app-font-scale)); color: var(--brand); flex-shrink: 0; }
.list-ad-banner-text { flex: 1; min-width: 0; }
.list-ad-banner-title { margin: 0; font-size: calc(12.5px * var(--app-font-scale)); font-weight: 700; color: var(--text); }
.list-ad-banner-desc { margin: 1px 0 0; font-size: calc(11px * var(--app-font-scale)); color: var(--text-sub); }
.list-ad-banner-cta {
  flex-shrink: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; color: var(--text); font-size: calc(11.5px * var(--app-font-scale)); font-weight: 700; cursor: pointer;
}
.list-ad-banner-cta:hover { background: #f8f9fb; }
.list-ad-banner-adsense { width: 100%; max-width: 640px; min-height: 68px; }
.list-ad-banner-native-slot { width: 100%; min-height: 68px; }

.cal-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.cal-title { flex: 1; text-align: center; font-size: calc(17px * var(--app-font-scale)); font-weight: 800; margin: 0; }
.cal-nav-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--text-sub); display: flex; align-items: center;
  justify-content: center; font-size: calc(13px * var(--app-font-scale)); cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.cal-nav-btn:hover { border-color: var(--brand); color: var(--brand); }
.cal-today-btn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--text-sub); font-size: calc(12.5px * var(--app-font-scale)); font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.cal-today-btn:hover { border-color: var(--brand); color: var(--brand); }

.cal-weekday-row {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  margin-bottom: 4px;
}
.cal-weekday { font-size: calc(12px * var(--app-font-scale)); font-weight: 700; color: var(--text-faint); padding: 6px 0; }
.cal-weekday.cal-sun { color: #ef4444; }
.cal-weekday.cal-sat { color: #3b82f6; }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-cell {
  position: relative; aspect-ratio: 1 / 1; min-height: 44px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 6px 2px 0; transition: all .15s;
}
.cal-cell-empty { border: none; background: transparent; }
.cal-cell-day { font-size: calc(12.5px * var(--app-font-scale)); font-weight: 600; color: var(--text); }
.cal-cell-day.cal-sun { color: #ef4444; }
.cal-cell-day.cal-sat { color: #3b82f6; }
.cal-cell-today { border-color: var(--brand); border-width: 2px; }
.cal-cell-today .cal-cell-day { color: var(--brand); font-weight: 800; }
.cal-cell-has-events {
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cal-cell-has-events:hover, .cal-cell-has-events:active { background: var(--brand-light); border-color: var(--brand); }
.cal-cell-dot {
  margin-top: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: calc(10.5px * var(--app-font-scale)); font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.cal-cell-dot.cal-cell-dot-closed { background: var(--text-faint); }

.cal-hint {
  margin: 16px 4px 0; font-size: calc(12px * var(--app-font-scale)); color: var(--text-faint);
  display: flex; align-items: center; gap: 6px;
}

/* 캘린더 로딩 실패 시(무한 로딩 방지) - 그리드 영역을 대체하는 지속형 에러 안내 */
.cal-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 50px 20px; text-align: center; color: var(--text-sub);
  grid-column: 1 / -1;
}
.cal-error i { font-size: calc(26px * var(--app-font-scale)); color: #f59e0b; }
.cal-error p { font-size: calc(13.5px * var(--app-font-scale)); line-height: 1.6; margin: 0; }
.cal-retry-btn {
  margin-top: 4px; padding: 9px 18px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--text); font-size: calc(13px * var(--app-font-scale)); font-weight: 600;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.cal-retry-btn:hover { background: #f8f9fb; }

/* 날짜 클릭 시 뜨는 "해당일 마감 공모전" 팝업 - 상세시트와 유사한 바텀시트 스타일 */
.cal-day-popup-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60;
  opacity: 0; transition: opacity .2s;
}
.cal-day-popup-backdrop.show { opacity: 1; }
.cal-day-popup-backdrop.hidden { display: none; }
.cal-day-popup {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: 100%; max-width: 520px; max-height: 70vh; background: var(--card);
  border-radius: 20px 20px 0 0; z-index: 61; box-shadow: 0 -8px 30px rgba(0,0,0,.15);
  display: flex; flex-direction: column; transition: transform .2s;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.cal-day-popup.show { transform: translate(-50%, 0); }
.cal-day-popup.hidden { display: none; }
@media (min-width: 640px) {
  .cal-day-popup {
    bottom: 50%; transform: translate(-50%, 50%) scale(0.92); border-radius: 20px; opacity: 0;
  }
  .cal-day-popup.show { transform: translate(-50%, 50%) scale(1); opacity: 1; }
}
.cal-day-popup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cal-day-popup-header h3 { font-size: calc(15.5px * var(--app-font-scale)); font-weight: 800; margin: 0; }
.cal-day-popup-list { overflow-y: auto; padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.cal-day-popup-item {
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.cal-day-popup-item:hover, .cal-day-popup-item:active { border-color: var(--brand); background: var(--brand-light); }
.cal-day-popup-item.is-closed { opacity: .55; }
.cal-day-popup-item-title { font-size: calc(14px * var(--app-font-scale)); font-weight: 700; margin: 0 0 6px; line-height: 1.4; }
.cal-day-popup-item-organizer { font-size: calc(12.5px * var(--app-font-scale)); color: var(--text-sub); margin: 0 0 6px; display: flex; align-items: center; gap: 5px; }
.cal-day-popup-item-dates { display: flex; flex-wrap: wrap; gap: 10px; font-size: calc(12px * var(--app-font-scale)); color: var(--text-faint); }
.cal-day-popup-item-dates span { display: flex; align-items: center; gap: 4px; }

.review-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.review-form input, .review-form textarea {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: calc(13px * var(--app-font-scale)); outline: none;
}
.review-form textarea { min-height: 70px; resize: vertical; }
.review-form button {
  align-self: flex-end; background: var(--brand); color: #fff; border: none;
  padding: 8px 18px; border-radius: 999px; font-size: calc(13px * var(--app-font-scale)); font-weight: 700;
}
.comment-item { padding: 12px 0; border-bottom: 1px solid #f1f2f5; }
.comment-nickname { font-size: calc(13px * var(--app-font-scale)); font-weight: 700; color: var(--text); margin-bottom: 2px; }
.comment-content { font-size: calc(13px * var(--app-font-scale)); color: var(--text); line-height: 1.6; white-space: pre-wrap; }
.comment-date { font-size: calc(11px * var(--app-font-scale)); color: var(--text-faint); margin-top: 4px; }
.comment-empty { text-align: center; color: var(--text-faint); padding: 30px 0; font-size: calc(13px * var(--app-font-scale)); }

/* ---------------- Team Recruit tab ---------------- */
.team-form {
  background: #f8f9fb;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.team-form-title { font-size: calc(14px * var(--app-font-scale)); font-weight: 800; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.team-form-row { display: flex; gap: 8px; }
.team-form-row-split input:first-child { flex: 3; }
.team-form-row-split input:last-child { flex: 1; min-width: 60px; }
.team-form input, .team-form textarea {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: calc(13px * var(--app-font-scale));
  outline: none;
  background: var(--card);
  width: 100%;
}
.team-form textarea { min-height: 64px; resize: vertical; }
.team-form button {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.team-form button:disabled { opacity: 0.6; }

.team-list-title { font-size: calc(14px * var(--app-font-scale)); font-weight: 800; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

.recruit-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 10px;
}
.recruit-item.recruit-closed { opacity: 0.65; background: #fafafa; }
.recruit-item-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.recruit-status-badge {
  font-size: calc(11px * var(--app-font-scale)); font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-light); color: var(--brand);
}
.recruit-status-badge.closed { background: #e5e7eb; color: var(--text-faint); }
.recruit-field-badge {
  font-size: calc(11px * var(--app-font-scale)); font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #fef3c7; color: #b45309;
}
.recruit-headcount { font-size: calc(12px * var(--app-font-scale)); color: var(--text-sub); margin-left: auto; }
.recruit-item-title { font-size: calc(15px * var(--app-font-scale)); font-weight: 700; margin: 0 0 6px; color: var(--text); }
.recruit-item-content { font-size: calc(13px * var(--app-font-scale)); color: var(--text-sub); line-height: 1.6; margin: 0 0 10px; white-space: pre-wrap; }
.recruit-item-footer { display: flex; flex-direction: column; gap: 8px; }
.recruit-item-meta { font-size: calc(11px * var(--app-font-scale)); color: var(--text-faint); }
.recruit-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.recruit-btn-primary, .recruit-btn-secondary, .recruit-btn-danger {
  font-size: calc(12px * var(--app-font-scale)); font-weight: 700; border: none; border-radius: 999px; padding: 7px 14px;
  display: flex; align-items: center; gap: 5px;
}
.recruit-btn-primary { background: var(--brand); color: #fff; }
.recruit-btn-primary:disabled { background: #d1d5db; cursor: not-allowed; }
.recruit-btn-secondary { background: #f1f2f5; color: var(--text-sub); }
.recruit-btn-danger { background: #fee2e2; color: var(--danger); padding: 7px 10px; }
.recruit-applies-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.apply-item { padding: 8px 0; border-bottom: 1px solid #f1f2f5; }
.apply-item:last-child { border-bottom: none; }
.apply-item-nickname { font-size: calc(12px * var(--app-font-scale)); font-weight: 700; color: var(--text); }
.apply-item-message { font-size: calc(12px * var(--app-font-scale)); color: var(--text-sub); margin-top: 2px; }
.apply-item-date { font-size: calc(10px * var(--app-font-scale)); color: var(--text-faint); margin-top: 2px; }

/* ---------------- Ad card ---------------- */
.post-card.ad-card { background: linear-gradient(135deg, #fff7ed, #fef3c7); border-color: #fde68a; }
.ad-badge {
  position: absolute; top: 10px; left: 10px; background: #f59e0b; color: #fff;
  font-size: calc(10px * var(--app-font-scale)); font-weight: 800; padding: 3px 8px; border-radius: 6px; z-index: 2;
}

/* ---------------- Mypage ---------------- */
.mypage-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.mypage-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--brand-light);
  color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: calc(22px * var(--app-font-scale));
}
.mypage-title { font-size: calc(19px * var(--app-font-scale)); font-weight: 800; margin: 0; }
.mypage-sub { font-size: calc(13px * var(--app-font-scale)); color: var(--text-sub); margin: 2px 0 0; }

.mypage-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.mypage-tab {
  padding: 10px 18px; border: none; background: none; font-size: calc(14px * var(--app-font-scale)); font-weight: 700;
  color: var(--text-faint); border-bottom: 2px solid transparent;
}
.mypage-tab-active { color: var(--brand); border-bottom-color: var(--brand); }

.mypage-auth-panel { margin-bottom: 16px; scroll-margin-top: 76px; }
.mypage-auth-panel-highlight .mypage-auth-logged-out,
.mypage-auth-panel-highlight .mypage-auth-logged-in {
  animation: mypage-auth-pulse 1.6s ease-out;
}
@keyframes mypage-auth-pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.mypage-auth-logged-out {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--radius-sm); background: var(--brand-light); border: 1px solid var(--border);
}
.mypage-auth-desc { font-size: calc(13px * var(--app-font-scale)); color: var(--text-sub); margin: 0; display: flex; align-items: center; gap: 6px; }
.mypage-auth-login-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mypage-auth-login-btn {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: #fff; color: var(--text); font-weight: 700; font-size: calc(13px * var(--app-font-scale)); border: 1px solid var(--border);
  white-space: nowrap;
}
.mypage-auth-login-btn:hover { background: #f3f4f6; }
.mypage-auth-login-btn-google i { color: #ea4335; }
.mypage-auth-login-btn-kakao { background: #FEE500; border-color: #FEE500; color: #191919; }
.mypage-auth-login-btn-kakao:hover { background: #fdd800; }
.mypage-auth-login-btn-kakao i { color: #191919; }

.mypage-auth-logged-in {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border);
}
.mypage-auth-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mypage-auth-info { flex: 1; min-width: 0; }
.mypage-auth-name { font-size: calc(14px * var(--app-font-scale)); font-weight: 700; margin: 0; }
.mypage-auth-email { font-size: calc(12px * var(--app-font-scale)); color: var(--text-faint); margin: 2px 0 0; }
.mypage-auth-logout-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: none; color: var(--text-sub); font-weight: 700; font-size: calc(12px * var(--app-font-scale)); border: 1px solid var(--border);
  white-space: nowrap;
}
.mypage-auth-logout-btn:hover { color: var(--danger); border-color: var(--danger); }

/* ---------------- 앱 글자 크기 조절 바 (로그인 패널 바로 아래, 상시 노출) ---------------- */
.mypage-font-size-section {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
}
.mypage-font-size-title {
  margin: 0 0 6px;
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mypage-font-size-desc {
  margin: 0 0 12px;
  font-size: calc(12.5px * var(--app-font-scale));
  color: var(--text-sub);
  line-height: 1.5;
}
.mypage-font-size-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.mypage-bottom-links {
  display: flex; flex-direction: column; gap: 8px; margin: 24px 0 8px;
  padding-top: 20px; border-top: 1px solid var(--border);
}

.mypage-admin-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: 10px 14px; border-radius: 10px;
  background: var(--bg-soft, #f3f4f6); color: var(--text-sub); font-size: calc(13px * var(--app-font-scale)); font-weight: 700;
  text-decoration: none; border: 1px dashed var(--border);
}
.mypage-admin-link:hover { color: var(--brand); border-color: var(--brand); }

.mypage-legal-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border-radius: 10px; background: var(--bg-soft, #f3f4f6);
  color: var(--text-sub); font-size: calc(12.5px * var(--app-font-scale)); font-weight: 700; text-decoration: none;
  border: 1px solid var(--border);
}
.mypage-legal-link:hover { color: var(--brand); border-color: var(--brand); }

.mypage-delete-account-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin: 4px 0 0; padding: 9px 10px; border-radius: 10px;
  background: none; color: var(--text-faint, #9aa0ac); font-size: calc(12.5px * var(--app-font-scale)); font-weight: 700;
  border: 1px solid transparent;
}
.mypage-delete-account-btn:hover { color: var(--danger); text-decoration: underline; }

.mypage-section { margin-bottom: 28px; }
.mypage-section-title { font-size: calc(15px * var(--app-font-scale)); font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.mypage-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 640px) { .mypage-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .mypage-grid { grid-template-columns: repeat(4, 1fr); } }
.mypage-empty { color: var(--text-faint); font-size: calc(13px * var(--app-font-scale)); padding: 20px 0; text-align: center; }
.mypage-empty a { color: var(--brand); font-weight: 700; }

.tile-card {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tile-card-dday {
  position: absolute; top: 8px; right: 8px; background: #fff; font-size: calc(10px * var(--app-font-scale)); font-weight: 700;
  padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.tile-card-dday.urgent { background: var(--danger); color: #fff; }
.tile-card-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(17,24,39,0.85), transparent);
  padding: 20px 10px 8px; color: #fff;
}
.tile-card-organizer { font-size: calc(10px * var(--app-font-scale)); opacity: 0.85; margin: 0; }
.tile-card-title { font-size: calc(12px * var(--app-font-scale)); font-weight: 700; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.is-closed-tile { opacity: 0.6; }
/* 대표 이미지가 없는 경우 카테고리 폴백 그라디언트 배경(.media-fallback.cat-N) 위에
   중앙 정렬된 아이콘을 표시한다(마이페이지 찜/작성글 타일 그리드용). */
.tile-card-fallback-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(26px * var(--app-font-scale));
}

/* ---------------- Admin ---------------- */
.admin-page { max-width: 1100px; margin: 0 auto; }
.admin-login { display: flex; justify-content: center; padding: 60px 20px; }
.admin-login-card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 26px; box-shadow: var(--shadow);
}
.admin-login-card h2 { font-size: calc(19px * var(--app-font-scale)); font-weight: 800; margin: 0 0 20px; display: flex; align-items: center; gap: 8px; }
.admin-login-card input {
  width: 100%; padding: 11px 14px; margin-bottom: 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: calc(14px * var(--app-font-scale)); outline: none;
}
.admin-login-card .btn-primary { width: 100%; justify-content: center; margin-top: 4px; }
.admin-login-error { color: var(--danger); font-size: calc(13px * var(--app-font-scale)); margin-top: 8px; }
.admin-bootstrap-toggle { margin-top: 18px; font-size: calc(13px * var(--app-font-scale)); color: var(--text-sub); }
.admin-bootstrap-toggle summary { cursor: pointer; font-weight: 600; }
.admin-bootstrap-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.admin-bootstrap-box input { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: calc(13px * var(--app-font-scale)); }
.admin-bootstrap-msg { font-size: calc(12px * var(--app-font-scale)); margin: 4px 0 0; }

.admin-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.admin-toolbar h2 { font-size: calc(20px * var(--app-font-scale)); font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; }
.admin-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 관리자 탭 네비게이션 */
.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.admin-tab-btn {
  border: none; background: none; padding: 10px 16px; font-size: calc(13px * var(--app-font-scale)); font-weight: 700;
  color: var(--text-sub); cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex; align-items: center; gap: 6px; transition: color .15s, background .15s;
}
.admin-tab-btn:hover { background: #f8f9fb; color: var(--text); }
.admin-tab-btn.active { color: var(--brand); background: var(--brand-light); box-shadow: inset 0 -2px 0 var(--brand); }
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }

/* 통계 대시보드 */
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.admin-stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.admin-stat-label { font-size: calc(12px * var(--app-font-scale)); font-weight: 700; color: var(--text-sub); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.admin-stat-value { font-size: calc(28px * var(--app-font-scale)); font-weight: 800; color: var(--text); line-height: 1; }
.admin-stat-sub { font-size: calc(11px * var(--app-font-scale)); color: var(--text-faint); margin-top: 6px; }
.admin-stat-total .admin-stat-value { color: #1d4ed8; }
.admin-stat-listed .admin-stat-value { color: var(--success); }
.admin-stat-closed .admin-stat-value { color: var(--text-faint); }
.admin-stat-blocked .admin-stat-value { color: var(--danger); }
.admin-stats-subtitle { font-size: calc(15px * var(--app-font-scale)); font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }

/* 팀원모집/후기&댓글 작성자 차단 태그 및 버튼 */
.tag-blocked { background: #fee2e2; color: var(--danger); }
.admin-row-actions .btn-secondary, .admin-row-actions .btn-ghost {
  font-size: calc(12px * var(--app-font-scale)); font-weight: 700; padding: 4px 8px; border-radius: 6px; cursor: pointer; border: none;
}

/* 차단 관리 탭 */
.admin-blocked-hint {
  display: flex; align-items: flex-start; gap: 10px; background: #eff6ff; color: #1d4ed8;
  border: 1px solid #bfdbfe; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
  font-size: calc(13px * var(--app-font-scale)); line-height: 1.5;
}
.admin-blocked-hint i { margin-top: 2px; }

.admin-filter-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.admin-filter-row input, .admin-filter-row select {
  padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: calc(13px * var(--app-font-scale)); background: var(--card);
}
.admin-filter-row input { flex: 1; min-width: 180px; }
.admin-toggle-closed-btn {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 42px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.admin-toggle-closed-btn:active { transform: scale(0.97); }
.admin-toggle-closed-btn.is-showing-closed { background: var(--brand-light); color: var(--brand); border-color: var(--brand); }

.admin-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); }
.admin-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--app-font-scale)); min-width: 920px; }
.admin-table th { text-align: left; padding: 12px 14px; background: #f8f9fb; color: var(--text-sub); font-weight: 700; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table td { padding: 11px 14px; border-bottom: 1px solid #f1f2f5; color: var(--text); }
.admin-row { cursor: pointer; transition: background 0.15s; }
.admin-row:hover { background: #f8f9fb; }
.td-title { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: calc(11px * var(--app-font-scale)); font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.tag-api { background: #dbeafe; color: #1d4ed8; }
.tag-wevity { background: #fce7f3; color: #be185d; }
.tag-allcon { background: #e0f2fe; color: #0369a1; }
.tag-crawled { background: #fef3c7; color: #b45309; }
.tag-manual { background: #e0e7ff; color: var(--brand); }
.tag-user { background: #dcfce7; color: #15803d; }
.tag-open { color: var(--success); font-weight: 700; }
.tag-closed { color: var(--text-faint); font-weight: 700; }
.admin-row-actions { display: flex; gap: 6px; }
.admin-row-actions button { border: none; background: none; font-size: calc(12px * var(--app-font-scale)); font-weight: 700; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.btn-edit { color: var(--brand); background: var(--brand-light); }
.btn-delete { color: var(--danger); background: #fee2e2; }
.btn-source { color: var(--text-sub); background: #f1f2f5; }
.btn-source:hover { color: var(--brand); background: var(--brand-light); }

/* 관리자 목록 썸네일: 이미지 있으면 미리보기, 없으면 빨간 경고 아이콘으로 강조해 이미지 누락을 즉시 식별 */
.admin-thumb {
  width: 48px; height: 48px; border-radius: 8px; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: #f1f2f5;
  border: 1px solid var(--border); flex-shrink: 0;
}
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-thumb-missing { background: #fef2f2; border-color: #fecaca; color: #ef4444; font-size: calc(16px * var(--app-font-scale)); }
.admin-thumb-missing:hover { background: #fee2e2; }

.admin-pagination { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.admin-pagination button {
  border: 1px solid var(--border); background: var(--card); border-radius: 8px;
  padding: 6px 11px; font-size: calc(12px * var(--app-font-scale)); font-weight: 600; color: var(--text-sub);
}
.admin-pagination button.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.admin-modal-backdrop {
  position: fixed; inset: 0; background: rgba(17,24,39,0.5); z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.admin-modal {
  width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  background: var(--card); border-radius: var(--radius); padding: 26px 24px;
}
.admin-modal h3 { font-size: calc(18px * var(--app-font-scale)); font-weight: 800; margin: 0; }
.admin-modal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.admin-modal-source-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--app-font-scale)); font-weight: 700;
  color: var(--brand); background: var(--brand-light); padding: 6px 12px; border-radius: 999px; text-decoration: none;
}
.admin-modal-source-link:hover { opacity: 0.85; }
.admin-modal-hint { font-size: calc(12px * var(--app-font-scale)); color: var(--text-faint); margin: 0 0 18px; }
.admin-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-form label { display: flex; flex-direction: column; gap: 5px; font-size: calc(12px * var(--app-font-scale)); font-weight: 700; color: var(--text-sub); }
.admin-form-full { grid-column: 1 / -1; }
.admin-form input, .admin-form select, .admin-form textarea {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; font-size: calc(13px * var(--app-font-scale)); font-weight: 400; color: var(--text); outline: none;
}
.admin-form textarea { resize: vertical; }
.admin-image-drop { min-height: 120px; transition: box-shadow 0.2s, border-color 0.2s; }
.admin-image-drop-highlight { border-color: var(--brand) !important; box-shadow: 0 0 0 4px var(--brand-light); }
.admin-image-missing-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--app-font-scale)); font-weight: 700;
  color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; padding: 4px 10px; border-radius: 6px; margin-bottom: 4px;
}
.admin-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ---------------- Board (게시판) ---------------- */
.board-page-sub { font-size: calc(13px * var(--app-font-scale)); color: var(--text-sub); margin: -8px 0 18px; line-height: 1.6; }

.board-tabbar { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.board-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 0; border: none; background: none;
  font-size: calc(14px * var(--app-font-scale)); font-weight: 700; color: var(--text-faint);
  border-bottom: 2px solid transparent;
}
.board-tab-active { color: var(--brand); border-bottom-color: var(--brand); }
.board-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: #eef0f4; color: var(--text-sub);
  font-size: calc(11px * var(--app-font-scale)); font-weight: 700;
}
.board-tab-active .board-tab-count { background: var(--brand); color: #fff; }

.board-write-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.board-write-toggle-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand-light); color: var(--brand); border: none;
  border-radius: var(--radius-sm); padding: 12px 0; font-size: calc(14px * var(--app-font-scale)); font-weight: 700;
}
.board-write-toggle-btn:hover { background: #e0e4ff; }

.board-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.board-form input[type="text"], .board-form input[type="number"], .board-form textarea {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: calc(13px * var(--app-font-scale)); outline: none; width: 100%;
}
.board-form textarea { min-height: 80px; resize: vertical; }
.board-form input:focus, .board-form textarea:focus { border-color: var(--brand); }
.board-form button[type="submit"] {
  align-self: flex-end; background: var(--brand); color: #fff; border: none;
  padding: 10px 20px; border-radius: 999px; font-size: calc(13px * var(--app-font-scale)); font-weight: 700;
}
.board-form button[type="submit"]:disabled { opacity: 0.6; }

.board-contest-picker { display: flex; flex-direction: column; gap: 6px; }
.board-contest-search-wrap { position: relative; }
.board-contest-search-wrap input {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: calc(13px * var(--app-font-scale)); outline: none; width: 100%;
}
.board-contest-search-wrap input:focus { border-color: var(--brand); }
.board-contest-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover); max-height: 240px; overflow-y: auto;
}
.board-contest-result-item {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border: none; background: none; text-align: left;
  border-bottom: 1px solid #f1f2f5;
}
.board-contest-result-item:last-child { border-bottom: none; }
.board-contest-result-item:hover { background: #f8f9fb; }
.board-contest-result-title { font-size: calc(13px * var(--app-font-scale)); font-weight: 700; color: var(--text); }
.board-contest-result-meta { font-size: calc(11px * var(--app-font-scale)); color: var(--text-faint); }
.board-contest-result-empty { padding: 14px; font-size: calc(12px * var(--app-font-scale)); color: var(--text-faint); text-align: center; }
.board-contest-selected {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--brand-light); color: var(--brand); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: calc(13px * var(--app-font-scale)); font-weight: 700;
}
.board-contest-selected-clear { background: none; border: none; color: var(--brand); font-size: calc(13px * var(--app-font-scale)); }

.board-list { display: flex; flex-direction: column; gap: 12px; }
.board-item {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); cursor: pointer;
}
.board-item:hover { box-shadow: var(--shadow-hover); }
.board-item.board-item-closed { opacity: 0.7; }
.board-item-contest-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--app-font-scale)); font-weight: 700;
  color: var(--brand); background: var(--brand-light); padding: 4px 10px; border-radius: 999px;
  margin-bottom: 10px;
}
.board-item-footer {
  display: flex; align-items: center; justify-content: space-between; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid #f1f2f5;
}
.board-item-link { font-size: calc(12px * var(--app-font-scale)); font-weight: 700; color: var(--text-faint); }

/* ============================================================
 * 정적 법률 문서 페이지(개인정보처리방침 등) — 심플한 텍스트 문서 레이아웃
 * ============================================================ */
.static-page { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.static-page-inner h1 { font-size: calc(24px * var(--app-font-scale)); font-weight: 800; margin-bottom: 4px; color: var(--text-strong, #1f2430); }
.static-page-updated { font-size: calc(13px * var(--app-font-scale)); color: var(--text-faint, #9aa0ac); margin-bottom: 24px; }
.static-page-inner h2 { font-size: calc(17px * var(--app-font-scale)); font-weight: 700; margin: 28px 0 10px; color: var(--text-strong, #1f2430); }
.static-page-inner p { font-size: calc(14px * var(--app-font-scale)); line-height: 1.7; color: var(--text-normal, #4b5160); margin-bottom: 10px; }
.static-page-inner ul { padding-left: 20px; margin-bottom: 10px; }
.static-page-inner li { font-size: calc(14px * var(--app-font-scale)); line-height: 1.7; color: var(--text-normal, #4b5160); margin-bottom: 4px; }
.static-page-inner a { color: #4f46e5; font-weight: 600; text-decoration: underline; }
.static-table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: calc(13px * var(--app-font-scale)); }
.static-table th, .static-table td { border: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; vertical-align: top; }
.static-table th { background: #f6f7fb; font-weight: 700; color: var(--text-strong, #1f2430); }
.static-table td { color: var(--text-normal, #4b5160); }