*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ── settings.js のカラーと連動（JS から上書きされます） ── */
    --primary:        #3EB2D2;
    --primary-rgb:    62, 178, 210;   /* --primary の RGB値（rgba() で使用） */
    --secondary:      #255797;
    --secondary-rgb:  37, 87, 151;    /* --secondary の RGB値 */
    --accent-bg:      #eef7fc;
    --accent-border:  #bae6fd;
    --amber50:        #fffbeb;
    --amber200:       #fde68a;
    --amber700:       #b45309;
    --panel-head-bg:  #f8fafc;
    --panel-head-text:#475569;
    --card-sub-text:  #94a3b8;

    /* ── admin 固有（設定と連動しない） ── */
    --bg:        #f1f5f9;
    --white:     #ffffff;
    --s50:  #f8fafc;
    --s100: #f1f5f9;
    --s200: #e2e8f0;
    --s300: #cbd5e1;
    --s400: #94a3b8;
    --s500: #64748b;
    --s600: #475569;
    --s700: #334155;
    --s800: #1e293b;
    --green50:  #f0fdf4;
    --green200: #bbf7d0;
    --green700: #15803d;
    --red50:    #fef2f2;
    --red200:   #fecaca;
    --red500:   #ef4444;
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
    --sh-sm: 0 1px 3px rgba(0,0,0,.08);
    --sh-md: 0 4px 12px rgba(0,0,0,.1);
}

html { font-size: 16px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans',
                 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
    background: var(--bg);
    color: var(--s800);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select, label { font-family: inherit; }

/* ── レイアウト ── */
.wrap { max-width: 900px; margin: 0 auto; padding: 32px 16px 120px; }

/* ── ヘッダー ── */
.adm-header { margin-bottom: 28px; }
.adm-header__badge {
    display: inline-block;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em;
    padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.adm-header__title { font-size: 22px; font-weight: 800; color: var(--s800); letter-spacing: -.02em; }
.adm-header__sub   { font-size: 13px; color: var(--s500); margin-top: 4px; line-height: 1.6; }

/* ── ステップフロー ── */
.step-flow { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; align-items: center; }
.sf-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--s400); font-weight: 500; }
.sf-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--s200); color: var(--s500);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sf-item.on .sf-num { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; }
.sf-item.on { color: var(--primary); font-weight: 700; }
.sf-arrow { color: var(--s300); font-size: 12px; }

/* ── タブ ── */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--s200); margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn {
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    color: var(--s400); border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: color .13s, border-color .13s;
}
.tab-btn.on { color: var(--primary); border-bottom-color: var(--primary); }
.tab-btn:hover { color: var(--s600); }
.tab-panel { display: none; }
.tab-panel.on { display: block; }

/* ── セクションカード ── */
.card {
    background: var(--white); border-radius: var(--r-xl);
    border: 1px solid var(--s200); box-shadow: var(--sh-sm);
    overflow: hidden; margin-bottom: 20px;
}
.card__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid var(--s100); background: var(--panel-head-bg, var(--s50));
}
.card__head-left { display: flex; align-items: center; gap: 10px; }
.card__icon {
    width: 32px; height: 32px; border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.card__icon svg { width: 16px; height: 16px; color: #fff; }
.card__title { font-size: 14px; font-weight: 700; color: var(--panel-head-text, var(--s700)); }
.card__desc  { font-size: 11px; color: var(--card-sub-text, var(--s400)); margin-top: 1px; }
.card__body  { padding: 20px; }

/* ── フォーム ── */
.fg { margin-bottom: 16px; }
.fg:last-child { margin-bottom: 0; }
.fl {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--s600); margin-bottom: 5px;
}
.fl .req { color: var(--red500); margin-left: 3px; }
.fl .opt { color: var(--s400); font-weight: 400; margin-left: 4px; }
.fi, .ft {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--s200); border-radius: var(--r-md);
    font-size: 13px; color: var(--s800); background: var(--white);
    transition: border-color .15s, box-shadow .15s; outline: none;
}
.fi:focus, .ft:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.15);
}
.ft { resize: vertical; min-height: 80px; line-height: 1.6; }
.fh { font-size: 11px; color: var(--s400); margin-top: 4px; line-height: 1.5; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .grid2 { grid-template-columns: 1fr; } }
.divider { border: none; border-top: 1px solid var(--s200); margin: 20px 0; }

/* ── SNSエディター ── */
.fg-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fg-label-row .fl { margin-bottom: 0; }
.sns-row {
    display: grid; grid-template-columns: 1fr 1fr auto;
    gap: 8px; align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--s200); border-radius: var(--r-md);
    background: var(--s50); margin-bottom: 6px;
}

/* ── カラーリセットボタン ── */
.btn-color-reset {
    font-size: 11px; font-weight: 600; color: var(--s500);
    border: 1px solid var(--s200); border-radius: 999px;
    padding: 3px 10px; transition: background .13s, color .13s, border-color .13s;
    white-space: nowrap;
}
.btn-color-reset:hover { background: var(--s100); border-color: var(--s300); color: var(--s700); }

/* ── フリーStep ── */
.free-step-block {
    border: 1px solid var(--s200); border-radius: var(--r-lg);
    background: var(--s50); margin-bottom: 16px; overflow: hidden;
}
.free-step-block__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--white);
    border-bottom: 1px solid var(--s100); gap: 8px;
}
.free-step-num {
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    color: #fff; background: linear-gradient(90deg, var(--primary), var(--secondary));
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.free-step-title-inp {
    flex: 1; padding: 5px 8px;
    border: 1px solid var(--s200); border-radius: var(--r-sm);
    font-size: 13px; font-weight: 600; color: var(--s800);
    outline: none; transition: border-color .13s;
}
.free-step-title-inp:focus { border-color: var(--primary); }
.free-step-block__body { padding: 12px 14px; }
.free-step-block__foot {
    padding: 8px 14px; border-top: 1px solid var(--s100);
    display: flex; justify-content: flex-end;
}
.btn-del-step {
    font-size: 11px; font-weight: 600; color: var(--red500);
    border: 1px solid var(--red200); border-radius: 999px;
    padding: 3px 10px; transition: background .13s;
}
.btn-del-step:hover { background: var(--red50); }
.free-step-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 32px 20px;
    color: var(--s400); font-size: 13px; text-align: center;
}
.free-step-empty svg { width: 40px; height: 40px; opacity: .35; }

/* ── カラーピッカー行 ── */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.color-item { display: flex; flex-direction: column; gap: 5px; }
.color-item label { font-size: 12px; font-weight: 600; color: var(--s600); }
.color-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--s200); border-radius: var(--r-md);
    background: var(--white);
    transition: border-color .15s;
}
.color-row:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.15); }
.color-row input[type="color"] {
    width: 28px; height: 28px;
    border: none; border-radius: 6px; padding: 0;
    cursor: pointer; background: none; flex-shrink: 0;
}
.color-row input[type="text"] {
    flex: 1; border: none; outline: none;
    font-size: 12px; font-family: monospace; color: var(--s700);
    background: none;
}
.color-preview {
    width: 18px; height: 18px;
    border-radius: 4px; border: 1px solid var(--s200);
    flex-shrink: 0;
}
.color-item .fh { margin-top: 2px; }

/* ── ロゴアップロード ── */
.logo-zone {
    border: 2px dashed var(--s200); border-radius: var(--r-lg);
    padding: 24px; text-align: center;
    transition: border-color .15s, background .15s; cursor: pointer; background: var(--s50);
}
.logo-zone:hover, .logo-zone.drag { border-color: var(--primary); background: var(--accent-bg); }
.logo-zone input[type="file"] { display: none; }
.logo-zone svg { width: 32px; height: 32px; color: var(--s300); margin-bottom: 8px; }
.logo-zone__text { font-size: 13px; font-weight: 600; color: var(--s500); }
.logo-zone__sub  { font-size: 11px; color: var(--s400); margin-top: 4px; }

.logo-prev {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px; background: var(--green50);
    border: 1px solid var(--green200); border-radius: var(--r-lg);
}
.logo-prev img {
    max-width: 120px; max-height: 60px; object-fit: contain;
    border-radius: var(--r-sm); background: var(--white);
    padding: 6px; border: 1px solid var(--s200);
}
.logo-prev__info { flex: 1; }
.logo-prev__name { font-size: 13px; font-weight: 600; color: var(--green700); margin-bottom: 2px; }
.logo-prev__size { font-size: 11px; color: var(--s400); }
.logo-prev__msg  { margin-top: 6px; font-size: 11px; color: var(--s500); }
.btn-rm-logo {
    font-size: 11px; color: var(--red500);
    background: var(--red50); border: 1px solid var(--red200);
    border-radius: var(--r-sm); padding: 4px 10px;
    transition: background .13s; flex-shrink: 0;
}
.btn-rm-logo:hover { background: var(--red200); }

/* ── 項目エディター共通 ── */
.cat-section { margin-bottom: 20px; }
.cat-section:last-child { margin-bottom: 0; }
.cat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cat-name {
    font-size: 10px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--primary);
}
.cat-desc { font-size: 11px; color: var(--s400); margin-top: 2px; }
.btn-add {
    font-size: 11px; font-weight: 600; color: var(--primary);
    border: 1px solid var(--primary); border-radius: 999px;
    padding: 3px 10px; transition: background .13s, color .13s;
}
.btn-add:hover { background: var(--primary); color: #fff; }

/* 項目行：ラベル＋価格 同一行 */
.item-row {
    display: grid;
    grid-template-columns: 20px 1fr 1fr 110px auto;
    gap: 8px; align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--s200); border-radius: var(--r-md);
    background: var(--s50); margin-bottom: 6px;
    transition: border-color .13s;
}
.item-row:hover { border-color: var(--s300); }
.item-row.req   { background: var(--accent-bg); border-color: var(--primary); }
/* STEP4 変動費行（「/ ページ」ラベル付き）: 価格列を広げる */
.item-row.s4-var-row { grid-template-columns: 20px 1fr 1fr 150px auto; }
.req-price-info {
    font-size: 11px; color: var(--primary); font-weight: 600;
    white-space: nowrap; text-align: right;
}

.ir-label {
    width: 100%; padding: 6px 8px;
    border: 1px solid var(--s200); border-radius: var(--r-sm);
    font-size: 13px; color: var(--s800); background: var(--white);
    outline: none; transition: border-color .13s, box-shadow .13s;
}
.ir-label:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.12); }
.ir-label:disabled { background: var(--s100); color: var(--s500); cursor: not-allowed; }

.ir-price-wrap { position: relative; }
.ir-price-wrap .yen { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--s400); pointer-events: none; }
.ir-price {
    width: 100%; padding: 6px 8px 6px 18px;
    border: 1px solid var(--s200); border-radius: var(--r-sm);
    font-size: 13px; color: var(--s800); background: var(--white);
    outline: none; text-align: right;
    transition: border-color .13s, box-shadow .13s;
}
.ir-price:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.12); }
.ir-price:disabled { background: var(--s100); color: var(--s500); cursor: not-allowed; }

/* 単位テキスト付き価格（ページ単価系） */
.ir-price-unit-wrap { display: flex; align-items: center; gap: 4px; }
.ir-unit-label { font-size: 11px; color: var(--s400); white-space: nowrap; flex-shrink: 0; }

.btn-del {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm); color: var(--s400);
    transition: color .13s, background .13s; flex-shrink: 0;
}
.btn-del:hover { color: var(--red500); background: var(--red50); }
.btn-del svg { width: 14px; height: 14px; }
.btn-del:disabled { opacity: .3; cursor: not-allowed; }

.req-badge {
    font-size: 10px; color: var(--primary);
    background: rgba(var(--primary-rgb),.1); border-radius: 4px;
    padding: 2px 6px; white-space: nowrap;
}

/* 価格定数グリッド */
.price-const-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .price-const-grid { grid-template-columns: 1fr; } }
.pc-item label { display: block; font-size: 11px; font-weight: 600; color: var(--s600); margin-bottom: 4px; }
.pc-wrap { position: relative; }
.pc-wrap .yen { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--s400); pointer-events: none; }
.pc-wrap input {
    width: 100%; padding: 8px 8px 8px 22px;
    border: 1px solid var(--s200); border-radius: var(--r-md);
    font-size: 13px; color: var(--s800); background: var(--white);
    outline: none; text-align: right;
    transition: border-color .13s, box-shadow .13s;
}
.pc-wrap input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12); }

/* STEP1 行（ラベル＋サブ） */
.s1-row {
    display: grid;
    grid-template-columns: 20px 1fr 1fr auto;
    gap: 8px; align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--s200); border-radius: var(--r-md);
    background: var(--s50); margin-bottom: 6px;
}

/* ── 保存エリア ── */
.save-area {
    background: var(--white); border-radius: var(--r-xl);
    border: 1px solid var(--s200); box-shadow: var(--sh-md);
    padding: 24px; position: sticky; bottom: 20px; margin-top: 24px;
}
.save-area__title { font-size: 14px; font-weight: 700; color: var(--s700); margin-bottom: 4px; }
.save-area__desc  { font-size: 12px; color: var(--s400); margin-bottom: 16px; line-height: 1.5; }
.save-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.btn-dl {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--r-md);
    font-size: 14px; font-weight: 700; color: #fff;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow: 0 4px 12px rgba(var(--secondary-rgb),.2);
    transition: opacity .15s, transform .1s;
}
.btn-dl:hover { opacity: .9; }
.btn-dl:active { transform: scale(.97); }
.btn-dl svg { width: 16px; height: 16px; }

.btn-cp {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--r-md);
    font-size: 14px; font-weight: 600; color: var(--s600);
    border: 1px solid var(--s200); background: var(--white);
    transition: background .13s, border-color .13s, transform .1s;
}
.btn-cp:hover { background: var(--s50); border-color: var(--s300); }
.btn-cp:active { transform: scale(.97); }
.btn-cp svg { width: 16px; height: 16px; }

.btn-pv {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--r-md);
    font-size: 14px; font-weight: 600; color: var(--s600);
    border: 1px solid var(--s200); background: var(--white);
    text-decoration: none;
    transition: background .13s, border-color .13s, transform .1s;
}
.btn-pv:hover { background: var(--s50); border-color: var(--s300); }
.btn-pv:active { transform: scale(.97); }
.btn-pv svg { width: 16px; height: 16px; }

.btn-admin-reset {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--r-md);
    font-size: 13px; font-weight: 600; color: var(--s400);
    border: 1px solid var(--s200); background: var(--white);
    transition: background .13s, border-color .13s, color .13s, transform .1s;
    cursor: pointer;
}
.btn-admin-reset:hover { background: var(--red50); border-color: var(--red500); color: var(--red500); }
.btn-admin-reset:active { transform: scale(.97); }
.btn-admin-reset svg { width: 16px; height: 16px; }

.save-guide {
    margin-top: 16px; padding: 14px 16px;
    background: var(--amber50); border: 1px solid var(--amber200); border-radius: var(--r-md);
}
.save-guide__title { font-size: 12px; font-weight: 700; color: var(--amber700); margin-bottom: 6px; }
.save-guide ol { padding-left: 18px; font-size: 12px; color: var(--amber700); line-height: 2; }

/* ── トースト ── */
.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    color: #fff; padding: 8px 18px; border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    font-size: 13px; font-weight: 500; white-space: nowrap;
    pointer-events: none; z-index: 999;
    animation: ti .25s ease-out, to .25s ease-in 1.8s forwards;
}
@keyframes ti { from { opacity:0; transform:translate(-50%,10px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes to { from { opacity:1; } to { opacity:0; } }

.hidden { display: none !important; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--s200); border-radius: 999px; }

/* ── DnDハンドル ── */
.drag-handle {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    color: var(--s300); cursor: grab; flex-shrink: 0;
    touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 14px; height: 14px; }

.item-row.dragging,
.s1-row.dragging { opacity: .4; }

.item-row.drag-over,
.s1-row.drag-over {
    border-color: var(--primary) !important;
    background: var(--accent-bg) !important;
}