/* onsaede — base layout (STEP_04 4-A).
 * 변수는 tokens.css (단일 진실 공급원). 인라인 스타일 금지.
 */

* { box-sizing: border-box; }

/* ★[hidden] 전역 보정(2026-07-30) — 반드시 유지할 것.
   브라우저 기본값 `[hidden]{display:none}`은 ★약해서, 우리가 어떤 클래스에 display:flex/grid를
   주는 순간 조용히 무력화된다. 실제 사고: '문제 지문 개수' 행이 `hidden`인데도 .gen-final-stat의
   display:flex에 밀려 늘 보였고, 지문을 넣지도 않았는데 "1개"가 떠 있었다(사장님 지적).
   개별 컴포넌트마다 `.x[hidden]{display:none}`을 덧붙이는 땜질(로더·미리보기·확인모달에 이미 3곳)
   대신 여기서 한 번에 막는다 — 앞으로 hidden 속성은 어디서든 그대로 동작한다. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--gray-700);
  font-family: var(--font-sans);
  font-size: var(--text-14);
  line-height: var(--lh-1-5);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }

/* ── header / brand (STEP_01·02 기본 페이지용) ────────────────────────── */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--gray-100);
  padding: var(--sp-12) var(--sp-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  text-decoration: none;
}
/* 좌상단 로고 심볼(onsaede-bird) — 전 페이지 공통(§2-5 onsaede 고정). */
.brand-logo-img {
  height: 26px;
  width: auto;
  display: block;
}
.brand-name {
  font-size: var(--text-20);
  font-weight: var(--w-700);
  letter-spacing: -0.01em;
  color: var(--navy);
}
.brand-domain {
  font-size: var(--text-12);
  font-weight: var(--w-400);
  color: var(--gray-500);
}
.site-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: 13px;
}
.site-nav a {
  text-decoration: none;
  color: var(--navy);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-4);
}
.site-nav a:hover { background: var(--gray-100); }
.site-user { color: var(--gray-500); font-weight: var(--w-600); }
.role-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  font-size: 11px;
  font-style: normal;
  color: var(--bg);
  background: var(--navy);
  border-radius: 3px;
}

.site-main {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--sp-40) var(--sp-24);
}

/* ── landing (STEP_01 임시) ─────────────────────────────────────────── */
.landing-title {
  font-size: 28px;
  font-weight: var(--w-700);
  color: var(--navy);
  margin: 0 0 var(--sp-8);
}
.landing-sub {
  font-size: 15px;
  color: var(--gray-700);
  margin: 0 0 var(--sp-24);
}
.landing-meta {
  font-size: 13px;
  color: var(--gray-500);
  margin: 6px 0;
}
.landing-meta a {
  text-decoration: none;
  border-bottom: 1px dotted var(--navy);
}

/* ══════════════════════════════════════════════════════════════════════ */
/* STEP_04 4-A — 로그인 / 회원가입 풀스크린 2단 레이아웃                       */
/* ══════════════════════════════════════════════════════════════════════ */
.auth-fullpage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;          /* 데스크탑 우선 (반응형은 4-D) */
  background: var(--bg);
}

/* 좌측 비주얼 패널 */
.auth-visual {
  position: relative;
  background: var(--gray-50);
  padding: var(--sp-48);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 좌상단 고정 브랜드(§2-5 로고 항상 노출) */
.auth-visual-brand {
  position: absolute;
  top: var(--sp-32);
  left: var(--sp-48);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  text-decoration: none;
}
.auth-visual-brand .brand-logo-img { height: 30px; width: auto; display: block; }
.auth-visual-brand .brand-name {
  font-size: var(--text-24);
  font-weight: var(--w-700);
  color: var(--navy);
  letter-spacing: -0.01em;
}
.auth-visual-illust {
  max-width: 420px;
  margin: 0 auto var(--sp-32);
}
.auth-visual-illust img,
.auth-visual-illust svg {
  width: 100%;
  height: auto;
  display: block;
}
/* unDraw SVG 부재 시 fallback placeholder. JS onerror가 img→placeholder 전환. */
.auth-visual-placeholder {
  display: none;
  aspect-ratio: 4 / 3;
  background: var(--gray-100);
  border-radius: var(--r-12);
  border: 1px dashed var(--gray-300);
}
.auth-visual-message {
  max-width: 420px;
  margin: 0 auto;
}
.auth-visual-message h2 {
  font-size: var(--text-24);
  font-weight: var(--w-700);
  color: var(--navy);
  margin: 0 0 var(--sp-12);
  line-height: var(--lh-1-3);
}
.auth-visual-message p {
  font-size: var(--text-16);
  color: var(--gray-700);
  margin: 0;
  line-height: var(--lh-1-7);
}

/* 우측 폼 패널 */
.auth-pane {
  padding: var(--sp-48);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-pane-inner {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.auth-pane h1 {
  font-size: var(--text-24);
  font-weight: var(--w-700);
  color: var(--navy);
  margin: 0 0 var(--sp-8);
}
.auth-pane-sub {
  font-size: var(--text-14);
  color: var(--gray-500);
  margin: 0 0 var(--sp-24);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.auth-label {
  font-size: var(--text-12);
  font-weight: var(--w-600);
  color: var(--gray-700);
}
.auth-hint {
  font-size: var(--text-12);
  font-weight: var(--w-400);
  font-style: normal;
  color: var(--gray-500);
  margin-left: var(--sp-4);
}

/* 입력 — 좌측 아이콘 슬롯 */
.auth-input-wrap {
  position: relative;
}
.auth-input-wrap .icon-leading {
  position: absolute;
  left: var(--sp-12);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gray-500);
  pointer-events: none;
}
.auth-input-wrap .icon-trailing {
  position: absolute;
  right: var(--sp-12);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gray-500);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.auth-input {
  font-family: inherit;
  font-size: var(--text-14);
  height: var(--h-input);
  padding: 0 var(--sp-12) 0 calc(var(--sp-12) + 18px + var(--sp-8));
  border: 1px solid var(--gray-300);
  border-radius: var(--r-8);
  background: var(--bg);
  color: var(--gray-700);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.auth-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.10);
}
.auth-input.has-trailing { padding-right: calc(var(--sp-12) + 18px + var(--sp-8)); }
.auth-input.no-icon { padding-left: var(--sp-12); }

.auth-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--text-14);
  color: var(--gray-700);
  cursor: pointer;
}
.auth-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
}

.auth-submit {
  margin-top: var(--sp-8);
  height: var(--h-btn-48);
  padding: 0 var(--sp-16);
  font-size: var(--text-16);
  font-weight: var(--w-600);
  color: var(--bg);
  background: var(--navy);
  border: 0;
  border-radius: var(--r-8);
  cursor: pointer;
  transition: background 0.15s;
}
.auth-submit:hover { background: var(--navy-700); }
.auth-submit:focus-visible { outline: 3px solid rgba(30, 58, 95, 0.30); outline-offset: 2px; }

.auth-err {
  font-size: var(--text-12);
  color: var(--danger);
  margin: var(--sp-4) 0 0;
}

/* 상태 알림 (실패·승인대기 등) */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  font-size: var(--text-14);
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-8);
  margin-bottom: var(--sp-16);
  line-height: var(--lh-1-5);
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-danger {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid #fecaca;
}
.alert-info {
  color: var(--info);
  background: var(--info-bg);
  border: 1px solid #bfdbfe;
}
.alert-success {
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid #bbf7d0;
}

.auth-meta {
  font-size: var(--text-12);
  color: var(--gray-500);
  margin: var(--sp-24) 0 0;
  text-align: center;
}
.auth-meta a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px dotted var(--navy);
}
.auth-meta-divider { color: var(--gray-300); margin: 0 var(--sp-8); }

/* ── 기존 STEP_02 .auth-card 호환(혹시 다른 화면에서 사용 중일 때) ────── */
.auth-card {
  max-width: 380px;
  margin: var(--sp-48) auto;
  padding: var(--sp-32) var(--sp-24);
  background: var(--bg);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-12);
  box-shadow: var(--sh-card);
}
.auth-title {
  font-size: var(--text-24);
  font-weight: var(--w-700);
  color: var(--navy);
  margin: 0 0 var(--sp-16);
}
.auth-flash {
  font-size: var(--text-14);
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-8);
}
.auth-flash-error { color: var(--danger); background: var(--danger-bg); border: 1px solid #fecaca; }
.auth-flash-info { color: var(--info); background: var(--info-bg); border: 1px solid #bfdbfe; }
.auth-warn {
  color: #92400e;
  background: #fffbea;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-8);
  border: 1px solid #fde68a;
}

/* ══════════════════════════════════════════════════════════════════════ */
/* STEP_04 4-B — 생성 화면 (3단 레이아웃 + 6 카테고리 아코디언)                */
/* 정정 반영: 다난이도 허용 / 인라인 4 미니버튼 / 50+ 경고 / 시맨틱 태그        */
/* 모두 tokens.css 변수만 사용. 인라인 스타일 금지(CLAUDE.md §2-5).            */
/* ══════════════════════════════════════════════════════════════════════ */

/* ── 상단 네비 (gen-nav) ─────────────────────────────────────────────── */
.gen-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-24);
  padding: var(--sp-12) var(--sp-24);
  background: var(--bg);
  border-bottom: 1px solid var(--gray-100);
}
.gen-nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: var(--sp-8);
}
.gen-nav-logo {
  height: 26px;
  width: auto;
  display: block;
}
.gen-nav-brand-name {
  font-size: var(--text-18, 18px);
  font-weight: var(--w-700);
  letter-spacing: -0.01em;
  color: var(--navy);
}
.gen-nav-text-fallback {
  display: none;
  align-items: baseline;
  gap: var(--sp-4);
}
.gen-nav-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  justify-self: center;
}
.gen-nav-item {
  display: inline-flex;        /* §4-1: 아이콘 + 라벨 가로 정렬 */
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--text-14);
  font-weight: var(--w-600);
  color: var(--gray-700);
  text-decoration: none;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-8);
  transition: background 0.15s;
}
.gen-nav-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.gen-nav-item:hover { background: var(--gray-100); }
.gen-nav-item.is-active {
  color: var(--navy);
  background: var(--gray-100);
}
.gen-nav-item.is-disabled {
  color: var(--gray-300);
  pointer-events: none;
  cursor: not-allowed;
}
.gen-nav-user {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--text-12);
  color: var(--gray-500);
}
.gen-nav-username {
  font-weight: var(--w-600);
  color: var(--gray-700);
  text-decoration: none;
}
a.gen-nav-username:hover { color: var(--navy); }
.gen-nav-logout {
  color: var(--navy);
  text-decoration: none;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-4);
}
.gen-nav-logout:hover { background: var(--gray-100); }

/* ── 로그인 사용자 드롭다운(최상단 우측) — base/_navbar 공용(_user_menu.html)
   ★2026-07-29 재설계(사장님: "더 세련되고 전문적으로"):
     · 트리거 = 네이비 그라디언트 이니셜 아바타 + [아이디 / 등급] 2줄 + 캐럿
     · 패널   = 계정 헤더 카드 + 아이콘 메뉴(STEP 아이콘과 같은 네이비→스카이 그라디언트 라인)
   색은 브랜드 축(흰 배경·네이비 포인트, §2-5)에서 벗어나지 않는다. */
.user-menu { position: relative; display: inline-block; }
.user-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
  box-shadow: 0 1px 2px rgba(30, 58, 95, 0.06);
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.08s;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary::marker { content: ''; }
.user-menu > summary:hover {
  border-color: var(--navy-300, #8FA5C3);
  box-shadow: 0 3px 10px rgba(30, 58, 95, 0.12);
}
.user-menu > summary:active { transform: translateY(1px); }
.user-menu > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* 이니셜 아바타 — 그라디언트 원. 트리거용(28px)·패널 헤더용(36px) 두 크기. */
.user-menu-avatar,
.user-menu-head-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, #38BDF8 100%);
  color: #fff;
  font-size: var(--text-13, 13px);
  font-weight: var(--w-700, 700);
  line-height: 1;
  text-transform: uppercase;
}
.user-menu-id { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-menu-name {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-13, 13px);
  font-weight: var(--w-700, 700);
  color: var(--gray-800, #1F2937);
  line-height: 1.2;
}
.user-menu-role {
  font-size: 11px;
  font-weight: var(--w-600, 600);
  color: var(--gray-500);
  line-height: 1.2;
}
.user-menu-caret { width: 14px; height: 14px; color: var(--gray-400, #9CA3AF); transition: transform 0.16s; }
.user-menu[open] > summary { border-color: var(--navy-300, #8FA5C3); }
.user-menu[open] > summary .user-menu-caret { transform: rotate(180deg); color: var(--navy); }

/* ★2026-07-30 사장님 지적("좁게 몰려있고 작고 조잡함") — 국내외 대형 서비스(구글·노션·토스)
   드롭다운 실측치에 맞춰 재조정: 패널 폭 232→268px, 항목 높이 34→44px, 글자 14→14.5px,
   항목 간 간격 0→2px, 패널 여백 6→8px. 손가락·마우스 모두 편한 크기(최소 44px 권고치). */
.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 268px;
  padding: var(--sp-8);
  background: #fff;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.06),
    0 18px 44px rgba(17, 24, 39, 0.18);
  z-index: 100;
  animation: user-menu-in 0.14s ease-out;
}
@keyframes user-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 계정 헤더 카드 — 아바타 + [아이디 / 등급] */
.user-menu-head {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12);
  margin-bottom: var(--sp-8);
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.05) 0%, rgba(56, 189, 248, 0.08) 100%);
  border-radius: 12px;
}
.user-menu-head-avatar { width: 42px; height: 42px; font-size: var(--text-16, 16px); }
.user-menu-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.user-menu-head-text strong {
  font-size: var(--text-15, 15px);
  font-weight: var(--w-700, 700);
  color: var(--gray-800, #1F2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-head-text em {
  font-style: normal;
  font-size: var(--text-12);
  font-weight: var(--w-600, 600);
  color: var(--navy);
}
/* 메뉴 항목 — 그라디언트 라인 아이콘 + 라벨. 높이 44px(터치 권고 최소치)로 넉넉하게. */
.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: 44px;
  padding: var(--sp-10) var(--sp-12);
  margin-bottom: 2px;
  font-size: 14.5px;
  font-weight: var(--w-600, 600);
  color: var(--gray-700);
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.14s, color 0.14s, padding-left 0.14s;
}
.user-menu-ico { flex: 0 0 auto; width: 20px; height: 20px; }
.user-menu-item:hover {
  background: rgba(30, 58, 95, 0.06);
  color: var(--navy);
  padding-left: calc(var(--sp-12) + 3px);   /* 미세한 밀림 — 어느 항목에 있는지 즉각 인지 */
}
.user-menu-item.is-admin { color: var(--navy); }
/* 관리자 항목 아래 구분선 — 관리 영역과 개인 설정을 시각적으로 분리 */
.user-menu-item.is-admin {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--gray-100);
  border-radius: 10px 10px 0 0;
}
.user-menu-logout {
  color: var(--danger, #DC2626);
  border-top: 1px solid var(--gray-100);
  margin-top: var(--sp-8);
  padding-top: var(--sp-12);
  margin-bottom: 0;
  border-radius: 0 0 10px 10px;
}
.user-menu-logout:hover { background: var(--danger-bg, #FEF2F2); color: var(--danger, #DC2626); }

/* 4-C: GENERATION_MODE 배지 — admin에게만 보임. mock=녹, test_cheap=주. */
.gen-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-4);
  font-size: 11px;
  font-weight: var(--w-700);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}
.gen-mode-mock {
  color: #064e3b;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
}
.gen-mode-test_cheap {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

/* ── 본문 main 컨테이너 ─────────────────────────────────────────────── */
.gen-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-24);
}

/* ── #1 2열 레이아웃: 좌(STEP1~3 스텝카드, 세로 스택) / 우(플로팅 sticky 생성 패널) ──
   우측 패널은 스크롤을 따라다님(position: sticky). 이그잼포유·족보닷컴풍 '장바구니' 형태. */
.gen-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-24);
  align-items: start;
}
.gen-col-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  min-width: 0;   /* 그리드 자식 오버플로 방지(긴 지문·코드행 가로 스크롤 허용) */
}
.gen-col-side {
  position: sticky;
  top: var(--sp-16);
  align-self: start;
}

/* (구 .gen-steps 단일컬럼 레이아웃은 #1에서 .gen-layout 2열로 대체됨) */
.gen-step {
  background: var(--bg);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-12);
  padding: var(--sp-16) var(--sp-24) var(--sp-24);
  box-shadow: var(--sh-soft);
}
.gen-step-head {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin: 0 0 var(--sp-16);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--gray-100);
}
/* #2 STEP 뱃지 — 원형 숫자 대체. 그라데이션 알약형(모던·살짝 입체감). */
.gen-step-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: 0 0 auto;
  padding: 5px 11px;
  background: linear-gradient(135deg, var(--navy-500) 0%, var(--navy) 60%, #16294a 100%);
  color: #fff;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(30, 58, 95, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.gen-step-badge-label {
  font-size: 10px;
  font-weight: var(--w-700);
  letter-spacing: 0.10em;
  opacity: 0.85;
}
.gen-step-badge-num {
  font-size: var(--text-16);
  font-weight: var(--w-700);
}
.gen-step-ico { width: 20px; height: 20px; color: var(--navy); flex: 0 0 auto; }
.gen-step-title { font-size: var(--text-16); font-weight: var(--w-700); color: var(--navy); margin: 0; }
.gen-step-opt {
  margin-left: auto;
  font-size: var(--text-12);
  color: var(--gray-500);
  background: var(--gray-50);
  padding: 2px var(--sp-8);
  border-radius: var(--r-4);
}
.gen-step-grid { display: flex; flex-direction: column; gap: var(--sp-12); }
.gen-upload-row { margin-top: var(--sp-12); }

/* §3-1 지문 유형 버튼 */
.gen-ptype {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-16);
}
.gen-ptype-label { font-size: var(--text-12); font-weight: var(--w-600); color: var(--gray-500); }
.gen-ptype-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--w-600);
  padding: var(--sp-4) var(--sp-12);
  background: var(--bg);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.gen-ptype-btn:hover { border-color: var(--navy-300); color: var(--navy); }
.gen-ptype-btn.is-on { background: var(--navy); color: var(--bg); border-color: var(--navy); }
.gen-ptype-hint { font-size: var(--text-12); color: var(--gray-500); margin-left: var(--sp-4); }

.gen-section-title {
  font-size: var(--text-16);
  font-weight: var(--w-700);
  color: var(--navy);
  margin: 0 0 var(--sp-12);
}

/* ── 좌측 입력 패널 ─────────────────────────────────────────────────── */
.gen-left {
  background: var(--bg);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-12);
  padding: var(--sp-16);
  box-shadow: var(--sh-soft);
}
.gen-passages { display: flex; flex-direction: column; gap: var(--sp-16); }
.gen-passage {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-8);
  padding: var(--sp-12);
}
.gen-passage-label {
  display: block;
  font-size: var(--text-12);
  font-weight: var(--w-600);
  color: var(--navy);
  margin-bottom: var(--sp-4);
}
.gen-textarea {
  width: 100%;
  min-height: 350px;
  font-family: inherit;
  font-size: var(--text-14);
  line-height: var(--lh-1-5);
  padding: var(--sp-12);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-8);
  background: var(--bg);
  color: var(--gray-700);
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gen-textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.10);
}
.gen-passage-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-4);
  font-size: var(--text-12);
  color: var(--gray-500);
}
.gen-char-count strong { color: var(--gray-700); }
.gen-passage-remove {
  font-size: var(--text-12);
  color: var(--danger);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-4);
}
.gen-passage-remove:hover { background: var(--danger-bg); }

/* +지문 추가 — 이전엔 배경=페이지색+얇은 점선이라 묻혔음. 채운 톤+굵은 테두리+호버 반전으로 강조. */
.gen-btn-secondary {
  width: 100%;
  margin-top: var(--sp-12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-12) var(--sp-16);
  font-size: var(--text-15, 15px);
  font-weight: var(--w-700);
  color: var(--navy);
  background: rgba(30, 58, 95, 0.06);
  border: 1.5px solid var(--navy);
  border-radius: var(--r-8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.gen-btn-secondary:hover {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.18);
}

/* ── 생성 확인 모달 (예상 문제수·비용 → 제작 시작) ── */
.gen-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--sp-16);
}
.gen-confirm-overlay[hidden] { display: none; }
.gen-confirm-box {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: var(--r-16, 16px);
  padding: var(--sp-24, 24px);
  box-shadow: 0 20px 60px rgba(17, 24, 39, 0.28);
}
.gen-confirm-title { font-size: var(--text-18, 18px); font-weight: var(--w-700); color: var(--gray-800, #1F2937); margin: 0 0 var(--sp-16); }
.gen-confirm-body { display: flex; flex-direction: column; gap: var(--sp-8); margin-bottom: var(--sp-12); }
.gen-confirm-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-14); color: var(--gray-600, #4B5563); }
.gen-confirm-row strong { color: var(--gray-800, #1F2937); font-weight: var(--w-700); }
.gen-confirm-main { padding: var(--sp-10) var(--sp-12); background: rgba(30, 58, 95, 0.06); border-radius: var(--r-8); font-size: var(--text-15, 15px); }
.gen-confirm-main strong { color: var(--navy); font-size: var(--text-20, 20px); }
.gen-confirm-note { font-size: var(--text-12); color: var(--gray-500, #6B7280); margin: 0 0 var(--sp-16); line-height: 1.5; }
.gen-confirm-actions { display: flex; gap: var(--sp-8); }
.gen-confirm-cancel, .gen-confirm-ok {
  flex: 1;
  height: 46px;
  border-radius: var(--r-8);
  font-size: var(--text-15, 15px);
  font-weight: var(--w-700);
  cursor: pointer;
  border: 1px solid var(--gray-300, #D1D5DB);
}
.gen-confirm-cancel { background: #fff; color: var(--gray-600, #4B5563); }
.gen-confirm-cancel:hover { background: var(--gray-50); }
.gen-confirm-ok { background: var(--navy); color: #fff; border-color: var(--navy); }
.gen-confirm-ok:hover { background: var(--navy-700, #16304f); box-shadow: 0 4px 12px rgba(30, 58, 95, 0.28); }

.gen-left-extras { margin-top: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-8); }
.gen-extra-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: var(--sp-8);
}
.gen-extra-label {
  font-size: var(--text-12);
  font-weight: var(--w-600);
  color: var(--gray-500);
}
.gen-input {
  font-family: inherit;
  font-size: var(--text-14);
  height: var(--h-input);
  padding: 0 var(--sp-12);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-8);
  background: var(--bg);
  color: var(--gray-700);
}
.gen-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.10);
}
.gen-btn-ghost {
  font-family: inherit;
  font-size: var(--text-14);
  height: var(--h-input);
  padding: 0 var(--sp-12);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-8);
  background: var(--gray-50);
  color: var(--gray-500);
  cursor: not-allowed;
}

/* ── §3-2 자료 업로드 컨트롤 ─────────────────────────────────────────── */
.gen-upload-ctl { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
/* 파일 input은 시각 숨김(접근성 유지) — 라벨이 트리거 */
.gen-upload-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gen-upload-btn {                 /* ghost의 not-allowed 오버라이드 — 실제 클릭 가능 */
  cursor: pointer;
  color: var(--navy);
  border-color: var(--navy-300);
  background: var(--bg);
  transition: background 0.15s;
}
.gen-upload-btn:hover { background: var(--gray-50); }
.gen-upload-input:focus-visible + .gen-upload-btn {
  outline: 3px solid rgba(30, 58, 95, 0.25); outline-offset: 2px;
}
.gen-upload-status { font-size: var(--text-12); color: var(--gray-500); }
.gen-upload-status.is-ok   { color: var(--navy); font-weight: var(--w-600); }
.gen-upload-status.is-warn { color: #92400e; }
.gen-upload-status.is-err  { color: var(--danger); }

/* ── 우측 옵션 패널 ─────────────────────────────────────────────────── */
.gen-right {
  background: var(--bg);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-12);
  padding: var(--sp-16);
  box-shadow: var(--sh-soft);
  max-height: 75vh;
  overflow-y: auto;
}
.gen-categories { display: flex; flex-direction: column; gap: var(--sp-8); }

.gen-cat {
  border: 1px solid var(--gray-100);
  border-radius: var(--r-8);
  background: var(--gray-50);
}
.gen-cat-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-12);
  font-size: var(--text-14);
  font-weight: var(--w-700);
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.gen-cat-summary::-webkit-details-marker { display: none; }
.gen-cat-summary::before {
  content: '▶';
  font-size: var(--text-12);
  color: var(--gray-500);
  transition: transform 0.15s;
}
.gen-cat[open] > .gen-cat-summary::before { transform: rotate(90deg); }
.gen-cat-count { color: var(--gray-500); font-weight: var(--w-400); margin-left: auto; }
.gen-cat-summary:hover { background: var(--gray-100); border-radius: var(--r-8); }
/* #3 카테고리 아이콘 — 컬러 그라데이션 앱타일(SVG 자체 색). 펼침 카드 강조(전문성). */
.gen-cat-icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* ★그라디언트 라인 아이콘(2026-07-29 v3) — 색칩 배경이 없어 그림자를 걸면 선이 지저분해진다.
   대신 크기를 키워 선 자체가 보이게 한다(라인 아이콘은 작으면 존재감이 사라진다). */
.gen-cat-icon svg { width: 30px; height: 30px; }
.gen-cat { transition: border-color 0.15s, box-shadow 0.15s; }
.gen-cat[open] { border-color: var(--navy-300); box-shadow: var(--sh-soft); }
.gen-cat[open] > .gen-cat-summary {
  background: rgba(30, 58, 95, 0.04);
  border-radius: var(--r-8) var(--r-8) 0 0;
}
/* 8번: '출제' 토글 — 칩 형태(단일 버튼·선택 시 체크) */
.gen-select-btn { border-radius: var(--r-4); min-width: 56px; }
.gen-select-btn[aria-pressed="true"]::before { content: '✓ '; font-weight: var(--w-700); }

/* 유형 리스트 */
.gen-type-list {
  list-style: none;
  margin: 0;
  padding: var(--sp-4) var(--sp-8) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
/* 행/헤더 공통 그리드 — 4열 고정폭으로 [유형][난이도][보기설정][문제수] 세로 정렬.
   border-left 3px 만큼 헤더도 동일하게 들여 정렬을 맞춘다. */
.gen-type-row,
.gen-type-head {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 162px 150px 172px;
  align-items: center;
  gap: var(--sp-8);
  border-left: 3px solid transparent;
}
.gen-type-row {
  padding: var(--sp-8);
  padding-left: calc(var(--sp-8) - 3px + 3px);
  background: var(--bg);
  border-radius: var(--r-4);
  transition: background 0.15s, border-color 0.15s;
}
.gen-type-row.is-selected {
  border-left-color: var(--navy);
  background: rgba(30, 58, 95, 0.03);
}
/* 컬럼 제목 행 */
.gen-type-head {
  padding: 0 var(--sp-8) var(--sp-4) var(--sp-8);
}
.gen-th {
  font-size: var(--text-12);
  font-weight: var(--w-700);
  color: var(--gray-500);
}
/* ★번호·유형명 클릭으로도 선택(2026-07-30) — 클릭 가능한 영역임을 손 모양·hover로 알린다.
   작은 [출제] 버튼을 정조준하지 않아도 되니 실제 사용이 훨씬 빠르다. */
.gen-type-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--text-14);
  cursor: pointer;
  padding: 3px 6px;
  margin-left: -6px;
  border-radius: var(--r-6, 6px);
  user-select: none;
  transition: background 0.14s;
}
.gen-type-label:hover { background: rgba(30, 58, 95, 0.05); }
.gen-type-label:hover .gen-type-code { background: rgba(30, 58, 95, 0.14); }
/* 유형 표시번호 — 2026-07-29 알파벳(a,b,c…) → ★숫자(1,2,3…)로 변경.
   "몇 번이 무슨 유형인지" 한눈에 들어오도록 회색 텍스트가 아니라 ★번호칩으로 표시한다.
   폭 고정(26px)이라 한 자리(1~9)·두 자리(10~22)가 섞여도 유형 이름 시작점이 흐트러지지 않는다. */
.gen-type-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  font-size: var(--text-12);
  font-weight: var(--w-700, 700);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  background: rgba(30, 58, 95, 0.07);
  border-radius: var(--r-6, 6px);
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}
/* ★선택된 유형의 번호칩(2026-07-30) — 채운 그라디언트로 '이 번호가 켜졌다'를 멀리서도 보이게.
   행 배경(.is-selected)은 아주 옅어서 번호칩이 실질적인 선택 표시가 된다. */
.gen-type-row.is-selected .gen-type-code {
  background: linear-gradient(135deg, var(--navy) 0%, #38BDF8 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(30, 58, 95, 0.28);
}
.gen-type-row.is-selected .gen-type-label:hover .gen-type-code { background: linear-gradient(135deg, #2a4f7d 0%, #4cc4f9 100%); }
.gen-type-row.is-selected .gen-type-name { color: var(--navy); font-weight: var(--w-600, 600); }
.gen-type-name { color: var(--gray-700); }

/* 인라인 미니버튼 — 다중 선택 (택1 아님).
   ★2026-07-30: 일괄선택 세그먼트(.gen-seg-btn)와 ★같은 시각 언어로 통일 —
   표면 그라디언트 + 눌리면 네이비 그라디언트 + 1px 내려앉기. 화면 전체가 한 벌로 보인다. */
.gen-diff-group { display: inline-flex; gap: 3px; }
.gen-diff-btn {
  font-family: inherit;
  font-size: var(--text-12);
  font-weight: var(--w-600);
  padding: 5px var(--sp-8);
  min-width: 38px;
  color: var(--navy);
  background: linear-gradient(180deg, #ffffff 0%, #eef3fc 100%);
  border: 1px solid rgba(30, 58, 95, 0.18);
  border-radius: var(--r-6, 6px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(30, 58, 95, 0.08);
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s,
              box-shadow 0.16s, transform 0.08s;
}
.gen-diff-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #dfe9fb 100%);
  border-color: var(--navy-300);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 6px rgba(30, 58, 95, 0.14);
}
.gen-diff-btn[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, #35577f 0%, var(--navy) 100%);
  border-color: var(--navy);
  font-weight: var(--w-700, 700);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset,
    0 2px 6px rgba(30, 58, 95, 0.24);
}
.gen-diff-btn:active { transform: translateY(1px); }
.gen-diff-btn:focus-visible { outline: 2px solid var(--navy-300); outline-offset: 1px; z-index: 1; position: relative; }

/* 전역 옵션(시험지 단위) — QR 정답답지 제공/미제공. 생성옵션 최상단. */
.gen-global-opts {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-12);
  padding: var(--sp-8) var(--sp-12);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-8);
}
.gen-global-opt-label {
  font-size: var(--text-12);
  font-weight: var(--w-600);
  color: var(--gray-500);
}

/* QR 정답답지 전역 옵션 — 눈에 잘 띄게(2026-07-23). 네이비 강조 카드 + 아이콘 + 설명. */
.gen-qr-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin: 0 0 var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  background: var(--navy-50, #eef2fb);
  border: 1.5px solid var(--navy-200, #c7d2f0);
  border-left: 4px solid var(--navy);
  border-radius: var(--r-8);
}
.gen-qr-opt-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--navy);
}
.gen-qr-opt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.gen-qr-opt-label {
  font-size: var(--text-15, 15px);
  font-weight: var(--w-700, 700);
  color: var(--navy);
}
.gen-qr-opt-desc {
  font-size: var(--text-12);
  color: var(--gray-500);
  line-height: 1.4;
}
.gen-qr-opt-desc b { color: var(--navy); font-weight: var(--w-700, 700); }
.gen-qr-opt-toggle { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 560px) {
  .gen-qr-opt { flex-wrap: wrap; }
  .gen-qr-opt-toggle { margin-left: 0; width: 100%; }
}

/* ── 일괄 선택 바(2026-07-29, 2차 가로 배치) — QR 카드 바로 아래.
   ★아래 유형 표(.gen-type-head/.gen-type-row)와 동일한 4열 그리드를 써서
   [문제 유형][출제][보기 설정][문제 수]가 세로로 정렬된다 — "이 열을 한 번에 바꾸는 버튼"임이
   보는 즉시 전달되도록. 열 폭이 바뀌면 두 곳을 같이 고칠 것(정렬이 깨진다). */
.gen-bulk {
  margin: 0 0 var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  background: var(--bg);
  border: 1.5px solid var(--navy-200, #c7d2f0);
  border-left: 4px solid var(--navy);
  border-radius: var(--r-8);
}
.gen-bulk-head {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-bottom: var(--sp-12);
}
.gen-bulk-ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--navy); }
.gen-bulk-title {
  font-size: var(--text-15, 15px);
  font-weight: var(--w-700, 700);
  color: var(--navy);
}
.gen-bulk-desc { font-size: var(--text-12); color: var(--gray-500); }
.gen-bulk-desc b { color: var(--navy); font-weight: var(--w-700, 700); }

/* ★유형 표와 같은 4열(.gen-type-row와 동일 값) — 열 폭이 바뀌면 두 곳을 함께 고칠 것.
   padding은 0: 카드의 border-left(4px)+padding(16px)이 이미 표의 행 들여쓰기와 맞아떨어진다
   (실측 정렬 오차: 1열 0px, 2~4열 1px). 여기에 8px를 더 주면 1열만 밀린다. */
.gen-bulk-cols {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 162px 150px 172px;
  align-items: center;
  gap: var(--sp-8);
}
.gen-bulk-col-th {
  font-size: var(--text-12);
  font-weight: var(--w-700, 700);
  color: var(--gray-500);
  padding-bottom: var(--sp-4);
}
/* ★열 이름을 그 아래 버튼 묶음 한가운데에 맞춘다(2026-07-29 → 07-30 1열까지 확대).
   2~4열의 .gen-seg는 width:100%라 텍스트만 가운데 두면 버튼 묶음 중앙과 일치하고,
   1열(문제 유형)은 버튼이 내용 폭(gen-seg-auto)이므로 ★셀 자체를 가운데 정렬해 함께 맞춘다. */
.gen-bulk-col-th { text-align: center; }
.gen-bulk-cols .gen-bulk-cell:first-child { text-align: center; }
.gen-bulk-cell { min-width: 0; }
/* (보조 설명 줄은 2026-07-29 사장님 지시로 제거 — 안내는 버튼 title로 대체) */

/* ── 세그먼트 컨트롤 — 연결된 한 덩어리 + ★입체감(2026-07-29 사장님: "3D·상큼하게").
   기법: ① 표면 그라디언트(위 밝게→아래 살짝 어둡게) ② 안쪽 하이라이트(inset 흰 선)
   ③ 바깥 그림자 ④ 누를 때 1px 내려앉기. 색은 브랜드 네이비 계열만 사용(§2-5). */
.gen-seg {
  display: inline-flex;
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(30, 58, 95, 0.10),
    0 2px 6px rgba(30, 58, 95, 0.07);
}
/* ★열 폭에 맞춰 버튼이 균등 분배되도록 — 고정 min-width로 두면 좁은 열(보기 설정 150px,
   문제 수 172px)에서 글자가 세로로 깨진다(실측). 버튼은 열을 꽉 채우고 줄바꿈을 금지한다.
   '문제 유형' 열은 1fr로 넓어 꽉 채우면 어색하므로 내용 폭 유지. */
.gen-bulk-cell .gen-seg { display: flex; width: 100%; }
/* width:auto만으로는 안 된다 — display:flex는 블록 레벨이라 auto가 곧 '부모 폭 100%'다.
   내용 폭으로 줄이려면 inline-flex + 버튼 grow 해제까지 함께 걸어야 한다. */
/* ★'전체 선택'·'해제'(2026-07-30 사장님 지시)
   ① 두 버튼 ★크기 동일(min-width 고정 — 글자수가 4자/2자로 달라도 폭이 같아야 짝으로 보인다)
   ② 붙은 세그먼트가 아니라 ★떨어진 두 버튼(간격 10px)으로 — 서로 다른 동작임이 즉시 구분된다.
      그래서 묶음(.gen-seg)의 배경·그림자를 걷어내고 각 버튼이 스스로 입체감을 갖게 한다. */
.gen-bulk-cell .gen-seg.gen-seg-auto {
  display: inline-flex;
  width: auto;
  gap: 10px;
  overflow: visible;
  background: none;
  box-shadow: none;
}
.gen-seg-auto .gen-seg-btn {
  flex: 0 0 auto;
  min-width: 96px;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(30, 58, 95, 0.14),
    0 3px 8px rgba(30, 58, 95, 0.10);
}
.gen-seg-auto .gen-seg-btn:hover:not(:disabled) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 4px rgba(30, 58, 95, 0.16),
    0 6px 14px rgba(30, 58, 95, 0.14);
}
.gen-seg-auto .gen-seg-btn:active:not(:disabled) {
  box-shadow: 0 1px 2px rgba(30, 58, 95, 0.18);
}
.gen-seg-btn {
  appearance: none;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  padding: 9px 10px;
  font: inherit;
  font-size: var(--text-13, 13px);
  font-weight: var(--w-600, 600);
  letter-spacing: -0.01em;
  color: var(--navy);
  background: linear-gradient(180deg, #ffffff 0%, #eef3fc 100%);
  border: 0;
  /* ★칸막이 강화(2026-07-30): 경계선 1줄만으로는 버튼이 몇 개인지 잘 안 보였다.
     진한 선 + 오른쪽 흰 하이라이트(box-shadow)로 ★홈이 파인 것처럼 보이게 해 구분을 세운다. */
  border-left: 1px solid rgba(30, 58, 95, 0.28);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.85) inset;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease,
              box-shadow 0.16s ease, transform 0.08s ease;
}
.gen-seg-btn:first-child { border-left: 0; box-shadow: none; }
.gen-seg-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffffff 0%, #dfe9fb 100%);
  color: var(--navy-700, #2D4D7A);
}
/* 눌린(적용된) 상태 — 채운 네이비 + 안쪽 그림자로 '들어간' 느낌. */
.gen-seg-btn[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, #35577f 0%, var(--navy) 100%);
  font-weight: var(--w-700, 700);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset;
}
.gen-seg-btn[aria-pressed="true"]:hover:not(:disabled) {
  background: linear-gradient(180deg, #3d618c 0%, #234669 100%);
  color: #fff;
}
/* 클릭 순간 1px 눌림 — 물리적인 버튼 느낌. */
.gen-seg-btn:active:not(:disabled) { transform: translateY(1px); }
.gen-seg-btn:disabled {
  color: var(--gray-400, #9ca3af);
  background: linear-gradient(180deg, #fafbfc 0%, #f1f3f6 100%);
  cursor: not-allowed;
}
.gen-seg-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.gen-seg-num .gen-seg-btn { padding: 9px 0; text-align: center; }

/* 좁은 화면 — 4열 정렬을 포기하고 라벨+버튼 세로 스택으로(가독성 우선). */
@media (max-width: 900px) {
  .gen-bulk-cols {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-left: 0;
  }
  .gen-bulk-cols[aria-hidden="true"] { display: none; }
  .gen-bulk-notes { display: none; }
  .gen-bulk-cell { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-bottom: var(--sp-8); }
  .gen-bulk-cell::before {
    content: attr(data-label);
    align-self: center;
    min-width: 66px;
    font-size: var(--text-12);
    font-weight: var(--w-700, 700);
    color: var(--gray-500);
  }
}

/* 보기 설정(행별) — 보기 언어 / 답안 언어 세그먼트. 영문/한글 버튼 사이 간격 살짝. */
.gen-lang-group {
  display: inline-flex;
  gap: 6px;
  margin-left: var(--sp-4);
}
/* 보기 언어 토글이 무의미한 유형(글의구조·대화순서) — '5지 고정' 정적 표시 */
.gen-lang-fixed { align-items: center; }
.gen-lang-fixed-text {
  font-size: var(--text-12);
  color: var(--gray-400);
  padding: 0 var(--sp-8);
  white-space: nowrap;
}
/* 난이도 1개 고정 유형의 '중' 버튼 — 선택 가능하되 '고정'임을 시각적으로 약하게 표시 */
.gen-diff-btn.is-single { border-radius: var(--r-4); font-variant: small-caps; }
.gen-lang-opt {
  display: inline-flex;
  cursor: pointer;
}
.gen-lang-opt input[type="radio"],
.gen-lang-opt input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
/* 보기 설정 — 위 버튼들과 같은 그라디언트 언어(2026-07-30). 라디오/체크박스는 숨기고 span이 버튼. */
.gen-lang-opt span {
  display: inline-block;
  font-size: var(--text-12);
  font-weight: var(--w-600);
  padding: 5px var(--sp-8);
  color: var(--navy);
  background: linear-gradient(180deg, #ffffff 0%, #eef3fc 100%);
  border: 1px solid rgba(30, 58, 95, 0.18);
  border-radius: var(--r-6, 6px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(30, 58, 95, 0.08);
  white-space: nowrap;
  transition: background 0.16s, color 0.16s, border-color 0.16s,
              box-shadow 0.16s, transform 0.08s;
}
.gen-lang-opt:hover span {
  background: linear-gradient(180deg, #ffffff 0%, #dfe9fb 100%);
  border-color: var(--navy-300);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 6px rgba(30, 58, 95, 0.14);
}
.gen-lang-opt:active span { transform: translateY(1px); }
.gen-lang-opt input[type="radio"]:checked + span,
.gen-lang-opt input[type="checkbox"]:checked + span {
  color: #fff;
  background: linear-gradient(180deg, #35577f 0%, var(--navy) 100%);
  border-color: var(--navy);
  font-weight: var(--w-700, 700);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset,
    0 2px 6px rgba(30, 58, 95, 0.24);
}
.gen-lang-opt input[type="radio"]:focus-visible + span,
.gen-lang-opt input[type="checkbox"]:focus-visible + span {
  outline: 2px solid var(--navy-300);
  outline-offset: 1px;
}

/* 문제 수(행별) — 1~5 세그먼트. 베타: 1만 활성, 2~5 disabled. */
.gen-count-group { display: inline-flex; gap: 3px; }
.gen-count-btn {
  font-family: inherit;
  font-size: var(--text-12);
  font-weight: var(--w-600);
  font-variant-numeric: tabular-nums;
  padding: 5px 0;
  min-width: 30px;
  color: var(--navy);
  background: linear-gradient(180deg, #ffffff 0%, #eef3fc 100%);
  border: 1px solid rgba(30, 58, 95, 0.18);
  border-radius: var(--r-6, 6px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(30, 58, 95, 0.08);
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s,
              box-shadow 0.16s, transform 0.08s;
}
.gen-count-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffffff 0%, #dfe9fb 100%);
  border-color: var(--navy-300);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 6px rgba(30, 58, 95, 0.14);
}
.gen-count-btn[aria-pressed="true"]:not(:disabled) {
  color: #fff;
  background: linear-gradient(180deg, #35577f 0%, var(--navy) 100%);
  border-color: var(--navy);
  font-weight: var(--w-700, 700);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset,
    0 2px 6px rgba(30, 58, 95, 0.24);
}
.gen-count-btn:active:not(:disabled) { transform: translateY(1px); }
.gen-count-btn:disabled {
  background: linear-gradient(180deg, #fafbfc 0%, #f1f3f6 100%);
  color: var(--gray-300);
  border-color: var(--gray-200, #E5E7EB);
  box-shadow: none;
  cursor: not-allowed;
}
.gen-count-btn:focus-visible { outline: 2px solid var(--navy-300); outline-offset: 1px; z-index: 1; position: relative; }

/* 베타 안내 / 좌측 입력 보조 */
.gen-beta-note {
  margin: 0 0 var(--sp-8);
  font-size: var(--text-12);
  color: var(--info);
  background: var(--info-bg);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-4);
}
.gen-extra-hint {
  display: block;
  margin-top: 2px;
  font-size: var(--text-12);
  color: var(--gray-500);
}
.gen-file { padding: var(--sp-4); font-size: var(--text-12); }

/* ── 하단 최종 선택 영역 (크게) ─────────────────────────────────────── */
/* 좌(요약 지표) | 우(배치·총비용·생성버튼) 수평 분할 */
/* #1 플로팅 생성 패널 — sticky는 부모 .gen-col-side가 담당. 카드는 세로 스택. */
.gen-final {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-24);
  background: var(--bg);
  border: 2px solid var(--navy-300);
  border-radius: var(--r-12);
  box-shadow: var(--sh-card);
}
/* ── 내 포인트 카드(2026-07-30) — 생성 요약 맨 위. 잔액·단가·차감후·충전 진입을 한 덩어리로.
   짙은 네이비 카드로 흰 패널 위에서 '값이 걸린 자리'임을 분명히 한다(브랜드 축 유지, §2-5). */
.gen-point {
  padding: var(--sp-16);
  border-radius: var(--r-12, 12px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(56, 189, 248, 0.38) 0%, rgba(56, 189, 248, 0) 55%),
    linear-gradient(135deg, #1E3A5F 0%, #16304f 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(30, 58, 95, 0.28);
}
.gen-point-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.gen-point-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-12);
  font-weight: var(--w-700, 700);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}
.gen-point-ico { width: 16px; height: 16px; }
.gen-point-charge {
  flex: 0 0 auto;
  padding: 5px 12px;
  font-size: var(--text-12);
  font-weight: var(--w-700, 700);
  color: var(--navy);
  text-decoration: none;
  background: linear-gradient(180deg, #ffffff 0%, #e8f1fd 100%);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.1s, box-shadow 0.16s;
}
.gen-point-charge:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 12px rgba(0, 0, 0, 0.26); }
.gen-point-charge:active { transform: translateY(1px); }
.gen-point-value { display: flex; align-items: baseline; gap: 5px; }
.gen-point-value strong {
  font-size: 30px;
  font-weight: var(--w-700, 700);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.gen-point-value small { font-size: var(--text-12); color: rgba(255, 255, 255, 0.72); }
.gen-point-foot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-12);
  color: rgba(255, 255, 255, 0.78);
}
.gen-point-foot b { color: #fff; font-weight: var(--w-700, 700); font-variant-numeric: tabular-nums; }
.gen-point-sep { color: rgba(255, 255, 255, 0.35); }
/* 잔액 부족 — 카드 테두리를 경고색으로 물들여 '충전하기'로 시선을 보낸다. */
.gen-point.is-low { box-shadow: 0 0 0 2px var(--danger, #DC2626) inset, 0 6px 18px rgba(30, 58, 95, 0.28); }
.gen-point.is-low .gen-point-foot b { color: #FCA5A5; }

.gen-final-title {
  margin: 0;
  padding-bottom: var(--sp-12);
  font-size: var(--text-16);
  font-weight: var(--w-700);
  color: var(--navy);
  border-bottom: 1px solid var(--gray-100);
}
/* 상단: 선택 지문 + 총 생성 문제 수 (세로 스택, 하단 구분선) */
.gen-final-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--gray-100);
}
/* 우측: 배치 / 총 비용 / 생성 버튼 (세로 스택, 라벨 폭 통일) */
.gen-final-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.gen-final-row {
  display: grid;
  grid-template-columns: 72px 1fr;   /* 라벨 폭 고정 → 배치/총비용 좌측 정렬 일치 */
  align-items: baseline;
  column-gap: var(--sp-12);
  min-height: 28px;
}
.gen-final-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gen-final-stat-label {
  font-size: var(--text-12);
  font-weight: var(--w-600);
  color: var(--gray-500);
}
/* ④⑤ 분할 근거 문구(소제목 N개 기준 / 모의고사 지문 N개 / 문장 수 기준). */
.gen-units-basis {
  font-style: normal;
  font-weight: var(--w-500);
  color: var(--navy, #1e3a5f);
  font-size: var(--text-11, 11px);
}
.gen-final-stat-value {
  font-size: var(--text-16);
  color: var(--gray-700);
}
.gen-final-stat-value strong { color: var(--navy); font-weight: var(--w-700); }
.gen-final-stat-main .gen-final-stat-value strong {
  font-size: var(--text-24);
  display: inline-block;
  transition: transform 0.2s ease-out;
}
.gen-final-stat-main .gen-final-stat-value strong.pulse { transform: scale(1.12); }
/* 총 비용 행: 라벨은 첫 줄과 baseline 정렬, 값+크레딧 라인은 우측 컬럼에 세로 스택 */
.gen-final-cost .gen-final-cost-value {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gen-final-batch-opts { display: inline-flex; gap: var(--sp-12); flex-wrap: wrap; }
.gen-radio-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-13, 13px);
  color: var(--gray-700);
  cursor: pointer;
  white-space: nowrap;
}
.gen-radio-mini input[type="radio"] { accent-color: var(--navy); }

.gen-final-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}
.gen-final-actions .gen-final-btn { width: 100%; }
.gen-credit-line {
  display: block;
  margin: 2px 0 0;
  font-size: var(--text-12);
  color: var(--gray-500);
}
.gen-credit-line strong { color: var(--navy); font-weight: var(--w-700); }
.gen-empty-hint {
  margin: 0;
  font-size: var(--text-12);
  color: var(--gray-500);
}
.gen-warn-info {
  margin: 0;
  font-size: var(--text-12);
  color: var(--info);
  background: var(--info-bg);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-4);
}
.gen-warn-warn {
  margin: 0;
  font-size: var(--text-12);
  color: #92400e;
  background: #fffbea;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-4);
  border: 1px solid #fde68a;
}
.gen-final-btn {
  font-family: inherit;
  font-size: var(--text-20);
  font-weight: var(--w-700);
  color: var(--bg);
  background: var(--navy);
  border: 0;
  border-radius: var(--r-8);
  height: 56px;
  padding: 0 var(--sp-32);
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.gen-final-btn:hover:not(:disabled) { background: var(--navy-700); }
.gen-final-btn:active:not(:disabled) { transform: translateY(1px); }
.gen-final-btn:disabled {
  background: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
}
.gen-final-btn:focus-visible { outline: 3px solid rgba(30, 58, 95, 0.30); outline-offset: 2px; }

/* ── 반응형 (Slice 3: 좁은 폭) ──────────────────────────────────────────
   style.css 최초 @media. 데스크탑 2단(좌 지문 / 우 옵션+sticky 요약)을 좁은 폭에서 단계적 스택.
   브랜드·색·디자인 토큰 불변 — 레이아웃 재배치만(인라인 스타일 금지 규칙 준수). */

/* 태블릿(≤1080): 2열 → 단일 컬럼(STEP들 → 생성 패널 순). sticky 해제(본문 가림 방지). */
@media (max-width: 1080px) {
  .gen-layout { grid-template-columns: 1fr; }
  .gen-col-side { position: static; }
}

/* 좁은 태블릿·큰 폰(≤760): 4열 유형 행은 정렬 유지한 채 리스트만 가로 스크롤,
   하단 요약은 좌|우 → 세로 스택(구분선 우측→하단), 생성 버튼 풀폭. */
@media (max-width: 760px) {
  .gen-main { padding: var(--sp-16); }
  .gen-type-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gen-type-head,
  .gen-type-row { min-width: 600px; }   /* 4열 폭 보존 → 페이지 아닌 리스트 내부서 스크롤 */
  .gen-final { padding: var(--sp-16); }
}

/* 폰(≤520): 입력 높이·여백 축소, sticky 요약은 일반 흐름(짧은 뷰포트서 본문 가림 방지). */
@media (max-width: 520px) {
  .gen-textarea { min-height: 240px; }
  .gen-extra-row { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ── 4-C Admin: /quiz/new 상단 모드 스위치 (admin only) ────────────── */
.gen-mode-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin: 0 auto var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  max-width: 1400px;
  background: #fffbea;
  border: 1px solid #fde68a;
  border-radius: var(--r-8);
  font-size: var(--text-13, 13px);
}
.gen-mode-switch-label {
  font-weight: var(--w-700);
  color: var(--gray-700);
}
.gen-mode-select {
  font-family: inherit;
  font-size: var(--text-13, 13px);
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-4);
  background: #fff;
}
.gen-mode-save {
  font-family: inherit;
  font-size: var(--text-13, 13px);
  padding: 4px 12px;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: var(--r-4);
  cursor: pointer;
  font-weight: var(--w-600);
}
.gen-mode-save:hover { background: var(--navy-700); }
.gen-mode-current { color: var(--gray-700); }
.gen-mode-current .gen-mode-mock strong,
.gen-mode-current strong { color: var(--navy); }
.gen-mode-warn { font-weight: var(--w-600); }
.gen-mode-provider { color: var(--gray-500); font-size: var(--text-12); }
.gen-mode-provider strong { color: var(--navy); text-transform: capitalize; }
.gen-mode-detail {
  margin-left: auto;
  color: var(--navy);
  text-decoration: none;
  font-weight: var(--w-600);
}
.gen-mode-detail:hover { text-decoration: underline; }

/* ── 4-C Admin: /admin/settings 페이지 ──────────────────────────────── */
.admin-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-24);
}
.admin-title {
  font-size: 22px;
  font-weight: var(--w-700);
  color: var(--navy);
  margin: 0 0 var(--sp-8);
}
.admin-desc {
  color: var(--gray-700);
  font-size: var(--text-13, 13px);
  margin: 0 0 var(--sp-16);
}
.admin-section {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--r-12);
  padding: var(--sp-16) var(--sp-24);
  margin-bottom: var(--sp-24);
  box-shadow: var(--sh-card);
}
.admin-section-title {
  font-size: 16px;
  font-weight: var(--w-700);
  color: var(--navy);
  margin: 0 0 var(--sp-12);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--gray-100);
}
.admin-mode-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); }
.admin-mode-select {
  font-family: inherit; font-size: 14px;
  padding: 6px 10px; border: 1px solid var(--gray-300);
  border-radius: var(--r-4); background: #fff; min-width: 320px;
}
.admin-mode-current { color: var(--gray-700); }
.admin-mode-mock { color: #065f46; }
.admin-mode-test_cheap { color: #92400e; }
.admin-mode-normal { color: #b91c1c; }
.admin-warn-red { color: #b91c1c; font-weight: var(--w-600); margin-left: 6px; }
.admin-warn-yellow { color: #92400e; font-weight: var(--w-600); margin-left: 6px; }
.admin-warn-green { color: #065f46; font-weight: var(--w-600); margin-left: 6px; }

.admin-btn-primary {
  font-family: inherit; font-size: 14px; font-weight: var(--w-700);
  color: #fff; background: var(--navy); border: 0;
  border-radius: var(--r-4); padding: 6px 14px; cursor: pointer;
}
.admin-btn-primary:hover { background: var(--navy-700); }
.admin-btn-secondary {
  font-family: inherit; font-size: 14px; font-weight: var(--w-600);
  color: var(--navy); background: #fff;
  border: 1px solid var(--navy); border-radius: var(--r-4);
  padding: 6px 14px; cursor: pointer;
}
.admin-btn-secondary:hover { background: var(--gray-100); }

.admin-legend { font-size: 12px; }
.legend-item {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-weight: var(--w-700); font-size: 11px; margin-right: 2px;
}
.legend-code   { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.legend-haiku  { background: #dbeafe; color: #1e3a5f; border: 1px solid #93c5fd; }
.legend-sonnet { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.legend-killer { color: #d97706; font-weight: var(--w-700); margin-left: 8px; }

.admin-cat-block { margin: var(--sp-16) 0; }
.admin-cat-title {
  font-size: 14px; font-weight: var(--w-700);
  color: var(--navy); margin: 0 0 var(--sp-8);
}
.admin-cat-count { color: var(--gray-500); font-weight: var(--w-600); font-size: 12px; }

.admin-type-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-type-table th,
.admin-type-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--gray-100);
  text-align: left;
  vertical-align: middle;
}
.admin-type-table thead th {
  background: #fafafa;
  font-weight: var(--w-700);
  color: var(--gray-700);
}
.td-code { font-family: ui-monospace, monospace; font-weight: var(--w-700); width: 80px; }
.td-mode { color: var(--gray-500); width: 90px; font-size: 11px; }
.td-status { width: 80px; text-align: right; }
.td-model { width: 140px; }
.killer-mark { color: #d97706; font-weight: var(--w-700); }
.admin-type-select {
  font-family: inherit; font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--gray-300);
  border-radius: 3px;
  background: #fff;
  width: 100%;
}
.badge-overridden {
  display: inline-block; padding: 1px 6px;
  font-size: 10px; font-weight: var(--w-700);
  color: #1e3a5f; background: #dbeafe;
  border: 1px solid #93c5fd; border-radius: 3px;
}
.badge-default {
  display: inline-block; padding: 1px 6px;
  font-size: 10px; font-weight: var(--w-600);
  color: var(--gray-500); background: #f3f4f6;
  border: 1px solid var(--gray-100); border-radius: 3px;
}

.admin-form-actions {
  display: flex; gap: var(--sp-12);
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--gray-100);
}

/* ── 사이트 공통 푸터 (2026-08-02 전면 개편) ──────────────────────────────
   배열은 동종 서비스(족보닷컴) 관례: 브랜드 → 사업자정보 → 정책링크 → 저작권.
   블록 사이는 얇은 선으로 끊는다. 푸터는 보조 정보이므로 작고 차분하게. */
.site-footer { border-top: 1px solid var(--gray-200, #E5E7EB); background: #fff; margin-top: 48px; }
.site-footer-inner { max-width: 1080px; margin: 0 auto; padding: 30px 20px 34px; }

/* ① 브랜드 + 문의 */
.sf-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-bottom: 20px;
}
.sf-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.sf-logo { width: 30px; height: 30px; flex: 0 0 auto; }
.sf-brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--navy, #1E3A5F); }
.sf-tag { font-size: 11.5px; color: var(--gray-400, #9CA3AF); }

.sf-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* 지금 문의 가능한 시간인지 ★서버가 판단해 보여준다(참고 사이트엔 없는 우리 개선점). */
.sf-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: -.01em;
}
.sf-status .sf-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sf-status.is-open { color: #15803D; }
.sf-status.is-open .sf-dot { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.sf-status.is-closed { color: var(--gray-500, #6B7280); }
.sf-status.is-closed .sf-dot { background: var(--gray-300, #D1D5DB); }
.sf-status-detail { font-size: 11.5px; color: var(--gray-400, #9CA3AF); }

.sf-ways { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 2px; }
/* 전화·메일은 ★누를 수 있다 — 휴대폰에서 바로 걸리고 메일이 열린다. */
.sf-way {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--gray-200, #E5E7EB); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--navy, #1E3A5F); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.sf-way:hover { border-color: var(--navy, #1E3A5F); background: var(--gray-50, #F9FAFB); }
.sf-way svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ② 사업자정보 */
.site-footer-biz { padding: 18px 0; border-top: 1px solid var(--gray-100, #F3F4F6); }
.biz-name { margin: 0 0 8px; font-size: 13.5px; font-weight: 800; color: var(--gray-700, #374151); }
.biz {
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin: 0; padding: 0; list-style: none; row-gap: 6px;
  font-size: 12px; line-height: 1.7; color: var(--gray-500, #6B7280);
}
/* 구분자는 문자가 아니라 선으로 그린다 — '주말·공휴일'의 가운뎃점과 헷갈리지 않게. */
.biz-item { padding: 0 12px; border-left: 1px solid var(--gray-200, #E5E7EB); }
.biz-item:first-child { padding-left: 0; border-left: 0; }
.biz-k { color: var(--gray-400, #9CA3AF); margin-right: 2px; }
.biz-muted { color: var(--gray-400, #9CA3AF); }
.biz-tel { color: inherit; text-decoration: none; }
.biz-tel:hover { text-decoration: underline; }

/* ③ 정책 링크 */
.site-footer-links {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--gray-100, #F3F4F6);
}
.site-footer-links a {
  font-size: 13px; color: var(--gray-600, #4B5563); text-decoration: none;
  transition: color .15s;
}
.site-footer-links a:hover { color: var(--navy, #1E3A5F); text-decoration: underline; }
.site-footer-links a.is-strong { font-weight: 700; color: var(--navy, #1E3A5F); }

/* ④ 저작권 */
.site-footer-copy {
  margin: 0; padding-top: 16px; border-top: 1px solid var(--gray-100, #F3F4F6);
  font-size: 11.5px; color: var(--gray-400, #9CA3AF);
}

/* 좁은 화면: 문의 블록을 왼쪽으로 내리고 항목 간격을 줄인다. */
@media (max-width: 640px) {
  .sf-top { flex-direction: column; gap: 14px; }
  .sf-contact { align-items: flex-start; }
  .sf-ways { justify-content: flex-start; }
  .biz-item { padding: 0 8px; }
  .site-footer-links { gap: 16px; }
}

/* ── 소셜 로그인 버튼(카카오·구글·네이버) — provider 브랜드 색 사용 ────────── */
.social-login { max-width: 420px; margin: 20px auto 0; }
.social-divider {
  display: flex; align-items: center; text-align: center;
  color: var(--gray-400, #9CA3AF); font-size: 12.5px; margin: 4px 0 14px;
}
.social-divider::before, .social-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--gray-200, #E5E7EB);
}
.social-divider span { padding: 0 12px; white-space: nowrap; }
.social-btns { display: flex; flex-direction: column; gap: 10px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; transition: filter .15s;
}
.social-btn:hover { filter: brightness(0.97); }
.social-badge {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.social-kakao { background: #FEE500; color: #191600; }
.social-kakao .social-badge { background: #191600; color: #FEE500; }
.social-naver { background: #03C75A; color: #fff; }
.social-naver .social-badge { background: #fff; color: #03C75A; }
.social-google { background: #fff; color: #1F2937; border-color: #DADCE0; }
.social-google .social-badge { background: #fff; color: #4285F4; border: 1px solid #DADCE0; }

/* 특별(감면) 회원 단가 표기 — 정가 취소선 + 감면 배지(2026-08-01). */
.gen-point-was { color: var(--gray-400, #9CA3AF); font-weight: 500; margin-right: 2px; }
.gen-point-off {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  border-radius: 999px; background: rgba(56, 189, 248, .16);
  color: #0C4A6E; font-size: 10.5px; font-style: normal; font-weight: 700;
}
.biz-tel { color: inherit; text-decoration: none; }
.biz-tel:hover { text-decoration: underline; }