#stepEdit {
--ob-fill: #F3F1EC;
--ob-fill-hover: #ECE8E0;
--ob-ring: #FBE9E2;
--ob-line: #E7E1D6;
--ob-r: 12px;
--ob-r-lg: 16px;
background: #fff;
}
#stepEdit .wrap.narrow { max-width: 640px; }
#stepEdit .step-head { align-items: center; margin-bottom: 14px; }
#stepEdit .step-head h2 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
#stepEdit .step-head .btn-ghost { border: 0; background: var(--ob-fill); border-radius: 999px; padding: 8px 14px; font-size: .84rem; color: var(--ink-70); }
#stepEdit .step-head .btn-ghost:hover:not(:disabled) { background: var(--ob-fill-hover); color: var(--ink); }
#stepEdit #editGauge { background: #fff; border: 0; border-bottom: 1px solid var(--ob-line); border-radius: 0; padding: 8px 0 12px; box-shadow: none; }
#stepEdit #editGauge .eg-bar { height: 6px; background: var(--ob-fill); }
#stepEdit #editGauge .eg-hint { font-size: .84rem; color: var(--ink-70); }
#stepEdit .wiz-title { font-size: .76rem; }
#stepEdit .wiz-toggle { font-size: .8rem; }
#stepEdit .panel { background: #fff; border: 0; padding: 6px 0 4px; margin-bottom: 30px; }
#stepEdit .panel-title {
display: block; font-family: var(--sans);
font-size: 1.45rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em;
border: 0; padding: 0; margin: 0 0 16px; text-wrap: balance;
}
#stepEdit .panel-no {
display: inline-block; vertical-align: 3px; margin-right: 10px;
font-family: var(--sans); font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
color: var(--accent); background: var(--ob-ring); border-radius: 999px; padding: 3px 9px;
font-variant-numeric: tabular-nums;
}
#stepEdit .panel-title .opt {
display: block; margin-top: 8px;
font-size: .95rem; font-weight: 400; letter-spacing: 0; color: var(--ink-70); text-wrap: pretty;
}
#stepEdit .field { margin-bottom: 18px; }
#stepEdit .field label {
font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none;
color: var(--ink); margin-bottom: 7px;
}
#stepEdit .field label .opt { font-size: .84rem; font-weight: 400; color: var(--ink-70); letter-spacing: 0; }
#stepEdit .field input:not([type="hidden"]):not([type="file"]),
#stepEdit .field select,
#stepEdit .field textarea,
#stepEdit .hour-row input,
#stepEdit .dyn-row input,
#stepEdit .dyn-row select {
background: var(--ob-fill); border: 1.5px solid transparent; border-radius: var(--ob-r);
padding: 13px 14px; min-height: 50px; font-size: 15.5px; line-height: 1.4; color: var(--ink);
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#stepEdit .field textarea { padding: 13px 14px; line-height: 1.65; resize: vertical; }
#stepEdit .dyn-row input, #stepEdit .dyn-row select, #stepEdit .hour-row input { padding: 11px 12px; min-height: 46px; font-size: 14.5px; }
#stepEdit .field input:hover:not(:focus), #stepEdit .field textarea:hover:not(:focus), #stepEdit .dyn-row input:hover:not(:focus) { background: var(--ob-fill-hover); }
#stepEdit .field input:focus, #stepEdit .field select:focus, #stepEdit .field textarea:focus,
#stepEdit .hour-row input:focus, #stepEdit .dyn-row input:focus, #stepEdit .dyn-row select:focus {
outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ob-ring);
}
#stepEdit .field select, #stepEdit .dyn-row select { background-position: right 14px center; padding-right: 36px; }
#stepEdit .field input::placeholder, #stepEdit .field textarea::placeholder, #stepEdit .dyn-row input::placeholder, #stepEdit .hour-row input::placeholder { color: var(--ink-ph); }
#stepEdit .hint { font-size: .88rem; color: var(--ink-70); line-height: 1.6; }
#stepEdit .hint strong { color: var(--ink-70); font-weight: 600; }
#stepEdit .grid2 { gap: 16px 14px; align-items: start; }
#stepEdit .field label .opt { display: block; margin-top: 3px; }
#stepEdit .dyn-row { gap: 8px; margin-bottom: 8px; }
#stepEdit .btn-primary, #stepEdit .btn-accent {
background: var(--accent); color: #fff; border: 0; border-radius: 14px;
padding: 14px 20px; font-size: .98rem; font-weight: 700; letter-spacing: 0;
}
#stepEdit .btn-primary:hover:not(:disabled), #stepEdit .btn-accent:hover:not(:disabled) { background: var(--accent-ink); border: 0; }
#stepEdit .btn-primary:active, #stepEdit .btn-accent:active { transform: scale(.985); }
#stepEdit .btn-ghost {
background: var(--ob-fill); color: var(--ink); border: 0; border-radius: var(--ob-r);
padding: 11px 16px; font-size: .9rem; font-weight: 600; letter-spacing: 0;
}
#stepEdit .btn-ghost:hover:not(:disabled) { background: var(--ob-fill-hover); color: var(--ink); }
#stepEdit #btnAiCopy { background: var(--ob-ring); color: var(--accent-ink); }
#stepEdit #btnAiCopy:hover:not(:disabled) { background: #F6D9CE; color: var(--accent-ink); }
#stepEdit .panel-next { border-radius: 14px; padding: 14px 16px; font-size: .98rem; }
#stepEdit.wiz-on .panel-next { display: none; }
#stepEdit .chip {
background: var(--ob-fill); border: 1.5px solid transparent; border-radius: 999px;
padding: 9px 14px; font-size: .86rem; font-weight: 500; letter-spacing: 0; color: var(--ink);
}
#stepEdit .chip:hover { transform: none; background: var(--ob-fill-hover); }
#stepEdit .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
#stepEdit .chip.on::before { content: none; }
#stepEdit .chip-more, #stepEdit .chip-ext { border-color: transparent; }
#stepEdit .mood-card { background: #fff; border: 1.5px solid var(--ob-line); border-radius: 14px; padding: 10px; }
#stepEdit .mood-card:hover { border-color: var(--ink-25); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(26,25,23,.35); }
#stepEdit .mood-card[aria-checked="true"] { border-color: var(--accent); border-width: 1.5px; box-shadow: 0 0 0 3px var(--ob-ring); }
#stepEdit .mc-preview { border-radius: 10px; border-color: var(--ob-line); }
#stepEdit .mc-tier { border-radius: 999px; }
#stepEdit .mc-reco, #stepEdit .mc-region { border-radius: 999px; }
#stepEdit .wiz-bar {
border: 0; border-radius: var(--ob-r-lg); background: #fff;
box-shadow: 0 -2px 0 0 #fff, 0 14px 36px -12px rgba(26,25,23,.28), 0 0 0 1px var(--ob-line);
padding: 12px 12px;
}
#stepEdit .wiz-next { border-radius: 14px; padding: 15px 12px; font-size: 1.02rem; }
#stepEdit .wiz-prev { background: transparent; border: 0; color: var(--ink-70); font-weight: 600; padding: 12px 10px; }
#stepEdit .wiz-prev:hover:not(:disabled) { background: var(--ob-fill); color: var(--ink); }
#stepEdit .wiz-num { font-size: .84rem; }
#stepEdit .wiz-title { color: var(--ink-45); }
#stepEdit .wiz-toggle { color: var(--ink-45); }
#stepEdit .wiz-bar.wiz-full { box-shadow: none; background: transparent; }
#stepEdit.wiz-on .panel.wiz-act { padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--ob-line) transparent; }
#stepEdit .dyn-row.menu-dyn { flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; margin-bottom: 10px; background: #FAF8F4; border-radius: 14px; }
#stepEdit .dyn-row.menu-dyn .m-name { flex: 1 1 52%; min-width: 160px; }
#stepEdit .dyn-row.menu-dyn .m-price { flex: 1 1 110px; max-width: 150px; }
#stepEdit .dyn-row.menu-dyn .m-desc { flex: 1 1 100%; }
#stepEdit .dyn-row.menu-dyn select.m-group, #stepEdit .dyn-row.menu-dyn input.m-group { flex: 1 1 42%; min-width: 140px; }
#stepEdit .dyn-row.menu-dyn .m-option, #stepEdit .dyn-row.menu-dyn .m-note, #stepEdit .dyn-row.menu-dyn .m-duration { flex: 1 1 30%; min-width: 120px; }
#stepEdit .dyn-row.menu-dyn .m-best-cell, #stepEdit .dyn-row.menu-dyn .m-sold-cell { background: #fff; border: 1px solid var(--ob-line); border-radius: 999px; padding: 7px 12px 7px 10px; }
#stepEdit .dyn-row.menu-dyn .m-best-cell { color: var(--accent) !important; }
#stepEdit .dyn-row.menu-dyn .row-x { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; }
#stepEdit .menu-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
#stepEdit .dyn-row.recruit-dyn { flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; margin-bottom: 10px; background: #FAF8F4; border-radius: 14px; }
#stepEdit .dyn-row.recruit-dyn input, #stepEdit .dyn-row.recruit-dyn select { min-width: 0; }
#stepEdit .dyn-row.recruit-dyn .r-title { flex: 1 1 100%; }
#stepEdit .dyn-row.recruit-dyn .r-type { flex: 1 1 34%; min-width: 132px; }
#stepEdit .dyn-row.recruit-dyn .r-salary, #stepEdit .dyn-row.recruit-dyn .r-time { flex: 1 1 28%; min-width: 148px; }
#stepEdit .dyn-row.recruit-dyn .row-x { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; }
#stepEdit.wiz-on .panel.wiz-act .menu-actions { position: sticky; bottom: var(--wiz-clear, 0px); background: #fff; padding: 8px 0 6px; z-index: 2; }
#stepEdit .menu-actions #btnAddMenu { flex: 1 1 160px; background: var(--ob-ring); color: var(--accent-ink); border: 1.5px dashed rgba(228,87,46,.45); }
#stepEdit .menu-actions #btnAddMenu:hover:not(:disabled) { background: #F6D9CE; color: var(--accent-ink); }
#stepEdit .menu-actions #btnMenuOcr { flex: 1 1 220px; }
@media (max-width: 640px) { #stepEdit .dyn-row.menu-dyn .m-name { flex-basis: 100%; } #stepEdit .dyn-row.menu-dyn .m-price { max-width: none; flex: 1 1 40%; } }
#stepEdit .badge { border-radius: 999px; }
#stepEdit .req { color: var(--accent); }
#stepEdit .photo-pick-btn, #stepEdit #btnLogoUp { border-radius: 10px !important; border-color: var(--ob-line) !important; }
@media (max-width: 1279px) {
#stepEdit .edit-split { display: none; }
#stepEdit { padding-top: 18px; }
#stepEdit .wrap.narrow { padding-left: 18px; padding-right: 18px; }
#stepEdit .panel-title { font-size: 1.35rem; }
#stepEdit .wiz-bar { bottom: 10px; }
#stepEdit.wiz-on .panel.wiz-act { height: calc(100dvh - 330px); min-height: 360px; }
}
@media (max-width: 760px) {
#stepEdit.wiz-on .panel.wiz-act { height: auto; min-height: 0; overflow: visible; overscroll-behavior: auto; padding-right: 0; }
#stepEdit.wiz-on .panel.wiz-act::after { flex-basis: 8px; }
#stepEdit #editGauge { position: static; }
#stepEdit.wiz-on .panel.wiz-act .menu-actions { position: static; padding: 0; }
#stepEdit .step-head h2 { white-space: nowrap; flex: 1 1 auto; }
#stepEdit .step-head .badge { white-space: normal; }
#stepEdit .wiz-toggle { padding: 10px 0 4px; min-height: 40px; }
}
@media (max-width: 1279px) {
#stepPreview { padding: 12px 0 96px; }
#stepPreview .preview-bar {
position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 60;
margin: 0; border: 0; border-top: 1px solid #E7E1D6; background: #fff;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
gap: 10px; flex-wrap: nowrap; box-shadow: 0 -12px 30px -18px rgba(26,25,23,.35);
}
#stepPreview .preview-bar > .device-toggle,
#stepPreview .preview-actions > #btnQa,
#stepPreview #qaBadge { display: none !important; }
#stepPreview #btnEditAgain { flex: 0 0 auto; border: 0; background: #F3F1EC; color: #1A1917; border-radius: 12px; padding: 14px 16px; font-size: .95rem; font-weight: 600; }
#stepPreview .preview-actions { margin: 0; flex: 1; }
#stepPreview #btnDeploy { flex: 1; width: 100%; border: 0; border-radius: 14px; background: #E4572E; color: #fff; padding: 15px 16px; font-size: 1.02rem; font-weight: 700; }
#stepPreview .preview-shell { border: 0; box-shadow: none; border-radius: 14px; overflow: hidden; height: calc(100dvh - 150px); }
#stepPreview .wrap.wide { padding-left: 12px; padding-right: 12px; }
}
.pv-mood-strip { display: none; }
@media (max-width: 1279px) {
.pv-mood-strip { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.pv-mood-strip .pv-mood-label { flex: none; font-size: .82rem; font-weight: 700; color: #1A1917; }
.pv-mood-strip .pv-mood-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.pv-mood-strip .pv-mood-row::-webkit-scrollbar { display: none; }
.pv-mood-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 999px; border: 1.5px solid #E7E1D6; background: #fff; color: #1A1917; font: 600 .84rem/1 inherit; white-space: nowrap; scroll-snap-align: center; }
.pv-mood-chip i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pv-mood-chip i b { width: 10px; height: 10px; border-radius: 50%; display: block; }
.pv-mood-chip.on { border-color: #E4572E; background: #FBE9E2; color: #C43F1B; box-shadow: 0 0 0 2px #FBE9E2; }
.pv-mood-chip:active { transform: scale(.97); }
}
#stepEdit .gate-why { margin: 2px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--ob-fill); font-size: 14px; line-height: 1.6; color: var(--ink-70); }
#stepEdit .gate-why b { color: var(--accent); margin-right: 4px; font-weight: 800; }
#stepEdit .gate { margin: 4px 0 18px; }
#stepEdit .gate-q { font-size: 1.12rem; font-weight: 800; color: var(--ink); margin: 6px 0 14px; line-height: 1.45; }
#stepEdit .gate-row { display: flex; gap: 10px; flex-wrap: wrap; }
#stepEdit .gate-btn { flex: 1 1 130px; min-height: 54px; border-radius: 14px; font-size: 1rem; font-weight: 800; border: 1.5px solid var(--ob-line); background: #fff; color: var(--ink); cursor: pointer; transition: transform .12s ease, background .15s ease; }
#stepEdit .gate-btn:hover { transform: translateY(-1px); background: var(--ob-fill); }
#stepEdit .gate-btn.gate-yes { background: var(--accent); border-color: var(--accent); color: #fff; }
#stepEdit .gate-btn.gate-yes:hover { filter: brightness(.95); background: var(--accent); }
#stepEdit .gate-btn.gate-ai { background: var(--ob-fill); }
#stepEdit .gate-done, #stepEdit .gate-note { font-size: 14px; line-height: 1.6; color: var(--ink-70); padding: 12px 14px; border-radius: 12px; background: var(--ob-fill); margin: 0; }
#stepEdit .gate-re { border: 0; background: none; padding: 0 0 0 4px; color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#stepEdit .panel.gate-closed > :not(.panel-title):not(.gate-why):not(.gate):not(.panel-next) { display: none !important; }
@media (max-width: 520px) { #stepEdit .gate-row3 { flex-direction: column; } #stepEdit .gate-row3 .gate-btn { flex: 0 0 auto; width: 100%; } }
@media (pointer: coarse), (max-width: 760px) {
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]),
select, textarea { font-size: 16px !important; }
#btnBackToStart, #btnLogoUp, #stepEdit .btn-ghost, #stepEdit .photo-pick-btn, #stepEdit .row-photo,
.mood-filter button, .fx-chip, .pv-mood-chip { min-height: 44px; }
#stepEdit .row-x, .dyn-row .row-x { width: 44px; height: 44px; }
#stepEdit .photo-pick-btn { min-width: 44px; }
.pg-star, .pg-del { width: 32px; height: 32px; }
.pg-star { right: auto; left: 6px; top: auto; bottom: 6px; }
.pg-star::after, .pg-del::after { content: ''; position: absolute; inset: -6px; }
#stepEdit .dyn-row.menu-dyn .row-x, #stepEdit .dyn-row.recruit-dyn .row-x { width: 44px; height: 44px; }
.ccal-c { min-height: 44px; font-size: 14px; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]),
select, textarea { font-size: max(16px, 1rem) !important; }
#stepEdit input, #stepEdit textarea, #stepEdit select { scroll-margin-bottom: 120px; scroll-margin-top: 80px; }
}
.dyn-row.photo-dyn .p-name { display: none; }
.dyn-row.photo-dyn.p-auto .p-name { display: flex; align-items: center; flex: 1; min-width: 0; min-height: 44px; padding: 0 12px;
border-radius: 10px; background: var(--ob-fill, #F4F1EA); font-size: 15px; font-weight: 600; color: var(--ink-70, #4a463f); }
.dyn-row.photo-dyn.p-auto input.p-url { display: none; }
.pv-mood-chip.pv-mood-more { padding: 8px 14px; border-style: dashed; color: #6b6257; }
.pv-mood-strip .pv-mood-label { line-height: 1.25; text-align: center; }
#stepEdit details.more-opt { margin: 14px 0 0; border: 1px dashed var(--ob-line, #E7E1D6); border-radius: 12px; padding: 0 14px; }
#stepEdit details.more-opt > summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-weight: 700; font-size: 15px; color: var(--ink, #1A1917); padding: 8px 0; }
#stepEdit details.more-opt > summary::-webkit-details-marker { display: none; }
#stepEdit details.more-opt > summary::before { content: '＋'; color: var(--accent, #E4572E); font-weight: 800; }
#stepEdit details.more-opt[open] > summary::before { content: '－'; }
#stepEdit details.more-opt[open] { padding-bottom: 12px; }
@media (max-width: 760px) { #stepPreview #previewBrandSummary { display: none !important; } }
@media (pointer: coarse) and (min-width: 761px) {
#stepEdit .wiz-toggle { min-height: 44px; padding: 0 8px; }
}
@media (orientation: landscape) and (max-height: 500px) {
#editGauge { position: static; }
}
@media (orientation: landscape) and (max-height: 500px) {
.pg-star, .pg-del { width: 32px; height: 32px; }
.pg-star { right: auto; left: 6px; top: auto; bottom: 6px; }
.pg-star::after, .pg-del::after { content: ''; position: absolute; inset: -6px; }
.fx-chip, .mood-filter button, .pv-mood-chip, #stepEdit .btn-ghost, #stepEdit .photo-pick-btn { min-height: 44px; }
#stepEdit .wiz-toggle { min-height: 44px; padding: 0 8px; }
}