/* 스탯스토리 — 설정 창(js/settings.js): 소리 선택지와 크기 막대, 대사 속도, 진동, 저장 백업·불러오기.
   제목 줄과 아래 단추 줄은 늘 보이고 가운데만 창 안에서 스크롤된다(작은 휴대폰). 넓은 화면(760px 이상)에서는 두 칸(설정 | 저장)으로 놓는다. */
.modal.settings-modal {
  max-width: 520px; display: flex; flex-direction: column; gap: 0; padding: 14px 16px 16px; text-align: left;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
}
.settings-modal .set-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 0 10px; border-bottom: 2.5px dashed var(--paper-line); }
.settings-modal .set-head h2 { flex: 1; margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: -.5px; }
.settings-modal .set-gear svg { width: 30px; height: 30px; }
.settings-modal .set-x svg { width: 20px; height: 20px; }
/* 가운데(스크롤): 단추 테두리·초점 테가 잘리지 않게 양옆으로 8px 넓힌다 */
.settings-modal .set-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -8px; padding: 14px 8px 16px; }
.settings-modal .set-foot { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 12px; border-top: 2.5px dashed var(--paper-line); }
.settings-modal .set-btn { font-size: 16px; padding: 10px 14px 11px; }

/* 묶음(소리, 대사 속도 …) */
.set-sec { display: grid; gap: 10px; }
.set-sec + .set-sec, .set-col + .set-col { margin-top: 16px; padding-top: 16px; border-top: 2.5px dashed var(--paper-line); }
.set-h { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--f-ui); font-weight: 400; font-size: 18px; line-height: 1.2; color: var(--ink); }
.set-h svg { width: 24px; height: 24px; flex: none; }
.set-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }

/* 선택지(라디오를 이어 붙인 모양): 고른 칸은 보라색 */
.set-seg { display: flex; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); overflow: hidden; }
.set-opt { position: relative; flex: 1 1 auto; display: flex; } /* 칸이 글자보다 좁아지지 않게(긴 글자는 띄어쓰기에서 줄을 바꾼다) */
.set-seg.eq .set-opt { flex: 1 1 0; } /* 대사 속도·진동: 칸 너비를 똑같이 */
.set-opt + .set-opt { border-left: 2.5px solid var(--ink); }
.set-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.set-opt span {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 42px; padding: 6px 8px;
  font-family: var(--f-ui); font-size: 15.5px; line-height: 1.15; color: var(--ink-2); text-align: center; word-break: keep-all;
}
.set-opt span svg { width: 20px; height: 20px; flex: none; }
.set-opt:hover input:not(:checked) + span { background: #f4efff; }
.set-opt input:checked + span { background: linear-gradient(180deg, #a68cff 0%, var(--violet) 60%); color: #fff; text-shadow: 0 2px 0 var(--violet-deep); }
.set-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: -6px; border-radius: 10px; }
.set-sec.set-line { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; }
.set-line .set-seg { min-width: 132px; }
.set-line .set-note { grid-column: 1 / -1; }

/* 크기 막대: 민트색으로 차오르는 홈 + 금색 손잡이(손가락으로 잡기 쉽게 높이 40px) */
.set-vol { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) 3.1em; align-items: center; gap: 10px; transition: opacity .15s; }
.set-vol label { font-family: var(--f-ui); font-size: 15.5px; color: var(--ink-2); white-space: nowrap; }
.set-vol output { font-family: var(--f-num); font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.set-vol.is-off { opacity: .5; }
.set-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.set-range:focus { outline: none; }
.set-range:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 12px; }
.set-range::-webkit-slider-runnable-track {
  box-sizing: border-box; height: 16px; border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: inset 0 2px 0 rgba(43, 33, 64, .12);
  background: linear-gradient(90deg, var(--mint) calc(11.5px + (100% - 23px) * var(--p, 1)), #fff calc(11.5px + (100% - 23px) * var(--p, 1)));
}
.set-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 28px; height: 28px; margin-top: -8.5px;
  border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 2px 0 var(--ink);
  background: radial-gradient(circle at 38% 32%, #fff6c8 0 20%, var(--gold) 58%, var(--gold-deep) 100%);
}
.set-range::-moz-range-track {
  box-sizing: border-box; height: 16px; border: 2.5px solid var(--ink); border-radius: 999px;
  background: linear-gradient(90deg, var(--mint) calc(11.5px + (100% - 23px) * var(--p, 1)), #fff calc(11.5px + (100% - 23px) * var(--p, 1)));
}
.set-range::-moz-range-thumb {
  box-sizing: border-box; width: 28px; height: 28px; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 2px 0 var(--ink);
  background: radial-gradient(circle at 38% 32%, #fff6c8 0 20%, var(--gold) 58%, var(--gold-deep) 100%);
}

/* 대사 속도 미리 보기: 작은 대사 칸(글자가 찍혀도 높이가 그대로이게 다 찍힌 글을 숨겨 깔아 둔다) */
.set-preview { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 8px 12px; background: #fff; border: 2.5px solid var(--paper-line); border-radius: 12px; font-size: 15px; line-height: 1.6; }
.set-preview b { flex: none; font-family: var(--f-ui); font-weight: 400; font-size: 13.5px; color: #fff; background: var(--violet); border: 2px solid var(--ink); border-radius: 8px; padding: 1px 8px 2px; text-shadow: 0 1px 0 var(--violet-deep); }
.set-pv { flex: 1; min-width: 0; display: grid; font-family: var(--f-talk); word-break: keep-all; overflow-wrap: anywhere; }
.set-pv > span { grid-area: 1 / 1; }
.set-pv .ghost { visibility: hidden; }

/* 글꼴: 고른 글꼴로 안내 글을 보여 준다(게임체·기본체를 바꾸면 바로 바뀐다). '기본체' 칸은 기본체로 쓴다 */
.set-fontpv { font-family: var(--f-quiz); font-size: 15px; color: var(--ink); }
.set-opt input[name="set-font"][value="plain"] + span { font-family: var(--f-plain); font-weight: 500; }

/* 저장 코드 글 상자·단추·알림 */
.set-ta {
  display: block; width: 100%; min-height: 78px; max-height: 160px; resize: vertical; margin: 0; padding: 8px 10px;
  font-family: var(--f-ui); font-size: 13.5px; line-height: 1.45; color: var(--ink);
  background: #fff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 0 3px 0 rgba(43, 33, 64, .08);
  word-break: break-all; overflow-wrap: anywhere;
}
.set-ta[readonly] { background: var(--paper-2); }
.set-ta:focus { outline: 3px solid var(--violet); outline-offset: 2px; }
.set-ta::placeholder { color: #9a90b5; font-family: var(--f-ui); }
.set-code { display: grid; gap: 10px; scroll-margin: 14px; }
.set-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.set-btns .set-btn { flex: 1 1 auto; }
.set-meta { font-family: var(--f-num); font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.set-msg { margin: 0; font-family: var(--f-ui); font-size: 14.5px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; scroll-margin: 14px; }
.set-msg.bad { color: #a3192b; background: var(--bad-bg); border: 2px solid var(--bad); border-radius: 10px; padding: 7px 10px; }
.set-msg.ok { color: #0f6a3a; background: var(--ok-bg); border: 2px solid var(--ok); border-radius: 10px; padding: 7px 10px; }

/* 불러오기 확인 창(SS.ui.confirmBox)의 글: 이름이 줄 끝에서 쪼개지지 않게, 덮어쓸 기록은 작은 줄로 */
.set-keep { word-break: keep-all; }
.set-sub { display: block; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); word-break: keep-all; }

/* 휴대폰: 글 상자를 누를 때 화면이 확대되지 않게(16px 보다 작으면 iOS 가 확대한다) */
@media (pointer: coarse) {
  .set-ta { font-size: 16px; }
}
/* 아주 좁은 휴대폰(360px 미만): 선택지 칸을 조금 촘촘하게 */
@media (max-width: 359px) {
  .set-opt span { gap: 3px; padding: 6px 5px; font-size: 14.5px; }
  .set-opt span svg { width: 17px; height: 17px; }
}
/* 넓은 화면(태블릿·가로 휴대폰·PC): 왼쪽 설정, 오른쪽 저장 */
@media (min-width: 760px) {
  .modal.settings-modal { max-width: 820px; }
  .settings-modal .set-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .settings-modal .set-col + .set-col { margin: 0 0 0 20px; padding: 0 0 0 20px; border-top: 0; border-left: 2.5px dashed var(--paper-line); }
}