/* =========================================================
   D · 소프트 툴킷
   둥근 모서리 · 부드러운 그림자 · 민트/틸 강조.
   검색으로 들어온 비전문가에게 "어렵지 않다"는 인상을 먼저 준다.

   외부 요청 0 원칙: 웹폰트·CDN·외부 이미지를 쓰지 않는다.
   굵은 헤드라인 인상은 시스템 폰트 스택의 weight(700~800)·
   자간(-0.02em)·크기로만 낸다.
   ========================================================= */

:root {
  /* 라이트가 기본이고, 파일 끝의 @media (prefers-color-scheme: dark) 가
     이 토큰들만 덮어쓴다. 색은 반드시 여기서만 정의한다 — 미디어 쿼리
     안에서만 존재하는 색을 만들면 라이트에서 그 자리가 비어 버린다. */
  color-scheme: light dark;

  /* --- 승인된 팔레트 (그대로 토큰화) --- */
  --bg: #eef4f3;
  --surface: #ffffff;
  --field: #f7fbfa;    /* 입력·표 머리처럼 서피스보다 한 단 가라앉은 면 */
  --primary: #0e9e8a;
  --primary-dark: #0b7a6a;
  --primary-soft: #d7efe9;
  --primary-soft-deep: #c8e8e0;   /* soft 의 hover·테두리용 한 단 진한 톤 */
  --accent: #ffc24b;
  --text: #10312c;
  --text-muted: #4c6b66;
  --border: #d8e6e3;
  --radius: 16px;      /* 카드 */
  --radius-sm: 10px;   /* 버튼·입력 */
  --radius-pill: 999px;

  /* --- 파생 토큰 ---------------------------------------------------
     --primary(#0e9e8a) 위의 흰 글자는 대비 3.35:1 로 WCAG AA(4.5:1)
     에 미달한다. 그래서 "흰 글자를 얹는 면"과 링크 텍스트에는
     --primary-dark(흰 글자 대비 5.2:1), 그 hover 에는
     --primary-ink(7.1:1)를 쓰고, --primary 자체는 포커스 링·테두리·
     아이콘 등 3:1 로 충분한 비텍스트 용도로만 쓴다. */
  --primary-ink: #096458;

  /* 브랜드색으로 채운 면 위에 얹는 글자. 라이트는 흰색이지만 다크에서는
     면이 밝아지므로 정반대로 뒤집힌다 — #fff 를 박아 두면 다크에서 깨진다. */
  --onfill: #ffffff;

  --danger-bg: #fdeceb;
  --danger-border: #f2c1bd;
  --danger-text: #a3222b;

  --shadow: 0 2px 8px rgba(16, 49, 44, 0.06);
  --shadow-hover: 0 10px 24px rgba(16, 49, 44, 0.1);
  --shadow-header: 0 2px 12px rgba(16, 49, 44, 0.05);
  --focus-ring: 0 0 0 3px rgba(14, 158, 138, 0.35);

  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리키므로 아래 다크 블록이 그대로 따라간다(G:\workspace\DESIGN.md '토큰').
     강조는 --primary 가 아니라 --primary-dark(흰 글자 면 규칙, CLAUDE.md). 웹폰트 없음 — 제목도 시스템 글꼴.
     실측(2026-10-16, WCAG): 라이트 --text/--surface 14.02 · --text-muted/--surface 5.83 · --text-muted/--bg 5.24 · --onfill/--primary-dark 5.24
                             다크   --text/--surface 14.07 · --text-muted/--surface 7.45 · --text-muted/--bg 8.23 · --onfill/--primary-dark 9.97 */
  --fb-bg: var(--bg);
  --fb-surface: var(--surface);
  --fb-ink: var(--text);
  --fb-muted: var(--text-muted);
  --fb-line: var(--border);
  --fb-accent: var(--primary-dark);
  --fb-on-accent: var(--onfill);
  --fb-display: inherit;
  --fb-max: 960px;   /* 본문 .container 폭과 같게 */
}

* { box-sizing: border-box; }

/* preview.js 는 img[hidden] 의 hidden 속성을 켜고 꺼서 미리보기를 토글한다.
   아래 display 선언들이 [hidden] 기본값을 덮지 않도록 못을 박아 둔다. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  /* 한국어는 기본값이면 음절 단위로 아무 데서나 줄이 바뀐다.
     어절 단위로 끊고, 끊을 수 없이 긴 문자열만 강제로 넘긴다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 1rem; }

main.container { padding-bottom: 1rem; }

a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.3; }
h1 {
  font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.05rem);
  font-weight: 800;
  margin: 1.6rem 0 0.4rem;
}
h2 { font-weight: 700; }
h3 { font-weight: 700; }

img { max-width: 100%; }

/* 키보드 사용자에게만 보이는 공통 포커스 표시.
   outline 은 요소 자신의 border-radius 를 따라가므로 radius 는 건드리지 않는다. */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* 본문 바로가기 (내비 링크가 9개라 스크린리더/키보드 이동 비용이 크다) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--primary-dark);
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  box-shadow: var(--shadow-hover);
}
.skip-link:focus { left: 0; text-decoration: none; }

/* ---------------------------------------------------------
   헤더 — 틀은 fb.css 의 떠 있는 유리 막대(.fb-nav: 로고 / 계정).
   그 아래 도구 알약 띠(.nav-wrap)는 이 사이트만의 것 — 8칸이라 탭바(5칸)에 안 넣는다(DESIGN.md 예외).
   --------------------------------------------------------- */

/* 머리말 링크는 계산 높이가 22~29px 이라 탭 대상 44px 에 모자랐다 —
   로고·계정 링크·도구 알약 모두 여기서 키운다(UIUX.md "Fitts"). */
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.logo:hover { text-decoration: none; color: var(--primary-dark); }

.auth-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
.auth-nav a, .auth-nav .link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.auth-nav a { color: var(--text-muted); }
.auth-nav a:hover { color: var(--primary-dark); }
.inline-form { display: inline; }

.link-button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-button:hover { color: var(--primary-dark); }

/* 도구가 8~9개라 한 줄에 안 들어간다.
   접어서 두 줄로 흘리는 대신 "가로 스크롤 한 줄"로 고정한다.
   스크롤 컨테이너는 .nav-wrap, 여백은 안쪽 .main-nav 가 갖는다
   (스크롤 컨테이너에 padding-right 를 주면 일부 엔진에서 사라진다). */
.nav-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 4px 0 8px;
}
.nav-wrap::-webkit-scrollbar { display: none; }

.main-nav {
  display: flex;
  flex-wrap: nowrap;   /* 좁은 화면: 한 줄로 두고 .nav-wrap 이 가로 스크롤 */
  gap: 0.3rem;
  padding-top: 0.5rem;
  padding-bottom: 0.55rem;
}

/* 넓은 화면에서는 스크롤 대신 알약을 가운데 정렬해 접는다.
   도구 9개는 960px 한 줄에 들어가지 않는데, 데스크톱에서 스크롤바를
   숨긴 채 뒤쪽 도구를 감추면 발견 자체가 안 되기 때문이다. */
@media (min-width: 768px) {
  .main-nav {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.35rem;
  }
}

.main-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.38rem 0.7rem;
  border-radius: var(--radius-pill);
  transition: background-color 0.15s, color 0.15s;
}
/* hover 바탕이 --primary-soft 라 글자는 --primary-dark 로는 4.35:1 이었다.
   같은 면 위의 aria-current 와 같은 --primary-ink 를 쓰면 5.85:1 이다. */
.main-nav a:hover {
  color: var(--primary-ink);
  background: var(--primary-soft);
  text-decoration: none;
}
.main-nav a[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary-ink);
}

/* ---------------------------------------------------------
   히어로 — 틀은 fb.css 의 .fb-hero. 여기서는 세 가지 약속 알약만
   --------------------------------------------------------- */
.hero-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
}
.hero-points li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-ink);
}

/* ---------------------------------------------------------
   도구 카드 그리드 (9개 기준, 960px 컨테이너에서 3열)
   --------------------------------------------------------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 0.9rem;
  margin: 1.5rem 0;
}
.tool-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.25rem;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.tool-card:hover {
  text-decoration: none;
  border-color: var(--primary-soft);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.tool-card h2 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0.6rem 0 0.3rem;
}
.tool-card p {
  font-size: 0.87rem;
  color: var(--text-muted);
  margin: 0;
}
.tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--primary-soft);
  font-size: 1.35rem;
  line-height: 1;
}

/* ---------------------------------------------------------
   폼
   --------------------------------------------------------- */
.tool-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin: 1.25rem 0;
  box-shadow: var(--shadow);
}
.tool-form.narrow { max-width: 420px; }

/* 문의 페이지처럼 카드 안에 폼이 또 들어가는 경우 — 카드를 겹쳐 그리지 않는다 */
.content-section .tool-form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 1rem 0 0;
}

.field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.field-row .field { flex: 1; min-width: 140px; }
.field.checkbox { flex-direction: row; align-items: center; gap: 0.45rem; }
.field label { font-weight: 700; font-size: 0.9rem; letter-spacing: -0.01em; }
.field small { color: var(--text-muted); font-size: 0.82rem; }

input[type="text"], input[type="number"], input[type="password"],
input[type="email"], input[type="url"], input[type="file"],
select, textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--field);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
textarea { min-height: 8rem; resize: vertical; }

/* outline 을 끄면 위 :focus-visible 공통 링이 입력 칸에서만 사라진다. 그 자리를 대신하던
   --focus-ring 은 알파 35% 라 대비가 안 나오고, 다크 블록에서 덮어쓰지도 않아 먹빛 위에
   라이트용 후광이 그대로 남는다. 링은 공통 규칙에 맡기고 여기서는 테두리·바탕만 강조한다. */
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="url"]:focus, input[type="file"]:focus,
select:focus, textarea:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

input[type="file"] { padding: 0.45rem 0.55rem; cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: 0.7rem;
  padding: 0.4rem 0.85rem;
  border: none;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
input[type="file"]:hover::file-selector-button { background: var(--primary-soft-deep); }

input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary-dark);
  cursor: pointer;
}

/* Django 의 form.as_div / {{ field.errors }} 출력 */
.tool-form .helptext {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.tool-form ul.errorlist {
  list-style: none;
  margin: 0.3rem 0;
  padding: 0;
  color: var(--danger-text);
  font-size: 0.86rem;
  font-weight: 600;
}
.tool-form > div:not([class]) { margin-bottom: 1rem; }
.tool-form label { font-weight: 700; font-size: 0.9rem; }

/* ---------------------------------------------------------
   라디오 그룹 (로고 스타일 선택처럼 항목마다 설명이 붙는 경우)
   select 로 접으면 설명 텍스트가 본문에서 사라져 색인되지 않는다.
   그래서 라디오로 펼쳐 두고, 목록 기본 불릿·들여쓰기를 걷어낸다.
   --------------------------------------------------------- */
.choice-group {
  display: block;      /* .field 의 flex 를 되돌린다 — legend 는 flex 안에서 어긋난다 */
  border: none;
  margin: 0 0 1rem;
  padding: 0;
  min-width: 0;        /* fieldset 기본 min-width 로 그리드가 밀리는 것 방지 */
}
.choice-group > legend {
  padding: 0;
  margin-bottom: 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.choice-list {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}
.choice-list label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.15rem 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--field);
  font-weight: 400;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.choice-list label:hover { border-color: var(--primary); }
.choice-list input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.16rem 0 0;
  accent-color: var(--primary-dark);
  cursor: pointer;
}
.choice-list strong { font-weight: 700; }
.choice-list small {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}
/* 선택된 항목 강조. :has() 를 모르는 브라우저에서는 강조만 빠지고 동작은 그대로다. */
.choice-list li:has(input:checked) label {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* ---------------------------------------------------------
   버튼
   --------------------------------------------------------- */
.btn-primary {
  display: inline-block;
  background: var(--primary-dark);
  color: var(--onfill);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.72rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(11, 122, 106, 0.24);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.btn-primary:hover {
  background: var(--primary-ink);
  color: var(--onfill);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(11, 122, 106, 0.28);
}
.btn-primary:active { transform: translateY(1px); }

/* 자르기 버튼은 JS 가 없으면 계속 disabled 로 남는 설계다.
   "누를 수 없음"이 분명히 보여야 하지만, 그 상태가 영구적이라
   글자는 읽혀야 한다 — 옛 값(#f4faf9 on #a8c5c0)은 1.74:1 이었다.
   지금은 테두리색 면 + 보조 글자색으로 라이트 4.54 / 다크 5.40 이다. */
.btn-primary:disabled,
.btn-primary[disabled] {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn-primary:disabled:hover,
.btn-primary[disabled]:hover { background: var(--border); }

/* ---------------------------------------------------------
   알림 · 오류
   --------------------------------------------------------- */
.messages { margin: 1rem 0; }
.message {
  background: var(--primary-soft);
  border: 1px solid var(--primary-soft-deep);
  border-radius: var(--radius-sm);
  color: var(--primary-ink);
  font-weight: 600;
  padding: 0.7rem 1rem;
  margin: 0.4rem 0;
}

.form-errors {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  font-weight: 600;
}
.form-errors p { margin: 0.2rem 0; }

/* ---------------------------------------------------------
   미리보기 · 자르기 무대
   --------------------------------------------------------- */
.preview-image {
  display: block;
  max-width: 100%;
  max-height: 320px;
  padding: 0.5rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 1rem;
}
/* Cropper.js 가 이 안에 자기 컨테이너를 만든다 — overflow/transform 을 걸지 않는다 */
.crop-stage { margin-bottom: 1rem; }

/* ---------------------------------------------------------
   본문 콘텐츠 (SEO 텍스트)
   --------------------------------------------------------- */
.content-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow);
}
.content-section h1 { margin-top: 0; }
.content-section h2 { font-size: 1.15rem; margin-top: 1.6rem; margin-bottom: 0.4rem; }
.content-section h2:first-child { margin-top: 0; }
.content-section h3 {
  font-size: 0.98rem;
  margin-top: 1.1rem;
  margin-bottom: 0.25rem;
  color: var(--primary-ink);
}
.content-section p { margin: 0.3rem 0 0.6rem; }
.content-section ul, .content-section ol { padding-left: 1.2rem; margin: 0.3rem 0 0.8rem; }
.content-section li { margin: 0.25rem 0; }

.lead {
  color: var(--text-muted);
  font-size: 1rem;
  margin-top: 0;
}

/* ---------------------------------------------------------
   대시보드 (마크업은 그대로, 팔레트만 적용)
   --------------------------------------------------------- */
.stat-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 1.25rem 0; }
.stat-card {
  flex: 1;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
.stat-value {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary-dark);
  line-height: 1.2;
}
.stat-label { color: var(--text-muted); font-size: 0.86rem; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
.data-table th {
  color: var(--text-muted);
  font-weight: 700;
  background: var(--field);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table small { color: var(--text-muted); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .rank-col { width: 2.5rem; color: var(--text-muted); }

/* 접속 통계 (/dashboard/stats/). 차트는 서버가 좌표를 계산한 인라인 SVG 다. */
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stat-range { display: flex; gap: 0.35rem; }
.range-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.86rem;
}
.range-link.is-active { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary-soft); }
.stat-value small { font-size: 0.9rem; font-weight: 600; margin-left: 0.15rem; }
.stat-sub { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.2rem; }
.stat-live {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-size: 0.72rem;
  vertical-align: middle;
}
.stat-chart { display: block; width: 100%; height: auto; margin: 0.5rem 0; }
.chart-baseline { stroke: var(--border); stroke-width: 1; }
/* 옅은 민트 채움은 흰 면 위에서 1.21:1 이라 막대가 사실상 사라진다.
   테두리를 둘러 바탕 대비 3:1 을 넘긴다 (라이트 5.24 / 다크 9.03). */
.chart-bar-views { fill: var(--primary-soft); stroke: var(--primary-dark); stroke-width: 1; }
.chart-bar-visitors { fill: var(--primary-dark); }
.chart-tick { fill: var(--text-muted); font-size: 11px; }
.chart-legend { display: flex; gap: 1rem; align-items: center; color: var(--text-muted); font-size: 0.85rem; margin: 0.4rem 0 0; }
.chart-key { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.chart-key-views { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary-dark); }
.chart-key-visitors { background: var(--primary-dark); }
.chart-table summary { cursor: pointer; color: var(--text-muted); font-size: 0.86rem; margin: 0.4rem 0; }
.empty-note { color: var(--text-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------
   푸터 — 틀은 fb.css 의 .fb-foot
   --------------------------------------------------------- */
.fb-foot .logo { color: var(--text); }

/* ---------------------------------------------------------
   좁은 화면
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .container { padding: 0 0.85rem; }
  .logo { font-size: 1rem; }
  .auth-nav { font-size: 0.8rem; gap: 0.5rem; }
  .tool-form, .content-section { padding: 1.15rem; }
  .btn-primary { width: 100%; text-align: center; }
}

@media (max-width: 640px) {
  /* 표는 스스로 가로 스크롤한다 — 페이지 본문에 가로 스크롤이 생기면 안 된다 */
  .data-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------------------------------------------------------
   쿠팡 파트너스 칸(core/coupang.py) — 이 사이트 토큰만 쓴다(새 색 없음, 사진 바탕 #fff 만 리터럴).
   글자색 강조는 --primary-dark(흰 바탕 5.2:1), 포커스 링은 비텍스트용 --primary.
   --------------------------------------------------------- */
.cpn { margin: 24px 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cpn__h { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.cpn__d { margin: 4px 0 8px; font-size: 12px; color: var(--text-muted); }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li + li { border-top: 1px solid var(--border); }
.cpn__i { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 0; }
.cpn__img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.cpn__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpn__a { color: var(--text); font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.cpn__a::after { content: ""; position: absolute; inset: 0; }
.cpn__a:focus-visible { outline: none; }
.cpn__a:focus-visible::after { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.cpn__i:hover .cpn__a { text-decoration: underline; }
.cpn__n { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.cpn__go { color: var(--primary-dark); font-size: 14px; font-weight: 700; }
.cpn--top { margin: 12px 0 16px; padding: 8px 12px; }
.cpn--top .cpn__h { font-size: 14px; }
.cpn--top .cpn__i { padding: 4px 0; }
.cpn--top .cpn__img { width: 48px; height: 48px; }
.cpn--top .cpn__n { display: none; }

/* ---------------------------------------------------------
   모션 최소화 설정 존중
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tool-card:hover { transform: none; }
  .btn-primary:active { transform: none; }
}

/* ---------------------------------------------------------
   시스템 다크 테마
   OS 설정만 따른다(토글 없음 — SSR MPA 에서 수동 토글은 쿠키가 필요하고
   Cloudflare 캐시를 Vary: Cookie 로 쪼갠다. 요구가 생기면 그때 붙인다).

   브랜드 민트/틸의 색상(H)은 그대로 두고 채도를 내리고 명도를 올려
   대비만 맞췄다. 어두운 면 위의 진한 채도는 번져 보인다.
   위 :root 의 토큰만 덮어쓰므로 컴포넌트 규칙은 건드리지 않는다.
   본문 4.5:1 · 그래픽 3:1 을 전부 실측해 통과시켰다.
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1715;
    --surface: #17211f;
    --field: #131c1a;
    --primary: #3fbfa8;         /* 포커스 링·테두리 (bg 대비 8.00) */
    --primary-dark: #5cd3bc;    /* 링크·버튼 면 (9.97 / 9.03) */
    --primary-ink: #8ae3d0;     /* soft 면 위 글자 (9.06) */
    --primary-soft: #15332d;
    --primary-soft-deep: #1d423a;
    --accent: #e8b152;
    --text: #e6efec;            /* 15.53 / 14.07 */
    --text-muted: #9db3ae;      /* 8.23 / 7.45 */
    --border: #2a3a36;
    --onfill: #0f1715;          /* 라이트와 정반대 — 밝은 민트 면 위 먹글자 */

    --danger-bg: #3a1a1a;
    --danger-border: #5e2b2b;
    --danger-text: #f09a94;     /* 7.27 / 7.66 */

    /* 먹빛 위에서는 잉크색 그림자가 보이지 않는다 — 검정으로 바꿔 면을 띄운다 */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.55);
    --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.4);
  }
}