/* ==========================================================================
   친구포차 — 메뉴 · 예상 금액 페이지 전용 스타일 (site.css 뒤에 로드)
   ========================================================================== */

/* 69줄짜리 목록이라 홈만큼 넓히면 이름과 가격이 너무 멀어집니다.
   이 페이지만 좁게 씁니다. */
:root{--wrap:1080px}

.page-top{
  padding:64px 0 28px;
  display:flex;
  flex-direction:column;
  gap:13px;
  border-bottom:1px solid var(--line);
}
.crumb{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sign);
  text-decoration:none;
}
.crumb:hover{color:var(--sign-soft)}
.page-top h1{
  font-family:var(--f-display);
  font-size:clamp(34px,8vw,54px);
  line-height:1.04;
  margin:0;
  font-weight:400;
  letter-spacing:-.015em;
}
.page-top .lede{margin:0;color:var(--muted);font-size:14.5px;max-width:56ch}
.page-top .srcline{
  font-family:var(--f-mono);
  font-size:11.5px;
  color:var(--olive);
  letter-spacing:.02em;
}

.panel{padding-top:38px}
.panel-label{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:12px;
}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--f-mono);
  font-size:14px;
  font-weight:500;
  color:var(--paper);
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 17px;
  cursor:pointer;
  min-width:56px;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.chip:hover{border-color:var(--line-2)}
.chip[aria-pressed="true"]{
  background:var(--sign);
  border-color:var(--sign);
  color:#241A00;
  font-weight:600;
}
.chip .sub{font-family:var(--f-body);font-size:11px;font-weight:400;opacity:.7}

.chip.cat{
  font-family:var(--f-body);
  font-size:13px;
  font-weight:400;
  padding:8px 14px;
  border-radius:999px;
  min-width:0;
}
.chip.cat[aria-pressed="true"]{
  background:var(--olive);
  border-color:var(--olive);
  color:#141807;
  font-weight:600;
}

/* 추천 조합 */
.combos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(226px,1fr));
  gap:14px;
  margin-top:16px;
}
.combo{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--ink-2);
  padding:19px 19px 17px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.combo.best{
  border-color:rgba(255,198,30,.42);
  background:linear-gradient(168deg,rgba(255,198,30,.10),rgba(255,198,30,.02));
}
.combo-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.combo-name{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.combo-tag{
  font-family:var(--f-mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sign);
  border:1px solid rgba(255,198,30,.4);
  border-radius:3px;
  padding:2px 6px;
  white-space:nowrap;
}
.combo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.combo-list li{display:flex;justify-content:space-between;gap:10px;opacity:.92}
.combo-list li .qty{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.combo-list li.drink{color:var(--olive);opacity:.85}
.combo-foot{border-top:1px solid var(--line);padding-top:13px;display:flex;flex-direction:column;gap:3px}
.per-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.per{
  font-family:var(--f-mono);
  font-size:29px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.combo.best .per{color:var(--sign-soft)}
.tot{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* 직접 담기 */
.builder{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cat-head{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--olive);
  padding:16px 20px 8px;
  background:var(--ink-2);
}
.row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 20px;
  background:var(--ink-2);
  border-top:1px solid var(--line);
}
.row.picked{background:var(--ink-3)}
.row .nm{flex:1;font-size:14.5px;min-width:0}
.row .nm small{display:block;color:var(--muted-2);font-size:11.5px;line-height:1.45}
.row .nm .sig{
  font-family:var(--f-mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--sign);
  border:1px solid rgba(255,198,30,.36);
  border-radius:3px;
  padding:1px 5px;
  margin-left:6px;
  vertical-align:2px;
}
.row .pr{
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.step{display:flex;align-items:center;gap:2px}
.step button{
  width:32px;height:32px;
  border:1px solid var(--line);
  background:var(--ink);
  color:var(--paper);
  border-radius:8px;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  font-family:var(--f-mono);
}
.step button:hover{border-color:var(--line-2)}
.step .n{
  width:30px;
  text-align:center;
  font-family:var(--f-mono);
  font-size:14px;
  font-variant-numeric:tabular-nums;
  color:var(--muted-2);
}
.step .n.on{color:var(--sign-soft);font-weight:600}

/* 합계 바 — 하단 고정바 위에 얹힙니다 */
.total-bar{
  position:fixed;
  left:0;right:0;
  bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
  z-index:790;
  border-top:1px solid var(--line);
  background:rgba(20,17,11,.95);
  backdrop-filter:blur(10px);
}
.total-in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:12px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.total-in .k{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.total-in .v{
  font-family:var(--f-mono);
  font-size:23px;
  font-weight:600;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.total-in .v.zero{color:var(--muted-2)}
.total-in .side{text-align:right}
.total-in .side .v{font-size:16px;color:var(--sign-soft)}
.reset{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted);
  background:none;
  border:1px solid var(--line);
  border-radius:7px;
  padding:8px 12px;
  cursor:pointer;
}
.reset:hover{color:var(--paper);border-color:var(--line-2)}

body.has-total{padding-bottom:calc(var(--bar-h) + 66px + env(safe-area-inset-bottom))}

/* 확인 필요 */

.smallnote{
  margin-top:24px;
  font-size:12.5px;
  color:var(--muted-2);
  line-height:1.75;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.smallnote b{color:var(--muted);font-weight:500}

@media (max-width:520px){
  .row{gap:10px;padding:11px 15px}
  .row .pr{font-size:12px}
  .cat-head{padding:15px 15px 8px}
  .total-in{padding:11px 16px}
}


/* 글자 크기 하한 규정 (site.css 와 동일 원칙) */
.page-top .lede{font-size:15px}
.page-top .srcline{font-size:13px}
.panel-label{font-size:12px}
.cat-head{font-size:12px}
.row .nm small{font-size:13px}
.row .pr{font-size:13.5px}
.combo-list li .qty{font-size:13px}
.per-k{font-size:11.5px}
.tot{font-size:13.5px}
.total-in .k{font-size:11.5px}
.smallnote{font-size:13.5px}
.reset{font-size:12.5px}

/* ---------- 추천 조합 — 이 페이지의 주인공 ------------------------------ */
.combo-title{
  margin:0 0 8px;
  font-family:var(--f-display);
  font-size:clamp(28px,6.5vw,38px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.01em;
}
/* 간판 그대로: 「추천」은 노랑, 「조합」은 빨강 — 각자 발광 */
.combo-title .cy{
  color:var(--sign);
  text-shadow:
    0 0 8px rgba(255,198,30,.6),
    0 0 26px rgba(255,198,30,.4),
    0 0 54px rgba(255,198,30,.18);
}
.combo-title .cr{
  color:var(--red);
  text-shadow:
    0 0 8px rgba(229,55,42,.65),
    0 0 26px rgba(229,55,42,.42),
    0 0 54px rgba(229,55,42,.2);
}
.combo-title .tw{
  font-size:.6em;
  vertical-align:.18em;
}
.combo-title .ty{color:var(--sign-soft);text-shadow:0 0 12px rgba(255,198,30,.6)}
.combo-title .tr{color:var(--red);text-shadow:0 0 12px rgba(229,55,42,.6)}
@media (prefers-reduced-motion:no-preference){
  /* 고장난 네온처럼 — 두 글자가 서로 다른 박자로 따로따로 깜빡입니다 */
  .combo-title .cy, .combo-title .ty{animation:combo-buzz 3.4s linear infinite}
  .combo-title .cr, .combo-title .tr{animation:combo-buzz 4.3s linear infinite;animation-delay:1.1s}
  @keyframes combo-buzz{
    0%, 100%{opacity:1}
    4%{opacity:1} 5%{opacity:.45} 6%{opacity:1}
    9%{opacity:.8} 10%{opacity:1}
    34%{opacity:1} 35%{opacity:.55} 36%{opacity:1} 37%{opacity:.75} 38%{opacity:1}
    59%{opacity:1} 60%{opacity:.85} 61%{opacity:1}
    82%{opacity:1} 83%{opacity:.35} 84%{opacity:1} 85%{opacity:.9} 86%{opacity:1}
  }
}
.combo-sub{
  margin:0 0 6px;
  font-size:15.5px;
  color:var(--paper);
  word-break:keep-all;
}
.combo-sub b{color:var(--sign-soft);font-weight:600}

/* ---------- 홈으로 돌아가기 — 버튼답게 --------------------------------- */
.backbtn{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--f-body);
  font-size:15px;
  font-weight:600;
  color:var(--paper);
  text-decoration:none;
  background:var(--ink-2);
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:11px 20px;
}
.backbtn .arw{color:var(--sign);font-size:17px}
.backbtn:hover{border-color:var(--sign);background:var(--ink-3)}