/* 세 앱 공통 바탕. 각 앱 폴더로 복사해 쓴다(앱마다 독립 설치·오프라인 캐시 때문). 원본: _tools/base.css */
:root {
  color-scheme: light dark;
  --bg: #f3f4f3;
  --surface: #fcfcfb;
  --ink: #17181a;
  --muted: #53565c;
  --line: #d3d6d9;
  --line-strong: #9aa0a6;
  --radius: 14px;
  --radius-sm: 10px;
  --font: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Noto Sans KR", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111214;
    --surface: #18191c;
    --ink: #ecedee;
    --muted: #a3a7ad;
    --line: #2d3035;
    --line-strong: #5b6068;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
input, select { font-size: 16px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 10; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-sm); }

.app {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}
.top {
  display: flex; align-items: center; gap: 8px;
  min-height: 56px;
  padding-top: env(safe-area-inset-top);
}
.top h1 { font-size: 1.125rem; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.back {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin-left: -10px;
  text-decoration: none; font-size: 1.25rem; border-radius: var(--radius-sm);
}
.back:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

.btn {
  min-height: 48px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
  font-weight: 600; white-space: nowrap;
  touch-action: manipulation;
  transition: transform 120ms var(--ease), background-color 160ms var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn:disabled { opacity: 0.45; cursor: default; }

.field { display: grid; gap: 6px; }
.field > label, .label { font-size: 0.875rem; color: var(--muted); font-weight: 600; }
.input {
  min-height: 48px; width: 100%;
  padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface);
}
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* 광고 자리: 실광고를 붙일 때 이 안에 <ins> 만 넣는다. 높이를 미리 잡아 레이아웃 이동 0. */
.ad-slot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 100px;
  margin: 20px 0;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  contain: layout paint;
}
.ad-slot::before {
  content: "광고";
  position: absolute; top: 6px; left: 8px;
  font-size: 0.6875rem; color: var(--muted); letter-spacing: 0.02em;
}
.ad-slot > ins { display: block; width: 100%; }
/* 실광고(<ins>)를 아직 넣지 않은 자리는 통째로 숨긴다 — 빈 「광고」 점선 상자·빈 랜드마크 0. 처음부터 높이 0 이라 레이아웃 이동도 0. */
.ad-slot:empty { display: none; }

.privacy-line { font-size: 0.8125rem; color: var(--muted); margin: 16px 0 0; }
.foot { margin-top: 8px; font-size: 0.8125rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}