:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#ede8f0;background:#141219;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1480px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid #34303b}small{letter-spacing:.22em;color:#cc9fbf;font-size:10px}h1{font-family:Georgia,serif;font-weight:400;font-size:38px;margin:8px 0}header p,.hint,footer{color:#a9a0b1;font-size:13px;line-height:1.8}h2{font-size:18px;margin:0}main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);gap:32px;align-items:start}.preview-panel{position:sticky;top:24px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.screen{aspect-ratio:16/9;background:repeating-conic-gradient(#292530 0% 25%,#211e27 0% 50%) 0/20px 20px;border:1px solid #433b49;border-radius:8px;overflow:hidden}iframe{width:100%;height:100%;border:0;display:block}.notice{background:#24202b;border:1px solid #3d3445;border-left:3px solid #d6a7ca;padding:20px;border-radius:8px;font-size:13px;line-height:1.8}.notice p:last-child{color:#e0bad6}.notice p{margin:8px 0 0}button{border:1px solid #514458;background:#2c2533;color:#f2eaf2;padding:10px 14px;border-radius:7px;cursor:pointer;font:inherit;font-size:13px}button:hover{background:#403347}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #edc1e2;outline-offset:3px}.primary{background:#e8bfda;color:#29202b;border-color:#e8bfda;font-weight:700;padding:14px 20px}.primary:hover{background:#f3d5e9}.data-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.tip{background:#201c26;border:1px solid #393140;border-radius:10px;padding:16px;margin:12px 0}.tip-top{display:flex;gap:8px;align-items:end;margin-bottom:12px}.tip-top label{flex:1}.tip-top button{padding:9px 10px}label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#c6bacb}input,textarea,select{width:100%;background:#16121c;color:#f5edf5;border:1px solid #4b3e53;border-radius:6px;padding:10px;font:inherit;font-size:14px}input[type=color]{height:42px;padding:4px}textarea{resize:vertical;min-height:0;line-height:1.7}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}.settings-title{margin-top:30px;padding-top:24px;border-top:1px solid #393140}#status{min-height:24px;color:#e6bd9d;font-size:13px;line-height:1.6}footer{border-top:1px solid #34303b}.empty{padding:20px;color:#c6bacb}@media(max-width:900px){main{grid-template-columns:1fr}.preview-panel{position:static}header,main,footer{padding:20px}header{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* 編集タブは長いTips一覧をスクロールしても操作できます。 */
[hidden]{display:none!important}
.editor-tabs{display:flex;gap:8px;position:sticky;top:0;z-index:2;background:#141219;padding:12px 0;margin-bottom:20px;border-bottom:1px solid #393140}
.editor-tabs button{flex:1;padding:13px 16px}
.editor-tabs [aria-selected="true"]{background:#e8bfda;color:#29202b;border-color:#e8bfda;font-weight:700}
.tip-preview{margin-top:12px;color:#f0cce3;border-color:#805d78}
.grid>*{min-width:0}.settings-wide{grid-column:1/-1;margin:0}.font-action{display:flex;align-items:end}.font-action button{min-height:42px}
.adjust-control{display:flex;align-items:stretch;gap:6px}.adjust-control input{min-width:0;text-align:center}.adjust-control button{flex:0 0 34px;padding:8px 0;font-size:18px}
.preview-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}a{color:#e8bfda}.help-link{border:1px solid #514458;border-radius:7px;padding:12px 14px;font-size:13px;text-decoration:none}.help-link:hover{background:#403347}a:focus-visible{outline:2px solid #edc1e2;outline-offset:3px}
.preview-background{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}.preview-background label{min-width:130px}.preview-background .hint{flex:1;min-width:160px}
.screen[data-background="dark"]{background:repeating-conic-gradient(#292530 0% 25%,#16131c 0% 50%) 0/20px 20px}
.screen[data-background="light"]{background:repeating-conic-gradient(#ffffff 0% 25%,#dddddd 0% 50%) 0/20px 20px}
.screen[data-layout="portrait"]{aspect-ratio:9/16;width:min(100%,34vh);margin-inline:auto}
.top-notice{flex:1;min-width:0;margin:0;padding:0}header>div:first-child{flex:0 0 auto}header>.header-actions{flex:0 0 220px;align-items:stretch;flex-direction:column}
.top-notice .notice{padding:14px 20px}
.preview-data{padding-top:16px;margin-top:20px;border-top:1px solid #393140}
.preview-data .data-actions{margin-top:0}
.preview-data .hint{margin:8px 0 0}
@media(max-width:1100px){header{flex-wrap:wrap}header>.top-notice{flex:1 1 100%}header>.header-actions{flex:1 1 220px;flex-direction:row;justify-content:flex-end}}@media(max-width:600px){header>.top-notice{flex-basis:100%}}
.update-notice{margin-top:12px;padding:0;border:0;border-radius:0;background:transparent}.update-notice p:last-child{color:inherit}
.preview-background{align-items:flex-end}.preview-background .preview-actions{flex:1;justify-content:flex-end}

/* 高さの低い画面でもプレビュー下の保存操作に到達できるようにする。 */
@media(min-width:901px){.preview-panel{max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-gutter:stable;padding-right:8px}}

/* Shop navigation and a reserved header ad slot (no advertising script yet). */
.shop-topbar{box-sizing:border-box;display:flex;align-items:center;gap:24px;padding:12px 24px;min-height:88px;background:#14171c;border-bottom:1px solid #343a45;font-family:'Yu Gothic',Meiryo,sans-serif}
.shop-home{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;color:#e9e4f2;text-decoration:none;font-size:13px;white-space:nowrap;padding:10px 0}
.shop-home-icon{font:26px/1 sans-serif;color:#cbb7ed}.shop-home:hover{color:#d6bcff}.shop-home:focus-visible{outline:2px solid #cbb7ed;outline-offset:4px}
.shop-ad-slot{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:0;max-width:728px;min-height:64px;flex:1;margin:0 auto;border:1px dashed #454050;border-radius:6px;background:#1b1d25;color:#8f899d;font-size:10px;letter-spacing:.12em;text-align:center;padding:8px}
@media(max-width:640px){.shop-topbar{flex-wrap:wrap;gap:6px;padding:10px 16px}.shop-home{padding:3px 0}.shop-ad-slot{flex-basis:100%;max-width:none;min-height:60px}}