/* ============================================================
   KWONMO — chsea.css
   항해자들의 연대기(chsea) 전용. 폰 세로 화면(A안)에 지도 자리는 지구본(WebGL 캔버스 + 이름 층).
   상단 바 / 지구본 + 좌우 아이콘 줄 / 아래 조작 영역, 목록이 붙는 일은 지구본을 덮는 레이어. 데스크톱은 폰 폭 기둥으로 가운데 둔다.
   색·간격은 val.css 토큰만 쓴다. 누르는 곳은 2.75rem(44px) 이상.
   지구본 안(.chs-main)은 마크업에서 data-theme="dark" 로 묶어 판 전환과 상관없이 야간판이다(지구본 시험과 같다).
   칸 색은 여기 변수(--chs-*)로 두고 화면 코드가 읽어 WebGL 정점 색으로 칠한다.
   ============================================================ */

/* 폰·태블릿: 사이트 헤더와 메뉴 FAB 를 숨기고 이 화면 상단 바가 대신한다 */
@media (max-width: 48em) {
  [data-layout="game"] .masthead,
  [data-layout="game"] .fab { display: none; }
}

.chs-app {
  position: relative; display: flex; flex-direction: column;
  height: 100dvh; overflow: hidden;
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
  background: var(--bg); color: var(--text);
  /* 연타·길게 누르기에 글자 선택·돋보기가 끼어들지 않게 */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  /* 지구본 맨 위 선단 위치·날짜 띠 높이. 아이콘 줄·알림은 이 띠 아래에서 시작한다 */
  --chs-where-h: 2.75rem; --chs-below-where: calc(var(--sp-sm) * 2 + var(--chs-where-h));
}
.chs-app [hidden] { display: none !important; }

.chs-ico { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.chs-ibtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-mid); cursor: pointer;
}
.chs-ibtn:active { background: var(--surface-2); }
.chs-ibtn:disabled { opacity: .35; cursor: default; }
/* 판 전환: 조간판에서는 달(야간판으로), 야간판에서는 해. 전체화면: 켜져 있으면 줄이기 아이콘 */
.chs-theme .is-sun, [data-theme="dark"] .chs-theme .is-moon { display: none; }
[data-theme="dark"] .chs-theme .is-sun { display: block; }
.chs-full .is-compress, .chs-full[aria-pressed="true"] .is-expand { display: none; }
.chs-full[aria-pressed="true"] .is-compress { display: block; }

/* ================= 상단 바 ================= */
.chs-top {
  display: flex; align-items: center; gap: var(--sp-xs); flex: none;
  min-height: 3.25rem; padding: 0 var(--sp-xs) 0 var(--sp-md);
  border-bottom: var(--hairline) solid var(--line); background: var(--surface);
}
.chs-top-info { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
/* 진행 문구·오류 줄. 불러온 뒤에는 비어서 은만 남는다 */
.chs-status { color: var(--text-dim); font-size: .78rem; }
.chs-status:empty { display: none; }
.chs-money { color: var(--accent); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ================= 지구본 ================= */
.chs-main { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--chs-space); }
.chs-app {
  /* 바다는 수심 4단(얕음 0m · 대륙붕 끝 200m · 1,500m · 5,000m 이상 — 사이는 화면 코드가 섞는다), 극지 제한 밖 바다는 --chs-polar 에 섞는다
     (제한은 계절마다 다르다). 내해(배가 못 들어가는 물)는 중간 바다보다 조금 어둡게 — 더 어두우면 항구 점과 구분이 안 된다(10-18 댄) · 우주 · 칸 경계 */
  --chs-sea-shallow: #5fb0c2; --chs-sea-shelf: #3f86b2; --chs-sea-mid: #33679a; --chs-sea-deep: #234777; --chs-polar: #8a9ba6;
  --chs-lake: #305f92; --chs-space: #0a0d12; --chs-edge: #0a0d12;
  /* 육지 9종 × 계절(봄·여름·가을·겨울, 그 땅의 계절 — 남반구는 화면 코드가 반 년 돌려 고른다). 위성 사진의 계절 변화를 따라 골랐다:
     정글·사막은 거의 그대로, 사바나는 우기(여름) 초록 → 건기(겨울) 황토, 스텝은 봄 풀빛 → 여름 마른 금빛,
     온대는 봄 연두 → 여름 짙은 초록 → 가을 황갈 → 겨울 회갈, 타이가는 늘 짙은 침엽수. 눈은 칸 자료 snow 칸에만 --chs-snow 로 덮는다(겨울 전부, 봄·가을은 높은 위도만 — 화면 코드 SNOW_LAT).
     봄·가을은 기준일 하나로 석 달을 대신해 이른 봄·늦가을 쪽으로 차분하게(댄: 너무 따뜻해 보였다).
     밝기는 화면 코드가 높이·기복으로 더 바꾼다 */
  --chs-jungle-spring: #255330; --chs-jungle-summer: #21502b; --chs-jungle-autumn: #275230; --chs-jungle-winter: #2a5131;
  --chs-savanna-spring: #7d8b4a; --chs-savanna-summer: #5f8a41; --chs-savanna-autumn: #8e8a4e; --chs-savanna-winter: #a8935a;
  --chs-desert-spring: #c2a46a; --chs-desert-summer: #c8a86b; --chs-desert-autumn: #c0a168; --chs-desert-winter: #b89c66;
  --chs-steppe-spring: #8a9663; --chs-steppe-summer: #ae9f5f; --chs-steppe-autumn: #978660; --chs-steppe-winter: #928b70;
  --chs-temperate-spring: #6e8a55; --chs-temperate-summer: #467a3d; --chs-temperate-autumn: #807550; --chs-temperate-winter: #6d6f5b;
  --chs-taiga-spring: #3f5544; --chs-taiga-summer: #2e5937; --chs-taiga-autumn: #47533b; --chs-taiga-winter: #33473a;
  --chs-tundra-spring: #9a9d95; --chs-tundra-summer: #78875f; --chs-tundra-autumn: #8f8676; --chs-tundra-winter: #b4b9b8;
  --chs-plateau-spring: #84735a; --chs-plateau-summer: #7c6947; --chs-plateau-autumn: #826c55; --chs-plateau-winter: #8b7b67;
  --chs-ice-spring: #e4e9ee; --chs-ice-summer: #dde4ea; --chs-ice-autumn: #e2e8ed; --chs-ice-winter: #e8edf1;
  --chs-snow: #e6ebef;
  /* 항로·바람·해류 선 */
  --chs-route: #f0c060; --chs-wind: #d9dee7; --chs-current: #6fd3c7;
}
.chs-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.chs-canvas:active { cursor: grabbing; }
/* 이름 층은 누르기를 막지 않는다(누르기는 캔버스가 받아 화면 좌표로 항구를 찾는다) */
.chs-names { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* 지도 글자는 판(조간·야간)과 상관없이 글꼴을 못 박는다 — 항구·바다·나라는 고딕, 세력은 명조(댄: 항구와 세력 글꼴을 다르게).
   판을 따르면 조간판에서 둘 다 명조가 되어 구분이 안 된다 */
.chs-name {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; font-size: .7rem; font-weight: 700; color: #fff;
  text-shadow: 0 0 .2em rgba(0, 0, 0, .9), 0 0 .4em rgba(0, 0, 0, .6);
}
.chs-name.is-port::before {
  content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .2rem; vertical-align: -.05rem;
  border: .12rem solid var(--text); border-radius: 50%; background: var(--surface);
}
.chs-name.is-nation { font-size: .72rem; font-weight: 400; letter-spacing: .08em; opacity: .75; }
/* 세력 이름표(세력 레이어). 판도를 멀리서 보는 층이라 나라 이름보다 크고 진하다 */
.chs-name.is-faction { font-family: "Noto Serif KR", Batang, serif; font-size: .85rem; font-weight: 800; letter-spacing: .14em; }
/* 바다 이름. 나라 이름보다 크게(댄), 물 이름은 지도 관례대로 기울인다. 단계(1 대양 · 2 큰 바다 · 3 작은 바다·해협)가 클수록 작다 */
.chs-name.is-water { font-weight: 400; font-style: italic; letter-spacing: .12em; opacity: .7; }
.chs-name.is-lv1 { font-size: 1.1rem; letter-spacing: .3em; }
.chs-name.is-lv2 { font-size: .85rem; }
.chs-name.is-lv3 { font-size: .76rem; }
.chs-name.is-here::before { background: var(--accent); }
.chs-name.is-dest::before { border-color: var(--chs-route); }
/* 선단에서 먼 항구는 이름을 숨기고 점만 남긴다 — 점 크기는 rem 이라 글자 크기 0 에 영향받지 않는다 */
.chs-name.is-far { font-size: 0; }
.chs-name.is-far::before { margin-right: 0; }
/* 선단 표시(돛배 배지). 자리는 화면 코드가 매 프레임 transform 으로 옮긴다 */
.chs-ship {
  position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem;
  border: .15rem solid #fff; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 .4rem rgba(0, 0, 0, .6);
}
.chs-ship svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 선단 위치·계절·기온·날짜 띠. 지구본 맨 위에 아이콘 줄과 같은 반투명으로 띄운다(높이 변수는 .chs-app) */
.chs-where {
  position: absolute; left: var(--sp-sm); right: var(--sp-sm); top: var(--sp-sm); z-index: 2;
  display: flex; align-items: center; gap: var(--sp-sm); min-height: var(--chs-where-h); padding: 0 var(--sp-md) 0 0;
  border-radius: var(--radius-md); background: rgba(var(--menu-bg), .41);
}
.chs-where.is-empty { visibility: hidden; }
.chs-here {
  display: flex; align-items: center; gap: var(--sp-xs); flex: 1; min-width: 0; align-self: stretch;
  padding: 0 var(--sp-sm) 0 var(--sp-md); border: 0; border-radius: var(--radius-md); background: none;
  color: var(--text); font-size: .88rem; font-weight: 700; text-align: left; cursor: pointer;
}
.chs-here:active { background: var(--surface-2); }
.chs-here .chs-ico { flex: none; width: 1.1rem; height: 1.1rem; color: var(--accent); }
.chs-here span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chs-day { flex: none; color: var(--text); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 알림. 아래는 패널이 덮으니 위쪽, 좌우 아이콘 줄 사이에 띄운다. 서서히 나타나고 사라진다 */
.chs-toast {
  position: absolute; left: 4.25rem; right: 4.25rem; top: var(--chs-below-where); z-index: 3;
  margin: 0; padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm);
  background: var(--text); color: var(--surface); font-size: .85rem; line-height: 1.5; text-align: center;
  opacity: 0; transform: translateY(-.5rem); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.chs-toast.is-on { opacity: 1; transform: none; }
/* 보고서 알림. 알림과 같은 자리지만 누를 수 있다 */
.chs-notice {
  position: absolute; left: 4.25rem; right: 4.25rem; top: var(--chs-below-where); z-index: 3;
  min-height: 2.75rem; padding: var(--sp-sm) var(--sp-md); border: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--surface); font-size: .85rem; font-weight: 700; line-height: 1.5; cursor: pointer;
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .3);
}
/* 연대 재생 막대(시험용). 알림 자리에 띄우고, 열려 있는 동안 알림은 그 아래로 내린다.
   아이콘 줄 사이가 좁아 두 줄 — 위는 단추, 아래는 끌기 막대와 날짜. 폰 폭에서 위 줄에 날짜까지 두면 닫기가 밀려난다 */
.chs-replay {
  position: absolute; left: 4.25rem; right: 4.25rem; top: var(--chs-below-where); z-index: 3;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "play . speed list close" "range range range day day";
  align-items: center; gap: 0 var(--sp-xs); padding: 0 var(--sp-xs);
  border-radius: var(--radius-md); background: rgba(var(--menu-bg), .82);
}
.chs-replay:not([hidden]) { display: grid; }
.chs-replay .is-pause, .chs-replay .is-playing .is-play { display: none; }
.chs-replay .is-playing .is-pause { display: block; }
.chs-replay-play { grid-area: play; }
.chs-replay-list { grid-area: list; }
.chs-replay-close { grid-area: close; }
.chs-replay-range { grid-area: range; min-width: 0; margin: 0 0 var(--sp-sm) var(--sp-sm); accent-color: var(--accent); }
.chs-replay-day { grid-area: day; margin: 0 var(--sp-sm) var(--sp-sm) 0; color: var(--text); font-size: .82rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.chs-replay-speed {
  grid-area: speed;
  padding: var(--sp-xs) var(--sp-sm); border: var(--hairline) solid var(--text-dim); border-radius: var(--radius-sm);
  background: none; color: var(--text); font-size: .72rem; font-weight: 700; cursor: pointer;
}
.chs-app.is-replay .chs-toast { top: calc(var(--chs-below-where) + 4.75rem); }
/* 재생이 멈춘 사건 카드. 재생 막대 바로 아래, 누르면 이어서 흐른다 */
.chs-replay-event {
  position: absolute; left: 4.25rem; right: 4.25rem; top: calc(var(--chs-below-where) + 4.75rem); z-index: 3;
  padding: var(--sp-sm) var(--sp-md); border: 0; border-radius: var(--radius-sm);
  background: var(--text); color: var(--surface); font-size: .85rem; line-height: 1.5; text-align: left; cursor: pointer;
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .3);
}
.chs-replay-event span, .chs-replay-event b { display: block; }
.chs-replay-event span + span { margin-top: var(--sp-sm); }
.chs-replay-event small { display: block; margin-top: var(--sp-xs); opacity: .7; text-align: right; }

/* 항구 안내판. 머리줄 아래 지도·패널을 옅게 덮고 가운데 반투명 판. 서서히 나타나고 사라진다(닫힌 동안은 누르기를 막지 않게 숨긴다) */
.chs-intro {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(3.25rem + var(--safe-t)); z-index: 7;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-lg);
  background: color-mix(in srgb, var(--text) 30%, transparent);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.chs-intro.is-on { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
.chs-intro-card {
  max-width: 22rem; padding: var(--sp-md) var(--sp-lg); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 .25rem 1.5rem rgba(0, 0, 0, .2);
}
.chs-intro-card h3 { margin: 0 0 var(--sp-xs); font-family: var(--ed-display); font-size: 1.15rem; }
.chs-intro-card p { margin: 0; font-size: .92rem; line-height: 1.7; }
.chs-intro-card small { display: block; margin-top: var(--sp-sm); color: var(--text-dim); font-size: .72rem; text-align: right; }

/* 시스템 창. 안내판과 같은 덮개(머리줄은 남겨 톱니로 다시 닫을 수 있게), 가운데에 한 줄씩 */
.chs-sys {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(3.25rem + var(--safe-t)); z-index: 7;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-lg);
  background: color-mix(in srgb, var(--text) 30%, transparent);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s linear .2s;
}
.chs-sys.is-on { opacity: 1; visibility: visible; transition: opacity .2s var(--ease); }
.chs-sys-card {
  display: flex; flex-direction: column; gap: var(--sp-md); width: 100%; max-width: 22rem; padding: var(--sp-lg);
  border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 .25rem 1.5rem rgba(0, 0, 0, .2);
}
.chs-sys-row {
  display: flex; align-items: center; gap: var(--sp-sm); min-height: 3.5rem; padding: 0 var(--sp-md);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  color: var(--text); font-size: .95rem; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
}
.chs-sys-row .chs-ico { color: var(--text-mid); }
.chs-sys-row:active { filter: brightness(.94); }
.chs-sys-row:disabled { opacity: .4; cursor: default; }
/* 언어 줄: 줄은 단추가 아니라 안의 언어 단추를 고른다 */
.chs-lang { cursor: default; }
.chs-lang:active { filter: none; }
.chs-lang-opts { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.chs-lang-opt {
  min-height: 2.25rem; padding: 0 var(--sp-sm); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: inherit; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.chs-lang-opt[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 800; }
.chs-app.is-title .chs-lang-opt[aria-pressed="true"] { border-color: #ffffff; color: #ffffff; background-color: rgb(0 0 0 / 25%); }
/* 처음 연 화면(10-14 댄): 게임 화면은 감추고 시스템 창만. 상단 바의 진행 문구 · 오류와 알림(toast)은 남긴다 — 읽다 난 오류가 보이게.
   자리를 차지한 채 감춘다(visibility) — 지구본 캔버스 크기 재기가 그대로 돌게. 지구본 구획 바탕은 비운다(늘 야간판이라 --bg 가 어둡다) */
.chs-app.is-title .chs-top > :not(.chs-top-info), .chs-app.is-title .chs-main > :not(.chs-toast), .chs-app.is-title .chs-sheet { visibility: hidden; }
.chs-app.is-title .chs-main, .chs-app.is-title .chs-sys { background: none; }
/* 창은 아래로 내린다(10-14 댄) — 위쪽은 바탕 그림 자리 */
.chs-app.is-title .chs-sys { align-items: flex-end; }
/* 바탕 그림 위라 창을 비치게(10-14 댄 지정 값) */
.chs-app.is-title .chs-sys-card { background-color: rgb(0 0 0 / 30%); }
.chs-app.is-title .chs-sys-row { background-color: rgb(232 225 208 / 30%); color: #ffffff; }
.chs-app.is-title .chs-sys-row .chs-ico { color: #ffffff; }
/* 바탕 그림 세 장(시험): 한 장에 8초, 넘어갈 때 1.4초 겹쳐 바뀐다. 그림이 세로 9:16 이라 화면에 맞춰 넘치는 쪽을 자른다 */
.chs-title-bg { display: none; position: absolute; left: 0; right: 0; bottom: 0; top: calc(3.25rem + var(--safe-t)); z-index: 5; overflow: hidden; }
.chs-app.is-title .chs-title-bg { display: block; }
.chs-title-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: chs-title-fade 24s linear infinite backwards;
}
.chs-title-bg img:nth-child(2) { animation-delay: 8s; }
.chs-title-bg img:nth-child(3) { animation-delay: 16s; }
/* 제목: 그림 위쪽 하늘 · 천장 자리. 그림이 밝기도 어둡기도 해서 흰 글자에 그림자. 글꼴은 사이트가 이미 싣는 것(Bodoni Moda · Noto Serif KR) —
   판 전환으로 바뀌는 --ed-display 를 쓰지 않는다(야간판은 고정폭 글꼴) */
.chs-title-name {
  position: absolute; left: 0; right: 0; top: 9%; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs);
  color: #ffffff; text-align: center; text-shadow: 0 .1rem .6rem rgb(0 0 0 / 60%), 0 0 .15rem rgb(0 0 0 / 50%); pointer-events: none;
}
.chs-title-name span:first-child { font-family: "Bodoni Moda", serif; font-size: 1.45rem; font-weight: 900; letter-spacing: .01em; white-space: nowrap; }
/* 글자 간격은 끝 글자 뒤에도 붙어 가운데가 왼쪽으로 쏠린다 — 앞에 같은 만큼 채운다 */
.chs-title-name span:last-child { padding-left: .35em; font-family: "Noto Serif KR", serif; font-size: .95rem; font-weight: 700; letter-spacing: .35em; }
@keyframes chs-title-fade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  33.3% { opacity: 1; }
  39.3% { opacity: 0; }
  100% { opacity: 0; }
}
/* BGM 줄: 꺼지면 빗금 음표 */
.chs-bgm .is-off, .chs-bgm[aria-pressed="false"] .is-on { display: none; }
.chs-bgm[aria-pressed="false"] .is-off { display: block; }
.chs-qmark {
  flex: none; align-self: center; width: 1.05rem; height: 1.05rem; padding: 0;
  border: var(--hairline) solid var(--text-dim); border-radius: 50%; background: none;
  color: var(--text-dim); font-size: .62rem; font-weight: 700; line-height: 1; cursor: pointer;
}

/* 좌우 아이콘 줄. 지구본 위에 반투명으로 띄운다 — 기둥으로 세우면 폰에서 지구본이 좁아진다 */
.chs-strip {
  position: absolute; top: var(--chs-below-where); z-index: 2;
  display: flex; flex-direction: column; gap: .125rem; padding: var(--sp-xs);
  border-radius: var(--radius-md); background: rgba(var(--menu-bg), .41);   /* 메뉴 바탕 .82 의 절반 — 지구본이 비쳐 보이게(댄) */
}
.chs-strip.is-left { left: var(--sp-sm); }
.chs-strip.is-right { right: var(--sp-sm); }
.chs-sb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  width: 3rem; min-height: 3.25rem; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text);
  font-size: .62rem; font-weight: 700; cursor: pointer;
}
.chs-sb:active { background: var(--surface-2); }
.chs-sb[aria-pressed="true"] { color: var(--accent); }
/* 접기 단추(줄 맨 위). 접으면 아이콘들이 위로 말려 들어가고 단추만 남는다 — 지도를 덜 가리게 */
.chs-sb { max-height: 4rem; overflow: hidden; transition: max-height .25s var(--ease), min-height .25s var(--ease), opacity .2s var(--ease); }
.chs-strip.is-folded { gap: 0; }
.chs-strip.is-folded .chs-sb { max-height: 0; min-height: 0; opacity: 0; pointer-events: none; }
.chs-fold {
  display: flex; align-items: center; justify-content: center; width: 3rem; height: 1.5rem; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-dim); cursor: pointer;
}
.chs-fold .chs-ico { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.chs-strip.is-folded .chs-fold .chs-ico { transform: rotate(180deg); }

/* ================= 조작 영역 ================= */
/* 지구본 위에 얹힌 층이다 — 지구본은 처음부터 전체 크기로 그려 두고, 패널을 접으면 패널만 아래로 미끄러져 내려간다.
   접힌 높이 = 손잡이(2.75rem)만 남기는 만큼. 안 보이는 아래쪽은 화면 밖으로 밀어낸다 */
.chs-sheet {
  position: absolute; left: 0; right: 0; bottom: var(--safe-b); z-index: 4;
  display: flex; flex-direction: column;
  max-height: 50%; overflow-y: auto;
  padding: 0 var(--sp-md) var(--sp-md);
  border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface);
  box-shadow: 0 -.125rem .75rem rgba(0, 0, 0, .12);
  transition: transform .32s var(--ease);
}
.chs-sheet-body { display: flex; flex-direction: column; gap: var(--sp-sm); }
/* 손잡이. 막대는 작게 보이되 누르는 범위는 2.75rem 높이 전체 */
.chs-grab {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; flex: none; align-self: stretch;
  min-height: 2.75rem; margin: 0 calc(var(--sp-md) * -1) calc(var(--sp-sm) * -1);
  padding: 0; border: 0; background: var(--surface); cursor: pointer;
}
.chs-grab::before { content: ""; width: 2.5rem; height: .25rem; border-radius: 1rem; background: var(--text-dim); transition: background-color .32s var(--ease); }
.chs-sheet.is-folded { overflow: hidden; transform: translateY(calc(100% - 2.75rem)); }
.chs-sheet.is-folded .chs-grab::before { background: var(--accent); }
.chs-sheet-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-sm); }
.chs-sheet-head h3 { margin: 0; font-family: var(--ed-display); font-size: 1.3rem; }
.chs-tag {
  padding: .05rem .4rem; border-radius: var(--radius-sm); background: var(--accent); color: var(--surface);
  font-size: .7rem; font-weight: 700;
}
.chs-tag.is-dim { background: var(--surface-2); color: var(--text-mid); }
.chs-sub { color: var(--text-dim); font-size: .8rem; }
.chs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-xs); }
.chs-fact { padding: var(--sp-xs) var(--sp-sm); border-radius: var(--radius-sm); background: var(--surface-2); }
.chs-fact small { display: block; color: var(--text-dim); font-size: .7rem; }
.chs-fact b { font-size: .9rem; font-variant-numeric: tabular-nums; }
.chs-fact.is-warn b { color: var(--danger); }
.chs-note { margin: 0; color: var(--text-dim); font-size: .78rem; line-height: 1.5; }
.chs-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--sp-sm); }

.chs-btn {
  min-height: 2.75rem; padding: 0 var(--sp-md);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font-size: .9rem; font-weight: 700; cursor: pointer;
}
.chs-btn:active { filter: brightness(.94); }
.chs-btn.is-go { border-color: var(--accent); background: var(--accent); color: var(--surface); }
.chs-btn:disabled { opacity: .4; cursor: default; }
.chs-btn small { font-weight: 400; opacity: .8; }
body.is-busy .chs-btn, body.is-busy .chs-sb { opacity: .55; cursor: wait; }

/* 결정(계절 변화): 항해사의 말 + 선택지. 닫을 수 없다 */
/* 손잡이가 아래로 겹쳐(margin 음수) 말머리(항해사 · 계절 변화)를 덮는다 — 그만큼 띄워 패널을 위로 키운다 */
.chs-talk { display: flex; gap: var(--sp-sm); align-items: flex-start; padding-top: var(--sp-sm); }
.chs-face { flex: none; width: 3rem; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--note-blue); }
.chs-face svg { display: block; width: 100%; height: 100%; fill: var(--text-mid); }
.chs-talk p { margin: 0; font-size: .92rem; line-height: 1.6; }
.chs-talk b { display: block; color: var(--accent); font-size: .78rem; }
.chs-choices { display: flex; flex-direction: column; gap: var(--sp-xs); }
.chs-choice {
  display: flex; align-items: center; gap: var(--sp-sm); min-height: 2.75rem; padding: 0 var(--sp-md);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  color: var(--text); font-size: .9rem; text-align: left; cursor: pointer;
}
.chs-choice small { margin-left: auto; color: var(--text-dim); }
.chs-choice.is-picked { border-color: var(--accent); }

/* ================= 전체 레이어 ================= */
/* 오른쪽에서 밀려 들어오고 나간다. 닫힌 동안은 보이지 않게(visibility 를 밀려 나간 뒤에 끈다) */
.chs-layer {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(3.25rem + var(--safe-t)); z-index: 6;
  display: flex; flex-direction: column; background: var(--surface);
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.chs-layer.is-open { transform: none; visibility: visible; transition: transform .3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .chs-sheet, .chs-layer, .chs-layer.is-open, .chs-toast, .chs-grab::before { transition: none; }
}
.chs-layer-head { display: flex; align-items: center; gap: var(--sp-xs); flex: none; padding: var(--sp-xs); }
.chs-layer-title { margin: 0; font-family: var(--ed-display); font-size: 1.15rem; }
.chs-tabs { display: flex; flex: none; overflow-x: auto; border-bottom: var(--hairline) solid var(--line); }
.chs-tab {
  flex: none; min-height: 2.75rem; padding: 0 var(--sp-md);
  border: 0; border-bottom: var(--stroke-2) solid transparent; background: none;
  color: var(--text-mid); font-size: .88rem; cursor: pointer;
}
.chs-tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); font-weight: 700; }
.chs-layer-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-sm) var(--sp-md) var(--sp-lg); }

/* 목록 줄(품목·화물·배). 이름·숫자가 위, 입력·버튼이 아래 줄 */
.chs-row { display: flex; flex-direction: column; gap: var(--sp-xs); padding: var(--sp-sm) 0; border-bottom: var(--hairline) solid var(--line); }
.chs-row-head { display: flex; align-items: baseline; gap: var(--sp-sm); }
.chs-row-head b { font-size: .95rem; }
.chs-row-head .chs-num { margin-left: auto; }
.chs-num { font-variant-numeric: tabular-nums; }
.chs-row-sub { display: flex; flex-wrap: wrap; gap: 0 var(--sp-md); color: var(--text-dim); font-size: .78rem; }
.chs-row-sub .is-up { color: var(--cat-work); }
.chs-row-sub .is-down { color: var(--danger); }
.chs-role { padding: 0 .35rem; border-radius: var(--radius-sm); background: var(--note-yellow); color: var(--text); font-size: .7rem; }
.chs-role.is-demand { background: var(--note-pink); }
/* 교역소 목록(구매 시세판 · 판매 손익표). 줄을 누르면 고르고, 수량·거래는 아래 콘솔에서 한다.
   고른 줄의 바탕이 가장자리까지 차도록 본문 안쪽 여백만큼 밖으로 뺀다 */
.chs-trade { margin: calc(-1 * var(--sp-sm)) calc(-1 * var(--sp-md)) 0; }
.chs-trade-head, .chs-trade-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem 3.6rem 3.4rem; gap: var(--sp-sm); align-items: center;
  padding: .6rem var(--sp-md);
}
.chs-trade-head { position: sticky; top: 0; z-index: 1; padding-block: .4rem; background: var(--surface); color: var(--text-dim); font-size: .72rem; }
.chs-trade-head span:not(:first-child), .chs-trade-row > span:not(:first-child) { text-align: right; }
.chs-trade-row {
  width: 100%; border: 0; border-top: var(--hairline) solid var(--line); background: none;
  color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
  transition: background-color .2s var(--ease);
}
.chs-trade-row.is-on { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.chs-trade-nm { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.chs-trade-nm small { flex-basis: 100%; color: var(--text-dim); font-size: .72rem; }
.chs-trade .is-up, .chs-console .is-up { color: var(--gain); }
.chs-trade .is-down, .chs-console .is-down { color: var(--danger); }
.chs-trade .is-dim { color: var(--text-dim); }
.chs-stock { display: block; width: 100%; height: .35rem; overflow: hidden; border-radius: 1rem; background: var(--surface-2); }
.chs-stock i { display: block; height: 100%; border-radius: 1rem; background: var(--text-dim); transition: width .12s var(--ease); }
.chs-trade-row.is-on .chs-stock i { background: var(--accent); }

.chs-trade-foot { padding-top: var(--sp-sm); }
.chs-trade-row.is-static { cursor: default; }
.chs-trade-sec { padding: .9rem var(--sp-md) .3rem; border-top: var(--hairline) solid var(--line); color: var(--text-dim); font-size: .74rem; }
.chs-trade.is-dock .chs-trade-head, .chs-trade.is-dock .chs-trade-row { grid-template-columns: minmax(0, 1fr) 2.6rem 3.4rem 4.8rem; }

/* 시세 탭: 색 격자(품목 × 여기·이웃). 칸 색은 JS 가 차이만큼 넣는다. 잠긴 상태는 이웃 목록 + 정보 사기 */
.chs-heat { display: grid; gap: .25rem; align-items: center; }
.chs-heat.is-n2 { grid-template-columns: 4.5rem repeat(2, minmax(0, 1fr)); }
.chs-heat.is-n3 { grid-template-columns: 4.5rem repeat(3, minmax(0, 1fr)); }
.chs-heat.is-n4 { grid-template-columns: 4.5rem repeat(4, minmax(0, 1fr)); }
.chs-heat.is-n5 { grid-template-columns: 4.5rem repeat(5, minmax(0, 1fr)); }
.chs-heat-col { display: flex; flex-direction: column; align-items: center; color: var(--text-dim); font-size: .74rem; line-height: 1.3; }
.chs-heat-col small { font-size: .68rem; }
.chs-heat-nm { overflow: hidden; font-size: .84rem; white-space: nowrap; text-overflow: ellipsis; }
.chs-heat-cell {
  height: 1.9rem; padding: 0; border: 0; border-radius: .35rem; background: var(--surface-2); cursor: pointer;
  transition: outline-color .2s var(--ease);
  outline: var(--stroke-2) solid transparent; outline-offset: calc(-1 * var(--stroke-2));
}
.chs-heat-cell.is-none { border: var(--hairline) dashed var(--line); background: none; }
.chs-heat-cell.is-on { outline-color: var(--text); }
.chs-lock { display: flex; flex-direction: column; gap: var(--sp-sm); }
.chs-near { margin: 0; padding: 0; list-style: none; }
.chs-near li { display: flex; justify-content: space-between; padding: .45rem 0; border-bottom: var(--hairline) solid var(--line); font-size: .9rem; }
.chs-near small { color: var(--text-dim); }

/* 교역 콘솔: 레이어 맨 아래에 붙어 있다. 수량은 끌어서 정한다 */
.chs-console {
  display: flex; flex: none; flex-direction: column; gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md) calc(var(--sp-sm) + var(--safe-b));
  border-top: var(--hairline) solid var(--line); background: var(--surface-2);
}
.chs-console[hidden] { display: none; }
.chs-console-row { display: flex; align-items: center; gap: var(--sp-sm); }
.chs-console-txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.chs-console-txt b { font-size: .95rem; }
.chs-console-txt small { color: var(--text-dim); font-size: .76rem; }
.chs-console-txt b small { font-weight: 400; }
.chs-range { width: 100%; height: 2rem; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* 보고서: 기간 고르기(분기·연간) + 한 장 */
.chs-chips { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-md); }
.chs-chip {
  min-height: 2.75rem; padding: 0 var(--sp-sm); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-mid); font-size: .8rem; cursor: pointer;
}
.chs-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.chs-report-title { display: flex; align-items: center; gap: var(--sp-sm); margin: 0 0 var(--sp-sm); font-family: var(--ed-display); font-size: 1.15rem; }
.chs-report .is-up { color: var(--gain); }
.chs-report .is-down { color: var(--danger); }
.chs-report .chs-table { margin-bottom: var(--sp-sm); }
.chs-empty { padding: var(--sp-lg) 0; color: var(--text-dim); text-align: center; font-size: .88rem; }
.chs-h { margin: var(--sp-md) 0 var(--sp-xs); color: var(--text-mid); font-size: .82rem; }
.chs-h:first-child { margin-top: 0; }

.chs-dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem var(--sp-md); margin: 0; font-size: .88rem; }
.chs-dl dt { color: var(--text-dim); }
.chs-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.chs-dl small { color: var(--text-dim); }
.chs-bar { height: .5rem; overflow: hidden; border-radius: 1rem; background: var(--surface-2); }
.chs-bar i { display: block; height: 100%; background: var(--accent); }
.chs-bar.is-low i { background: var(--danger); }

/* 시세 표는 항구가 많아 옆으로 민다 */
.chs-scroll-x { overflow-x: auto; }
.chs-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.chs-table th, .chs-table td { padding: .35rem .4rem; border-bottom: var(--hairline) solid var(--line); text-align: left; white-space: nowrap; }
.chs-table th { color: var(--text-dim); font-weight: 400; }
.chs-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.chs-table small { color: var(--text-dim); }

.chs-log li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--sp-sm); padding: .35rem 0; border-bottom: var(--hairline) solid var(--line); font-size: .82rem; line-height: 1.5; }
.chs-log { margin: 0; padding: 0; list-style: none; }
.chs-log span { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.chs-log em { font-style: normal; font-variant-numeric: tabular-nums; }
.chs-log .is-month { color: var(--text-dim); }
.chs-log .is-event, .chs-log .is-person { color: var(--accent); }
.chs-log b { display: block; }
.chs-log .is-big b { color: var(--accent); }

/* ================= 기록(세이브 슬롯) ================= */
/* 자동 1 + 수동 4 다섯 칸과 확인 칸이 스크롤 없이 한 화면에 들게 칸을 낮게(댄 결정) */
.chs-slots { margin: 0; padding: 0; list-style: none; }
.chs-slot {
  display: flex; align-items: center; gap: var(--sp-sm); width: 100%; min-height: 4rem; padding: var(--sp-xs) 0;
  border: 0; border-bottom: var(--hairline) solid var(--line); border-radius: 0; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.chs-slot.is-fixed { cursor: default; }
.chs-slot.is-picked { background: var(--surface-2); }
.chs-slot-no {
  flex: none; min-width: 2.5rem; padding: .1rem var(--sp-xs); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-mid); font-size: .72rem; font-weight: 700; text-align: center;
}
.chs-slot.is-auto .chs-slot-no { background: var(--accent); color: var(--surface); }
.chs-slot-body { flex: 1; min-width: 0; font-size: .78rem; line-height: 1.45; }
.chs-slot-body b { display: flex; justify-content: space-between; gap: var(--sp-sm); font-size: .88rem; }
.chs-slot-body b small { color: var(--text-dim); font-weight: 400; font-variant-numeric: tabular-nums; }
.chs-slot-body b.is-empty { color: var(--text-dim); font-weight: 400; }
.chs-slot-body span, .chs-slot-body em { display: block; overflow: hidden; color: var(--text-mid); font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.chs-slot-body em { color: var(--text); }
.chs-slot-ask { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: var(--sp-md); }
.chs-slot-memo {
  min-height: 2.75rem; padding: 0 var(--sp-sm); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 1rem;
}

/* ================= 항구 안 · 시설 메뉴 ================= */
/* 위: 시설(아이콘 · 이름 · 안쪽 탭). 구분선 아래: 인물(초상화 · 부르는 이름 · 한마디) */
.chs-facs, .chs-people { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
.chs-fac, .chs-person {
  display: flex; align-items: center; gap: var(--sp-sm); min-height: 3.75rem; padding: var(--sp-sm);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text);
  text-align: left; cursor: pointer;
}
.chs-fac > span, .chs-person > span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.chs-fac b, .chs-person b { font-size: .95rem; }
.chs-fac small, .chs-person small { color: var(--text-dim); font-size: .72rem; line-height: 1.4; }
.chs-fac:active, .chs-person:active { filter: brightness(.94); }
/* 시설 설명은 두 줄 자리를 늘 잡는다 — 은행처럼 탭 이름이 두 줄로 넘어가는 칸과 높이가 같게 */
.chs-fac small { display: -webkit-box; min-height: 2.8em; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chs-fac-ico { flex: none; width: 2.25rem; height: 2.25rem; padding: .4rem; border-radius: var(--radius-sm); background: var(--surface); color: var(--accent); }
.chs-person { align-items: flex-start; }
.chs-person .chs-face { width: 2.75rem; }
.chs-person small { color: var(--text-mid); font-style: italic; }
.chs-facs-rule { margin: var(--sp-md) 0; border: 0; border-top: var(--hairline) solid var(--line); }
/* 항구 그림(도트 재생기 — 시험, 10-13). 레이어 좌우 끝까지 꽉 채운다(10-13 댄 — 좌우 여백 없이).
   폭에 맞춰 늘이므로 배율이 정수가 아니다 — 도트 크기가 조금씩 다를 수 있다. 도트 그림은 최근접으로 키운다 */
.chs-scene { margin: 0 calc(-1 * var(--sp-md)); color: var(--text-dim); font-size: .8rem; cursor: pointer; }
.chs-scene canvas { display: block; width: 100%; height: auto; }
.chs-scene canvas.is-px { image-rendering: pixelated; }
/* 그림이 있는 항구 메뉴(10-14 댄): 그림을 레이어 맨 위까지 올리고 머리줄(뒤로 · 제목)을 그 위에 띄운다. 글자는 판과 상관없이 흰색 */
.chs-layer.has-scene .chs-layer-head { position: absolute; left: 0; right: 0; top: 0; z-index: 1; }
.chs-layer.has-scene .chs-layer-body { padding-top: 0; }
.chs-layer.has-scene .chs-layer-title { color: #ffffff; text-shadow: 0 .05rem .4rem rgb(0 0 0 / 70%); }
.chs-layer.has-scene #chsLayerBack { color: #ffffff; filter: drop-shadow(0 .05rem .3rem rgb(0 0 0 / 70%)); }

/* ================= 금융(은행 · 대부업 · 선단 › 금융) ================= */
.chs-fin-form { display: flex; flex-direction: column; gap: var(--sp-xs); margin: var(--sp-sm) 0; }
.chs-fin-amt {
  min-height: 2.75rem; padding: 0 var(--sp-sm); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.chs-fin-form .chs-chips { margin-bottom: 0; }
.chs-fin-pay { margin-top: 0; color: var(--accent); }
.chs-note.is-warn { color: var(--warn); }
.chs-row .chs-btn { align-self: flex-start; min-height: 2.25rem; }
.chs-row-sub b.is-down { color: var(--danger); }

/* ================= 항구 · 인물(대화엔진, chsea-talk) ================= */
.chs-npcs { display: flex; flex-direction: column; gap: var(--sp-xs); }
.chs-npc {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-height: 2.75rem; padding: var(--sp-sm) var(--sp-md);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text);
  text-align: left; cursor: pointer;
}
.chs-npc b { font-size: .95rem; }
.chs-npc small { color: var(--text-dim); font-size: .78rem; }
.chs-convo-head { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-sm); }
.chs-convo-head span { display: flex; flex-direction: column; min-width: 0; }
.chs-convo-head small { color: var(--text-dim); font-size: .75rem; }
/* NPC 말은 왼쪽 말풍선, 플레이어 행동은 오른쪽 꼬리표 — 이름 없이 자리로 나눈다 */
.chs-convo {
  display: flex; flex-direction: column; gap: var(--sp-xs); margin-bottom: var(--sp-sm); padding: var(--sp-sm);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.chs-convo p { margin: 0; }
.chs-say { display: flex; flex-direction: column; align-self: flex-start; max-width: 92%; }
.chs-say span { padding: .5rem .75rem; border-radius: var(--radius-md); background: var(--surface); font-size: .92rem; line-height: 1.6; }
.chs-say small { margin: .15rem .3rem 0; color: var(--text-dim); font-size: .7rem; }
.chs-said.is-act { align-self: flex-end; padding: .25rem .6rem; border-radius: var(--radius-sm); background: var(--accent); color: var(--surface); font-size: .8rem; }
.chs-said.is-event { padding: .3rem .6rem; border-left: var(--stroke-2) solid var(--warn); color: var(--warn); font-size: .8rem; }
.chs-said.is-note { align-self: center; color: var(--text-dim); font-size: .78rem; }
.chs-convo-acts { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.chs-btn.is-event { border-color: var(--warn); color: var(--warn); }

/* 치트: 테스트용으로 상대 NPC 수치를 직접 바꾼다. 평소에는 접어 둔다 */
.chs-cheat { margin-top: var(--sp-md); padding: var(--sp-sm) var(--sp-md); border: var(--hairline) dashed var(--line); border-radius: var(--radius-sm); }
.chs-cheat summary { min-height: 2.75rem; display: flex; align-items: center; color: var(--text-mid); font-size: .85rem; font-weight: 700; cursor: pointer; }
.chs-cheat .chs-h small { color: var(--text-dim); font-weight: 400; }
.chs-cheat-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 2rem; align-items: center; gap: .1rem var(--sp-xs); font-size: .82rem; }
.chs-cheat-row input[type="range"] { width: 100%; height: 2.25rem; margin: 0; accent-color: var(--accent); }
.chs-cheat-row b { text-align: right; font-variant-numeric: tabular-nums; }
.chs-cheat-row small { grid-column: 2 / 4; margin-top: -.4rem; color: var(--text-dim); font-size: .7rem; }
.chs-cheat-row.is-select { grid-template-columns: 6rem minmax(0, 1fr); margin: .25rem 0; }
.chs-cheat select, .chs-cheat-sit input {
  min-height: 2.25rem; padding: 0 .4rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: .85rem;
}
.chs-cheat-reopen { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin: var(--sp-xs) 0; }
.chs-cheat-check { display: flex; align-items: center; gap: var(--sp-xs); min-height: 2.25rem; font-size: .85rem; }
.chs-cheat-sit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xs); }
.chs-cheat-sit label { display: flex; flex-direction: column; gap: .15rem; color: var(--text-dim); font-size: .75rem; }
.chs-cheat-sit input, .chs-cheat-sit select { width: 100%; }
/* 치트 안의 디버그(왜 이 대사인가·훑기) — 옛 대화 테스트 화면에서 옮겼다. 출시판에서는 치트째 뺀다 */
.chs-cheat-sub { margin: var(--sp-xs) 0; padding: 0 var(--sp-sm); border-radius: var(--radius-sm); background: var(--surface-2); }
.chs-cheat-sub summary { min-height: 2.25rem; font-size: .82rem; }
.chs-cheat-sub summary small { margin-left: var(--sp-xs); color: var(--text-dim); font-weight: 400; }
.chs-cheat-sub[open] { padding-bottom: var(--sp-sm); }
.chs-cheat meter { width: 100%; height: .6rem; }

.chs-dlg-values { display: grid; gap: .25rem; }
.chs-dlg-value { display: grid; grid-template-columns: 2.5rem 1fr 2rem; align-items: center; gap: var(--sp-xs); font-size: .8rem; }
.chs-dlg-value b { text-align: right; font-variant-numeric: tabular-nums; font-size: .78rem; }

.chs-dlg-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-xs); margin: var(--sp-sm) 0 var(--sp-xs); font-size: .8rem; color: var(--text); }
.chs-dlg-h small { color: var(--text-dim); font-weight: 400; font-size: .7rem; }
.chs-dlg-pick { margin: var(--sp-xs) 0 0; font-size: .9rem; }
.chs-dlg-pick small { color: var(--text-dim); font-size: .7rem; }

.chs-dlg-intent { margin: .2rem 0; border-radius: var(--radius-sm); }
.chs-dlg-intent summary {
  display: grid; grid-template-columns: 6rem 1fr 3rem; align-items: center; gap: var(--sp-xs);
  min-height: 2rem; padding: .2rem .4rem; cursor: pointer; font-size: .8rem;
}
.chs-dlg-intent summary small { color: var(--text-dim); font-size: .66rem; }
.chs-dlg-intent summary b { text-align: right; font-variant-numeric: tabular-nums; font-size: .76rem; }
.chs-dlg-intent.is-pick summary { background: var(--surface); color: var(--accent); font-weight: 700; }
.chs-dlg-intent.is-off { opacity: .5; }

.chs-dlg-terms { width: 100%; margin: .2rem 0 .4rem; border-collapse: collapse; font-size: .72rem; }
.chs-dlg-terms td { padding: .15rem .3rem; border-top: var(--hairline) solid var(--line); }
.chs-dlg-terms td:nth-child(2), .chs-dlg-terms td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chs-dlg-terms tr.is-zero { color: var(--text-dim); }

.chs-dlg-cands, .chs-dlg-deltas { margin: 0; padding: 0; list-style: none; }
.chs-dlg-cands li { margin: .3rem 0; padding: .35rem .5rem; border-left: var(--stroke-2) solid var(--line); font-size: .76rem; }
.chs-dlg-cands li.is-pick { border-left-color: var(--accent); background: var(--surface); }
.chs-dlg-cands li.is-ok { border-left-color: var(--gain); }
.chs-dlg-cands li.is-fail { opacity: .6; }
.chs-dlg-cand-head { display: block; color: var(--text-dim); font-size: .68rem; }
.chs-dlg-cand-head b { color: var(--accent); }
.chs-dlg-cand-text { display: block; margin: .1rem 0; color: var(--text); }
.chs-dlg-conds { display: flex; flex-wrap: wrap; gap: .15rem .6rem; }
.chs-dlg-conds i { font-style: normal; font-size: .68rem; color: var(--text-dim); }
.chs-dlg-conds i.is-ok { color: var(--gain); }
.chs-dlg-conds i.is-fail { color: var(--danger); }
.chs-dlg-deltas li { padding: .15rem 0; font-size: .78rem; }

/* 훑기 표는 의도 칸이 늘어 폰 폭을 넘는다 — 표만 옆으로 민다 */
.chs-dlg-scroll { overflow-x: auto; margin-top: var(--sp-xs); }
.chs-dlg-sweep { width: 100%; border-collapse: collapse; font-size: .72rem; }
.chs-dlg-sweep th, .chs-dlg-sweep td { padding: .2rem .3rem; border-bottom: var(--hairline) solid var(--line); text-align: right; white-space: nowrap; }
.chs-dlg-sweep th:nth-child(2), .chs-dlg-sweep td:nth-child(2) { text-align: left; }
.chs-dlg-sweep td { font-variant-numeric: tabular-nums; }
.chs-dlg-sweep td.is-pick { color: var(--accent); font-weight: 700; }
/* 의도가 바뀐 줄 — 문턱이 어디인지 바로 보이게 */
.chs-dlg-sweep tr.is-flip td { border-top: var(--stroke-2) solid var(--warn); }

/* ================= 데스크톱 ================= */
/* 폰 폭 기둥으로 사이트 헤더 아래 가운데. 미디어 쿼리는 우선순위를 올리지 않으니 기본 규칙보다 뒤(파일 끝)에 둔다 */
@media (min-width: 48.01em) {
  .chs-app {
    width: 26rem; height: min(52rem, calc(100dvh - var(--header-total) - var(--sp-lg) * 2));
    margin: var(--sp-lg) auto; padding: 0;
    border: var(--hairline) solid var(--line); border-radius: var(--radius-md);
  }
  .chs-layer { top: 3.25rem; border-radius: 0 0 var(--radius-md) var(--radius-md); }
}