/* 화장품 성분 규제 체크 — .svc-cosmetic 안쪽만. 색은 테마 토큰에서만 받는다(DESIGN_POLICY.md) */
.svc-cosmetic {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
}

.svc-cosmetic .cos-container { padding-block: var(--space-8) var(--space-12); }

/* ── 요약 타일 ───────────────────────────────────────────── */
.svc-cosmetic .uni-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 0 0 1px var(--color-line); margin-bottom: var(--space-8);
}
.svc-cosmetic .uni-stat { padding: var(--space-5) var(--space-6); box-shadow: 0 0 0 1px var(--color-line); }
.svc-cosmetic .uni-stat strong {
  display: block; font-weight: 300; font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  color: var(--color-black); font-variant-numeric: tabular-nums;
}
.svc-cosmetic .uni-stat span { font-size: 0.8rem; color: var(--color-gray); }
@media (max-width: 860px) { .svc-cosmetic .uni-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── 탭 ─────────────────────────────────────────────────── */
.svc-cosmetic .cos-tabs {
  display: flex; flex-wrap: wrap;
  box-shadow: inset 0 -2px 0 0 var(--color-navy);
  margin-bottom: var(--space-6);
}
.svc-cosmetic .cos-tabs a {
  padding: var(--space-3) var(--space-6);
  font-size: 0.95rem; font-weight: 600; text-decoration: none;
  color: var(--color-ink); background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-line);
}
.svc-cosmetic .cos-tabs a:hover { background: var(--color-surface-soft); color: var(--color-navy); }
.svc-cosmetic .cos-tabs a.active { background: var(--color-navy); color: var(--color-white); box-shadow: 0 0 0 1px var(--color-navy); }
@media (max-width: 600px) { .svc-cosmetic .cos-tabs a { flex: 1 1 33%; padding: var(--space-3); text-align: center; font-size: 0.88rem; } }

/* ── 단계 상자 ──────────────────────────────────────────── */
.svc-cosmetic .search-form {
  background: var(--color-white);
  padding: var(--space-6);
  box-shadow: 0 0 0 1px var(--color-line);
  margin-bottom: var(--space-6);
}
.svc-cosmetic .search-form h2,
.svc-cosmetic .tab-h {
  margin: 0 0 var(--space-3); font-size: 1.2rem; font-weight: 700; color: var(--color-black);
  display: flex; align-items: center; gap: var(--space-2);
}
.svc-cosmetic .step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; font-size: 0.9rem;
  background: var(--color-navy); color: var(--color-white);
}
.svc-cosmetic .hint { margin: 0 0 var(--space-4); font-size: 0.88rem; color: var(--color-gray); line-height: 1.6; }
.svc-cosmetic .sub-h { margin: var(--space-6) 0 var(--space-3); font-size: 1rem; font-weight: 700; color: var(--color-navy); }

.svc-cosmetic .ctx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 960px) { .svc-cosmetic .ctx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc-cosmetic .ctx-grid { grid-template-columns: 1fr; } }
.svc-cosmetic fieldset { margin: 0; padding: var(--space-3) var(--space-4); border: 0; box-shadow: 0 0 0 1px var(--color-line); min-width: 0; }
.svc-cosmetic legend { padding: 0 var(--space-2); font-weight: 700; font-size: 0.88rem; color: var(--color-navy); }
.svc-cosmetic fieldset label { display: block; padding: 0.15rem 0; font-size: 0.9rem; cursor: pointer; }
.svc-cosmetic fieldset small { color: var(--color-gray); }

/* 끌어 놓기 칸 */
.svc-cosmetic .drop {
  padding: var(--space-6); text-align: center;
  background: var(--color-surface-soft);
  box-shadow: inset 0 0 0 2px var(--color-soft);
}
.svc-cosmetic .drop.over { box-shadow: inset 0 0 0 2px var(--color-navy); background: var(--color-white); }
.svc-cosmetic .drop p { margin: 0 0 var(--space-3); }
.svc-cosmetic .drop .hint { max-width: 46rem; margin: 0 auto var(--space-3); }
.svc-cosmetic .status { font-weight: 600; color: var(--color-navy); min-height: 1.4em; }
.svc-cosmetic .status.bad, .svc-cosmetic .bad { color: var(--color-accent-ink); }
.svc-cosmetic .paste { margin-top: var(--space-4); }
.svc-cosmetic .paste summary { cursor: pointer; font-weight: 600; color: var(--color-primary); }
.svc-cosmetic .paste textarea {
  width: 100%; box-sizing: border-box; margin: var(--space-3) 0;
  padding: var(--space-3); border: 2px solid var(--color-line); font: inherit; font-size: 0.92rem;
}
.svc-cosmetic .paste textarea:focus { outline: none; border-color: var(--color-primary); }

/* 버튼 */
.svc-cosmetic .btn {
  display: inline-block; padding: var(--space-2) var(--space-4);
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  background: var(--color-white); color: var(--color-navy);
  border: 0; box-shadow: inset 0 0 0 1px var(--color-navy);
}
.svc-cosmetic .btn:hover { background: var(--color-surface-soft); }
.svc-cosmetic .btn-primary { background: var(--color-navy); color: var(--color-white); }
.svc-cosmetic .btn-primary:hover { background: var(--color-navy-light); }
.svc-cosmetic .btn-line { box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-ink); }
.svc-cosmetic .btn:disabled { opacity: 0.6; cursor: wait; }
.svc-cosmetic .link {
  border: 0; background: none; padding: 0; font: inherit; font-size: 0.85rem;
  color: var(--color-primary); text-decoration: underline; cursor: pointer;
}
.svc-cosmetic .row-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; margin: var(--space-4) 0 0; }

/* ── 표 공통 ────────────────────────────────────────────── */
.svc-cosmetic .table-wrap { overflow-x: auto; }
.svc-cosmetic table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.svc-cosmetic th {
  background: var(--color-navy); color: var(--color-white);
  padding: var(--space-2) var(--space-3); text-align: left; font-weight: 600; white-space: nowrap;
}
.svc-cosmetic td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); vertical-align: top; }
.svc-cosmetic td small { color: var(--color-gray); }
.svc-cosmetic .num { text-align: right; font-variant-numeric: tabular-nums; }
.svc-cosmetic td.n { color: var(--color-gray); font-variant-numeric: tabular-nums; width: 2rem; }

/* 편집 표 */
.svc-cosmetic .cos-edit input, .svc-cosmetic .cos-edit select {
  width: 100%; box-sizing: border-box; padding: 0.3rem 0.4rem;
  border: 1px solid var(--color-line); font: inherit; font-size: 0.88rem; background: var(--color-white);
}
.svc-cosmetic .cos-edit input:focus { outline: none; border-color: var(--color-primary); }
.svc-cosmetic .cos-edit td:nth-child(2) { min-width: 16rem; }
.svc-cosmetic .cos-edit .del {
  border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--color-gray);
}
.svc-cosmetic .cos-edit .del:hover { color: var(--color-accent-ink); }

/* ── 판정 색 — 무거운 것만 붉게. 붉은 글자는 흰 바탕 위 accent-ink 만 쓴다 ─────────── */
.svc-cosmetic .v-prohibited, .svc-cosmetic .v-exceed, .svc-cosmetic .v-banned_here { color: var(--color-accent-ink); }
.svc-cosmetic .v-upcoming, .svc-cosmetic .v-check, .svc-cosmetic .v-need_pct { color: var(--color-navy); }
.svc-cosmetic .v-warning { color: var(--color-primary); }
.svc-cosmetic .v-ok { color: var(--color-ink); }
.svc-cosmetic .v-none, .svc-cosmetic .v-na { color: var(--color-gray); }

.svc-cosmetic .cos-result td.cell { min-width: 8.5rem; cursor: pointer; }
.svc-cosmetic .cos-result td.cell b { display: block; font-size: 0.88rem; }
.svc-cosmetic .cos-result td.cell small { display: block; font-size: 0.75rem; line-height: 1.4; margin-top: 0.15rem; }
.svc-cosmetic .cos-result td.cell:not([data-r]) { cursor: default; }
.svc-cosmetic .cos-result td.v-prohibited, .svc-cosmetic .cos-result td.v-exceed, .svc-cosmetic .cos-result td.v-banned_here {
  background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent);
}
.svc-cosmetic .cos-result td.v-upcoming, .svc-cosmetic .cos-result td.v-check, .svc-cosmetic .cos-result td.v-need_pct {
  background: var(--color-surface-soft); box-shadow: inset 3px 0 0 var(--color-soft);
}
.svc-cosmetic .cos-result td.cell[data-r]:hover, .svc-cosmetic .cos-result td.cell[data-r]:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.svc-cosmetic .cos-result td.nm { min-width: 12rem; font-weight: 600; }
.svc-cosmetic .cos-result td.nm small { font-weight: 400; }
.svc-cosmetic .cos-result td.val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-cosmetic .tag { font-weight: 400; }
.svc-cosmetic .miss { color: var(--color-accent-ink) !important; }

/* 나라별 요약 */
.svc-cosmetic .cos-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  box-shadow: 0 0 0 1px var(--color-line); margin-bottom: var(--space-4);
}
.svc-cosmetic .cs { padding: var(--space-3) var(--space-4); box-shadow: 0 0 0 1px var(--color-line); }
.svc-cosmetic .cs strong { display: block; font-size: 1rem; margin-bottom: var(--space-1); }
.svc-cosmetic .cs span { display: block; font-size: 0.82rem; }
.svc-cosmetic .cs-bad { box-shadow: 0 0 0 1px var(--color-line), inset 0 3px 0 var(--color-accent); }
.svc-cosmetic .cs-warn { box-shadow: 0 0 0 1px var(--color-line), inset 0 3px 0 var(--color-soft); }
.svc-cosmetic .cs-ok { box-shadow: 0 0 0 1px var(--color-line), inset 0 3px 0 var(--color-navy); }
.svc-cosmetic .cs-na { color: var(--color-gray); }
.svc-cosmetic .legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 0.8rem; margin-bottom: var(--space-3); }
.svc-cosmetic .note, .svc-cosmetic .source-note { font-size: 0.82rem; color: var(--color-gray); line-height: 1.6; margin-top: var(--space-4); }

/* 성분 찾기 */
.svc-cosmetic .lookup-row { display: flex; gap: var(--space-2); }
.svc-cosmetic .lookup-row input {
  flex: 1; min-width: 0; padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-line); font: inherit; font-size: 1rem;
}
.svc-cosmetic .lookup-row input:focus { outline: none; border-color: var(--color-primary); }
.svc-cosmetic .small { font-size: 0.88rem; line-height: 1.6; }
.svc-cosmetic ul.plain { padding-left: 1.2rem; line-height: 1.7; font-size: 0.92rem; }
.svc-cosmetic ul.plain li { margin-bottom: var(--space-2); }
.svc-cosmetic tr.pending td { color: var(--color-gray); }

/* ── 모달 ───────────────────────────────────────────────── */
.svc-cosmetic .modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex; justify-content: center; align-items: flex-start;
  padding: var(--space-8); overflow-y: auto;
}
.svc-cosmetic .modal[hidden] { display: none; }
.svc-cosmetic .modal-content {
  background: var(--color-white); width: 100%; max-width: 980px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 0 0 1px var(--color-line);
}
.svc-cosmetic .modal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); background: var(--color-navy); color: var(--color-white);
}
.svc-cosmetic .modal-head h2 { margin: 0; font-size: 1.05rem; color: var(--color-white); }
.svc-cosmetic .modal-close {
  flex: none; width: 36px; height: 36px; border: 0; cursor: pointer;
  background: transparent; color: var(--color-white); font-size: 1.5rem; line-height: 1;
}
.svc-cosmetic .modal-close:hover { background: var(--color-navy-light); }
.svc-cosmetic .modal-body { padding: var(--space-6); }
.svc-cosmetic .modal-body .mhead { font-size: 1rem; margin-top: 0; }
.svc-cosmetic .modal-body table.kv th { width: 7rem; background: var(--color-surface-soft); color: var(--color-navy); vertical-align: top; white-space: normal; }
.svc-cosmetic .modal-body table.items td:first-child { white-space: nowrap; }
.svc-cosmetic pre.cond {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
  padding: var(--space-4); background: var(--color-gray-light); font-family: inherit; font-size: 0.86rem; line-height: 1.6;
}
.svc-cosmetic .ings { font-size: 0.86rem; line-height: 1.7; }
@media (max-width: 600px) {
  .svc-cosmetic .modal { padding: 0; }
  .svc-cosmetic .modal-content { max-height: 100vh; }
}
.svc-cosmetic .sum-line { grid-column: 1 / -1; margin: 0; padding: var(--space-3) var(--space-4); font-size: 0.9rem; box-shadow: 0 0 0 1px var(--color-line); }
.svc-cosmetic .cos-edit .inci { display: block; font-size: 0.75rem; color: var(--color-gray); margin-top: 0.1rem; }
.svc-cosmetic .cos-result td.cell .crit { display: block; font-size: 0.75rem; color: var(--color-ink); margin-top: 0.15rem; line-height: 1.4; }
.svc-cosmetic .cos-result td.v-ok { box-shadow: inset 3px 0 0 var(--color-navy); }
.svc-cosmetic .note-in { color: var(--color-navy) !important; font-weight: 400; }