/* Warm, quiet visual language for a child-friendly Korean museum activity. */
:root {
  color-scheme: light;
  --cream: #fff8ee;
  --cream-deep: #f4e9d8;
  --paper: #fffdf9;
  --green: #285d52;
  --green-dark: #1f493f;
  --green-soft: #e7f0e9;
  --mint: #e6f1e8;
  --ink: #26362f;
  --muted: #64716a;
  --line: #e7ddce;
  --sun: #e8ae56;
  --coral: #c96d52;
  --shadow: 0 12px 32px rgb(68 54 34 / 8%);
  --radius-card: 24px;
  --radius-control: 16px;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink);
  background: var(--cream);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--cream);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 50% -18%, rgb(255 255 255 / 90%), transparent 62%),
    var(--cream);
}

button, input, select, textarea { font: inherit; }

button {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

button:enabled { cursor: pointer; }

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

img { display: block; max-width: 100%; }

h1, h2, p { margin-top: 0; }

h1, h2 {
  color: var(--green-dark);
  letter-spacing: -.035em;
  line-height: 1.25;
}

h1 { margin-bottom: 10px; font-size: clamp(1.75rem, 7vw, 2.35rem); }
h2 { margin-bottom: 10px; font-size: clamp(1.25rem, 5vw, 1.65rem); }
p { line-height: 1.7; }

:focus-visible {
  outline: 3px solid #d58c36;
  outline-offset: 3px;
}

.brand, header {
  width: min(100% - 32px, 760px);
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0 14px;
  color: var(--green);
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: -.03em;
}

.brand::before {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d7e4d7;
  border-radius: 13px;
  background: var(--mint);
  content: "모";
  font-size: 1.05rem;
}

.eyebrow, .step-label {
  margin: 0 0 8px;
  color: var(--green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
}

main#app {
  width: min(100% - 24px, 760px);
  margin: 0 auto;
  padding-bottom: 28px;
}

.card {
  overflow: hidden;
  border: 1px solid rgb(216 202 180 / 66%);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.card > :not(.hero):not(.room) { margin-inline: 20px; }
.card > .hero, .card > .room { margin-inline: 0; }
.card > .intro-board, .card > .toolbar, .card > .progress { margin-inline: 18px; }

.intro-board {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 21px 0 17px;
}

.intro-board > :first-child { min-width: 0; flex: 1; }
.intro-board p:last-child { margin-bottom: 0; color: var(--muted); }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.toolbar > * { margin: 0; }
.intro { color: var(--muted); font-size: .97rem; }

.hero {
  position: relative;
  display: grid;
  min-height: 210px;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 110%, #e8c995 0 17%, transparent 18%),
    linear-gradient(160deg, #edf3e8 0%, #f8efdd 65%, #ecd8b8 100%);
}

.hero img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.hero:not(:has(img))::after {
  width: 112px;
  height: 112px;
  border: 12px solid rgb(255 255 255 / 65%);
  border-radius: 50%;
  background: linear-gradient(145deg, #e7bd70, #c8894d);
  box-shadow: 0 12px 26px rgb(91 65 31 / 14%), inset 0 0 0 2px rgb(148 99 48 / 18%);
  content: "";
}

.artifact { padding: 18px 20px 20px; }
.artifact h2 { margin-bottom: 7px; }
.artifact p:last-child { margin-bottom: 0; }
.artifact-note { color: var(--muted); font-size: .91rem; }

.room {
  position: relative;
  min-height: 254px;
  padding: 30px 18px 22px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--cream-deep);
  background-image:
    linear-gradient(90deg, transparent 49.5%, rgb(154 125 87 / 7%) 50%, transparent 50.5%),
    linear-gradient(180deg, rgb(255 255 255 / 18%), transparent 58%);
}

.room.mint { background-color: #e5efe4; }
.room.cream { background-color: #f5e9d6; }

.room::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 13px;
  background: rgb(255 255 255 / 34%);
  content: "";
}

.slots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  max-width: 590px;
  margin: 0 auto;
  padding: 0 2px 14px;
}

.slots::before {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 13px;
  border: 1px solid #9d7147;
  border-radius: 5px;
  background: linear-gradient(#d3a36d, #b77d4d);
  box-shadow: 0 9px 0 #986641, 0 13px 12px rgb(71 49 30 / 14%);
  content: "";
}

.slot {
  position: relative;
  display: grid;
  min-height: 116px;
  min-width: 0;
  padding: 10px 7px 12px;
  place-items: center;
  border: 2px dashed rgb(111 91 66 / 30%);
  border-radius: 14px 14px 8px 8px;
  background: rgb(255 253 248 / 45%);
  color: #5b625a;
  text-align: center;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

button.slot { width: 100%; min-height: 116px; font-weight: 750; }
.slot.selected, .slot[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--green);
  background: #fffdf7;
  color: var(--green-dark);
  box-shadow: 0 0 0 3px rgb(40 93 82 / 12%);
}

button.slot:hover { transform: translateY(-3px); }
.slot img { max-height: 70px; margin: auto; object-fit: contain; }
.slot .tag { margin-top: 4px; }

.plant {
  position: absolute;
  right: 9px;
  bottom: 27px;
  width: 41px;
  height: 69px;
  pointer-events: none;
}

.plant::before {
  position: absolute;
  right: 5px;
  bottom: 0;
  left: 5px;
  height: 26px;
  border-radius: 4px 4px 10px 10px;
  background: linear-gradient(90deg, #bd794a, #dfab6e 55%, #b86f43);
  content: "";
}

.plant::after {
  position: absolute;
  top: 0;
  left: 9px;
  width: 24px;
  height: 48px;
  background:
    radial-gradient(ellipse at 48% 18%, #527d59 0 23%, transparent 25%),
    radial-gradient(ellipse at 15% 46%, #6f986b 0 27%, transparent 29%),
    radial-gradient(ellipse at 83% 48%, #789c70 0 27%, transparent 29%),
    radial-gradient(ellipse at 38% 75%, #5d855f 0 28%, transparent 30%);
  content: "";
}

.shelf {
  position: absolute;
  right: 10px;
  bottom: 15px;
  width: 13px;
  height: 145px;
  border-radius: 4px;
  background: linear-gradient(90deg, #9b7048, #c08b57);
  box-shadow: -3px 0 rgb(111 77 47 / 11%);
}

.shelf::before, .shelf::after {
  position: absolute;
  right: 0;
  width: 74px;
  height: 8px;
  border-radius: 3px;
  background: #ba8756;
  content: "";
}

.shelf::before { top: 25px; }
.shelf::after { top: 87px; }
.moa { position: absolute; right: 39px; bottom: 39px; z-index: 1; width: 22px; height: 34px; border-radius: 12px 12px 5px 5px; background: #e7bb72; box-shadow: 0 0 0 3px rgb(255 248 238 / 74%); }
.moa::before { position: absolute; top: -10px; left: 5px; width: 12px; height: 12px; border-radius: 50%; background: #e7bb72; content: ""; }

.actions, .choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px 0 20px;
}

.actions { justify-content: flex-end; }
.choices { justify-content: flex-start; }

.primary, .secondary, .small {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: 11px 18px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.primary { background: var(--green); color: white; box-shadow: 0 4px 10px rgb(40 93 82 / 16%); }
.primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.secondary, .small { border-color: #d7e3d8; background: #f8fbf7; color: var(--green-dark); }
.secondary:hover, .small:hover { border-color: #a8c3ad; background: var(--green-soft); }
.small { min-height: 48px; padding-inline: 13px; font-size: .9rem; }

.choices > button[aria-pressed="true"], .choices > button.selected {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-dark);
}

.clues { display: grid; gap: 9px; padding: 0 0 16px; }
.clue { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); }
.clue::before { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f7ebd8; color: #9b6b36; content: "?"; font-size: .82rem; font-weight: 900; }
.clue p { margin: 0; }

.feedback {
  margin-block: 0 18px;
  border-radius: 14px;
  padding: 12px 14px;
  background: #edf4eb;
  color: var(--green-dark);
  font-weight: 700;
  line-height: 1.55;
}

.feedback:empty { display: none; }
.feedback[data-state="error"], .feedback.error { background: #fff0e9; color: #8d402c; }
.feedback[data-state="success"], .feedback.success { background: #e8f2e8; color: #285d43; }

.tag {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid #d8e5d9;
  border-radius: 999px;
  padding: 3px 9px;
  background: #f1f6ef;
  color: var(--green);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.25;
}

.progress { padding: 0 0 18px; }
.progress progress { display: block; width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 999px; background: #ede7dc; }
.progress progress::-webkit-progress-bar { border-radius: 999px; background: #ede7dc; }
.progress progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #477d67, #8bad72); }
.progress progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #477d67, #8bad72); }
.progress p { margin: 7px 0 0; color: var(--muted); font-size: .82rem; }

footer { width: min(100% - 32px, 760px); margin: 0 auto; padding: 0 0 28px; }
.notice { margin: 0; color: #788078; font-size: .82rem; line-height: 1.6; text-align: center; }

dialog {
  width: min(100% - 28px, 460px);
  max-width: 460px;
  max-height: min(88vh, 760px);
  overflow: auto;
  border: 1px solid #e3d7c6;
  border-radius: 24px;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 80px rgb(40 34 24 / 24%);
}

dialog::backdrop { background: rgb(29 40 34 / 46%); backdrop-filter: blur(3px); }
.modal-content { padding: 24px; }
.modal-content h1, .modal-content h2 { margin-bottom: 10px; }
.modal-content p { color: var(--muted); }
.modal-content .actions { padding-bottom: 0; }

@media (min-width: 600px) {
  .brand { padding-top: 26px; }
  main#app { width: min(100% - 40px, 760px); }
  .card > :not(.hero):not(.room) { margin-inline: 28px; }
  .card > .intro-board, .card > .toolbar, .card > .progress { margin-inline: 26px; }
  .intro-board { padding-top: 26px; }
  .hero { min-height: 280px; }
  .room { min-height: 310px; padding: 46px 34px 27px; }
  .slots { gap: 18px; }
  .slot, button.slot { min-height: 142px; }
}

@media (max-width: 420px) {
  .brand { padding-top: 15px; }
  main#app { width: calc(100% - 16px); }
  .card { border-radius: 20px; }
  .card > :not(.hero):not(.room) { margin-inline: 16px; }
  .card > .intro-board, .card > .toolbar, .card > .progress { margin-inline: 15px; }
  .room { min-height: 232px; padding: 24px 12px 20px; }
  .slots { gap: 6px; }
  .slot, button.slot { min-height: 104px; padding-inline: 4px; font-size: .87rem; }
  .slot img { max-height: 59px; }
  .plant { transform: scale(.82); transform-origin: bottom right; }
  .actions > button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Final integration details */
body { font-size:18px; }
.room-label { display:block; text-align:center; font-size:12px; letter-spacing:.15em; padding:20px 8px; }
.room .slots { display:flex; align-items:end; gap:10px; padding:35px 12px 25px; }
.room .slot { flex:1; min-width:0; }
.room .slot img { width:100%; height:100px; object-fit:contain; mix-blend-mode:multiply; }
.room .slot button { padding:8px 3px; width:100%; }
.empty { display:block; height:100px; padding-top:35px; color:#77644d; }
.clues button { flex:1; }
.clues svg { display:block; width:80px; height:75px; margin:auto; }
.notice:empty,.feedback:empty { display:none; }
.modal-content a { display:inline-block; min-height:48px; overflow-wrap:anywhere; }
.reduce-motion * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} }
.moa { position:static; display:flex; gap:12px; align-items:start; width:auto; height:auto; margin:20px 0; padding:18px; border-radius:20px; background:#e7f0e9; box-shadow:none; }
.moa::before { display:none; }
.moa > span { color:#285d52; flex:none; }
.moa p { margin:0; }
.room .shelf { position:static; width:100%; height:10px; margin:8px 0; background:linear-gradient(#d3a36d,#b77d4d); box-shadow:0 6px 0 #986641; }
.room .shelf::before,.room .shelf::after { display:none; }
.room .plant { font-size:0; }
.notice { font-size:16px; color:#48564d; max-width:760px; margin:12px auto; padding:0 16px; }
button { min-height:48px; min-width:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #c9d6cb; border-radius:14px; padding:12px 16px; background:#fffdf9; color:#285d52; font-size:18px; font-weight:650; line-height:1.4; }
button:hover:enabled { background:#e7f0e9; }
button.primary:hover { background:#1f493f; }
header { width:min(calc(100% - 32px),760px); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
.brand { width:auto; margin:0; padding:0; display:block; text-decoration:none; }
.brand::before { display:none; }
.brand .eyebrow { display:block; font-size:12px; letter-spacing:.08em; margin-top:4px; }
main#app { width:min(calc(100% - 32px),760px); }
footer { width:min(calc(100% - 32px),760px); margin:24px auto; font-size:16px; color:#48564d; line-height:1.6; }
footer button { margin-top:12px; }
.artifact { border-radius:22px; padding:16px; background:#eee8dc; }
.artifact img { width:100%; max-height:350px; object-fit:contain; }
.artifact button { margin-top:12px; }
.intro-board { display:block; border:1px solid #d3c4ad; border-radius:18px; padding:20px; background:#fffdf9; margin:20px 0; }
.room { border-radius:24px; }
.clues { grid-template-columns:repeat(3,minmax(0,1fr)); }
.clues button { display:flex; flex-direction:column; padding:12px 4px; font-size:16px; }
.feedback:not(:empty) { padding:16px; background:#e7f0e9; border-left:4px solid #285d52; border-radius:12px; margin-top:16px; }