*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
html, body { margin: 0; height: 100%; }
body { background: #16181C; color: var(--muted-2); font-family: var(--font); font-size: var(--body); line-height: 1.5;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
input, textarea { font-size: max(16px, 1em); }   /* iOS 확대 막기 */
[hidden] { display: none !important; }
svg.i { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#view:focus, #view:focus-visible { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.backdrop { position: fixed; inset: 0; background: var(--bg-grad); z-index: -2; }
.backdrop::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .38; mix-blend-mode: overlay; pointer-events: none; }
.st { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; margin: 0 .03em; object-fit: contain; }
.glass { background: var(--glass); border: 1px solid rgba(255,255,255,.10); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.btn { height: 52px; border-radius: var(--r-m); font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; }
.btn.primary { background: var(--text); color: #141317; }
.btn.line { border: 1px solid var(--line-2); color: #E9E5EE; font-weight: 600; }
.btn.ghost { color: var(--muted); font-weight: 600; }
.btn.danger { background: rgba(255,107,107,.14); color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }
.chip { height: 34px; padding: 0 14px; border-radius: 17px; background: var(--raised-2); font-size: 13px; font-weight: 700; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.icon-btn { width: 44px; height: 44px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); position: relative; }
.icon-btn:hover { background: var(--fill); }
.field { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-radius: var(--r-m); background: rgba(16,15,20,.42); border: 1px solid rgba(255,255,255,.12); color: var(--muted-2); }
.field:focus-within { border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 4px rgba(255,255,255,.05); }
.field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text-2); }
.field input::placeholder { color: var(--faint); }
.lk { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.lk b { color: var(--text); font-weight: 600; }
.or { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: var(--faint); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.err { color: #FF9D9D; font-size: 14px; font-weight: 600; }
.note { color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* keep-all은 한국어 띄어쓰기용. 일본어는 띄어쓰기가 없어 문구 단위로 줄을 바꿔요 */
:root:lang(ja) body { word-break: normal; line-break: strict; }
@supports (word-break: auto-phrase) { :root:lang(ja) body { word-break: auto-phrase; } }