:root {
  color-scheme: light;
  --ink: #241f2d;
  --muted: #6f6878;
  --cream: #fff8ec;
  --panel: rgba(255, 250, 239, 0.88);
  --panel-strong: rgba(255, 253, 248, 0.96);
  --line: rgba(255, 255, 255, 0.84);
  --orange: #ff9700;
  --orange-deep: #e77700;
  --purple: #8b3f95;
  --purple-dark: #56225f;
  --shadow: 0 24px 70px rgba(22, 18, 28, 0.32);
  --dialogue-opacity: .88;
  --line-font-size: clamp(29px, 3vw, 43px);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: "Pretendard", "Segoe UI", system-ui, sans-serif;
  background: #120f16;
}
button { font: inherit; }
h1, h2, p, figure { margin: 0; }

.app.vn-layout,
.vn-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.vn-stage { isolation: isolate; }

.scene-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #181018 url("assets/bg-agency-store.png") center / cover no-repeat;
  transform: scale(1.015);
}

.scene-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 24%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(90deg, rgba(9,8,13,.28), transparent 18%, transparent 72%, rgba(9,8,13,.35)),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 42%, rgba(30,16,10,.52));
  pointer-events: none;
}

.scene-backdrop::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(180deg, transparent, rgba(255, 154, 32, 0.24) 42%, rgba(45, 20, 8, 0.58));
  pointer-events: none;
}

.store-lights,
.shelf,
.floor-glow,
.support-sprite { display: none; }

.vn-stage.loop .scene-backdrop { filter: hue-rotate(18deg) saturate(.86) brightness(.9); }
.vn-stage.ending .scene-backdrop { filter: saturate(1.08) brightness(1.04); }

.scene-title {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 7;
  max-width: min(650px, calc(100vw - 116px));
  padding: 13px 17px 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,.42);
  background: linear-gradient(90deg, rgba(20,18,29,.62), rgba(20,18,29,.25));
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  backdrop-filter: blur(10px) saturate(1.1);
}
.eyebrow {
  margin-bottom: 4px;
  color: rgba(255, 221, 154, 0.98);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(22px, 2.15vw, 36px);
  line-height: 1.05;
  letter-spacing: .01em;
  white-space: nowrap;
}
.chapter { margin-top: 7px; font-size: 13px; font-weight: 780; opacity: .94; }

.character-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.event-cg {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: 4;
  width: min(78vw, 1320px);
  max-height: min(68vh, 720px);
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 10px;
  background: rgba(20,18,26,.44);
  box-shadow: 0 34px 86px rgba(9,8,15,.44), 0 0 0 1px rgba(20,18,26,.18);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.985);
  transition: opacity .24s ease, transform .24s ease;
  pointer-events: none;
}
.event-cg.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.event-cg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vn-stage.has-cg .main-sprite { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.98); }
.vn-stage.has-cg .scene-backdrop { filter: saturate(.95) brightness(.72) blur(1px); }

.main-sprite {
  position: absolute;
  left: 50%;
  bottom: 2.8%;
  width: auto;
  height: min(104vh, 1180px);
  max-width: none;
  min-width: 0;
  margin: 0;
  transform: translateX(-50%);
  overflow: visible;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 40px 38px rgba(22, 15, 25, .44));
  transition: transform .24s ease, opacity .24s ease, filter .24s ease;
}
.main-sprite::before {
  content: "";
  position: absolute;
  inset: 2% -18% -10%;
  z-index: -1;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 231, 167, .38), transparent 62%);
  filter: blur(12px);
}
.main-sprite img {
  display: block;
  width: 100%;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.main-sprite figcaption {
  display: none;
}
.main-sprite.soft { transform: translateX(-50%) translateY(4px) scale(1.012); }
.main-sprite.hidden-art { opacity: .2; }

.round-control {
  position: absolute;
  right: 30px;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 50%;
  color: var(--orange);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 28px rgba(0,0,0,.26);
  font-size: 30px;
  font-weight: 950;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.menu-button { top: 42px; }
.auto-button { top: 138px; color: white; background: rgba(42,42,48,.92); font-size: 22px; }
.auto-button.active { outline: 3px solid rgba(255,151,0,.55); }

.quick-controls {
  position: absolute;
  right: 28px;
  bottom: 42px;
  z-index: 11;
  display: grid;
  gap: 11px;
  min-width: 228px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.28);
  color: white;
  background: linear-gradient(180deg, rgba(28,24,32,.38), rgba(28,24,32,.18));
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  text-shadow: 0 2px 7px rgba(0,0,0,.58);
  backdrop-filter: blur(7px);
}
.quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  color: white;
  background: transparent;
  font-size: 15px;
  font-weight: 920;
  text-align: left;
  cursor: pointer;
}
.quick-action span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #4d4c55;
  background: rgba(255,255,255,.96);
  text-shadow: none;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.quick-action:hover { transform: translateX(-2px); }
.quick-action[hidden] { display: none; }

.dialogue {
  position: absolute;
  left: clamp(62px, 5vw, 96px);
  right: clamp(286px, 17vw, 330px);
  bottom: clamp(24px, 3.3vh, 42px);
  z-index: 10;
  min-height: 224px;
  padding: 52px 68px 38px 78px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 0 28px 28px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,var(--dialogue-opacity)), rgba(255,249,238,calc(var(--dialogue-opacity) - .06))),
    linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.25));
  box-shadow:
    0 26px 68px rgba(24,14,12,.32),
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(146,90,36,.08);
  backdrop-filter: blur(15px) saturate(1.12);
}
.dialogue::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 38px;
  height: 38px;
  border-bottom-left-radius: 32px;
  background: inherit;
  transform: translateX(-5px) skewX(-18deg);
}
.dialogue::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 0 20px 20px 20px;
  border: 1px solid rgba(255,255,255,.42);
  pointer-events: none;
}
.nameplate {
  position: absolute;
  left: 32px;
  top: -38px;
  display: flex;
  align-items: center;
  min-width: 264px;
  height: 74px;
  padding: 0 30px 0 78px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.94);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,233,.96));
  box-shadow: 0 12px 30px rgba(31,22,17,.2);
}
.avatar-dot {
  position: absolute;
  left: 18px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: white;
  background: radial-gradient(circle at 50% 44%, #ffe378 0 20%, #ffad12 22% 62%, #f47c00 64% 100%);
  font-size: 0;
  line-height: 1;
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.72), 0 6px 18px rgba(225,115,0,.26);
}
.avatar-dot::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 13px 0 8px white;
  transform: translateY(-5px) scale(.7);
}
.speaker {
  color: #4f4a55;
  font-size: 28px;
  font-weight: 950;
}
.line-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.speech-dot {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: 5px;
  border-radius: 50%;
  color: white;
  background: linear-gradient(180deg, rgba(160,158,166,.7), rgba(125,119,133,.58));
  font-size: 24px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
#line {
  min-height: 84px;
  color: var(--purple-dark);
  font-size: var(--line-font-size);
  line-height: 1.34;
  font-weight: 950;
  letter-spacing: .005em;
  word-break: keep-all;
  white-space: pre-line;
  text-shadow:
    0 1px 0 rgba(255,255,255,.88),
    0 3px 12px rgba(255,245,230,.68);
}
.choices {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.choice {
  padding: 13px 15px;
  border: 1px solid rgba(255,147,0,.48);
  border-radius: 14px;
  color: #4b3527;
  background: linear-gradient(180deg, rgba(255,250,241,.96), rgba(255,237,210,.91));
  box-shadow: 0 10px 22px rgba(130,70,0,.14), inset 0 1px 0 rgba(255,255,255,.82);
  text-align: left;
  font-weight: 880;
  cursor: pointer;
}
.choice:hover { transform: translateY(-1px); border-color: rgba(255,147,0,.82); }
.choice small {
  display: block;
  margin-top: 4px;
  color: #796459;
  font-size: 13px;
  font-weight: 720;
}
.loading-ring {
  position: absolute;
  right: 32px;
  bottom: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 7px dotted rgba(255,147,0,.58);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.drawer {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 30;
  width: min(430px, 92vw);
  height: 100%;
  overflow: auto;
  padding: 18px;
  background: rgba(255,255,255,.95);
  box-shadow: -18px 0 45px rgba(0,0,0,.18);
  transform: translateX(104%);
  transition: transform .2s ease;
  backdrop-filter: blur(12px);
}
.app.menu-open .drawer { transform: translateX(0); }
.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.panel {
  margin-bottom: 14px;
  padding: 15px;
  border: 1px solid #e6e8ef;
  border-radius: 8px;
  background: rgba(255,255,255,.9);
}
.drawer h2, .panel h2 { margin-bottom: 12px; font-size: 16px; }
.ghost {
  padding: 9px 12px;
  border: 1px solid #e0e3ea;
  border-radius: 8px;
  color: var(--ink);
  background: white;
  font-weight: 820;
  cursor: pointer;
}
.stats { display: grid; gap: 10px; }
.stat-row { display: grid; gap: 5px; }
.stat-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 820; }
.meter { height: 9px; overflow: hidden; border-radius: 999px; background: #edf0f6; }
.meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #75d8c7, #ffd84d, #ff5f7e); transition: width .35s ease; }
.phone-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.tab { padding: 9px; border: 0; border-radius: 8px; color: var(--muted); background: #f0f4f8; font-weight: 830; cursor: pointer; }
.tab.active { color: white; background: var(--ink); }
.phone-view { display: none; max-height: 330px; overflow: auto; padding-right: 3px; }
.phone-view.active { display: grid; gap: 9px; }
.bubble, .photo, .log-item, .ending-item {
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid #e5e9f0;
  background: #fff;
  font-size: 14px;
  line-height: 1.45;
}
.bubble.from-seoa { border-color: #ffc9d2; background: #fff6f8; }
.bubble.system { border-color: #d8e7ff; background: #f5f9ff; color: #3f587d; }
.photo { display: grid; gap: 7px; }
.photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid #f0d8df;
  background: #f7f2f5;
}
.photo strong { color: #d8345a; }

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.reward-progress {
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff9b20, #d8345a);
  font-size: 12px;
  font-weight: 900;
}
.reward-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 3px;
}
.reward-card {
  position: relative;
  display: grid;
  gap: 6px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid rgba(255,147,0,.28);
  border-radius: 8px;
  color: #4d3540;
  background: linear-gradient(180deg, rgba(255,252,247,.98), rgba(255,239,218,.9));
  box-shadow: 0 10px 24px rgba(120,60,0,.12);
  text-decoration: none;
}
.reward-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px;
  background: #2b2931;
}
.reward-card.locked {
  color: #8a7c82;
  background: linear-gradient(180deg, rgba(244,241,237,.92), rgba(226,219,213,.82));
  box-shadow: none;
}
.reward-locked-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  color: rgba(255,255,255,.86);
  background: linear-gradient(135deg, rgba(80,70,82,.72), rgba(38,34,42,.86));
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}
.reward-card strong {
  color: #d8345a;
  font-size: 13px;
}
.reward-card span {
  font-size: 12px;
  line-height: 1.35;
}

.ending-list { display: grid; gap: 8px; }
.ending-item { color: var(--muted); }
.ending-item.unlocked { color: var(--ink); border-color: #bbe9dc; background: #f2fffb; font-weight: 760; }
.hint { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 50;
  max-width: min(420px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: 8px;
  color: white;
  background: rgba(34,36,42,.94);
  box-shadow: 0 14px 40px rgba(0,0,0,.24);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  text-align: center;
  font-weight: 760;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.app.ui-hidden .scene-title,
.app.ui-hidden .dialogue,
.app.ui-hidden .quick-controls,
.app.ui-hidden .round-control { opacity: 0; pointer-events: none; }
.scene-title, .dialogue, .quick-controls, .round-control { transition: opacity .18s ease; }
.app.ui-hidden { cursor: pointer; }

@media (max-width: 1100px) {
  .main-sprite { height: min(94vh, 920px); width: auto; min-width: 0; bottom: 7%; }
  .dialogue { right: clamp(230px, 19vw, 260px); padding-right: 52px; }
  .quick-controls { right: 18px; min-width: 200px; }
  .quick-action { font-size: 13px; }
}

@media (max-width: 760px) {
  .scene-title { top: 12px; left: 12px; max-width: calc(100% - 94px); }
  h1 { white-space: normal; }
  .round-control { right: 14px; width: 54px; height: 54px; border-width: 4px; }
  .menu-button { top: 14px; }
  .auto-button { top: 82px; }
  .main-sprite { left: 66%; height: min(82vh, 720px); width: auto; min-width: 0; bottom: 17%; }
  .event-cg { top: 38%; width: min(94vw, 760px); max-height: 50vh; border-radius: 8px; }
  .dialogue { left: 3%; right: 3%; bottom: 3%; min-height: 212px; padding: 42px 22px 30px 24px; }
  .nameplate { left: 18px; min-width: 210px; height: 60px; padding-left: 62px; top: -30px; }
  .avatar-dot { width: 38px; height: 38px; }
  .speaker { font-size: 22px; }
  .line-row { grid-template-columns: 34px 1fr; gap: 10px; }
  .speech-dot { width: 32px; height: 32px; font-size: 18px; }
  #line { font-size: min(var(--line-font-size), 31px); }
  .choices { grid-template-columns: 1fr; }
  .quick-controls { display: none; }
}










.scene-backdrop[data-location="hall"] { filter: saturate(1.08) contrast(1.03) brightness(1.02); }
.scene-backdrop[data-location="cafe"] { filter: saturate(1.12) brightness(1.03); }
.scene-backdrop[data-location="rooftop"] { filter: saturate(1.2) contrast(1.02); }
.scene-backdrop[data-location="archive"] { filter: saturate(.92) contrast(1.08) brightness(.94); }
.scene-backdrop[data-location="seaside"] { filter: saturate(1.12) brightness(1.04); }
.scene-backdrop[data-location="festival"],
.scene-backdrop[data-location="stage"] { filter: saturate(1.18) contrast(1.05) brightness(.98); }
.scene-backdrop[data-location="apartment"] { filter: saturate(.92) brightness(.82) hue-rotate(-8deg); }
.vn-stage.memory .scene-backdrop::before {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.23), transparent 28%),
    linear-gradient(90deg, rgba(50,18,85,.38), transparent 22%, transparent 70%, rgba(10,25,60,.42)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px);
}
.vn-stage.memory .dialogue { box-shadow: 0 26px 78px rgba(105,55,150,.38), inset 0 1px 0 rgba(255,255,255,.86); }


.backlog-list,
.save-slots {
  display: grid;
  gap: 10px;
  max-height: 310px;
  overflow: auto;
  padding-right: 4px;
}
.backlog-item,
.save-slot {
  padding: 12px 13px;
  border-radius: 8px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.72);
}
.backlog-item small,
.save-slot small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.backlog-item strong,
.save-slot strong {
  display: block;
  margin: 2px 0 4px;
  color: var(--purple-dark);
  font-size: 13px;
}
.backlog-item span,
.save-slot span {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}
.empty-note {
  padding: 13px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255,255,255,.5);
  font-size: 13px;
}
.slot-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.slot-actions button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #a85ab1, #73337d);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.slot-actions button[disabled] {
  cursor: default;
  opacity: .45;
}
.settings-panel label {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: var(--purple-dark);
  font-size: 13px;
  font-weight: 900;
}
.settings-panel input[type="range"] {
  width: 100%;
  accent-color: var(--orange);
}

@media (max-width: 760px) {
  .reward-gallery { grid-template-columns: 1fr; max-height: 260px; }
}