/* 주문 페이지 + 관리자 화면 공통 스타일
   테마: body.t-basic(기본) / body.t-pop(팝·헬로컵) / body.t-pastel(파스텔 3색)
   색·모양은 모두 아래 변수로 정해지고, 테마는 변수만 바꿉니다. */

/* ---------- 기본 변수 (기본 테마) ---------- */
:root { --brand: #8a5a3c; }
body, .tp {
  --bg: #f7f6f3; --surface: #fff; --surface-2: #f1efeb; --text: #171513; --muted: #77706a; --line: #e6e2dc;
  --on-brand: #fff; --ok: #059669; --err: #dc2626;
  --radius: 18px; --radius-sm: 12px; --pill: 999px;
  --border: 1px solid var(--line);
  --shadow: 0 1px 2px rgba(23, 21, 19, .04);
  --shadow-hover: 0 2px 4px rgba(23, 21, 19, .04), 0 18px 34px -18px rgba(23, 21, 19, .28);
  --spot: rgba(255, 255, 255, .38);
  --display: 800; --track: -.03em;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--surface));
  --brand-mid: color-mix(in srgb, var(--brand) 32%, var(--surface));
  --brand-ink: color-mix(in srgb, var(--brand) 80%, #000);
  --glass: color-mix(in srgb, var(--surface) 76%, transparent);
  --btn-bg: var(--brand); --btn-fg: var(--on-brand);
}

/* ---------- 팝 · 헬로컵 : 잔디 초록 + 핫핑크 + 컨페티, 굵은 검정 테두리 ---------- */
.t-pop {
  --pink: #ec7fae; --pink-soft: #ffe3ee; --yellow: #f6d23c; --blue: #2c4fa8; --mint: #4db89a; --ink: #1b1a1a;
  --bg: #fff3f8; --surface: #fff; --surface-2: #fff0f6; --text: var(--ink); --muted: #6e5f67; --line: #1b1a1a;
  --radius: 20px; --radius-sm: 14px;
  --border: 2px solid var(--ink);
  --shadow: 3px 3px 0 var(--ink);
  --shadow-hover: 6px 6px 0 var(--ink);
  --spot: rgba(255, 255, 255, .45);
  --display: 900; --track: -.02em;
  --brand-soft: #e6f5e8;
  --btn-bg: var(--brand); --btn-fg: #fff;
}
body.t-pop {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18px 22px, var(--pink) 0 3px, transparent 3.5px),
    radial-gradient(circle at 92px 70px, var(--yellow) 0 3.5px, transparent 4px),
    radial-gradient(circle at 150px 18px, var(--blue) 0 2.5px, transparent 3px),
    radial-gradient(circle at 60px 130px, var(--brand) 0 3px, transparent 3.5px),
    radial-gradient(circle at 170px 120px, var(--pink) 0 2.5px, transparent 3px);
  background-size: 190px 160px;
}

/* ---------- 파스텔 3색 : 라벤더 · 베이비핑크 · 스카이블루 ---------- */
.t-pastel {
  --lav: #cdb4db; --pink: #ffc8dd; --sky: #a2d2ff;
  --bg: #fffaf6; --surface: #fff; --surface-2: #f6f0fa; --text: #392c48; --muted: #857995; --line: #ece3f3;
  --radius: 24px; --radius-sm: 16px;
  --border: 1px solid rgba(205, 180, 219, .45);
  --shadow: 0 10px 30px -18px rgba(125, 91, 166, .35);
  --shadow-hover: 0 18px 40px -16px rgba(125, 91, 166, .45);
  --spot: rgba(255, 255, 255, .6);
  --display: 800; --track: -.025em;
  --glass: rgba(255, 255, 255, .62);
  --btn-bg: linear-gradient(120deg, var(--lav), var(--pink) 50%, var(--sky)); --btn-fg: #392c48;
}
body.t-pastel {
  background:
    radial-gradient(60vmax 50vmax at -10% -10%, rgba(255, 200, 221, .55), transparent 60%),
    radial-gradient(55vmax 45vmax at 110% 5%, rgba(162, 210, 255, .5), transparent 60%),
    radial-gradient(60vmax 50vmax at 50% 115%, rgba(205, 180, 219, .45), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- 바탕 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
body.noscroll { overflow: hidden; }
a { color: var(--brand-ink); }
h1 { font-size: 1.5rem; margin: 0 0 .4rem; line-height: 1.25; letter-spacing: var(--track); font-weight: var(--display); }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; letter-spacing: -.01em; }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; }
img { max-width: 100%; display: block; }
code { background: var(--surface-2); padding: .1rem .35rem; border-radius: 6px; font-size: .88em; word-break: break-all; }
.muted { color: var(--muted); } p.danger, span.danger { color: var(--err); } .small { font-size: .85rem; } .center { text-align: center; } .right { text-align: right; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
::selection { background: var(--brand-mid); }

/* ---------- 버튼 : 모양 + 반응 ----------
   마우스를 올리면 살짝 떠오르고, 포인터를 따라 은은한 빛(fx.js)이 따라다닙니다.
   누르면 꾹 눌리는 느낌. 키보드로 이동하면 또렷한 테두리. */
.btn-primary, .btn-soft, .btn-danger, .btn-xs, .btn-link { font: inherit; cursor: pointer; border: 0; border-radius: var(--pill); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; -webkit-tap-highlight-color: transparent; }
.btn-primary, .btn-soft, .btn-danger, .btn-xs, .back, .tab, .chip.pick, .x, .cal-head button, .stepper button, .links a, .theme-card, .kpi, .pager a, .a-nav a { position: relative; isolation: isolate; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .2s, color .2s, border-color .2s, filter .2s; }
.btn-primary::after, .btn-soft::after, .btn-danger::after, .btn-xs::after, .back::after, .tab::after, .chip.pick::after, .x::after, .cal-head button::after, .stepper button::after, .links a::after, .theme-card::after, .kpi::after, .pager a::after, .a-nav a::after, .menu-card > a::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 70%); }
.btn-soft::after, .btn-xs::after, .back::after, .tab::after, .chip.pick::after, .x::after, .cal-head button::after, .stepper button::after, .links a::after, .theme-card::after, .kpi::after, .pager a::after, .a-nav a::after, .menu-card > a::after { --spot: color-mix(in srgb, var(--brand) 16%, transparent); background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 70%); }

.btn-primary { background: var(--btn-bg); color: var(--btn-fg); padding: .8rem 1.35rem; font-weight: 700; letter-spacing: -.01em; box-shadow: var(--shadow); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); padding: .65rem 1.05rem; font-weight: 650; }
.btn-danger { background: #fee2e2; color: var(--err); padding: .65rem 1.05rem; font-weight: 600; }
.btn-xs { background: var(--surface-2); color: var(--text); padding: .32rem .7rem; font-size: .85rem; }
.btn-xs:disabled { opacity: .35; }
.btn-xs.danger, .btn-link.danger, .btn-soft.danger { color: var(--err); }
.btn-link { background: none; color: var(--brand-ink); padding: 0; text-decoration: underline; text-underline-offset: 3px; font-size: .9rem; border-radius: 4px; }

@media (hover: hover) {
  .btn-primary:not(:disabled):hover, .btn-soft:hover, .btn-danger:hover, .btn-xs:not(:disabled):hover, .back:hover, .x:hover, .cal-head button:not(:disabled):hover, .stepper button:hover, .chip.pick:hover { transform: translateY(-1px); }
  .btn-primary:not(:disabled):hover { box-shadow: var(--shadow-hover); filter: brightness(1.04) saturate(1.05); }
  .btn-soft:hover { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
  .btn-xs:not(:disabled):hover { background: color-mix(in srgb, var(--text) 9%, var(--surface)); }
  :is(.btn-primary, .btn-soft, .btn-danger, .btn-xs, .back, .tab, .chip.pick, .x, .cal-head button, .stepper button, .links a, .theme-card, .kpi, .pager a, .a-nav a, .menu-card > a):hover::after { opacity: 1; }
  .btn-link:hover { text-decoration-thickness: 2px; }
  .back:hover .ic { transform: translateX(-3px); }
}
:is(.btn-primary, .btn-soft, .btn-danger, .btn-xs, .back, .x, .cal-head button, .stepper button, .chip.pick):not(:disabled):active { transform: scale(.96); transition-duration: .08s; }
:is(a, button, input, select, textarea, summary, label.theme-card):focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.ic { transition: transform .35s var(--ease); }

/* 팝: 스티커처럼 눌리는 버튼 */
.t-pop .btn-primary, .t-pop .btn-soft, .t-pop .btn-danger { border: var(--border); box-shadow: 3px 3px 0 var(--ink); }
.t-pop .btn-soft { background: var(--pink-soft); color: var(--ink); }
@media (hover: hover) {
  .t-pop .btn-primary:not(:disabled):hover, .t-pop .btn-soft:hover, .t-pop .btn-danger:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); filter: none; }
  .t-pop .btn-soft:hover { background: #ffd3e4; }
}
.t-pop :is(.btn-primary, .btn-soft, .btn-danger):not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* 파스텔: 그라데이션이 흐르는 버튼 */
.t-pastel .btn-primary { background-size: 200% 100%; background-position: 0 0; transition: background-position .6s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow: 0 10px 24px -14px rgba(125, 91, 166, .6), inset 0 0 0 1px rgba(255, 255, 255, .6); }
@media (hover: hover) { .t-pastel .btn-primary:not(:disabled):hover { background-position: 100% 0; box-shadow: 0 16px 30px -12px rgba(125, 91, 166, .55), inset 0 0 0 1px rgba(255, 255, 255, .7); } }
.t-pastel .btn-soft { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- 공용 컴포넌트 ---------- */
.wrap { max-width: 560px; margin: 0 auto; padding-bottom: 8rem; min-height: 100vh; }
.wrap.narrow { max-width: 420px; padding: 3rem 1rem; }
.card { background: var(--surface); border-radius: var(--radius); padding: 1.2rem; margin: .75rem; border: var(--border); box-shadow: var(--shadow); }
.t-basic .card { border-color: transparent; }
.t-pastel .card { background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, .8); }
.badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: .14rem .55rem; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); vertical-align: middle; }
.chip { display: inline-block; padding: .35rem .75rem; border-radius: 999px; background: var(--surface-2); font-size: .88rem; text-decoration: none; color: var(--text); border: 1px solid transparent; }
.error-text { color: var(--err); white-space: pre-line; }
.errors { background: #fef2f2; color: var(--err); border: 1px solid #fecaca; border-radius: var(--radius-sm); margin: .75rem; padding: .75rem 1rem; }
.errors ul { margin: 0; padding-left: 1.1rem; }
.stack > * + * { margin-top: .8rem; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.grow { flex: 1; min-width: 0; }

/* 입력 */
.field { margin-bottom: 1rem; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { display: block; font-weight: 700; margin-bottom: .35rem; padding: 0; }
.help { color: var(--muted); font-size: .85rem; margin: .1rem 0 .45rem; }
.req { font-style: normal; font-size: .7rem; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); border-radius: 6px; padding: .05rem .38rem; margin-left: .2rem; vertical-align: middle; }
input, select, textarea { font: inherit; color: inherit; width: 100%; padding: .72rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.t-pop :is(input, select, textarea) { border: 2px solid var(--ink); }
.t-pastel :is(input, select, textarea) { background: rgba(255, 255, 255, .85); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--brand); transform: scale(1.15); box-shadow: none; }
input[type=color] { padding: .2rem; height: 2.6rem; width: 5rem; }
textarea { resize: vertical; }
.chk { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; cursor: pointer; }

/* ---------- 가게 첫 화면 ---------- */
.masthead { position: relative; }
.cover { height: 230px; background: center/cover no-repeat var(--brand-soft); }
.cover-blank { display: flex; align-items: flex-end; padding: 1.2rem 1.3rem; background: var(--brand); position: relative; overflow: hidden; }
.cover-blank span { color: var(--on-brand); font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 900; letter-spacing: -.045em; line-height: .95; position: relative; }
.t-basic .cover-blank { background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand-ink)); }
.t-basic .cover-blank::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 110% at 88% 0%, rgba(255, 255, 255, .24), transparent 62%), radial-gradient(40% 60% at 0% 100%, rgba(0, 0, 0, .12), transparent 70%); }
.has-logo .cover-blank { align-items: flex-start; }
.t-pop .has-logo .cover-blank { align-items: center; }
/* 팝: 하얀 타일 벽 + 핑크 */
.t-pop .cover { border-bottom: var(--border); }
.t-pop .cover-blank { background-color: var(--pink); background-image: linear-gradient(#fff 2px, transparent 2px), linear-gradient(90deg, #fff 2px, transparent 2px); background-size: 34px 34px; background-position: -1px -1px; align-items: center; justify-content: center; }
.t-pop .cover-blank::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(circle at 12% 30%, var(--yellow) 0 6px, transparent 6.5px), radial-gradient(circle at 85% 22%, var(--blue) 0 5px, transparent 5.5px),
  radial-gradient(circle at 78% 78%, var(--brand) 0 7px, transparent 7.5px), radial-gradient(circle at 22% 80%, var(--blue) 0 4px, transparent 4.5px),
  radial-gradient(circle at 50% 12%, var(--brand) 0 4px, transparent 4.5px); }
.t-pop .cover-blank span { color: #fff; text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); text-align: center; z-index: 1; transform: rotate(-3deg); }
/* 파스텔: 세 가지 색이 번지는 하늘 */
.t-pastel .cover-blank { background: radial-gradient(80% 120% at 0% 0%, var(--pink), transparent 60%), radial-gradient(80% 120% at 100% 0%, var(--sky), transparent 60%), radial-gradient(90% 120% at 50% 100%, var(--lav), transparent 65%), #fff; }
.t-pastel .cover-blank span { color: #392c48; }

.shop-head { background: var(--surface); padding: 1.35rem 1.25rem 1.25rem; position: relative; }
.t-pop .shop-head { border-bottom: var(--border); }
.t-pastel .shop-head { background: transparent; }
.has-logo .shop-head { padding-top: 3.1rem; }
.logo { position: absolute; top: -46px; left: 1.15rem; width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 4px solid var(--surface); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35); background: var(--surface); }
.t-pop .logo { border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.t-pastel .logo { border-color: #fff; box-shadow: 0 0 0 4px rgba(205, 180, 219, .5), 0 10px 24px -10px rgba(125, 91, 166, .5); }
.shop-name { font-size: clamp(1.7rem, 6.5vw, 2.4rem); margin-bottom: .25rem; }
.tagline { color: var(--muted); margin: 0 0 .6rem; font-size: 1rem; }
.intro { margin: .4rem 0 1rem; }
.head-actions { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .9rem; }

/* 메뉴 / 가게 정보 : Safari처럼 알약 모양 전환 버튼 */
.tabs-bar { position: sticky; top: 0; z-index: 6; padding: .7rem .75rem; background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.t-pop .tabs-bar { background: color-mix(in srgb, var(--bg) 85%, transparent); }
.tabs { --i: 0; display: grid; grid-template-columns: 1fr 1fr; position: relative; background: var(--surface-2); border-radius: var(--pill); padding: 4px; max-width: 340px; }
.tabs::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--pill); background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transform: translateX(calc(var(--i) * 100%)); transition: transform .45s var(--ease); }
.t-pop .tabs { border: var(--border); background: #fff; }
.t-pop .tabs::before { background: var(--brand); box-shadow: none; }
.t-pastel .tabs { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
.t-pastel .tabs::before { background: linear-gradient(120deg, var(--lav), var(--pink)); }
.tab { border: 0; background: none; font: inherit; padding: .55rem .9rem; color: var(--muted); cursor: pointer; border-radius: var(--pill); font-weight: 600; z-index: 1; }
.tab.on { color: var(--text); font-weight: 750; }
.t-pop .tab.on { color: #fff; }
@media (hover: hover) { .tab:not(.on):hover { color: var(--text); } }

.menu-list { list-style: none; margin: 0; padding: .4rem .75rem .75rem; display: grid; gap: .75rem; }
.menu-card > a { display: grid; grid-template-columns: 104px 1fr; gap: 1rem; align-items: center; background: var(--surface); border-radius: var(--radius); padding: .7rem; text-decoration: none; color: inherit; position: relative; isolation: isolate; overflow: hidden; border: var(--border); box-shadow: var(--shadow); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.t-basic .menu-card > a { border-color: transparent; }
.t-pastel .menu-card > a { background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, .85); }
.mc-img { width: 104px; height: 104px; border-radius: var(--radius-sm); overflow: hidden; background: var(--brand-soft); }
.t-pop .mc-img { border: var(--border); }
.mc-img img, .mc-img .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ph { display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-ink); font-size: 2rem; font-weight: 900; }
.t-pop .ph { background: var(--pink-soft); color: var(--ink); }
.t-pastel .ph { background: linear-gradient(135deg, var(--pink), var(--sky)); color: #fff; }
.mc-body { display: flex; flex-direction: column; gap: .15rem; padding-right: 4.8rem; min-width: 0; }
.mc-name { font-size: 1.05rem; letter-spacing: -.015em; }
.mc-sum { font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { font-weight: 750; color: var(--brand-ink); margin-top: .15rem; }
.t-pop .price { color: var(--text); background: linear-gradient(transparent 60%, var(--yellow) 60%); align-self: flex-start; }
.mc-go { position: absolute; right: .85rem; bottom: .8rem; font-size: .82rem; font-weight: 750; color: var(--brand-ink); display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .4rem .3rem .65rem; border-radius: var(--pill); background: var(--brand-soft); transition: background-color .3s, color .3s, padding .35s var(--ease); }
.t-pop .mc-go { background: var(--brand); color: #fff; border: 2px solid var(--ink); }
.t-pastel .mc-go { background: rgba(255, 255, 255, .8); color: var(--text); }
.mc-go .ic { width: 1rem; height: 1rem; }
@media (hover: hover) {
  .menu-card > a:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
  .t-pop .menu-card > a:hover { transform: translate(-3px, -3px); }
  .menu-card > a:hover .mc-img img { transform: scale(1.06); }
  .menu-card > a:hover .mc-go { padding-left: .85rem; background: var(--brand); color: var(--on-brand); }
  .t-pastel .menu-card > a:hover .mc-go { background: linear-gradient(120deg, var(--lav), var(--pink)); color: var(--text); }
  .menu-card > a:hover .mc-go .ic { transform: translateX(3px); }
}
.menu-card > a:active { transform: scale(.985); transition-duration: .1s; }

.info { margin: .75rem; background: var(--surface); border-radius: var(--radius); padding: .3rem 1.1rem; border: var(--border); box-shadow: var(--shadow); }
.t-basic .info { border-color: transparent; }
.t-pastel .info { background: var(--glass); }
.info > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: .6rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.t-pop .info > div { border-bottom-width: 2px; border-bottom-style: dashed; }
.info > div:last-child { border-bottom: 0; }
.info dt { color: var(--muted); display: flex; gap: .4rem; align-items: center; align-self: start; }
.info dd { margin: 0; }
.links { list-style: none; padding: 0 .75rem; display: grid; gap: .5rem; margin: .5rem 0; }
.links a { display: flex; align-items: center; gap: .6rem; background: var(--surface); padding: .9rem 1rem; border-radius: var(--radius-sm); text-decoration: none; font-weight: 650; color: var(--text); border: var(--border); box-shadow: var(--shadow); }
.t-basic .links a { border-color: transparent; }
.links a span { flex: 1; }
.links a .go { color: var(--muted); }
@media (hover: hover) { .links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .links a:hover .go { transform: translateX(3px); color: var(--brand-ink); } }
.empty { text-align: center; color: var(--muted); padding: 2rem; }
.foot { text-align: center; color: var(--muted); font-size: .78rem; padding: 2rem 1rem 0; }
.foot-links { display: flex; justify-content: center; gap: 1.2rem; margin-bottom: .5rem; }
.foot-links a { color: var(--muted); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease), color .2s; }
@media (hover: hover) { .foot-links a:hover { color: var(--text); background-size: 100% 1px; } }
.foot-mark { margin-top: 1.4rem; font-weight: 900; font-size: 1.05rem; letter-spacing: -.04em; color: color-mix(in srgb, var(--text) 22%, transparent); }

/* 일정 확인 창 */
.sheet { position: fixed; inset: 0; background: rgba(20, 16, 24, .42); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fade .25s ease both; }
.sheet-box { background: var(--surface); width: 100%; max-width: 560px; border-radius: 24px 24px 0 0; padding: 1rem 1.1rem 2rem; max-height: 90vh; overflow: auto; animation: sheetUp .45s var(--ease) both; }
.t-pop .sheet-box { border: var(--border); border-bottom: 0; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.x { border: 0; background: var(--surface-2); border-radius: 50%; width: 2.2rem; height: 2.2rem; cursor: pointer; color: var(--text); }
@media (hover: hover) { .x:hover { transform: rotate(90deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }

/* 달력 */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: .3rem 0 .6rem; }
.cal-head button { border: 0; background: var(--surface-2); width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.2rem; cursor: pointer; color: var(--text); }
.t-pop .cal-head button { border: 2px solid var(--ink); background: #fff; }
.cal-head button:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid.loading { opacity: .5; }
.cal-wd { text-align: center; font-size: .78rem; color: var(--muted); padding: .2rem 0; }
.cal-wd.sun { color: #e11d48; } .cal-wd.sat { color: #2563eb; }
.cal-day { aspect-ratio: 1 / 1.05; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: color-mix(in srgb, var(--muted) 55%, transparent); cursor: default; padding: 0; transition: transform .3s var(--ease), background-color .2s, box-shadow .2s; }
.cal-day small { font-size: .62rem; line-height: 1; min-height: .62rem; }
.cal-day.empty { background: none; }
.cal-day.open { background: var(--brand-soft); color: var(--text); cursor: pointer; font-weight: 700; }
.cal-day.open small { color: var(--brand-ink); font-weight: 650; }
@media (hover: hover) { .cal-day.open:not(.sel):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--brand); } }
.cal-day.open:active { transform: scale(.94); }
.cal-day.sel { background: var(--brand); color: var(--on-brand); } .cal-day.sel small { color: var(--on-brand); }
.t-pop .cal-day.sel { box-shadow: inset 0 0 0 2px var(--ink); }
.t-pastel .cal-day.open { background: rgba(205, 180, 219, .28); }
.t-pastel .cal-day.sel { background: linear-gradient(135deg, var(--lav), var(--pink)); color: var(--text); } .t-pastel .cal-day.sel small { color: var(--text); }
.cal-day.closed small { color: var(--muted); }
.slots { margin-top: .9rem; }
.slot-group { margin: .6rem 0 .35rem; font-size: .85rem; color: var(--muted); font-weight: 700; }
.slot-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip.pick { cursor: pointer; background: var(--surface); border-color: var(--line); font: inherit; padding: .45rem .9rem; }
.t-pop .chip.pick { border: 2px solid var(--ink); }
@media (hover: hover) { .chip.pick:not(.sel):hover { border-color: var(--brand); color: var(--brand-ink); } }
.chip.pick.sel { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: 700; }
.t-pastel .chip.pick.sel { background: linear-gradient(120deg, var(--lav), var(--pink)); color: var(--text); border-color: transparent; }
.picked { font-weight: 700; color: var(--brand-ink); margin: .7rem 0 0; min-height: 1.2em; }
.slot-preview { margin-top: .8rem; }

/* 주문서 */
.topbar { position: sticky; top: 0; z-index: 8; padding: .6rem .75rem; background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.t-pop .topbar { background: color-mix(in srgb, var(--bg) 85%, transparent); }
.back { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; font-weight: 650; color: var(--text); padding: .45rem .95rem .45rem .6rem; border-radius: var(--pill); background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; }
.back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-pop .back { box-shadow: none; border: 2px solid var(--ink); background: #fff; }
@media (hover: hover) { .back:hover { background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, var(--line)), 0 6px 16px -10px rgba(0, 0, 0, .3); } .t-pop .back:hover { box-shadow: 3px 3px 0 var(--ink); } }
.hero { width: calc(100% - 1.5rem); margin: .25rem .75rem 0; border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; }
.t-pop .hero { border: var(--border); box-shadow: var(--shadow); }
.menu-head { padding: 1rem 1.1rem 0; }
.menu-head h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
.notice { background: var(--brand-soft); }
.t-pop .notice { background: #fff8d6; }
.notice p { margin: 0 0 .5rem; } .notice p:last-child { margin: 0; }
.notice-box { background: var(--surface-2); border-radius: var(--radius-sm); padding: .8rem .9rem; margin-bottom: 1rem; font-size: .92rem; }
.notice-box p { margin: .3rem 0 0; }
.opts { display: grid; gap: .45rem; }
.opt { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .85rem; cursor: pointer; background: var(--surface); transition: border-color .2s, background-color .2s, transform .3s var(--ease); }
.t-pop .opt { border: 2px solid var(--ink); }
.t-pastel .opt { background: rgba(255, 255, 255, .75); }
@media (hover: hover) { .opt:not(.sold):hover { border-color: var(--brand); } }
.opt:not(.sold):active { transform: scale(.985); }
.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.t-pop .opt:has(input:checked) { box-shadow: 3px 3px 0 var(--ink); border-color: var(--ink); }
.opt.sold { opacity: .5; cursor: default; }
.opt-label { flex: 1; } .opt-price { color: var(--brand-ink); font-weight: 650; font-size: .9rem; white-space: nowrap; }
.stepper { display: flex; align-items: center; gap: .4rem; }
.stepper button { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 1.2rem; cursor: pointer; color: var(--text); }
.t-pop .stepper button { border: 2px solid var(--ink); }
.stepper input { width: 4.5rem; text-align: center; }
.unit { color: var(--muted); font-size: .88rem; }
.photos { display: flex; flex-wrap: wrap; gap: .5rem; }
.photo-add { width: 88px; height: 88px; border: 1.5px dashed var(--brand-mid); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--brand-ink); font-size: .82rem; cursor: pointer; font-weight: 650; transition: background-color .2s, border-color .2s; }
@media (hover: hover) { .photo-add:hover { background: var(--brand-soft); border-color: var(--brand); } }
.thumb { position: relative; width: 88px; height: 88px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.thumb button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #1f1c19; color: #fff; font-size: .75rem; cursor: pointer; }
.consents .consent { border-top: 1px solid var(--line); padding: .6rem 0; }
.t-pop .consents .consent { border-top: 2px dashed var(--ink); }
.consent label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.consent details { margin: .3rem 0 0 1.8rem; }
.consent summary { color: var(--muted); font-size: .85rem; cursor: pointer; }
.consent-body { background: var(--surface-2); border-radius: var(--radius-sm); padding: .7rem .8rem; font-size: .85rem; margin-top: .4rem; }
.agree-all { display: flex; gap: .5rem; align-items: center; padding: .4rem 0 .7rem; cursor: pointer; }
/* 하단 금액 바: 떠 있는 유리 막대 */
.paybar { position: fixed; left: .6rem; right: .6rem; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 20; margin: 0 auto; max-width: 540px; padding: .65rem .7rem .65rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 22px;
  background: var(--glass); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); box-shadow: 0 0 0 1px var(--line), 0 14px 34px -14px rgba(0, 0, 0, .3); }
.t-pop .paybar { background: #fff; box-shadow: none; border: var(--border); box-shadow: 4px 4px 0 var(--ink); }
.paybar > div { display: flex; flex-direction: column; min-width: 0; }
.paybar strong { font-size: 1.3rem; letter-spacing: -.02em; }
.paybar .btn-primary { flex: none; white-space: nowrap; }
.paybar .note { line-height: 1.3; }

/* 완료 / 조회 */
.done { text-align: center; }
.check { width: 3.8rem; height: 3.8rem; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; margin: .5rem auto 1rem; animation: pop .6s var(--ease) both; }
.check .ic { width: 1.9rem; height: 1.9rem; stroke-width: 2.6; }
.t-pop .check { border: var(--border); box-shadow: var(--shadow); }
.t-pastel .check { background: linear-gradient(135deg, var(--lav), var(--pink), var(--sky)); color: var(--text); }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } }
.order-no strong { font-size: 1.2rem; letter-spacing: .03em; }
.summary { display: grid; grid-template-columns: 6.5rem 1fr; gap: .45rem .8rem; margin: 0 0 .5rem; }
.summary dt { color: var(--muted); } .summary dd { margin: 0; }
.bank { background: var(--surface-2); padding: .8rem; border-radius: var(--radius-sm); font-weight: 700; }
.thumbs { display: flex; flex-wrap: wrap; gap: .4rem; }
.thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; }
.prose { line-height: 1.8; }
.msg .btn-soft { margin-top: .4rem; }

/* 첫 화면 등장: 살짝 떠오르며 나타남 */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.shop-head > *, .menu-card, .wrap > .card, form > .card { animation: rise .6s var(--ease) both; }
.menu-card:nth-child(2) { animation-delay: .05s; } .menu-card:nth-child(3) { animation-delay: .1s; } .menu-card:nth-child(4) { animation-delay: .15s; } .menu-card:nth-child(n+5) { animation-delay: .2s; }
.shop-head > :nth-child(2) { animation-delay: .04s; } .shop-head > :nth-child(3) { animation-delay: .08s; } .shop-head > :nth-child(n+4) { animation-delay: .12s; }

/* ---------- 넓은 화면(PC)에서 첫 화면 ---------- */
@media (min-width: 860px) {
  .wrap.home { max-width: 1080px; padding: 1.2rem 1.5rem 5rem; }
  .home .masthead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border-radius: 28px; overflow: hidden; background: var(--surface); border: var(--border); box-shadow: var(--shadow); }
  .t-basic .home .masthead { border-color: transparent; }
  .t-pastel .home .masthead { background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .t-pop .home .masthead { box-shadow: 6px 6px 0 var(--ink); }
  .home .cover { height: auto; min-height: 380px; }
  .t-pop .home .cover { border-bottom: 0; border-right: var(--border); }
  .home .cover-blank, .home .has-logo .cover-blank { padding: 2rem; align-items: flex-end; }
  .t-pop .home .cover-blank { align-items: center; }
  .home .cover-blank span { font-size: 4.2rem; }
  .home .shop-head { display: flex; flex-direction: column; justify-content: center; padding: 2.4rem 2.4rem; background: transparent; border-bottom: 0; }
  .home .has-logo .shop-head { padding-top: 2.4rem; }
  .home .logo { position: static; margin-bottom: 1.1rem; width: 84px; height: 84px; }
  .home .shop-name { font-size: 2.8rem; }
  .home .tabs-bar { padding: 1.4rem 0 .9rem; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; position: static; }
  .home .tabs { margin: 0; }
  .home .menu-list { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; padding: 0; }
  .home .menu-card > a { grid-template-columns: 1fr; padding: .7rem .7rem 1rem; align-items: start; height: 100%; }
  .home .mc-img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .home .ph { font-size: 3rem; }
  .home .mc-body { padding: .2rem .3rem 2.4rem; }
  .home .info, .home .links { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; max-width: 640px; }
  .home .info { padding: .3rem 1.3rem; }
  .sheet { align-items: center; }
  .sheet-box { border-radius: 26px; max-height: 86vh; }
  .t-pop .sheet-box { border-bottom: var(--border); box-shadow: 6px 6px 0 var(--ink); }
}

/* ---------- 움직임 줄이기 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 관리자 ---------- */
body.admin { background: #f4f4f2; }
body.admin .wrap { background: transparent; }
body.admin .card { border: 1px solid #ebe9e5; box-shadow: none; }
.a-top { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid #e7e5e1; position: sticky; top: 0; z-index: 30; }
.a-brand { font-weight: 800; text-decoration: none; color: var(--text); letter-spacing: -.02em; }
.a-brand small { color: var(--muted); font-weight: 500; }
.a-top-r { display: flex; gap: .8rem; align-items: center; }
.a-top-r form { margin: 0; }
.a-link { background: none; border: 0; font: inherit; font-size: .88rem; color: var(--muted); cursor: pointer; text-decoration: none; padding: 0; transition: color .2s; }
@media (hover: hover) { .a-link:hover { color: var(--text); } }
.a-nav { display: flex; gap: .25rem; overflow-x: auto; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); padding: .45rem .6rem; border-bottom: 1px solid #e7e5e1; position: sticky; top: 49px; z-index: 29; scrollbar-width: none; }
.a-nav a { flex: none; white-space: nowrap; padding: .45rem .85rem; border-radius: 999px; text-decoration: none; color: #57534e; font-size: .92rem; font-weight: 600; }
@media (hover: hover) { .a-nav a:not(.on):hover { background: #f1f0ed; color: var(--text); } }
.a-nav a.on { background: var(--brand-soft); color: var(--brand-ink); }
.a-main { max-width: 1100px; margin: 0 auto; padding: 1rem .25rem 4rem; }
.a-title { margin: .4rem .75rem .6rem; }
.flash { margin: .5rem .75rem; padding: .75rem 1rem; border-radius: 12px; font-weight: 600; animation: rise .4s var(--ease) both; }
.flash.ok { background: #ecfdf5; color: #065f46; } .flash.err { background: #fef2f2; color: #991b1b; }
.grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: .75rem; }
.kpi { background: #fff; border-radius: var(--radius); padding: .9rem 1rem; display: flex; flex-direction: column; text-decoration: none; color: var(--text); border: 1px solid #ebe9e5; }
@media (hover: hover) { a.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } }
.kpi span { color: var(--muted); font-size: .85rem; } .kpi strong { font-size: 1.35rem; letter-spacing: -.02em; } .kpi em { font-style: normal; color: var(--muted); font-size: .75rem; }
.cols, .cols3, .cols4 { display: grid; gap: 0 1rem; }
.addr { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: .8rem; padding: .5rem; border-bottom: 1px solid #e7e5e1; white-space: nowrap; }
.tbl td { padding: .6rem .5rem; border-bottom: 1px solid #f1f0ed; vertical-align: top; transition: background-color .15s; }
.tbl tr[data-href] { cursor: pointer; } .tbl tr[data-href]:hover td { background: #faf9f7; }
.tbl a { text-decoration: none; color: inherit; }
body.admin > main > .tbl-wrap, .a-main > .tbl-wrap { background: #fff; border-radius: var(--radius); margin: .75rem; padding: .3rem .6rem; border: 1px solid #ebe9e5; }
.filters .row { align-items: flex-end; }
.filters label { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: .2rem; }
.filters label.chk { flex-direction: row; }
.filters input, .filters select { padding: .5rem .6rem; min-width: 8rem; }
.filters input[type=checkbox] { min-width: 0; }
.filters label.chk { color: var(--text); font-size: .9rem; align-self: center; }
.presets { margin-top: .6rem; }
.pager { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; margin: 1rem; }
.pager a { padding: .35rem .75rem; border-radius: 999px; background: #fff; text-decoration: none; }
.pager a.on { background: var(--brand); color: #fff; }
.od-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.od-head h2 { margin: .1rem 0; font-size: 1.3rem; }
.od-price { text-align: right; } .od-price strong { display: block; font-size: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.big { font-size: 1.2rem; font-weight: 700; margin: 0 0 .3rem; }
form.inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
form.inline input { width: auto; flex: 1; min-width: 8rem; }
form.inline label { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); flex: 1; }
form.inline-mini { display: inline; margin-left: .5rem; }
.tpl-list { display: grid; gap: .5rem; }
.tpl { border: 1px solid #e7e5e1; border-radius: 12px; padding: .5rem .8rem; }
.tpl summary { cursor: pointer; font-weight: 600; }
.tpl textarea { margin: .5rem 0; font-size: .88rem; background: #fafafa; }
.events { list-style: none; padding: 0; margin: 0; font-size: .9rem; display: grid; gap: .3rem; }
ul.plain { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .35rem; }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin: .5rem .75rem; }
.mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: .5rem .75rem; }
.mw { text-align: center; font-size: .8rem; color: var(--muted); }
.mc { background: #fff; border-radius: 10px; min-height: 84px; padding: .35rem; text-decoration: none; color: var(--text); font-size: .75rem; display: flex; flex-direction: column; gap: 2px; overflow: hidden; transition: box-shadow .2s; }
@media (hover: hover) { a.mc:hover { box-shadow: inset 0 0 0 2px var(--brand-mid); } }
.mc.empty { background: transparent; }
.mc.closed { background: #efeeeb; color: #a8a29e; }
.mc.today { outline: 2px solid var(--brand); }
.mc .d { font-weight: 700; font-size: .85rem; }
.mc .cnt { background: var(--brand); color: #fff; border-radius: 6px; padding: 0 .3rem; align-self: flex-start; font-weight: 700; }
.mc .tag { color: #a8a29e; }
.mc ul { list-style: none; margin: 0; padding: 0; display: none; }
.m-admin { list-style: none; padding: 0; margin: 0; }
.m-admin li { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.m-admin li.off { opacity: .65; }
.m-admin .ph, .m-admin img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.m-admin .ph { font-size: 1.5rem; }
.m-admin form { display: inline-flex; gap: .25rem; margin: 0; }
.img-up { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.img-prev { width: 120px; height: 120px; border-radius: 12px; background: #f1f0ed; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-prev.wide { width: 220px; height: 120px; }
.img-prev.round { width: 96px; height: 96px; border-radius: 50%; }
.img-prev img { width: 100%; height: 100%; object-fit: cover; }
.prefix { display: flex; align-items: center; } .prefix span { padding: 0 .4rem 0 0; color: var(--muted); white-space: nowrap; }
.savebar { position: sticky; bottom: 0; background: rgba(244, 244, 242, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: .8rem .75rem; display: flex; gap: .5rem; flex-wrap: wrap; z-index: 10; }
.consent-edit { border-top: 1px solid #e7e5e1; padding: .8rem 0; display: grid; gap: .5rem; }
.w60 { width: 4.5rem !important; } .w100 { width: 7rem !important; }
.fb-item { border: 1px solid #e7e5e1; border-radius: 12px; padding: .8rem; margin-bottom: .8rem; background: #fcfcfb; }
.fb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.fb-type { font-weight: 800; color: var(--brand-ink); }
.fb-opts { display: grid; gap: .35rem; margin: .5rem 0 .8rem; }
.fb-opt { display: grid; grid-template-columns: 1fr 7.5rem 2.5rem 2.2rem; gap: .4rem; align-items: center; }
.fb-opt.hdr span { font-size: .78rem; color: var(--muted); }
.fb-opt input { padding: .45rem .6rem; }
.add-field { margin-top: .5rem; }
.chart { margin-top: .3rem; }
.svg-chart { width: 100%; height: auto; min-width: 560px; }
.chart:has(.svg-chart) { overflow-x: auto; }
.svg-chart .grid { stroke: #eee; } .svg-chart .axis { font-size: 11px; fill: #a8a29e; }
.svg-chart .bar { fill: var(--brand-mid); transition: fill .15s; } .svg-chart .bar:hover { fill: var(--brand); }
.svg-chart .line { fill: none; stroke: #1f2937; stroke-width: 2; stroke-linejoin: round; }
.legend { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.lg-bar { width: 12px; height: 12px; background: var(--brand-mid); display: inline-block; border-radius: 2px; }
.lg-line { width: 16px; height: 2px; background: #1f2937; display: inline-block; margin-left: .6rem; }
.hbars { display: grid; gap: .45rem; }
.hb { display: grid; grid-template-columns: minmax(5rem, 9rem) 1fr auto; gap: .6rem; align-items: center; font-size: .88rem; }
.hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-t { background: #f1f0ed; border-radius: 6px; height: 14px; overflow: hidden; }
.hb-f { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.hb-v { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.heat { border-collapse: separate; border-spacing: 3px; font-size: .75rem; }
.heat th { color: var(--muted); font-weight: 500; padding: 0 .2rem; }
.heat td { width: 2.2rem; height: 1.8rem; text-align: center; border-radius: 5px; background: color-mix(in srgb, var(--brand) calc(var(--a) * 100%), #f1f0ed); color: #fff; font-weight: 700; }
.opt-grid { display: grid; gap: 1rem; }
.opt-grid h3 { margin-top: 0; }

/* 관리자: 테마 고르기 */
.theme-grid { display: grid; gap: .75rem; }
.theme-card { display: grid; grid-template-columns: 132px 1fr; gap: .9rem; align-items: center; padding: .7rem; border-radius: 16px; border: 1.5px solid #e7e5e1; background: #fff; cursor: pointer; }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.theme-card:has(input:checked) .tc-text strong::after { content: '선택됨'; margin-left: .45rem; font-size: .72rem; color: #fff; background: var(--brand); padding: .1rem .45rem; border-radius: 999px; vertical-align: middle; }
.theme-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
@media (hover: hover) { .theme-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .35); } .theme-card:hover .tp { transform: scale(1.03); } }
.tc-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.sw { display: flex; gap: 4px; margin-top: .3rem; }
.sw i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
/* 미리보기 그림 (실제 테마 변수 사용) */
.tp { display: block; width: 132px; height: 96px; border-radius: 12px; overflow: hidden; position: relative; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .4s var(--ease); }
.tp.t-pop { background-color: var(--bg); background-image: radial-gradient(circle at 10px 12px, var(--pink) 0 2px, transparent 2.5px), radial-gradient(circle at 40px 30px, var(--yellow) 0 2px, transparent 2.5px), radial-gradient(circle at 25px 45px, var(--blue) 0 1.5px, transparent 2px); background-size: 50px 50px; }
.tp.t-pastel { background: radial-gradient(70% 70% at 0 0, var(--pink), transparent 70%), radial-gradient(70% 70% at 100% 0, var(--sky), transparent 70%), radial-gradient(80% 70% at 50% 100%, var(--lav), transparent 70%), #fffaf6; }
.tp-cover { position: absolute; left: 0; right: 0; top: 0; height: 34px; background: var(--brand); }
.tp.t-basic .tp-cover { background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 85%, #fff), var(--brand-ink)); }
.tp.t-pop .tp-cover { background-color: var(--pink); background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 9px 9px; border-bottom: 1.5px solid var(--ink); }
.tp.t-pastel .tp-cover { background: transparent; }
.tp-body { position: absolute; left: 8px; top: 40px; display: grid; gap: 4px; }
.tp-body i { display: block; border-radius: 3px; background: var(--text); }
.tp-h { width: 54px; height: 7px; } .tp-l { width: 38px; height: 4px; opacity: .35; }
.tp-btn { width: 34px; height: 10px; border-radius: 999px !important; background: var(--btn-bg) !important; }
.tp.t-pop .tp-btn { border: 1.5px solid var(--ink); box-shadow: 1.5px 1.5px 0 var(--ink); }
.tp-card { position: absolute; right: 8px; bottom: 8px; width: 52px; height: 44px; border-radius: 8px; background: var(--surface); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); padding: 5px; display: grid; gap: 4px; align-content: start; }
.tp.t-pop .tp-card { border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.tp.t-pastel .tp-card { background: rgba(255, 255, 255, .75); }
.tp-card i { display: block; height: 16px; border-radius: 4px; background: var(--brand-soft); }
.tp.t-pop .tp-card i:first-child { background: var(--pink-soft); }
.tp.t-pastel .tp-card i:first-child { background: linear-gradient(135deg, var(--pink), var(--sky)); }
.tp-card i + i { height: 5px; width: 70%; background: var(--text); opacity: .3; }

@media (min-width: 760px) {
  .grid4 { grid-template-columns: repeat(4, 1fr); }
  .cols { grid-template-columns: 1fr 1fr; }
  .cols3 { grid-template-columns: repeat(3, 1fr); }
  .cols4 { grid-template-columns: repeat(4, 1fr); }
  .a-main .cols { gap: 0 .75rem; } .a-main .cols > .card { margin-left: 0; margin-right: 0; }
  .a-main > .cols { padding: 0 .75rem; }
  .mc ul { display: block; }
  .mc { min-height: 110px; }
  .opt-grid { grid-template-columns: 1fr 1fr; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .theme-card { grid-template-columns: 1fr; align-items: start; }
  .tp { width: 100%; height: 120px; }
}
@media (max-width: 640px) {
  .orders-tbl thead { display: none; }
  .orders-tbl tr { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; padding: .7rem .1rem; border-bottom: 1px solid #eee; }
  .orders-tbl td { border: 0; padding: 0; }
  .orders-tbl td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .orders-tbl td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; }
  .orders-tbl td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .orders-tbl td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; white-space: nowrap; }
  .orders-tbl td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .orders-tbl td br { display: none; }
  .orders-tbl td .muted { margin-left: .3rem; }
  .orders-tbl td:nth-child(5) .muted, .orders-tbl td:nth-child(4) .muted { display: block; margin: 0; }
  .a-main .card { margin-left: .5rem; margin-right: .5rem; }
}
@media (max-width: 420px) {
  .menu-card > a { grid-template-columns: 88px 1fr; gap: .85rem; }
  .mc-img { width: 88px; height: 88px; }
  .summary { grid-template-columns: 5.5rem 1fr; }
}

/* 넓은 화면/좁은 화면 전용 */
.m-only { display: none; }
@media (max-width: 640px) { .m-only { display: block; margin-top: 4px; } .d-only { display: none; } }

/* 고객 주문 확인: 취소 안내 */
.cancel-note { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: #fdecec; color: #7a1f1f; text-align: left; }
.cancel-note p { margin: 6px 0; }
.cancel-note .cancel-title { font-weight: 700; }
.cancel-note .muted { color: #9a5a5a; }
.cancel-note a { color: inherit; text-decoration: underline; }

/* 2단계 인증 */
.otp-input { font-size: 1.35rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; text-align: center; }
.twofa-add { display: grid; gap: 1rem; }
.twofa-add .qr svg { width: 200px; height: 200px; border-radius: 12px; border: 1px solid var(--line); }
code.secret { display: inline-block; font-size: 1rem; letter-spacing: .06em; padding: .45rem .6rem; user-select: all; -webkit-user-select: all; }
ol.recovery { columns: 2; padding-left: 1.4rem; font-size: 1.05rem; line-height: 2; }
ol.recovery code { letter-spacing: .05em; }

/* =====================================================================
   모던 디자인 언어 (기본 테마 · 모던 테마 · 관리자 화면 공통)
   - 테두리 없는 큰 둥근 카드, 가늘고 큰 글씨, 알약 탭·라벨, ↗ 네모 버튼
   - 기본: 쿨 그레이 + 가게 대표 색상 / 모던: 크림 + 분홍 파스텔 3색
   ===================================================================== */
.t-basic, .t-modern {
  --bg: #ebebe9; --surface: #f7f7f6; --surface-2: #e2e2df; --raised: #ffffff;
  --text: #262626; --muted: #8c8c88; --line: #dadad6;
  --radius: 26px; --radius-sm: 16px;
  --border: 1px solid transparent;
  --shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 1px 2px rgba(20, 20, 20, .03);
  --shadow-hover: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 44px -26px rgba(20, 20, 20, .28);
  --display: 300; --track: -.04em;
  --glow-a: color-mix(in srgb, var(--brand) 14%, transparent); --glow-b: rgba(255, 255, 255, .9);
  --sel-bg: var(--brand); --sel-fg: var(--on-brand);
  --glass: color-mix(in srgb, var(--bg) 78%, transparent);
  --spot: rgba(255, 255, 255, .45);
}
/* 모던: 파스텔 3색 조합 (바탕 --cream · 연한색 --blush · 메인 --rose) — 색 조합마다 값만 바뀜 */
.pal-pink  { --cream: #f5f2ef; --blush: #f7d6de; --rose: #f2b7c9; --warm: #9c8f88; --p-text: #2e2627; --p-line: #e6ddd7; --p-s2: #ece5e1; }
.pal-beige { --cream: #f6f2ea; --blush: #efe4d0; --rose: #e2cda6; --warm: #9a8e7c; --p-text: #2f2a22; --p-line: #e6ddcd; --p-s2: #ebe4d8; }
.pal-green { --cream: #f1f5ef; --blush: #d9ecd6; --rose: #b3dab7; --warm: #8a958a; --p-text: #232a24; --p-line: #dae3d7; --p-s2: #e1e8de; }
.pal-blue  { --cream: #f0f4f8; --blush: #d6e7f6; --rose: #a8cbec; --warm: #8a95a1; --p-text: #222831; --p-line: #d9e1ea; --p-s2: #e0e6ed; }
.pal-gray  { --cream: #f2f2f1; --blush: #e1e2e1; --rose: #c6cacd; --warm: #8d8f90; --p-text: #26282a; --p-line: #dcdddc; --p-s2: #e5e5e4; }
.pal-brown { --cream: #f4efea; --blush: #e7d8cb; --rose: #cdae95; --warm: #978a7e; --p-text: #2e241e; --p-line: #e3d8ce; --p-s2: #e9e0d8; }
.t-modern {
  --bg: var(--cream); --surface: color-mix(in srgb, var(--cream) 45%, #fff); --surface-2: var(--p-s2); --raised: #ffffff;
  --text: var(--p-text); --muted: var(--warm); --line: var(--p-line);
  --brand-soft: var(--blush); --brand-mid: var(--rose);
  --btn-bg: var(--rose); --btn-fg: var(--p-text);
  --glow-a: color-mix(in srgb, var(--rose) 55%, transparent); --glow-b: color-mix(in srgb, var(--blush) 70%, transparent);
  --sel-bg: var(--rose); --sel-fg: var(--p-text);
}
body.t-basic, body.t-modern { background: var(--bg); }

/* 글씨: 가늘고 크게 */
:is(.t-basic, .t-modern) h1 { font-weight: 300; letter-spacing: -.04em; }
:is(.t-basic, .t-modern) h2 { font-weight: 500; letter-spacing: -.02em; }
:is(.t-basic, .t-modern) .shop-name { font-weight: 300; font-size: clamp(2.1rem, 9vw, 2.9rem); letter-spacing: -.05em; line-height: 1.05; }
:is(.t-basic, .t-modern) .menu-head h1 { font-weight: 300; font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
:is(.t-basic, .t-modern) .tagline { font-size: 1.02rem; }

/* 알약 라벨 (○ 예약 주문) */
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .55rem; padding: .22rem .7rem .22rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--surface-2); }
.eyebrow i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--brand); }
.t-pop .eyebrow { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.t-pastel .eyebrow { background: rgba(255, 255, 255, .7); }
:is(.t-basic, .t-modern) .eyebrow { background: var(--raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }

/* 카드: 테두리 없이 큰 둥근 모서리 + 은은한 빛 번짐 */
:is(.t-basic, .t-modern) .card, :is(.t-basic, .t-modern) .info, :is(.t-basic, .t-modern) .menu-card > a, :is(.t-basic, .t-modern) .links a {
  border: 0; box-shadow: var(--shadow);
  background: radial-gradient(90% 70% at 100% 0%, var(--glow-b), transparent 60%), var(--surface);
}
:is(.t-basic, .t-modern) .card { border-radius: var(--radius); }
:is(.t-basic, .t-modern) .notice { background: radial-gradient(80% 90% at 0% 100%, var(--glow-a), transparent 65%), var(--surface); }
:is(.t-basic, .t-modern) .info > div { border-bottom-color: var(--line); }

/* 첫 화면 위쪽 */
:is(.t-basic, .t-modern) .shop-head { background: transparent; }
:is(.t-basic, .t-modern) .cover { margin: .75rem .75rem 0; border-radius: var(--radius); height: 220px; }
:is(.t-basic, .t-modern) .cover-blank { background: radial-gradient(70% 90% at 85% 15%, var(--glow-a), transparent 65%), radial-gradient(60% 80% at 10% 100%, var(--glow-b), transparent 60%), var(--surface); align-items: flex-end; }
:is(.t-basic, .t-modern) .cover-blank::before { content: ''; position: absolute; inset: auto; right: 1.1rem; top: 1.1rem; width: 34%; max-width: 170px; aspect-ratio: 1; border-radius: 22px; background: var(--brand); opacity: .92; }
.t-modern .cover-blank::before { background: linear-gradient(150deg, var(--rose), var(--blush)); opacity: 1; }
:is(.t-basic, .t-modern) .cover-blank span { display: none; }
:is(.t-basic, .t-modern) .has-logo .cover-blank { align-items: flex-start; }
:is(.t-basic, .t-modern) .logo { left: 1.6rem; border-color: var(--bg); }
:is(.t-basic, .t-modern) .has-logo .shop-head { padding-top: 3.2rem; }

/* 메뉴/정보 탭: 가운데 알약, 선택된 칸만 흰색 */
:is(.t-basic, .t-modern) .tabs-bar { background: var(--glass); }
:is(.t-basic, .t-modern) .tabs { background: var(--surface-2); }
:is(.t-basic, .t-modern) .tabs::before { background: var(--raised); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* 메뉴 카드: 오른쪽 위 ↗ 네모 버튼 */
:is(.t-basic, .t-modern) .mc-img { border-radius: 18px; background: var(--surface-2); }
:is(.t-basic, .t-modern) .ph { background: radial-gradient(80% 80% at 70% 20%, var(--glow-a), transparent 70%), var(--surface-2); color: var(--muted); font-weight: 300; }
:is(.t-basic, .t-modern) .mc-name { font-weight: 500; }
:is(.t-basic, .t-modern) .mc-body { padding-right: 2.6rem; }
:is(.t-basic, .t-modern) .mc-go { top: .75rem; right: .75rem; bottom: auto; width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 11px; background: var(--raised); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
:is(.t-basic, .t-modern) .mc-go span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:is(.t-basic, .t-modern) .mc-go .ic { transform: rotate(-45deg); }
@media (hover: hover) {
  :is(.t-basic, .t-modern) .menu-card > a:hover .mc-go { padding: 0; background: var(--text); color: var(--bg); }
  :is(.t-basic, .t-modern) .menu-card > a:hover .mc-go .ic { transform: rotate(0deg); }
}
/* 가격: 가늘고 큰 숫자 + 작은 색 점 */
:is(.t-basic, .t-modern) .price { font-weight: 300; font-size: 1.45rem; letter-spacing: -.03em; color: var(--text); margin-top: .35rem; display: inline-flex; align-items: flex-start; gap: .2rem; }
:is(.t-basic, .t-modern) .price::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: .45rem; flex: none; }
.t-modern .price::before { background: var(--rose); }

/* 버튼 */
:is(.t-basic, .t-modern) .btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 20px -12px color-mix(in srgb, var(--btn-bg, var(--brand)) 80%, #000); }
.t-modern .btn-primary { background: var(--rose); color: var(--btn-fg); }
@media (hover: hover) { .t-modern .btn-primary:not(:disabled):hover { background: color-mix(in srgb, var(--rose) 88%, var(--p-text)); } }
:is(.t-basic, .t-modern) .btn-soft { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
@media (hover: hover) { :is(.t-basic, .t-modern) .btn-soft:hover { background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .35); } }
:is(.t-basic, .t-modern) .btn-xs { background: var(--raised); }
:is(.t-basic, .t-modern) .back { background: var(--raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }

/* 입력 칸 */
:is(.t-basic, .t-modern) :is(input, select, textarea) { background: var(--raised); border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }
:is(.t-basic, .t-modern) :is(input, select, textarea):focus { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
:is(.t-basic, .t-modern) .opt { background: var(--raised); border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }
:is(.t-basic, .t-modern) .opt:has(input:checked) { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); }
:is(.t-basic, .t-modern) .stepper button { background: var(--raised); border-color: transparent; }
:is(.t-basic, .t-modern) .notice-box, :is(.t-basic, .t-modern) .consent-body, :is(.t-basic, .t-modern) .bank { background: var(--surface-2); }

/* 달력·시간 */
:is(.t-basic, .t-modern) .cal-day { border-radius: 14px; background: transparent; }
:is(.t-basic, .t-modern) .cal-day.open { background: var(--raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
:is(.t-basic, .t-modern) .cal-day.open small { color: var(--muted); font-weight: 600; }
:is(.t-basic, .t-modern) .cal-day.sel { background: var(--sel-bg); color: var(--sel-fg); box-shadow: none; }
:is(.t-basic, .t-modern) .cal-day.sel small { color: var(--sel-fg); }
:is(.t-basic, .t-modern) .cal-head button { background: var(--raised); }
:is(.t-basic, .t-modern) .chip.pick { background: var(--raised); border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
:is(.t-basic, .t-modern) .chip.pick.sel { background: var(--sel-bg); color: var(--sel-fg); }
:is(.t-basic, .t-modern) .sheet-box { background: var(--bg); }
:is(.t-basic, .t-modern) .paybar { background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .3); }
:is(.t-basic, .t-modern) .paybar strong { font-weight: 300; font-size: 1.5rem; }
:is(.t-basic, .t-modern) .check { background: var(--sel-bg); color: var(--sel-fg); }
:is(.t-basic, .t-modern) .order-no strong { font-weight: 300; font-size: 1.6rem; letter-spacing: .02em; }

@media (min-width: 860px) {
  :is(.t-basic, .t-modern) .home .masthead { background: transparent; box-shadow: none; gap: 1rem; overflow: visible; }
  :is(.t-basic, .t-modern) .home .cover { margin: 0; min-height: 400px; }
  :is(.t-basic, .t-modern) .home .shop-head { border-radius: var(--radius); background: radial-gradient(90% 70% at 100% 0%, var(--glow-b), transparent 60%), var(--surface); }
  :is(.t-basic, .t-modern) .home .shop-name { font-size: 3.6rem; }
  :is(.t-basic, .t-modern) .home .tabs { margin: 0 auto; }
  :is(.t-basic, .t-modern) .home .cover-blank span { font-size: 4.6rem; }
}

/* ---------------- 관리자 화면 (모던 언어) ---------------- */
body.admin:is(.t-basic, .t-modern) { background: var(--bg); }
body.admin:is(.t-basic, .t-modern) .card { border: 0; }
body.admin:is(.t-basic, .t-modern) .a-top { background: var(--glass); border-bottom: 0; }
body.admin:is(.t-basic, .t-modern) .a-brand { font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
body.admin:is(.t-basic, .t-modern) .a-brand::before { content: ''; width: 22px; height: 22px; border-radius: 7px; background: var(--brand); }
.t-modern.admin .a-brand::before { background: linear-gradient(150deg, var(--rose), var(--blush)); }
body.admin:is(.t-basic, .t-modern) .a-nav { background: transparent; border-bottom: 0; padding: .3rem .75rem .6rem; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.admin:is(.t-basic, .t-modern) .a-nav-in { display: flex; gap: 2px; width: max-content; max-width: 100%; margin: 0 auto; padding: 4px; border-radius: 999px; background: var(--surface-2); overflow-x: auto; scrollbar-width: none; }
body.admin:is(.t-basic, .t-modern) .a-nav a { color: var(--muted); padding: .5rem 1rem; }
body.admin:is(.t-basic, .t-modern) .a-nav a.on { background: var(--raised); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
@media (hover: hover) { body.admin:is(.t-basic, .t-modern) .a-nav a:not(.on):hover { background: color-mix(in srgb, var(--raised) 55%, transparent); color: var(--text); } }
body.admin:is(.t-basic, .t-modern) .a-title { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: .8rem .75rem 1rem; }
/* 숫자 카드 */
body.admin:is(.t-basic, .t-modern) .kpi { border: 0; min-height: 128px; padding: 1.1rem 1.2rem; justify-content: space-between; border-radius: var(--radius); background: radial-gradient(90% 70% at 100% 0%, var(--glow-b), transparent 60%), var(--surface); box-shadow: var(--shadow); }
body.admin:is(.t-basic, .t-modern) .kpi:first-child { background: radial-gradient(90% 90% at 100% 0%, var(--glow-a), transparent 70%), var(--surface); }
body.admin:is(.t-basic, .t-modern) .kpi span { font-size: .85rem; padding-right: 2.2rem; }
body.admin:is(.t-basic, .t-modern) .kpi strong { font-size: clamp(1.7rem, 4.5vw, 2.4rem); font-weight: 300; letter-spacing: -.04em; display: inline-flex; gap: .2rem; align-items: flex-start; }
body.admin:is(.t-basic, .t-modern) .kpi strong::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: .5rem; flex: none; }
body.admin:is(.t-basic, .t-modern) a.kpi::before { content: ''; position: absolute; top: .9rem; right: .9rem; width: 30px; height: 30px; border-radius: 10px; background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: transform .35s var(--ease); }
@media (hover: hover) { body.admin:is(.t-basic, .t-modern) a.kpi:hover::before { transform: rotate(45deg); } }
body.admin:is(.t-basic, .t-modern) .a-main > .tbl-wrap, body.admin:is(.t-basic, .t-modern) > main > .tbl-wrap { background: var(--surface); border: 0; border-radius: var(--radius); }
body.admin:is(.t-basic, .t-modern) .tbl th { border-bottom-color: var(--line); }
body.admin:is(.t-basic, .t-modern) .tbl td { border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }
body.admin:is(.t-basic, .t-modern) .tbl tr[data-href]:hover td { background: color-mix(in srgb, var(--raised) 70%, transparent); }
body.admin:is(.t-basic, .t-modern) .badge { background: var(--raised); color: var(--text); font-weight: 600; padding: .16rem .6rem .16rem .5rem; }
body.admin:is(.t-basic, .t-modern) .badge::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: .35rem; vertical-align: 1px; }
body.admin:is(.t-basic, .t-modern) .flash { border-radius: var(--radius-sm); }
body.admin:is(.t-basic, .t-modern) .savebar { background: var(--glass); }
body.admin:is(.t-basic, .t-modern) .mc { background: var(--surface); border-radius: 14px; }
body.admin:is(.t-basic, .t-modern) .mc.closed { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
body.admin:is(.t-basic, .t-modern) .img-prev, body.admin:is(.t-basic, .t-modern) .hb-t { background: var(--surface-2); }
body.admin:is(.t-basic, .t-modern) .theme-card { border: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
body.admin:is(.t-basic, .t-modern) .theme-card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent); }
body.admin:is(.t-basic, .t-modern) .tpl, body.admin:is(.t-basic, .t-modern) .fb-item { border-color: var(--line); background: var(--raised); }
@media (min-width: 760px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .theme-grid { grid-template-columns: repeat(4, 1fr); } }

/* 테마 미리보기 그림: 기본·모던 */
.tp.t-basic, .tp.t-modern { background: var(--bg); }
.tp.t-basic .tp-cover, .tp.t-modern .tp-cover { left: 6px; right: 6px; top: 6px; height: 30px; border-radius: 8px; background: radial-gradient(70% 90% at 85% 15%, var(--glow-a), transparent 65%), var(--surface); }
.tp.t-basic .tp-cover::after, .tp.t-modern .tp-cover::after { content: ''; position: absolute; right: 6px; top: 5px; width: 20px; height: 20px; border-radius: 6px; background: var(--brand); }
.tp.t-modern .tp-cover::after { background: linear-gradient(150deg, var(--rose), var(--blush)); }
.tp.t-basic .tp-h, .tp.t-modern .tp-h { height: 8px; opacity: .75; }
.tp.t-basic .tp-card, .tp.t-modern .tp-card { box-shadow: none; background: var(--surface); }
.tp.t-modern .tp-btn { background: var(--rose) !important; }

/* 모던 색 조합 고르기 */
.pal-field { margin-top: 1rem; }
.pal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pal-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .4rem; border-radius: 16px; background: var(--raised, #fff); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; font-size: .85rem; font-weight: 600; transition: transform .3s var(--ease), box-shadow .2s; }
.pal-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pal-chip:has(input:checked) { box-shadow: inset 0 0 0 2px var(--text), 0 6px 16px -10px rgba(0, 0, 0, .35); }
.pal-chip:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
@media (hover: hover) { .pal-chip:hover { transform: translateY(-2px); } }
.pal-sw { display: flex; }
.pal-sw i { width: 20px; height: 20px; border-radius: 50%; margin-left: -5px; box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pal-sw i:first-child { margin-left: 0; }
@media (min-width: 760px) { .pal-grid { grid-template-columns: repeat(6, 1fr); } }
.a-nav-in:empty { display: none; }
.shop-head .eyebrow { align-self: flex-start; }
body.admin:is(.t-basic, .t-modern) .kpi strong { white-space: nowrap; font-size: clamp(1.35rem, 5.6vw, 2.4rem); }
/* 테마별 추가 설정: 고른 테마의 것만 보이게 */
#shop-form .theme-opt { display: none; margin-top: 1rem; animation: rise .35s var(--ease) both; }
#shop-form:has(input[name=theme][value=basic]:checked) .basic-color-field,
#shop-form:has(input[name=theme][value=modern]:checked) .pal-field { display: block; }
/* 관리자 메뉴 줄: 스크롤해도 뒤 내용이 비치지 않게 */
body.admin:is(.t-basic, .t-modern) .a-nav { background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }