/* 基本レイアウト → 操作パネル → レスポンシブ設定 → カラー一覧 */
* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: #f5f6f7;
  color: #17212a;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 16px
}

button,
input {
  font: inherit
}

button,
a,
input {
  touch-action: manipulation
}

button {
  cursor: pointer;
  color: inherit
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #1566bf;
  outline-offset: 4px
}

main {
  max-width: 1600px;
  margin: auto
}

header {
  height: 96px;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dce1e5
}

.brand {
  font-size: 27px;
  font-weight: 850;
  letter-spacing: .06em;
  color: #17212a;
  text-decoration: none;
  line-height: 1
}

.brand span {
  display: block;
  font-size: 11px;
  letter-spacing: .24em;
  margin-top: 7px
}

.edition {
  font-size: 13px;
  letter-spacing: .13em
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 385px;
  min-height: 720px
}

.viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #e8edef;
  min-width: 0;
  overflow: hidden
}

.view-top,
.view-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 30px;
  gap: 12px;
  font-size: 13px;
  z-index: 1
}

.view-top {
  position: absolute;
  inset: 0 0 auto
}

.tag {
  padding: 7px 10px;
  border: 1px solid #87939b60;
  border-radius: 4px;
  letter-spacing: .03em
}

.canvas-wrap {
  flex: 1;
  position: relative;
  min-height: 540px
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: grab
}

canvas:active {
  cursor: grabbing
}

#loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #e8edef;
  font-size: 14px
}

.view-bottom {
  padding-top: 15px;
  padding-bottom: 15px;
  background: #ffffff30;
  position: absolute;
  inset: auto 0 0
}

.quiet {
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  font-size: 13px;
  white-space: nowrap
}

.controls {
  padding: 34px 27px;
  background: #fff
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 700;
  color: #747f88
}

h1 {
  font-size: 26px;
  letter-spacing: -.04em;
  margin: 12px 0
}

h2 {
  font-size: 15px;
  margin: 0
}

.intro>p:last-child {
  font-size: 12px;
  line-height: 1.8;
  color: #67737d
}

.control-section {
  margin-top: 30px
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
  margin-bottom: 14px
}

.section-heading>span {
  font-size: 12px;
  color: #67737d
}

.colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px
}

.colors button {
  background: #fff;
  border: 1px solid #dce0e3;
  border-radius: 8px;
  padding: 14px 4px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 120px
}

.colors button[aria-pressed=true] {
  border: 2px solid #17212a;
  padding: 13px 3px 11px;
  background: #f5f7f9
}

.colors i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px #0002;
  position: relative
}

.colors button[aria-pressed=true] i:after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #111;
  font-size: 22px;
  font-style: normal;
  text-shadow: 0 0 3px #fff8
}

.colors span {
  font-size: 14px
}

.colors small {
  font-size: 10px;
  letter-spacing: .08em;
  color: #7d8790
}

.backgrounds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px
}

.backgrounds button {
  padding: 0 0 9px;
  border: 1px solid #dce0e3;
  background: white;
  border-radius: 7px;
  overflow: hidden;
  font-size: 13px
}

.backgrounds button[aria-pressed=true] {
  outline: 2px solid #17212a;
  outline-offset: 1px
}

.backgrounds i {
  display: grid;
  place-items: center;
  height: 42px;
  margin-bottom: 9px
}

.light {
  background: linear-gradient(#e9eff2, #cbd4d8)
}

.dark {
  background: linear-gradient(#36414b, #131b23)
}

.photo {
  background: #f0f3f5;
  font-size: 26px;
  font-style: normal
}

.hint {
  font-size: 11px;
  line-height: 1.7;
  color: #7b858e;
  margin: 12px 0
}

.size-control {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 13px
}

.size-control label {
  white-space: nowrap
}

.size-control input {
  width: 100%;
  min-width: 20px;
  accent-color: #17212a;
  height: 32px
}

.size-control output {
  width: 45px;
  flex-shrink: 0;
  text-align: right
}

.disclaimer {
  font-size: 11px;
  line-height: 1.8;
  color: #7a848c;
  margin-top: 26px
}

details {
  font-size: 12px;
  line-height: 1.8;
  margin-top: 18px
}

summary {
  cursor: pointer;
  min-height: 36px
}

.requirements p {
  margin: 12px 0
}

.requirements a {
  color: #246394
}

#photo-status {
  font-size: 12px;
  color: #67532a
}

footer {
  display: flex;
  justify-content: space-between;
  padding: 20px 40px;
  font-size: 10px;
  letter-spacing: .1em;
  color: #7b858d
}

body.dark-scene .view-top,
body.dark-scene .view-bottom {
  color: #edf2f7
}

body.dark-scene .view-bottom {
  background: #0002
}

body.photo-scene .view-top,
body.photo-scene .view-bottom {
  color: white;
  text-shadow: 0 1px 4px #000
}

body.photo-scene .view-bottom {
  background: #0005
}

body.photo-scene .view-top {
  background: linear-gradient(#0005, transparent)
}

@media(min-width:1400px) {
  .canvas-wrap {
    min-height: 680px
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr) 430px
  }

  .controls {
    padding: 42px 36px
  }
}

@media(max-width:850px) {
  header {
    height: 72px;
    padding: 16px 20px
  }

  .brand {
    font-size: 21px
  }

  .brand span {
    font-size: 9px
  }

  .edition {
    font-size: 11px
  }

  .workspace {
    display: block;
    min-height: 0
  }

  .canvas-wrap {
    height: clamp(290px, 72vw, 470px);
    min-height: 0
  }

  .view-top {
    padding: 14px 18px;
    font-size: 11px
  }

  .view-bottom {
    padding: 6px 16px;
    font-size: 11px
  }

  .quiet {
    font-size: 11px
  }

  .controls {
    padding: 22px 20px
  }

  .intro h1 {
    font-size: 23px;
    margin: 4px 0
  }

  .eyebrow {
    display: none
  }

  .intro>p:last-child {
    margin: 6px 0
  }

  .control-section {
    margin-top: 22px
  }

  .colors button {
    min-height: 96px;
    padding: 10px 5px;
    gap: 6px
  }

  .colors button[aria-pressed=true] {
    padding: 9px 4px
  }

  .colors i {
    width: 34px;
    height: 34px
  }

  .colors small {
    display: none
  }

  .colors span {
    font-size: 14px
  }

  .backgrounds i {
    height: 30px
  }

  .size-control {
    margin-top: 16px
  }

  .disclaimer {
    margin-top: 18px
  }

  footer {
    padding: 18px 20px;
    gap: 10px;
    font-size: 9px
  }
}

@media(prefers-reduced-motion:no-preference) {
  button {
    transition: background .15s, border-color .15s
  }
}

/* Keep an explicit mobile stage: flex:1 with min-height:0 can collapse it. */
.canvas-wrap {
  flex: 1 0 auto
}

#car-fallback {
  position: absolute;
  width: 96%;
  height: 83%;
  object-fit: contain;
  left: 2%;
  top: 12%;
  pointer-events: none
}

#scene {
  visibility: hidden
}

#loading {
  inset: auto 12px 58px;
  background: #ffffffdd;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: center;
  pointer-events: none
}

#loading[hidden] {
  display: none !important
}

@media(max-width:850px) {
  .canvas-wrap {
    flex: none;
    height: clamp(290px, 72vw, 470px);
    min-height: 290px
  }
}

.palette-label {
  display: block;
  font-size: 14px;
  margin: 16px 0 8px
}

#color-search {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #c6cdd2;
  border-radius: 6px;
  font-size: 16px
}

.palette-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 14px
}

.palette-meta select {
  font: inherit;
  max-width: 150px;
  padding: 7px;
  border: 1px solid #c6cdd2;
  background: white;
  border-radius: 4px
}

.colors {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start
}

.colors button {
  min-height: 126px;
  justify-content: flex-start
}

.colors span {
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere
}

.colors small {
  display: block;
  font-size: 12px;
  letter-spacing: 0
}

.color-info {
  background: #f3f6f8;
  padding: 15px;
  margin-top: 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6
}

.color-info strong {
  font-size: 17px
}

.color-info p {
  margin: 6px 0
}

.color-info a {
  color: #1d5c8c
}

.palette-note {
  font-size: 13px;
  line-height: 1.7;
  color: #606c77
}

.section-heading {
  flex-wrap: wrap
}

.section-heading>span {
  font-size: 14px
}

.workspace {
  align-items: start
}

.viewer {
  height: 740px
}

.canvas-wrap {
  min-height: 0
}

.controls {
  min-width: 0
}

@media(min-width:851px) {
  .viewer {
    position: sticky;
    top: 0;
    height: min(820px, 100vh);
    min-height: 540px
  }

  .canvas-wrap {
    min-height: 0
  }
}

@media(max-width:850px) {
  .viewer {
    height: auto;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 3px 12px #0001
  }

  .canvas-wrap {
    height: clamp(250px, 65vw, 390px);
    min-height: 250px
  }

  .colors {
    max-height: 310px
  }

  .colors button {
    min-height: 112px
  }

  .colors small {
    display: block
  }

  .view-top {
    padding: 10px 14px
  }

  .controls {
    position: relative;
    z-index: 1
  }
}

/* カラー検索・編集ガイドへの導線 */
.palette-meta {
  flex-wrap: wrap;
  gap: 8px
}

.palette-meta label {
  font-size: 14px
}

.edit-links {
  font-size: 14px
}

.edit-links a,
.color-info a {
  color: #536473;
  text-underline-offset: 3px
}

/* 装備比較：選択中の車を見ながら押せる操作サイズを確保 */
.view-selector{display:flex;justify-content:center;gap:4px;padding:4px;background:#fff9;margin:0 auto;border:1px solid #bdc8ce;border-radius:10px;z-index:1}
.view-selector button{padding:9px 24px;min-height:40px;border:0;border-radius:7px;background:transparent;color:#34434e;font:inherit;font-size:14px;cursor:pointer}
.view-selector button[aria-pressed=true]{background:#172531;color:white}
.build-summary{margin:8px 18px 0;text-align:center;font-size:12px;color:#53616d;min-height:18px}
.configuration>label{display:block;font-size:14px;margin-bottom:7px}
.configuration>select{width:100%;padding:12px;background:white;border:1px solid #b7c3cb;border-radius:7px;font:inherit;font-size:16px}
.option-heading{margin-top:25px}.roof-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.roof-options button{border:1px solid #c3ccd2;border-radius:8px;background:#fff;padding:13px 9px;font:inherit;font-size:14px;min-height:58px;cursor:pointer}
.roof-options button[aria-pressed=true]{border-color:#172531;background:#172531;color:#fff}
.option-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;border-bottom:1px solid #dce2e6}.option-row strong{display:block;font-size:15px}.option-row small{display:block;font-size:12px;color:#65717b;margin-top:4px}
.option-row a,.source-link{display:inline-block;font-size:12px;color:#506b80;text-underline-offset:3px}.toggle{flex:none;padding:10px 16px;border-radius:20px;border:1px solid #aebec8;min-width:72px;min-height:44px;font:inherit;font-size:14px;background:#fff;cursor:pointer}.toggle[aria-pressed=true]{background:#172531;color:#fff;border-color:#172531}
#option-status{font-size:13px;color:#8b4e0d;line-height:1.6}.configuration .hint{font-size:13px;line-height:1.7}.view-selector button:focus-visible,.toggle:focus-visible,.roof-options button:focus-visible{outline:3px solid #bb8a18;outline-offset:3px}
@media(max-width:850px){.view-selector{margin-top:0}.view-selector button{padding:6px 24px;min-height:34px}.build-summary{margin:5px 12px 0;font-size:12px}.canvas-wrap{height:clamp(205px,52vw,320px);min-height:205px}.view-bottom{padding:8px 14px}}