/* 고객 화면 · 시니어 우선 · 라이트 단일 테마 (목업 v1.1 과 동일한 토큰) */
:root{
  --paper:#FFFFFF; --ground:#EEF1EF; --ink:#141414; --ink-2:#3A3A3A; --line:#CFD4D1; --line-2:#9AA39E;
  --green:#0B6B4F; --green-deep:#08533D; --green-soft:#E3F1EB; --caution:#8A2A1B; --caution-soft:#FBEFEC;
  --soft:#F3F6F4; --focus:#1F5FBF; --fs:20px;
}
html{font-size:var(--fs);-webkit-text-size-adjust:100%}
html.big{--fs:24px}
html.big2{--fs:28px}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--paper);display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--paper);border-bottom:2px solid var(--line)}
.brand{flex:1;min-width:0;text-decoration:none;padding:8px 4px;font-weight:700;font-size:15px;color:var(--green-deep);letter-spacing:.02em;min-height:56px;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb{flex:none;min-height:56px;min-width:56px;padding:0 12px;border:2px solid var(--line-2);border-radius:12px;background:var(--paper);font-weight:700;font-size:15px;white-space:nowrap}
.tb[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tb[hidden]{display:none}
/* 상단 바 아이콘+글자 버튼: 글자 크기 3단계 · 공유하기 (글자 배율의 영향을 받지 않게 px) */
.ib{flex:none;position:relative;min-height:56px;min-width:64px;padding:4px 10px;border:2px solid var(--line-2);border-radius:12px;background:var(--paper);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:700;font-size:12px;line-height:1;color:var(--ink-2);white-space:nowrap;font-family:inherit}
.ib .ic{height:22px;display:flex;align-items:flex-end;justify-content:center;gap:1px;color:var(--ink)}
.ib .ic .a1{font-size:12px;line-height:1}.ib .ic .a2{font-size:20px;line-height:1}
.ib .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ib.on,.ib[aria-pressed="true"]{border-color:var(--green);color:var(--green-deep)}
.ib[hidden]{display:none}
.topbar{min-width:0}.app{min-width:0}
.ib[data-level="1"] .ic .a2{font-size:22px}.ib[data-level="2"] .ic .a2{font-size:24px;color:var(--green-deep)}
.toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%);z-index:20;max-width:90vw;padding:12px 18px;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;font-size:1rem;box-shadow:0 8px 24px rgba(0,0,0,.25);text-align:center}
.screen{padding:16px 16px 24px;flex:1}
h1{font-size:1.32rem;line-height:1.3;margin:6px 0 4px;font-weight:700;overflow-wrap:anywhere}
h2{font-size:1.12rem;line-height:1.35;margin:0 0 10px;font-weight:700}
p{margin:0 0 .7em;overflow-wrap:anywhere}
.chip{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--green-soft);color:var(--green-deep);font-weight:700;font-size:.85rem}
.chip.gray{background:var(--soft);color:var(--ink-2)}
.badge{display:inline-block;padding:4px 10px;border-radius:6px;background:var(--soft);color:var(--ink-2);font-weight:700;font-size:.8rem;margin-left:6px;vertical-align:middle}
.sub{color:var(--ink-2);font-size:.95rem;margin:0 0 12px}
.sec{margin:26px 0 0;padding-top:8px;border-top:2px solid var(--line);scroll-margin-top:84px}
.sec.first{margin-top:14px;border-top:0}
.sec.caution{background:var(--caution-soft);margin-left:-16px;margin-right:-16px;padding:14px 16px 16px;border-top:0}
.sec.caution h2{color:var(--caution)}
.sub-h{font-weight:700;margin:14px 0 4px;font-size:1rem}
/* 낱알 사진 블록 (먹는 법 아래) */
.photo{margin:4px 0 0}
.photo img{display:block;width:100%;height:auto;max-height:230px;object-fit:contain;border:2px solid var(--line);border-radius:12px;background:#fff}
.photo .cap{margin:8px 0 0;color:var(--ink-2);font-size:.9rem;line-height:1.45}
.txt p{margin:0 0 10px}.txt p:last-child{margin-bottom:0}
.bb{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:12px 18px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);font-weight:700;font-size:1.05rem;text-align:left;width:100%;text-decoration:none}
.bb .chev{font-size:1.2rem;color:var(--ink-2)}
.more{margin-top:20px}
.note{margin:26px 0 0;padding:14px;border-radius:12px;background:var(--soft);color:var(--ink-2);font-size:.9rem;line-height:1.5}
.note strong{color:var(--ink)}
.bottombar{position:sticky;bottom:0;z-index:5;margin-top:auto;padding:8px 10px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.08)}
.bottombar .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.bottombar .tab{min-height:56px;padding:6px 4px;border:2px solid var(--line-2);border-radius:12px;background:var(--paper);font-weight:700;font-size:.8rem;line-height:1.2;color:var(--ink)}
.bottombar .tab[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.bottombar .tab.caution[aria-current="true"]{background:var(--caution);border-color:var(--caution)}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:64px;border:0;border-radius:16px;background:var(--green);color:#fff;font-size:1.2rem;font-weight:700;text-decoration:none}
.cta:active{background:var(--green-deep)}
.sticky{position:sticky;bottom:0;z-index:5;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid var(--line);margin-top:auto}
.back{display:inline-flex;align-items:center;gap:6px;min-height:56px;padding:0 14px 0 6px;border:0;background:none;font-weight:700;font-size:1rem;color:var(--green-deep);text-decoration:none}
.list{display:grid;gap:10px;margin-top:12px}
.card{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:76px;padding:12px 16px;border:2px solid var(--line-2);border-radius:14px;background:var(--paper);text-align:left;text-decoration:none}
.card>span:first-child{display:block;flex:1;min-width:0}
.card .nm{display:block;font-weight:700;font-size:1.02rem;line-height:1.35;overflow-wrap:anywhere}
.card .mk{display:block;color:var(--ink-2);font-size:.85rem;margin-top:4px}
.card .chev{color:var(--ink-2);font-size:1.2rem;flex:none}
/* 약사 부르기 · 티켓 */
.ticket{text-align:center;padding-top:24px}
.ticket .num{font-size:5rem;line-height:1;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin:10px 0 6px;color:var(--green-deep)}
.ticket .where{font-size:1.15rem;font-weight:700}
.steps{margin:26px auto 0;max-width:340px;text-align:left;display:grid;gap:10px}
.step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--soft);color:var(--ink-2)}
.step .dot{flex:none;width:30px;height:30px;border-radius:50%;border:3px solid var(--line-2);display:grid;place-items:center;font-weight:700;font-size:.85rem;background:var(--paper)}
.step.done{color:var(--ink)}
.step.done .dot{background:var(--green);border-color:var(--green);color:#fff}
.step.now{color:var(--ink);background:var(--green-soft)}
.step.now .dot{border-color:var(--green);color:var(--green)}
.ticket .actions{display:grid;gap:12px;margin-top:28px}
.btn2{min-height:60px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);font-weight:700;font-size:1.05rem;text-decoration:none;display:flex;align-items:center;justify-content:center}
.btn2.danger{border-color:var(--caution);color:var(--caution)}
.confirm{margin-top:12px;padding:14px;border-radius:12px;background:var(--caution-soft);display:grid;gap:10px}
.confirm p{font-weight:700;margin:0}
.confirm .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ask-form{display:grid;gap:12px;margin-top:8px}
.ask-form label{font-weight:700}
.ask-form textarea{font:inherit;font-size:1rem;width:100%;min-height:96px;padding:12px;border:2px solid var(--line-2);border-radius:12px;resize:vertical}
.hint{font-size:.88rem;color:var(--ink-2)}
.center{text-align:center}
/* 찾기 (D20): 질문 최대 2개 → 매대 위치 + 상품 */
.find-step{display:flex;align-items:center;gap:8px;margin:4px 0 10px;color:var(--muted);font-size:.9rem}
.find-step i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line-2)}.find-step i.on{background:var(--green)}
.find-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fbtn{min-height:92px;padding:12px 14px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);text-align:left;display:flex;flex-direction:column;justify-content:center;gap:4px;text-decoration:none;color:var(--ink);font:inherit}
.fbtn b{font-size:1.2rem}.fbtn small{color:var(--ink-2);font-size:.85rem;line-height:1.3}
.fbtn.wide{grid-column:1/-1;min-height:64px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;border-color:var(--line-2);color:var(--ink-2);font-weight:700;font-size:.95rem;margin:0}
.fbtn.wide span{white-space:normal}.fbtn.wide .chev{color:var(--green-deep)}
.fbtn:active{transform:scale(.99)}
.lnkbtn{border:0;background:none;color:var(--green-deep);font:inherit;font-weight:700;padding:8px 0;min-height:44px}
.where{padding:14px 16px;border-radius:14px;background:var(--green-soft);color:var(--green-deep);font-weight:700;font-size:1.15rem;margin:0 0 12px;line-height:1.35}
.where small{display:block;font-weight:400;color:var(--ink-2);font-size:.9rem;margin-top:4px}
.fchip{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--ink-2);font-size:.8rem;margin-right:4px;font-weight:700}
/* 번호 화면 (목업 v2.2 승인 · 2026-09-17): "지금 가고 있어요"가 눈에 띄게. 수락 = 진한 초록 덩어리 + 느린 점 세 개, 대기 = 천천히 도는 고리.
   움직임 줄이기 설정이면 맨 위 전역 규칙이 애니메이션을 끄고 색 · 배치만 남는다 */
.tk-head{margin:0 0 4px;padding:6px 0}
.tk-head h1{margin:0}
.tk-head.on{padding:16px 14px;border-radius:16px;background:var(--green);color:#fff;box-shadow:0 0 0 4px var(--green-soft)}
.tk-head.on h1{color:#fff;font-size:1.45rem}
.tk-head.on .tk-sub{margin-top:4px;font-size:1.05rem;font-weight:700;opacity:.95}
.tk-head.on.enter{animation:tkin .5s ease-out}
@keyframes tkin{from{transform:translateY(18px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.dots{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle}
.dots i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.35;animation:dotwave 1.5s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.25s}.dots i:nth-child(3){animation-delay:.5s}
@keyframes dotwave{0%,60%,100%{opacity:.35;transform:scale(1)}30%{opacity:1;transform:scale(1.45)}}
.step.go{background:var(--green);color:#fff;font-weight:700}
.step.go .dot{background:#fff;border-color:#fff;color:var(--green)}
.step.wait .dot{position:relative}
.step.wait .dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid transparent;border-top-color:var(--green);border-right-color:var(--green);animation:tkspin 1.6s linear infinite}
@keyframes tkspin{to{transform:rotate(360deg)}}
/* 가독성 A안 (목업 v1.8): 한눈에 카드 · 항목 목록 · 핵심어 · 조심할 점 묶음 · 성분 표 */
.glance{margin:12px 0 0;padding:2px 14px 4px;border-radius:14px;background:var(--green-soft);border:2px solid var(--green)}
.glance dl{margin:0}
.glance .row{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:center;padding:9px 0;border-top:1px solid rgba(11,107,79,.18)}
.glance .row:first-child{border-top:0}
.glance dt{color:var(--ink-2);font-size:.9rem;font-weight:700}
.glance dd{margin:0;font-size:1rem;font-weight:500;line-height:1.5;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between}
.glance dd .v{flex:1 1 auto}
.glance .kchip{display:inline-block;padding:3px 11px;border-radius:999px;background:var(--paper);border:1.5px solid var(--green);color:var(--green-deep);font-size:.9rem;font-weight:700;line-height:1.3}
.glance .gl{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:var(--paper);border:1.5px solid var(--caution);color:var(--caution);font-weight:700;font-size:.88rem;text-decoration:none}
.pts{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.pts li{position:relative;padding-left:18px;line-height:1.5}
.pts li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--green)}
.pts li.tail{padding-left:0;color:var(--ink-2);margin-top:2px}.pts li.tail::before{display:none}
mark.kw{background:transparent;color:var(--green-deep);font-weight:700;border-bottom:3px solid #D9A441}
.cg{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--paper);border:2px solid var(--line)}
.cg.no{border-color:var(--caution)}.cg.ask{border-color:#8A5A00}
.cg .ch{font-weight:700;font-size:1rem;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.cg.no .ch{color:var(--caution)}.cg.ask .ch{color:#8A5A00}
.cg .ch i{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:.8rem;color:#fff;background:var(--ink-2)}
.cg.no .ch i{background:var(--caution)}.cg.ask .ch i{background:#8A5A00}
.ingt{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.ingt td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.ingt td:first-child{width:60%}.ingt td:last-child{width:40%;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:normal}
.ingt tr.main td{font-weight:700}.ingt tr.main td:last-child{color:var(--green-deep)}
.ingt .cap{color:var(--muted);font-size:.85rem;padding-top:8px}
/* 약도 (D21) */
.mapwrap{margin:12px 0 0;padding:12px;border-radius:14px;background:var(--paper);border:2px solid var(--line)}
.mapwrap svg{width:100%;height:auto;display:block;font-family:inherit}
.mapwrap .lg{margin-top:8px;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.mapbtn{display:inline-flex;align-items:center;gap:6px;margin-left:8px;min-height:36px;padding:0 12px;border:2px solid var(--green);border-radius:999px;background:var(--paper);color:var(--green-deep);font-weight:700;font-size:.85rem;text-decoration:none}
.where .mapbtn{margin:8px 0 0}
/* 행운 이벤트 (QR 로터리) */
.luck{margin:12px 0 0;padding:12px 14px;border-radius:14px;background:var(--amber-soft,#FFF4D6);border:2px solid var(--amber,#8A5A00);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.luck .t{flex:1 1 160px;font-weight:700;color:var(--ink)}.luck .t small{display:block;font-weight:400;color:var(--ink-2);font-size:.85rem;margin-top:2px}
.luck .go{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:0;border-radius:12px;background:var(--amber,#8A5A00);color:#fff;font-weight:700;font-size:1rem;text-decoration:none;font-family:inherit}
.luck.lose{background:var(--soft);border-color:var(--line-2)}.luck.win{background:var(--green-soft);border-color:var(--green)}.luck.win .go{background:var(--green)}
.prize{text-align:center;padding-top:24px}
.prize .big{font-size:1.5rem;font-weight:700;color:var(--green-deep);margin:4px 0 0}
.prize .num{font-size:5rem;line-height:1;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin:14px 0 4px;color:var(--green-deep)}
.prize .gift{display:inline-block;margin:10px 0 0;padding:10px 18px;border-radius:999px;background:var(--amber-soft,#FFF4D6);border:2px solid var(--amber,#8A5A00);font-weight:700;font-size:1.15rem}
.prize .psteps{margin:22px auto 0;max-width:340px;text-align:left;display:grid;gap:10px}
.prize .note{margin-top:20px;color:var(--ink-2);font-size:.9rem;line-height:1.5}
.prize .actions{display:grid;gap:12px;margin-top:24px}.prize .actions .btn2{display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink)}
/* 약사님 메모 (D22 추가 항목) */
.sec.note-sec{background:var(--green-soft);margin-left:-16px;margin-right:-16px;padding:14px 16px 16px;border-top:0}
.sec.note-sec h2{color:var(--green-deep)}
/* 확인 시트 (D24): 되돌릴 수 없는 동작 앞에서 아래에서 올라오는 판. 안전한 선택이 위에 크게 */
.csheet{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.45);display:none;align-items:flex-end}
.csheet.open{display:flex}
.csheet .box{width:100%;max-width:480px;margin:0 auto;background:var(--paper);border-radius:20px 20px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;box-shadow:0 -12px 30px rgba(0,0,0,.2)}
.csheet h2{margin:0;font-size:1.25rem;text-align:center}
.csheet p{margin:0;color:var(--ink-2);text-align:center;line-height:1.45}
.csheet .btn2{min-height:64px;font-size:1.1rem;width:100%}
.csheet .btn2.primary{background:var(--green);border-color:var(--green);color:#fff}
.csheet .btn2.danger{background:var(--paper)}
@media (prefers-reduced-motion:no-preference){.csheet .box{animation:sheetup .18s ease-out}@keyframes sheetup{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}}
/* 위 · 아래 메뉴 줄이기 (고객 목업 v2.3 승인 · 2026-09-17): 본문 공간 확보. 고정 영역 222px → 118px.
   상단 바는 한 줄 44px 이고 고정하지 않는다(본문과 함께 올라감). 하단 탭 한 줄 44px · 물어보기 54px. 누르는 영역은 44px 아래로 내리지 않는다.
   큰 글자 단계에서도 탭이 두 줄로 꺾이지 않게 탭 · 단추 글자에 상한을 둔다 */
.topbar{position:static;padding:4px 10px;gap:6px}
.brand{min-height:44px;padding:4px;font-size:14px}
.ib{min-height:44px;min-width:0;flex-direction:row;gap:6px;padding:0 10px;font-size:13px}
.ib .ic{height:18px;align-items:center}
.ib .ic .a1{font-size:11px}.ib .ic .a2{font-size:17px}
.ib .ic svg{width:18px;height:18px}
.ib[data-level="1"] .ic .a2{font-size:18px}.ib[data-level="2"] .ic .a2{font-size:19px}
.bottombar{padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.bottombar .tabs{gap:5px;margin-bottom:6px}
.bottombar .tab{min-height:44px;padding:2px;font-size:clamp(13px,.72rem,16px);white-space:nowrap;border-radius:10px}
.bottombar .cta{min-height:54px;font-size:clamp(20px,1.1rem,25px);border-radius:14px}
.sec{scroll-margin-top:8px}
.sticky{padding:6px 10px calc(8px + env(safe-area-inset-bottom))}
.sticky .cta{min-height:54px;font-size:clamp(20px,1.1rem,25px);border-radius:14px}