/* そろけんクエスト ものがたり：マンガの見た目（公開ページ・管理画面で共通） */
.sv-root {
  --ink: #16131f;
  --gutter: 1.4cqw;
  container-type: inline-size;
  max-width: 760px;
  margin: 0 auto;
  font-family: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  font-weight: 800;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
.sv-page {
  background: #fff;
  padding: 2.2cqw;
  margin: 0 0 3cqw;
  border-radius: 1cqw;
  box-shadow: 0 0.4cqw 1.6cqw rgba(22, 19, 31, 0.18);
}
.sv-row {
  display: flex;
  flex-direction: row-reverse;   /* 日本のマンガと同じく、同じ段のコマは右から左へ読む */
  gap: var(--gutter);
  height: calc(var(--h) * 1cqw);
  margin-bottom: var(--gutter);
}
.sv-row:last-child { margin-bottom: 0; }
.sv-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  border: 0.55cqw solid var(--ink);
  overflow: hidden;
  background: #cfe8ff;
}
.sv-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}

/* 絵がまだないコマの色（時間や場所の感じだけ出す） */
.sv-tone-morning { background: linear-gradient(180deg, #ffd98a 0%, #ffeec2 38%, #9fdcff 100%); }
.sv-tone-day     { background: linear-gradient(180deg, #62bdf7 0%, #bfe7ff 62%, #c9efb0 100%); }
.sv-tone-room    { background: linear-gradient(180deg, #ffe7b8 0%, #f6c98a 70%, #c98f56 100%); }
.sv-tone-sunset  { background: linear-gradient(180deg, #5b4a9c 0%, #f08a5d 55%, #ffd36e 100%); }
.sv-tone-night   { background: radial-gradient(120% 90% at 70% 10%, #46508f 0%, #20264f 55%, #121530 100%); }
.sv-tone-glow    { background: radial-gradient(70% 70% at 50% 62%, #fff6b0 0%, #ffc93c 34%, #5a3d8f 78%, #1b1638 100%); }
.sv-tone-dark    { background: linear-gradient(180deg, #3b3550 0%, #1d1a2b 100%); }
.sv-note {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.2cqw 1.6cqw;
  font-size: 2.5cqw; line-height: 1.45; font-weight: 600;
  color: #fff; background: rgba(22, 19, 31, 0.58);
  max-height: 46%; overflow: hidden;
}

/* ふきだし */
.sv-b {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  box-sizing: border-box;
  font-size: calc(14px * var(--s, 1));
  font-size: calc(4cqw * var(--s, 1));
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-break: keep-all;      /* 分かち書きの空白でだけ改行する（単語の途中で折らない） */
  overflow-wrap: break-word;
  line-break: strict;
  isolation: isolate;
  z-index: 2;
}
.sv-t { display: block; position: relative; z-index: 1; }
.sv-h { width: max-content; max-width: var(--len); }
.sv-v { writing-mode: vertical-rl; height: max-content; max-height: var(--len); width: max-content; }
.sv-v .sv-t { text-orientation: mixed; }
.sv-tcy { text-combine-upright: all; -webkit-text-combine: horizontal; }
.sv-b rt { font-size: 0.5em; font-weight: 700; letter-spacing: 0; }

.sv-say, .sv-think {
  background: #fff;
  border: 0.5cqw solid var(--ink);
  border-radius: 46% / 42%;
  padding: 2.4cqw 2cqw;
}
.sv-say.sv-h, .sv-think.sv-h { padding: 2cqw 3.4cqw; border-radius: 2.6em / 2em; }
/* たて書きは角の丸を小さくして、文字が楕円の外に出ないようにする */
.sv-say.sv-v, .sv-think.sv-v { padding: 3cqw 2.4cqw; border-radius: 2em / 2.6em; }

/* しっぽ（ふつうのふきだし） */
.sv-say[class*="sv-tail-"]::after {
  content: ""; position: absolute; z-index: 0;
  width: 2.6cqw; height: 2.6cqw; background: #fff;
  border-right: 0.5cqw solid var(--ink); border-bottom: 0.5cqw solid var(--ink);
}
.sv-tail-b::after  { left: 50%; bottom: -1.75cqw; transform: translateX(-50%) rotate(45deg) skew(12deg, 12deg); }
.sv-tail-bl::after { left: 24%; bottom: -1.75cqw; transform: rotate(45deg) skew(22deg, 4deg); }
.sv-tail-br::after { right: 24%; bottom: -1.75cqw; transform: rotate(45deg) skew(4deg, 22deg); }
.sv-tail-t::after  { left: 50%; top: -1.75cqw; transform: translateX(-50%) rotate(225deg) skew(12deg, 12deg); }
.sv-tail-l::after  { left: -1.75cqw; top: 50%; transform: translateY(-50%) rotate(135deg) skew(12deg, 12deg); }
.sv-tail-r::after  { right: -1.75cqw; top: 50%; transform: translateY(-50%) rotate(-45deg) skew(12deg, 12deg); }

/* 心の声：点々のしっぽ */
.sv-think { border-style: dashed; color: #3a3560; }
.sv-think::after, .sv-think::before {
  content: ""; position: absolute; background: #fff; border: 0.4cqw solid var(--ink); border-radius: 50%;
}
.sv-think::after  { width: 2cqw; height: 2cqw; left: 22%; bottom: -3cqw; }
.sv-think::before { width: 1.1cqw; height: 1.1cqw; left: 14%; bottom: -5cqw; }

/* さけび：ギザギザ */
.sv-shout {
  padding: 7cqw 6cqw;
  font-size: calc(17px * var(--s, 1));
  font-size: calc(4.8cqw * var(--s, 1));
  font-weight: 900;
}
.sv-shout::before, .sv-shout::after {
  content: ""; position: absolute; z-index: 0;
  clip-path: polygon(50.0% 0.0%, 59.3% 9.1%, 71.7% 5.0%, 74.3% 19.5%, 89.1% 18.8%, 87.8% 31.8%, 98.7% 38.9%, 89.0% 50.0%, 98.7% 61.1%, 87.8% 68.2%, 89.1% 81.2%, 74.3% 80.5%, 71.7% 95.0%, 59.3% 90.9%, 50.0% 100.0%, 41.3% 88.0%, 28.3% 95.0%, 23.8% 82.8%, 10.9% 81.2%, 14.9% 66.9%, 1.3% 61.1%, 8.0% 50.0%, 1.3% 38.9%, 14.9% 33.1%, 10.9% 18.8%, 23.8% 17.2%, 28.3% 5.0%, 41.3% 12.0%);
}
.sv-shout::before { inset: 0; background: var(--ink); }
.sv-shout::after  { inset: 0.75cqw; background: #fff; }

/* 語り */
.sv-narr {
  background: #fff9da;
  border: 0.4cqw solid var(--ink);
  padding: 1.3cqw 2cqw;
  font-size: calc(12.5px * var(--s, 1));
  font-size: calc(3.5cqw * var(--s, 1));
  font-weight: 700;
  box-shadow: 0.6cqw 0.6cqw 0 rgba(22, 19, 31, 0.85);
}
.sv-narr.sv-v { padding: 2cqw 1.3cqw; }

/* 音 */
.sv-sfx {
  font-size: calc(24px * var(--s, 1));
  font-size: calc(6.4cqw * var(--s, 1));
  font-weight: 900;
  line-height: 1.1;
  color: var(--c, #ffdf2b);
  -webkit-text-stroke: 0.9cqw var(--ink);
  paint-order: stroke fill;
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-width: none;
}

/* 管理画面：コマを選ぶ・ふきだしを動かす */
.sv-pick { cursor: pointer; }
.sv-selected { outline: 1cqw solid #ff7a1a; outline-offset: -1cqw; }
.sv-drag { cursor: grab; touch-action: none; }
.sv-drag:active { cursor: grabbing; }

@media (prefers-reduced-motion: no-preference) {
  .sv-page { animation: sv-in 0.35s ease-out both; }
  @keyframes sv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}