/* 새판 머리 칸 덧붙임 — 국내판 틀(frame-*.css)에 없던 것 · 도쿄판에만 있던 것(지금 판 shell-tokyo.css)
   frame-*.css 를 직접 고치지 말고 여기서 덮는다 */

/* 바탕 — 첫 칠(어두운 화면 설정이어도 틀은 지금 판처럼 밝은 바탕) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--tm-bg); }
body {
  margin: 0; background: var(--tm-bg); color: var(--tm-text);
  font: 15px/1.55 var(--tm-font-ui), "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

/* 본문 — 오른쪽 막대가 보일 때 막대 밑으로 들어가지 않게 · 끝 여백 */
.tm-app > main { padding: 12px var(--tm-gap) 16px; min-width: 0; }   /* 끝 여백 40 → 16(10-28 대표님 「회사 안내 아래 빈 곳」) */
.tm-has-sb .tm-app > main { padding-right: calc(var(--tm-gap) + 26px); }
/* 앞 ⇦ · 뒤 ⇨ 줄도 오른쪽 막대 밑으로 들어가지 않게(2026-10-28 대표님 「뒤 단추 한쪽이 잘림」) */
.tm-has-sb .tm-stepnav { padding-right: 32px; }

/* 배너 광고 문의 — 광고판 바로 밑에 작게(도쿄 · 판 설정에 문의 메일이 있을 때) */
.tm-adcol { grid-row: 1; grid-column: 2; min-width: 0; display: flex; flex-direction: column; }
.tm-adcol .tm-adboard { flex: 1 1 auto; grid-row: auto; grid-column: auto; }
.tm-adask {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; overflow: hidden;
  margin: 3px 6px 3px; padding: 1px 10px;
  border: 1px solid rgba(176, 134, 40, .45); border-radius: 999px;
  background: #FFFBF0;
  color: #8A6418; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  text-decoration: none; text-align: center;
}
.tm-adask .m { font-weight: 600; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tm-adask:focus-visible { outline: 3px solid var(--tm-frame-gold); outline-offset: 2px; }

/* 계절 장식 색 — SVG 안의 style="" 은 CSP 가 막으므로 여기서 */
.tm-orn .st { fill: none; stroke: var(--tm-frame-gold, #C49A2C); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tm-orn .fl { fill: var(--tm-frame-gold, #C49A2C); }
.tm-orn .fl.o8 { opacity: .8; }
.tm-adboard .hand svg { fill: currentColor; }

/* 입구 칸 글 — 말마다 길이가 달라 칸을 넘을 수 있다. 한국어는 낱말을 끊지 않고 · 일본어는 사전의 ​ 자리에서.
   그래도 넘치면 head.js after() 가 글자를 줄인다(13px 까지) */
.tm-entry-t { display: block; max-width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: normal; line-height: 1.12; }
/* 다섯 칸(도쿄 — 버스) · 윗줄 셋 · 아랫줄 둘 */
.tm-entries.five { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.tm-entries.five .tm-entry { grid-column: span 2; padding: 4px 2px; letter-spacing: -0.02em; word-break: keep-all; text-align: center; min-width: 0; }
.tm-entries.five .tm-entry:nth-child(n+4) { grid-column: span 3; }
.tm-entries.five .tm-entry small { letter-spacing: -0.02em; white-space: nowrap; }
/* 일곱 칸(국내 — 버스) · 윗줄 셋 · 아랫줄 넷(지금 판 국내 app.css 그대로) */
.tm-entries.seven { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.tm-entries.seven > .tm-entry { grid-column: span 4; padding: 4px 2px; letter-spacing: -0.02em; word-break: keep-all; text-align: center; min-width: 0; }
.tm-entries.seven > .tm-entry:nth-child(n+4) { grid-column: span 3; padding: 4px 1px; letter-spacing: -0.04em; }
.tm-entries.seven .tm-entry small { letter-spacing: -0.02em; white-space: nowrap; }
.tm-entries.seven > .tm-entry:nth-child(n+4) small { white-space: normal; line-height: 1.15; }

/* 광고판 글 — 일본어가 낱말 가운데서 끊기지 않게 */
.tm-adboard .placard .txt { word-break: keep-all; overflow-wrap: anywhere; }
/* 광고판 세로 「찾기」 — 안내 문구에도 붙인다(도쿄판 · 새판 두 판 같음) · 왼쪽 위 「광고」 표시 */
.tm-adboard.has-find .tm-adfind { display: flex; }
.tm-adboard.has-find .panel { margin-right: 30px; }
.tm-adboard.has-find .adtag { display: block; }

/* 일본어 줄 바꿈 — 구절 단위(크롬 계열 119+ · 사파리는 모르는 값이라 무시) */
html:lang(ja) body, [lang="ja"]:not(html) { word-break: auto-phrase; }

/* 엠블럼 <picture> 가 틀 모양에 끼지 않게 · 오른쪽 틀 지키기 */
.tm-logo-btn picture { display: contents; }
.tm-app { overflow-x: clip; }

/* 시험판 띠(2026-10-16) — 시험 주소에서만(edition.stage = test · core/boot.js) */
.tm-test-band { position: sticky; top: 0; z-index: 9999; background: #b3261e; color: #fff; text-align: center; font-weight: 700; font-size: 14px; padding: 4px 8px; }
/* 🔍 운영자 점검 띠(2026-10-26 · screens/common/inspect_band.js) — 운영자 점검방에 들어가 있는 동안만 */
.tm-inspect-band { position: sticky; top: 0; z-index: 9998; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; background: #ffd54f; color: #3a2a00; font-weight: 700; font-size: 14px; padding: 4px 8px; }
body:has(.tm-test-band) .tm-inspect-band { top: 28px; }
.tm-inspect-btn { font: inherit; font-size: 13px; padding: 2px 10px; border: 1px solid #3a2a00; border-radius: 14px; background: #fff8e1; color: #3a2a00; cursor: pointer; }
/* 시험판 띠가 있으면 크게 보여 주는 덮개(점원 · 글로 말하기)를 띠 아래부터 — 닫기 단추가 가리지 않게 */
body:has(.tm-test-band) .tm-staff { top: 28px; }

/* 광고판 밑 한 줄 — [📣 광고 문의] ……… [🔍 찾기](찾기는 눕힌 화면에서만 · 세로는 광고판 오른쪽 세로 찾기 그대로) */
.tm-adrow { display: flex; align-items: center; gap: 6px; margin: 3px 6px 3px; min-width: 0; }
.tm-adrow:empty { display: none; }
.tm-adrow .tm-adask { margin: 0; flex: 1 1 auto; min-width: 0; }
.tm-adfind2 {
  display: none; flex: 0 0 auto; align-items: center; padding: 1px 12px; border-radius: 999px;
  border: 1px solid #B08628; background: linear-gradient(180deg, #F7C64C, #E9A92A);
  color: #3A2706; font-size: 12px; font-weight: 800; line-height: 1.5; white-space: nowrap;
}
.tm-adfind2:focus-visible { outline: 3px solid var(--tm-frame-gold); outline-offset: 2px; }

/* 눕힌 휴대폰(2026-10-28 대표님) — 왼쪽 칸: 스크롤 막대 · 119/112 칸 · 앞뒤 줄 빼고 · 왼쪽 45% · 광고판은 넓은 네모 */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 560px) {
  :root { --tm-side-w: clamp(330px, 45vw, 450px); }   /* 왼쪽 45% · 오른쪽 55%(10-28 대표님 · 45 → 50 → 47 → 45) */
  /* 막대는 숨기고 손가락으로는 여전히 밀 수 있게(키 작은 휴대폰 · 시험판 띠) */
  .tm-app > .tm-side { scrollbar-width: none; }
  body:has(.tm-test-band) .tm-app > .tm-side { top: 30px; height: calc(100vh - 30px); height: calc(100dvh - 30px); }
  .tm-app > .tm-side::-webkit-scrollbar { display: none; }
  .tm-side > .tm-stepnav { display: none; }
  .tm-side .tm-entries { position: static; box-shadow: none; }
  .tm-side .tm-entry-sos { display: none; }
  .tm-side .tm-adboard.has-find .tm-adfind { display: none; }
  .tm-side .tm-adboard.has-find .panel { margin-right: 0; }
  .tm-side .tm-adfind2 { display: inline-flex; }
  /* 가운데 나눔 선 = 광고판 오른쪽 선(10-28 대표님) — 머리 칸 틀의 오른쪽 여백 · 테두리를 없애 광고판이 나눔 선에 붙게 */
  .tm-side .tm-brand-frame { margin-right: 0 !important; border-right: 0 !important; border-top-right-radius: 0 !important; }   /* frame-b 의 !important 를 이김 */
  /* 입구 칸은 큰 글 한 줄만(작은 풀이 글 숨김) — 왼쪽 칸이 화면 높이 안에 다 들어가게 */
  .tm-side .tm-entry small { display: none; }
  .tm-side .tm-entry { min-height: 36px; padding-top: 2px; padding-bottom: 2px; }
  .tm-side .tm-entry-t { font-size: 14px; line-height: 1.15; }
}