.wk-bag-modal {
position: fixed;
inset: 0;
background: rgba(22, 33, 44, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
z-index: 10000;
animation: wk-bag-fade .18s ease both;
}
@keyframes wk-bag-fade { from { opacity: 0; } to { opacity: 1; } }
.wk-bag-mbox {
background: var(--panel, #fbf8f1);
border-radius: 14px;
max-width: 440px;
width: 100%; max-height: 92vh;
max-height: calc(100dvh - 36px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 24px 24px 20px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
font-family: var(--sans, system-ui, -apple-system, "Segoe UI", sans-serif);
animation: wk-bag-pop .22s cubic-bezier(.2,.8,.3,1.05) both;
}
@keyframes wk-bag-pop {
from { opacity: 0; transform: scale(.96) translateY(8px); }
to   { opacity: 1; transform: none; }
}
.wk-bag-mh {
font-family: var(--serif, Georgia, "Times New Roman", serif);
font-weight: normal;
font-size: 24px;
margin: 0 0 10px;
color: var(--ink, #2f2a1d);
line-height: 1.2;
}
.wk-bag-msub {
font-size: 15px;
color: var(--ink-soft, #6b6152);
line-height: 1.5;
margin: 0 0 14px;
}
.wk-bag-mfoot-note {
font-size: 13px;
color: var(--ink-soft, #6b6152);
font-style: italic;
margin: 0 0 14px;
padding-top: 2px;
text-align: center;
}
.wk-bag-mactions {
display: flex;
gap: 10px;
margin-top: 4px;
}
.wk-bag-mcancel {
flex: 0 0 auto;
background: none;
border: 1px solid var(--hairline, #d9cfae);
border-radius: 9px;
padding: 11px 18px;
font: inherit;
font-size: 13.5px;
color: var(--ink-soft, #6b6152);
cursor: pointer;
transition: all .15s;
}
.wk-bag-mcancel:hover { border-color: var(--ink); color: var(--ink); }
.wk-bag-mok {
flex: 1;
background: var(--ink, #2f2a1d);
color: #fff;
border: 0;
border-radius: 9px;
padding: 11px 18px;
font: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
letter-spacing: .03em;
transition: background .18s, transform .1s;
}
.wk-bag-mok:hover { background: var(--gold); }
.wk-bag-mok:active { transform: scale(.99); }
.wk-bag-mok:disabled { opacity: .4; cursor: not-allowed; transform: none; }   .wk-bag-mbox--design {
max-width: 640px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.wk-bag-mbox--design > .wk-bag-mh,
.wk-bag-mbox--design > .wk-bag-msub,
.wk-bag-mbox--design > .wk-bd-pin,
.wk-bag-mbox--design > .wk-bd-hint,
.wk-bag-mbox--design > .wk-bag-mactions { flex: 0 0 auto; } .wk-bd-pin { position: relative; } .wk-bd-panels {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 10px;
border-top: 1px solid var(--wk-line, #e6dcc3);
} .wk-bd-sec { border-bottom: 1px solid var(--wk-line, #e6dcc3); }
.wk-bd-sech {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 13px 2px;
background: none;
border: 0;
font: inherit;
text-align: left;
color: var(--wk-ink, #5b4a2a);
cursor: pointer;
}
.wk-bd-secname { font-weight: 600; font-size: .95rem; flex: 0 0 auto; } .wk-bd-secval {
flex: 1 1 auto;
min-width: 0;
font-size: .85rem;
color: var(--wk-ink-soft, #6b6152);
opacity: .8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
.wk-bd-secchev {
flex: 0 0 auto;
font-size: .8rem;
opacity: .55;
transition: transform .16s ease;
}
.wk-bd-sec.is-open .wk-bd-sech { color: var(--wk-accent, #0a7ea4); }
.wk-bd-sec.is-open .wk-bd-secchev { transform: rotate(180deg); opacity: .9; } .wk-bd-sec.is-open .wk-bd-secval { visibility: hidden; }
.wk-bd-secbody { padding: 2px 2px 14px; }
.wk-bd-sech:focus-visible {
outline: 2px solid var(--gold, #b8912f);
outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
.wk-bd-secchev { transition: none; }
}
.wk-bd-opts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px;
}
.wk-bd-opt {
background: none;
border: 2px solid var(--wk-line, #e6dcc3);
border-radius: 999px;
padding: 7px 14px;
font: inherit;
font-size: .95rem;
color: var(--wk-ink, #5b4a2a);
cursor: pointer;
}
.wk-bd-opt.is-on {
border-color: var(--wk-accent, #0a7ea4);
color: var(--wk-accent, #0a7ea4);
font-weight: 600;
}
.wk-bd-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 0 0 12px;
padding: 12px;
border: 1px solid var(--wk-line, #e6dcc3);
border-radius: 10px;
background: var(--wk-panel, #fbf7ec);
}
.wk-bd-stageph {
font-size: .9rem;
opacity: .6;
}
.wk-bd-search {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.wk-bd-searchin {
flex: 1 1 auto;
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--wk-line, #cbb98f);
border-radius: 8px;
font: inherit;
font-size: 1rem;
}
.wk-bd-searchbtn,
.wk-bd-more,
.wk-bd-upbtn {
background: var(--wk-accent, #0a7ea4);
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 14px;
font: inherit;
font-size: .95rem;
cursor: pointer;
display: inline-block;
}
.wk-bd-more {
margin-top: 8px;
}
.wk-bd-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: 8px;
}
.wk-bd-cell {
padding: 0;
border: 2px solid var(--wk-line, #e6dcc3);
border-radius: 8px;
background: none;
cursor: pointer;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.wk-bd-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wk-bd-cell.is-on { border-color: var(--wk-accent, #0a7ea4); }
.wk-bd-upmsg {
font-size: .9rem;
margin-left: 10px;
opacity: .75;
}
.wk-bd-srcpanel { margin: 0 0 12px; }
.wk-bd-srcpanel:empty { margin: 0; } .wk-bd-textrow { margin: 0; }
.wk-bd-textin {
width: 100%;
box-sizing: border-box;
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--wk-line, #cbb98f);
border-radius: 8px;
font: inherit;
font-size: 1rem;
}
.wk-bd-inkrow { display: flex; gap: 6px; }
.wk-bd-ink {
background: none;
border: 2px solid var(--wk-line, #e6dcc3);
border-radius: 8px;
padding: 7px 10px;
font: inherit;
font-size: .9rem;
cursor: pointer;
color: var(--wk-ink, #5b4a2a);
}
.wk-bd-ink.is-on { border-color: var(--wk-accent, #0a7ea4); color: var(--wk-accent, #0a7ea4); font-weight: 600; }
@media (max-width: 720px) {
.wk-bag-mbox--design { max-width: 96vw; }  .wk-bd-opt,
.wk-bd-ink,
.wk-bd-fontbtn,
.wk-bd-sech,
.wk-bd-searchbtn,
.wk-bd-more,
.wk-bd-upbtn { min-height: 44px; }
} .wk-bd-textcol {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
} .wk-bd-fontrow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 0 0 10px;
}
.wk-bd-fontbtn {
background: #fff;
border: 2px solid var(--wk-line, #e6dcc3);
border-radius: 8px;
padding: 8px 6px;
font-size: 1rem;
line-height: 1.1;
color: var(--wk-ink, #5b4a2a);
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-bd-fontbtn.is-on {
border-color: var(--wk-accent, #0a7ea4);
color: var(--wk-accent, #0a7ea4);
}
@media (max-width: 430px) {
.wk-bd-fontrow { grid-template-columns: repeat(2, 1fr); }
} .wk-bd-inkrow { flex-wrap: wrap; }
.wk-bd-ink {
color: #fff;
border: 2px solid transparent;
}
.wk-bd-ink.is-on {
border-color: var(--wk-accent, #0a7ea4);
color: #fff;
font-weight: 600;
box-shadow: 0 0 0 2px rgba(10, 126, 164, .25);
}
.wk-bd-ink--white {
color: var(--wk-ink, #5b4a2a);
border-color: var(--wk-line, #e6dcc3);
}
.wk-bd-ink--white.is-on {
color: var(--wk-ink, #5b4a2a);
} .wk-bd-wheel {
display: flex;
gap: 14px;
align-items: flex-start;
flex-wrap: wrap;
}
.wk-bd-wheelcv {
width: 180px;
height: 180px;
flex: 0 0 auto;
border-radius: 50%;
cursor: crosshair;
touch-action: none;
background: var(--wk-panel, #fbf7ec);
box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}
.wk-bd-wheelside {
flex: 1 1 160px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.wk-bd-wheellbl {
display: flex;
flex-direction: column;
gap: 4px;
font-size: .82rem;
color: var(--wk-ink, #5b4a2a);
}
.wk-bd-wheellight { width: 100%; }
.wk-bd-hexin {
padding: 8px 10px;
border: 1px solid var(--wk-line, #cbb98f);
border-radius: 8px;
font: inherit;
font-size: 1rem;
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
text-transform: lowercase;
}
.wk-bd-wheelcv:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
@media (max-width: 430px) {
.wk-bd-wheel { justify-content: center; }
} @media (max-width: 720px) { .wk-bag-mbox--design.is-designing > .wk-bag-mh,
.wk-bag-mbox--design.is-designing > .wk-bag-msub { display: none; }
.wk-bag-mbox { padding: 20px 18px 16px; }
.wk-bag-mh   { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.wk-bag-modal,
.wk-bag-mbox { animation: none; }
.wk-bag-mok,
.wk-bag-mcancel { transition: none; }
}
.wk-bag-mok:focus-visible,
.wk-bag-mcancel:focus-visible {
outline: 2px solid var(--gold, #b8912f);
outline-offset: 2px;
}  .wk-bd-fillrow {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
}
.wk-bd-filllbl {
font-size: .85rem;
color: var(--wk-ink, #5b4a2a);
flex: 1 1 auto;
min-width: 0;
}
.wk-bd-fillsw {
flex: 0 0 auto;
width: 40px;
height: 28px;
border: 1px solid var(--wk-line, #cbb98f);
border-radius: 6px;
cursor: pointer;
padding: 0;
} .wk-bd-fillsw.is-empty {
background:
linear-gradient(to top right,
transparent calc(50% - 1px), var(--wk-line, #cbb98f) 50%,
transparent calc(50% + 1px)) !important;
}
.wk-bd-fillnone {
flex: 0 0 auto;
padding: 6px 10px;
border: 1px solid var(--wk-line, #cbb98f);
border-radius: 6px;
background: #fff;
font: inherit;
font-size: .8rem;
color: var(--wk-ink, #5b4a2a);
cursor: pointer;
}
.wk-bd-fillnone:disabled { opacity: .4; cursor: default; } .wk-bd-place {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 10px 0 0;
}
.wk-bd-placelbl {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 180px;
min-width: 140px;
font-size: .85rem;
color: var(--wk-ink, #5b4a2a);
}
.wk-bd-scale { flex: 1 1 auto; min-width: 90px; }
.wk-bd-placebtn {
padding: 7px 12px;
border: 1px solid var(--wk-line, #cbb98f);
border-radius: 6px;
background: #fff;
font: inherit;
font-size: .8rem;
color: var(--wk-ink, #5b4a2a);
cursor: pointer;
}
.wk-bd-placebtn:hover:not(:disabled) { border-color: var(--wk-accent, #0a7ea4); }
.wk-bd-placebtn:disabled { opacity: .4; cursor: default; } .wk-bd-src { margin: 10px 0 0; }
.wk-bd-fillsw:focus-visible,
.wk-bd-fillnone:focus-visible,
.wk-bd-placebtn:focus-visible {
outline: 2px solid var(--gold, #b8912f);
outline-offset: 2px;
} .wk-bd-textpos {
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.wk-bd-textposlbl {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
font-size: .82rem;
color: var(--wk-ink, #5b4a2a);
}
.wk-bd-texty { flex: 1 1 auto; min-width: 80px; }
.wk-bd-textcenter {
flex: 0 0 auto;
padding: 6px 10px;
border: 1px solid var(--wk-line, #cbb98f);
border-radius: 6px;
background: #fff;
font: inherit;
font-size: .8rem;
color: var(--wk-ink, #5b4a2a);
cursor: pointer;
}
.wk-bd-textcenter:hover { border-color: var(--wk-accent, #0a7ea4); }
.wk-bd-textcenter:focus-visible,
.wk-bd-texty:focus-visible {
outline: 2px solid var(--gold, #b8912f);
outline-offset: 2px;
}  .wk-bd-zoombox {
width: 100%;
max-width: 820px;
}
.wk-bd-zoombag {
width: 100%;
margin: 0 auto;
line-height: 0;
text-align: center; }
.wk-bd-zoombag > * { margin: 0 auto; } .wk-bd-pickbox {
width: 100%;
max-width: 660px;
} .wk-bd-pickgrid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 0 0 16px;
}
.wk-bd-pickcell {
flex: 0 0 auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px;
background: #fff;
border: 1px solid var(--hairline, #d9cfae);
border-radius: 10px;
font: inherit;
color: var(--ink, #2f2a1d);
cursor: pointer;
text-align: center;
transition: border-color .15s, box-shadow .15s;
}
.wk-bd-pickcell:hover,
.wk-bd-pickcell:focus-visible {
border-color: var(--gold, #b99a4b);
box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.wk-bd-pickart {
line-height: 0;
border-radius: 6px;
overflow: hidden;
}
.wk-bd-pickname {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
}
.wk-bd-pickmsg {
font-size: 12.5px;
color: var(--ink-soft, #6b6152);
line-height: 1.3;
}