/* apps/percent/style.css — 퍼센트 계산기: 모눈종이 바탕 + 남색 잉크 + 토마토 주황 강조 + 형광펜 노랑, 증가 초록·감소 빨강.
 * 계산 탭 6개(3×2 칸) → 계산 카드(입력 2칸 · 결과 큰 숫자 Space Grotesk · 계산식 줄 · 복사) → 요약 보기 → 요약 카드 + 공통 끝 화면.
 * 모바일 한 줄(--app-width 480px). 제목·버튼은 언어 파일 fonts → :root 변수(--font-display 등, 생성기가 이 파일 뒤에 둔다).
 * 공통 타이틀 바(G.topBar)·끝 화면(data-mg-end)은 --mg-* 변수로만 색을 맞춘다.
 */
:root {
  --paper: #f4f6fb;
  --grid: rgba(27, 36, 64, 0.06);
  --ink: #1b2440;
  --ink-dim: #46506e;
  --ink-faint: #6b7491;
  --accent: #ff5a36;
  --accent-2: #e2441f;
  --hi: #ffe066;
  --up: #0f8f47;
  --down: #d93a3f;
  --line: rgba(27, 36, 64, 0.16);
  --card: #ffffff;
  --soft: #eef1f8;
  --focus: #2f6bff;
  --font-num: 'Space Grotesk', var(--font-display);

  --font-display: 'Outfit', var(--font-sans);
  --display-weight: 700;
  --wb: normal;
  --hyphens: manual;

  --mg-top-fg: var(--ink);
  --mg-top-badge-bg: var(--accent);
  --mg-top-badge-fg: #fff;
  --lang-bg: var(--card);
  --lang-fg: var(--ink);
  --lang-border: var(--line);
  --mg-star-on: #ffb020;
  --mg-star-off: rgba(27, 36, 64, 0.18);
  --mg-heart-bg: var(--card);
  --mg-heart-border: var(--accent);
  --mg-heart-fg: var(--accent);
  --mg-heart-on: var(--accent);
  --mg-share-bg: var(--card);
  --mg-share-border: var(--line);
  --mg-faq-bg: var(--card);
  --mg-faq-border: var(--line);
  --mg-end-retry-bg: var(--ink);
  --mg-end-retry-fg: #fff;
  --toast-bg: var(--ink);
  --toast-fg: #fff;
}

html { background: var(--paper); }
body.pc-body {
  min-height: 100vh;
  color: var(--ink);
  line-height: 1.6;
  word-break: var(--wb);
  hyphens: var(--hyphens);
  -webkit-hyphens: var(--hyphens);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
}
[hidden] { display: none !important; }

.pc-h1, .pc-kicker, .pc-h1-main, .pc-h1-main em, .pc-btn, .pc-h2, .pc-doc h1, .pc-tab-t, .pc-seg-btn, .pc-chip, .pc-copy, .pc-lead, .pc-sum-t, .pc-label {
  font-family: var(--font-display);
}
.pc-big, .pc-sum-big, .pc-input, .pc-suffix, .pc-logo {
  font-family: var(--font-num);
}

.pc-shell { max-width: var(--app-width); margin: 0 auto; padding: 8px 16px 0; }
.pc-screen { padding-top: 12px; }

/* ---------------- 제목 ---------------- */
.pc-logo {
  width: 58px; height: 58px; margin: 6px auto 10px; display: grid; place-items: center; border-radius: 18px;
  background: var(--hi); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-6deg);
}
.pc-logo span { font-size: 34px; font-weight: 700; line-height: 1; color: var(--ink); }
.pc-h1 { margin: 6px 0 8px; text-align: center; line-height: 1.18; font-weight: var(--display-weight); }
.pc-kicker {
  display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; border: 2px solid var(--ink);
  background: #fff; color: var(--ink); font-size: 13px; letter-spacing: 0.02em; line-height: 1.4;
}
.pc-h1-main { display: block; font-size: 29px; color: var(--ink); overflow-wrap: break-word; }
.pc-h1-main em { font-style: normal; color: var(--accent-2); background: linear-gradient(transparent 62%, var(--hi) 62%); padding: 0 2px; }
.pc-hook { margin: 0 auto 16px; max-width: 410px; text-align: center; font-size: 15px; color: var(--ink-dim); }

/* ---------------- 탭 ---------------- */
.pc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.pc-tab {
  min-width: 0; min-height: 66px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 2px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); cursor: pointer; text-align: center;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.pc-tab-ico { font-size: 20px; line-height: 1.1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.pc-tab-t { font-size: 13px; font-weight: var(--display-weight); line-height: 1.2; overflow-wrap: break-word; max-width: 100%; }
.pc-tab[aria-selected="true"] { border-color: var(--ink); background: var(--hi); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.pc-tab:focus-visible, .pc-seg-btn:focus-visible, .pc-chip:focus-visible, .pc-copy:focus-visible, .pc-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------------- 계산 카드 ---------------- */
.pc-card { padding: 16px; background: var(--card); border: 2px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink); }
.pc-h2 { margin: 0 0 2px; font-size: 19px; font-weight: var(--display-weight); line-height: 1.3; color: var(--ink); }
.pc-desc { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-faint); }
.pc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 12px; padding: 3px; border-radius: 14px; background: var(--soft); border: 1.5px solid var(--line); }
.pc-seg-btn {
  min-width: 0; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-dim);
  font-size: 14px; font-weight: var(--display-weight); line-height: 1.25; cursor: pointer;
}
.pc-seg-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-field { min-width: 0; display: flex; flex-direction: column; }
.pc-label { display: block; margin: 0 0 5px; font-size: 13px; font-weight: var(--display-weight); line-height: 1.3; color: var(--ink-dim); flex: 1 0 auto; }
.pc-inwrap { position: relative; }
.pc-input {
  display: block; width: 100%; min-width: 0; min-height: 52px; padding: 10px 12px;
  border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink);
  font-size: 21px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none;
}
.pc-inwrap.is-pct .pc-input { padding-right: 34px; }
.pc-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 19px; font-weight: 700; color: var(--ink-faint); pointer-events: none; }
.pc-input::placeholder { color: #b8bfd2; font-weight: 600; }
.pc-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 90, 54, 0.18); }
.pc-input[aria-invalid="true"] { border-color: var(--down); }

.pc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.pc-chips-label { flex: 1 0 100%; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); line-height: 1.3; }
.pc-chip {
  flex: 1 1 0; min-width: 0; min-height: 38px; padding: 4px 6px; border: 2px solid var(--line); border-radius: 12px; background: var(--soft);
  color: var(--ink); font-size: 15px; font-weight: var(--display-weight); cursor: pointer; white-space: nowrap;
}
.pc-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--accent); color: #fff; }

.pc-out { margin: 14px 0 0; padding: 14px 14px 12px; border-radius: 16px; background: var(--soft); border: 1.5px dashed var(--line); text-align: center; }
.pc-out.is-ok { background: #fffbe8; border: 2px solid var(--ink); }
.pc-lead { margin: 0; font-size: 14.5px; font-weight: var(--display-weight); line-height: 1.4; color: var(--ink-dim); overflow-wrap: anywhere; }
.pc-big { margin: 4px 0 0; font-size: 46px; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: #b8bfd2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pc-big.is-long { font-size: 32px; }
.pc-out.is-ok .pc-big { color: var(--ink); }
.pc-out.is-up .pc-big { color: var(--up); }
.pc-out.is-down .pc-big { color: var(--down); }
.pc-sub { margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.pc-warn { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: rgba(255, 90, 54, 0.1); font-size: 12.5px; font-weight: 600; line-height: 1.45; color: #9a2c12; overflow-wrap: anywhere; }
.pc-err { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: #a3262b; }
.pc-how { margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1.5px solid var(--line); text-align: left; }
.pc-how-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; color: var(--ink-faint); line-height: 1.3; }
.pc-how-f { display: block; margin-top: 2px; font-family: var(--font-num); font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pc-copy {
  margin: 10px auto 0; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 16px;
  border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font-size: 14px; font-weight: var(--display-weight); cursor: pointer;
}
.pc-copy:disabled { opacity: 0.4; cursor: default; border-color: var(--line); }
.pc-hint { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-faint); }

/* ---------------- 버튼 ---------------- */
.pc-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 56px; margin: 16px 0 0; padding: 12px 18px;
  border: 2px solid var(--ink); border-radius: 18px; font-size: 18px; font-weight: var(--display-weight); line-height: 1.25; cursor: pointer; text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pc-btn-primary { background: var(--accent); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.pc-btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.pc-local { margin: 10px 0 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); }
.pc-error {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 90, 54, 0.1); border: 2px solid var(--accent);
  color: #9a2c12; font-size: 14px; font-weight: 700; line-height: 1.45;
}

/* ---------------- 요약 ---------------- */
.pc-result { margin-top: 26px; }
.pc-summary { padding: 18px 16px 14px; background: var(--card); border: 2px solid var(--ink); border-radius: 24px; box-shadow: 5px 5px 0 var(--ink); }
.pc-sum-list { margin: 8px 0 0; padding: 0; list-style: none; }
.pc-sum-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 't big' 'line line' 'how how'; column-gap: 10px; padding: 10px 2px; }
.pc-sum-item + .pc-sum-item { border-top: 1.5px dashed var(--line); }
.pc-sum-t { grid-area: t; font-size: 14px; font-weight: var(--display-weight); line-height: 1.3; color: var(--ink-dim); align-self: center; }
.pc-sum-big { grid-area: big; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--accent-2); text-align: right; overflow-wrap: anywhere; max-width: 60vw; }
.pc-sum-line { grid-area: line; margin-top: 2px; font-size: 14.5px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.pc-sum-how { grid-area: how; font-family: var(--font-num); font-size: 12.5px; line-height: 1.4; color: var(--ink-faint); overflow-wrap: anywhere; }
.pc-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.pc-brand { margin: 8px 0 0; text-align: center; font-size: 12px; font-weight: 800; color: var(--ink-faint); }

/* ---------------- 개인정보처리방침 ---------------- */
.pc-doc { padding: 28px 0 36px; line-height: 1.8; font-size: 14.5px; color: var(--ink-dim); }
.pc-doc h1 { font-size: 24px; font-weight: var(--display-weight); color: var(--ink); margin-bottom: 20px; }
.pc-doc h2 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 26px 0 8px; }
.pc-doc a { color: var(--accent-2); text-decoration: underline; }

.site-footer { margin-top: 28px; color: var(--ink-faint); }
.site-footer a { color: var(--ink-dim); }

/* 언어별 — base.css 의 :lang(zh|th|vi) 글꼴 규칙이 상속을 끊으므로 제목·숫자 요소에 다시 지정 */
html:lang(zh) :is(.pc-h1, .pc-kicker, .pc-h1-main, .pc-btn, .pc-h2, .pc-tab-t, .pc-seg-btn, .pc-chip, .pc-copy, .pc-lead, .pc-sum-t, .pc-label),
html:lang(th) :is(.pc-h1, .pc-kicker, .pc-h1-main, .pc-btn, .pc-h2, .pc-tab-t, .pc-seg-btn, .pc-chip, .pc-copy, .pc-lead, .pc-sum-t, .pc-label),
html:lang(vi) :is(.pc-h1, .pc-kicker, .pc-h1-main, .pc-btn, .pc-h2, .pc-tab-t, .pc-seg-btn, .pc-chip, .pc-copy, .pc-lead, .pc-sum-t, .pc-label) { font-family: var(--font-display); }
html:lang(zh) :is(.pc-big, .pc-sum-big, .pc-input, .pc-suffix, .pc-logo, .pc-how-f, .pc-sum-how),
html:lang(th) :is(.pc-big, .pc-sum-big, .pc-input, .pc-suffix, .pc-logo, .pc-how-f, .pc-sum-how),
html:lang(vi) :is(.pc-big, .pc-sum-big, .pc-input, .pc-suffix, .pc-logo, .pc-how-f, .pc-sum-how) { font-family: var(--font-num); }
html:lang(th) :is(.pc-h1-main, .pc-h2, .pc-label, .pc-btn, .pc-tab-t, .pc-lead, .pc-sub, .pc-hook, .pc-desc, .pc-seg-btn, .pc-sum-t, .pc-sum-line) { line-height: 1.55; letter-spacing: 0; }
html:lang(vi) .pc-h1-main { line-height: 1.32; }
html:lang(ja) :is(.pc-h1-main, .pc-hook, .pc-desc, .pc-note, .pc-lead, .pc-sub, .pc-warn) { word-break: auto-phrase; }
html:lang(ko) :is(.pc-h1-main, .pc-hook, .pc-desc, .pc-hint, .pc-note, .pc-error, .pc-err, .pc-lead, .pc-sub, .pc-warn, .pc-local, .pc-tab-t, .pc-label) { word-break: keep-all; }
html:lang(de) :is(.pc-tab-t, .pc-label, .pc-seg-btn, .pc-desc, .pc-sub) { hyphens: auto; -webkit-hyphens: auto; }

@media (max-width: 374px) {
  .pc-h1-main { font-size: 25px; }
  .pc-card { padding: 14px 12px; }
  .pc-tabs { gap: 6px; }
  .pc-tab { padding: 7px 4px; }
  .pc-tab-t { font-size: 12px; }
  .pc-fields { gap: 8px; }
  .pc-input { font-size: 19px; padding: 10px 10px; }
  .pc-inwrap.is-pct .pc-input { padding-right: 28px; }
  .pc-suffix { right: 9px; font-size: 17px; }
  .pc-big { font-size: 40px; }
  .pc-big.is-long { font-size: 27px; }
  .pc-seg-btn { font-size: 13px; padding: 6px 4px; }
  .pc-chip { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-tab, .pc-btn { transition: none; }
}