/* A field notebook: quiet paper, clear actions, and a companion's short prompts. */
.escape-page {
  --escape-ink: #293c35;
  --escape-muted: #657267;
  --escape-line: #dfdfcf;
  --escape-gold-700: #805a17;
  --escape-focus: #176954;
}
body.escape-page { background: #e9eee6; }
.escape-app { background: #fffdf7; box-shadow: 0 0 40px #33452f0b; }
.haechi-prologue { background: #fff9ee; color: var(--escape-ink); }
.haechi-hero { padding: 26px 22px 22px; }
.haechi-hero-copy { margin-bottom: 20px; }
.haechi-overline { margin: 0 0 8px; color: #51725c; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.haechi-hero h1 { margin: 0; color: #293c35; font-family: 'Jua', 'Noto Sans KR', sans-serif; font-size: clamp(30px, 9vw, 42px); font-weight: 400; line-height: 1.25; word-break: keep-all; }
.haechi-hero h1 span { color: #a45231; white-space: nowrap; }
.haechi-tagline { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: #5f6b60; word-break: keep-all; }
.haechi-photo-frame { position: relative; padding: 7px 7px 0; background: #fff; border: 1px solid #dfdfcf; border-radius: 18px; }
.haechi-hero-art { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: contain; border-radius: 12px; }
.haechi-hello { position: relative; margin: 0; padding: 16px 10px 18px; font-size: 14px; line-height: 1.6; font-weight: 600; word-break: keep-all; }
.haechi-hello::before { content: ''; position: absolute; top: -9px; left: 34px; border: 10px solid transparent; border-top: 0; border-bottom-color: #fff; }
.haechi-hello span { display: inline-block; margin-right: 7px; color: #805a17; font-size: 12px; }
.haechi-hero-actions { margin-top: 20px; }
.haechi-primary { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border: 1px solid #205d49; border-radius: 16px; background: #286d55; color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; box-shadow: 0 4px 0 #194f3d; }
.haechi-primary:hover { background: #205c48; }
.haechi-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #194f3d; }
.haechi-hero-meta { margin: 14px 0 0; text-align: center; font-size: 12px; line-height: 1.6; color: #626e60; }
.haechi-invitation { padding: 28px 22px; border-top: 1px dashed #d6d6c5; }
.haechi-invitation h2 { margin: 0 0 10px; font-family: 'Jua', 'Noto Sans KR', sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; }
.haechi-invitation > p { margin: 0; font-size: 14px; line-height: 1.8; color: #5f6b60; word-break: keep-all; }
.haechi-play-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 22px 0 28px; padding: 0; list-style: none; }
.haechi-play-preview li { display: grid; justify-items: center; gap: 5px; text-align: center; }
.haechi-play-preview svg { width: 62px; height: 62px; color: #526548; }
.haechi-play-preview strong { font-size: 13px; }
.haechi-play-preview span { font-size: 11px; line-height: 1.5; color: #657267; }
.haechi-trial { border: 1px solid #d3dcc8; border-radius: 16px; background: #f0f5e9; overflow: hidden; }
.haechi-trial summary { padding: 17px 14px; min-height: 54px; cursor: pointer; font-size: 14px; font-weight: 700; }
.haechi-trial-label { float: right; color: #567045; font-size: 11px; line-height: 22px; }
.haechi-trial-body { border-top: 1px solid #d3dcc8; padding: 16px; font-size: 14px; line-height: 1.8; }
.haechi-trial-body > p { margin: 0 0 14px; }
.haechi-pattern { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 4px 20px; }
.haechi-pattern span { display: grid; place-items: center; min-width: 55px; padding: 7px; border-radius: 12px; background: #fff; border: 1px solid #d3dcc8; font-size: 13px; }
.haechi-pattern b { color: #976422; font-size: 30px; line-height: 1.4; }
.haechi-pattern i { font-style: normal; color: #69785f; }
.haechi-small-button { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid #b6c3a7; border-radius: 12px; background: #fff; color: #315c43; font-weight: 700; cursor: pointer; }
.haechi-trial-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 12px 0; }
.haechi-trial-choices button { min-height: 78px; border: 2px solid #bccaaa; border-radius: 14px; background: #fff; color: #765020; font-size: 30px; cursor: pointer; }
.haechi-trial-choices button span { display: block; color: #364d37; font-size: 13px; }
.haechi-trial-choices button:disabled { opacity: .65; cursor: default; }
.haechi-trial.is-solved { border-color: #6c9470; }
#haechiTrialStatus { margin-top: 14px; font-size: 13px; color: #46603d; }
#escapeEntry { scroll-margin-top: 80px; }
.escape-intro .escape-place-start-panel { margin: 22px; padding: 22px; border: 1px solid #d7decf; border-radius: 18px; background: #fff; }
.escape-intro .escape-place-start-panel strong { font-family: 'Jua', 'Noto Sans KR', sans-serif; font-size: 25px; font-weight: 400; }
.haechi-how { padding-left: 21px; margin: 16px 0 0; font-size: 14px; line-height: 2; color: #52634e; }
.escape-place-start-panel .escape-intro-actions { width: 100%; }
.escape-intro-actions .escape-btn { width: 100%; min-height: 54px; }
.escape-inline-icon { flex: 0 0 22px; vertical-align: middle; }
.escape-page .ms { max-width: 1.25em; overflow: hidden; }
.escape-page .escape-btn--primary { background: #286d55; border: 1px solid #205d49; color: #fff; border-radius: 14px; box-shadow: 0 3px 0 #194f3d; }
.escape-page .escape-btn--primary:hover { background: #205c48; }
.escape-play-header { padding: 22px 22px 16px; background: #fff9ee; color: #293c35; border: 0; border-radius: 0; box-shadow: none; }
.escape-play-heading h1 { font-family: 'Jua', 'Noto Sans KR', sans-serif; font-size: 27px; font-weight: 400; }
.escape-play .escape-kicker { margin-bottom: 6px; color: #637358; font-size: 12px; }
.escape-play-heading .escape-btn--text { color: #64725c; }
.escape-progress-row { grid-template-columns: auto minmax(0,1fr); gap: 16px; margin-top: 15px; }
.escape-progress-text { color: #58694d; font-size: 12px; }
.escape-progress { height: 8px; background: #e3e8d9; border: 0; }
.escape-progress-fill { background: #6a8b58; }
.haechi-collection { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; padding: 4px 22px 20px; background: #fff9ee; }
.haechi-collected-seal { display: grid; place-items: center; gap: 6px; color: #6e7765; font-size: 11px; }
.haechi-collected-seal b { display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px dashed #a7b397; border-radius: 12px; font-size: 14px; color: #758765; background: #fffdf7; }
.haechi-collected-seal.is-collected { color: #325d3e; }
.haechi-collected-seal.is-collected b { background: #e0edd8; color: #325d3e; border: 2px solid #6c905b; transform: rotate(-6deg); }
.haechi-route { margin: 0 0 12px; background: #f5f6ef; border-top: 1px solid #e4e5d7; border-bottom: 1px solid #e4e5d7; }
.haechi-route > summary { padding: 14px 22px; min-height: 48px; font-size: 12px; color: #5e6e52; cursor: pointer; }
.haechi-route .escape-rail-wrap { margin: 0; border: 0; border-radius: 0; }
.escape-stage { margin: 0 14px; border: 1px solid #dedfd1; border-radius: 18px; box-shadow: none; overflow: hidden; }
.escape-stage__header { padding: 20px 18px 12px; background: #fff; border: 0; }
.escape-stage-title { font-size: 24px; line-height: 1.4; color: #293c35; }
.escape-stage-eyebrow { font-size: 12px; color: #69805a; }
.haechi-companion { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 10px; margin: 0 16px 16px; padding: 14px; background: #f0f5e9; color: #364c37; border: 1px solid #dbe5ce; border-radius: 8px 18px 18px; }
.haechi-companion img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 55% 25%; }
.haechi-companion strong { color: #51743f; font-size: 12px; }
.haechi-companion p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; word-break: keep-all; }
.haechi-companion.is-reward { background: #fff4d7; border-color: #eadba8; }
.haechi-companion.is-reward strong { color: #805a17; }
.escape-question { padding: 0 18px 22px; }
.escape-page .ssam-act { margin-top: 0; border-radius: 16px; }
.escape-page .ssam-act-dial__btn { min-width: 48px; min-height: 44px; }
.escape-page .ssam-act-dial__check,.escape-page .ssam-act-quiz__next,.escape-page .ssam-act-quiz__choice { min-height: 48px; }
.escape-page .escape-answer-fallback__summary,.escape-page .escape-hint-button { min-height: 48px; }
.escape-prompt { font-size: 14px; line-height: 1.9; }
.haechi-context { margin: 18px 0; border: 1px solid #dedfd1; border-radius: 12px; background: #fafbf6; }
.haechi-context summary { min-height: 48px; padding: 14px; color: #526747; font-size: 13px; font-weight: 700; cursor: pointer; }
.haechi-context .escape-prompt { margin: 0; padding: 0 14px 14px; }
.haechi-context .escape-clue { margin: 0 14px 14px; padding: 12px; font-size: 13px; background: #eff2e7; }
.haechi-ending-art { display: block; width: 100%; height: auto; border: 6px solid #fff; border-radius: 18px; margin-bottom: 24px; }
.haechi-ending-quote { color: #41623c; font-size: 16px; line-height: 1.7; font-weight: 600; }
.escape-complete h1 { font-family: 'Jua', 'Noto Sans KR', sans-serif; color: #293c35; font-weight: 400; }
.haechi-credits { margin-top: 16px; text-align: left; color: #697363; }
.haechi-credits summary { min-height: 44px; padding: 12px 0; font-size: 12px; cursor: pointer; }
.haechi-credits .haechi-fiction { font-size: 11px; line-height: 1.8; font-weight: 400; }
.haechi-prologue a:focus-visible,.haechi-prologue button:focus-visible,.haechi-prologue summary:focus-visible,.haechi-route summary:focus-visible,.haechi-context summary:focus-visible { outline: 3px solid #176954; outline-offset: 3px; }
@media (max-width: 350px) {
  .haechi-hero,.haechi-invitation { padding-left: 16px; padding-right: 16px; }
  .haechi-hero h1 { font-size: 30px; }
  .haechi-hello { font-size: 13px; padding-left: 5px; padding-right: 5px; }
  .haechi-play-preview { gap: 5px; }
  .haechi-play-preview strong { font-size: 12px; }
  .haechi-trial-label { display: none; }
  .haechi-companion { grid-template-columns: 36px minmax(0,1fr); padding: 10px; margin-left: 12px; margin-right: 12px; }
  .haechi-companion img { width: 36px; height: 36px; }
  .escape-stage { margin: 0 8px; }
  .escape-question { padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .escape-page *, .escape-page *::before, .escape-page *::after { animation: none!important; transition: none!important; }
}

/* Large, annotated learning images sit beside the task, before the answer. */
.escape-learning { margin: 0 0 20px; padding: 0; border: 1px solid #d8dfd0; border-radius: 16px; overflow: hidden; background: #fffdf7; }
.escape-learning-heading { padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.escape-learning-heading h3 { margin: 0; color: #334b39; font-size: 15px; line-height: 1.5; word-break: keep-all; }
.escape-learning-heading > span { flex: 0 0 auto; font-size: 10px; color: #53664e; background: #edf3e6; padding: 4px 7px; border-radius: 6px; }
.escape-learning-figure { margin: 0; }
.escape-learning-scene { position: relative; }
.escape-learning-scene > img { display: block; width: 100%; height: auto; }
.escape-page .escape-learning-pin { position: absolute; transform: translate(-50%,-50%); width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #23694e; box-shadow: 0 2px 8px #142b3659; font-size: 16px; font-weight: 800; cursor: pointer; }
.escape-learning-pin[aria-pressed="true"] { background: #a64927; }
.escape-learning-figure figcaption { padding: 12px 14px 4px; font-size: 11px; line-height: 1.8; color: #66715e; word-break: keep-all; }
.escape-learning-credit { padding: 0 14px 10px; font-size: 10px; line-height: 1.6; }
.escape-learning a { color: #41643c; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.escape-learning-help { margin: 10px 12px 12px; padding: 12px; background: #eef4e7; border-radius: 12px; min-height: 92px; }
.escape-learning-help strong { font-size: 14px; color: #355535; }
.escape-learning-help p { margin: 5px 0 0; font-size: 13px; line-height: 1.8; color: #4b6146; word-break: keep-all; }
.escape-learning-record { border-top: 1px solid #dce4d4; }
.escape-learning-record summary { padding: 13px 14px; min-height: 48px; font-size: 12px; color: #52664a; cursor: pointer; }
.escape-learning-record p { margin: 0; padding: 0 14px 12px; font-size: 13px; line-height: 1.8; color: #46593e; }
.escape-learning-record ul { margin: 0 14px 14px; padding-left: 16px; font-size: 11px; line-height: 1.8; }
.escape-learning-record li + li { margin-top: 6px; }
.escape-learning-pin:focus-visible,.escape-learning-record summary:focus-visible { outline: 3px solid #124f9c; outline-offset: 3px; }
.escape-learning-scene.is-unavailable { padding: 14px; }
.escape-learning-scene.is-unavailable > p { font-size: 13px; line-height: 1.8; }
.escape-page .is-unavailable .escape-learning-pin { position: static; transform: none; width: 100%; border-radius: 10px; margin: 8px 0; }
.escape-learning-enlarge { display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-bottom: 1px solid #dce4d4; background: #f4f7ee; color: #365f42; font-size: 12px; font-weight: 700; cursor: pointer; }
.escape-learning-dialog { width: min(960px,94vw); max-width: 94vw; max-height: 92dvh; padding: 16px; border: 1px solid #d2ddcb; border-radius: 18px; color: #334b39; background: #fffdf7; }
.escape-learning-dialog::backdrop { background: #14281fcc; }
.escape-learning-dialog > img { display: block; width: 100%; height: auto; }
.escape-learning-dialog h3 { font-size: 17px; line-height: 1.6; margin: 14px 0; }
.escape-learning-dialog p,.escape-learning-dialog a { font-size: 12px; line-height: 1.8; }
.escape-learning-dialog > button { position: sticky; top: 0; border: 1px solid #c4d3b9; border-radius: 10px; }
.escape-learning-enlarge:focus-visible { outline: 3px solid #124f9c; outline-offset: -3px; }