/* 꽃나음 다원 — 폰(터치) 배치. html.is-touch 는 index.html 머리의 작은 스크립트가 붙인다.
   main.js가 런타임에 넣는 <style>보다 뒤에 오지 못하므로, 겹치는 규칙은 html.is-touch 로 한 단계 더 구체적으로 쓴다. */

/* ---------- 페이지가 움직이지 않게: 확대·스크롤·선택·길게 누르기 메뉴 ---------- */
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.is-touch, html.is-touch body { touch-action: manipulation; }
html.is-touch body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
html.is-touch input, html.is-touch textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; font-size: max(16px, 1em); }
#scene { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.is-touch kbd { display: none !important; }                 /* 자판 안내는 폰에서 숨긴다 */
html.is-touch #intro .controls kbd { display: none !important; }

/* ---------- 조이스틱 — 왼쪽 아래에 옅게 쉬고 있다가, 엄지가 닿은 곳으로 온다 ---------- */
.joy { display: none; }
html.is-touch .joy {
  --size: 112px;
  display: block; position: fixed; z-index: 4; pointer-events: none;
  width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  left: calc(max(16px, env(safe-area-inset-left)) + var(--size) / 2 + 4px);
  top: calc(100dvh - var(--bar-gap) - var(--bar-h) - 22px - var(--size) / 2);
  border-radius: 50%; border: 1px solid rgba(38, 40, 46, .22);
  background: radial-gradient(circle, rgba(253, 253, 251, .38) 0 58%, rgba(253, 253, 251, .18) 59% 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: .5; transition: opacity .25s;
}
html.is-touch .joy-knob {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(253, 253, 251, .92); border: 1px solid rgba(38, 40, 46, .2); box-shadow: 0 4px 14px rgba(20, 24, 40, .16);
}
html.is-touch .joy-knob::after { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: var(--pink); }
html.is-touch .joy.on { opacity: 1; transition: none; }
/* 들어가기 전 · 1인칭 · 창이 떠 있을 때는 숨긴다 */
html.is-touch body:has(#intro:not([hidden])) .joy,
html.is-touch body.fp-mode .joy:not(.on),
html.is-touch body:has(dialog[open]) .joy,
html.is-touch body:has(#done:not([hidden])) .joy { display: none; }
html.is-touch body:has(#panel:not([hidden])) .joy:not(.on) { opacity: 0; }

/* ---------- 하단 행동 바 — 360px에서도 한 줄, 44px 이상, 안전 영역 ---------- */
html.is-touch { --bar-h: 58px; }
html.is-touch .hud-bottom { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); padding: 0; bottom: max(8px, env(safe-area-inset-bottom)); }
html.is-touch { --bar-gap: max(8px, env(safe-area-inset-bottom)); }
html.is-touch .actions { width: 100%; max-width: 480px; padding: 3px; min-height: var(--bar-h); }
html.is-touch .actions button { flex: 1 1 0; min-width: 44px; min-height: 52px; padding: 4px 2px; gap: 1px; font-size: 11px; line-height: 1.25; white-space: nowrap; letter-spacing: -0.02em; }
html.is-touch .act-ic { font-size: 18px; line-height: 1.15; }
html.is-touch .actions button:hover { background: none; color: var(--ink-soft); }
html.is-touch .actions button:active { background: rgba(242, 174, 188, .3); }
/* 앉기 · 일어나기 · 다실 들어가기 — 가장 중요한 버튼은 먹색으로 크게 */
html.is-touch #act-main { flex-grow: 1.7; background: var(--ink); color: var(--cream); border-left-color: transparent; }
html.is-touch #act-main + button { border-left-color: transparent; }
html.is-touch #act-main:active { background: #3a3d45; }
/* 쏘기(숨은 놀이) — 길게 누르면 연사. 손가락이 미끄러져도 메뉴·선택이 뜨지 않게 */
html.is-touch .actions button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.is-touch .prompt { font-size: 12px; padding: 6px 12px; margin-bottom: 6px; max-width: 100%; }

/* ---------- 상단 HUD — 좁은 폰 ---------- */
html.is-touch .hud-top { left: max(0px, env(safe-area-inset-left)); right: max(0px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); }
@media (max-width: 380px) {
  html.is-touch .hud { padding: 0 8px; }
  html.is-touch .hud-brand .logo { width: 96px; }
  html.is-touch .hud-left { gap: 7px; padding: 6px 9px; }
  html.is-touch .tool { padding: 0 10px; }
}
html.is-touch .hint { top: calc(max(8px, env(safe-area-inset-top)) + 52px); font-size: 12px; }
/* 창이 떠 있으면 알림은 위로 (창·버튼을 가리지 않게) */
html.is-touch body:has(#panel:not([hidden])) .toast { bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 54px); max-width: calc(100% - 24px); font-size: 12.5px; padding: 7px 12px; }

/* ---------- 리추얼 패널 (뒤에서 볼 때) ---------- */
html.is-touch .panel { width: auto; left: 8px; right: 8px; transform: none; max-width: 520px; margin: 0 auto; padding: 12px 14px 14px;
  max-height: min(48dvh, calc(100dvh - var(--bar-gap) - var(--bar-h) - max(8px, env(safe-area-inset-top)) - 70px)); animation-name: rise-m; }
@keyframes rise-m { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.is-touch .panel-head { grid-template-columns: auto 1fr auto auto; gap: 8px; }
html.is-touch .panel-hanja { min-width: 40px; font-size: 17px; padding: 3px 6px; }
html.is-touch .panel-title { font-size: 15px; line-height: 1.35; }
html.is-touch .panel-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
html.is-touch .panel-head .link { padding: 0 6px; font-size: 13px; }
.panel-min { display: none; }
html.is-touch .panel-min { display: inline-block; }
html.is-touch #panel.is-min .panel-body { display: none; }
html.is-touch #panel.is-min .panel-sub { -webkit-line-clamp: 1; }
html.is-touch .chip { min-height: 40px; }
html.is-touch .btn-small { min-height: 44px; }
html.is-touch .fp-toggle, html.is-touch .link-small { min-height: 44px; padding: 0 10px; }
html.is-touch .inkpad-btn, html.is-touch .inkpad-primary { min-height: 44px !important; }
html.is-touch .inkpad-swatch { width: 44px; height: 44px; }
html.is-touch .inkpad-swatch::after { inset: 9px; }

/* ---------- 1인칭(필사·싱잉볼·다도) — 폰에선 아래 시트, 대상은 그 위 빈 자리에 (touch.js가 3D 화면을 옮긴다) ---------- */
html.is-touch body.fp-mode #panel {
  left: 8px; right: 8px; width: auto; max-width: 560px; margin: 0 auto; top: auto; transform: none;
  bottom: calc(var(--bar-gap) + var(--bar-h) + 6px); max-height: 34dvh; padding: 10px 12px 12px;
}
html.is-touch body.fp-mode #panel .panel-body { margin-top: 8px; gap: 6px; }
html.is-touch body.fp-mode #panel .panel-sub { -webkit-line-clamp: 1; }
html.is-touch body.fp-mode #panel .cap { font-size: 13px; }
html.is-touch body.fp-mode #panel .fp-toggle { min-height: 36px; }
/* 필사: 펜·되돌리기·다 썼어요가 먼저 보이게 */
html.is-touch body.fp-ink #panel .inkpad-holder { order: -2; width: 100%; margin: 0; }
html.is-touch body.fp-ink #panel .fp-cap { order: -3; }
html.is-touch body.fp-ink #panel .inkpad { gap: 0; }
html.is-touch body.fp-ink #panel .inkpad-bar { flex-wrap: nowrap; gap: 6px; }
html.is-touch body.fp-ink #panel .inkpad-pens { gap: 4px; }
html.is-touch body.fp-ink #panel .inkpad-tools { flex: 1 1 auto; gap: 4px; order: 0; flex-basis: auto; }
html.is-touch body.fp-ink #panel .inkpad-swatch { width: 36px; height: 44px; }
html.is-touch body.fp-ink #panel .inkpad-swatch::after { inset: 10px 7px; }
html.is-touch body.fp-ink #panel .inkpad-btn { padding: 0 7px !important; font-size: 11px !important; white-space: nowrap; }
html.is-touch body.fp-ink #panel .inkpad-primary { padding: 0 10px !important; font-size: 12px !important; margin-left: 0; white-space: nowrap; }
@media (max-width: 380px) { html.is-touch body.fp-ink #panel .inkpad-btn[aria-pressed] { display: none; } } /* 아주 좁으면 '안내 글씨' 토글은 접는다 */

/* ---------- 다이얼로그 · 오버레이 ---------- */
html.is-touch .dlg { width: min(400px, calc(100% - 24px)); max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)) - 16px); overflow: auto; overscroll-behavior: contain; padding: 12px 16px 16px; }
html.is-touch .dlg header { position: sticky; top: -12px; z-index: 1; margin: -12px -16px 0; padding: 4px 16px 0; background: var(--glass); }
html.is-touch .dlg .swatches { gap: 2px; }
html.is-touch .swatch { min-width: 44px; min-height: 52px; }
html.is-touch .pick-opt { min-height: 72px; }
/* 오버레이: 카드가 화면보다 길면 위가 잘리지 않고 스크롤된다 · 키보드가 올라오면 보이는 높이에 맞춘다 */
.overlay { place-items: unset; display: grid; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.overlay > .overlay-card { margin: auto; }
html.is-touch .overlay { bottom: auto; height: var(--vvh, 100dvh); padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
@media (max-width: 420px) {
  html.is-touch .overlay-card { padding: 0 18px 18px; }
  html.is-touch .brand-bar { margin: 0 -18px; height: 10px; }
  html.is-touch .eyebrow { margin-top: 14px; }
  html.is-touch .eyebrow .logo { width: 176px; }
  html.is-touch .overlay h1 { font-size: 25px; }
  html.is-touch .lead { margin-top: 12px; font-size: 13.5px; }
  html.is-touch .pick { margin-top: 14px; }
  html.is-touch .controls { margin-top: 14px; padding: 8px 0; gap: 4px 12px; }
  html.is-touch .status { margin-top: 12px; }
  html.is-touch .nick { margin-top: 12px; }
}

/* ---------- 가로(landscape) 폰 — 낮은 화면 ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  html.is-touch { --bar-h: 50px; }
  html.is-touch .hud-top { top: max(6px, env(safe-area-inset-top)); }
  html.is-touch .hud-left { min-height: 38px; padding: 4px 10px; }
  html.is-touch .tool { min-height: 38px; }
  html.is-touch .hud-cup { top: 0; width: 46px; height: 46px; }
  html.is-touch .hint { top: calc(max(6px, env(safe-area-inset-top)) + 44px); }
  html.is-touch .hud-bottom { left: calc(max(8px, env(safe-area-inset-left)) + 150px); right: calc(max(8px, env(safe-area-inset-right)) + 8px); }
  html.is-touch .actions { max-width: 460px; }
  html.is-touch .actions button { min-height: 44px; padding: 2px; gap: 0; font-size: 10.5px; line-height: 1.2; }
  html.is-touch .act-ic { font-size: 15px; line-height: 1.1; }
  /* 창이 왼쪽에 있으면 알림은 오른쪽 3D 칸 가운데 위로 */
  html.is-touch body:has(#panel:not([hidden])) .toast { left: calc(max(8px, env(safe-area-inset-left)) + min(360px, 46vw) + 12px); right: 8px; width: fit-content; margin: 0 auto; transform: translateY(8px); }
  html.is-touch body:has(#panel:not([hidden])) .toast.show { transform: none; }
  html.is-touch body.fp-ink #panel .inkpad-bar { flex-wrap: wrap; }
  html.is-touch body.fp-ink #panel .inkpad-primary { margin-left: auto; }
  html.is-touch .joy { --size: 104px; top: calc(100dvh - max(10px, env(safe-area-inset-bottom)) - 62px); left: calc(max(14px, env(safe-area-inset-left)) + 58px); }
  html.is-touch body:has(#panel:not([hidden])) .toast { top: calc(max(6px, env(safe-area-inset-top)) + 46px); }
  /* 뒤에서 볼 때 창은 왼쪽 위 (3D 가운데·행동 바를 비켜서) */
  html.is-touch .panel { left: max(8px, env(safe-area-inset-left)); right: auto; width: min(360px, 46vw); margin: 0; top: calc(max(6px, env(safe-area-inset-top)) + 46px); bottom: calc(var(--bar-gap) + 4px); max-height: none; }
  html.is-touch body.fp-mode #panel { left: max(8px, env(safe-area-inset-left)); right: auto; width: min(340px, 42vw); margin: 0; top: calc(max(6px, env(safe-area-inset-top)) + 46px); bottom: calc(var(--bar-gap) + 4px); max-height: none; }
  html.is-touch body:has(#panel:not([hidden])) .hud-bottom { left: calc(max(8px, env(safe-area-inset-left)) + min(360px, 46vw) + 8px); }
  html.is-touch body.fp-mode .hud-bottom { left: calc(max(8px, env(safe-area-inset-left)) + min(340px, 42vw) + 8px); }
  html.is-touch .dlg { max-height: calc(100dvh - 16px); }
  html.is-touch .overlay-card { width: min(560px, 100%); }
  html.is-touch .overlay h1 { font-size: 24px; }
  html.is-touch .lead { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { html.is-touch .panel { animation: none; } }