/* ==========================================================
   v2 리디자인 — 토스 스타일 참고(여백/라운드/단일 포인트 컬러 중심)
   기존 static/style.css와 완전히 분리된 별도 스타일시트.
   포인트 컬러는 진한 블루 + 그레이 베이스(브랜드 그린 대신 신뢰감 있는 톤으로 변경).
   위험도 뱃지(danger/warning/safe)의 초록은 브랜드 컬러가 아니라 "안전" 상태를 뜻하는
   신호색이라 그대로 유지한다.
   ========================================================== */

* { box-sizing: border-box; }

:root {
  --accent: #1E40AF;
  --accent-hover: #1E3A8A;
  --accent-soft: rgba(30, 64, 175, 0.08);
  --accent-soft-2: rgba(30, 64, 175, 0.20);

  --text-primary: #131620;
  --text-secondary: #565D6B;
  --text-tertiary: #8A909C;
  --text-quaternary: #B0B4BC;

  --bg-page: #F7F8FB;
  --bg-card: #FFFFFF;
  --bg-subtle: #F2F3F6;
  --bg-input: #FBFBFC;
  --border: #E5E8EE;

  --danger-bg: #FDECEC; --danger-bg-2: #FDF3F3; --danger-border: #F6D9DC; --danger-text: #C81E3A; --danger-text-2: #7A1A2B; --danger-text-3: #8A3A45;
  --warning-bg: #FFF4E0; --warning-bg-2: #FFF8E8; --warning-border: #F3E0B8; --warning-text: #B4690E; --warning-text-2: #7A4E10; --warning-text-3: #8A6420;
  --safe-bg: #E9F7EF; --safe-bg-2: #F2F9F5; --safe-border: #CFEBDA; --safe-text: #1F8A54; --safe-text-2: #1F5C3C;

  --shadow-soft: rgba(19, 22, 32, 0.06);
  --shadow-soft-2: rgba(19, 22, 32, 0.05);
  --shadow-soft-3: rgba(19, 22, 32, 0.08);

  /* 2026-10-05 Claude Design 시안 반영 — 브랜드 배지·주요 CTA용 반전(잉크) 톤.
     --accent(블루)와 별개로, "장반장" 배지·"무료로 시작" 버튼처럼 눈에 가장 먼저 띄어야
     하는 소수 요소에만 쓴다. 다크모드에서는 반전해서(밝은 배경+어두운 글자) 어두운
     페이지 위에서도 계속 도드라지게 한다. */
  --ink-bg: #131620;
  --ink-text: #FFFFFF;
  --nav-bg: rgba(247, 248, 251, 0.86);
}

/* 다크모드 — localStorage("mediad_theme")로 v1과 값을 공유하고, app.js가 초기 렌더 전에
   <html data-theme="..."> 로 반영한다(깜빡임 방지). 이 프로젝트의 모든 색은 변수로만
   쓰고 있어서(하드코딩 hex 제거 완료) 여기서 값만 다시 정의하면 전체에 그대로 퍼진다. */
:root[data-theme="dark"] {
  --accent: #4C8DFF;
  --accent-hover: #6EA2FF;
  --accent-soft: rgba(76, 141, 255, 0.16);
  --accent-soft-2: rgba(76, 141, 255, 0.30);

  --text-primary: #F1F3F7;
  --text-secondary: #B7BCC8;
  --text-tertiary: #8890A0;
  --text-quaternary: #5F6779;

  --bg-page: #0B0F1A;
  --bg-card: #131826;
  --bg-subtle: #1B2132;
  --bg-input: #1B2132;
  --border: #262D3F;

  --danger-bg: #3A1620; --danger-bg-2: #2C121A; --danger-border: #5C2430; --danger-text: #FF7285; --danger-text-2: #FF9CAA; --danger-text-3: #FFB6C0;
  --warning-bg: #3A2A10; --warning-bg-2: #2E220E; --warning-border: #5C4318; --warning-text: #FFB454; --warning-text-2: #FFC97A; --warning-text-3: #FFD699;
  --safe-bg: #123423; --safe-bg-2: #0E2A1C; --safe-border: #1E5138; --safe-text: #4ADE80; --safe-text-2: #7CE8A4;

  --shadow-soft: rgba(0, 0, 0, 0.28);
  --shadow-soft-2: rgba(0, 0, 0, 0.24);
  --shadow-soft-3: rgba(0, 0, 0, 0.32);

  --ink-bg: #F1F3F7;
  --ink-text: #0B0F1A;
  --nav-bg: rgba(11, 15, 26, 0.86);
}

/* 2026-10-05 — Claude Design 시안이 Pretendard를 지정해서 반영. 예전 Noto Sans KR
   <link>는 nginx CSP(style-src에 fonts.googleapis.com 없음)에 막혀 실제로는 한 번도
   적용된 적이 없었다(2026-09-01 제거 당시 주석 참고) — 같은 문제를 피하려고 이미
   static/fonts/에 있던 Pretendard TTF(Regular·Bold)를 외부 의존 없이 self-host한다.
   font-src 'self'는 이미 CSP에 포함돼 있어 추가 허용 없이 바로 쓸 수 있다. */
@font-face {
  font-family: 'Pretendard';
  src: url('/static/fonts/Pretendard-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/static/fonts/Pretendard-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
/* 2026-10-05 추가 — 시안은 'Pretendard Variable'이라 font-weight:800(헤드라인 등 전부)을
   진짜 800으로 그리는데, 우리는 Regular·Bold 두 장만 있어서 800을 요청해도 700으로
   내려앉아 덜 굵게 보였다(사용자 지적). 같은 출처(npm pretendard@1.3.9
   dist/public/static/alternative/)에서 ExtraBold 한 장만 더 self-host해서 맞춘다 —
   Variable 폰트 자체를 쓰지 않아도 800 자리만 정확히 채우면 충분하다. */
@font-face {
  font-family: 'Pretendard';
  src: url('/static/fonts/Pretendard-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

body {
  margin: 0;
  font-family: 'Pretendard', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::placeholder { color: var(--text-quaternary); }
textarea, input { font-family: inherit; }

.page { display: flex; flex-direction: column; min-height: 100vh; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
/* 홈(index.html) 전용 — Claude Design 시안이 1200px/24px 패딩 기준이라 다른 페이지의
   .container(1080px)는 그대로 두고 이 페이지만 별도 클래스로 넓혔다. */
.container-home { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .container-home { padding: 0 16px; } }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; }

/* NAV */
/* 2026-10-05 — Claude Design 시안 반영: 불투명 배경 대신 반투명+블러(스크롤 중에도 뒤 콘텐츠가
   은은히 비침). --nav-bg는 --bg-card와 별도 토큰(알파값 포함)이라 다크모드도 자동으로 맞는다. */
.nav { width: 100%; border-bottom: 1px solid var(--border); background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
/* nav-left(로고+메뉴)와 nav-right(테마토글+잔액/버튼)가 한 줄에 안 들어가면 겹치는 대신
   nav-right가 자기 줄로 자연스럽게 내려가게 flex-wrap을 기본으로 켜둔다 — 특정 폭에서만
   손보는 media query 브레이크포인트 방식은 로그인 상태(잔액+버튼까지 붙어 길어짐)처럼
   내용 길이가 달라지는 경우를 못 따라가서, 2026-08-29에 겹침 신고를 두 번(세로 좁은 화면,
   폰 가로모드) 받은 뒤 이 방식으로 바꿨다. */
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; min-height: 68px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
/* 워크스페이스 화면(active_nav == 'mypage')에서는 .workspace-shell과 같은 1280px 폭으로
   맞춰 브랜드 로고와 사이드바 왼쪽 정렬을 일치시킨다(2026-09-16). */
.nav-inner-wide { max-width: 1280px; }
.nav-left { display: flex; align-items: center; gap: 28px; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
/* .brand은 절대 줄바꿈/축소되면 안 됨 — nav-links가 좁아질 때 그 안에서만
   가로 스크롤(overflow-x)로 흡수하게 하고, 브랜드 쪽은 자기 폭만큼 그대로
   차지한다(2026-08-29: flex-shrink 기본값 탓에 "MediAD Checker" 텍스트가
   두 줄로 쪼개지던 버그 수정 — 가로로 조금 늘어나더라도 줄바꿈은 안 됨). */
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; }
.brand-badge { padding: 5px 9px; border-radius: 8px; background: var(--ink-bg); color: var(--ink-text); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; flex-shrink: 0; white-space: nowrap; }
.brand-text { font-size: 16px; font-weight: 800; color: var(--text-primary); flex-shrink: 0; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-link { padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--text-secondary); border-radius: 8px; white-space: nowrap; flex-shrink: 0; }
.nav-link:hover { color: var(--text-primary); }
.nav-link.active { color: var(--accent); font-weight: 700; }
/* 부가 기능(별도 상품처럼 보여야 하는 것)임을 nav에서 시각적으로 표시하는 배지 — 메인
   상품과 같은 글자체·굵기의 .nav-link만으로는 "이것도 똑같이 중요한 메뉴"처럼 읽혀서
   실제 비중과 화면 노출이 어긋난다는 지적(2026-09-02)에 따라 추가. .tab-badge(danger 톤,
   "지적 개수" 용도)와는 의도가 달라 경고가 아닌 accent 톤으로 별도로 둔다. */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; background: var(--accent-soft); color: var(--accent); vertical-align: middle; letter-spacing: 0.2px; }
.btn-ghost { padding: 8px 16px; border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); background: none; cursor: pointer; font-family: inherit; }
/* 네브바 비로그인 상태의 주 CTA(2026-10-05, Claude Design 시안 반영) — "회원가입"이라는
   행정 용어 대신 "무료로 시작"으로 행동을 직접 말하고, .brand-badge와 같은 잉크 톤을 써서
   둘 다 "로그인" 같은 보조 링크보다 눈에 먼저 들어오게 한다. */
.btn-solid-ink { padding: 8px 16px; border-radius: 9px; background: var(--ink-bg); color: var(--ink-text); font-size: 13.5px; font-weight: 700; border: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; white-space: nowrap; }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; margin-left: auto; }
.nav-auth { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.nav-balance { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--accent); padding: 0 2px; white-space: nowrap; }
.nav-balance svg { flex-shrink: 0; color: var(--warning-text); }
.theme-toggle { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.theme-toggle:hover { background: var(--bg-subtle); color: var(--text-primary); }
/* 모바일 햄버거(2026-10-06) — 기본(데스크톱)에서는 버튼·패널 모두 숨김, 640px 이하 블록에서 켠다. */
.nav-menu-btn { display: none; }
.nav-menu { display: none; }

/* HERO — 2026-10-05, design/MediAD 메인 리디자인.dc.html(Claude Design 시안 원본)의
   값을 그대로 옮김. grid-template-columns: repeat(auto-fit, minmax(min(100%,460px),1fr))는
   각 칼럼이 최소 460px은 확보되게 하고, 그보다 좁아지면(모바일) 자동으로 1단 세로 쌓기로
   바뀐다 — 미디어쿼리 없이 반응형이 해결돼서 이전에 겪던 "860px도 880px도 애매한" 폭
   계산 문제 자체가 사라진다. */
.hero { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 56px; align-items: start; padding: 64px 0 72px; }
.hero-left { display: flex; flex-direction: column; gap: 24px; padding-top: 12px; min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.hero h1 { margin: 0; font-size: clamp(40px, 5.6vw, 66px); line-height: 1.12; font-weight: 800; color: var(--text-primary); letter-spacing: -0.04em; word-break: keep-all; }
/* 히어로 문장 순환(2026-10-08, hero_rotate.js) — 문장들을 같은 칸에 겹쳐 쌓아 높이가 가장 긴
   문장에 자동으로 맞춰진다. 첫 로드엔 줄 단위로 순차 등장, 이후 크로스페이드. */
.hero-title { display: grid; }
.hero-title .hero-line { grid-area: 1 / 1; display: block; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.hero-title .hero-line.is-on { opacity: 1; pointer-events: auto; }
.hero-title .l { display: block; }
@property --hl-a { syntax: '<number>'; inherits: false; initial-value: 0; }
/* 최종 상태는 형광펜 없이 강조색 글자만 — 형광펜은 애니메이션 중에만 그어졌다가 옅어진다. */
.hero-title .hl { --hl-a: 0; color: var(--accent); background: linear-gradient(color-mix(in srgb, var(--accent) calc(var(--hl-a) * 16%), transparent), color-mix(in srgb, var(--accent) calc(var(--hl-a) * 16%), transparent)) no-repeat left 88% / 0 .34em; }
/* 강조어: 줄이 다 나타난 뒤 본문색 → 강조색으로 물들며 형광펜이 좌→우로 그어지고(0~37.5%),
   잠깐 머문 뒤(~62.5%) 서서히 옅어져 푸른 글자만 남는다. .is-on이 붙을 때마다 재생되므로
   문장이 바뀔 때마다 새 강조어에도 적용된다. */
@keyframes hero-hl {
  0% { color: var(--text-primary); background-size: 0 .34em; --hl-a: 1; }
  37.5% { color: var(--accent); background-size: 100% .34em; --hl-a: 1; }
  62.5% { color: var(--accent); background-size: 100% .34em; --hl-a: 1; }
  100% { color: var(--accent); background-size: 100% .34em; --hl-a: 0; }
}
.hero-title .hero-line.is-on .hl { animation: hero-hl 2.4s ease .75s both; }
.hero-title .hero-line:not(:first-child) .l { transform: translateY(8px); transition: transform .7s ease; }
.hero-title .hero-line:not(:first-child).is-on .l { transform: none; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-title .hero-line:first-child .l { animation: hero-rise .7s ease both; }
.hero-title .hero-line:first-child .l:nth-child(2) { animation-delay: .15s; }
.hero-title .hero-line:first-child .l:nth-child(3) { animation-delay: .3s; }
.hero .lead { animation: hero-rise .7s ease .55s both; }
/* 하단 숫자(2분·2영업일): 형광펜이 끝난 뒤 강조색으로 물든다. 굵기는 처음부터 고정해 레이아웃이 흔들리지 않게. */
@keyframes hero-num { from { color: inherit; } to { color: var(--accent); } }
.hero-num { font-weight: 700; animation: hero-num .8s ease 1.6s both; }
.hero-feature-row .hero-feature { animation: hero-rise .7s ease .75s both; }
.hero-feature-row .hero-feature:nth-child(2) { animation-delay: .85s; }
.hero-feature-row .hero-feature:nth-child(3) { animation-delay: .95s; }
@media (prefers-reduced-motion: reduce) {
  .hero-title .hero-line, .hero-title .hero-line .l { transition: none; animation: none !important; }
  .hero-title .hero-line.is-on .hl { animation: none; }
  .hero-num { animation: none; color: var(--accent); }
  .hero .lead, .hero-feature-row .hero-feature { animation: none; }
}
.hero .lead { margin: 0; font-size: 18px; line-height: 1.65; color: var(--text-secondary); max-width: 500px; word-break: keep-all; }
/* 채널·진료과목 2단 카드(2026-10-05, Claude Design 시안) — 위 아이콘 카드 그리드를
   대체. 아이콘 없이 텍스트 알약만 쓰고, 두 섹션을 한 카드 안에 좌우로 둔다. */
.channel-specialty-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px; padding: 32px; }
.channel-specialty-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.channel-specialty-col .card-title { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 0; }
.pill-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.plain-pill { display: inline-flex; align-items: center; padding: 8px 13px; border-radius: 999px; background: var(--bg-subtle); font-size: 13.5px; font-weight: 600; color: var(--text-primary); text-decoration: none; word-break: keep-all; }
/* 히어로 특징 3개 — 2026-10-05 시안 반영: 아이콘 배지를 걷어내고 세로 구분선(상단 1줄 +
   칼럼 사이 좌측 테두리)만으로 나눈 3열 그리드로 교체. */
.hero-feature-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); margin-top: 8px; }
.hero-feature { padding: 18px 16px 0 0; display: flex; flex-direction: column; gap: 4px; }
.hero-feature + .hero-feature { padding-left: 16px; border-left: 1px solid var(--border); }
.hero-feature:last-child { padding-right: 0; }
.hero-feature-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.hero-feature-sub { font-size: 13px; color: var(--text-tertiary); }
/* site_check.html 히어로가 쓰는 책임고지 라인 — index.html 히어로 리뉴얼과 무관하게 유지. */
.hero-stat { font-size: 13px; color: var(--text-tertiary); }
.hero-stat strong { color: var(--accent); font-weight: 800; }
/* 2026-10-05 — 히어로 오른쪽의 정적 "검수 결과 미리보기" 예시 카드를 걷어내고, 실제
   검수 입력폼(#inputCard, templates/v2/index.html)을 그 자리에 직접 넣었다(Claude Design
   시안 반영 — 헤드라인과 입력창이 스크롤 없이 한 화면에 보이게). .input-card 기본 스타일은
   /pricing 등에서도 재사용하는 공용 규칙이라 안 건드리고, 히어로 안에 있을 때만 폭·여백을
   덮어쓴다. grid라서 min-width:0 없으면 내부 긴 콘텐츠가 칼럼을 넓게 밀어낼 수 있다. */
.hero .input-card { min-width: 0; margin-bottom: 0; padding: 22px; border-radius: 22px; box-shadow: 0 30px 70px var(--shadow-soft-3); }
/* 좁아진 카드 폭(440px대)에서 5개 탭이 잘려 보이던 문제(2026-10-05 로컬 확인) — 여전히
   가로 스크롤은 가능하지만(.tabs의 overflow-x:auto) 잘린 채로 보이는 게 어색해서, 이
   폭일 때만 탭을 좀 더 촘촘하게 줄여 5개가 한 줄에 다 들어오게 한다. */
.hero .input-card .tab { padding: 8px 11px; font-size: 12.5px; }

/* 섹션 대제목(2026-10-05, Claude Design 시안) — 시안의 모든 섹션 제목은 작은 회색
   라벨이 아니라 큰 볼드 h2다. "이용 방법"처럼 시안에 없던 섹션도 톤을 맞추려고 같은
   클래스를 쓴다. */
.section-h2 { margin: 0 0 40px; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.25; font-weight: 800; letter-spacing: -0.035em; color: var(--text-primary); word-break: keep-all; }
.section-h2.section-h2-sm { margin-bottom: 28px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; }

/* "이런 분들께 필요합니다"(2026-10-05, Claude Design 시안) — 카드마다 위쪽 2px 테두리로
   구분한 리스트(공유 구분선이 아니라 각자 자기 테두리). */
.audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); column-gap: 28px; margin-bottom: 56px; }
.audience-item { border-top: 2px solid var(--text-primary); padding: 18px 0 24px; display: flex; flex-direction: column; gap: 8px; }
.audience-title { font-size: 16px; font-weight: 700; color: var(--text-primary); word-break: keep-all; }
.audience-desc { font-size: 14px; line-height: 1.65; color: var(--text-secondary); word-break: keep-all; }

.diff-more { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 56px; font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.diff-more:hover { text-decoration: underline; }

/* "검수만 하니까 가능한 것들" 3카드 + 통계 배너(2026-10-05, Claude Design 시안 —
   옛 "이런 점이 다릅니다" 7개 아이콘카드를 압축). 기존 .step-card/.steps-grid와는
   완전히 별개 컴포넌트라 이름을 분리해 다른 곳(이런 분들께·이용 방법)에 영향 없다. */
.capability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-bottom: 20px; }
.capability-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.capability-num { font-size: 13px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.capability-title { font-size: 21px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.35; color: var(--text-primary); word-break: keep-all; }
.capability-desc { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); }
.capability-list { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
/* 서브그리드(2026-10-07): 카드마다 항목 수가 달라 구분선·목록 시작점이 카드별로 어긋났다(margin-top:auto는 바닥 기준).
   카드가 부모 그리드의 4개 행(번호·제목·설명·목록)을 공유하게 해서 가로로 나란한 카드끼리 선과 글줄이 같은 높이에 온다.
   미지원 브라우저는 위의 flex 배치 그대로 쓴다. */
@supports (grid-template-rows: subgrid) {
  .capability-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; }
  .capability-list { margin-top: 0; align-content: start; }
}
.capability-point { display: flex; gap: 8px; font-size: 13.5px; color: var(--text-primary); line-height: 1.5; }
.capability-dot { color: var(--accent); font-weight: 800; }

/* 통계 배너 — 두 통계 항목 + 설명 문단이 전부 같은 레벨의 grid 칸(래퍼 없음). */
.stat-banner { background: var(--ink-bg); border-radius: 20px; padding: 28px 32px; margin-bottom: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; align-items: center; }
.stat-banner-num { font-size: clamp(32px, 4vw, 44px); font-weight: 800; color: var(--ink-text); letter-spacing: -0.03em; }
.stat-banner-label { font-size: 13px; color: var(--ink-text); opacity: 0.7; margin-top: 4px; }
.stat-banner-note { font-size: 14px; line-height: 1.7; color: var(--ink-text); opacity: 0.85; word-break: keep-all; }
@media (max-width: 860px) {
  .stat-banner { padding: 24px; }
}

/* GUIDE CTA — 가이드 글 맨 아래 "작성해 보기 / 바로 검수하기" 두 줄짜리 .diff-more 텍스트
   링크가 밋밋하다는 지적(2026-10-04, guide_press_release.html)으로 카드형 버튼 한 쌍으로
   바꿨다. 앞으로 다른 가이드 글 끝에도 재사용할 수 있게 범용 이름(.guide-cta-*)으로 둔다. */
.guide-cta-row { display: flex; gap: 16px; margin: 8px 0 56px; }
.guide-cta { flex: 1; display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 16px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.guide-cta:hover { transform: translateY(-2px); }
.guide-cta-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.guide-cta-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.guide-cta-title { font-size: 15px; font-weight: 800; line-height: 1.4; }
.guide-cta-sub { font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
.guide-cta-arrow { flex-shrink: 0; }

.guide-cta-primary { background: var(--accent); box-shadow: 0 10px 24px var(--accent-soft-2); }
.guide-cta-primary:hover { box-shadow: 0 14px 30px var(--accent-soft-2); }
.guide-cta-primary .guide-cta-icon { background: rgba(255, 255, 255, 0.18); }
.guide-cta-primary .guide-cta-title { color: #fff; }
.guide-cta-primary .guide-cta-sub { color: rgba(255, 255, 255, 0.82); }
.guide-cta-primary .guide-cta-arrow path { stroke: #fff; }

.guide-cta-secondary { background: var(--bg-card); border: 1px solid var(--border); }
.guide-cta-secondary:hover { border-color: var(--accent); }
.guide-cta-secondary .guide-cta-icon { background: var(--accent-soft); }
.guide-cta-secondary .guide-cta-title { color: var(--text-primary); }
.guide-cta-secondary .guide-cta-sub { color: var(--text-tertiary); }
.guide-cta-secondary .guide-cta-arrow path { stroke: var(--accent); }

/* 카드 하나만 가운데에 두는 변형(이용법·규정 해설 끝). 데스크톱에서만 460px 폭 기준을 쓰고, 모바일(세로 배치)에서는
   flex-basis가 "높이"로 재해석돼 카드가 460px로 늘어나므로 반드시 auto로 되돌린다(2026-10-13). */
.guide-cta-row--center { justify-content: center; margin-bottom: 48px; }
.guide-cta--single { flex: 0 1 460px; }
@media (max-width: 640px) { .guide-cta-row { flex-direction: column; } .guide-cta--single { flex: 0 0 auto; } }

/* 홈 마무리 CTA 배너(2026-10-05, Claude Design 시안) — 그 전까지 쓰던 .guide-cta 카드를
   대체. 통계 배너(.stat-banner, 잉크 톤)와 달리 여긴 브랜드 블루(--accent) 그대로. */
.closing-cta-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--accent); border-radius: 24px; padding: clamp(32px, 5vw, 56px); }
.closing-cta-text { display: flex; flex-direction: column; gap: 10px; }
.closing-cta-title { font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; letter-spacing: -0.035em; color: #fff; line-height: 1.3; word-break: keep-all; }
.closing-cta-sub { font-size: 14px; color: rgba(255,255,255,0.85); }
.closing-cta-btn { flex-shrink: 0; display: inline-flex; align-items: center; padding: 16px 24px; border-radius: 12px; background: #fff; color: var(--accent); font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) {
  .closing-cta-banner { padding: 24px; }
  .closing-cta-title { font-size: 20px; }
  .closing-cta-btn { width: 100%; justify-content: center; }
}

/* INPUT CARD */
.input-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 40px; box-shadow: 0 12px 32px var(--shadow-soft-2); margin-bottom: 80px; }
.input-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.input-card-title { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.input-card-tag { font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); padding: 6px 12px; border-radius: 999px; background: var(--bg-subtle); }

/* 신규 기능 표시(2026-10-03, 보도자료 작성기 — 막 만든 기능이라 당분간 "베타"를 붙여 둔다). */
.badge-beta { display: inline-block; font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; letter-spacing: 0.2px; white-space: nowrap; }

/* PRESS RELEASE WRITER — 검수 리포트(markdown-body)와 형식부터 다르게 보이도록 기사체 카드로
   분리한다(press_release_writer.js, 2026-10-03 "기사작성기라는 점에서 형식적으로도 차별화
   되어야겠다" 피드백). 헤드라인만 세리프로 둬서 본문(기본 산세리프)과 대비시킨다 — 본문까지
   세리프로 바꾸면 가독성이 떨어지고, 앱 전체가 로드하는 Noto Sans KR 한 벌만으로도 제목만
   serif 폴백(Georgia 등 시스템 기본)으로 충분히 "기사" 느낌이 난다. */
.pr-article-card { background: var(--bg-card); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 18px; padding: 36px 40px; box-shadow: 0 12px 32px var(--shadow-soft-2); margin-bottom: 16px; }
.pr-article-card-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.pr-article-meta { font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); line-height: 1.6; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.pr-article-headline { font-family: Georgia, 'Noto Serif KR', serif; font-size: 25px; line-height: 1.4; font-weight: 800; color: var(--text-primary); margin: 0 0 18px; }
.pr-article-body { font-size: 15.5px; line-height: 1.85; color: var(--text-primary); }
.pr-article-body p { margin: 0 0 16px; }
.pr-article-body p:last-child { margin-bottom: 0; }

/* 검수 결과 안의 "4. 리라이팅 제안"(app.py SYSTEM_PROMPT가 생성하는 공용 템플릿)은 전체 앱
   공통 .markdown-body 스타일을 그대로 쓰면 글자 크기 자체는 14px로 다른 블록과 같은데도,
   AI가 재작성본 첫 줄(제목)을 굵게(<b>)만 표시해서 — font-size 지정이 없으니 — 주변 설명
   글보다 유독 두드러져 보인다(2026-10-03, "입력 때 양식처럼 스타일 맞춰봐" 피드백 — 실제
   브라우저로 확인해서 원인을 찾음). SYSTEM_PROMPT는 전체 검수기 공용이라 건드리지 않고,
   보도자료 작성기 화면(.pr-check-result로 감싼 영역)에서만 재작성본 문단을 위 .pr-article-*
   와 같은 타이포그래피(제목 세리프, 본문 15.5px)로 맞춘다. */
.pr-check-result .markdown-body div[style*="white-space: pre-line"] { font-size: 15.5px; line-height: 1.85; }
.pr-check-result .markdown-body div[style*="white-space: pre-line"] > b:first-child,
.pr-check-result .markdown-body div[style*="white-space: pre-line"] > strong:first-child {
  display: block; font-family: Georgia, 'Noto Serif KR', serif; font-size: 1.3em; font-weight: 800;
  margin-bottom: 10px; color: var(--text-primary);
}

.tabs { display: inline-flex; max-width: 100%; padding: 4px; border-radius: 12px; background: var(--bg-subtle); margin-bottom: 20px; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 9px 18px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-tertiary); cursor: pointer; border: none; background: transparent; font-family: inherit; white-space: nowrap; flex-shrink: 0; }
.tab.active { background: var(--bg-card); box-shadow: 0 1px 3px var(--shadow-soft-3); font-weight: 700; color: var(--text-primary); }

.input-pane { display: none; }
.input-pane.active { display: block; }
.input-textarea { width: 100%; height: 180px; resize: none; border: 1px solid var(--border); border-radius: 14px; padding: 16px; font-size: 15px; line-height: 1.7; color: var(--text-primary); background: var(--bg-input); outline: none; }
.input-text { width: 100%; height: 56px; border: 1px solid var(--border); border-radius: 14px; padding: 0 16px; font-size: 15px; color: var(--text-primary); background: var(--bg-input); outline: none; }
.input-help { font-size: 12.5px; color: var(--text-tertiary); margin-top: 10px; line-height: 1.6; }
.input-tip { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
/* 2026-10-05 — 시안 반영: 탭별 상세 안내문을 "입력 안내" 토글 뒤로 접는다(기존엔 상시
   노출). #helpToggleBtn·#optionsToggleBtn 클릭 로직은 templates/v2/index.html 하단
   스크립트에 있다. */
.input-help-extra { font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); background: var(--bg-subtle); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.input-toggle-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.input-toggle-btn { border: none; background: none; padding: 0; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.input-toggle-btn.muted { color: var(--text-tertiary); }
.input-toggle-btn:hover { color: var(--text-primary); }
.input-card-footer-row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--text-tertiary); }
.input-card-footer-row a { color: var(--text-tertiary); font-weight: 600; }
.input-card-footer-row a:hover { color: var(--accent); }
.input-trust-row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--text-tertiary); }
.input-trust-row span::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.input-trust-row a { color: var(--text-tertiary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.input-trust-row a:hover { color: var(--accent); }
.input-tip svg { flex-shrink: 0; margin-top: 2px; }
.input-tip strong { color: var(--accent); font-weight: 700; }
/* 강조 박스(.input-tip) 바로 뒤에 회색 설명글(.input-help)이 같은 10px 간격으로 붙으면
   두 블록이 한 덩어리처럼 붙어 보인다(2026-09-14 정비) — 박스 다음에는 살짝 더 띄운다. */
.input-tip + .input-help { margin-top: 16px; }
.dropzone { border: 1.5px dashed var(--border); border-radius: 14px; padding: 40px; text-align: center; background: var(--bg-input); display: flex; flex-direction: column; align-items: center; gap: 12px; transition: border-color 0.15s, background-color 0.15s; }
.dropzone.compact { padding: 28px; }
.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
/* 지원 파일 형식 알약 — 문서(PDF·DOCX·TXT)는 눈에 띄도록 강조색, 이미지는 중립색 */
.fmt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 4px; }
.fmt-chip { font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-tertiary); background: transparent; }
.fmt-chip.doc { color: var(--accent); border-color: var(--accent); }
.dropzone-btn { padding: 10px 20px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); background: var(--bg-card); cursor: pointer; font-family: inherit; }
.file-name-display { font-size: 12.5px; color: var(--accent); font-weight: 600; margin-top: 4px; word-break: break-all; }
/* 첨부 파일명 목록을 개별 삭제 가능한 칩으로(2026-09-14, 검수 전에 잘못 첨부한 파일을
   다시 고를 필요 없이 하나만 빼고 싶다는 요청 반영). .file-name-display는 그대로 컨테이너로
   쓰고 내부에 이 칩들을 JS로 채워 넣는다 — 영상 탭처럼 파일명 한 줄만 넣는 기존 쓰임에는
   영향 없다. */
.file-name-display:has(.file-chip) { display: flex; flex-direction: column; gap: 6px; }
.file-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--bg-subtle); font-weight: 500; color: var(--text-primary); }
.file-chip-name { overflow-wrap: anywhere; }
.file-chip-remove { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; font-family: inherit; padding: 0; }
.file-chip-remove:hover { background: var(--border); color: var(--text-primary); }

.credit-row { display: flex; align-items: center; justify-content: flex-end; margin-top: 18px; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.credit-row strong { color: var(--text-primary); }
.credit-note { text-align: right; font-size: 12px; color: var(--text-tertiary); line-height: 1.6; margin-bottom: 16px; }
.signup-incentive { padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--text-secondary); font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; }
.signup-incentive a { font-weight: 700; }
.cta-btn { width: 100%; padding: 18px; border-radius: 16px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 20px var(--accent-soft-2); border: none; cursor: pointer; font-family: inherit; }
.cta-btn:hover { background: var(--accent-hover); color: #fff; }
.cta-btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.cta-btn:disabled:hover { background: var(--accent); }
.btn-spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: btn-spin 0.7s linear infinite; flex-shrink: 0; }
.btn-spinner-note { margin-left: 10px; font-size: 0.78em; font-weight: 400; opacity: 0.85; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* 검수 대기 안내 패널(check.js showWaitPanel) */
.is-waiting > :not(.wait-panel) { display: none; }
.wait-panel { word-break: keep-all; }
.wait-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 32px; margin-bottom: 40px; box-shadow: 0 12px 32px var(--shadow-soft-2); }
.wait-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--text-primary); margin-bottom: 16px; }
.wait-spinner { border-color: var(--accent-soft-2); border-top-color: var(--accent); }
.wait-bar { height: 6px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; margin-bottom: 18px; }
.wait-bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 0.6s ease-out; }
.wait-steps { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--text-secondary); }
.wait-step { opacity: 0.5; transition: opacity 0.4s; }
.wait-step::before { content: "○ "; }
.wait-step.active { opacity: 1; color: var(--accent); font-weight: 700; }
.wait-step.active::before { content: "● "; animation: wait-pulse 1.2s ease-in-out infinite; }
.wait-principle-label { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.wait-principle { min-height: 96px; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; background: var(--accent-soft); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s; }
.wait-principle.in { opacity: 1; transform: none; }
.wait-principle strong { font-size: 14.5px; color: var(--text-primary); }
.wait-principle span { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.wait-leave-note { display: none; margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); text-align: center; }
.wait-leave-note.show { display: block; }
.wait-scope { margin: -6px 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.wait-assure { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); text-align: center; }
.wait-assure + .wait-leave-note { margin-top: 6px; }
.wait-leave-note a { color: var(--accent); text-decoration: underline; }
@keyframes wait-pulse { 50% { opacity: 0.3; } }
@media (max-width: 640px) { .wait-panel { padding: 22px 18px; } }
@media (prefers-reduced-motion: reduce) { .wait-bar-fill, .wait-principle, .wait-step { transition: none; } .wait-step.active::before { animation: none; } }

/* RESULT PAGE */
.result-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; padding-top: 40px; }
.back-link { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.result-actions { display: flex; gap: 8px; }
/* .result-topbar가 좁은 화면에서는 flex-wrap으로 두 줄이 될 수 있어(back-link 아래로
   버튼이 내려감) 음수 마진을 쓰면 그 상태에서 버튼과 겹친다 — 항상 topbar가 이미 만든
   여백(margin-bottom: 20px) 아래로만 떨어지게 양수 마진만 쓴다. */
.share-note { text-align: right; font-size: 12px; color: var(--text-tertiary); line-height: 1.6; margin-top: -12px; margin-bottom: 20px; }
@media (max-width: 640px) { .share-note { text-align: left; margin-top: 0; } }
.btn-outline { padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); background: var(--bg-card); }
.btn-solid-green { padding: 10px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--safe-text); border: none; font-family: inherit; }

/* 리포트 우측 플로팅 액션(공유·PDF) — 리포트가 길어 스크롤하면 상단 버튼이 안 보인다는
   지적(2026-09-16)에 따라 상단은 그대로 두고 추가한 사본. result.js/site_report.js가
   .js-share-btn/.js-pdf-btn 클래스로 상단 버튼과 동일하게 동작시킨다. */
.report-fab-actions { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 15; }
.report-fab-btn { width: 46px; height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 6px 20px var(--shadow-soft-3); color: var(--text-secondary); cursor: pointer; transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.report-fab-btn:hover { color: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.report-fab-btn.copied { color: var(--accent); border-color: var(--accent); }
.report-fab-pdf { background: var(--safe-text); border-color: var(--safe-text); color: #fff; }
.report-fab-pdf:hover { color: #fff; border-color: var(--safe-text); }
@media (max-width: 860px) {
  /* 모바일은 화면이 짧아 top:50%(세로 중앙)가 첫 화면에서부터 상단 공유/PDF 버튼과
     겹쳐 보였다(2026-09-16 실기기 확인) — 세로 중앙 대신 하단 고정으로 바꿔 스크롤
     위치와 무관하게 상단 버튼과 안 겹치게 한다. 비로그인 공유 링크 화면에는 같은
     자리에 quick-check-fab(검수하기 버튼)도 있어 그 위로 여유를 둔다. */
  .report-fab-actions { top: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); right: 12px; transform: none; gap: 8px; }
  .report-fab-btn { width: 42px; height: 42px; }
}

.report-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 40px; margin-bottom: 80px; }
.report-title { font-size: 20px; font-weight: 800; color: var(--text-primary); text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.report-disclaimer { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--warning-bg-2); margin-bottom: 24px; font-size: 12.5px; line-height: 1.6; color: var(--warning-text-2); }
.report-source { padding: 16px; border-radius: 14px; background: var(--bg-page); border: 1px solid var(--border); margin-bottom: 28px; }
.report-source .label { font-size: 12.5px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 8px; }
.report-check-meta { font-size: 11.5px; color: var(--text-tertiary); margin-bottom: 8px; }
.report-source .text { font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); }

.risk-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.risk-badge { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; padding: 8px 16px; border-radius: 10px; font-size: 15px; font-weight: 800; }
.risk-badge.small { padding: 5px 11px; border-radius: 8px; font-size: 12px; }
.risk-badge.danger { background: var(--danger-bg); color: var(--danger-text); }
.risk-badge.warning { background: var(--warning-bg); color: var(--warning-text); }
.risk-badge.safe { background: var(--safe-bg); color: var(--safe-text); }
.risk-badge.neutral { background: var(--bg-subtle); color: var(--text-secondary); }
.risk-summary { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
/* 검수 직후 인라인 결과 카드 → 마이페이지 검수 이력 상세보기 링크(2026-09-16). 이 페이지를
   벗어나도(새로고침·다른 검수 등) 결과가 사라지지 않고 이력에 남아있다는 걸 알려준다. */
.report-history-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.report-history-link:hover { text-decoration: underline; }

.hira-row { padding: 14px 16px; border-radius: 14px; background: var(--bg-page); border: 1px solid var(--border); margin-bottom: 24px; }
.hira-row .section-label { margin-bottom: 10px; }
.hira-item { font-size: 13.5px; line-height: 1.7; padding: 4px 0; }
.hira-item.hira-matched { color: var(--safe-text); }
.hira-item.hira-unmatched { color: var(--text-secondary); }
.hira-item strong { color: var(--text-primary); }
.hira-media-note { color: var(--warning-text); font-weight: 600; }

.section-label { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 14px; }
.violation-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.violation-item { padding: 16px; border-radius: 14px; }
.violation-item.danger { background: var(--danger-bg-2); border: 1px solid var(--danger-border); }
.violation-item.warning { background: var(--warning-bg-2); border: 1px solid var(--warning-border); }
/* "근거자료 필요/추가 확인 필요"(파랑, AI 출력에서 #2563eb에 대응)용 — 기존 danger/warning처럼
   전용 --info-* 토큰을 새로 만들지 않고, 이미 다크모드까지 대응된 브랜드 블루(--accent/
   --accent-soft)를 그대로 재사용한다(2026-09-14, 샘플에 빨강만 나와서 다양성 요청으로 추가). */
.violation-item.info { background: var(--accent-soft); border: 1px solid var(--accent); }
.violation-item .quote { font-size: 14.5px; font-weight: 700; text-decoration: line-through; margin-bottom: 6px; }
.violation-item.danger .quote { color: var(--danger-text-2); text-decoration-color: var(--danger-border); }
.violation-item.warning .quote { color: var(--warning-text-2); text-decoration-color: var(--warning-border); }
.violation-item.info .quote { color: var(--accent); text-decoration-color: var(--accent); }
.violation-item .reason { font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.violation-item.danger .reason { color: var(--danger-text-3); }
.violation-item.warning .reason { color: var(--warning-text-3); }
.violation-item.info .reason { color: var(--text-secondary); }
.violation-item .article-tag { display: inline-flex; padding: 4px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 700; }
.violation-item.danger .article-tag { background: var(--danger-border); color: var(--danger-text-2); }
.violation-item.warning .article-tag { background: var(--warning-border); color: var(--warning-text-2); }
.violation-item.info .article-tag { background: var(--accent-soft); color: var(--accent); }

/* 심각도 5단계·근거구분(2026-09-10, 실무자 피드백 ①②⑥ 반영)을 pricing.html 샘플 리포트에도
   재현하기 위한 스타일. 실제 리포트는 AI가 생성한 인라인 스타일(#dc2626/#d97706/#2563eb)을
   쓰지만, 여긴 정적 샘플이라 기존 danger/warning 토큰을 그대로 재사용한다. */
.severity-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.severity-tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; }
.severity-tag.danger { background: var(--danger-text); }
.severity-tag.warning { background: var(--warning-text); }
.severity-tag.info { background: var(--accent); }
.basis-tag { font-size: 11px; font-weight: 600; }
.violation-item.danger .basis-tag { color: var(--danger-text-3); }
.violation-item.warning .basis-tag { color: var(--warning-text-3); }
.violation-item.info .basis-tag { color: var(--text-secondary); }
.recommend-box { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--bg-card); font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); }

/* 실제 검수 결과의 "우선 수정 순서" 섹션(app.py SYSTEM_PROMPT)을 pricing.html 샘플
   리포트에도 그대로 재현하기 위한 스타일. AI 출력은 다크모드 대응을 위해 지정된 hex만
   쓰는 인라인 스타일이지만, 여기는 직접 작성한 정적 샘플이라 기존 위반유형 색 토큰
   (--danger-text/--warning-text)을 그대로 재사용해 다크모드를 별도 처리 없이 따라가게 했다. */
.priority-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.priority-item { padding-left: 12px; border-left: 4px solid; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); }
.priority-item .rank { font-weight: 800; margin-right: 2px; }
.priority-item.tier1 { border-color: var(--danger-text); }
.priority-item.tier1 .rank { color: var(--danger-text); }
.priority-item.tier2 { border-color: var(--warning-text); }
.priority-item.tier2 .rank { color: var(--warning-text); }
.priority-note { font-size: 12px; color: var(--text-tertiary); }

.rewrite-box { padding: 18px; border-radius: 14px; background: var(--safe-bg-2); border: 1px solid var(--safe-border); font-size: 14px; line-height: 1.8; color: var(--safe-text-2); }

/* "검수 리포트 예시"(HTML) 옆에 "PDF 보고서 예시"를 나란히 — 공문 서식이라는 인상은
   글로 설명하기보다 실물 이미지를 보여주는 게 훨씬 설득력 있다는 사용자 의견(2026-08-29).
   미리보기는 scripts/generate_sample_report_pdf.py가 만든 정적 PNG(PDF 1페이지 캡처)라
   리라이팅 제안까지 통째로 보인다. 왼쪽 카드는 내용이 길어서 오른쪽(이미지 카드)과 높이가
   안 맞는데, 이미지 카드를 stretch 대신 위쪽 정렬로 둬서 어색하게 늘어나지 않게 한다. */
.sample-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; margin-bottom: 32px; }
.sample-grid .content-card { margin-bottom: 0; }
/* 2026-08-29엔 미리보기 PNG가 2페이지뿐이라 원본 비율 그대로 두면 왼쪽 "검수 리포트 예시"
   카드보다 훨씬 길어져서 고정 높이(560px) 스크롤 박스로 눌러뒀었다. 2026-09-14 리포트가
   4페이지로 늘고 왼쪽 카드도 항목이 늘면서 반대로 오른쪽이 왼쪽보다 훨씬 짧아 보이는
   문제가 생겨, 스크롤 박스를 풀어 이미지를 원본 비율 그대로 펼치기로 함(실측 결과 두
   카드 높이가 거의 비슷해짐) — 페이지 수가 또 바뀌면 이 균형도 다시 틀어질 수 있으니
   그때 재조정할 것. 원본 PDF로의 이동은 아래 "샘플 PDF 다운로드" 버튼으로만 제공한다
   (이미지 자체를 링크로 만들면 클릭과 다른 제스처가 충돌하기 쉽다). */
.sample-pdf-preview { border-radius: 12px; border: 1px solid var(--border); background: var(--bg-page); overflow: hidden; }
.sample-pdf-preview img { display: block; width: 100%; height: auto; }

/* AI가 생성한 마크다운 결과(홈 즉시 진단 결과 / 결과 리포트 상세 공용) */
/* margin-bottom: 리라이팅 제안(<details>)이 SYSTEM_PROMPT 템플릿상 자기 자신에는 하단
   여백이 없어서, 바로 뒤에 오는 법적 면책 문구 박스(.report-disclaimer)와 붙어 보이던
   문제를 여기서 한 번에 고친다(2026-09-16 실사용 리포트) — 두 화면이 이 클래스를
   공유하므로 한 곳만 고쳐도 양쪽 다 반영된다. */
.markdown-body { font-size: 14px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 24px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { color: var(--text-primary); font-weight: 800; margin: 20px 0 10px; }
.markdown-body h1:first-child, .markdown-body h2:first-child, .markdown-body h3:first-child, .markdown-body h4:first-child { margin-top: 0; }
.markdown-body p { margin: 0 0 12px; }
.markdown-body ul, .markdown-body ol { margin: 0 0 12px; padding-left: 22px; }
.markdown-body li { margin-bottom: 6px; }
.markdown-body strong { color: var(--text-primary); font-weight: 700; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13.5px; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.markdown-body th { background: var(--bg-subtle); font-weight: 700; color: var(--text-primary); }

/* AI 진단 결과(.markdown-body의 내용물)는 app.py의 SYSTEM_PROMPT가 매번 같은 라이트모드
   전용 hex를 인라인 style="color: ..."로 직접 박아서 생성한다(예: 지적 문구 제목 #0f172a).
   인라인 style은 클래스 기반 규칙보다 항상 우선하므로 일반적인 방법으론 다크모드에서 못
   덮어쓴다 — 그 결과 다크 배경에 짙은 남색 글자가 그대로 남아 사실상 안 보이게 된다
   (2026-08-30 사용자가 모바일 다크모드 스크린샷으로 발견). 여기서만 값이 고정돼 있는
   특수한 경우라 [style*="..."] 부분일치 선택자 + !important로 그 정확한 hex들을
   다크모드 토큰으로 되짚어준다. 새 색이 프롬프트에 추가되면 여기도 같이 늘려야 한다. */
:root[data-theme="dark"] .markdown-body [style*="#1e293b"],
:root[data-theme="dark"] .markdown-body [style*="#0f172a"],
:root[data-theme="dark"] .markdown-body [style*="#1f2937"] { color: var(--text-primary) !important; }
:root[data-theme="dark"] .markdown-body [style*="#334155"],
:root[data-theme="dark"] .markdown-body [style*="#475569"] { color: var(--text-secondary) !important; }
:root[data-theme="dark"] .markdown-body [style*="#dc2626"] { color: var(--danger-text) !important; }
:root[data-theme="dark"] .markdown-body [style*="#d97706"] { color: var(--warning-text) !important; }
:root[data-theme="dark"] .markdown-body [style*="#16a34a"] { color: var(--safe-text) !important; }
:root[data-theme="dark"] .markdown-body [style*="#2563eb"] { color: var(--accent) !important; }
:root[data-theme="dark"] .markdown-body [style*="#e5e7eb"] { border-color: var(--border) !important; }
:root[data-theme="dark"] .markdown-body [style*="#f9fafb"] { background-color: var(--bg-subtle) !important; }
/* 지적 문구별 박스(2026-09-14 추가)는 한 요소 안에 옅은 회색 테두리(#e5e7eb, 위 규칙 대상)와
   심각도색 border-left(#dc2626 등)가 같이 들어있다. 위 border-color 규칙이 !important로 4면을
   전부 var(--border)로 덮어써서 border-left까지 무채색이 돼버리므로, 두 속성 선택자를 동시에
   요구하는(=더 구체적인) 규칙으로 border-left-color만 심각도색으로 되짚어준다. */
:root[data-theme="dark"] .markdown-body [style*="#e5e7eb"][style*="border-left: 4px solid #dc2626"] { border-left-color: #dc2626 !important; }
:root[data-theme="dark"] .markdown-body [style*="#e5e7eb"][style*="border-left: 4px solid #d97706"] { border-left-color: #d97706 !important; }
:root[data-theme="dark"] .markdown-body [style*="#e5e7eb"][style*="border-left: 4px solid #2563eb"] { border-left-color: #2563eb !important; }

.is-hidden { display: none !important; }

/* AUTH (로그인/회원가입) */
.auth-wrap { display: flex; justify-content: center; padding: 56px 0 80px; }
.auth-card { width: 100%; max-width: 400px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 36px 32px; box-shadow: 0 12px 32px var(--shadow-soft-2); }
.auth-title { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 20px; }
/* 회원가입 시 무료 체험 크레딧 3개가 상시 지급되는데 가입 전에는 어디에도 안 보여서
   "잘 못 찾겠다"는 지적(2026-08-30). 가입 폼 진입 직후, 결정을 내리기 전에 바로 보이는
   자리에 둔다. PDF 항목만 다른 색(text-tertiary)을 써서 "혜택"이 아니라 "한계"라는
   걸 시각적으로도 구분했다 — 셋 다 초록 체크로 통일하면 과장하는 느낌을 준다. */
.signup-perks { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); margin-bottom: 20px; }
.signup-perks-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.signup-perks-item svg { flex-shrink: 0; margin-top: 1px; }
.form-error { background: var(--danger-bg); color: var(--danger-text); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.form-success { background: var(--safe-bg); color: var(--safe-text); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.form-divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* 탈퇴 진입점 — 계정 설정 화면에서 눈에 띄게 강조할 이유가 없어, 버튼이 아니라 조용한
   텍스트 링크처럼 둔다(2026-09-12). 누르면 아래 상세 설명·양식이 펼쳐진다. */
.withdrawal-toggle-link { background: none; border: none; padding: 0; font-size: 13px; color: var(--text-tertiary); text-decoration: underline; cursor: pointer; }
.withdrawal-toggle-link:hover { color: var(--text-secondary); }
.form-group { margin-bottom: 16px; }
/* 진료과목·광고유형·게재매체 3개 셀렉트를 데스크탑에서 가로로 나란히 배치(2026-09-10,
   김혜미님 시안 차용 — 예전엔 각 .form-group이 순서대로 쌓여 세로로 3배 길었다). 640px
   이하(폰)에서는 원래처럼 세로로 쌓는다 — 다른 스택형 섹션들과 같은 좁은-화면 기준선. */
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 4px; margin-bottom: 14px; align-items: start; }
.form-grid-3 .form-group { margin-bottom: 0; }
/* 3개 컬럼의 캡션 줄 수가 서로 달라(1줄/2줄) 셀렉트박스 시작 높이가 컬럼마다 어긋나
   보였다(2026-09-14 지적). 캡션 최대 2줄을 기준으로 라벨 영역 높이를 고정해 셀렉트가
   항상 같은 y위치에서 시작하도록 맞춘다. */
.form-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.form-grid-3 .form-label { min-height: 54px; }
/* 라벨 옆에 괄호로 붙던 부가설명을 별도 줄로 내려서(2026-09-14, 모바일 스크린샷 확인 후
   "복잡해 보인다"는 지적으로 정비) 제목과 같은 굵기·줄에서 문장처럼 읽히던 걸 분리했다.
   더 작고 옅은 톤이라 "이게 진짜 라벨인가 설명인가" 헷갈리지 않는다. */
/* 라벨 오른쪽에 안내문을 한 줄로 붙이는 변형(2026-10-08) — 좁은 화면에서는 자연스럽게 아래줄로 내려간다 */
/* 입력 안내 툴팁 — 라벨 옆 i 버튼. 데스크탑은 마우스를 올리면, 터치·키보드는 눌러서 열고 다시 누르거나 바깥을 누르면 닫는다 */
/* 보도자료 작성기 상단 소개 — 기본 .lead는 줄 간격이 없고 본문 크기·진한 색이라 긴 문단이 붙어 보였다(2026-10-08) */
.pr-intro { margin: -4px 0 24px; word-break: keep-all; }
.pr-intro p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.8; color: var(--text-secondary); }
.pr-intro p:last-child { margin-bottom: 0; }
.pr-intro strong { color: var(--text-primary); font-weight: 700; }
.pr-intro a { color: var(--accent); }
/* 보도자료 작성기의 긴 입력칸은 세로로 늘릴 수 있게(공용 .input-textarea는 resize: none) */
#prCoreFacts, #prQuote { resize: vertical; min-height: 110px; }
/* 검수기(최대 8,000자)·기사 검수·홈페이지 URL 목록 입력칸도 길게 붙여넣는 용도라 세로로 늘릴 수 있게 */
#inputText, #articleInputContent, #manualUrlsInput { resize: vertical; min-height: 180px; }
.label-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.label-row .form-label { margin-bottom: 0; flex: 0 1 auto; }
.tip { position: relative; display: inline-block; flex: none; }
.tip-btn { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-tertiary); font-size: 11px; font-weight: 700; line-height: 1; font-family: inherit; cursor: pointer; }
.tip-btn:hover, .tip-btn:focus-visible, .tip.open .tip-btn { color: var(--accent); border-color: var(--accent); }
.tip-pop { display: none; position: absolute; z-index: 30; right: -6px; top: 26px; width: min(360px, calc(100vw - 56px)); padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px var(--shadow-soft); font-size: 12.5px; font-weight: 400; line-height: 1.7; color: var(--text-secondary); text-align: left; word-break: keep-all; }
.tip-pop ul { margin: 6px 0 8px; padding-left: 16px; }
.tip:hover .tip-pop, .tip.open .tip-pop { display: block; }
.form-label--inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.form-label--inline .form-label-optional { display: inline; margin-top: 0; font-size: 12.5px; color: var(--text-tertiary); }
.form-label-optional { display: block; font-size: 11px; font-weight: 500; color: var(--text-quaternary); margin-top: 3px; line-height: 1.45; }
.form-input, .form-select { width: 100%; height: 48px; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; font-size: 14.5px; color: var(--text-primary); background: var(--bg-input); outline: none; font-family: inherit; }
.form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-input:disabled { background: var(--bg-subtle); color: var(--text-tertiary); cursor: not-allowed; }
.password-field { position: relative; }
.password-field .form-input { padding-right: 44px; }
.password-toggle-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; cursor: pointer; color: var(--text-tertiary); display: flex; }
.password-toggle-btn:hover { color: var(--text-primary); }
.form-checkbox-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.form-checkbox-row input { margin-top: 3px; flex-shrink: 0; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--text-secondary); }

/* 회원가입 — 데스크탑에서 400px 세로 카드가 너무 좁아 보인다는 지적(2026-10-13)으로 좌(혜택)·우(폼) 2단 카드로 변경.
   폰에서는 한 줄로 쌓되 혜택 박스를 줄이고 여백을 아껴 폼이 첫 화면에 더 들어오게 한다. */
.auth-card--split { max-width: 760px; padding: 0; display: grid; grid-template-columns: 6fr 7fr; overflow: hidden; }
.signup-side { background: var(--accent-soft); padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; }
.signup-side { justify-content: flex-start; word-break: keep-all; }
.signup-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 36px; }
.signup-brand .brand-badge { display: flex; font-size: 11.5px; padding: 4px 8px; }
.signup-brand-text { font-size: 13px; font-weight: 800; color: var(--text-secondary); }
.signup-side .auth-title { margin-bottom: 8px; font-size: 24px; }
.signup-side-lead { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.signup-side .signup-perks { padding: 0; background: none; margin-bottom: 0; gap: 12px; }
.signup-side .signup-perks-item { font-size: 13px; }
.signup-main { padding: 40px 36px; }
.signup-main .form-group { margin-bottom: 14px; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid-2 .form-label { line-height: 18px; min-height: 18px; }
.form-grid-2 .form-label--inline { align-items: center; }
.signup-main .form-checkbox-row { margin-bottom: 12px; }
.signup-main .cta-btn { margin-top: 8px; }
/* 로그인 — 같은 2단 카드. 계정 복구 안내는 긴 문단이라 접어 두고 필요할 때만 연다 */
.auth-help { margin-top: 16px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.auth-help summary { cursor: pointer; text-align: center; color: var(--text-tertiary); }
.auth-help p { margin: 8px 0 0; }
.auth-card--login .form-label-optional { display: inline; margin-left: 6px; font-size: 12px; }
@media (max-width: 720px) {
  .auth-wrap { padding: 24px 0 48px; }
  .auth-card--split { grid-template-columns: 1fr; border-radius: 20px; }
  .signup-side { padding: 18px 20px 18px; }
  .signup-brand { margin-bottom: 14px; }
  .signup-brand + .auth-title { margin-top: 0; }
  .signup-side .auth-title { font-size: 21px; margin-bottom: 4px; }
  .signup-side-lead { margin-bottom: 12px; font-size: 13px; }
  .signup-side .signup-perks { gap: 8px; }
  .signup-side .signup-perks-item { font-size: 12.5px; }
  .signup-main { padding: 22px 20px 24px; }
  .form-grid-2 { grid-template-columns: 1fr; gap: 0; }
}

/* PRICING */
.page-header { font-size: 26px; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; padding-top: 48px; }
.page-sub { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 32px; }
.page-eyebrow { font-size: 12.5px; font-weight: 700; color: var(--accent); padding-top: 48px; margin-bottom: 6px; }
.page-eyebrow + .page-header { padding-top: 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 48px; }
.pricing-card { display: flex; flex-direction: column; padding: 22px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border); }
.pricing-card.popular { border: 2px solid var(--accent); }
.pricing-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.charge-selected { font-size: 15px; font-weight: 800; color: var(--text-primary); padding: 14px 16px; margin-bottom: 20px; border-radius: 12px; background: var(--accent-soft); }
.charge-selected:empty { display: none; }
.pricing-badge { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 800; margin-bottom: 10px; }
.pricing-name { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.pricing-price { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; }
.pricing-credits { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.pricing-note { font-size: 12px; color: var(--text-tertiary); }

.content-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px; margin-bottom: 32px; }
.content-card .card-title { font-size: 18px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; margin-bottom: 24px; }
.account-grid .content-card { margin-bottom: 0; }
.account-card .form-group:last-child, .account-card .form-checkbox-row:last-child { margin-bottom: 0; }
.account-card .card-title { margin-bottom: 18px; }
.account-card .card-sub + .form-group { margin-top: 0; }
.account-save { max-width: 320px; margin: 0 0 32px auto; }
.account-withdraw { padding: 24px 32px; }
@media (max-width: 860px) { .account-grid { grid-template-columns: 1fr; gap: 16px; } .account-save { max-width: none; } .account-withdraw { padding: 20px; } }
.content-card .card-sub { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; }

/* 이용약관·개인정보처리방침(terms.html·privacy.html) — v1의 Bootstrap 카드+h6/p 구조를
   .content-card 안에 넣기 위한 최소 타이포그래피. 조항이 많아 .card-title/.card-sub보다
   작은 위계가 반복해서 필요해서 별도 클래스로 뺐다(2026-08-29, 두 페이지만 v2 리뉴얼에서
   누락돼 구버전 부트스트랩 화면으로 남아있던 것을 뒤늦게 이관). */
.legal-meta { font-size: 13px; color: var(--text-tertiary); margin-bottom: 24px; }
.legal-h { font-size: 15px; font-weight: 800; color: var(--text-primary); margin: 28px 0 8px; }
.legal-h:first-child { margin-top: 0; }
.legal-p { font-size: 13.5px; line-height: 1.8; color: var(--text-secondary); margin: 0; }
.legal-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.8; color: var(--text-secondary); }
.legal-list li { margin-bottom: 4px; }
.legal-list li:last-child { margin-bottom: 0; }
/* 설명·해설 페이지(이용 가이드·규정 해설·방법론) 전용 넓은 레이아웃(2026-10-02).
   약관·개인정보처리방침은 .container-narrow + 13.5px 그대로 둔다. 컨테이너는 넓히되
   글줄·표·박스 모두 카드 폭을 똑같이 써서 왼쪽 끝선과 오른쪽 끝선이 맞게 한다(한때 글줄만 760px로 끊었더니 카드 안에서 왼쪽으로 쏠려 보였다, 2026-10-02). */
.container-wide { max-width: 960px; margin: 0 auto; padding: 0 32px; }
.container-wide .legal-h { font-size: 17px; margin: 36px 0 10px; }
.container-wide .legal-h:first-child { margin-top: 0; }
.container-wide .legal-p, .container-wide .legal-list { font-size: 14.5px; line-height: 1.85; }
.container-wide .legal-meta { font-size: 13.5px; }
/* 규정 해설 구간 맨 앞의 "핵심 요약" 박스(2026-10-12). 가능/위반 조건을 한눈에 보이게 하고 본문은 그 아래에서 근거를 푼다. */
.legal-quick { margin: 0 0 14px; padding: 14px 18px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px; }
.legal-quick-label { font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 6px; }
.legal-quick .legal-list { padding-left: 18px; }
/* 검수기 대원칙 박스 */
.principles-box { list-style: none; padding: 20px 22px; margin: 4px 0 0; max-width: none; background: transparent; border: 1px solid var(--border); border-radius: 14px; }
.container-wide .principles-box { margin: 14px 0 16px; }
.principles-box li { margin-bottom: 16px; }
.principles-box li:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .container-wide { padding: 0 16px; }
  .principles-box { padding: 16px; }
}
.cost-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 13.5px; }
.cost-table th, .cost-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.cost-table th { color: var(--text-tertiary); font-weight: 700; font-size: 12.5px; }
.cost-table td:last-child, .cost-table th:last-child { text-align: right; font-weight: 700; color: var(--text-primary); }
/* 항목명 | 설명문 2열 표(방법론 '한눈에 보기') — 뒤쪽 열이 숫자가 아니라 문장이라 왼쪽 정렬, 항목명 열을 굵게 */
.cost-table.summary-table td:last-child { text-align: left; font-weight: 400; }
/* 크레딧 수 아래에 줄바꿔 쌓는 원화 환산 — 열을 늘리지 않아 모바일에서도 2열 그대로 유지된다 */
.cost-krw { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-tertiary); white-space: nowrap; }
/* 설명 페이지의 표는 대원칙 박스와 같은 얇은 테두리 박스로 감싼다. 표와 본문의 경계를 분명히 함 */
.container-wide .table-scroll { border: 1px solid var(--border); border-radius: 14px; margin: 14px 0 16px; }
.container-wide .table-scroll .cost-table { margin-bottom: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); }
.container-wide .table-scroll .cost-table th:first-child, .container-wide .table-scroll .cost-table td:first-child { padding-left: 18px; }
.container-wide .table-scroll .cost-table th:last-child, .container-wide .table-scroll .cost-table td:last-child { padding-right: 18px; }
.container-wide .table-scroll .cost-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
  .container-wide .table-scroll:has(.phrase-table) { border: none; border-radius: 0; }
}
/* 엔진 업데이트 내역(날짜|버전|내용) — 날짜가 하이픈에서 두 줄로 꺾이던 것을 막고, 마지막 열이 문장이라 왼쪽 정렬·보통 굵기 */
.changelog-table td:first-child, .changelog-table th:first-child, .changelog-table td:nth-child(2), .changelog-table th:nth-child(2) { white-space: nowrap; vertical-align: top; }
.changelog-table td:last-child, .changelog-table th:last-child { text-align: left; font-weight: 400; color: var(--text-secondary); }
.changelog-table td { vertical-align: top; }
.cost-table.summary-table td:first-child { font-weight: 700; color: var(--text-primary); width: 32%; vertical-align: top; }

/* 방법별 비교표(챗봇/대행/우리/배수) — .cost-table을 그대로 쓰되 뒤쪽 열이 숫자가 아니라
   문장이라 오른쪽 정렬이 어울리지 않는다. 아래 규칙이 .cost-table의 :last-child를 덮어야
   하므로 반드시 그 뒤에 온다(특정도가 같아 순서로 결정됨). 5열이라 좁은 화면에서는
   .table-scroll이 가로 스크롤을 만든다 — 표를 줄여서 읽기 어렵게 만들지 않기 위함.
   우리 열 강조는 원래 :last-child였는데 오른쪽에 "대행 대비" 배수 열이 붙으면서 대상이
   밀려나서, 위치가 고정된 4열째(nth-child(4))로 바꿨다(2026-08-29). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { min-width: 780px; }
.compare-table td:last-child, .compare-table th:last-child { text-align: left; }
.compare-table th:nth-child(4) { color: var(--accent); }
.compare-table td:nth-child(4) { color: var(--text-primary); font-weight: 600; }
.compare-table td:first-child { color: var(--text-secondary); font-weight: 700; white-space: nowrap; }
/* 대행 대비 절감 배수. 표에서 제일 먼저 눈에 걸려야 하는 값이라 강조색 + 굵게 두고,
   비용이 아닌 행(소요시간·판정기준 등)은 배수가 성립하지 않아 "—"만 흐리게 남긴다. */
.compare-gap { color: var(--accent); font-weight: 800; white-space: nowrap; }

/* "자주 걸리는 표현" 3열 문장표 — .compare-table(5열 가격비교표 전용, min-width:780px에
   기댄 가로스크롤 설계)을 그대로 재사용했더니 모바일에서 셀 폭이 글자 단위로 쪼개져
   보였다(2026-09-14 실기기 스크린샷 확인). 고정폭 없이 데스크탑은 표, 640px 이하에서는
   행을 카드형 리스트로 쌓아 각 값 위에 data-label을 라벨로 보여준다. */
.phrase-table td:last-child, .phrase-table th:last-child { text-align: left; font-weight: 600; }
@media (max-width: 640px) {
  .phrase-table thead { display: none; }
  .phrase-table, .phrase-table tbody, .phrase-table tr, .phrase-table td { display: block; width: 100%; }
  .phrase-table tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .phrase-table tr:last-child { border-bottom: none; }
  .phrase-table td { padding: 4px 0; border-bottom: none; }
  .phrase-table td::before {
    content: attr(data-label); display: block; font-size: 11.5px; font-weight: 700;
    color: var(--text-tertiary); margin-bottom: 2px;
  }
  .phrase-table td:last-child { font-weight: 600; color: var(--text-primary); }
}
/* 보도자료 가이드(2026-10-08) 데스크탑 표 — 공용 .phrase-table은 마지막 열이 굵고 열 폭이 내용 길이대로 정해져서
   첫 열("① 연락처·약도")이 두 줄로 꺾이고 긴 설명 열이 굵은 글씨로 읽기 어려웠다. 이 페이지 표에만 쓰는 modifier로,
   열 폭을 고정하고 첫 열만 굵게·나머지는 보통 굵기로 둔다. 모바일(640px 이하) 카드형은 공용 규칙을 그대로 쓴다. */
/* 보도자료 가이드 본문: 문단 사이 간격이 없어 글이 붙어 보이고, 한글이 음절 중간에서 줄바꿈되던 것("연락처·약/도")을 단어 단위로 */
.press-guide { word-break: keep-all; overflow-wrap: break-word; }
.press-guide .legal-p + .legal-p { margin-top: 12px; }
/* 소재표: 문장 속 괄호로 섞여 있던 근거 조항을 항목 끝의 작은 태그로 분리 */
.law-tag { display: inline-block; margin-left: 6px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; line-height: 1.7; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; vertical-align: 1px; }
.law-tag + .law-tag { margin-left: 4px; }
/* 소재별 주의점: 표 대신 소재마다 카드 — 소재 이름을 제목으로 올려 두 칸이 폭을 나눠 쓰게 한다 */
.topic-list { margin: 14px 0 16px; }
.topic-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; }
.topic-card:last-child { margin-bottom: 0; }
.topic-name { font-size: 15.5px; font-weight: 800; color: var(--text-primary); margin: 0 0 12px; }
.topic-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; font-size: 14px; line-height: 1.75; color: var(--text-secondary); }
.topic-label { font-size: 12.5px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 6px; }
@media (max-width: 640px) { .topic-cols { grid-template-columns: 1fr; } .topic-card { padding: 16px; } }
.press-cell-list { margin: 0; padding-left: 16px; }
.press-cell-list li { margin: 0 0 6px; }
.press-cell-list li:last-child { margin-bottom: 0; }
@media (min-width: 641px) {
  .container-wide .table-scroll .press-table { table-layout: fixed; }
  .container-wide .table-scroll .press-table thead th { background: var(--bg-subtle); padding-top: 12px; padding-bottom: 12px; }
  .container-wide .table-scroll .press-table td { vertical-align: top; padding-top: 16px; padding-bottom: 16px; line-height: 1.75; }
  .container-wide .table-scroll .press-table td:last-child { font-weight: 400; color: var(--text-secondary); }
  .container-wide .table-scroll .press-table td:first-child { font-weight: 700; color: var(--text-primary); }
  .container-wide .table-scroll .press-table--pair td:first-child { font-weight: 400; color: var(--text-secondary); }
  .container-wide .table-scroll .press-table--elements th:nth-child(1) { width: 20%; }
  .container-wide .table-scroll .press-table--elements th:nth-child(2) { width: 32%; }
}
.compare-gap.none { color: var(--text-tertiary); font-weight: 400; }
.compare-closing { font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); margin: 16px 0 0; }

/* 홈 전용 "표현 교정" 리스트(2026-10-05, Claude Design 시안) — 위 .phrase-table(표)과는
   별개 컴포넌트. 가이드 페이지들의 표는 그대로 두고 홈만 이 리스트 형태를 쓴다. */
.phrase-band { background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.phrase-band .container-home { padding-top: 80px; padding-bottom: 80px; }
.phrase-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.phrase-head h2 { margin: 0; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.25; font-weight: 800; letter-spacing: -0.035em; max-width: 560px; word-break: keep-all; }
.phrase-head p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-secondary); max-width: 420px; }
.phrase-list { display: flex; flex-direction: column; }
.phrase-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 40px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--border); }
.phrase-quote { font-size: clamp(19px, 2vw, 23px); font-weight: 700; letter-spacing: -0.02em; color: var(--danger-text-2); text-decoration: line-through; text-decoration-color: var(--danger-text); text-decoration-thickness: 1.5px; word-break: keep-all; }
.phrase-reason { font-size: 13px; color: var(--text-tertiary); margin-top: 6px; }
.phrase-after { font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; letter-spacing: -0.015em; color: var(--safe-text-2); display: flex; gap: 10px; word-break: keep-all; }
.phrase-arrow { color: var(--safe-text); }
.compare-closing strong { color: var(--text-primary); font-weight: 700; }

.violation-note { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 7px; display: inline-flex; }
.violation-note.danger { background: var(--danger-border); color: var(--danger-text-2); }

/* FAQ 목록은 가독성 때문에 일부러 720px로 좁게 유지하고, 그 옆 남는 공간은 억지로
   늘리는 대신 검수기 홍보 배너(.faq-promo)로 채운다(2026-08-29). */
.faq-section { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 40px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; flex: 1 1 720px; max-width: 720px; }
.faq-item { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.faq-question { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: inherit; }
.faq-question span { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.faq-question svg { transition: transform 0.15s; flex-shrink: 0; }
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer { display: none; padding: 0 18px 18px 18px; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); }
.faq-item.open .faq-answer { display: block; }
/* 규정 해설 페이지(.container-wide)는 카드 폭 전체를 쓰고, 목록은 남는 폭을 모두 차지하며 배너가 옆에 붙는다 */
.container-wide .faq-section { margin-bottom: 32px; }
.container-wide .faq-list { flex: 1 1 0; max-width: none; min-width: 0; }
.container-wide .faq-promo { flex: 0 0 240px; min-width: 0; }
@media (max-width: 860px) { .container-wide .faq-section { flex-direction: column; } .container-wide .faq-list { width: 100%; flex-basis: auto; } .container-wide .faq-promo { flex-basis: auto; width: 100%; } }

.faq-promo { flex: 1 1 240px; min-width: 220px; position: sticky; top: 84px; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.faq-promo-eyebrow { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: 0.2px; }
.faq-promo-title { font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--text-primary); }
.faq-promo-desc { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.faq-promo-cta { align-self: flex-start; margin-top: 6px; }

/* MYPAGE */
/* 보유 크레딧·총 검수건수를 각자 독립된 카드로 나란히 두고(2026-08-31), 충전하기는
   보유 크레딧 카드 안에 세로로 붙인다 — 이전엔 한 카드 안에서 통계 묶음과 버튼만
   좌우로 나뉘어 있어 두 통계가 시각적으로 하나처럼 붙어 보인다는 지적이 있었다. */
.balance-cards { display: flex; gap: 16px; margin-bottom: 32px; }
.balance-card { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 28px 32px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border); }
.balance-info { display: block; color: inherit; text-decoration: none; }
.balance-label { font-size: 13px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 8px; }
.balance-link-hint { font-size: 12px; font-weight: 600; color: var(--text-tertiary); margin-left: 8px; }
.balance-expiry { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
.balance-info:hover .balance-label, .balance-info:hover .balance-link-hint { color: var(--accent); }
.balance-value { font-size: 30px; font-weight: 800; color: var(--text-primary); }
.balance-value span { font-size: 15px; font-weight: 600; color: var(--text-tertiary); }
.balance-charge-btn { margin-top: 20px; }
.btn-solid { padding: 12px 22px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; border: none; font-family: inherit; display: inline-flex; align-items: center; }
.btn-solid:disabled { opacity: 0.5; cursor: not-allowed; }
.info-banner { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--text-secondary); font-size: 12.5px; line-height: 1.6; margin-bottom: 24px; }
.info-banner svg { color: var(--accent); }
.history-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.history-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); }
/* 보도자료 이력(press_release_history.js)은 행 전체가 상세 페이지로 가는 <a>라 기본 링크
   서체(밑줄·방문색)부터 걷어내야 다른 .history-row(검수 이력의 <tr>, <details>)와 똑같이 보인다. */
a.history-row { text-decoration: none; color: inherit; transition: border-color 0.15s; }
a.history-row:hover { border-color: var(--accent); }
.history-date { font-size: 12.5px; color: var(--text-tertiary); flex: 0 0 84px; }
.history-text { font-size: 13.5px; color: var(--text-primary); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-row .risk-badge { min-width: 44px; }
.history-link { font-size: 13px; font-weight: 700; color: var(--accent); flex-shrink: 0; }

/* WORKSPACE (로그인 후 화면 전용 사이드바 — 2026-09-16, 닥터체크 벤치마킹 결론)
   _base.html이 active_nav == 'mypage'일 때만 nav-links 대신 이 사이드바를 렌더링한다.
   각 페이지 템플릿의 .container/.container-narrow는 그대로 재사용하되(마크업 안 건드림)
   워크스페이스 안에서는 사이드바가 이미 좌측 여백을 차지하므로 자체 max-width/padding을
   죽여서 이중 여백이 생기지 않게 한다.
   폭은 마케팅 페이지(.container 1080px)보다 넓게(1280px) 잡는다 — 표가 많은 데이터 화면이라
   여유를 더 줘도 된다는 판단(2026-09-16). .nav-inner도 워크스페이스에서는 같은 폭으로
   맞춰(.nav-inner-wide) 사이드바와 브랜드 로고 좌측 정렬이 어긋나지 않게 한다.
   **주의**: .workspace-shell은 `.page`(display:flex; flex-direction:column)의 플렉스
   아이템이다. 플렉스 아이템에 `margin: 0 auto`만 주면 auto 마진이 stretch를 무효화하고
   콘텐츠 크기로 shrink-to-fit 해버려서 페이지마다(표 컬럼 수 등) 폭이 들쭉날쭉해지는
   버그가 났었다(2026-09-16 실사용 리포트로 발견). `width: 100%`를 반드시 같이 줘야
   max-width까지 꽉 채운 뒤 auto 마진으로 중앙정렬된다. */
.workspace-shell { width: 100%; max-width: 1280px; margin: 0 auto; padding: 40px 32px 64px; display: flex; align-items: flex-start; gap: 40px; }
.workspace-sidebar { flex: 0 0 208px; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; }
.workspace-nav-link { padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.workspace-nav-link:hover { background: var(--bg-subtle); color: var(--text-primary); }
.workspace-nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.workspace-nav-primary { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--accent); font-weight: 700; }
.workspace-nav-primary:hover { background: var(--accent-soft); color: var(--accent); }
.workspace-nav-divider { height: 1px; background: var(--border); margin: 6px 4px 10px; }
.workspace-main { flex: 1 1 0; min-width: 0; }
.workspace-main .container, .workspace-main .container-narrow { max-width: none; margin: 0; padding: 0; }
.workspace-main .page-header { padding-top: 0; }
@media (max-width: 860px) {
  /* 데스크톱용 .workspace-shell의 align-items: flex-start가 모바일 세로 배치에서는
     가로축(cross-axis)에 적용되어 .workspace-main을 100%가 아니라 "내용에 맞춰
     줄어드는(fit-content)" 폭으로 만든다. 평소엔 문제 없어 보이다가, 칸 안에
     줄바꿈이 안 되는 긴 URL(예: "(URL 검수 요청) https://...")이 하나라도 들어오면
     그 문자열의 최대 폭만큼 .workspace-main 전체가 넓어져 페이지 전체가 가로로
     밀리는 심각한 버그로 실기기에서 확인됐다(2026-09-16) — width: 100%을 명시해
     고친다. 진짜 원인(줄바꿈 안 되는 URL)은 아래 .history-table 모바일 규칙의
     overflow-wrap으로 막는다.
     **주의 — overflow-x: hidden을 .workspace-main에 걸지 말 것**: .workspace-main은
     사이트 전역에서 `flex: 1 1 0`(flex-basis: 0)을 쓰는데, 플렉스 스펙상 overflow가
     visible이 아니면 "자동 최소 크기"가 0으로 강제된다. 모바일에서 메인축이 세로가
     되므로 flex-basis: 0 + 자동 최소높이 0이 겹쳐 .workspace-main의 높이 자체가
     0으로 붕괴하고, 그 안의 모든 콘텐츠가 스크롤해도 안 보이는 곳(0높이 스크롤
     컨테이너 안)에 갇혀버린다 — 실제로 이 조합을 넣었다가 로그인 후 전 화면의
     본문이 통째로 안 보이는 회귀를 만들었다(2026-09-16, 배포 직후 실기기로 발견,
     같은 세션에서 되돌림). width: 100%만으로 폭 버그는 이미 해결되므로 높이에
     영향을 주는 overflow 속성은 여기 추가하지 않는다. */
  .workspace-shell { flex-direction: column; padding: 24px 20px 48px; gap: 16px; }
  .workspace-main { width: 100%; }
  /* 모바일 사이드바 = 가로 스크롤 칩 탭바로 전환. flex: 0 0 208px(데스크톱에서 사이드바
     "폭"을 고정하던 값)를 여기서 반드시 무효화해야 한다 — .workspace-shell이 세로
     flex-direction으로 바뀌면 메인축이 세로가 되어 그 flex-basis가 "폭"이 아니라
     "높이"로 재해석돼 사이드바 전체가 208px 높이로 늘어나고, align-items:stretch(기본값)
     때문에 각 칩까지 그 높이만큼 늘어나는 버그가 실기기(2026-09-16, 갤럭시 실사용
     스크린샷)에서 발견됐다 — 세로 중앙정렬된 "새 검수 시작"과 위쪽에 붙은 나머지 탭이
     서로 다른 높이로 어긋나 보이는 형태로 나타났다. align-items를 center로 명시해 각
     칩이 자기 내용 높이만큼만 차지하게 하고, 배경이 있는 알약(pill) 모양으로 바꿔
     스크롤 가능한 탭이라는 걸 시각적으로 분명히 한다. */
  .workspace-sidebar {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    position: static;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .workspace-sidebar::-webkit-scrollbar { display: none; }
  .workspace-nav-divider { display: none; }
  .workspace-nav-link {
    flex-shrink: 0;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--bg-subtle);
  }
  .workspace-nav-link.active { background: var(--accent-soft); }
  .workspace-nav-primary {
    flex-shrink: 0;
    margin-bottom: 0;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
  }
}

/* 워크스페이스 모바일 안내 배너 — PDF 다운로드(크레딧 차감) 등 실수하기 쉬운 조작이
   많은 화면이라, 작은 화면에서는 데스크톱 사용을 권장하는 문구를 노출한다(2026-09-16).
   데스크톱에서는 완전히 숨기고(display:none 기본값), 워크스페이스 모바일 breakpoint와
   동일한 860px에서만 보이게 한다. */
.workspace-mobile-notice { display: none; }
@media (max-width: 860px) {
  .workspace-mobile-notice {
    display: block;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
  }
}

/* HISTORY (전체/즐겨찾기/휴지통) — v1 /my/history와 같은 표 구성, 톤만 v2로 */
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-tertiary); flex-shrink: 0; text-decoration: none; }
.icon-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }
.icon-btn:disabled { opacity: 0.5; cursor: default; }
.star-plain-btn { background: none; border: none; padding: 4px; display: inline-flex; cursor: pointer; color: var(--text-quaternary); }
.star-plain-btn:hover { color: var(--accent); }
.star-plain-btn.active { color: var(--accent); }
.star-plain-btn:disabled { opacity: 0.5; cursor: default; }
.history-table-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.history-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--text-tertiary); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.history-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-secondary); }
.history-table tr:last-child td { border-bottom: none; }
.history-table tbody tr:hover td { background: var(--bg-subtle); }
.history-table .ht-star { text-align: center; width: 36px; }
.history-table .ht-num { text-align: center; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.history-table .ht-text { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-table .ht-center { text-align: center; white-space: nowrap; }
/* 2026-09-10 추가 — 열이 많은 관리자 검수이력 표(원문 요약·이용자 등 max-width:280px 칸이
   둘이라 전체 폭이 컨테이너를 쉽게 넘김)에서 "리포트" 상세보기 버튼이 항상 가로 스크롤 맨
   끝에 있어 존재 자체를 못 찾는다는 지적(2026-09-10) 반영 — 테이블 폭을 늘리는 대신 이 열을
   가로 스크롤 위치와 무관하게 오른쪽에 고정한다. 화면 폭이 넓어져도(또는 좁아져도) 항상
   보이므로 테이블 폭 조정보다 더 확실하다. */
.history-table .ht-actions { text-align: right; white-space: nowrap; position: sticky; right: 0; background: var(--bg-card); }
.history-table th.ht-actions { background: var(--bg-card); }
.history-table .ht-actions .icon-btn { margin-left: 4px; }
.history-empty { padding: 40px 0; text-align: center; color: var(--text-tertiary); font-size: 13.5px; }

/* 2026-09-16 추가 — 검수 이력·크레딧 내역·1:1 문의 등 열이 많은 표가 모바일에서 가로
   드래그를 해야만 나머지 열이 보인다는 지적(실기기 확인) 반영. 표 자체(overflow-x)로
   해결하는 대신, 좁은 화면에서는 표를 세로 목록(각 행 = 라벨: 값 스택)으로 바꿔서
   가로 스크롤 자체를 없앤다. history.js/credits.js/site_check_history.js/inquiries.js가
   각 <td>에 data-label 속성을 넣어주면 ::before로 그 라벨을 붙인다 — 값 텍스트를 바꾸는
   게 아니라 속성만 추가하는 방식이라 API 응답 파싱 로직은 그대로다. */
@media (max-width: 860px) {
  .history-table-wrap { overflow-x: visible; }
  .history-table, .history-table tbody, .history-table tr, .history-table td { display: block; width: 100%; }
  .history-table thead { display: none; }
  .history-table tr { padding: 14px 2px; border-bottom: 1px solid var(--border); }
  .history-table tr:last-child { border-bottom: none; }
  .history-table td {
    padding: 3px 0; border-bottom: none; vertical-align: initial;
    text-align: left !important; white-space: normal !important; max-width: none !important;
    position: static !important; background: none !important; width: auto !important;
    /* URL처럼 공백 없는 긴 문자열은 overflow-wrap 없이는 줄바꿈이 안 돼 이 칸 하나가
       카드 폭을 넘기고, 그 폭이 다시 위쪽 .workspace-main(fit-content)까지 밀어올려
       페이지 전체가 가로로 밀리는 원인이 됐다(2026-09-16 실기기 확인) — 반드시
       모든 셀에 걸어 안전망으로 둔다. */
    overflow-wrap: anywhere; word-break: break-word;
  }
  .history-table td[data-label]::before {
    content: attr(data-label); display: inline-block; min-width: 64px; margin-right: 4px;
    font-size: 11.5px; font-weight: 700; color: var(--text-tertiary);
  }
  /* 원문 전체가 그대로 노출돼 카드 하나가 화면을 몇 장씩 채우는 문제(2026-09-16 실기기
     지적) — 2줄로 잘라 보기 좋게 만든다. td가 이미 위에서 display:block으로 바뀐
     상태라 -webkit-line-clamp(display:-webkit-box 필요)를 걸어도 표 레이아웃이
     깨질 위험이 없다(admin 표는 display:table-cell 그대로라 못 쓰는 것과 다름,
     주석 참고: .admin-page .history-table td.ht-summary). */
  .history-table .ht-text {
    font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .history-table .ht-actions { margin-top: 8px; }
  .history-table .ht-actions .icon-btn { margin-left: 0; margin-right: 8px; }
}

/* 2026-09-13 추가 — 관리자 화면은 고객용 페이지와 같은 .container 제약(max-width 1080px)을
   그대로 써서 열이 많은 표에서 가로 스크롤이 잦다는 지적 반영. 관리자는 디자인 일관성보다
   실용성이 우선이라 .admin-page 스코프로 폭을 넉넉하게 늘린다. 콘텐츠 쪽 폭은 2026-09-16에
   .admin-shell(아래 ADMIN SIDEBAR 블록)로 옮겨졌고, 이 규칙은 상단 nav bar 폭만 맞춘다. */
.admin-page .nav-inner { max-width: 1600px; }

/* ADMIN SIDEBAR (2026-09-16, 마이페이지 워크스페이스 사이드바와 같은 패턴을 관리자 8개 탭에
   적용) — 기존 가로 스크롤 탭바(.tabs/.tab)가 탭이 늘어날 때마다 더 밀려나던 것을 세로
   사이드바로 바꿨다. 탭 버튼 자체는 여전히 class="tab" + data-tab을 쓰므로
   admin/common.js의 전환 로직(#adminTabs .tab 셀렉터)은 그대로 재사용하고, 여기서는
   .admin-sidebar 스코프로 시각적 형태만 가로 pill에서 세로 목록으로 덮어쓴다. */
.admin-shell { width: 100%; max-width: 1600px; margin: 0 auto; padding: 40px 32px 64px; display: flex; align-items: flex-start; gap: 40px; }
.admin-sidebar { flex: 0 0 200px; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; background: none; padding: 0; border-radius: 0; }
.admin-sidebar .tab { display: block; width: 100%; text-align: left; padding: 10px 14px; border-radius: 10px; background: transparent; box-shadow: none; }
.admin-sidebar .tab.active { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.admin-sidebar-divider { height: 1px; background: var(--border); margin: 6px 4px 10px; }
.admin-main { flex: 1 1 0; min-width: 0; }
.admin-main .page-header { padding-top: 0; }
@media (max-width: 860px) {
  /* .workspace-shell 모바일 규칙과 같은 이유로 width: 100%가 필요하다 — 긴 문자열이
     하나라도 있으면 flex-basis: 0인 아이템이 콘텐츠 폭까지 늘어나 가로 스크롤이 생긴다
     (자세한 배경은 위 WORKSPACE 블록의 2026-09-16 모바일 버그 주석 참고). */
  .admin-shell { flex-direction: column; padding: 24px 16px 48px; gap: 16px; }
  .admin-main { width: 100%; }
  .admin-sidebar {
    flex: 0 0 auto; flex-direction: row; align-items: center; width: 100%;
    overflow-x: auto; scrollbar-width: none; position: static; gap: 6px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border);
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-sidebar .tab { flex-shrink: 0; width: auto; white-space: nowrap; background: var(--bg-subtle); }
  .admin-sidebar .tab.active { background: var(--accent-soft); }
  .admin-sidebar-divider { display: none; }
}

/* 2026-09-13 추가 — 원문 요약처럼 긴 텍스트 칸에 처음엔 .ht-text에 직접 line-clamp를
   걸었다가, display: -webkit-box가 <td>의 display: table-cell을 덮어써서 그 셀이 표
   레이아웃에서 이탈해 옆의 "이용자" 열과 정렬이 깨지는 걸 발견했다(2026-09-13) — <td> 자체의
   display는 절대 바꾸지 말 것. 대신 <td> 안에 <div class="ht-summary-inner">로 내용을 한 번 더
   감싸서 그 div에만 line-clamp를 걸고, <td>는 table-cell 그대로 유지한다. */
.admin-page .history-table td.ht-summary { max-width: 480px; white-space: normal; }
.admin-page .history-table .ht-summary-inner {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; word-break: break-word;
}
.pagination-v2 { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; margin-bottom: 40px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.pagination-v2 button:disabled { opacity: 0.4; cursor: default; }

/* 전 페이지 공통 플로팅 단축 버튼 — 스크롤 위치·페이지와 무관하게 항상 같은 자리에서
   홈의 입력창(#inputCard)으로 이동시킨다. app.js가 홈에서만 입력창이 실제로 보이는 동안
   .hidden을 붙여 숨긴다(다른 페이지는 #inputCard가 없어 그 로직 자체가 안 걸리고 항상 보임). */
.quick-check-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 10px 28px -6px rgba(19, 22, 32, 0.35);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.quick-check-fab:hover { background: var(--accent-hover); color: #fff; transform: translateY(-2px); }
.quick-check-fab.hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* FOOTER */
/* 2026-10-05 — Claude Design 시안 반영: 가운데 정렬 대신 왼쪽 정렬 + 1200px(index.html
   컨테이너 폭과 통일). 전 페이지 공통 컴포넌트(_base.html)라 모든 페이지에 적용된다 —
   네브바를 1200px로 맞출 때와 같은 이유. */
.footer { width: 100%; border-top: 1px solid var(--border); background: var(--bg-card); margin-top: auto; }
/* 2026-10-12 가운데 정렬로 복귀: 10/5 홈 리디자인에서 왼쪽 정렬이 됐지만 본문 폭이 페이지마다 다르다(홈 1200px, 해설·가이드 960px).
   왼쪽 정렬이면 가이드 페이지에서 푸터 시작선이 본문과 어긋나 보이고, 푸터 링크가 9개로 늘어 줄바꿈이 생겨 가운데가 더 정돈된다. */
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; font-size: 12.5px; line-height: 1.7; color: var(--text-tertiary); }
.footer-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.footer-disclaimer { max-width: 760px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-weight: 600; }
.footer-support { display: flex; align-items: center; justify-content: center; gap: 8px; }
.footer-support-label { color: var(--text-tertiary); }
.footer-support a { color: var(--accent); font-weight: 600; }
.footer-support-note { margin-top: -6px; }

@media (max-width: 860px) {
  .hero { flex-direction: column; }
  .hero .input-card { flex: 1 1 auto; width: 100%; }
  .sample-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-section { flex-direction: column; }
  .faq-list { max-width: 100%; width: 100%; flex-basis: auto; }
  .faq-promo { position: static; width: 100%; flex-basis: auto; }
}

/* 갤럭시 S21 등 좁은 화면(2026-08-29 신고)뿐 아니라 폰 가로모드(횡)처럼
   640px보다는 넓지만 로그인 상태의 .nav-right(테마토글+잔액+충전/내정보/로그아웃)가
   여전히 못 들어가는 중간 폭(폰 가로모드 등)에서도 .nav-left(로고+메뉴)와 겹치는 게
   재현됐음(2026-08-29 재신고, 가로모드 스크린샷). 특정 폭만 손보는 media query
   대신 위 기본 규칙(.nav-inner/.nav-left/.nav-right의 flex-wrap + .nav-right의
   margin-left:auto)이 잔액 자릿수 등 내용 길이 변화와 무관하게 항상 안전하게
   줄바꿈되도록 해준다. 아래 640px 블록은 그 위에 얹는 좁은 화면 전용 여백/크기
   미세조정일 뿐이다. */
@media (max-width: 640px) {
  /* 아이폰 홈 인디케이터 등 하단 안전영역을 가리지 않게 padding-bottom을 더한다 —
     env()를 지원 안 하는 브라우저는 그냥 0으로 취급돼 기존 16px과 동일하게 동작한다. */
  .quick-check-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 12px 16px; font-size: 13px; }

  .container, .container-narrow { padding: 0 16px; }
  .form-grid-3 { grid-template-columns: 1fr; gap: 0; }
  .form-grid-3 .form-group { margin-bottom: 16px; }
  /* 햄버거 도입(2026-10-06): 헤더는 한 줄 고정 — 로고 | 잔액·충전(또는 로그인·무료로 시작) | ☰.
     가로 스크롤 메뉴·내 정보·로그아웃·테마 토글은 헤더에서 빼서 패널(.nav-menu)로 옮긴다.
     전환 CTA(로그인/무료로 시작/잔액/충전)는 한 번 더 탭하게 만들지 않으려고 헤더에 남긴다. */
  .nav-inner { padding: 10px 16px; min-height: 56px; flex-wrap: nowrap; }
  .nav-left { flex-wrap: nowrap; gap: 0; }
  .nav-links, .nav-auth-extra { display: none; }
  .nav-right { flex-wrap: nowrap; gap: 8px; }
  .nav-auth { flex-wrap: nowrap; gap: 6px; }
  .brand-text { font-size: 14px; }
  .brand { gap: 8px; }
  .btn-ghost, .btn-solid-ink { flex-shrink: 0; padding: 7px 10px; font-size: 12.5px; white-space: nowrap; }
  .nav-login-link { border-color: transparent; padding-left: 6px; padding-right: 6px; }
  .nav-balance { font-size: 12.5px; }
  .nav-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 9px; background: none; color: var(--text-primary); cursor: pointer; }
  .nav-menu-btn[aria-expanded="true"] { background: var(--bg-subtle); }
  .nav-menu:not([hidden]) { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 14px; background: var(--bg-card); border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); }
  .nav-menu-item { display: block; width: 100%; padding: 11px 4px; border: none; border-bottom: 1px solid var(--border); background: none; text-align: left; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
  .nav-menu-item.active { color: var(--accent); font-weight: 700; }
  .nav-menu-item:last-child { border-bottom: none; }
  .nav-menu-item.nav-menu-quiet { margin-top: 6px; padding: 10px 4px 2px; border-bottom: none; font-size: 12.5px; font-weight: 500; color: var(--text-tertiary); }
  #navMenuAccount { display: contents; }
  .nav-menu-primary { color: var(--accent); font-weight: 700; }
  .nav-menu-label { padding: 14px 4px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--text-tertiary); border-bottom: none; }
  /* 햄버거 패널이 워크스페이스 내비를 대신 맡으므로, 이 폭에서는 사이드바 칩 탭바를 숨긴다.
     641~860px(태블릿·폰 가로모드)는 햄버거 버튼이 없어서 기존 칩 탭바를 그대로 쓴다. */
  .workspace-sidebar { display: none; }
  .nav-menu { max-height: calc(100vh - 57px); overflow-y: auto; }

  .hero { padding: 28px 0 32px 0; gap: 24px; }
  .hero .lead { font-size: 14.5px; }
  .hero .input-card { padding: 18px; border-radius: 16px; }

  .diff-more { margin-bottom: 40px; }

  .input-card { padding: 20px; border-radius: 18px; margin-bottom: 56px; }
  .input-card-title { font-size: 17px; }
  .dropzone { padding: 24px 16px; }
  .cta-btn { font-size: 15px; padding: 15px; }

  .page-header { font-size: 21px; padding-top: 32px; }
  .page-eyebrow { padding-top: 32px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pricing-card { padding: 16px; }
  .pricing-price { font-size: 17px; }

  .result-topbar { padding-top: 28px; }
  .report-card { padding: 22px; border-radius: 18px; }
  .report-title { font-size: 17px; }
  .btn-outline, .btn-solid-green { font-size: 12.5px; padding: 9px 12px; }

  .balance-cards { flex-direction: column; gap: 12px; }
  .balance-card { padding: 20px; }
  .history-row { flex-wrap: wrap; row-gap: 8px; }
  .history-date { flex: 0 0 auto; }
  /* PC의 1줄 말줄임(nowrap+ellipsis)을 그대로 두면 전체 폭이 좁아진 모바일에서
     한두 단어만 보여서 오히려 못 읽는다. white-space: normal로 줄바꿈은 허용하되
     line-clamp로 2줄까지만 보여주고 나머지는 "..."로 줄인다(2026-08-29, PC처럼
     문단 전체가 그대로 다 나온다는 사용자 신고로 발견). */
  .history-text {
    flex: 1 1 100%; order: 3; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
  }

  .footer-inner { padding: 28px 16px; }
}

@media (max-width: 420px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* 아주 좁은 폰(갤럭시 S 계열 360px 등, 테마 토글까지 헤더에 남기므로 460px 이하)에서는
   "장반장" 배지를 접고 "MediAD Checker"만 남긴다. 배지는 외부(큐레이션 홈) 링크라서
   남겨두면 이 앱의 홈("/")으로 돌아갈 길이 헤더에서 사라지기 때문이다(2026-10-06).
   큐레이션 홈 링크는 햄버거 패널의 "장반장 홈" 항목에서 챙긴다. */
@media (max-width: 460px) {
  .brand-badge { display: none; }
  .brand-text { font-size: 13.5px; }
}

/* 320px 폭(구형 소형 폰)은 로고와 "로그인"이 맞닿아서 한 단계 더 줄인다. */
@media (max-width: 340px) {
  .nav-inner { padding-left: 12px; padding-right: 12px; }
  .brand-text { font-size: 12.5px; }
  .nav-right, .nav-auth { gap: 4px; }
  .btn-ghost, .btn-solid-ink { padding: 7px 8px; font-size: 12px; }
}

/* ===== ADMIN DASHBOARD (templates/v2/admin/*, 2026-08-30 v1→v2 리뉴얼) =====
   기존 admin.html은 부트스트랩 5로 만들어진 v1 시절 그대로 남아있었다. 여기서부터는 v2
   토큰/컴포넌트를 그대로 재사용하고, v2에 없던 것만(모달/통계타일/탭배지/필터바/설정행)
   최소한으로 새로 추가한다. */

.admin-brand-tag { font-size: 12px; font-weight: 700; color: var(--text-tertiary); padding: 4px 10px; border-radius: 999px; background: var(--bg-subtle); margin-left: 4px; }

/* 통계 타일 그리드 — 대시보드/매출 탭 공용. .balance-value의 타이포 토큰을 재사용하되
   9개를 나란히 둬야 해서 그리드로 새로 짠다. */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.stat-tile.is-clickable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.stat-tile.is-clickable:hover { border-color: var(--accent); background: var(--bg-subtle); }
.stat-tile-value { font-size: 26px; font-weight: 800; color: var(--text-primary); }
.stat-tile-label { font-size: 12.5px; font-weight: 700; color: var(--text-tertiary); }

/* 탭 카운트 배지 — 새 색 만들지 않고 .risk-badge.danger와 같은 토큰 재사용 */
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 6px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 800; background: var(--danger-bg); color: var(--danger-text); }

/* 필터 바 — 검색어+셀렉트+체크박스 조합(검수 이력/회원/매출 탭 공용). 인풋 자체는
   .form-input/.form-select 그대로 재사용하고 폭만 좁힌다. */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filter-bar .form-input, .filter-bar .form-select { height: 40px; }
.filter-search { width: 100%; max-width: 320px; }
.filter-select { width: 100%; max-width: 160px; }
.filter-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; user-select: none; }
.filter-checkbox input { cursor: pointer; }

/* AI 설정 탭 — 필드 하나 + 저장 버튼이 한 행에 있는 인라인 저장 패턴(v2엔 없던 것) */
.settings-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.settings-row:last-child { margin-bottom: 0; }
.settings-row .form-group { flex: 1 1 240px; margin-bottom: 0; }
.settings-row .btn-solid { flex-shrink: 0; height: 48px; }
.settings-status { font-weight: 500; color: var(--text-tertiary); }
.settings-status.is-set { color: var(--safe-text); font-weight: 700; }

/* 모달 — v2 최초 도입(관리자 대시보드용, 그전엔 v2에 모달 컴포넌트가 아예 없었음).
   오버레이 클릭/Esc/닫기버튼으로 닫히고, 열고닫기는 .is-hidden 토글만으로 처리한다. */
.modal-overlay { position: fixed; inset: 0; background: rgba(11, 15, 26, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.modal-card { width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 20px 48px var(--shadow-soft-3); padding: 28px; }
.modal-card.modal-lg { max-width: 720px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-title { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.modal-close-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-tertiary); display: flex; }
.modal-close-btn:hover { color: var(--text-primary); }
.modal-body { margin-bottom: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* 회원 탭 이메일 셀 — 탈퇴요청 배지 아래 환급계좌 줄(있을 때만) */
.member-email-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.member-bank-line { font-size: 12.5px; color: var(--danger-text); line-height: 1.5; }
.member-bank-caution { font-style: italic; font-weight: 700; }

/* PDF 권한 정적 배지(구매 기반이라 토글 불가) — .risk-badge.small.safe와 같은 톤 */
.pdf-static-badge { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--safe-bg); color: var(--safe-text); white-space: nowrap; }

@media (max-width: 860px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr; }
  .filter-search, .filter-select { max-width: 100%; }
  .modal-card { padding: 20px; }
}


/* 뉴스레터 아카이브(2026-09-24) — 본문 서식은 .markdown-body를 그대로 재사용한다. */
.newsletter-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.newsletter-item { display: block; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; }
.newsletter-item:hover { border-color: var(--accent); }
.newsletter-item.has-thumb { display: flex; gap: 18px; align-items: flex-start; }
.newsletter-item-thumb { flex: 0 0 200px; width: 200px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); }
.newsletter-item-text { min-width: 0; flex: 1; }
@media (max-width: 560px) { .newsletter-item.has-thumb { flex-direction: column; gap: 12px; } .newsletter-item-thumb { flex-basis: auto; width: 100%; } }
.newsletter-item-date { font-size: 13px; color: var(--text-tertiary); margin-bottom: 4px; }
.newsletter-item-title { font-size: 18px; line-height: 1.45; font-weight: 800; color: var(--text-primary); word-break: keep-all; }
.newsletter-item-summary { margin-top: 8px; font-size: 15px; line-height: 1.65; word-break: keep-all; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .newsletter-item-title { font-size: 17px; } .newsletter-item-summary { font-size: 14.5px; } }
.newsletter-back { margin-bottom: 12px; font-size: 13px; }
/* 지난 호 이동(2026-10-13): 글자 링크 대신 작은 알약. 모바일에서는 글을 읽는 중에도 따라다니도록 헤더 아래에 붙인다
   (우하단 quick-check-fab과 겹치지 않게 위쪽에 둔다). */
.newsletter-back-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 700; text-decoration: none; }
.newsletter-back-pill:hover { border-color: var(--accent); color: var(--accent); }
.newsletter-back .newsletter-back-pill { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
/* 모바일: 읽는 동안 왼쪽 하단에 고정해 오른쪽 하단의 quick-check-fab(지금 검수하기)과 좌우 균형을 맞춘다(2026-10-13). 크기·높이·여백을
   fab의 모바일 값(right 16px, bottom 16px, padding 12px 16px, 13px)과 같게 둬서 한 줄로 나란히 보이게 한다. */
@media (max-width: 860px) {
  .newsletter-back { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 39; margin: 0; }
  .newsletter-back .newsletter-back-pill { padding: 12px 16px; font-size: 13px; font-weight: 800; box-shadow: 0 10px 28px -6px rgba(19, 22, 32, 0.35); }
}
.newsletter-back { transition: opacity 0.15s; }
.newsletter-back.is-covered { opacity: 0; pointer-events: none; }
.newsletter-pager { display: flex; gap: 12px; margin: 8px 0 16px; }
.newsletter-pager-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); text-decoration: none; }
.newsletter-pager-item:hover { border-color: var(--accent); }
.newsletter-pager-next { text-align: right; margin-left: auto; }
.newsletter-pager-label { font-size: 12px; font-weight: 800; color: var(--accent); }
.newsletter-pager-title { font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.newsletter-all { text-align: center; margin: 0 0 40px; }
@media (max-width: 560px) { .newsletter-pager { flex-direction: column; } .newsletter-pager-next { text-align: left; margin-left: 0; } }
.newsletter-cover { margin: 14px 0 18px; }
.newsletter-cover img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); }
.newsletter-body { margin-top: 20px; font-size: 15.5px; line-height: 1.85; }
.newsletter-body a { color: var(--accent); text-decoration: underline; }
.newsletter-body figure { margin: 20px 0; }
.newsletter-body img { display: block; max-width: min(100%, 560px); height: auto; margin: 0 auto; border-radius: 12px; border: 1px solid var(--border); }
.newsletter-body figcaption { margin-top: 8px; font-size: 12.5px; color: var(--text-tertiary); }
.newsletter-body blockquote { margin: 12px 0; padding: 4px 14px; border-left: 3px solid var(--border); color: var(--text-secondary); }
.newsletter-disclaimer { margin: 8px 0 24px; }
.newsletter-cta { margin-top: 24px; }
.newsletter-cta-btn { display: block; margin-top: 12px; text-align: center; text-decoration: none; }


/* 뉴스레터 본문 컴포넌트(2026-09-24) — sanitize_newsletter_html이 허용하는 nl-* 클래스만 쓴다. 색은 전부
   사이트 변수라 다크모드가 자동으로 따라온다. 메일용 카드 이미지와 같은 시각 언어(라벨 알약·좌측 색띠·허용/금지 칩). */
.nl-summary { margin: 20px 0 8px; padding: 16px 20px; border-radius: 14px; background: var(--accent-soft); }
.nl-summary strong { display: block; margin-bottom: 6px; color: var(--accent); font-size: 13px; letter-spacing: 0.02em; }
.nl-summary ul { margin: 0; padding-left: 18px; }
.nl-summary li { margin-bottom: 4px; color: var(--text-primary); }
.nl-card { margin: 16px 0; padding: 20px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.nl-card h3 { margin: 10px 0 8px; font-size: 18px; color: var(--text-primary); }
.nl-card p { margin: 0 0 8px; }
.nl-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 800; }
.nl-card-amber .nl-pill { background: var(--warning-bg); color: var(--warning-text); }
.nl-card-gray .nl-pill { background: var(--bg-subtle); color: var(--text-secondary); }
.nl-chipline { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; font-weight: 700; color: var(--text-primary); }
.nl-chip { flex-shrink: 0; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.nl-chip-ok { background: var(--safe-bg); color: var(--safe-text); }
.nl-chip-no { background: var(--danger-bg); color: var(--danger-text); }
.nl-row { margin: 10px 0 0; }
.nl-row-head { margin: 12px 0 2px; font-weight: 800; color: var(--text-primary); }
.nl-note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-tertiary); }
.newsletter-lead { margin: 4px 0 0; font-size: 16px; line-height: 1.7; color: var(--text-secondary); }

.newsletter-body .nl-card p, .newsletter-body .nl-chipline { font-size: 15px; line-height: 1.75; }
.newsletter-body figcaption { text-align: center; }

/* 뉴스레터 읽기 화면(2026-10-16) — 사이트 본문과 달리 부록 잡지처럼 흰 지면 위에서, 더 크고 진한 글자로 읽는다.
   .newsletter-sheet 안에서만 적용돼 다른 페이지엔 영향이 없다. 색은 전부 사이트 변수라 다크모드가 자동으로 따라온다.
   폭: 비로그인은 .container-narrow(820px)를 지면 폭에 맞춰 넓히고, 로그인(워크스페이스)은 남는 폭이 968px까지 넓어
   줄이 너무 길어지므로 같은 지면 폭(820px)으로 묶는다. */
.container-narrow.newsletter-page { max-width: 884px; }
.workspace-main .container-narrow.newsletter-page { max-width: 820px; margin: 0 auto; }
.newsletter-sheet { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 36px 44px 40px; margin: 12px 0 24px; }
.newsletter-sheet { word-break: keep-all; overflow-wrap: break-word; }
.newsletter-sheet .page-header { padding-top: 0; font-size: 30px; line-height: 1.35; margin-bottom: 10px; text-wrap: balance; }
.newsletter-sheet .newsletter-lead { font-size: 17px; color: var(--text-primary); }
.newsletter-sheet .newsletter-body { margin-top: 24px; font-size: 17px; line-height: 1.8; color: var(--text-primary); }
.newsletter-sheet .newsletter-body p { margin: 0 0 16px; }
.newsletter-sheet .newsletter-body h2 { font-size: 22px; line-height: 1.4; margin: 44px 0 14px; }
.newsletter-sheet .newsletter-body h2:first-child { margin-top: 0; }
.newsletter-sheet .newsletter-body li { margin-bottom: 8px; }
.newsletter-sheet .nl-card { background: var(--bg-page); }
.newsletter-sheet .newsletter-body .nl-card p, .newsletter-sheet .newsletter-body .nl-chipline { font-size: 16px; }
.newsletter-sheet .nl-summary li { font-size: 16px; }
.newsletter-sheet .nl-row, .newsletter-sheet .nl-row-head, .newsletter-sheet .newsletter-body .nl-card li { font-size: 16px; line-height: 1.7; }
.newsletter-sheet .nl-note { font-size: 13.5px; }
@media (max-width: 560px) {
  .newsletter-sheet { padding: 24px 18px 28px; border-radius: 14px; }
  .newsletter-sheet .page-header { font-size: 23px; }
  .newsletter-sheet .newsletter-lead { font-size: 16px; }
  .newsletter-sheet .newsletter-body { font-size: 16.5px; }
  .newsletter-sheet .newsletter-body h2 { font-size: 20px; margin-top: 36px; }
  .newsletter-sheet .newsletter-body .nl-card p, .newsletter-sheet .nl-row, .newsletter-sheet .nl-row-head, .newsletter-sheet .nl-summary li, .newsletter-sheet .newsletter-body .nl-card li { font-size: 15.5px; }
}
/* 「참고」 박스(.nl-card-gray: 확인되지 않은 부분·근거 자료 등)는 보조 정보라 본문보다 작게 둔다. 본문 카드는 기본 .nl-card를 쓴다.
   위의 일반 카드 규칙(모바일 포함)보다 뒤에 둬서 이긴다. */
.newsletter-sheet .nl-card-gray h3 { font-size: 16px; }
.newsletter-sheet .newsletter-body .nl-card-gray p, .newsletter-sheet .newsletter-body .nl-card-gray li { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.newsletter-sheet .newsletter-body .nl-card-gray li { margin-bottom: 4px; }
@media (max-width: 560px) {
  .newsletter-sheet .nl-card-gray h3 { font-size: 15.5px; }
  .newsletter-sheet .newsletter-body .nl-card-gray p, .newsletter-sheet .newsletter-body .nl-card-gray li { font-size: 13.5px; }
}


/* FAQ·뉴스레터 2단 래퍼(2026-10-05, Claude Design 시안) — 뉴스레터 칼럼이 없으면(미발행 등)
   FAQ 칼럼 하나만 남아 flex가 자동으로 전체 폭을 채운다. */
.faq-newsletter-row { display: flex; gap: 40px; align-items: stretch; margin-bottom: 32px; }
.faq-newsletter-col { flex: 1 1 0; min-width: 0; }
@media (max-width: 860px) { .faq-newsletter-row { flex-direction: column; gap: 28px; } }
.faq-newsletter-col-card { display: flex; flex-direction: column; }

/* 메인 페이지 하단 "최신 뉴스레터" 카드(2026-09-24) — 발행된 호가 있을 때만 렌더된다. */
.home-newsletter { margin: 0; padding: 24px 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); flex: 1 1 auto; display: flex; flex-direction: column; }
.home-newsletter-head { display: flex; gap: 16px; align-items: flex-start; }
.home-newsletter-headtext { min-width: 0; flex: 1 1 0; }
.home-newsletter-thumb { flex: 0 0 auto; width: 128px; aspect-ratio: 400 / 210; border-radius: 10px; overflow: hidden; background: var(--bg-subtle); display: block; }
.home-newsletter-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-newsletter-recent { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); }
.home-newsletter-actions + .home-newsletter-recent { margin-top: 20px; }
.home-newsletter-recent li + li { margin-top: 2px; }
.home-newsletter-recent a { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 13.5px; color: var(--text-secondary); }
.home-newsletter-recent a:hover .home-newsletter-recent-title { color: var(--accent); }
.home-newsletter-recent-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.home-newsletter-recent-date { flex: 0 0 auto; color: var(--text-tertiary); font-size: 12.5px; }
@media (max-width: 560px) { .home-newsletter-head { flex-direction: column; gap: 12px; } .home-newsletter-thumb { width: 100%; } .home-newsletter-subscribe { display: none; } }
.home-newsletter-eyebrow { font-size: 12.5px; font-weight: 800; color: var(--accent); letter-spacing: 0.02em; }
.home-newsletter-title { display: block; margin-top: 8px; font-size: 19px; font-weight: 800; line-height: 1.5; color: var(--text-primary); }
.home-newsletter-title:hover { color: var(--accent); }
.home-newsletter-summary { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home-newsletter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; }
.home-newsletter-btn { display: inline-block; width: auto; padding: 10px 18px; font-size: 14px; text-decoration: none; }
.home-newsletter-more { font-size: 13.5px; font-weight: 700; }

/* 뉴스레터 잠금 카드(비로그인에게 첫 섹션 이후를 가릴 때) */
.newsletter-gate { margin-top: 24px; border-left: 4px solid var(--accent); }
.newsletter-gate-highlight { background: var(--accent-soft); border-left-width: 6px; }
.newsletter-gate-highlight .card-title { font-size: 18px; }
.newsletter-gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.newsletter-gate-btn { display: inline-block; width: auto; padding: 11px 20px; font-size: 14.5px; text-decoration: none; }
.newsletter-gate-login { font-size: 13.5px; font-weight: 700; }


/* 이용 가이드 검수 순서 다이어그램(2026-09-30) — 번호 카드 그리드. 모바일은 1열. */
.flow-grid { list-style: none; margin: 8px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.flow-step { position: relative; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px 16px 62px; }
.flow-num { position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.flow-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; }
.flow-ico { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flow-desc { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
.flow-desc a { color: var(--accent); }
.flow-note { padding-left: 18px; background: var(--accent-soft); border-color: var(--accent); }
@media (max-width: 640px) { .flow-grid { grid-template-columns: 1fr; } }
/* 아이콘을 번호 밑에 두는 변형 — guide_usage.html의 <ol class="flow-grid">에 flow-grid--icon-under를 추가하면 적용 */
.flow-grid--icon-under .flow-ico { position: absolute; left: 22px; top: 56px; width: 22px; height: 22px; }
.flow-grid--icon-under .flow-note .flow-ico { position: static; }

/* 이용 가이드 '검수 순서' — 2열 격자는 2번 단계만 길어 높이가 들쭉날쭉했다(2026-10-02).
   번호 | 제목+아이콘 | 설명을 한 줄 세로 목록으로 쌓고, 단계 사이를 세로선으로 잇는다. */
.container-wide .flow-grid { grid-template-columns: 1fr; gap: 0; margin: 12px 0 28px; }
.container-wide .flow-step { background: transparent; border: none; border-radius: 0; padding: 0 0 22px 52px; }
.container-wide .flow-step::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px; background: var(--border); }
.container-wide .flow-step:last-child::before, .container-wide .flow-step.flow-note::before { display: none; }
.container-wide .flow-num { left: 0; top: 0; }
.container-wide .flow-title { min-height: 30px; margin-bottom: 4px; font-size: 16px; }
.container-wide .flow-grid--icon-under .flow-ico { position: static; width: 20px; height: 20px; order: -1; }
.container-wide .flow-desc { font-size: 14.5px; line-height: 1.8; }
.container-wide .flow-step.flow-note { margin-top: 4px; padding: 16px 18px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 14px; }
.container-wide .flow-step.flow-note .flow-title { min-height: 0; }
.container-wide .flow-step:nth-last-child(2)::before { display: none; }

/* 요금·FAQ 탭형 FAQ 허브(2026-09-30). JS가 없으면 모든 그룹이 제목과 함께 펼쳐 보이고, JS가 켜지면(.js) 탭으로 바뀐다. */
.faq-hub { flex: 1 1 720px; max-width: 720px; min-width: 0; scroll-margin-top: 140px; }
@media (max-width: 860px) { .faq-hub { max-width: 100%; width: 100%; flex-basis: auto; } }
.faq-tabs { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.faq-hub.js .faq-tabs { display: flex; }
.faq-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card, var(--bg-subtle)); color: var(--text-secondary); font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.faq-tab:hover { color: var(--text-primary); }
.faq-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.faq-tab-count { font-size: 11.5px; font-weight: 700; opacity: 0.75; }
.faq-panel { margin-bottom: 22px; }
.faq-group-title { font-size: 14px; font-weight: 800; color: var(--text-secondary); margin: 6px 2px 10px; }
.faq-hub.js .faq-group-title { display: none; }
.faq-hub.js .faq-panel { display: none; margin-bottom: 0; }
.faq-hub.js .faq-panel.active { display: block; }
.faq-panel .faq-item + .faq-item { margin-top: 10px; }
.faq-more { margin: 12px 4px 0; font-size: 13px; line-height: 1.6; color: var(--text-tertiary); }
.faq-more a { color: var(--accent); }

/* 재검수 비교(2026-10-02) — 검수 폼의 연결 안내 배너와 결과의 "이전 검수와 비교" 패널 */
.recheck-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.recheck-banner b { color: var(--text-primary); }
.recheck-banner-clear { flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.compare-panel { margin: 0 0 20px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-subtle); }
.compare-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.compare-prev-link { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.compare-risk { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); }
.compare-arrow { color: var(--text-tertiary); font-weight: 800; }
.compare-counts { margin: 8px 0 14px; font-size: 13px; color: var(--text-tertiary); }
.compare-group { margin-bottom: 12px; }
.compare-group-title { font-size: 13.5px; font-weight: 800; margin-bottom: 4px; }
.compare-group.is-resolved .compare-group-title { color: var(--safe-text); }
.compare-group.is-remaining .compare-group-title { color: var(--warning-text); }
.compare-group.is-added .compare-group-title { color: var(--danger-text); }
.compare-group ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--text-primary); }
.compare-sev { margin-left: 4px; font-size: 12px; color: var(--text-tertiary); }
.compare-was { font-size: 12.5px; color: var(--text-tertiary); }
.compare-empty { font-size: 14px; color: var(--text-secondary); }
.compare-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.6; color: var(--text-tertiary); }
@media (max-width: 640px) { .recheck-banner { flex-direction: column; align-items: flex-start; } }

/* ───────── 해설·기준 문서(.guide-doc) 가독성 개선 (2026-10-13) ─────────
   /guide/medical-ad-rules · /guide/media-policy · /guide/pre-publish-checklist 본문 카드에만 붙는 범위 한정 규칙이다(다른 설명 페이지는 그대로).
   ① 한글을 음절 중간이 아니라 단어 단위로 줄바꿈(표의 좁은 열에서 "치료경/험담"으로 꺾이던 것) ② 섹션 사이 구분선·문단 간격
   ③ 표: 머리글 배경, 열마다 위계(번호·분류는 강조색, 설명은 보통 굵기 — 예전엔 마지막 열이 전부 굵은 글씨라 덩어리로 읽혔다),
   모바일은 행을 카드로 쌓는다. 열 위계는 표마다 의미가 달라 gt-* modifier로 지정한다. */
.guide-doc { word-break: keep-all; overflow-wrap: break-word; }
.guide-doc .legal-p + .legal-p { margin-top: 12px; }
.guide-doc .legal-list li { margin-bottom: 6px; }
.guide-doc .legal-list li:last-child { margin-bottom: 0; }
.guide-doc h2.legal-h:not(:first-child) { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--border); }
.guide-doc h2[id] { scroll-margin-top: 84px; }
.guide-doc h3.legal-h { padding-left: 10px; border-left: 3px solid var(--accent-soft-2); line-height: 1.45; }
/* "핵심 요약" 박스: 왼쪽 막대 대신 연한 배경 + 알약 라벨 + 점 글머리표(2026-10-13, 막대가 투박하다는 지적) */
.guide-doc .legal-quick { padding: 18px 22px 20px; background: var(--bg-subtle); border: none; border-radius: 14px; }
.guide-doc .legal-quick-label { display: inline-block; margin: 0 0 12px; padding: 3px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.03em; }
.guide-doc .legal-quick .legal-list { list-style: none; padding-left: 0; }
.guide-doc .legal-quick .legal-list li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.guide-doc .legal-quick .legal-list li:last-child { margin-bottom: 0; }
.guide-doc .legal-quick .legal-list li::before { content: ""; position: absolute; left: 3px; top: 0.85em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.55; }

.guide-doc .table-scroll { background: var(--bg-card); }
.guide-doc .table-scroll .cost-table thead th { background: var(--bg-subtle); color: var(--text-secondary); font-size: 12.5px; letter-spacing: 0.02em; padding-top: 12px; padding-bottom: 12px; white-space: nowrap; }
.guide-doc .table-scroll .cost-table td { padding-top: 14px; padding-bottom: 14px; vertical-align: top; line-height: 1.7; }
.guide-doc .phrase-table td:last-child { font-weight: 400; color: var(--text-secondary); }
.guide-doc .phrase-table strong { color: var(--text-primary); font-weight: 700; }
.gt-group td { white-space: normal; }

@media (min-width: 641px) {
  .guide-doc .phrase-table { table-layout: fixed; }
  .guide-doc .phrase-table tbody tr:hover td { background: var(--bg-subtle); }
  /* 호·항 번호 열: 강조색, 줄바꿈 없음("10호"가 "10/호"로 꺾이던 것) */
  .gt-ho th:first-child, .gt-spec th:first-child, .gt-ref th:first-child { width: 76px; }
  .gt-ho td:first-child, .gt-spec td:first-child, .gt-ref td:first-child { white-space: nowrap; color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
  .gt-ho th:nth-child(2) { width: 44%; }
  .gt-ho td:nth-child(2) { color: var(--text-primary); font-weight: 600; }
  .gt-ho td:last-child { color: var(--text-secondary); font-weight: 400; }
  .gt-ref th:nth-child(3) { width: 120px; }
  .gt-ref td:last-child { white-space: nowrap; color: var(--text-tertiary); font-weight: 600; }
  /* 위반 사례 5분류: 유형(굵게) | 복지부 사례 | 조항(작게) | 점검할 것(운영자 덧붙임이라 색을 달리해 구분) */
  .gt-cases th:nth-child(1) { width: 15%; } .gt-cases th:nth-child(3) { width: 14%; } .gt-cases th:nth-child(4) { width: 27%; }
  .gt-cases td:nth-child(1) { color: var(--text-primary); font-weight: 700; }
  .gt-cases td:nth-child(3) { font-size: 13px; color: var(--text-tertiary); font-weight: 600; }
  .gt-cases th:last-child { color: var(--accent); }
  .gt-cases td:last-child { background: var(--accent-soft); color: var(--text-primary); font-weight: 500; }
  .gt-cases tbody tr:hover td:last-child { background: var(--accent-soft-2); }
  /* 심의 수수료 */
  .gt-fee th:nth-child(1) { width: 110px; } .gt-fee th:nth-child(3) { width: 150px; }
  .gt-fee td:nth-child(1) { color: var(--text-primary); font-weight: 700; white-space: nowrap; }
  .gt-fee td:last-child { color: var(--text-primary); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* 점검 체크표(문구 | 이유 | 근거) */
  .gt-check th:nth-child(1) { width: 40%; } .gt-check th:nth-child(3) { width: 19%; }
  .gt-check td:nth-child(1) { color: var(--text-primary); font-weight: 600; }
  .gt-check td:last-child { color: var(--accent); font-weight: 700; }
  /* 매체별 한눈에 비교표: 매체 | 사전심의·심의필번호 | 후기·전후사진 | 눈에 띄는 별도 규칙. 매체 묶음마다 구분 행 */
  .gt-matrix th:nth-child(1) { width: 17%; } .gt-matrix th:nth-child(2) { width: 25%; } .gt-matrix th:nth-child(3) { width: 25%; }
  .gt-matrix td:first-child { color: var(--text-primary); font-weight: 700; }
  .gt-matrix td:last-child { font-weight: 400; }
  .gt-matrix .gt-group td { background: var(--bg-subtle); color: var(--accent); font-weight: 800; font-size: 12.5px; letter-spacing: 0.04em; padding: 9px 18px; }
  .gt-matrix .gt-group:hover td { background: var(--bg-subtle); }
  .gt-matrix .gt-none { color: var(--text-tertiary); }
}
@media (max-width: 640px) {
  .guide-doc h2.legal-h:not(:first-child) { margin-top: 36px; padding-top: 24px; }
  .guide-doc .phrase-table tr { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; background: var(--bg-card); }
  .guide-doc .phrase-table tr:last-child { border: 1px solid var(--border); }
  .guide-doc .phrase-table td:first-child { font-size: 15px; font-weight: 800; color: var(--text-primary); padding-bottom: 6px; }
  .guide-doc .phrase-table td:first-child::before { display: none; }
  .gt-ho td:first-child, .gt-spec td:first-child, .gt-ref td:first-child { color: var(--accent); }
  .guide-doc .phrase-table td:last-child { color: var(--text-secondary); font-weight: 400; }
  .gt-cases td:last-child { background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; margin-top: 6px; color: var(--text-primary); }
  .gt-fee td:last-child { color: var(--text-primary); font-weight: 800; }
  .gt-matrix tr.gt-group { border: none; background: transparent; padding: 0; margin: 20px 0 8px; }
  .gt-matrix tr.gt-group td { font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); padding: 0; }
  .gt-matrix tr.gt-group td::before { display: none; }
  .gt-matrix .gt-none { color: var(--text-tertiary); }
  .guide-doc .table-scroll:has(.phrase-table) { background: transparent; }
}

/* 페이지 안 바로가기 칩 */
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.guide-toc a { display: inline-block; padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.guide-toc a:hover { color: var(--accent); border-color: var(--accent-soft-2); background: var(--accent-soft); }
.gt-note { font-size: 13px; line-height: 1.7; color: var(--text-tertiary); margin-top: 8px; }
/* 번호+제목 대섹션(h2)은 소제목(h3 16px)보다 확실히 크게 — 위계가 흐려 보인다는 지적(2026-10-13) */
.container-wide .guide-doc h2.legal-h { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.35; }
@media (max-width: 640px) { .container-wide .guide-doc h2.legal-h { font-size: 19.5px; } }
/* 위 열별 규칙이 .guide-doc .phrase-table td:last-child(우선순위 더 높음)에 밀려 적용되지 않던 것을 같은 접두어로 다시 선언(2026-10-13) */
@media (min-width: 641px) {
  .guide-doc .gt-ref td:last-child { white-space: nowrap; color: var(--text-tertiary); font-weight: 600; }
  .guide-doc .gt-fee td:last-child { color: var(--text-primary); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .guide-doc .gt-check td:last-child { color: var(--accent); font-weight: 700; }
  .guide-doc .gt-cases td:last-child { background: var(--accent-soft); color: var(--text-primary); font-weight: 500; }
  .guide-doc .gt-cases tbody tr:hover td:last-child { background: var(--accent-soft-2); }
  .guide-doc .gt-matrix tr.gt-group td { background: var(--bg-subtle); color: var(--accent); font-weight: 800; font-size: 13px; letter-spacing: 0.03em; padding: 10px 18px; line-height: 1.4; }
}
@media (max-width: 640px) {
  .guide-doc .gt-fee td:last-child { color: var(--text-primary); font-weight: 800; }
  .guide-doc .gt-cases td:last-child { background: var(--accent-soft); color: var(--text-primary); }
  .guide-doc .gt-matrix tr.gt-group td { color: var(--accent); font-weight: 800; font-size: 13px; padding: 0; background: transparent; }
}
/* 모바일 카드 안의 셀은 카드 패딩만 쓴다 — 데스크톱 표용 첫/끝 열 좌우 패딩(18px)이 겹쳐 제목이 들여쓰기돼 보이던 것 */
@media (max-width: 640px) {
  .container-wide .guide-doc .table-scroll .phrase-table td,
  .container-wide .guide-doc .table-scroll .phrase-table td:first-child,
  .container-wide .guide-doc .table-scroll .phrase-table td:last-child { padding-left: 0; padding-right: 0; }
  .container-wide .guide-doc .table-scroll .gt-cases td:last-child { padding: 8px 10px; }
  .container-wide .guide-doc .table-scroll .gt-matrix tr.gt-group td { padding: 0; }
}

/* ───────── 가이드 공통 탭 바(2026-10-13) ─────────
   헤더 바로 아래에 붙어 같이 따라오는 얇은 탭 줄. 현재 문서는 강조색 + 밑줄, 좁은 화면에서는 가로 스크롤(스크롤바는 숨김, 오른쪽 끝에
   페이드로 "더 있음"을 알린다). 헤더 높이는 _guide_tabs.html이 --nav-h로 실측해 넣고, 값이 없을 때를 위한 기본값을 둔다. */
:root { --nav-h: 69px; }
@media (max-width: 860px) { :root { --nav-h: 57px; } }
.guide-tabs { position: sticky; top: var(--nav-h); z-index: 9; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.guide-tabs-inner { max-width: 960px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.guide-tabs-inner::-webkit-scrollbar { display: none; }
.guide-tabs-label { flex: 0 0 auto; margin-right: 10px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; }
.guide-tab { flex: 0 0 auto; position: relative; padding: 15px 13px 14px; font-size: 14px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; transition: color 0.15s; }
.guide-tab:hover { color: var(--text-primary); }
.guide-tab[aria-current="page"] { color: var(--accent); font-weight: 800; }
.guide-tab[aria-current="page"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
@media (max-width: 640px) {
  .guide-tabs-inner { padding: 0 8px; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .guide-tabs-label { display: none; }
  .guide-tab { padding: 14px 12px 13px; font-size: 13.5px; }
  .guide-tab[aria-current="page"]::after { left: 12px; right: 12px; }
}
/* 탭 바가 헤더 아래에 한 줄 더 붙으므로 앵커로 이동할 때 제목이 가려지지 않게 여백을 키운다 */
.guide-doc h2[id], .container-wide h2[id], .container-wide .content-card[id] { scroll-margin-top: 132px; }

/* 소메뉴 칩 바로 아래 첫 제목은 위 여백·구분선이 필요 없다 */
.guide-toc + .legal-h { margin-top: 4px; }
.guide-doc .guide-toc + h2.legal-h { margin-top: 4px; padding-top: 0; border-top: none; }

/* 푸터 최종 정리(2026-10-13): 링크 13개를 라벨 없이 한 줄로 흘리고(그룹 사이만 가는 구분선), 면책 한 줄·사업자 정보 두 줄·저작권 한 줄만 남긴다.
   이전의 라벨 줄 구조 CSS(.footer-nav-row·.footer-nav-label 등)는 지웠다 — 남아 있던 flex-direction: column 때문에 링크가 세로로 쌓여 푸터가 570px까지 늘어났었다. */
.footer-inner { gap: 12px; padding: 28px 24px 24px; }
.footer-nav { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; width: 100%; }
.footer-nav a { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.footer-nav a:hover { color: var(--accent); }
.footer-nav a.is-support { color: var(--accent); }
.footer-nav-div { width: 1px; height: 12px; background: var(--border); margin: 0 4px; }
.footer-disclaimer { max-width: 1040px; font-size: 12px; }
.footer-contact { width: 100%; max-width: 1040px; margin-top: 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; }
.footer-title { font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
@media (max-width: 640px) {
  .footer-inner { padding: 22px 16px 20px; gap: 10px; }
  .footer-nav { gap: 6px 12px; }
  .footer-nav a { font-size: 12.5px; }
  .footer-nav-div { display: none; }
  .footer-disclaimer, .footer-contact, .footer-title { font-size: 11.5px; }
}


/* 홈 히어로 왼쪽의 검수 결과 샘플·PDF 바로가기 카드(2026-10-13). 통계 3열 아래에 "먼저 결과부터 보고 싶다면" 라벨과 카드 두 장.
   등장 애니메이션은 히어로의 다른 요소(.hero-feature)와 같은 hero-rise를 조금 늦게 쓴다. */
.hero-peek { margin-top: 14px; animation: hero-rise .7s ease 1.05s both; }
.hero-peek-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12.5px; font-weight: 700; color: var(--text-tertiary); }
.hero-peek-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.hero-peek-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 12px; padding-top: 14px; }
.hero-peek-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hero-peek-card:hover { transform: translateY(-2px); border-color: var(--accent-soft-2); box-shadow: 0 8px 22px rgba(30, 64, 175, 0.12); color: var(--text-primary); }
.hero-peek-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.hero-peek-icon.is-pdf { background: var(--danger-bg); color: var(--danger-text); }
.hero-peek-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hero-peek-title { font-size: 14.5px; font-weight: 800; line-height: 1.35; word-break: keep-all; }
.hero-peek-sub { font-size: 12px; line-height: 1.45; color: var(--text-tertiary); word-break: keep-all; }
.hero-peek-arrow { flex: 0 0 auto; color: var(--text-tertiary); transition: transform .18s ease, color .18s ease; }
.hero-peek-card:hover .hero-peek-arrow { transform: translateX(3px); color: var(--accent); }
.hero-video-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hero-video-btn:hover { transform: translateY(-2px); border-color: var(--accent-soft-2); box-shadow: 0 8px 22px rgba(30, 64, 175, 0.12); }
.hero-video-bubble { position: absolute; bottom: calc(100% + 9px); right: 0; padding: 4px 10px; border-radius: 8px; background: var(--ink-bg); color: var(--ink-text); font-size: 11.5px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.hero-video-bubble::after { content: ""; position: absolute; top: 100%; right: 24px; border: 5px solid transparent; border-top-color: var(--ink-bg); }
.hero-video-btn--m { display: none; }
@media (max-width: 520px) {
  .hero-video-btn--pc { display: none; }
  .hero-video-btn--m { display: flex; }
  .hero-peek-row { grid-template-columns: 1fr; gap: 10px; padding-top: 0; }
  .hero-video-btn { width: auto; flex-direction: row-reverse; justify-content: flex-end; gap: 12px; padding: 14px; }
  .hero-video-bubble { position: static; padding: 0; background: none; color: var(--text-primary); font-size: 14px; pointer-events: auto; }
  .hero-video-bubble::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-peek { animation: none; } .hero-peek-card, .hero-peek-arrow { transition: none; } }

/* ===== 관리자 달력(2026-10-15) ===== */
.cal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-title { font-size: 18px; font-weight: 800; min-width: 120px; text-align: center; }
.cal-filters { display: flex; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.cal-filter { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 8px; cursor: pointer; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-weekdays > div { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); padding: 4px 0; }
.cal-weekdays .cal-sat { color: var(--accent); } .cal-weekdays .cal-sun { color: var(--danger-text); }
.cal-cell { min-height: 92px; border: 1px solid var(--border); border-radius: 10px; padding: 4px 6px; background: var(--bg-card); cursor: pointer; overflow: hidden; }
.cal-cell.cal-empty { border: 0; background: transparent; cursor: default; }
.cal-cell.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cal-cell.is-selected { background: var(--accent-soft); }
.cal-day { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.cal-ev { font-size: 11.5px; line-height: 1.35; padding: 1px 5px; border-radius: 5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--accent-soft); color: var(--accent); }
.cal-ev.is-done, .cal-day-title.is-done { text-decoration: line-through; opacity: .55; }
.cal-more { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.cal-cat-law { background: var(--warning-bg); color: var(--warning-text); }
.cal-cat-tax, .cal-cat-support { background: var(--danger-bg); color: var(--danger-text); }
.cal-cat-content { background: var(--bg-subtle); color: var(--text-primary); }
.cal-cat-revenue, .cal-cat-contract { background: var(--accent-soft-2); color: var(--accent); }
.cal-day-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cal-day-time { min-width: 52px; font-size: 13px; color: var(--text-secondary); }
.cal-day-title { flex: 1 1 0; min-width: 0; font-size: 14px; }
@media (max-width: 720px) { .cal-cell { min-height: 64px; padding: 3px; } .cal-ev { font-size: 10.5px; } .cal-day-row { flex-wrap: wrap; } }
.cal-viewswitch { display: flex; gap: 8px; margin-bottom: 16px; }
.cal-viewswitch .btn-outline.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ===== 대시보드 맨 위 개요(2026-10-15) ===== */
.dash-overview-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dash-sum { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.dash-sum-value { font-size: 26px; font-weight: 800; color: var(--text-primary); }
.dash-sum-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-top: 2px; }
.dash-sum-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.dash-overview-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 0; align-items: start; }
.dash-overview-grid .dash-card { margin-bottom: 16px; }
.dash-card { padding: 20px 24px; margin-bottom: 16px; }
.dash-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.dash-more { font-size: 12.5px; color: var(--text-tertiary); text-decoration: none; }
.dash-more:hover { color: var(--accent); }
.dash-table td, .dash-table th { padding-top: 8px; padding-bottom: 8px; }
.dash-click { cursor: pointer; }
.dash-table tr.dash-click:hover td { background: var(--bg-subtle); }
.dash-none { color: var(--warning-text); font-weight: 700; }
.dash-inq { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.dash-inq:last-child { border-bottom: 0; }
.dash-inq-main { min-width: 0; flex: 1 1 0; }
.dash-inq-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) { .dash-overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-overview-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== 대시보드 AI 상태 카드(2026-10-15) ===== */
.dash-ai { display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: flex-start; }
.dash-ai-val { font-weight: 800; color: var(--text-primary); }
.dash-ai-sub { font-weight: 500; font-size: 12.5px; color: var(--text-tertiary); }
.dash-ai-spend { min-width: 260px; flex: 1 1 260px; max-width: 420px; }
.dash-ai-pct { font-size: 13px; font-weight: 800; color: var(--text-secondary); }
.dash-ai-pct.warning { color: var(--warning-text); } .dash-ai-pct.danger { color: var(--danger-text); }
.dash-ai-bar { height: 8px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; margin: 6px 0 4px; }
.dash-ai-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.dash-ai-bar-fill.warning { background: var(--warning-text); } .dash-ai-bar-fill.danger { background: var(--danger-text); }
.dash-ai-warn { color: var(--danger-text); }
.dash-ai-note { margin-top: 14px; font-size: 12.5px; color: var(--text-tertiary); }

/* ===== 대시보드 다가오는 일정(2026-10-15) ===== */
.dash-col { display: flex; flex-direction: column; min-width: 0; }
.dash-ev-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; cursor: pointer; flex-wrap: wrap; }
.dash-ev-row:last-child { border-bottom: 0; }
.dash-ev-row.is-muted { opacity: .6; }
.dash-ev-date { min-width: 92px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.dash-ev-title { flex: 1 1 0; min-width: 0; }
.dash-overdue { margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: var(--danger-bg); border: 1px solid var(--danger-border); }
.dash-overdue-title { font-size: 12.5px; font-weight: 800; color: var(--danger-text); margin-bottom: 4px; }
.dash-overdue .dash-ev-row { border-bottom: 0; padding: 3px 0; }

/* ===== 대시보드 자동화 상태·증감·접힘 지표(2026-10-15) ===== */
.dash-auto-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; flex-wrap: wrap; }
.dash-auto-row:last-child { border-bottom: 0; }
.dash-auto-label { min-width: 190px; font-weight: 700; }
.dash-auto-when { min-width: 92px; font-size: 12.5px; color: var(--text-secondary); }
.dash-auto-sum { flex: 1 1 200px; min-width: 0; font-size: 12.5px; color: var(--text-tertiary); }
.dash-delta { font-size: 12px; font-weight: 800; margin-top: 2px; }
.dash-delta.up { color: var(--accent); } .dash-delta.down { color: var(--warning-text); } .dash-delta.flat { color: var(--text-tertiary); }
.dash-delta-vs { font-weight: 500; color: var(--text-tertiary); }
.dash-more-stats { margin: -8px 0 24px; }
.dash-more-stats > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-secondary); padding: 6px 2px; }
.dash-more-stats .stat-grid { margin-top: 12px; margin-bottom: 0; }
.cal-cat-dev { background: var(--safe-bg); color: var(--safe-text); }

/* ===== 공지사항(2026-10-15) ===== */
.input-notice-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 9px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; color: var(--text-secondary); min-width: 0; }
.input-notice-label { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 9px; }
.input-notice-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 0; }
.input-notice-list a { color: var(--text-primary); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.input-notice-list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.input-notice-all { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.input-notice-all:hover { text-decoration: underline; text-underline-offset: 2px; }
.notice-list { margin-bottom: 24px; }
.notice-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; }
.notice-item > summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; }
.notice-item > summary::-webkit-details-marker { display: none; }
.notice-pin { font-size: 11.5px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; }
.notice-title { flex: 1 1 0; min-width: 0; font-weight: 700; }
.notice-date { flex: 0 0 auto; font-size: 12.5px; color: var(--text-tertiary); }
.notice-body { padding: 0 18px 16px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); white-space: pre-line; }

.notice-link { display: inline-block; margin: 0 18px 16px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.notice-link:hover { text-decoration: underline; }

.notice-inline-link { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.notice-pin-icon { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--accent); transform: rotate(35deg); }