/* ============ 座席指定 ============ */
.dlg-seat { width: min(1060px, 96vw); max-height: 94vh; }
.sm-top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.sm-top small { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--amber); }
.sm-top h3 { margin: 2px 0 0; }
.sm-flight { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-bottom: 3px; }
.sm-plane { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.sm-plane select {
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font: inherit; font-size: 13px; color-scheme: dark;
}

.sm-main { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.sm-lock { font-size: 11px; color: #ffb35c; }
.sm-plane select:disabled { opacity: .6; cursor: not-allowed; }
/* 座席表は、航空会社の座席表のような白い紙の上に */
.sm-scroll {
  position: relative; z-index: 0; max-height: 72vh; overflow: auto; border-radius: 12px; padding: 20px 0 30px;
  background: #f2f4f7; box-shadow: inset 0 0 0 1px #d9dee5;
}
.sm-map { width: max-content; margin: 0 auto; padding: 0 180px; }
.sm-map.narrow { padding: 0 150px; }

/* 機体の輪郭（二重線・丸い機首・細くなる尾） */
.sm-body {
  position: relative; padding: 0 34px; background: #fff;
  border: 2px solid #a9b2bd; border-radius: 50% 50% 42% 42% / 190px 190px 150px 150px;
}
.sm-body.narrow { border-radius: 50% 50% 42% 42% / 150px 150px 120px 120px; }
.sm-body::before { content: ''; position: absolute; inset: 5px; border: 1px solid #dde2e8; border-radius: inherit; pointer-events: none; }
.sm-cockpit { position: relative; height: 120px; }
.sm-body.narrow .sm-cockpit { height: 96px; }
.sm-cockpit::after {
  content: ''; position: absolute; left: 50%; bottom: 14px; width: 84px; height: 26px; transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 34'%3E%3Cg fill='none' stroke='%238f99a5' stroke-width='2'%3E%3Cpath d='M6 30 L14 8 L30 4 L32 26 Z'/%3E%3Cpath d='M36 25 L35 3 L47 2 L47 24 Z'/%3E%3Cpath d='M60 25 L61 3 L49 2 L49 24 Z'/%3E%3Cpath d='M90 30 L82 8 L66 4 L64 26 Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.sm-tail { height: 90px; }
.sm-body.narrow .sm-tail { height: 70px; }
/* 主翼（機体の外。後ろへ流れる形） */
.sm-wing { position: absolute; z-index: -1; width: 170px; background: #dde1e6; }
.sm-body.narrow .sm-wing { width: 140px; }
.sm-wing.l { right: 100%; clip-path: polygon(100% 0, 0 58%, 0 82%, 100% 62%); }
.sm-wing.r { left: 100%; clip-path: polygon(0 0, 100% 58%, 100% 82%, 0 62%); }

/* クラスの名前 */
.sm-sec { position: relative; padding: 2px 0 4px; }
.sm-label { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #5d6b7c; }
.sm-label::before, .sm-label::after { content: ''; flex: 1; height: 1px; background: #d7dde4; }
.sm-sec.first .sm-label { color: #a07a22; }
.sm-sec.business .sm-label { color: #6a4fb0; }
.sm-sec.premium .sm-label { color: #2f63b0; }

/* 列 */
.sm-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 0; }
.sm-no { width: 22px; flex: none; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #4a5563; }
.sm-grp { display: flex; gap: 2px; }
.sm-aisle { width: 20px; flex: none; }
.sm-head { padding: 0; }
.sm-letter { width: var(--sw, 24px); text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: #4a5563; }
.sm-sec.premium { --sw: 28px; }
.sm-sec.business { --sw: 30px; }
.sm-sec.first { --sw: 36px; }
/* 互い違いのビジネス席（奇数の列は窓ぎわ、偶数の列は通路ぎわ） */
.sm-sec.stag .sm-grp { min-width: calc(var(--sw) * 2 + 10px); }
.sm-sec.stag .sm-grp.g1 { min-width: calc(var(--sw) * 3 + 6px); }
.sm-sec.stag .odd .g0, .sm-sec.stag .even .g2 { justify-content: flex-start; }
.sm-sec.stag .even .g0, .sm-sec.stag .odd .g2 { justify-content: flex-end; }
.sm-sec.stag .odd .g1 { justify-content: center; }
.sm-sec.stag .even .g1 { justify-content: space-between; }
.sm-sec.stag .sm-head .sm-grp { justify-content: space-around; }

/* 席（線画：背もたれ・ひじかけ） */
.sm-seat {
  --sw: 24px; --sh: 24px; --ln: #6b7480;
  position: relative; flex: none; width: var(--sw); height: var(--sh); padding: 0; cursor: pointer;
  border: 1.5px solid var(--ln); border-radius: 5px 5px 3px 3px; background: #fff;
  transition: transform .12s, box-shadow .12s;
}
.sm-seat::before { content: ''; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 24%; border: 1.2px solid var(--ln); border-radius: 2px; background: #eef1f4; }
.sm-seat::after { content: ''; position: absolute; top: 3px; bottom: 3px; left: 2px; right: 2px; border-left: 1.2px solid #c3c9d1; border-right: 1.2px solid #c3c9d1; pointer-events: none; }
.sm-seat span { position: absolute; left: 0; right: 0; top: 2px; font-family: var(--mono); font-size: 8px; font-weight: 700; line-height: 1; color: #9aa3ad; text-align: center; }
.sm-seat.premium { --sw: 28px; --sh: 28px; --ln: #2f63b0; background: #f0f5fd; }
.sm-seat.business { --sw: 30px; --sh: 34px; --ln: #6a4fb0; background: #f3eefb; }
.sm-seat.business::before { background: #ddd0f3; }
.sm-seat.first { --sw: 36px; --sh: 38px; --ln: #a07a22; background: #fcf6e6; border-radius: 8px 8px 4px 4px; }
.sm-seat.first::before { background: #f1e1b5; }
.sm-seat.exit { --ln: #e0201c; border-width: 2px; }
.sm-seat:not(:disabled):hover { --ln: #e39500; transform: translateY(-1px); }
.sm-seat.busy { cursor: not-allowed; --ln: #a3abb5; background: #cfd4db; }
.sm-seat.busy::before { background: #b9c0c9; }
.sm-seat.busy::after { border-color: transparent; }
.sm-seat.busy span { visibility: hidden; }
.sm-seat.on { --ln: #a86f00; background: #ffc83d; box-shadow: 0 0 0 3px rgba(255, 200, 61, .5); transform: scale(1.1); z-index: 1; }
.sm-seat.on::before { background: #ffe08a; }
.sm-seat.on span { color: #3a2a00; }

/* 設備：G＝ギャレー（黄）、化粧室（水色）、共用モニター（青い線） */
.sm-block { justify-content: space-between; gap: 6px; padding: 8px 0; }
.sm-block .z { flex: 1; display: flex; gap: 3px; }
.sm-block .z.l { justify-content: flex-start; }
.sm-block .z.c { justify-content: center; }
.sm-block .z.r { justify-content: flex-end; }
.sm-block.mon { padding: 3px 0; }
.sm-t { display: grid; place-items: center; width: 32px; height: 30px; border: 1.5px solid #5aa9cc; background: #d6f0f8; color: #1d6fae; font-style: normal; }
.sm-t b { font-family: var(--mono); font-size: 14px; }
.sm-t svg { width: 19px; height: 19px; fill: currentColor; }
.sm-t.t-G { width: 40px; border-color: #c48e22; background: #ffd466; color: #4d3800; }
.sm-t.t-S { border-color: #9aa3ad; background: #eceff3; color: #5b6570; }
.sm-t.t-M { width: 46px; height: 5px; border: 0; border-radius: 1px; background: #18a8e6; }
/* 非常口（赤い三角。機体の外から中へ向く） */
.sm-door { position: absolute; top: 50%; width: 0; height: 0; transform: translateY(-50%); border: 8px solid transparent; }
.sm-door.l { left: -52px; border-left: 13px solid #e8112d; border-right: 0; }
.sm-door.r { right: -52px; border-right: 13px solid #e8112d; border-left: 0; }

/* 右側：選んだ席の説明と、見かた */
.sm-side { display: flex; flex-direction: column; gap: 14px; }
.sm-info { background: #0d1219; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-height: 120px; }
.sm-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.sm-sel { display: flex; align-items: baseline; gap: 10px; }
.sm-sel b { font-family: var(--mono); font-size: 34px; color: var(--amber); line-height: 1; }
.sm-sel span { font-size: 13px; color: var(--text); }
.sm-tips { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.75; color: #c9d2dd; }
.sm-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; font-size: 11.5px; color: #3f4a57; background: #f2f4f7; border-radius: 12px; padding: 12px 14px; }
.sm-legend b { grid-column: 1 / -1; color: #1c2430; font-size: 12px; }
.sm-legend span { display: flex; align-items: center; gap: 7px; line-height: 1.25; }
.sm-legend i.sm-seat { --sw: 20px; --sh: 20px; cursor: default; transform: none; box-shadow: none; }
.sm-legend .sm-t { flex: none; width: 24px; height: 22px; }
.sm-legend .sm-t b { font-size: 11px; }
.sm-legend .sm-t svg { width: 15px; height: 15px; }
.sm-legend .sm-t.t-G { width: 24px; }
.sm-legend .sm-t.t-M { width: 24px; height: 5px; }
.sm-door-mark { flex: none; width: 0; height: 0; margin: 0 5px; border: 8px solid transparent; border-top: 13px solid #e8112d; border-bottom: 0; }
.sm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* 機内の画面の、座席の表示 */
.fl-seat {
  background: rgba(255, 200, 61, .12); color: #ffd978; border: 1px solid rgba(255, 200, 61, .4); border-radius: 99px;
  padding: 2px 10px; font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer;
}
.fl-seat:hover { background: rgba(255, 200, 61, .22); }

@media (max-width: 760px) {
  .sm-main { grid-template-columns: 1fr; }
  .sm-scroll { max-height: 52vh; }
  .sm-map, .sm-map.narrow { padding: 0 70px; }
  .sm-wing, .sm-body.narrow .sm-wing { width: 60px; }
  .sm-plane { margin-left: 0; }
}