/**
 * /fc-susuryo/ko 화면 — **층 3**(이 계산기에만 있는 것).
 *
 * 방향 탭, 단위가 붙는 입력, 할인 조건 토글, 결과 카드, 조건별 비교 표.
 * 색·셸·카드·폼·버튼은 층 1(골격 값) → site.css(층 2) 것을 그대로 쓴다 — 여기서 다시 선언하면
 * 두 벌이 되어 갈라진다. 2026-09-18 정리로 이 파일의 리터럴(px·행간·radius)을 전부 토큰으로
 * 바꿨다 — 글자 크기 6단·모서리 1종·세로 간격 4단 밖의 값은 쓰지 않는다.
 */

.m-fee-eyebrow { margin-top: var(--gap-section); font-size: var(--t2); line-height: var(--gap-line); font-weight: 500; color: var(--ink-2); }

/* ── 계산 방향 ────────────────────────────────────────────────────────────
   역산이 기본이다. 사람들은 "손에 1억"을 목표로 가격을 정하지, 등록가를 먼저 정하지 않는다.
   두 방향을 같은 크기로 두고, 고른 쪽만 색으로 구별한다. */
.m-fee-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-item); margin-bottom: var(--gap-block); }
.m-fee-tabs label { display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--gap-item); min-height: 64px; padding: var(--s2) var(--s3); border: 1px solid var(--m-control);
  border-radius: var(--r1); background: var(--m-input); cursor: pointer;
  font-size: var(--t2); line-height: var(--gap-line); font-weight: 500; text-align: center; }
.m-fee-tabs small { font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); font-weight: 400; }
.m-fee-tabs input:checked + label { border-color: var(--m-info); background: var(--accent-soft);
  color: var(--m-info); }
.m-fee-tabs input:focus-visible + label { outline: 3px solid var(--m-focus); outline-offset: 3px; }

.m-fee-reverse-only, .m-fee-forward-only { display: block; }
[data-direction="forward"] .m-fee-reverse-only { display: none; }
[data-direction="reverse"] .m-fee-forward-only { display: none; }

/* ── 단위가 붙는 입력 ──────────────────────────────────────────────────── */
.m-fee-input-wrap { position: relative; }
.m-fee-input-wrap input { padding-right: var(--s6); }
.m-fee-unit { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%); pointer-events: none;
  color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line); }
.m-fee-page .m-field input::placeholder { color: var(--ink-2); opacity: 1; }

.m-fee-divider { margin-top: var(--gap-section); padding-top: var(--s5); border-top: 1px solid var(--line); }
.m-fee-divider h3 { margin-bottom: var(--gap-block); font-weight: 700; }
/* 근거의 급을 화면에서 숨기지 않는다 — 공시 전사가 아니라 게임 내 표기라는 사실을 입력 옆에 둔다. */
.m-fee-basis { margin-top: var(--gap-block); }
.m-fee-basis span { display: block; }
.m-fee-cap-label { margin-bottom: var(--gap-item); font-size: var(--t2); line-height: var(--gap-line); font-weight: 500;
  color: var(--ink-2); }

/* ── 할인 조건 ──────────────────────────────────────────────────────────
   조건 줄과 상한 선택은 `<label>` 이라 폼 라벨 규칙(블록·muted)이 먼저 걸린다.
   여기서 그 둘을 되돌린다 — 선택지는 라벨이 아니라 누르는 칸이다. */
.m-fee-page .m-fee-condition { display: flex; align-items: center; justify-content: space-between;
  min-height: var(--m-control-h); gap: var(--gap-item); margin: 0; padding: var(--s2) var(--s3); border: 1px solid var(--m-control);
  border-radius: var(--r1); background: var(--m-input); cursor: pointer; color: var(--ink);
  font-size: var(--t2); line-height: var(--gap-line); }
/* 눈에 안 보이는 조작부는 폼 입력 규격(가로 100% · 높이 48px)을 받지 않는다. */
.m-fee-page .m-field input.m-sr { width: 1px; height: 1px; padding: 0; border: 0; }
.m-fee-toggle { display: inline-flex; align-items: center; gap: var(--gap-item); white-space: nowrap;
  color: var(--ink-2); }
.m-fee-toggle-dot { display: inline-flex; width: 32px; height: 20px; align-items: center;
  justify-content: flex-start; padding: var(--s1); border-radius: var(--r2); background: var(--accent-soft);
  border: 1px solid var(--m-control); }
.m-fee-toggle-dot::after { content: ''; width: 12px; height: 12px; border-radius: var(--r2);
  background: var(--m-control); }
.m-fee-condition input:checked ~ .m-fee-toggle { color: var(--m-info); }
.m-fee-condition input:checked ~ .m-fee-toggle .m-fee-toggle-dot { justify-content: flex-end; }
.m-fee-condition input:checked ~ .m-fee-toggle .m-fee-toggle-dot::after { background: var(--m-info); }
.m-fee-condition input:focus-visible ~ .m-fee-toggle { outline: 3px solid var(--m-focus);
  outline-offset: 3px; }

/* ── 쿠폰 금액 상한 ───────────────────────────────────────────────────────
   쿠폰마다 상한이 다르고(공지 관측), 금액 무제한 쿠폰도 실재한다. 둘을 고르게 두고,
   무제한을 고르면 금액 칸 대신 그 사실을 적는다. */
.m-fee-cap-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-item); }
.m-fee-cap-options label { display: flex; align-items: center; justify-content: center; gap: var(--gap-item);
  min-height: var(--m-control-h); margin: 0; border: 1px solid var(--m-control); border-radius: var(--r1);
  background: var(--m-input); color: var(--ink); font-size: var(--t2); line-height: var(--gap-line);
  cursor: pointer; }
/* 라디오는 브라우저가 그리는 것을 그대로 쓴다(색만 맞춘다) — 폼 입력 규격을 걷어낸다. */
.m-fee-cap-options input { width: auto; height: auto; margin: 0; padding: 0; border: 0;
  background: none; accent-color: var(--m-info); }
.m-fee-cap-options input:checked + span { color: var(--m-info); }
.m-fee-cap-options label:has(:checked) { border-color: var(--m-info); background: var(--accent-soft); }
.m-fee-cap-options input:focus-visible + span { outline: 3px solid var(--m-focus); outline-offset: 3px; }
.m-fee-cap-value { margin-top: var(--gap-item); }
.m-fee-cap-note { display: none; }
[data-cap="unlimited"] .m-fee-cap-value { display: none; }
[data-cap="unlimited"] .m-fee-cap-note { display: block; }

.m-fee-primary { margin-top: var(--gap-section); }

/* ── 결과 ─────────────────────────────────────────────────────────────── */
.m-fee-result { border-top: 3px solid var(--m-info); box-shadow: var(--shadow-2); }
.m-fee-result-label { color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line);
  font-weight: 500; }
.m-fee-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--gap-item); margin-top: var(--gap-item);
  font-size: var(--t6); line-height: var(--t6-lh); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.m-fee-total small { font-size: var(--t3); font-weight: 500; color: var(--ink-2); }
.m-fee-reading { margin-top: var(--gap-item); color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line); }

.m-fee-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-block); margin-top: var(--gap-section); }
.m-fee-metric { min-width: 0; border-top: 1px solid var(--line); padding-top: var(--s3); }
.m-fee-metric dt { color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line); }
.m-fee-metric dd { margin-top: var(--gap-item); font-weight: 500; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums lining-nums; }
.m-fee-metric small { color: var(--ink-2); font-weight: 400; }

/* 쿠폰 한 장의 차이 — 큰 결과 숫자만 보고 끝나지 않도록 결과 카드 안에 둔다. */
.m-fee-saving { margin-top: var(--gap-section); padding: var(--s4); border: 1px solid var(--line);
  border-radius: var(--r1); background: var(--m-success-bg); }
.m-fee-saving p { color: var(--good); font-weight: 500; }
.m-fee-saving-number { margin-top: var(--gap-item); font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.m-fee-saving-number small { font-size: var(--t3); font-weight: 400; color: var(--good); }
.m-fee-saving .m-help { color: var(--ink-2); font-weight: 400; }

/* ── 조건별 비교 ──────────────────────────────────────────────────────── */
.m-fee-compare-intro { margin-top: var(--gap-item); margin-bottom: var(--gap-block); color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line); }
.m-fee-table { width: 100%; border-collapse: collapse; font-size: var(--t2); line-height: var(--gap-line);
  font-variant-numeric: tabular-nums lining-nums; }
.m-fee-table th { font-weight: 500; color: var(--ink-2); }
.m-fee-table th, .m-fee-table td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line);
  text-align: right; vertical-align: top; }
.m-fee-table th:first-child, .m-fee-table td:first-child { text-align: left; padding-left: 0; }
.m-fee-table th:last-child, .m-fee-table td:last-child { padding-right: 0; }
.m-fee-table tbody th { color: var(--ink); }
.m-fee-table small { display: block; color: var(--ink-2); font-size: var(--t1); line-height: var(--gap-line);
  font-weight: 400; margin-top: var(--gap-item); }
/* 고른 조건은 색만으로 알리지 않는다 — 첫 칸에 '현재 조건'이라는 글자가 같이 있다. */
.m-fee-table .m-fee-current { background: var(--accent-soft); }
.m-fee-table .m-fee-current th { color: var(--m-info); }
.m-fee-table .m-fee-current th:first-child { padding-left: var(--s2); }
.m-fee-table .m-fee-current td:last-child { padding-right: var(--s2); }
.m-fee-delta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-item);
  flex-wrap: wrap; margin-top: var(--gap-block); font-size: var(--t2); line-height: var(--gap-line); }
.m-fee-delta strong { color: var(--good); font-size: var(--t3); line-height: var(--gap-line);
  font-variant-numeric: tabular-nums lining-nums; }

/* ── 계산 기준(문서 절 — 과업 블록 밖·하단·접힘) ─────────────────────────── */
.m-fee-rules { margin-top: var(--gap-section); border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface); }
/* 펼침 표식(▸)을 지우지 않는다 — 접힌 블록이라는 것이 보여야 연다. */
.m-fee-rules summary { padding: var(--s3) var(--s4); font-weight: 500; }
.m-fee-rules summary:focus-visible { outline: 3px solid var(--m-focus); outline-offset: 3px; }
.m-fee-rule-title { display: inline; font-size: var(--t3); line-height: var(--gap-line); font-weight: 500; }
.m-fee-rule-body { border-top: 1px solid var(--line); padding: var(--s4); color: var(--ink-2);
  font-size: var(--t2); line-height: var(--gap-line); display: grid; gap: var(--gap-block); }
.m-fee-rule-body strong { color: var(--ink); font-weight: 500; }
.m-fee-footer { margin-top: var(--gap-section); font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }

/* ── 결과 복사 ──────────────────────────────────────────────────────────── */
.m-fee-copy { margin-top: var(--gap-block); display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-item); }
.m-fee-copy-status { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); min-height: 22px; }
.m-fee-copy-status[data-state="done"] { color: var(--good); }
.m-fee-copy-status[data-state="fail"] { color: var(--bad); }

/* 예시 기본값 상태(사람용 2단 패턴 A). 금액·쿠폰은 예시로 채워 두고 기본 수수료율만 비운다 — 근거 없는
   수수료율은 화면에 띄우지 않는다는 원칙 때문이다. 점선 테두리 + '예시' 배지는 입력을 건드리면 사라지고,
   기본율 칸 강조는 그 칸이 채워지면 사라진다. */
/* 2026-09-21(PS0920): 강조 대상이 기본율 칸 하나에서 **결과를 막고 있는 칸 전부**로 넓어졌다.
   `.m-field` 안에는 라디오도 있으므로 단위 칸(.m-fee-input-wrap)만 집어 테두리를 준다. */
.m-fee-need .m-fee-input-wrap input { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ── 좁은 화면 — 브레이크포인트는 층 1 의 2개뿐이다(560 · 860) ─────────────
   비교 표는 조건별 세로 행으로 바꾼다. 원수치를 줄이지 않고 각 금액 옆에 항목명을 남긴다 —
   가로 스크롤도, 읽는 순서를 뒤집는 것도 하지 않는다. */
@media (max-width: 860px) {
  .m-fee-table thead { display: none; }
  .m-fee-table, .m-fee-table tbody, .m-fee-table tr, .m-fee-table th, .m-fee-table td {
    display: block; width: 100%; }
  .m-fee-table tr { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .m-fee-table th, .m-fee-table td { padding: var(--s1) 0; border: 0; text-align: left; }
  .m-fee-table tbody th { font-size: var(--t3); line-height: var(--gap-line); margin-bottom: var(--gap-item); }
  .m-fee-table td { display: flex; justify-content: space-between; gap: var(--gap-item); }
  .m-fee-table td::before { content: attr(data-label); color: var(--ink-2); }
  .m-fee-table .m-fee-current { padding: var(--s3) var(--s2); }
  .m-fee-table .m-fee-current th:first-child { padding-left: 0; }
  .m-fee-table .m-fee-current td:last-child { padding-right: 0; }
  .m-fee-table small { margin-top: 0; }
}
/* 좁은 화면(390px)에서는 화면 우하단에 떠 있는 피드백 위젯이 오른쪽 끝 세로 띠(x≥241)를
   차지한다. 그 자리에 놓인 스위치는 눌러도 위젯이 열린다. 위젯은 이 사이트가 아니라 공용
   SDK 소관이라 손대지 않고, 스위치를 그 띠 밖에 둔다.
   ⚠ 2026-09-21(PS0920) — **행을 뒤집어서 빼지 말 것.** row-reverse 로 두면 이 한 줄만
   '끔 [토글] 프리미엄 PC방' 으로 읽혀 바로 아래 TOP CLASS·쿠폰 줄(라벨이 먼저)과 순서가
   어긋난다. 뒤집는 대신 **쌓는다**: 라벨이 먼저고 스위치는 그 아래 왼쪽이라, 읽는 순서도
   지키고 위젯 띠도 피한다. 아래 두 줄도 라벨 위·조작부 아래라 모양이 한 벌로 맞는다. */
@media (max-width: 560px) {
  .m-fee-metrics { grid-template-columns: minmax(0, 1fr); }
  .m-fee-page .m-fee-condition { flex-direction: column; align-items: flex-start;
    justify-content: center; }
}