:root {
  --bg0: #0a0e18;
  --bg1: #131b2e;
  --fire: #ff5a2e;
  --fire2: #ffb02e;
  --tc: #00b7d3;          /* TurboChef brand blue */
  --tc-dark: #009bb5;
  --cyan: #39d6f4;
  --ink: #eef2f8;
  --muted: #9aa7bd;
  --panel: rgba(13, 19, 33, 0.92);
  --line: rgba(96, 122, 168, 0.35);
}
* { box-sizing: border-box; }
button, .btn, .start-btn, .ref-card { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Pretendard", "Malgun Gothic", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 50% -10%, #1b2745 0%, transparent 60%),
    radial-gradient(900px 500px at 50% 110%, #2a1410 0%, transparent 55%),
    linear-gradient(var(--bg1), var(--bg0));
  background-color: var(--bg0);
  overflow: hidden;
}

/* ── INTRO — title screen ─────────────────────────────────────────── */
#intro {
  position: fixed; inset: 0; height: 100dvh;
  display: grid; place-items: center;
  overflow-y: auto;
  background: #fff;
}
.intro-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom));
  max-width: 520px; width: 100%; min-height: 100%;
  justify-content: center;
  animation: rise .6s ease-out both;
}
.brandlogo {
  width: clamp(77px, 17.6vw, 102px); height: auto;
  opacity: .55; margin-bottom: 26px;
  filter: invert(1);            /* white wordmark → black on the white page */
}
.title {
  margin: 0; font-size: clamp(3.4rem, 15vw, 6rem); line-height: .92;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system,
               BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  font-weight: 900; letter-spacing: -.035em; color: #000;
}
.hero-drawing {
  width: clamp(112px, 31.5vw, 172px); height: auto;
  margin: 46px 0 22px;
  animation: bob 4s ease-in-out infinite;
  filter: invert(1);            /* white line art → black on the white page */
}
.start-block {
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  margin-top: 0;
}
.start-label {
  font-family: "SF Pro Display", "SF Pro Text", -apple-system,
               BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  font-size: clamp(.72rem, 3.1vw, .85rem); font-weight: 500; letter-spacing: .13em;
  text-indent: .13em; line-height: 1.75; color: #000; text-transform: lowercase;
}
.start-btn {
  cursor: pointer; user-select: none; -webkit-appearance: none;
  padding: 16px 54px; border-radius: 999px;
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Arial, sans-serif;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: #000; border: 0;
  transition: transform .08s ease, opacity .15s ease;
}
.start-btn:active { transform: translateY(2px) scale(.98); opacity: .85; }
.intro-status { min-height: 1.3em; margin-top: 6px; color: #000; font-size: .92rem; }

/* ── LOADER — quick 0→100 fill on start ───────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: #fff;
}
.loader-bar {
  width: min(240px, 62vw); height: 3px; border-radius: 999px;
  background: #e4e6ea; overflow: hidden;
}
.loader-bar > span { display: block; width: 0; height: 100%; background: #000; }
.loader-pct {
  font-family: "SF Pro Display", "SF Pro Text", -apple-system,
               BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  font-size: .82rem; font-weight: 600; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; color: #000;
}

/* ── REFERENCE PICKER MODAL ───────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 20px; overflow-y: auto;
  background: rgba(20, 24, 32, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade .18s ease-out both;
}
.modal-card {
  width: 100%; max-width: 460px;
  background: #fff; color: #000;
  border-radius: 22px; padding: 26px 22px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  text-align: center;
  animation: pop .22s cubic-bezier(.2, .9, .3, 1.2) both;
}
.modal-head {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em;
}
.modal-sub {
  margin: 10px 0 18px; font-size: .82rem; line-height: 1.6;
  color: #666; text-align: center;
}
.modal-sub b { color: #000; font-weight: 600; }
.modal-card.wide { max-width: 620px; }

/* photo guide — numbered steps, then good vs too-close examples */
.steps {
  list-style: none; margin: 14px 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left; font-size: .88rem; line-height: 1.45;
}
.steps li { display: flex; align-items: flex-start; gap: 10px; }
.steps li > span:last-child { flex: 1; padding-top: 1px; }
.steps b { font-weight: 700; }
.step-n {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: #000; color: #fff; font-size: .72rem; font-weight: 700;
}

/* photo guide — good vs too-close examples */
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ex { margin: 0; }
.ex img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 14px; border: 2px solid #dcdfe4;
}
.ex.ok img { border-color: #000; }
.ex.bad img { opacity: .6; }
.ex figcaption {
  margin-top: 8px; font-size: .74rem; line-height: 1.4; color: #6b7280;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.ex-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  background: #e9ebef; color: #6b7280;
}
.ex-tag.good { background: #000; color: #fff; }

.btn-go.with-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.btn-go .icon {
  width: 21px; height: 21px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linejoin: round; stroke-linecap: round;
}
.modal-alt {
  -webkit-appearance: none; cursor: pointer;
  width: 100%; margin-top: 8px; padding: 13px 20px; border-radius: 999px;
  font-family: inherit; font-size: .92rem; font-weight: 600; color: #000;
  background: #fff; border: 1.5px solid #d8dbe0;
  transition: background .15s;
}
.modal-alt:active { background: #f3f4f6; }

/* rotate-to-landscape prompt */
.rotate-art { display: grid; place-items: center; margin-bottom: 6px; }
.rotate-art svg { width: 150px; height: 90px; overflow: visible; }
.rotate-art .arc, .rotate-art .arc-tip {
  fill: none; stroke: #b6bcc6; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.rotate-art .phone {
  fill: none; stroke: #000; stroke-width: 2.6; stroke-linecap: round;
  transform-origin: 60px 45px;
  animation: turnPhone 2.6s ease-in-out infinite;
}
@keyframes turnPhone {
  0%, 22%   { transform: rotate(0deg); }
  46%, 82%  { transform: rotate(-90deg); }
  100%      { transform: rotate(0deg); }
}
.btn-go.center { width: auto; min-width: 180px; margin-left: auto; margin-right: auto; display: block; }

/* The message itself is laid out sideways while the phone is upright, so it only
   becomes readable once the phone is actually turned. Landscape gets the normal
   upright card. The little phone animation is counter-rotated so the instruction
   stays legible at the orientation the user is currently holding. */
#rotateModal { overflow: hidden; padding: 12px; }
@media (orientation: portrait) {
  /* centred on its own midpoint, not by the grid — the rotated card's layout box
     is wider than a narrow screen, which would push the visual result off-centre */
  .rotate-card {
    position: absolute; left: 50%; top: 50%;
    width: min(400px, 76vh); max-width: none;
    transform: translate(-50%, -50%) rotate(90deg);
    animation: popTurn .26s cubic-bezier(.2, .9, .3, 1.2) both;
  }
  .rotate-card .rotate-art svg { transform: rotate(-90deg); }
  @keyframes popTurn {
    from { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) rotate(90deg); }
  }
}

.sheet-img {
  display: block; width: 100%; height: auto; max-height: 52vh;
  object-fit: contain; border-radius: 12px; margin-bottom: 14px;
  background: #f3f4f6;
}

/* in-page camera (desktop fallback) */
.modal-card.cam .cam-stage {
  border-radius: 14px; overflow: hidden; background: #000;
  aspect-ratio: 4 / 3; margin-top: 4px;
}
#camVideo { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-note { margin: 10px 0 0; font-size: .78rem; color: #6b7280; }

/* reference picker — one photo card per object, the whole card is the button */
#refModal .modal-sub { margin-bottom: 12px; }
.ref-card {
  -webkit-appearance: none; cursor: pointer; font: inherit; color: inherit;
  display: block; width: 100%; margin-bottom: 12px; padding: 0;
  border-radius: 18px; overflow: hidden; text-align: left;
  background: #fff; border: 1.5px solid #e4e6ea;
  transition: border-color .15s, transform .08s;
}
.ref-card:last-of-type { margin-bottom: 0; }
.ref-card:active { transform: scale(.99); border-color: #000; }
.ref-card img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}
/* short viewports: crop the surface further rather than make the card scroll */
@media (max-height: 720px) { .ref-card img { aspect-ratio: 2 / 1; } }
.ref-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 16px 12px;
}
.ref-name { font-size: .92rem; font-weight: 600; line-height: 1.3; }
.ref-dim { flex: none; font-size: .78rem; color: #7a828f; letter-spacing: .02em; }
.ref-note {
  display: block; margin-top: -6px; padding: 0 16px 12px;
  font-size: .72rem; color: #9aa1ad;
}
/* narrow phones: the name wraps mid-word beside the dimensions, so stack them */
@media (max-width: 380px) {
  .ref-row { flex-direction: column; align-items: flex-start; gap: 3px; }
}
.btn-go {
  -webkit-appearance: none; cursor: pointer;
  width: 100%; margin-top: 18px; padding: 15px 20px; border-radius: 999px;
  font-family: inherit; font-size: 1.02rem; font-weight: 700; color: #fff;
  background: #000; border: 0;
  transition: transform .08s ease, opacity .15s ease;
}
.btn-go:active { transform: translateY(2px) scale(.99); opacity: .85; }
.modal-cancel {
  -webkit-appearance: none; cursor: pointer; background: none; border: 0;
  margin-top: 10px; padding: 8px; font: inherit;
  font-size: .84rem; color: #8a919c;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); }
                 to   { opacity: 1; transform: none; } }
.intro-status.err { color: #c0261a; opacity: 1; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,183,211,.5), 0 10px 30px rgba(0,155,181,.45); }
  50%      { box-shadow: 0 0 0 14px rgba(0,183,211,0), 0 10px 30px rgba(0,155,181,.45); }
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── STAGE — fullscreen photo / 3D ────────────────────────────────── */
#stage {
  position: fixed; inset: 0; height: 100dvh;
  display: flex; flex-direction: column;
  gap: 12px; padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: #fff;
}
#photoArea {
  flex: 1; min-width: 0; min-height: 0;
  display: grid; place-items: center; overflow: hidden;
}
/* wide / landscape: photo on the left, controls docked on the right */
@media (min-aspect-ratio: 1/1) { #stage { flex-direction: row; } }

/* A landscape photo on an upright phone: turn the whole stage sideways so the shot
   fills the screen the way it was framed. Physically turning the phone makes the
   viewport landscape, JS drops the class, and the normal layout takes over. */
#stage.turned {
  inset: auto; left: 50%; top: 50%;
  width: 100dvh; height: 100dvw;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
  flex-direction: row;
}
#canvasWrap {
  position: relative; overflow: hidden; border-radius: 12px;
  touch-action: none; cursor: crosshair;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
}
#canvas { display: block; width: 100%; height: auto; transform-origin: 0 0; }
#canvasWrap.panning { cursor: grabbing; }
.zoom-hint {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(255, 255, 255, .94); color: #000; font-size: .74rem;
  padding: 6px 13px; border-radius: 999px; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: opacity .3s; white-space: nowrap; max-width: calc(100% - 20px);
}
#glcanvas {
  display: block; touch-action: none; cursor: grab; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
}
#glcanvas:active { cursor: grabbing; }

/* pinch-to-zoom coach mark (touch devices, corner-marking step) */
.pinch-hint {
  position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 14px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: opacity .35s ease;
}
.pinch-hint.out { opacity: 0; pointer-events: none; }
.pinch-hint p {
  margin: 0; text-align: center; color: #000;
  font-size: .84rem; font-weight: 600; line-height: 1.55;
}
.pinch-anim { position: relative; width: 116px; height: 46px; }
.pinch-anim .dot {
  position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; background: #000; opacity: .85;
}
.pinch-anim .dot:nth-child(1) { left: 45px; animation: pinchL 1.9s ease-in-out infinite; }
.pinch-anim .dot:nth-child(2) { left: 45px; animation: pinchR 1.9s ease-in-out infinite; }
@keyframes pinchL {
  0%, 100% { transform: translateX(0)    scale(.85); }
  45%, 65% { transform: translateX(-42px) scale(1); }
}
@keyframes pinchR {
  0%, 100% { transform: translateX(0)   scale(.85); }
  45%, 65% { transform: translateX(42px) scale(1); }
}

/* ── DIALOG — quest popup that becomes the controller ─────────────── */
.dialog {
  flex: none; align-self: center;
  width: min(440px, 100%); max-width: 100%;
  background: #fff; color: #000;
  border: 1.5px solid #e4e6ea;
  border-radius: 20px;
  padding: 16px 18px 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .1);
  animation: rise .35s ease-out both;
}
/* wide / landscape screens: fixed-width panel docked at the right */
@media (min-aspect-ratio: 1/1) {
  .dialog {
    width: 340px; max-height: 100%; overflow-y: auto;
    animation: slideIn .35s ease-out both;
  }
}
@keyframes slideIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
.dlg-head {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.dlg-text { margin: 0 0 10px; color: #6b7280; font-size: .88rem; line-height: 1.55; }
.dlg-text b { color: #000; font-weight: 600; }
.dlg-note { margin: -2px 0 10px; text-align: center; font-size: .76rem; color: #8a919c; }
.corner-count {
  text-align: center; font-size: 2rem; font-weight: 800; margin: 2px 0 10px;
  color: #000; font-variant-numeric: tabular-nums;
}
.corner-count .dim { color: #b0b6c0; font-size: 1.2rem; font-weight: 700; }

.ctl {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0; font-size: .9rem; font-weight: 600;
}
.ctl input[type=range] { flex: 1; accent-color: #000; height: 22px; }
.ctl .val {
  min-width: 44px; text-align: right; color: #000; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dlg-row { display: flex; gap: 8px; margin-top: 10px; }
.btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center; cursor: pointer; user-select: none; -webkit-appearance: none;
  font: inherit; font-weight: 600; font-size: .9rem; white-space: nowrap;
  padding: 12px 8px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid #d8dbe0; color: #000; background: #fff;
  transition: background .15s, transform .08s ease;
}
.btn .icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
}
.btn.wide { display: flex; width: 100%; flex: none; margin-top: 10px; }
.btn:active { transform: translateY(2px); background: #f3f4f6; }
.btn.ghost { color: #6b7280; }
.btn.primary {
  background: #000; border-color: #000; color: #fff;
}
.btn.primary:active { background: #222; }
.hud {
  margin-top: 12px; text-align: center;
  color: #9aa1ad; font-size: .72rem; letter-spacing: .03em;
}
.status { min-height: 1.1em; margin-top: 8px; text-align: center; color: #6b7280; font-size: .8rem; }
.status.err { color: #c0261a; }


/* ── PHONES / TABLETS ─────────────────────────────────────────────── */
/* touch targets stay at 44px however tight the panel gets */
.btn, .modal-alt, .btn-go { min-height: 44px; }

@media (max-width: 560px) {
  #stage { gap: 8px; padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .dialog { padding: 13px 14px 11px; border-radius: 16px; }
  .dlg-head { font-size: .98rem; }
  .dlg-text { font-size: .82rem; margin-bottom: 8px; }
  .corner-count { font-size: 1.7rem; margin: 0 0 8px; }
  .ctl { margin: 8px 0; font-size: .85rem; }
  .btn { padding: 11px 6px; font-size: .85rem; }
  .dlg-row { margin-top: 7px; }
  .hud { margin-top: 8px; font-size: .66rem; }
  .status { font-size: .74rem; margin-top: 6px; }

  .modal { padding: 14px; }
  .modal-card { padding: 20px 16px 16px; border-radius: 18px; }
  .modal-head { font-size: 1.04rem; }
  .modal-sub { font-size: .78rem; margin-bottom: 14px; }
  .ex-grid { gap: 8px; }
  .ex figcaption { font-size: .68rem; }
  .ref-name { font-size: .86rem; }
  .ref-row { padding: 11px 13px 10px; }
  .ref-note { padding: 0 13px 10px; }
}

/* landscape phones: the panel scrolls instead of squeezing the photo away */
@media (max-height: 540px) and (max-aspect-ratio: 1/1) {
  .dialog { max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 480px) {
  .dialog { padding: 12px 14px 10px; }
  .dlg-text { display: none; }        /* landscape phone: keep the controls reachable */
}

/* iPad and larger tablets in landscape: a slightly roomier docked panel */
@media (min-aspect-ratio: 1/1) and (min-width: 1000px) {
  .dialog { width: 372px; }
}