/* 포장 주문 - 손님 화면(.to)과 가게 주문판(.toa). Controls/ClubTakeout, ClubTakeoutManagement.
   업소 사이트의 색(--corp-acc, --corp-ink)을 따른다. */

.to, .toa { --to-acc: var(--corp-acc, #0f7ac0); --to-ink: var(--corp-ink, #12385e); --to-line: var(--corp-line, #dfe5ea);
            --to-mut: var(--corp-mut, #5d6b78); --to-bg: #f6f8fa;
            max-width: 1180px; margin: 0 auto; padding: 28px 16px 90px; color: #1f2933; box-sizing: border-box; }
.to *, .toa * { box-sizing: border-box; }
.to-title { margin: 0; font-size: 28px; font-weight: 800; color: var(--to-ink); }
.to-title small { font-size: 15px; font-weight: 600; color: var(--to-mut); }
.to-head { margin-bottom: 20px; }
.to-lead { margin: 6px 0 0; color: var(--to-mut); font-size: 15px; }
.to-notice { padding: 14px 16px; border-radius: 12px; background: #eef6fc; color: var(--to-ink); font-size: 15px; }
.to-notice-warn { background: #fff4e5; color: #8a4b00; }
.to-call { font-weight: 700; color: var(--to-acc); white-space: nowrap; }

/* ── 손님: 메뉴 + 주문 내역 ── */
.to-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
/* 옆으로 미는 분류 띠가 칸을 넓히지 않게 (그러면 좁은 화면에서 가격·담기 단추가 잘린다). */
.to-menu { min-width: 0; }
.to-cats { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin-bottom: 8px; background: #fff; scrollbar-width: none; }
.to-cats::-webkit-scrollbar { display: none; }
.to-cats a { flex: none; padding: 7px 14px; border: 1px solid var(--to-line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--to-ink); text-decoration: none; white-space: nowrap; }
.to-cats a:hover { border-color: var(--to-acc); color: var(--to-acc); }
.to-cat { scroll-margin-top: 60px; margin-bottom: 26px; }
.to-cat h2 { margin: 0 0 10px; font-size: 19px; font-weight: 800; color: var(--to-ink); }
.to-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.to-item { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--to-line); border-radius: 14px; background: #fff; }
.to-item.is-off { opacity: .65; }
.to-item-photo { flex: none; width: 76px; height: 76px; border-radius: 10px; object-fit: cover; background: var(--to-bg); }
.to-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.to-item-name { font-size: 16px; font-weight: 700; }
.to-item-sub { font-size: 13.5px; color: var(--to-mut); }
.to-item-desc { font-size: 13.5px; color: var(--to-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.to-item-buy { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.to-item-price { font-size: 15px; font-weight: 800; color: var(--to-ink); }
.to-add { position: relative; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--to-acc); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.to-add:hover { filter: brightness(1.08); }
.to-add.is-in::after { content: attr(data-count); position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--to-ink); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.to-callonly { font-size: 12.5px; color: var(--to-mut); }

.to-cart { position: sticky; top: 16px; padding: 20px; border: 1px solid var(--to-line); border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(18, 56, 94, .07); }
.to-cart h2 { margin: 0 0 12px; font-size: 19px; font-weight: 800; color: var(--to-ink); }
.to-cart-empty { margin: 0 0 8px; color: var(--to-mut); font-size: 14px; }
.to-lines { list-style: none; margin: 0 0 10px; padding: 0; }
.to-lines li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--to-line); font-size: 14.5px; }
.to-lines li > span:first-child, .to-line-name { flex: 1; min-width: 0; }
.to-line-amt { font-weight: 700; }
.to-qty { display: inline-flex; align-items: center; gap: 8px; }
.to-qty button { width: 28px; height: 28px; border: 1px solid var(--to-line); border-radius: 50%; background: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.to-sums { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 8px 0; font-size: 14.5px; }
.to-sums dt, .to-sums dd { margin: 0; }
.to-sums dd { text-align: right; }
.to-sums .to-total { font-size: 17px; font-weight: 800; color: var(--to-ink); }
.to-pay { margin: 6px 0 14px; padding: 8px 10px; border-radius: 8px; background: var(--to-bg); font-size: 13px; color: var(--to-mut); }
.to-form { display: grid; gap: 10px; }
.to-form label, .toa-form label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--to-ink); }
.to-form input, .to-form select, .to-form textarea,
.toa-form input[type=text], .toa-form input[type=email], .toa-form input[type=time], .toa-form input[type=number], .toa-form select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--to-line); border-radius: 10px; font: inherit; font-size: 15px; font-weight: 400; background: #fff; }
.to-form input:focus, .to-form select:focus, .to-form textarea:focus { outline: 2px solid var(--to-acc); outline-offset: -1px; border-color: transparent; }
.to-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.to-error { margin: 0; color: #c0392b; font-size: 13.5px; }
.to-submit { padding: 14px; border: 0; border-radius: 12px; background: var(--to-acc); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; }
.to-submit:disabled { opacity: .6; cursor: default; }
.to-bar { display: none; }

/* ── 손님: 주문 상태 ── */
.to-status { max-width: 520px; margin: 10px auto; padding: 26px; border: 1px solid var(--to-line); border-radius: 18px; background: #fff; text-align: center; }
.to-status-kicker { margin: 0; font-size: 14px; font-weight: 700; color: var(--to-acc); }
.to-status-no { margin: 4px 0 10px; font-size: 30px; font-weight: 900; color: var(--to-ink); }
.to-status-msg { margin: 0 0 8px; padding: 12px; border-radius: 12px; background: #eef6fc; font-size: 16px; font-weight: 700; color: var(--to-ink); }
.to-status.is-ready .to-status-msg, .to-status.is-done .to-status-msg { background: #e8f7ee; color: #1e7b45; }
.to-status.is-declined .to-status-msg { background: #fdecec; color: #b42318; }
.to-status-time { margin: 0 0 14px; font-size: 15px; }
.to-status .to-lines, .to-status .to-sums { text-align: left; }
.to-again { display: inline-block; margin-top: 6px; color: var(--to-acc); font-weight: 700; }

@media (max-width: 900px) {
    .to-body { grid-template-columns: minmax(0, 1fr); }
    .to-cart { position: static; }
    /* 오른쪽 아래는 아하아이디어 상담 단추 자리라 비켜 선다. */
    .to-bar { position: fixed; left: 12px; right: 80px; bottom: 14px; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 14px 18px;
              border-radius: 14px; background: var(--to-acc); color: #fff; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
    .to-bar span:first-child { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: rgba(255, 255, 255, .25); text-align: center; line-height: 24px; font-weight: 800; }
    .to-bar b { flex: 1; }
    .to-bar span:last-child { font-weight: 800; }
    .to-item-photo { width: 64px; height: 64px; }
}

/* ── 가게 주문판 ── */
.toa { max-width: 1400px; }
.toa-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.toa-state { margin: 8px 0 0; font-size: 14px; color: var(--to-mut); }
.toa-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #eceff3; font-weight: 700; color: #4b5563; }
.toa-pill.is-on { background: #e8f7ee; color: #1e7b45; }
.toa-sound { padding: 12px 18px; border: 2px solid var(--to-acc); border-radius: 12px; background: #fff; color: var(--to-acc); font-size: 15px; font-weight: 800; cursor: pointer; }
.toa-sound.is-on { background: #e8f7ee; border-color: #1e7b45; color: #1e7b45; }
.toa-offline { padding: 10px 14px; border-radius: 10px; background: #fdecec; color: #b42318; font-weight: 700; }
.toa-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.toa-col { padding: 12px; border-radius: 16px; background: var(--to-bg); min-height: 200px; }
.toa-col h2 { display: flex; align-items: center; gap: 6px; margin: 2px 4px 12px; font-size: 17px; font-weight: 800; color: var(--to-ink); }
.toa-col h2 small { font-size: 12.5px; font-weight: 600; color: var(--to-mut); }
.toa-col h2 b { margin-left: auto; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #fff; text-align: center; font-size: 14px; }
.toa-col.is-new h2 b { background: #e5484d; color: #fff; }
.toa-list { display: grid; gap: 12px; }
.toa-empty { margin: 20px 0; text-align: center; color: #9aa4af; }
.toa-card { padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--to-line); box-shadow: 0 2px 6px rgba(0, 0, 0, .04); }
.toa-col.is-new .toa-card { border: 2px solid #e5484d; animation: toa-pulse 1.6s ease-in-out infinite; }
@keyframes toa-pulse { 50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, .15); } }
.toa-card.is-late { border-color: #f59e0b; }
.toa-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.toa-no { font-size: 20px; font-weight: 900; color: var(--to-ink); }
.toa-time { font-size: 17px; font-weight: 800; }
.toa-time small { font-size: 12.5px; font-weight: 600; color: var(--to-mut); }
.toa-who { margin: 6px 0; font-size: 15px; }
.toa-who a { color: var(--to-acc); margin-left: 6px; }
.toa-lines { list-style: none; margin: 8px 0; padding: 8px 0; border-top: 1px dashed var(--to-line); border-bottom: 1px dashed var(--to-line); font-size: 16px; }
.toa-lines li { padding: 2px 0; }
.toa-note { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: #fff8e1; font-size: 14.5px; }
.toa-total { margin: 6px 0 10px; font-size: 16px; font-weight: 800; }
.toa-total small { font-weight: 500; color: var(--to-mut); }
.toa-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.toa-btn { flex: 1 1 auto; padding: 12px 10px; border: 1px solid var(--to-line); border-radius: 10px; background: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.toa-btn.is-go { flex-basis: 100%; border-color: #1e7b45; background: #1e7b45; color: #fff; }
.toa-btn.is-no { color: #b42318; }
.toa-done { margin: 18px 0; }
.toa-done summary, .toa-box summary { cursor: pointer; font-size: 16px; font-weight: 800; color: var(--to-ink); }
.toa-done ul { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--to-mut); }
.toa-box { margin: 16px 0; padding: 16px 18px; border: 1px solid var(--to-line); border-radius: 14px; background: #fff; }
.toa-form { display: grid; gap: 12px; margin-top: 14px; }
.toa-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.toa-check { display: flex !important; align-items: center; gap: 8px; font-size: 15px !important; }
.toa-check input { width: 20px; height: 20px; }
.toa-hint { margin: 0; font-size: 13px; color: var(--to-mut); }
.toa-warn { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #fff4e5; color: #8a4b00; font-size: 12.5px; }
.toa-items { width: 100%; border-collapse: collapse; font-size: 14px; }
.toa-items th, .toa-items td { padding: 8px; border-bottom: 1px solid var(--to-line); text-align: left; }
.toa-items th { font-size: 12.5px; color: var(--to-mut); }
.toa-items td input[type=text] { max-width: 110px; padding: 6px 8px; }
.toa-items .toa-cat td { padding-top: 16px; font-weight: 800; color: var(--to-ink); border-bottom: 2px solid var(--to-line); }
.toa-items tr.is-missing td { background: #fff8e1; }
@media (max-width: 980px) {
    .toa-board { grid-template-columns: 1fr; }
    .toa-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 2026-11-04: 메뉴판에서 담고, 이 화면은 장바구니 + 주문서 ── */
.to-checkout { max-width: 620px; margin: 0 auto; }
.to .to-head { max-width: 620px; margin: 0 auto 20px; text-align: center; }
.to-checkout .to-cart { position: static; padding: 24px; }
.to-checkout-empty { padding: 44px 24px; border: 1px dashed var(--to-line); border-radius: 16px; text-align: center; }
.to-checkout-empty p { margin: 0 0 18px; color: var(--to-mut); font-size: 15px; }
.to-gomenu { display: inline-block; padding: 13px 30px; text-decoration: none; }
.to-addmore { display: inline-block; margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--to-acc); text-decoration: none; }
.to-addmore:hover { text-decoration: underline; }

/* 메뉴판 밑의 '장바구니 보기' 띠 - 넓은 화면에서도 화면 밑 가운데에 뜬다 */
.to-bar.is-float {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 400px;
    max-width: calc(100% - 24px);
    padding: 14px 22px;
    border-radius: 999px;
    background: var(--corp-acc, #0f7ac0);
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transform: translateX(-50%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
.to-bar.is-float span:first-child { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: rgba(255, 255, 255, .25); text-align: center; line-height: 26px; font-weight: 800; }
.to-bar.is-float b { flex: 1; }
.to-bar.is-float span:last-child { font-weight: 800; }
.to-bar.is-float:hover { filter: brightness(1.06); color: #fff; }

/* 담을 때 단추와 띠가 살짝 튄다 - 눌린 것이 보이게 */
@keyframes to-bump { 40% { scale: 1.08; } }
.to-add.is-bump, .to-bar.is-bump { animation: to-bump .3s ease; }

@media (max-width: 760px) {
    .to-bar.is-float { left: 12px; right: 80px; width: auto; max-width: none; padding: 13px 16px; border-radius: 14px; transform: none; font-size: 15px; }
}

/* 새로 고친 뒤 소리가 막혔을 때의 안내 - 화면 어디든 누르면 사라진다 (JS/ClubTakeoutAdmin.js) */
.toa-taphint {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 60;
    max-width: calc(100% - 24px);
    padding: 14px 22px;
    border-radius: 999px;
    background: #e5484d;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    transform: translateX(-50%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    animation: toa-pulse 1.6s ease-in-out infinite;
}