:root { color-scheme: light; --ink:#173c3c; --muted:#557674; --paper:#fffdf2; --teal:#277f78; --deep:#155f60; --line:#d5e5dd; --shadow:0 18px 48px rgba(31,87,80,.16); }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",system-ui,sans-serif; line-height:1.65; background:radial-gradient(circle at 15% 8%,rgba(255,255,255,.8),transparent 26%),linear-gradient(145deg,#a9dfd7,#f2d79c); }
a { color:var(--deep); text-underline-offset:3px; }
button,input,select,textarea { font:inherit; }
button { min-height:44px; border:0; border-radius:12px; padding:9px 15px; color:#fff; font-weight:900; background:linear-gradient(135deg,var(--teal),var(--deep)); cursor:pointer; }
button.secondary { border:1px solid #bdd5cd; color:var(--deep); background:#fff; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid #e89b4a; outline-offset:2px; }
input,select,textarea { width:100%; border:1px solid #c9ddd6; border-radius:11px; padding:10px 12px; color:var(--ink); background:#fff; }
.hidden { display:none !important; }
.maker-header { padding:30px max(20px,calc((100% - 1180px)/2)); color:#fffdf2; background:linear-gradient(135deg,rgba(22,108,103,.97),rgba(66,157,143,.93)); box-shadow:0 12px 36px rgba(27,79,75,.2); }
.maker-header > a { display:inline-flex; min-height:44px; align-items:center; border:1px solid rgba(255,255,255,.7); border-radius:999px; padding:0 16px; color:#fff; font-weight:900; text-decoration:none; background:rgba(255,255,255,.12); }
.maker-header > p:first-of-type { margin:24px 0 7px; color:#ffe39a; font:800 12px Georgia,serif; letter-spacing:.22em; }
.maker-header h1 { margin:0; font:800 clamp(30px,5vw,52px)/1.15 Georgia,"Yu Mincho",serif; }
.maker-header > p:last-child { max-width:820px; margin:12px 0 0; }
main { width:min(1180px,calc(100% - 28px)); display:grid; gap:18px; margin:24px auto 50px; }
.maker-card { min-width:0; border:1px solid rgba(255,255,255,.88); border-radius:22px; padding:22px; background:rgba(255,253,242,.96); box-shadow:var(--shadow); }
.draft-restore { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; border:2px solid #e0a34e; border-radius:22px; padding:18px 22px; background:#fff6e4; box-shadow:var(--shadow); }
.draft-restore p { margin:0; }
.draft-restore-actions { display:flex; flex-wrap:wrap; gap:8px; }
.draft-tools { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:12px; }
.draft-tools .status { flex:1 1 320px; margin:0; }
.compact-card { display:grid; grid-template-columns:1fr minmax(260px,.7fr); align-items:start; gap:18px; }
.compact-card details { grid-column:1/-1; }
.section-label { margin:0 0 4px; color:var(--teal); font-size:11px; font-weight:900; letter-spacing:.2em; }
h2 { margin:0; font:800 28px Georgia,"Yu Mincho",serif; }
label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:900; }
summary { cursor:pointer; color:var(--deep); font-weight:900; }
.spec-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:12px; }
.spec-grid code { border-radius:8px; padding:7px 9px; color:#315b59; background:#edf5ef; overflow-wrap:anywhere; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.toolbar { display:flex; gap:8px; }
.toolbar select,.section-head > select { min-width:210px; }
.guide,.status,.export-card p { color:var(--muted); font-size:12px; }
.image-upload-spec { margin:16px 0 10px; border:1px solid #c9ddd6; border-radius:14px; padding:12px 14px; color:var(--muted); background:#edf7f1; }
.image-upload-spec > strong { color:var(--deep); font-size:13px; }
.image-upload-spec ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:9px 0 7px; padding:0; list-style:none; }
.image-upload-spec li { display:grid; gap:2px; border-radius:10px; padding:8px 10px; font-size:11px; background:#fff; }
.image-upload-spec li b { color:var(--ink); }
.image-upload-spec p { margin:0; font-size:11px; }
.atlas-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
.atlas-slots { max-height:580px; overflow:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:2px; }
.atlas-slot { position:relative; min-width:0; display:grid; justify-items:center; gap:5px; border:1px solid var(--line); border-radius:13px; padding:7px; color:var(--ink); text-align:center; background:#fff; cursor:pointer; }
.atlas-slot.custom { border-color:#6aafa3; background:#e5f5ed; box-shadow:inset 0 0 0 2px rgba(70,155,140,.12); }
.atlas-slot canvas { width:76px; height:76px; aspect-ratio:1 / 1; border-radius:10px; background:#dff3ee; object-fit:contain; }
.atlas-slot span { width:100%; overflow:hidden; font-size:10px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.atlas-slot input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
#atlas-preview { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:16px; background:repeating-conic-gradient(#edf4ef 0 25%,#fff 0 50%) 50%/20px 20px; }
.side-actions,.data-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.data-picker { display:grid; grid-template-columns:minmax(180px,.5fr) 1fr; gap:10px; margin-top:16px; }
#data-item { min-height:180px; }
.data-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.data-form .wide { grid-column:1/-1; }
.data-form textarea { resize:vertical; }
.export-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; }
.export-card .status { grid-column:1/-1; margin:0; }
.primary { min-width:190px; min-height:54px; background:linear-gradient(135deg,#6f5bc6,#319b98); }
@media (max-width:820px) { .atlas-layout { grid-template-columns:1fr; } .atlas-layout aside { width:min(420px,100%); margin:auto; } .atlas-slots { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:520px; } }
@media (max-width:560px) { .maker-header { padding:18px 14px 24px; } .maker-header h1,.maker-header p,h2,.guide { overflow-wrap:anywhere; } main { width:calc(100% - 16px); margin-top:12px; } .maker-card,.maker-card > *,.compact-card > *,.section-head > * { min-width:0; } .maker-card { border-radius:17px; padding:15px; } .compact-card,.export-card { grid-template-columns:minmax(0,1fr); } .section-head { align-items:stretch; flex-direction:column; } .toolbar { display:grid; grid-template-columns:minmax(0,1fr); } input,select,textarea { min-width:0; max-width:100%; } .toolbar select,.section-head > select { min-width:0; } .spec-grid,.data-form,.data-picker,.image-upload-spec ul { grid-template-columns:minmax(0,1fr); } .atlas-slots { grid-template-columns:repeat(2,minmax(0,1fr)); } .atlas-slot canvas { width:92px; height:92px; } .export-card .status { grid-column:auto; } .primary { width:100%; } }