/* mock_atlas — «그 밖의 기능» 블록: 완전한 폰 틀 + 실제 앱 코드 화면(.at-*) + 움직임
   화면 CSS 값은 실제 앱(시험 서버 /v2/ 페이지 CSS)에서 그대로 가져온 px — 410x836 캔버스(.appscr__c) 안에서 --k 배율로 줄어든다.
   기본(클래스 없음) = 마지막 모습(정적). JS 가 .is-anim + data-s 를 달아 처음 상태부터 재생(모션 줄이기면 달지 않음). */

/* ───────────── 블록 레이아웃: 폰 카드 · 창 카드 ───────────── */
.atl .atf__vis{height:auto}
.atf--ph .atf__vis{padding:clamp(48px,3.6vw,60px) 0 clamp(26px,2.2vw,38px);background:linear-gradient(180deg,#eef1f5,#e6eaf0)}
.atf--win .atf__vis{padding:clamp(48px,3.6vw,60px) clamp(14px,1.6vw,26px) clamp(24px,2.2vw,36px);background:linear-gradient(180deg,#eef1f5,#e6eaf0)}
.atf--win .vgbox{width:100%}
.atf--win .win{width:100%;box-shadow:0 18px 40px -18px rgba(17,19,23,.38),0 0 0 1px rgba(25,31,40,.07)}
.atf--win .win img{display:block;width:100%;height:auto}
.atf__eg{z-index:3}
.atf--win .win::before{background:radial-gradient(circle at 14px 14px,#ff5f57 5px,transparent 6px),radial-gradient(circle at 32px 14px,#febc2e 5px,transparent 6px),radial-gradient(circle at 50px 14px,#28c840 5px,transparent 6px),#eef1f6;background-repeat:no-repeat}

/* 사장님 탭: 창 두 장은 가로 카드로 위·아래, 폰 카드는 오른쪽에 길게 */
@media (min-width:1024px){
  .atl__big--own{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-auto-rows:auto;align-items:stretch}
  .atl__big--own .atf--win{grid-column:1;flex-direction:row}
  .atl__big--own .atf--win .atf__vis{flex:0 0 57%;margin-right:0}
  .atl__big--own .atf--win .atf__txt{flex:1;align-self:center;min-width:0;padding:clamp(14px,1.6vw,28px) clamp(20px,2.2vw,38px)}
  .atl__big--own .atf--ph{grid-column:2;grid-row:1 / span 2}
  .atl__big--own .atf--ph .atp{--w:min(72cqw,clamp(236px,19vw,420px))}
}

/* ───────────── 폰 틀 ───────────── */
.atp{--w:min(76cqw,clamp(280px,21.5vw,440px));position:relative;width:var(--w);font-size:calc(var(--w) / 30)}
.atp__dev{position:relative;padding:.8em;border-radius:2.9em;background:#0b0d12;
  box-shadow:0 0 0 .14em #3a404c inset,0 0 0 .08em #d5d9e0,0 3em 5em -2em rgba(17,19,23,.5)}
.atp__scr{width:100%;aspect-ratio:410 / 836;border-radius:2.15em;background:#f5f6f8;user-select:none;-webkit-user-select:none}
.atp__scr .appscr__c{border-radius:0}
.atp{cursor:default}

/* ───────────── 앱 화면 공통 (실제 앱 tokens.css / components.css) ───────────── */
.at{position:absolute;inset:0;overflow:hidden;
  --brand:#1A2B5C;--brand-ink:#14224A;--brand-600:#23397A;--brand-50:#EDF1FA;
  --accent:#1E4DD8;--accent-600:#1841BC;--accent-50:#E9EEFD;--point:#EA580C;--point-600:#C2410C;--point-50:#FFF3EC;
  --bg:#F5F6F8;--surface-2:#F7F9FC;--border:#ECEFF3;--border-strong:#DFE4EA;
  --text:#1A1E27;--text-2:#5A6473;--text-3:#6B7280;
  --ok:#157347;--ok-bg:#E7F5EC;--warn:#9A6700;--warn-bg:#FFF6E5;--danger:#C0392B;--danger-bg:#FDECEA;--info:#1D5FA7;--info-bg:#E8F1FB;
  --sh-1:0 1px 2px rgba(16,24,40,.05);--sh-up:0 -4px 16px rgba(16,24,40,.06);--sh-pop:0 16px 40px rgba(16,24,40,.18);
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere}
.at *{box-sizing:border-box;margin:0}
.at b{font-weight:700}
.at-num{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
.at svg.ic{flex:0 0 auto}

.at-appbar{display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 12px;background:#fff;border-bottom:1px solid var(--border)}
.at-appbar__t{flex:1 1 auto;min-width:0;text-align:center;font-size:17px;font-weight:700;white-space:nowrap}
.at-appbar--l .at-appbar__t{text-align:left;padding-left:4px}
.at-ib{width:40px;height:40px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;color:inherit}
.at-ib svg{width:24px;height:24px}

.at-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:10px;font-size:15.5px;font-weight:700;line-height:1}
.at-btn svg{width:20px;height:20px}
.at-btn--p{background:var(--accent);color:#fff;box-shadow:0 8px 20px -10px var(--accent)}
.at-btn--ghost{background:#fff;color:var(--text);border:1px solid var(--border-strong)}
.at-btn--block{display:flex;width:100%}
.at-btn--lg{height:54px;font-size:16.5px;border-radius:14px}
.at-btn--md{height:44px;padding:0 16px;font-size:14.5px}
.at-btn--sm{height:36px;padding:0 14px;font-size:13.5px;border-radius:6px}
.at-btn--sm svg{width:15px;height:15px}
.at-cta{position:absolute;left:0;right:0;bottom:0;z-index:20;padding:12px 16px;background:#fff;border-top:1px solid var(--border);box-shadow:var(--sh-up)}

.at-badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:800;line-height:1;white-space:nowrap}
.at-badge svg{width:13px;height:13px}
.at-badge--ok{background:var(--ok-bg);color:var(--ok)}
.at-badge--warn{background:var(--warn-bg);color:var(--warn)}
.at-badge--danger{background:var(--danger-bg);color:var(--danger)}
.at-badge--info{background:var(--info-bg);color:var(--info)}
.at-badge--plain{background:var(--surface-2);color:var(--text-2)}
.at-badge--simple{background:#EEF2FF;color:#3B4CCA}

.at-tabbar{position:absolute;left:12px;right:12px;bottom:2px;z-index:30;display:flex;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid var(--border);
  box-shadow:0 10px 26px -10px rgba(16,24,40,.30),0 2px 8px -4px rgba(16,24,40,.18);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
.at-tab{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:54px;color:var(--text-3)}
.at-tab:first-child{border-radius:999px 0 0 999px}.at-tab:last-child{border-radius:0 999px 999px 0}
.at-tab>svg,.at-tab>span{position:relative;z-index:1}
.at-tab>span{font-size:11px;font-weight:600;letter-spacing:-.01em}
.at-tab.is-active{color:var(--brand)}
.at-tab.is-active::before{content:"";position:absolute;inset:4px 5px;border-radius:999px;background:var(--brand-50)}
.at-tab--fab{justify-content:flex-end;padding-bottom:8px}
.at-tab>.at-fab{position:absolute;top:-27px;left:50%;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px -6px var(--accent),0 0 0 4px #fff}
.at-tab>.at-fablbl{font-size:13px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;color:var(--brand)}

.at-divider{height:8px;background:var(--bg)}
.at-sec{background:#fff}
.at-px{padding-left:16px;padding-right:16px}
.at-segment{display:flex;gap:4px;padding:4px;border-radius:10px;background:var(--surface-2)}
.at-segment span{flex:1;height:42px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:14.5px;font-weight:700;color:var(--text-2)}
.at-segment span.is-active{background:#fff;color:var(--text);box-shadow:var(--sh-1)}

/* 반짝임(.shine): 켜져 있을 때만 */
.at-shine{position:relative;overflow:hidden}
.at-shine::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:translateX(-130%);pointer-events:none}
.atp.is-live .at-shine::after{animation:at-shine 3.6s ease-in-out infinite}
@keyframes at-shine{0%{transform:translateX(-130%)}60%,100%{transform:translateX(130%)}}

/* 손가락 표시(데모용 눌림 점) */
.at-tap{position:absolute;z-index:70;left:var(--x,50%);top:var(--y,50%);width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:rgba(26,43,92,.16);border:2px solid rgba(26,43,92,.32);opacity:0;pointer-events:none}
.at-tap.go{animation:at-tap .75s ease-out}
@keyframes at-tap{0%{opacity:0;transform:scale(.5)}28%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}

/* ════════ 1) 앱결제 · 결제 카드 선택 (cardselect.html) ════════ */
.at-grab{width:40px;height:4px;margin:10px auto 4px;border-radius:99px;background:var(--border-strong)}
.at-cshead{position:relative;display:flex;align-items:center;gap:8px;padding:12px 12px 4px 52px;background:#fff}
.at-cshead .at-cshead__t{flex:1;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.5}
.at-cshead .at-chev{position:absolute;left:10px;top:20px;width:24px;height:24px;display:flex;color:var(--text)}
.at-cshead .at-chev svg{width:24px;height:24px}
.at-cswrap{padding:14px 16px 8px}
.at-flat{background:#fff;border-radius:14px;box-shadow:var(--sh-1)}
.at-amt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--text-2)}
.at-amt b{font-size:19px;font-weight:800;color:var(--text)}
.at-collapse{overflow:hidden;max-height:620px;transition:max-height .55s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.at-collapse--ai{max-height:80px}
.at-ai{display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#6D5DF6 0%,#A06BFF 100%);color:#fff}
.at-ai__sp{width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.18)}
.at-ai__sp svg{width:22px;height:22px}
.atp.is-live .at-ai__sp svg{animation:at-float 3.4s ease-in-out infinite}
@keyframes at-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.at-ai__t{flex:1;min-width:0}
.at-ai__t b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.at-ai__t span{display:block;margin-top:2px;font-size:12.5px;opacity:.9}
.at-sectitle{margin:22px 0 12px;font-size:13.5px;font-weight:700;color:var(--text-2)}
.at-pm{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:#fff;border:1.5px solid var(--border);transition:border-color .2s,background-color .2s}
.at-pm--card{margin-bottom:8px}
.at-pm.is-sel{border-color:var(--accent);background:#F3F6FF}
.at-pm__ic{flex:0 0 auto;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:14px;color:#fff}
.at-pm__ic svg{width:22px;height:22px}
.at-pm__ic--card{background:linear-gradient(135deg,#1A2B5C,#2F4A8F)}
.at-pm__ic--app{background:linear-gradient(135deg,#1E4DD8,#3182F6)}
.at-pm__m{flex:1;min-width:0}
.at-pm__m b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.at-pm__m b small{margin-left:6px;font-size:12px;font-weight:700;color:var(--text-3)}
.at-pm__m span{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--text-2)}
.at-pm__side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.at-pm__radio{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid #D1D6DB;background:#fff;transition:border-color .2s,background-color .2s}
.at-pm__radio::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .25s}
.at-pm.is-sel .at-pm__radio{border-color:var(--accent);background:var(--accent)}
.at-pm.is-sel .at-pm__radio::after{transform:scale(1)}
.at-cslist{display:flex;flex-direction:column;gap:12px}
.at-pmcard{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--sh-1)}
.at-pmcard.is-sel{border-color:var(--accent)}
.at-pmcard__m{flex:1;min-width:0}
.at-pmcard__m b{display:block;font-size:14.5px;font-weight:700}
.at-pmcard__m span{font-size:13.5px;color:var(--text-3);letter-spacing:.13em}
.at-mc{position:relative;width:52px;height:34px;flex:0 0 auto;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.at-mc::before{content:"";position:absolute;top:7px;left:6px;width:10px;height:7px;border-radius:2px;background:rgba(255,255,255,.7)}
.at-mc.mc-bc{background:linear-gradient(135deg,#c0392b,#931d14)}
.at-mc.mc-kb{background:linear-gradient(135deg,#e0ad33,#b5811a)}
.at-pmcard__chk{width:24px;height:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--border-strong);color:#fff}
.at-pmcard__chk svg{width:14px;height:14px;opacity:0}
.at-pmcard.is-sel .at-pmcard__chk{background:var(--brand);border-color:var(--brand)}
.at-pmcard.is-sel .at-pmcard__chk svg{opacity:1}
.at-add{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;margin-top:12px;border-radius:14px;border:1px solid var(--border-strong);background:#fff;color:var(--text-2);font-weight:700;font-size:15.5px}
.at-add svg{width:20px;height:20px}
.at-ctat{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:opacity .3s ease,transform .3s ease}
.at-ctat--b,.at-ctat--c{opacity:0;transform:translateY(8px)}
.at-cta .at-btn{display:flex;width:100%}

/* 앱결제 재생: 0 = 카드 결제 고른 상태(처음), 1 = 앱결제를 고름(카드 목록·다중결제 배너가 접힘), 2 = 결제창 여는 중 */
.at-pay.is-anim:is([data-s="1"],[data-s="2"]) .at-pm--card{border-color:var(--border);background:#fff}
.at-pay.is-anim:is([data-s="1"],[data-s="2"]) .at-pm--card .at-pm__radio{border-color:#D1D6DB;background:#fff}
.at-pay.is-anim:is([data-s="1"],[data-s="2"]) .at-pm--card .at-pm__radio::after{transform:scale(0)}
.at-pay.is-anim:is([data-s="1"],[data-s="2"]) .at-pm--app{border-color:var(--accent);background:#F3F6FF}
.at-pay.is-anim:is([data-s="1"],[data-s="2"]) .at-pm--app .at-pm__radio{border-color:var(--accent);background:var(--accent)}
.at-pay.is-anim:is([data-s="1"],[data-s="2"]) .at-pm--app .at-pm__radio::after{transform:scale(1)}
.at-pay.is-anim:is([data-s="1"],[data-s="2"]) .at-collapse{max-height:0;opacity:0}
.at-pay.is-anim[data-s="1"] .at-ctat--a{opacity:0;transform:translateY(-8px)}
.at-pay.is-anim[data-s="1"] .at-ctat--b{opacity:1;transform:none}
.at-pay.is-anim[data-s="2"] .at-ctat--a{opacity:0;transform:translateY(-8px)}
.at-pay.is-anim[data-s="2"] .at-ctat--c{opacity:1;transform:none}
.at-pay.is-anim[data-s="2"] .at-btn--p{box-shadow:0 8px 20px -10px var(--accent);filter:saturate(.9)}

/* ════════ 2) 주문 현황 · 알림 (order-detail.html) ════════ */
.at-odstore{display:flex;align-items:center;gap:12px;padding:18px 16px 16px}
.at-odstore__logo{width:52px;height:52px;flex:0 0 auto;border-radius:15px;object-fit:cover}
.at-odstore__m{flex:1;min-width:0}
.at-odstore__n{font-size:17px;font-weight:800;letter-spacing:-.01em}
.at-odstore__d{margin-top:4px;font-size:12.5px;color:var(--text-3)}
.at-badges{flex:0 0 auto;display:inline-grid;justify-items:end;align-items:center}
.at-badges>.at-badge{grid-area:1 / 1;opacity:0;transition:opacity .3s ease,transform .3s ease}
.at-badges>.at-b3{opacity:1}
.at-ship{padding:6px 16px 16px}
.at-steps{display:flex;align-items:flex-start;padding:16px 6px;background:#fff;border:1px solid var(--border);border-radius:16px;--c:var(--ok)}
.at-step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.at-sdot{position:relative;z-index:1;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--c);border:2px solid var(--c);color:#fff;transition:background-color .4s,border-color .4s,box-shadow .4s,color .4s}
.at-sdot svg{width:18px;height:18px}
.at-step b{font-size:12.5px;font-weight:700;line-height:1.4;color:var(--text);transition:color .4s}
.at-step::before,.at-step::after{content:"";position:absolute;top:17px;left:-50%;width:100%;height:2px;z-index:0}
.at-step::before{background:var(--border-strong)}
.at-step::after{background:var(--c);transform-origin:left center;transition:transform .5s cubic-bezier(.4,0,.2,1),background-color .4s}
.at-step:first-child::before,.at-step:first-child::after{display:none}
.at-cook{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s}
.at-callout{display:flex;align-items:flex-start;gap:10px;margin-top:10px;padding:13px 14px;border-radius:12px;font-size:13px;line-height:1.5}
.at-callout svg{width:18px;height:18px;margin-top:1px}
.at-callout--warn{background:var(--warn-bg);color:var(--warn)}
.at-sechead{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 4px;font-size:14px;font-weight:800;letter-spacing:-.01em}
.at-sechead .at-num{font-size:12.5px;font-weight:700;color:var(--text-3)}
.at-item{display:flex;align-items:center;gap:12px;padding:12px 16px}
.at-item__th{width:46px;height:46px;flex:0 0 auto;border-radius:12px;object-fit:cover}
.at-item__b{flex:1;min-width:0}
.at-item__n{display:flex;align-items:baseline;gap:6px;font-size:14.5px;font-weight:700}
.at-item__q{font-size:12.5px;font-weight:700;color:var(--text-3)}
.at-item__p{flex:0 0 auto;font-size:14.5px;font-weight:700;text-align:right;padding-top:1px}
.at-sumwrap{padding-bottom:14px}
.at-sumtotal{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:14px 0 2px;border-top:1px solid var(--border);font-size:18px;font-weight:800}
.at-sumtotal .v{color:var(--accent)}
.at-earn{margin-top:6px;font-size:12.5px;font-weight:700;color:#2b7a3b}
.at-earn b{font-weight:800}
.at-earn span{color:#666;font-weight:600}
.at-payinfo{padding-top:8px;padding-bottom:14px}
.at-sumrow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14.5px;color:var(--text-2)}
.at-sumrow b{font-weight:600;color:var(--text)}
.at-sumrow .v{font-weight:600;color:var(--text)}
.at-payinfo .at-btn{margin-top:10px}
.at-toast{position:absolute;z-index:80;left:50%;bottom:96px;width:max-content;max-width:calc(100% - 48px);padding:12px 18px;border-radius:999px;background:#11151f;color:#fff;font-size:14px;font-weight:600;line-height:1.45;text-align:center;
  box-shadow:var(--sh-pop);opacity:0;transform:translateX(-50%) translateY(12px);transition:opacity .25s,transform .25s;pointer-events:none}
.at-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 주문 상세 재생: 0 = 음식주문접수 · 1 = 요리중 · 2 = 조리완료(처음 화면 그대로) */
.at-order.is-anim .at-step:nth-child(2)::after{transform:scaleX(0)}
.at-order.is-anim .at-step:nth-child(3)::after{transform:scaleX(0)}
.at-order.is-anim .at-sdot{background:var(--surface-2);border-color:var(--border-strong);color:var(--text-3)}
.at-order.is-anim .at-step b{color:var(--text-3)}
.at-order.is-anim[data-s="0"] .at-badges>.at-b3,.at-order.is-anim[data-s="1"] .at-badges>.at-b3{opacity:0}
.at-order.is-anim[data-s="0"] .at-badges>.at-b1{opacity:1}
.at-order.is-anim[data-s="1"] .at-badges>.at-b2{opacity:1}
.at-order.is-anim[data-s="2"] .at-badges>.at-b3{opacity:1}
.at-order.is-anim[data-s="0"] .at-step:nth-child(1) .at-sdot,
.at-order.is-anim[data-s="1"] .at-step:nth-child(2) .at-sdot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 5px var(--accent-50)}
.at-order.is-anim[data-s="0"] .at-step:nth-child(1) b,
.at-order.is-anim[data-s="1"] .at-step:nth-child(2) b{color:var(--accent)}
.at-order.is-anim[data-s="1"] .at-step:nth-child(1) .at-sdot{background:var(--accent);border-color:var(--accent);color:#fff}
.at-order.is-anim[data-s="1"] .at-step:nth-child(1) b{color:var(--text)}
.at-order.is-anim[data-s="1"] .at-step:nth-child(2)::after{transform:scaleX(1);background:var(--accent)}
.at-order.is-anim[data-s="1"] .at-cook{max-height:70px;opacity:1}
.at-order.is-anim[data-s="2"] .at-step .at-sdot{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:none}
.at-order.is-anim[data-s="2"] .at-step b{color:var(--text)}
.at-order.is-anim[data-s="2"] .at-step:nth-child(2)::after,.at-order.is-anim[data-s="2"] .at-step:nth-child(3)::after{transform:scaleX(1);background:var(--ok)}

/* ════════ 3) 결제 내역 · 영수증 (orders.html) ════════ */
.at-ohseg{padding:8px 16px 12px;background:#fff;border-bottom:1px solid var(--border)}
.at-ohsearch{padding:12px 16px 4px;background:#fff}
.at-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);font-size:14.5px}
.at-search svg{width:20px;height:20px;color:var(--text-2)}
.at-ohperiod{display:flex;gap:6px;padding:8px 16px 4px;background:#fff}
.at-perchip{flex:0 0 auto;display:flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text-2);font-size:12.5px;font-weight:700;white-space:nowrap}
.at-perchip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.at-phlist{background:#fff}
.at-phcard{padding:15px 16px}
.at-phcard+.at-phcard{border-top:1px solid var(--border)}
.at-phtop{display:flex;align-items:center;gap:11px}
.at-phlogo{width:44px;height:44px;flex:0 0 auto;border-radius:13px;object-fit:cover}
.at-phmain{flex:1;min-width:0}
.at-phstore{font-size:15.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at-phdate{margin-top:3px;font-size:12px;color:var(--text-3)}
.at-phtop .at-badge{height:22px;padding:0 7px;font-size:11px}
.at-phtop .at-badge svg{width:12px;height:12px}
.at-phamt{margin-top:10px;font-size:21px;font-weight:800;letter-spacing:-.01em}
.at-phamt .won{margin-left:1px;font-size:13.5px;font-weight:700;color:var(--text-2)}
.at-phamt.is-cancel{color:var(--text-3);text-decoration:line-through;text-decoration-thickness:1.5px}
.at-phamt.is-cancel .won{color:var(--text-3)}
.at-phact{display:flex;justify-content:flex-end;margin-top:10px}
.at-newwrap{max-height:0;overflow:hidden;transition:max-height .65s cubic-bezier(.2,.8,.2,1)}
.at-phcard--new{border-bottom:1px solid var(--border)}
.at-phcard--new .at-phact{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.2,.8,.2,1),margin-top .5s,opacity .4s}
.at-phcard--new .at-phtop{position:relative}
.at-bnew{grid-area:1 / 1}
.at-phbadges{flex:0 0 auto;display:inline-grid;justify-items:end;align-items:center}
.at-phbadges>.at-badge{grid-area:1 / 1;transition:opacity .3s}
.at-phbadges>.at-bb2,.at-phbadges>.at-bb3{opacity:0}

/* 이용 내역 재생: 0 = 처음(실제 화면 그대로) · 1 = 방금 결제한 주문이 맨 위에 쌓임(접수) · 2 = 조리 중 · 3 = 서빙완료 + 리뷰 쓰기 */
.at-orders.is-anim:is([data-s="1"],[data-s="2"]) .at-newwrap{max-height:122px}
.at-orders.is-anim[data-s="3"] .at-newwrap{max-height:176px}
.at-orders.is-anim .at-phcard--new{opacity:0;transform:translateY(-14px);transition:opacity .5s .1s,transform .55s .1s cubic-bezier(.2,.8,.2,1)}
.at-orders.is-anim:is([data-s="1"],[data-s="2"],[data-s="3"]) .at-phcard--new{opacity:1;transform:none;animation:at-hl 2.4s ease .25s both}
@keyframes at-hl{0%{background-color:var(--accent-50)}100%{background-color:#fff}}
.at-orders.is-anim[data-s="3"] .at-phcard--new .at-phact{max-height:46px;margin-top:10px;opacity:1}
.at-orders.is-anim[data-s="2"] .at-phbadges>.at-bb1,.at-orders.is-anim[data-s="3"] .at-phbadges>.at-bb1{opacity:0}
.at-orders.is-anim[data-s="2"] .at-phbadges>.at-bb2{opacity:1}
.at-orders.is-anim[data-s="3"] .at-phbadges>.at-bb3{opacity:1}

/* ════════ 4) 오늘 매출 (merchant/sales.html) ════════ */
.at-slhead{position:absolute;left:0;right:0;top:0;z-index:25}
.at-storebar{display:flex;align-items:center;gap:7px;height:22px;padding:0 14px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:13px;color:var(--text-2)}
.at-storebar svg{width:16px;height:16px;color:var(--accent)}
.at-storebar b{font-weight:800;color:var(--text)}
.at-slscroll{position:absolute;left:0;right:0;top:0;will-change:transform;transition:transform 1.4s cubic-bezier(.45,0,.2,1)}
.at-slpad{height:78px}
.at-slseg{padding-top:10px}
.at-slseg .at-segment span{height:40px}
.at-rangelink{display:inline-flex;align-items:center;gap:3px;margin:8px 2px 0;padding:4px 2px;font-size:12.5px;font-weight:700;color:var(--text-3)}
.at-rangelink svg{width:14px;height:14px}
.at-herowrap{margin:12px 16px 4px}
.at-hero{position:relative;overflow:hidden;color:#fff;padding:18px 18px 20px;border-radius:18px;background:linear-gradient(135deg,#14224A,#1A2B5C 50%,#23397A);box-shadow:0 16px 34px -18px var(--brand)}
.at-hero::after{content:"";position:absolute;top:-46px;right:-36px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(234,88,12,.25),transparent 65%);pointer-events:none}
.at-hero>*{position:relative;z-index:1}
.at-hero__label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;opacity:.82}
.at-hero__label svg{width:16px;height:16px}
.at-hero__amt{margin-top:8px;font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.at-delta{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12.5px;font-weight:700;transition:opacity .45s,transform .45s}
.at-delta svg{width:24px;height:24px}
.at-delta .dnum{font-weight:800}
.at-delta.is-up .dnum{color:#7CFFB2}
.at-hero__row{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.at-hero__sub{font-size:12px;opacity:.7}
.at-hero__go{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:700;opacity:.9}
.at-hero__go svg{width:15px;height:15px}
.at-slgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 4px}
.at-stat{padding:13px 14px;border-radius:14px;background:#fff;border:1px solid var(--border)}
.at-stat small{display:block;font-size:12px;color:var(--text-3)}
.at-stat b{display:block;margin-top:4px;font-size:19px;font-weight:800;letter-spacing:-.01em}
.at-tico{width:30px;height:30px;margin-bottom:9px;display:flex;align-items:center;justify-content:center;border-radius:9px}
.at-tico svg{width:17px;height:17px}
.at-tico--a{background:var(--accent-50);color:var(--accent)}
.at-tico--p{background:var(--point-50);color:var(--point-600)}
.at-gap8{height:8px}.at-gap12{height:12px}
.at-sales-wrap{margin:0 16px}
.at-card{background:#fff;border:1px solid var(--border);border-radius:14px}
.at-cardpad{padding:16px}
.at-panelhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.at-panelhead h3{font-size:16px;font-weight:800;letter-spacing:-.01em}
.at-phsub{font-size:12px;font-weight:600;color:var(--text-3)}
.at-chartwrap{position:relative}
.at-chartgrid{position:absolute;left:0;right:0;top:8px;bottom:26px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.at-chartgrid i{display:block;height:1px;background:var(--border)}
.at-bars{position:relative;z-index:1;display:flex;align-items:flex-end;gap:10px;height:170px;padding:10px 4px 0}
.at-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px}
.at-barwrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.at-bar{position:relative;width:42%;max-width:18px;height:var(--h);min-height:4px;border-radius:6px 6px 0 0;background:var(--accent);transition:height .8s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 70ms)}
.is-peak .at-bar{box-shadow:0 4px 10px -4px var(--accent)}
.bar-val{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;color:var(--text-3);white-space:nowrap;transition:opacity .4s calc(var(--i,0) * 70ms + .5s)}
.is-peak .bar-val{color:var(--accent);font-weight:800}
.at-lbl{font-size:11px;color:var(--text-3);white-space:nowrap}
.is-peak .at-lbl{color:var(--accent);font-weight:800}
.at-mrank{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.at-mrank:last-child{border-bottom:0}
.at-mrank__no{width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:7px;background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:800}
.at-mrank:first-child .at-mrank__no{background:var(--accent);color:#fff}
.at-mrank__main{flex:1;min-width:0}
.at-mrank__nm{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at-mrank__tr{height:5px;margin-top:5px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.at-mrank__fill{height:100%;width:var(--w);border-radius:3px;background:var(--accent);transition:width .9s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 110ms + .35s)}
.at-mrank__r{flex:0 0 auto;text-align:right}
.at-mrank__amt{font-size:13.5px;font-weight:800}
.at-mrank__q{font-size:11px;color:var(--text-3)}

/* 오늘 매출 재생: 0 = 0원에서 시작 · 1 = 숫자가 올라가고 막대가 자람 · 2 = 아래로 스크롤해 «메뉴별 판매순위» */
.at-sales.is-anim[data-s="0"] .at-bar{height:4px}
.at-sales.is-anim[data-s="0"] .bar-val{opacity:0}
.at-sales.is-anim[data-s="0"] .at-delta{opacity:0;transform:translateY(5px)}
.at-sales.is-anim[data-s="0"] .at-mrank__fill{width:0}
.at-sales.is-anim[data-s="0"] .at-mrank__fill,.at-sales.is-anim[data-s="1"] .at-mrank__fill{transition-delay:0s}
.at-sales.is-anim[data-s="1"] .at-mrank__fill{width:0}
.at-sales.is-anim[data-s="2"] .at-slscroll{transform:translateY(-520px)}
.at-sales.is-anim .at-mrank__fill{transition-property:width}

@media (prefers-reduced-motion:reduce){
  .at *,.at *::before,.at *::after{transition:none!important;animation:none!important}
  .at-shine::after{display:none}
}