/* 팔레트, 리셋, 공통 버튼 */

:root {
  --pink: #FF6FA8;
  --pink-hi: #FF8FBC;
  --pink-edge: #DE4A85;
  --deep: #B3436E;
  --ink: #4A2E42;
  --ink-soft: rgba(74, 46, 66, .58);
  --sheet: rgba(255, 255, 255, .66);
  --sheet-firm: rgba(255, 255, 255, .88);

  --r-card: 20px;
  --r-btn: 22px;

  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Pretendard", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* display 를 지정한 요소는 hidden 속성을 무시해 버린다. 전역으로 막아 둔다. */
[hidden] { display: none !important; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font);
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(180deg, #FFE3F0 0%, #FFD3E6 34%, #E9D4F5 68%, #D6E9F7 100%);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* 폰 전용 화면이다. 넓은 창에서 늘어나면 비율이 깨지므로 폭을 묶고 가운데 정렬한다. */
#app {
  position: fixed;
  inset: 0 0 auto 0;
  /* 사파리로 그냥 열면 아래 주소창이 화면을 덮어 버튼이 잘린다.
     dvh 는 그 툴바를 뺀 높이라 잘리지 않는다. 홈 화면 앱에서는 100vh 와 같다. */
  height: 100vh;
  height: 100dvh;
  max-width: 430px;
  margin-inline: auto;
  display: grid; /* 모든 화면을 같은 칸에 겹쳐 두고 하나만 보여준다 */
  padding:
    calc(env(safe-area-inset-top) + 12px)
    calc(env(safe-area-inset-right) + 18px)
    calc(env(safe-area-inset-bottom) + 18px)
    calc(env(safe-area-inset-left) + 18px);
}

.screen { grid-area: 1 / 1; display: none; flex-direction: column; min-height: 0; }
.screen.is-on { display: flex; }

h1, h2 { font-weight: 800; letter-spacing: -.01em; color: var(--deep); }

/* ── 버튼 ────────────────────────────────
   화면마다 강한 것은 primary 하나뿐. 나머지는 조용하게. */

.btn {
  font: inherit;
  font-weight: 800;
  border: none;
  cursor: pointer;
  border-radius: var(--r-btn);
  transition: transform .07s ease, box-shadow .07s ease, background .15s;
}
.btn:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }

.btn.primary {
  background: linear-gradient(180deg, var(--pink-hi), var(--pink));
  color: #fff;
  box-shadow: 0 5px 0 var(--pink-edge), 0 10px 20px -8px rgba(222, 74, 133, .55);
}
.btn.primary:active { transform: translateY(5px); box-shadow: 0 0 0 var(--pink-edge); }

.btn.quiet {
  background: var(--sheet);
  color: var(--deep);
  font-weight: 700;
  border-radius: 15px;
}
.btn.quiet:active { transform: translateY(2px); }

/* 아이콘 버튼 */
.ico {
  width: 40px; height: 40px; flex: none;
  border: none; cursor: pointer; border-radius: 14px;
  background: var(--sheet);
  color: var(--deep);
  display: grid; place-items: center;
  font: inherit; font-size: 20px; line-height: 1;
  transition: transform .07s ease, background .15s;
}
.ico svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.ico:active { transform: translateY(2px); }
.ico:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }

/* ── 화면 머리말 ─────────────────────────── */

.bar { display: flex; align-items: center; gap: 10px; flex: none; height: 44px; }
.bar .sc-title { flex: 1; text-align: center; font-size: 18px; }
.tools { display: flex; gap: 8px; margin-left: auto; }

.stats {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
}
.stats span { display: inline-flex; align-items: center; gap: 4px; }
.stats span[hidden] { display: none; }
.stats svg { width: 13px; height: 13px; fill: currentColor; }

/* 오류가 나면 화면에 그대로 보여준다 — 빈 화면으로 끝나지 않게 */
#crash {
  position: fixed;
  inset: 8px 8px auto 8px;
  z-index: 999;
  margin: 0;
  max-height: 60vh;
  overflow: auto;
  background: #2E2430;
  color: #FFD9EC;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  padding: 12px 14px;
  border-radius: 12px;
  user-select: text;
  -webkit-user-select: text;
}
#crash[hidden] { display: none; }

/* 움직임 줄이기를 켜면 모든 애니메이션이 끝 상태로 즉시 넘어간다.
   개별 클래스를 열거하면 빠뜨리기 쉬워서 전역으로 막는다.
   끝 상태가 opacity:0 인 반짝임 등은 각 파일에서 따로 보이게 해 둔다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 세로 전용 안내 — 폰을 눕혔을 때만. 데스크톱 창은 대개 500px 보다 높아 걸리지 않는다. */
#rotate { display: none; }

@media (orientation: landscape) and (max-height: 500px) {
  #app { display: none; }
  #rotate {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 16px;
    color: var(--deep);
    text-align: center;
  }
  #rotate svg {
    width: 46px;
    height: 46px;
    animation: turnHint 2.4s ease-in-out infinite;
  }
  #rotate p { font-size: 17px; font-weight: 800; }
}

@keyframes turnHint {
  0%, 55%, 100% { transform: rotate(-90deg); }
  75%, 90% { transform: rotate(0deg); }
}