/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* 폰트는 app/layout.tsx의 <link>로 자체 호스팅해서 부른다 (public/fonts/wanted-sans).
   CSS @import는 이 파일을 받아 파싱한 뒤에야 발견돼 폰트 요청이 직렬로 늦어진다. */

/* ============================================================
   디자인 토큰 — DESIGN_GUIDE 실측 기반 라이트 시스템
   프리미티브 → 시맨틱 2단 구조. 보조 회색은 전부 네이비 알파.
   ============================================================ */
:root {
  /* 이 앱은 라이트 단일 테마다. 이걸 선언하지 않으면 OS/브라우저가 다크일 때
     UA 가 폼 컨트롤·캐럿·선택영역·**한글 IME 조합 중 글자**를 다크 팔레트로 그린다.
     그러면 입력면은 라이트인데 조합 중인 글자만 흰색으로 나와서, 타이핑하는 동안
     글자가 잠깐 안 보인다(확정되면 우리 color 로 다시 그려져 다시 보인다).
     증상이 "임시로 흰색"인 이유가 이것이다. */
  color-scheme: light;

  /* 면 */
  --bg-app: #f8f8f8;            /* 페이지 배경 밴드 */
  --bg-window: #ffffff;
  --bg-sidebar: #ffffff;
  --card: #ffffff;
  --card-soft: #f9fafb;
  --chip: rgba(9, 30, 66, 0.04);      /* 중립 면(입력/보조버튼) */
  /* 테두리 — 네이비 알파 스케일 */
  --border: rgba(9, 30, 66, 0.14);
  --border-soft: rgba(9, 30, 66, 0.08);
  --border-strong: rgba(9, 30, 66, 0.31);
  --redline: rgba(9, 30, 66, 0.14);   /* 구 크림슨 카드 보더 → 기본 보더로 통합 */
  --red-edge: rgba(9, 30, 66, 0.08);
  /* 텍스트 — 네이비 위계 */
  --text: #172b4d;
  --text-soft: #44546f;
  --text-muted: #626f86;
  --text-faint: rgba(9, 30, 66, 0.31);
  --ink: #1a1a1a;                     /* 지표 숫자/섹션 제목 */
  --hover: rgba(9, 30, 66, 0.04);
  --button: rgba(9, 30, 66, 0.04);
  /* 브랜드 그린 */
  --green: #00a36a;          /* 브랜드 메인 — 큰 숫자, 활성 탭 */
  --green-soft: #22bc7e;     /* 버튼 필 */
  --green-strong: #008656;   /* 브랜드 텍스트/호버 */
  --green-action: #006f46;
  --green-action-hover: #005c39;
  --hot: #22bc7e;
  --hot-press: #00a36a;
  --dark: rgba(9, 30, 66, 0.04);      /* 구 다크 입력면 → 중립 회색면 */
  /* 상태 — 텍스트 hue-70 기준 */
  --ok: #008656;
  --warn: #936e00;
  --warn-strong: #806000;
  --info: #0065e6;
  --danger: #cb342a;
  /* 네이버 카페 공감(좋아요) 하트 — 카페 PC 채움색 */
  --like: #ff4050;
  --identity-anon: #c2410c;
  --surface-ok: color-mix(in srgb, var(--green-soft) 10%, var(--card));
  --surface-info: color-mix(in srgb, var(--info) 8%, var(--card));
  --surface-danger: color-mix(in srgb, var(--danger) 8%, var(--card));
  --surface-anon: color-mix(in srgb, var(--identity-anon) 12%, var(--card));
  --border-ok: color-mix(in srgb, var(--green-strong) 38%, var(--border-soft));
  --border-info: color-mix(in srgb, var(--info) 38%, var(--border-soft));
  --border-danger: color-mix(in srgb, var(--danger) 38%, var(--border-soft));
  --gold: #f9b82e;
  /* 헤더 크레딧 번개 그라데이션 */
  --credit-bolt-from: #ffaa0d;
  --credit-bolt-to: #ff8400;
  --credit-bolt-ink: #3a2500;    /* 골드 면 위 텍스트 */
  /* 툴팁 — 규칙: 검은 배경 + 흰 글씨 (CLAUDE.MD 「UI tooltip policy」) */
  --tooltip-bg: #16191d;
  --tooltip-fg: #ffffff;
  --font: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", system-ui, "Segoe UI", "Malgun Gothic", sans-serif;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-overlay: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --radius: 24px;        /* 메인 카드 표준 */
  --radius-lg: 20px;     /* 내부 서브 카드 */
  --radius-sm: 12px;     /* 배너/버튼/썸네일 */
  --radius-xs: 8px;      /* 소형 메뉴/칩 */
  --radius-pill: 999px;
  --posting-modal-gutter: 24px;
  --posting-modal-section-gap: 20px;
  --posting-modal-backdrop-inset: 20px;
  --posting-modal-mobile-inset: 12px;
  --posting-modal-mobile-gutter: 16px;
  --max: 1200px;

  /* ▼ 디자인 토큰 게이트가 강제하는 스케일 — scripts/check-design-tokens.mjs
     여기 없는 색·글자크기·굵기는 CSS 에 직접 쓸 수 없다. 새 값이 필요하면
     먼저 이 블록에 이름을 주고 DESIGN.md 표를 갱신한다. */

  /* 회색면 — 흰 작업면 위에 얹는 면들. 밝은 순. */
  --card-hover: #fafbfc;        /* 카드 호버 미세 틴트 */
  --row-soft: #f8f9fa;          /* 리스트 항목 면 */
  --card-busy: #f7f8fa;         /* 카드 진행중 상태 면 */
  --band: #f5f6f7;              /* 상단 밴드·히어로·콘텐츠 카드 */
  --media-placeholder: #f1f2f4; /* 썸네일·이미지 자리 */
  --band-deep: #f0f2f5;         /* 밴드보다 눌린 면 */
  --band-deep-hover: #e6e9ee;   /* 위 면의 호버 */
  --border-cool: #e3e6eb;       /* 회색면 위 쿨 헤어라인 */

  /* 타이포 스케일. 반픽셀 값은 네이버 레퍼런스 실측 확정값. */
  --fs-7: 7px;
  --fs-9: 9px;
  --fs-10: 10px;
  --fs-10-5: 10.5px;
  --fs-11: 11px;
  --fs-11-5: 11.5px;
  --fs-12: 12px;
  --fs-12-5: 12.5px;
  --fs-13: 13px;
  --fs-13-5: 13.5px;
  --fs-14: 14px;
  --fs-14-5: 14.5px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-23: 23px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-34: 34px;
  --fs-40: 40px;

  /* 굵기 — 이 다섯 개가 전부다. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
::placeholder { color: var(--text-faint); }
/* 선택 영역도 UA 기본값에 맡기지 않는다 — color-scheme 과 같은 이유로, 환경에 따라
   선택한 글자가 흰색으로 뒤집혀 안 보이는 경우가 있다. */
::selection {
  background: color-mix(in srgb, var(--green) 26%, transparent);
  color: var(--text);
}

/* ===== App shell ===== */
.app-root {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  color: var(--text);
  /* 히어로 풀블리드(-100vw/-100vmax) 가 만드는 가로 넘침을 실제로 잘라내는 경계.
     body/html 의 overflow-x 는 뷰포트로 전파되면서 used value 가 visible 로 돌아가
     Chrome 에서 아무것도 자르지 못한다. 그 넘침을 남겨두면 서브헤더의
     scrollIntoView({inline:"center"}) 가 문서를 가로로 밀어 헤더가 어긋나 보인다.
     overflow-y 는 visible 로 남으므로 sticky 헤더는 그대로 뷰포트에 붙는다. */
  overflow-x: clip;
}
.app-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
}
/* 헤더·서브헤더는 경계선 없는 흰 밴드 — 회색 콘텐츠 밴드가 구획을 만든다 */
.app-header:has(+ .app-subheader) {
  border-bottom: none;
}

.app-header-inner {
  max-width: none;
  width: 100%;
  margin: 0;
  height: 56px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.app-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
  min-width: 0;
  flex: 1 1;
}
.app-nav a {
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.app-nav a:hover {
  color: var(--green-strong);
  background: transparent;
}
.app-nav a.active {
  color: var(--green-strong);
  background: transparent;
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Compact typography credit */
.hdr-credit {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 2px;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}
.hdr-credit:hover { opacity: 0.8; }
.hdr-credit-num {
  font-size: 15px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.hdr-credit-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-strong);
  line-height: 1;
}
.hdr-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}
.hdr-user {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1;
}
@media (max-width: 1024px) {
  .hdr-user { display: none; }
  .hdr-sep { display: none; }
}

.icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover {
  background: var(--hover);
  color: var(--text);
}

/* ===== Creator hub dropdown ===== */
.nav-hub {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-hub-trigger {
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}
.nav-hub:hover .nav-hub-trigger,
.nav-hub-trigger:focus-visible {
  color: var(--green-strong);
  background: transparent;
}
.nav-hub-trigger.active {
  color: var(--green-strong);
  background: transparent;
}
.nav-hub-caret {
  transition: transform 0.15s ease;
}
.nav-hub:hover .nav-hub-caret {
  transform: rotate(180deg);
}
.nav-hub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 50;
}
/* invisible bridge so the menu survives the cursor gap */
.nav-hub-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-hub:hover .nav-hub-menu,
.nav-hub:focus-within .nav-hub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-hub-menu a {
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-hub-menu a:hover {
  color: var(--text);
  background: var(--hover);
}
.nav-hub-menu a.active {
  color: var(--green-strong);
  background: rgba(34, 188, 126, 0.08);
}

/* ===== Creator sub-header — 그린 언더라인 탭 (가운데 정렬) ===== */
.app-subheader {
  position: -webkit-sticky;
  position: sticky;
  top: 56px;
  z-index: 39;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.app-subheader-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 48px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-subheader-inner::-webkit-scrollbar { display: none; }
.app-subheader-inner a {
  height: 100%;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.app-subheader-inner a:hover {
  color: var(--text-soft);
  background: transparent;
}
.app-subheader-inner a.active {
  color: var(--green);
  border-bottom-color: var(--green);
  background: transparent;
  font-weight: 600;
}
.app-main { flex: 1 1; }
.app-footer {
  padding: 18px 20px 22px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-app);
}
.page-body {
  /* 페이지별 가로폭: Shell data-page → 아래 토큰 오버라이드 */
  --page-max: var(--max);
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ===== 페이지별 메인 가로폭 (data-page) — 값은 추후 페이지마다 조정 ===== */
.page-body[data-page="dashboard"]  { --page-max: 1200px; }
.page-body[data-page="accounts"]   { --page-max: 1440px; }
/* 글쓰기 — 우측 사이드 제거 후 에디터 1열. 좋아요/댓글은 그 아래 전폭 */
.page-body[data-page="posting"]    { --page-max: 860px; }
.page-body[data-page="posts"] {
  --page-max: 1360px;
  padding-left: 48px;
  padding-right: 48px;
}
/* 본문 800.4 + gap 24 + 사이드 280 = 1104.4, 페이지 패딩 40 포함 */
.page-body[data-page="post-view"]  { --page-max: 1148px; }
.page-body[data-page="join"]       { --page-max: 1040px; }
.page-body[data-page="billing"]    { --page-max: 960px; }
.page-body[data-page="points"]     { --page-max: 960px; }
.page-body[data-page="me"]         { --page-max: 820px; }
.page-body[data-page="cafes"]      { --page-max: 1000px; }
.page-body[data-page="cafe-detail"]{ --page-max: 900px; }
.page-body[data-page="plan"]       { --page-max: 880px; }
.page-body[data-page="logs"]       { --page-max: 1180px; }
.page-body[data-page="monitoring"] { --page-max: 1140px; }
.page-body[data-page="simulations"]{ --page-max: 1020px; }
.page-body[data-page="warnings"]   { --page-max: 980px; }
.page-heading {
  margin-bottom: 2px;
}
.page-heading .section-title {
  margin-top: 2px;
  font-size: 18px;
}
.page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
}



/* ===== Cards / surfaces ===== */
.card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--border-soft);
}
.card h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.card h2 .hint {
  font-weight: 500;
}
.section-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green-strong);
  margin: 0 0 4px;
}
.section-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0 4px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.stat-label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 14px; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 14px; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; grid-gap: 16px; gap: 16px; }
@media (max-width: 1100px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .app-header-inner { gap: 14px; }
  .app-nav a { font-size: 14px; padding: 0 8px; }
}

@media (max-width: 720px) {
  .app-header-inner {
    padding: 0 20px;
    gap: 12px;
  }
  .app-nav { display: none; }
  .header-right { gap: 6px; }
  .hdr-credit-num { font-size: 14px; }
  .hdr-credit-unit { font-size: 11px; }
  .icon-btn { width: 34px; height: 34px; }
}

/* ===== Controls ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--hot);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover {
  background: var(--hot-press);
  border-color: transparent;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.ghost,
.btn.secondary {
  background: var(--chip);
  border-color: transparent;
  color: var(--text);
}
.btn.ghost:hover,
.btn.secondary:hover {
  background: rgba(9, 30, 66, 0.08);
  border-color: transparent;
}
.btn.sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}
.btn.row { width: 100%; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  height: 44px;
  background: var(--chip);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 12px;
  outline: none;
  font-size: 14px;
  color: var(--text);
}
.field textarea {
  height: auto;
  padding: 10px 12px;
  min-height: 88px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: -1px;
}

/* 클래스 없는 네이티브 폼 요소도 라이트 회색면으로 (:where로 특이도 0 유지 — 페이지 CSS가 항상 이김) */
select:where(:not([class])),
input:where(:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])) {
  height: 38px;
  background: var(--chip);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
textarea:where(:not([class])) {
  background: var(--chip);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  outline: none;
}
select:where(:not([class])):focus,
input:where(:not([class])):focus,
textarea:where(:not([class])):focus {
  outline: 2px solid var(--green);
  outline-offset: -1px;
}

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.toolbar .spacer { flex: 1 1; }
.toolbar select,
.toolbar input {
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--chip);
  border: none;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text);
}

.hint { color: var(--text-muted); font-size: 12px; line-height: 1.5; font-weight: 400; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-soft); }
.empty { color: var(--text-faint); padding: 28px 0; text-align: center; font-size: 13px; }
.empty-box {
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}
.empty-box .btn { margin-top: 14px; }

.table-wrap {
  overflow: auto;
  border-radius: var(--radius-xs);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data th,
table.data td {
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}
table.data th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  border-bottom-color: var(--border-soft);
}
table.data td {
  font-weight: 500;
  color: var(--text);
}
table.data tr:hover td { background: var(--card-soft); }

.modal-card.modal-confirm {
  width: min(420px, 100%);
}
.confirm-text {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
  word-break: keep-all;
}
.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 18px;
}
.confirm-actions .btn {
  height: 40px;
  border-radius: var(--radius-sm);
}
.btn.confirm-danger {
  background: #f8544b;
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.btn.confirm-danger:hover {
  background: #e4463b;
  filter: none;
}

/* 상태 배지 — 텍스트 hue-70, 배경 hue-50 @14% 공식 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  border: none;
  color: var(--text-muted);
  background: var(--chip);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge.ok { border-color: transparent; color: var(--green-strong); background: rgba(34, 188, 126, 0.14); }
.badge.warn { border-color: transparent; color: var(--warn); background: rgba(207, 159, 0, 0.14); }
.badge.info { border-color: transparent; color: var(--info); background: rgba(54, 138, 255, 0.14); }
.badge.muted { border-color: transparent; color: var(--text-muted); background: var(--chip); }

.score { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 700; }
.score.high { color: var(--danger); }
.score.mid { color: var(--warn); }
.score.low { color: var(--green-strong); }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.row-btns { display: flex; gap: 8px; }
.row-btns .btn { flex: 1 1; }

.log-line {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-soft);
  font-size: 13px;
}
.log-line .t {
  color: var(--text-faint);
  margin-right: 8px;
  font-size: 12px;
}

/* Login — 글쓰기와 같은 밴드 + 흰 테두리 카드 */
.login-wrap {
  min-height: 100dvh;
  display: grid;
  /* auto 트랙은 카드 min-content(≈369px) 로 부풀어 375px 뷰포트에서
     padding 24px 를 더해 오른쪽으로 18px 넘친다. minmax(0,1fr) 로
     트랙을 콘텐츠 박스 안에 가둔다. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px;
  background: var(--band);
}
.login-card {
  width: min(420px, 100%);
  max-width: 100%;
  min-width: 0;
  justify-self: center;
  border-radius: var(--radius);
  border: 2px solid #fff;
  background: var(--band);
  padding: 28px 24px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
}
.login-card h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-field > label {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-soft);
}
.login-input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: #fff;
  color: var(--text);
  font-size: var(--fs-14);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-soft) 22%, transparent);
}
.login-submit {
  width: 100%;
  height: 48px;
  margin-top: 4px;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--green-action);
  color: #fff;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.login-submit:hover:not(:disabled) {
  background: var(--green-action-hover);
}
.login-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  font-size: var(--fs-13);
  color: var(--text-muted);
}
.login-links a,
.login-links button {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.login-links a:hover,
.login-links button:hover {
  color: var(--green-strong);
}
.legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}
.legal-links a {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--border-strong);
          text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.legal-links a:hover {
  color: var(--text);
  -webkit-text-decoration-color: currentColor;
          text-decoration-color: currentColor;
}
.legal-links a:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--green-strong);
  outline-offset: 3px;
}
.login-legal-links {
  margin-top: 20px;
}

/* Setup + switches */
.setup-hero {
  border-color: rgba(34, 188, 126, 0.35);
  background: linear-gradient(135deg, rgba(34, 188, 126, 0.1), var(--card) 58%);
}
.setup-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.setup-steps .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}
.setup-steps .step span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(9, 30, 66, 0.08);
  color: var(--text-soft);
  font-size: 11px;
}
.setup-steps .step.on {
  border-color: rgba(34, 188, 126, 0.45);
  color: var(--green-strong);
  background: rgba(34, 188, 126, 0.1);
}
.setup-steps .step.on span,
.setup-steps .step.done span { background: var(--green); color: #fff; }
.setup-steps .step.done {
  border-color: rgba(34, 188, 126, 0.3);
  color: var(--green-strong);
}
.setup-next {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
  font-weight: 500;
}

.cafe-switch-list { display: flex; flex-direction: column; gap: 10px; }
.cafe-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--card-soft);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cafe-switch-row.is-on {
  border-color: rgba(34, 188, 126, 0.4);
  background: rgba(34, 188, 126, 0.08);
}
.cafe-switch-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.cafe-switch-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.switch {
  position: relative;
  width: 76px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(9, 30, 66, 0.08);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: background 0.15s ease;
}
.switch .switch-knob {
  position: absolute;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, background 0.15s ease;
}
.switch .switch-label {
  width: 100%;
  text-align: right;
  padding-right: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.switch.on {
  background: var(--green-soft);
  border-color: transparent;
}
.switch.on .switch-knob {
  transform: translateX(42px);
  background: #fff;
}
.switch.on .switch-label {
  text-align: left;
  padding-left: 12px;
  padding-right: 0;
  color: #fff;
}
.switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* cafe management */
table.data tr.row-click {
  cursor: pointer;
}
table.data tr.row-click:hover td {
  background: var(--card-soft);
}
.modal-card.modal-cafe-add {
  width: min(640px, 100%);
  max-height: min(86vh, 820px);
  overflow: auto;
}
.cafe-candidate-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1;
}
.cafe-list-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cafe-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
  background: var(--media-placeholder);
}
.cafe-thumb.sm {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
}
.cafe-thumb-empty {
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
}
.cafe-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cafe-tabs button {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--chip);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cafe-tabs button:hover {
  background: rgba(9, 30, 66, 0.08);
  color: var(--text);
}
.cafe-tabs button.active {
  background: rgba(34, 188, 126, 0.14);
  border-color: transparent;
  color: var(--green-strong);
}
.cafe-detail-head {
  padding: 14px 16px;
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
@media (max-width: 900px) {
  .policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.field textarea {
  font-family: inherit;
  color: var(--text);
  width: 100%;
}
.modal-card.modal-post-detail {
  width: min(760px, 100%);
  max-height: min(92vh, 960px);
  overflow: auto;
  padding: 0 0 18px;
  background: #fff;
}
.modal-card.modal-post-detail .modal-head {
  margin: 0;
  padding: 14px 18px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}
/* 네이버 카페 글 뷰어 스타일 */
.naver-article-box {
  margin: 0 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}
.naver-article-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.naver-board-link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-strong);
  margin-bottom: 10px;
}
.naver-title-text {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text);
  word-break: keep-all;
}
.naver-writer-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.naver-writer-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-soft);
  background: var(--media-placeholder);
}
.naver-writer-thumb.empty {
  display: block;
}
.naver-writer-meta {
  min-width: 0;
}
.naver-nick {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.naver-article-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.naver-mod-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
  font-size: 12px;
}
.naver-article-container {
  padding: 8px 8px 18px;
  max-height: 56vh;
  overflow: auto;
}
.naver-article-viewer {
  padding: 8px 12px 4px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
  word-break: break-word;
}
.naver-article-viewer .se-main-container,
.naver-article-viewer .se-component {
  max-width: 100%;
}
.naver-article-viewer img,
.naver-article-viewer .se-image-resource {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 10px auto;
  border-radius: 8px;
}
.naver-article-viewer .se-module-image-link {
  pointer-events: none;
}
.naver-article-viewer p,
.naver-article-viewer .se-text-paragraph {
  margin: 0 0 8px;
}
.naver-article-viewer a {
  color: var(--info);
}
.post-detail-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.post-detail-img-link {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--media-placeholder);
  aspect-ratio: 1;
}
.post-detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-detail-body {
  padding: 14px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}
.post-detail-comment {
  margin: 12px 18px 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(34, 188, 126, 0.3);
  background: rgba(34, 188, 126, 0.08);
  font-size: 13px;
  line-height: 1.5;
}
.modal-card.modal-post-detail .confirm-actions {
  padding: 0 18px;
}

/* Modal */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(9, 30, 66, 0.49);
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal-card {
  width: min(480px, 100%);
  background: var(--card);
  border: none;
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-overlay);
}
.modal-card.modal-captcha {
  width: min(640px, 100%);
  padding: 0;
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.modal-card.modal-captcha .modal-head {
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--card-soft);
}
.modal-head strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Captcha auth panel */
.captcha-panel {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.captcha-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.captcha-badge {
  display: inline-flex;
  align-self: flex-start;
  height: 24px;
  padding: 0 10px;
  align-items: center;
  border-radius: 999px;
  background: rgba(248, 84, 75, 0.14);
  border: none;
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.captcha-title {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.captcha-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  font-weight: 400;
}
.captcha-account {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.captcha-q-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--card-soft);
  padding: 12px 14px;
}
.captcha-q-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-strong);
  margin-bottom: 6px;
}
.captcha-q-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  word-break: keep-all;
}
.captcha-stage {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.captcha-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--card-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}
.captcha-img-wrap {
  width: 100%;
  min-height: 280px;
  max-height: 480px;
  padding: 20px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--media-placeholder);
  overflow: auto;
}
.captcha-img {
  display: block;
  /* 네이버 원본(~380x140)을 UI에서 크게 키워 글자 판독 */
  width: min(100%, 560px);
  max-width: min(100%, 560px);
  min-width: min(100%, 360px);
  height: auto;
  min-height: 220px;
  max-height: 460px;
  object-fit: contain;
  image-rendering: auto;
  background: #fff;
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card-hover);
}
.captcha-img-empty {
  min-height: 200px;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-size: 13px;
  padding: 24px;
}
.captcha-answer-field { margin-bottom: 0; }
.captcha-answer-field input {
  height: 46px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.captcha-alert {
  border: none;
  background: rgba(248, 84, 75, 0.14);
  color: var(--danger);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}
.captcha-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  grid-gap: 8px;
  gap: 8px;
}
.captcha-actions .btn {
  height: 42px;
  border-radius: var(--radius-sm);
}
.captcha-submit { font-weight: 600; }


/* compat aliases used by older pages */
.shell-top { min-height: 100dvh; display: flex; flex-direction: column; }
.content { max-width: var(--max); margin: 0 auto; padding: 28px 20px 48px; display: flex; flex-direction: column; gap: 20px; width: 100%; }

/* ===== 로딩 스켈레톤 (공용) — 값이 들어올 자리에만 깐다.
   헤더·레이블처럼 이미 아는 텍스트는 그대로 두고, 서버 응답에 의존하는 값만 회색 바로 대체한다.
   폭은 실제 값 길이에 맞춰 지정해서 값이 채워질 때 레이아웃이 튀지 않게 한다. */
.sk {
  display: inline-block;
  height: 12px;
  border-radius: 6px;
  background-color: rgba(9, 30, 66, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(9, 30, 66, 0) 0%,
    rgba(9, 30, 66, 0.06) 50%,
    rgba(9, 30, 66, 0) 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: sk-sweep 1.3s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes sk-sweep {
  from { background-position: -110% 0; }
  to { background-position: 210% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
}
/* 배지·칩 자리는 그 모양대로 */
.sk.pill { height: 20px; border-radius: 6px; }
.sk.dot { width: 18px; height: 18px; border-radius: 999px; }

/* 헤더 — 권한(creator_access)에 따라 갈리는 메뉴와 포인트 값.
   user가 오기 전엔 아예 렌더되지 않아 메뉴가 뒤늦게 튀어나오던 자리 */
.sk.sk-nav { height: 14px; border-radius: 7px; }
/* 실제 항목 폭 그대로 — 대시보드 71, 카페 크리에이터 131, 포인트 칩 93 */
.sk.sk-nav-dash { width: 71px; }
.sk.sk-nav-hub { width: 131px; }
.sk.sk-credit { width: 93px; height: 14px; }

/* 서브헤더 탭 자리 — 실제 <a>와 같은 박스, 안에 레이블을 투명하게 깔아 폭을 맞춘다 */
.app-subheader-inner .sk-tab {
  height: 100%;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  font-weight: 500;
}
.sk.sk-text {
  height: auto;
  border-radius: 7px;
  color: transparent;
}