/*
 * 화면 흐름 UI (js/ui/app·screens·settings·teacher·notebook*). 토큰은 css/base.css.
 * - 글자 크기는 모두 calc(… * var(--fs)) — 설정의 글자 크기(1 / 1.25 / 1.5)와 교사 크게 보기(×1.4)가 함께 적용된다.
 * - 누르는 것은 44px 이상, 가로 넘침 없음(줄 바꿈), 고른 값은 색과 기호(●/○)로 함께 보인다.
 */
#nm-screens {
  position: absolute; inset: 0; z-index: 5; overflow-x: hidden; overflow-y: auto;
  background: var(--paper); color: var(--ink);
  font-size: calc(16px * var(--fs, 1)); line-height: 1.55;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#nm-screens[hidden], #nm-toolbar[hidden], .nm-modal-host[hidden] { display: none; }
#nm-screens *, .nm-modal *, #nm-toolbar * { box-sizing: border-box; }
.nm-screen-inner {
  width: 100%; max-width: 980px; margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
#nm-screens, .nm-modal { word-break: keep-all; overflow-wrap: anywhere; }

/* 글자 */
.nm-heading { font-size: calc(24px * var(--fs, 1)); margin: .6em 0 .4em; line-height: 1.3; }
.nm-heading:focus { outline: none; }
.nm-help { margin: .3em 0 .8em; color: #4a3f37; }
.nm-warn { font-weight: 700; color: var(--seal); }
.nm-warn::before { content: '※ '; }
.nm-error { min-height: 1.4em; margin: .4em 0; color: var(--seal); font-weight: 700; }
.nm-error:not(:empty)::before { content: '! '; }
.nm-empty { color: #6b5d52; margin: .2em 0; }
.nm-center { text-align: center; }
.nm-step { margin: 0; color: #6b5d52; font-size: calc(14px * var(--fs, 1)); }
.nm-label { display: block; font-weight: 700; margin: .8em 0 .3em; }
.nm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.nm-yet { font-family: var(--font-yet); font-feature-settings: 'ljmo', 'vjmo', 'tjmo'; }

/* 단추 */
.nm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-width: 48px; min-height: 48px; max-width: 100%; padding: .45em 1em;
  font: inherit; font-size: calc(17px * var(--fs, 1)); line-height: 1.3; text-align: center; text-decoration: none;
  color: var(--ink); background: #fffaf0; border: 2px solid var(--ink); border-radius: 12px; cursor: pointer;
  word-break: keep-all; overflow-wrap: anywhere;
}
.nm-btn:hover { background: #fff3dc; }
.nm-btn:focus-visible { outline: 4px solid #ffd76a; outline-offset: 2px; }
.nm-btn[disabled] { opacity: .5; cursor: not-allowed; }
.nm-btn-primary { color: var(--paper); background: var(--seal); border-color: var(--seal); }
.nm-btn-primary:hover { background: #9e2a23; }
.nm-btn-danger { color: var(--seal); border-color: var(--seal); }
.nm-btn-big { min-height: 56px; font-size: calc(20px * var(--fs, 1)); width: 100%; }
.nm-btn[aria-pressed="true"] { color: #fff; background: var(--interp); border-color: var(--interp); }
.nm-btn[aria-pressed="true"]::before { content: '●'; }
.nm-seg-btn[aria-pressed="false"]::before { content: '○'; }
.nm-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: .8em 0; }
.nm-row-end { justify-content: flex-end; }
.nm-stack { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; margin: 1.4em auto 0; }

/* 첫 화면 — 노을 진 도성 그림 위 먹빛 가림막, 한지색 큰 제목에 붉은 原文 낙관을 찍는다.
   넓은 화면: 선배 통사가 가리키는 오른쪽(도성 쪽)에 글 / 세로 화면: 그림은 위, 글은 아래.
   움직임은 한 번의 드러남(그림 → 제목 → 낙관 찍힘 → 단추)과 천천히 떠오르는 옛 글자 조각뿐. */
#nm-screens[data-screen="title"] {
  --tt-ink: #17120d; --tt-paper: #f4ead4; --tt-dim: #e2d3b4; --tt-glow: #f6c56a;
  background: var(--tt-ink); color: var(--tt-paper);
}
.nm-title-art, .nm-title-scrim, .nm-title-motes {
  position: fixed; left: 0; top: 0; width: 100%; height: var(--nm-app-h, 100%); pointer-events: none;
}
.nm-title-art {
  background: #2a1f1a var(--nm-art-wide, none) 50% 50% / cover no-repeat;
  animation: nm-tt-art 1.8s cubic-bezier(.2, .7, .2, 1) both;
}
.nm-title-scrim {
  /* 그림의 오른쪽 위 하늘이 비어 있다 — 글 뒤만 먹빛으로 눌러 읽히게 하고 나머지는 그림 그대로 */
  background:
    radial-gradient(ellipse 62% 80% at 80% 34%, rgba(23, 18, 13, .7), rgba(23, 18, 13, .35) 55%, rgba(23, 18, 13, 0) 78%),
    linear-gradient(0deg, rgba(23, 18, 13, .4), rgba(23, 18, 13, 0) 30%);
}
.nm-title-motes { overflow: hidden; }
.nm-title-mote {
  position: absolute; left: var(--x); top: var(--y); opacity: 0;
  font: 400 var(--sz) / 1 var(--font-yet); color: var(--tt-glow);
  text-shadow: 0 0 6px rgba(255, 196, 96, .95), 0 0 18px rgba(255, 150, 60, .55);
  animation: nm-tt-mote var(--dur) linear var(--delay) infinite;
}
@keyframes nm-tt-art { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes nm-tt-mote {
  0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
  15% { opacity: .9; }
  70% { opacity: .55; }
  100% { opacity: 0; transform: translate(var(--dx), -42vh) rotate(10deg); }
}
@keyframes nm-tt-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nm-tt-stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-14deg); } 60% { opacity: 1; transform: scale(.94) rotate(-4deg); } 100% { opacity: 1; transform: rotate(-6deg); } }
.nm-reduced-motion .nm-title-motes { display: none; }

.nm-title-screen {
  position: relative; z-index: 1; min-height: 100%; max-width: none;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;
  padding-top: max(9vh, env(safe-area-inset-top)); padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(6vw, env(safe-area-inset-right));
}
.nm-title-card { width: min(500px, 100%); text-align: left; container-type: inline-size; }
.nm-game-title {
  display: flex; align-items: flex-start; gap: .18em; margin: 0 0 .15em;
  font-family: var(--font-yet); font-weight: 400; line-height: 1.1; letter-spacing: .02em;
  font-size: calc(clamp(44px, 5.6vw, 78px) * var(--fs, 1));
  /* 글자 크기 3단계에서도 제목 한 줄(다섯 글자 + 낙관)이 글 상자 너비를 넘지 않게 */
  font-size: min(calc(clamp(44px, 5.6vw, 78px) * var(--fs, 1)), 16cqi);
  color: var(--tt-paper); text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 28px rgba(246, 197, 106, .28);
  animation: nm-tt-rise .7s ease-out .3s both;
}
.nm-game-title:focus { outline: none; }
.nm-game-title-text { min-width: 0; }
/* 原文 낙관: 붉은 네모 도장, 한지색 글자를 위아래로 */
.nm-title-seal {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 1.02em; padding: .1em 0; margin-top: .12em; border-radius: 4px;
  font-size: .38em; line-height: 1.04; color: #fbf1dc; background: var(--seal);
  box-shadow: inset 0 0 0 .07em #fbf1dc, inset 0 0 0 .13em var(--seal), 0 2px 6px rgba(0, 0, 0, .35);
  text-shadow: none; transform: rotate(-6deg);
  animation: nm-tt-stamp .5s cubic-bezier(.3, 1.4, .5, 1) .9s both;
}
.nm-game-sub {
  margin: 0 0 1.4em; color: var(--tt-dim); font-size: calc(17px * var(--fs, 1)); letter-spacing: .02em;
  animation: nm-tt-rise .7s ease-out .5s both;
}
.nm-title-badge { margin: -.6em 0 1em; }
.nm-title-acts { margin: 0; max-width: none; gap: 10px; animation: nm-tt-rise .7s ease-out .75s both; }
.nm-title-acts .nm-btn-primary {
  border-color: #d6544a; box-shadow: 0 3px 0 #6e1c16, 0 10px 24px rgba(0, 0, 0, .35); letter-spacing: .06em;
}
.nm-title-acts .nm-btn-primary:hover { background: #c63a31; }
.nm-title-acts .nm-btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #6e1c16, 0 6px 16px rgba(0, 0, 0, .35); }
/* 새로 시작: 한지 테두리만 / 설정·만든 사람들: 더 조용한 단추 둘이 한 줄 */
.nm-btn.nm-btn-ghost { color: var(--tt-paper); background: rgba(23, 18, 13, .58); border-color: rgba(244, 234, 212, .75); }
.nm-btn.nm-btn-ghost:hover { background: rgba(244, 234, 212, .14); }
.nm-title-minor { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-btn.nm-btn-quiet {
  flex: 1 1 8em; color: var(--tt-paper); background: rgba(23, 18, 13, .5);
  border: 1.5px solid rgba(244, 234, 212, .4); font-size: calc(16px * var(--fs, 1));
}
.nm-btn.nm-btn-quiet:hover { background: rgba(244, 234, 212, .12); border-color: rgba(244, 234, 212, .7); }
#nm-screens[data-screen="title"] .nm-btn:focus-visible { outline: 3px solid var(--tt-glow); outline-offset: 3px; }

/* 세로로 긴 화면(휴대 전화 세로·좁은 창): 그림은 위(선배 통사가 보이게), 글과 단추는 아래 가림막 위 */
@media (max-aspect-ratio: 1/1) {
  /* 세로 그림은 위 삼분의 일이 고요한 밤하늘, 아래는 빛이 나오는 책 — 글과 단추는 하늘 쪽, 책은 가리지 않는다 */
  .nm-title-art { background-image: var(--nm-art-tall, var(--nm-art-wide, none)); background-position: 50% 100%; }
  .nm-title-scrim {
    background: linear-gradient(180deg, rgba(23, 18, 13, .62) 0%, rgba(23, 18, 13, .45) 38%, rgba(23, 18, 13, .12) 58%, rgba(23, 18, 13, 0) 70%);
  }
  .nm-title-screen { justify-content: flex-start; align-items: stretch; padding-top: max(7vh, env(safe-area-inset-top)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .nm-title-card { width: 100%; max-width: 460px; margin: 0 auto; }
  .nm-game-title { font-size: calc(clamp(44px, 14vw, 72px) * var(--fs, 1)); font-size: min(calc(clamp(44px, 14vw, 72px) * var(--fs, 1)), 16cqi); }
}
/* 낮은 화면(가로로 든 휴대 전화): 글자·사이를 줄여 한 화면에 */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .nm-title-screen { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .nm-game-title { font-size: calc(clamp(36px, 10vh, 56px) * var(--fs, 1)); font-size: min(calc(clamp(36px, 10vh, 56px) * var(--fs, 1)), 16cqi); }
  .nm-game-sub { margin-bottom: .8em; font-size: calc(15px * var(--fs, 1)); }
  .nm-title-acts { gap: 8px; }
  .nm-title-acts .nm-btn-big { min-height: 48px; font-size: calc(18px * var(--fs, 1)); }
}

/* 배지 */
.nm-badge {
  display: inline-block; padding: .1em .55em; border-radius: 999px; border: 2px solid currentColor;
  font-size: calc(14px * var(--fs, 1)); font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.nm-badge-teacher { color: var(--paper); background: var(--seal); border-color: var(--seal); }
.nm-badge-teacher::before { content: '◆ '; }
.nm-badge-level { color: var(--interp); }
.nm-role-bundle { color: var(--seal); }
.nm-role-optional { color: var(--variant); }
.nm-role-outside { color: #6b5d52; border-style: dashed; }
.nm-role-prologue { color: var(--fiction); }
.nm-status-done { color: var(--interp); }
.nm-status-progress { color: var(--fiction); }

/* 처음 정하기 */
.nm-choice-list { display: grid; gap: 12px; margin: 1em 0; }
.nm-choice { flex-direction: column; align-items: flex-start; text-align: left; width: 100%; padding: .7em 1em; }
.nm-choice-main { font-size: calc(22px * var(--fs, 1)); font-weight: 700; }
.nm-choice-sub { font-size: calc(15px * var(--fs, 1)); opacity: .85; }
.nm-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: 12px; margin: 1em 0; }
.nm-hero { flex-direction: column; padding: .8em; min-height: 120px; }
.nm-portrait { display: block; width: 96px; height: 96px; max-width: 100%; object-fit: contain; border-radius: 12px; }
.nm-portrait-empty { display: flex; align-items: center; justify-content: center; background: var(--hanji); font-size: calc(36px * var(--fs, 1)); color: var(--ink); }
.nm-hero-name { font-weight: 700; }
.nm-form { margin: .5em 0; max-width: 520px; }
.nm-form input, .nm-notebook select {
  display: block; width: 100%; min-height: 52px; padding: .4em .7em; margin: 0 0 .4em;
  font: inherit; font-size: calc(20px * var(--fs, 1)); color: var(--ink); background: #fff;
  border: 2px solid var(--ink); border-radius: 10px;
}
.nm-form input:focus-visible, .nm-notebook select:focus-visible { outline: 4px solid #ffd76a; outline-offset: 1px; }
.nm-form input[aria-invalid="true"] { border-color: var(--seal); }
.nm-form .nm-btn-big { margin-top: .6em; }

/* 장면 고르기 */
.nm-select-head { border-bottom: 2px solid #d8c9ad; padding-bottom: .4em; }
.nm-who { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nm-who-name { font-size: calc(22px * var(--fs, 1)); font-weight: 700; }
.nm-title-line { margin: .4em 0; }
.nm-title-value { color: var(--seal); }
.nm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: .2em 0 1em; color: #4a3f37; font-size: calc(14px * var(--fs, 1)); }
.nm-stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr)); gap: 12px; }
.nm-stage-card {
  flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left;
  min-height: 7em; padding: .7em .9em; background: #fffaf0; border-width: 3px;
}
.nm-card-bundle { border-color: var(--seal); }
.nm-card-optional { border-color: var(--variant); }
.nm-card-outside { border-style: dashed; border-color: #8a7a6c; background: #f3eadb; }
.nm-card-done { background: #eef1f8; }
.nm-card-top { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; align-items: center; }
.nm-card-label { font-weight: 700; font-size: calc(18px * var(--fs, 1)); }
.nm-card-name { display: block; font-size: calc(20px * var(--fs, 1)); margin-top: .2em; }
.nm-card-era { display: block; color: #6b5d52; font-size: calc(14px * var(--fs, 1)); }
.nm-card-bottom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: .4em; }
.nm-card-glyph .nm-glyph { font-size: calc(30px * var(--fs, 1)); line-height: 1; color: var(--seal); }

/* ── 종이 화면(처음 정하기·교사 학교급·장면 고르기) ──
   한지 바탕, 위에는 노을 그림 띠(먹빛 가림막 + 한지색 명조 제목, 아래 끝은 찢은 종이 가장자리),
   고르는 카드는 그림이 든 두꺼운 한지 카드(먹 테두리), 고른 것은 붉은 테와 ● 표. 그림은 모두 꾸밈(낭독기에서 숨김). */
#nm-screens:not([data-screen="title"]) {
  --pp-paper: #f1e5cc; --pp-card: #fcf6e9; --pp-hanji: #f4ead4; --pp-dim: #e6d6b6; --pp-seal-light: #ff9a88;
  background-color: var(--pp-paper);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 251, 240, .65), rgba(255, 251, 240, 0) 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(150, 110, 60, .16), rgba(150, 110, 60, 0) 70%),
    url('../assets/ui/paper.webp');
  background-size: auto, auto, 640px 640px;
  background-attachment: local;
}
.nm-banner { position: relative; isolation: isolate; overflow: hidden; color: var(--pp-hanji); background: #241b15; }
.nm-banner-art {
  position: absolute; inset: 0; z-index: -2;
  background: #3a2a20 var(--nm-art-wide, none) 50% 40% / cover no-repeat;
}
.nm-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(23, 18, 13, .9) 0%, rgba(23, 18, 13, .66) 55%, rgba(23, 18, 13, .4) 100%),
              linear-gradient(0deg, rgba(23, 18, 13, .55), rgba(23, 18, 13, 0) 70%);
}
/* 찢은 한지 가장자리 */
.nm-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px;
  background: radial-gradient(circle at 9px -3px, rgba(0, 0, 0, 0) 9px, var(--pp-paper) 10px) repeat-x 0 0 / 18px 12px;
}
.nm-banner-inner {
  max-width: 980px; margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 30px max(16px, env(safe-area-inset-left));
}
.nm-banner .nm-heading {
  margin: .25em 0 0; color: var(--pp-hanji); font-family: var(--font-yet); font-weight: 400;
  font-size: calc(clamp(26px, 6.4vw, 38px) * var(--fs, 1)); line-height: 1.25; letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.nm-banner-badge { margin: 0 0 .3em; }
.nm-step { display: flex; align-items: center; gap: .7em; color: var(--pp-dim); font-size: calc(15px * var(--fs, 1)); }
.nm-step-dots { display: inline-flex; gap: 6px; align-items: center; }
.nm-step-dot { width: 11px; height: 11px; border-radius: 2px; border: 1.5px solid var(--pp-dim); transform: rotate(-6deg); }
.nm-step-dot.is-done { background: var(--seal); border-color: var(--seal); }
.nm-step-dot.is-now { width: 15px; height: 15px; background: var(--seal); border-color: var(--pp-hanji); }
.nm-paper-inner { padding-top: 16px; }
.nm-paper-inner > .nm-heading { font-family: var(--font-yet); font-weight: 400; font-size: calc(28px * var(--fs, 1)); }
.nm-paper-inner .nm-help { font-size: calc(17px * var(--fs, 1)); }
/* 뒤로·설정: 조용한 단추 */
.nm-paper-inner .nm-row-end .nm-btn { background: transparent; border-width: 1.5px; }
.nm-paper-inner .nm-row-end .nm-btn:hover { background: rgba(255, 250, 240, .7); }

/* 학교급 카드: 그림 + 글. 좁으면 그림 왼쪽, 넓으면 세 장이 나란히(그림 위) */
.nm-choice-list { gap: 14px; }
.nm-btn.nm-choice-level {
  position: relative; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 10px 14px 10px 10px;
  background: var(--pp-card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 rgba(43, 36, 32, .3);
  transition: transform .12s ease, box-shadow .12s ease;
}
.nm-btn.nm-choice-level:hover { background: #fff8ea; transform: translateY(-2px); box-shadow: 0 5px 0 rgba(43, 36, 32, .3); }
.nm-choice-art {
  flex: none; display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 10px;
  border: 1.5px solid rgba(43, 36, 32, .55); background: #d9c6a2;
}
.nm-choice-text { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.nm-choice-level .nm-choice-main { font-size: calc(24px * var(--fs, 1)); line-height: 1.25; }
.nm-choice-level .nm-choice-sub { opacity: 1; color: #4a3f37; }
.nm-btn.nm-choice-level[aria-pressed="true"] {
  color: var(--ink); background: #fff6e2; border-color: var(--seal);
  box-shadow: 0 0 0 2px var(--seal), 0 3px 0 rgba(43, 36, 32, .3);
}
.nm-btn.nm-choice-level[aria-pressed="true"]::before {
  position: absolute; top: 6px; right: 10px; color: var(--seal); font-size: calc(18px * var(--fs, 1));
}
.nm-btn.nm-choice-level[aria-pressed="false"]::before { content: none; }
@media (min-width: 760px) {
  .nm-choice-list.nm-level-list { grid-template-columns: repeat(3, 1fr); }
  .nm-btn.nm-choice-level { flex-direction: column; align-items: stretch; padding: 10px 10px 16px; }
  .nm-choice-art { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .nm-choice-text { padding: 0 6px; }
}

/* 주인공 카드: 노을빛 둥근 틀 안의 얼굴 */
.nm-hero-grid { gap: 14px; }
.nm-btn.nm-hero {
  position: relative; gap: .5em; padding: 14px 10px 12px; min-height: 0;
  background: var(--pp-card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 rgba(43, 36, 32, .3);
}
.nm-btn.nm-hero:hover { background: #fff8ea; }
.nm-hero .nm-portrait {
  width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 12%;
  background: radial-gradient(circle at 50% 30%, #f8dcaa, #d79a62 62%, #8a5238);
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px rgba(255, 246, 225, .6);
}
.nm-hero-name { font-size: calc(18px * var(--fs, 1)); }
.nm-btn.nm-hero[aria-pressed="true"] { color: var(--ink); background: #fff6e2; border-color: var(--seal); box-shadow: 0 0 0 2px var(--seal), 0 3px 0 rgba(43, 36, 32, .3); }
.nm-btn.nm-hero[aria-pressed="true"]::before { position: absolute; top: 6px; right: 10px; color: var(--seal); }
.nm-btn.nm-hero[aria-pressed="false"]::before { content: none; }

/* 별명 */
.nm-paper-inner .nm-form { max-width: 560px; }
.nm-paper-inner .nm-form input { min-height: 58px; font-size: calc(22px * var(--fs, 1)); background: #fffdf6; border-radius: 12px; box-shadow: inset 0 2px 0 rgba(43, 36, 32, .08); }
.nm-paper-inner .nm-warn { padding: .4em .7em; border-left: 4px solid var(--seal); background: rgba(184, 50, 42, .07); border-radius: 0 8px 8px 0; }

/* 장면 고르기: 머리 띠 안에 이름·학교급·칭호·도구, 아래는 그림이 든 장면 카드 */
.nm-banner-select .nm-select-head { border-bottom: 0; padding-bottom: 0; }
.nm-banner-select .nm-who-name { color: var(--pp-hanji); font-family: var(--font-yet); font-weight: 400; font-size: calc(30px * var(--fs, 1)); }
.nm-banner-select .nm-badge-level { color: var(--pp-hanji); }
.nm-banner-select .nm-title-line { color: var(--pp-dim); }
.nm-banner-select .nm-title-value { color: var(--pp-seal-light); }
.nm-banner .nm-btn { color: var(--pp-hanji); background: rgba(23, 18, 13, .35); border: 1.5px solid rgba(244, 234, 212, .65); }
.nm-banner .nm-btn:hover { background: rgba(244, 234, 212, .16); }
.nm-banner .nm-btn:focus-visible { outline-color: #f6c56a; }
.nm-select-tools { margin-bottom: 0; }
.nm-select-tools .nm-tb-icon { width: 1.5em; height: 1.5em; }
.nm-paper-inner.nm-select-screen > .nm-heading { margin-top: .2em; }
.nm-stage-card { background: var(--pp-card); box-shadow: 0 3px 0 rgba(43, 36, 32, .22); }
.nm-stage-card.has-thumb { flex-direction: row; align-items: stretch; padding: 0; overflow: hidden; }
.nm-card-thumb { flex: none; display: block; width: 33%; max-width: 132px; min-height: 100%; object-fit: cover; background: #d9c6a2; border-right: 2px solid rgba(43, 36, 32, .5); }
.nm-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: .6em .8em; }
.nm-card-outside .nm-card-thumb { filter: grayscale(.75); opacity: .75; }
.nm-card-done .nm-card-thumb { filter: saturate(.85); }
.nm-card-name { font-size: calc(21px * var(--fs, 1)); }
.nm-btn.nm-stage-card:hover { background: #fff8ea; }
.nm-btn.nm-card-done { background: #f2f0ea; }
@media (min-width: 700px) {
  .nm-stage-card.has-thumb { flex-direction: column; }
  .nm-card-thumb { width: 100%; max-width: none; min-height: 0; height: auto; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 2px solid rgba(43, 36, 32, .5); }
}

/* 창 */
.nm-modal-host { position: absolute; inset: 0; z-index: 20; }
.nm-modal {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: rgba(20, 16, 12, .55); color: var(--ink); font-size: calc(16px * var(--fs, 1)); line-height: 1.55;
}
.nm-panel {
  display: flex; flex-direction: column; width: min(760px, 100%); max-height: 100%;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); overflow: hidden;
}
.nm-panel-full { width: min(980px, 100%); height: 100%; }
.nm-panel-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 2px solid #d8c9ad; background: var(--hanji); }
.nm-panel-title { margin: 0; font-size: calc(20px * var(--fs, 1)); line-height: 1.3; min-width: 0; }
.nm-btn-close { flex: none; }
.nm-panel-body { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; padding: 12px 16px 16px; -webkit-overflow-scrolling: touch; }
.nm-notice-text { margin: .2em 0 .8em; font-size: calc(18px * var(--fs, 1)); }

/* 설정 */
.nm-set-row { padding: .5em 0 .7em; border-bottom: 1px solid #d8c9ad; }
.nm-set-row:last-child { border-bottom: 0; }
.nm-set-label { margin: .2em 0; font-size: calc(18px * var(--fs, 1)); }
.nm-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-note { color: #6b5d52; font-size: calc(14px * var(--fs, 1)); margin: .4em 0 0; }

/* 도구 막대(장면 중) */
#nm-toolbar {
  position: absolute; z-index: 8; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: calc(100% - 16px);
  font-size: calc(16px * var(--fs, 1));
}
#nm-toolbar .nm-btn { background: rgba(255, 250, 240, .95); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
#nm-toolbar .nm-tb-btn { gap: .35em; padding: .3em .8em .3em .55em; }
.nm-tb-icon { display: block; flex: none; width: 1.6em; height: 1.6em; object-fit: contain; pointer-events: none; }
.nm-tb-label { white-space: nowrap; }
/* 좁은 화면(휴대 전화 세로)·낮은 화면(가로): 아이콘 위·이름 아래의 작은 단추를 가로 한 줄로 오른쪽 위에 둔다.
   장면 진행 판(HUD)은 그 왼쪽에, 자리가 모자라면 아래에 선다(app.js measureToolbar → --nm-tb-w·--nm-tb-b, css/stage.css). */
@media (max-width: 520px), (max-height: 520px) {
  #nm-toolbar { gap: 4px; top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); max-width: calc(100% - 12px); }
  #nm-toolbar .nm-tb-btn {
    flex-direction: column; gap: 1px; min-width: 52px; min-height: 52px; padding: 4px 5px 3px; border-radius: 12px;
    font-size: calc(12.5px * var(--fs, 1)); line-height: 1.15; font-weight: 700;
  }
  #nm-toolbar .nm-tb-icon { width: 24px; height: 24px; }
  #nm-toolbar .nm-badge { font-size: calc(12px * var(--fs, 1)); padding: .05em .45em; }
}

/* 교사 장소 목록 */
.nm-place-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr)); gap: 10px; }
.nm-place { width: 100%; justify-content: flex-start; text-align: left; }
.nm-place-kind { color: var(--fiction); }
/* 학생 장소 목록: 이름 아래 종류·목표·살핌 표(색만으로 나누지 않음 — 글자 이름표) */
.nm-places-student .nm-place { flex-direction: column; align-items: flex-start; gap: .3em; }
.nm-place-name { font-weight: 700; }
.nm-place-tags { display: flex; flex-wrap: wrap; gap: .3em; }
.nm-place-goal { color: var(--paper); background: var(--seal); border-color: var(--seal); }
.nm-place-goal::before { content: '! '; }
.nm-place-seen.is-seen::before { content: '✓ '; }

/* 수첩 */
.nm-nb-pick { align-items: flex-end; }
.nm-nb-pick .nm-label { margin: 0; }
.nm-nb-pick select { flex: 1 1 12em; min-width: 0; margin: 0; }
.nm-nb-section { margin: 1em 0; }
.nm-nb-title { margin: 0 0 .3em; font-size: calc(18px * var(--fs, 1)); color: var(--interp); border-bottom: 2px solid #d8c9ad; }
.nm-nb-list, .nm-dogam-list { list-style: none; margin: 0; padding: 0; }
.nm-nb-growth { margin: 0 0 .3em; font-weight: 600; font-size: calc(15px * var(--fs, 1)); }
.nm-nb-list > li, .nm-dogam-list > li { padding: .35em 0; border-bottom: 1px dashed #d8c9ad; }
/* 수첩의 확정한 말(옛 형태). 이름을 .nm-orig 로 쓰면 장면 原文 카드(.nm-orig, css/stage.css)와 겹쳐
   原文 카드·기믹 원문 줄 안의 옛한글만 24px 로 커지고, 수첩 낱말에는 原文 카드 테두리가 씌워진다. */
.nm-nb-word .nm-yet { font-size: calc(24px * var(--fs, 1)); }
.nm-arrow { color: #6b5d52; }
.nm-modern { font-weight: 700; }
.nm-rule strong { display: block; }
.nm-rule-text, .nm-rule-stage, .nm-dogam-note { display: block; color: #4a3f37; }
.nm-rule-stage { font-size: calc(14px * var(--fs, 1)); }
.nm-dogam { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.nm-dogam-glyph .nm-yet { font-size: calc(30px * var(--fs, 1)); color: var(--seal); }
.nm-dogam-note, .nm-dogam .nm-rule-stage { flex-basis: 100%; }
.nm-reflection { margin: .2em 0; }

/* 수첩 이미지 */
.nm-img-preview-box { text-align: center; }
.nm-img-preview { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; border: 2px solid var(--ink); border-radius: 8px; -webkit-touch-callout: default; user-select: auto; }

/* 움직임 줄이기: html.nm-reduced-motion 만 따른다(app.js 가 기기 설정 기본값 또는 직접 고른 값으로 붙인다).
   미디어 쿼리를 따로 두지 않는다 — 직접 '끔'을 고르면 기기 설정보다 앞선다. */
.nm-reduced-motion #nm-screens *, .nm-reduced-motion .nm-modal *, .nm-reduced-motion #nm-toolbar * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* 만든 사람들 */
.nm-credits-sec { margin: 0 0 1em; }
.nm-credits-title { margin: 0 0 .3em; font-size: calc(1.05rem * var(--fs, 1)); }
.nm-credits-line { margin: 0 0 .35em; font-size: calc(.92rem * var(--fs, 1)); line-height: 1.55; overflow-wrap: anywhere; }

/* 전체 화면 단추(첫 화면·도구 막대·설정) — js/ui/fullscreen.js */
.nm-fs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; }
.nm-fs-icon { width: 1.15em; height: 1.15em; flex: none; }
#nm-toolbar .nm-fs-icon { width: 1.6em; height: 1.6em; color: #5a3b22; }
@media (max-width: 520px), (max-height: 520px) { #nm-toolbar .nm-fs-icon { width: 24px; height: 24px; } }
html.nm-fullscreen .nm-fs-icon path { d: path('M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5'); }