:root { font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif; color: #191919; background: #f4f5f6; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, .load-label:focus-visible { outline: 3px solid #e51d2d; outline-offset: 3px; }
.config-shell { width: min(1540px, 100%); margin: 0 auto; padding: 0 28px 46px; }
.config-header { min-height: 85px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #dde0e3; }
.config-header img { width: 144px; height: auto; }
.config-header span { font-size: .81rem; font-weight: 700; color: #666b72; }
.config-intro { padding: 34px 0 27px; }
.eyebrow { margin: 0 0 6px; color: #df2135; font-size: .7rem; font-weight: 900; letter-spacing: .2em; }
h1 { margin: 0 0 8px; font-size: clamp(1.45rem, 2.7vw, 2.15rem); letter-spacing: -.03em; }
.config-intro > p:last-child { margin: 0; color: #60646a; line-height: 1.6; font-size: .9rem; }
.config-layout { display: grid; grid-template-columns: minmax(310px, 375px) minmax(0, 1fr); align-items: start; gap: 20px; }
.config-panel, .preview-wrap { min-width: 0; background: #fff; border: 1px solid #e0e2e5; border-radius: 17px; box-shadow: 0 12px 32px rgba(26,31,39,.05); }
.config-panel { padding: 8px 23px 23px; }
.config-section { padding: 21px 0 23px; border-bottom: 1px solid #e9ebed; }
.config-section h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 17px; font-size: 1rem; }
.config-section h2 span { color: #e51d2d; font-size: .8rem; letter-spacing: .08em; }
.config-section > label { display: block; margin: 14px 0 8px; font-size: .84rem; font-weight: 800; }
#companyName, #logoFile { width: 100%; min-height: 41px; border: 1px solid #d7dadd; border-radius: 9px; background: #fff; padding: 8px 10px; }
#logoFile { font-size: .75rem; }
.help { margin: 8px 0 0; color: #6e747b; font-size: .73rem; line-height: 1.55; }
.subtle-button { margin-top: 10px; padding: 5px 0; border: 0; color: #4b535d; background: transparent; font-size: .78rem; text-decoration: underline; }
.logo-size-row { display: grid; grid-template-columns: 1fr 100px 50px; align-items: center; gap: 9px; margin-top: 14px; font-size: .79rem; font-weight: 700; }
.logo-size-row input { min-width: 0; width: 100%; accent-color: #e51d2d; }
.logo-size-row output { color: #666b72; font-size: .7rem; white-space: nowrap; }
.color-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 75px; align-items: center; gap: 9px; min-height: 52px; border-top: 1px solid #f0f1f2; }
.color-row label { font-size: .82rem; font-weight: 700; }
.color-row input, .font-color-row input { width: 39px; height: 35px; border: 0; padding: 1px; background: transparent; cursor: pointer; }
.color-row output { font-size: .7rem; color: #666b72; font-variant-numeric: tabular-nums; }
.font-color-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.font-color-row { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid #e3e5e7; border-radius: 9px; font-size: .75rem; }
.font-color-row code { color: #505861; font-size: .72rem; }
.font-color-row .remove-color { margin-left: auto; width: 24px; height: 24px; border: 0; border-radius: 50%; color: #6c7279; background: #f0f1f2; font-size: 1rem; line-height: 1; }
.font-color-row .remove-color:disabled { opacity: .35; cursor: not-allowed; }
.add-color-button { width: 100%; margin-top: 11px; padding: 9px 12px; border: 1px dashed #c8cdd2; border-radius: 9px; color: #333b44; background: #fff; font-size: .78rem; font-weight: 800; }
.add-color-button:hover { border-color: #e51d2d; }
.add-color-button:disabled { opacity: .45; cursor: not-allowed; }
.font-choices { display: grid; gap: 8px; margin-top: 13px; }
.font-choices label { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #e4e6e8; border-radius: 9px; font-size: .85rem; cursor: pointer; }
.font-choices input { accent-color: #e51d2d; }
.config-actions { padding-top: 21px; }
.primary-button { width: 100%; min-height: 47px; padding: 10px; color: #fff; background: #df2135; border: 0; border-radius: 9px; font-weight: 800; }
.primary-button:hover { background: #bd192b; }
.load-label { display: block; width: fit-content; margin-top: 14px; color: #282d33; font-size: .83rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.config-status { min-height: 17px; margin: 12px 0 0; color: #345d42; font-size: .77rem; }
.preview-wrap { position: sticky; top: 16px; padding: 17px; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.preview-toolbar > div:first-child { display: grid; gap: 2px; }
.preview-toolbar strong { font-size: .91rem; }
.preview-toolbar span { color: #7b8086; font-size: .73rem; }
.device-switch { display: flex; padding: 3px; border-radius: 8px; background: #f0f1f3; }
.device-switch button { border: 0; border-radius: 6px; padding: 6px 12px; color: #555b63; background: transparent; font-size: .75rem; font-weight: 800; }
.device-switch button.active { background: #fff; color: #151515; box-shadow: 0 1px 5px rgba(0,0,0,.12); }
.preview-stage { display: flex; justify-content: center; align-items: flex-start; min-height: 745px; padding: 0; overflow: hidden; background: #e9ebed; border: 1px solid #d9dcdf; border-radius: 12px; }
#sitePreview { width: 100%; height: 745px; border: 0; background: #fff; transition: width .2s ease; }
.preview-stage.mobile #sitePreview { width: min(390px, 100%); box-shadow: 0 0 0 1px #d3d6da, 0 15px 35px rgba(0,0,0,.12); }
.preview-note { margin: 11px 3px 0; color: #6d737a; font-size: .72rem; line-height: 1.5; }
@media (max-width: 1000px) { .config-layout { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); } .config-shell { padding-inline: 17px; } }
@media (max-width: 760px) { .config-layout { display: flex; flex-direction: column-reverse; } .config-panel, .preview-wrap { width: 100%; } .preview-wrap { position: static; } .preview-stage, #sitePreview { height: 540px; min-height: 540px; } .config-intro { padding-top: 25px; } }
@media (max-width: 620px) { .config-header { min-height: 70px; } .config-header img { width: 116px; } .config-header span { font-size: .68rem; } }
@media (max-width: 480px) { .config-shell { padding-inline: 12px; } .config-panel { padding-inline: 17px; } .preview-wrap { padding: 12px; } .preview-stage, #sitePreview { height: 500px; min-height: 500px; } }