:root{--wine:#4b2c20;--cream:#f3ece6;--ink:#2e211d;--muted:#83756e;--line:#e5dcd5}
header{background:linear-gradient(90deg,#3a2019 0%,#4b2c20 55%,#563328 100%)}
.brand{width:310px;height:82px;background:url('coffeebara-logo.png') left center/contain no-repeat}
.brand img{display:none!important}
nav button.active,.menu-text b,.summary .total b,.option-top p,.option-top b,.complete-card>p:first-of-type,.order-number b{color:#4b2c20}
nav button.active{border-color:#4b2c20}
.plus,.order-head>span,.order-btn{background:#4b2c20}
.menu-card:hover{border-color:#9f8376;box-shadow:0 10px 25px #3820191c}
.option-group button.active{border-color:#4b2c20;background:#f8f2ee;color:#4b2c20}
.promo-copy small{color:#5a3328!important}
.promo-slide.dark .promo-copy small{color:#f0d6c8!important}
.slider-arrow{color:#4b2c20!important}
.slider-dots button{box-shadow:0 0 0 1px #4b2c2066!important}
.slider-dots button.active{background:#4b2c20!important}
.modal{background:#211612c2}
.p10{background-image:url('drinks/grapefruit-black-tea.png');background-size:auto 82%!important;background-position:center;background-repeat:no-repeat}
#scenarioBadge{background:#fff;color:#4b2c20;border-color:#fff;font-weight:900;cursor:default}
.menu-card:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}
.scenario-modal{z-index:40;background:linear-gradient(135deg,#261711e8,#4b2c20ed)}
.scenario-card{width:min(1120px,96vw);background:#fffaf6;border-radius:26px;padding:38px;text-align:center;box-shadow:0 28px 80px #160a0755}
.scenario-card .eyebrow{margin:0;color:#9b5e25;font-size:11px;font-weight:900;letter-spacing:2.4px}
.scenario-card h1{margin:12px 0 10px;font-size:32px;color:#35231d}
.scenario-guide{max-width:570px;margin:0 auto;color:#796961;font-size:14px;line-height:1.7}
.scenario-options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0 22px}
.scenario-options button{border:2px solid transparent;background:#fff;border-radius:18px;padding:0;color:#4b2c20;cursor:pointer;overflow:hidden;box-shadow:0 8px 22px #4b2c2018;transition:.18s}
.scenario-options button:hover{transform:translateY(-4px);border-color:#8f6b59;box-shadow:0 12px 28px #4b2c201c}
.scenario-options button:focus-visible{outline:4px solid #f2bb22;outline-offset:3px}.scenario-options img{display:block;width:100%;height:auto;aspect-ratio:1280/813;object-fit:cover}
.scenario-card>small{color:#9b8b82;font-size:11px}
.score-box{background:#f3ece6;border-radius:16px;padding:20px;margin:22px 0}
.score-box span{display:block;color:#83756e;font-size:12px}.score-box b{display:block;color:#4b2c20;font-size:24px;margin-top:4px}.score-box strong{font-size:46px}
@media(max-width:700px){.scenario-card{padding:26px 16px;max-height:96vh;overflow:auto}.scenario-card h1{font-size:25px}.scenario-options{grid-template-columns:1fr;gap:12px;margin:22px 0}.header-actions button:first-child{display:none}}
.challenge-mascot{display:block;width:108px;height:108px;object-fit:contain;margin:0 auto 16px;filter:drop-shadow(0 8px 12px #4b2c2018)}
.result-card{max-width:560px;padding:26px 30px 30px}
.result-mascot{display:block;width:94px;height:94px;object-fit:contain;margin:-2px auto 4px;filter:drop-shadow(0 7px 10px #4b2c201a)}
.result-card>p:first-of-type{margin:4px 0;color:#4b2c20}.result-card h2{margin:4px 0 16px}
.graded-receipt{position:relative;background:#fffdf8;border:1px solid #dfd5ca;border-radius:5px;padding:20px 18px 17px;text-align:left;box-shadow:0 9px 22px #3d241710;font-family:"Courier New",monospace;background-image:repeating-linear-gradient(0deg,#fffdf8 0,#fffdf8 27px,#8b6a5820 28px)}
.graded-receipt:before,.graded-receipt:after{content:"";position:absolute;left:0;right:0;height:8px;background:radial-gradient(circle at 6px 0,transparent 5px,#fffdf8 5.5px) 0 0/12px 8px repeat-x}.graded-receipt:before{top:-7px;transform:rotate(180deg)}.graded-receipt:after{bottom:-7px}
.receipt-heading{display:flex;justify-content:space-between;align-items:center}.receipt-heading b{font-size:20px;letter-spacing:1px}.receipt-heading span{border:2px solid #563328;padding:3px 8px;font-weight:900;transform:rotate(-3deg)}
.graded-receipt>p{text-align:center;margin:5px 0 10px;font-size:11px;letter-spacing:2px}.receipt-dash{border-top:1px dashed #735c50;margin:10px 0}
.graded-row{position:relative;display:grid;grid-template-columns:24px 1fr 38px;gap:8px;align-items:center;min-height:59px;padding:7px 2px;border-bottom:1px dotted #cbbdb3}.graded-row:last-child{border-bottom:0}.receipt-index{font-weight:900;color:#75645a}.graded-row b{display:block;font-size:13px}.graded-row small{display:block;margin-top:4px;color:#756b65;font-size:9px;line-height:1.35}.graded-row em{justify-self:center;color:#c72222;font-family:"Comic Sans MS","Segoe Print",cursive;font-size:38px;font-weight:900;line-height:1;font-style:normal;transform:rotate(-9deg);text-shadow:0 1px 0 #8f10102a}.graded-row.wrong em{transform:rotate(8deg);font-size:42px}
.grade-total{display:flex;justify-content:space-between;align-items:center;padding:7px 4px 4px;font-weight:900}.grade-total b{color:#c72222;font-family:"Comic Sans MS","Segoe Print",cursive;font-size:20px;border:3px solid #c72222;border-radius:50%;padding:4px 12px;transform:rotate(-4deg)}.grade-total strong{font-size:30px}.graded-receipt>small{display:block;text-align:center;color:#877970;font-size:9px;margin-top:8px}
.result-card .complete-copy{margin:16px 0 8px;line-height:1.5}
@media(max-width:600px){.result-card{padding:20px 16px}.result-mascot{width:78px;height:78px}.graded-receipt{padding:16px 12px}.graded-row{grid-template-columns:20px 1fr 32px}.graded-row em{font-size:32px}.graded-row small{font-size:8px}}

/* 세로형 태블릿에서도 메뉴와 선택지를 한 화면에 더 넉넉하게 보여 준다. */
@media (min-width:601px) and (max-width:900px){
  .menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* 선택지 텍스트가 줄바꿈 없이 또렷하게 유지되도록 한다. */
.option-group>div{grid-template-columns:repeat(4,minmax(0,1fr))}
.option-group button{padding:11px 2px;font-size:12px;line-height:1.2;white-space:nowrap}