/* KoreaGenie 리뉴얼 — 쿠폰 상세 v3 (갤러리 + 아코디언 + sticky 발급)
   확정 시안: docs/design/coupon-detail-v3.html
   토큰(--md-*, --r-*), .btn/.btn-filled, .card, .state, .wrap, .material-symbols-rounded 는
   md3-tokens.css / md3-components.css 공통을 재사용한다. 이 파일은 상세 페이지 전용 스타일만 정의. */

/* breadcrumb */
.crumb{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--md-on-surface-variant);padding:20px 0 12px;flex-wrap:wrap}
.crumb a:hover{color:var(--md-primary)}
.crumb .here{color:var(--md-on-surface);font-weight:500}
.crumb .material-symbols-rounded{font-size:16px}

/* layout */
.detail{padding:8px 0 80px;max-width:880px;margin:0 auto}

/* gallery */
.gallery{margin-bottom:24px}
.gal-main{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;box-shadow:0 4px 14px rgba(0,0,0,.12);margin-bottom:10px}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block}
.hero-badge{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;background:var(--md-primary);color:var(--md-on-primary);padding:8px 14px;border-radius:var(--r-full);font-size:.82rem;font-weight:700;letter-spacing:.3px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hero-badge .material-symbols-rounded{font-size:18px}
.gal-thumbs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumbs button{flex:0 0 96px;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;border:2px solid transparent;transition:border-color .15s ease;padding:0;cursor:pointer;background:none}
.gal-thumbs button.sel{border-color:var(--md-primary)}
.gal-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* header + price card */
.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.title-row h1{font-size:2rem;font-weight:700;letter-spacing:-.5px}
.badge-rate{display:inline-flex;align-items:center;gap:4px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);padding:6px 12px;border-radius:var(--r-full);font-size:.85rem;font-weight:500;white-space:nowrap}
.badge-rate .material-symbols-rounded{font-size:18px;font-variation-settings:'FILL' 1}
.meta-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.cat-badge{display:inline-flex;align-items:center;gap:6px;background:var(--md-primary-container);color:var(--md-on-primary-container);padding:6px 14px;border-radius:8px;font-size:.85rem;font-weight:600}
.cat-badge .material-symbols-rounded{font-size:18px}
.loc{display:inline-flex;align-items:center;gap:4px;color:var(--md-on-surface-variant);font-size:.9rem}
.loc .material-symbols-rounded{font-size:18px}

.price-card{background:linear-gradient(135deg,var(--md-primary-container),var(--md-secondary-container));border-radius:var(--r-lg);padding:22px 24px;margin-bottom:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.price-main{display:flex;flex-direction:column;line-height:1.2}
.price-now{font-size:1.6rem;font-weight:700;color:var(--md-on-primary-container)}
.price-off{background:var(--md-error);color:#fff;padding:6px 12px;border-radius:var(--r-full);font-size:.85rem;font-weight:700}
.valid{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--md-on-primary-container);font-size:.85rem;font-weight:500}
.valid .material-symbols-rounded{font-size:18px}

/* card heading (공통 .card 컨테이너 재사용, 시안 헤딩 스타일만 추가) */
.card h2{font-size:1.2rem;font-weight:500;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h2 .material-symbols-rounded{font-size:22px;color:var(--md-primary)}
.card{margin-bottom:16px}
.desc{color:var(--md-on-surface-variant);font-size:1rem}

/* how-to steps */
.steps{display:grid;gap:12px}
.step{display:flex;align-items:flex-start;gap:16px}
.step-num{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--md-primary);color:var(--md-on-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem}
.step-body h3{font-size:1rem;font-weight:500;margin-bottom:2px}
.step-body p{font-size:.9rem;color:var(--md-on-surface-variant)}

/* accordion */
.acc{background:var(--md-surface-container);border-radius:var(--r-lg);margin-bottom:12px;overflow:hidden}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;font-size:1.1rem;font-weight:500;color:var(--md-on-surface);text-align:left;min-height:44px;background:none;border:none;cursor:pointer;font-family:inherit}
.acc-head .lead{display:flex;align-items:center;gap:10px}
.acc-head .lead .material-symbols-rounded{font-size:22px;color:var(--md-primary)}
.acc-head .arrow{transition:transform .25s ease;color:var(--md-on-surface-variant)}
.acc.open .acc-head .arrow{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc.open .acc-body{max-height:1200px}
.acc-inner{padding:0 24px 22px}

.incl{list-style:none;display:grid;gap:10px}
.incl li{display:flex;align-items:flex-start;gap:10px;font-size:.95rem}
.incl li .material-symbols-rounded{font-size:20px;color:var(--md-primary);font-variation-settings:'FILL' 1;flex-shrink:0}
.map-embed{border-radius:var(--r-md);overflow:hidden;margin-bottom:12px}
.map-embed iframe,.map-embed img{width:100%;border:0;display:block}
.info-row{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;color:var(--md-on-surface-variant);margin-bottom:8px}
.info-row .material-symbols-rounded{font-size:20px;color:var(--md-primary);flex-shrink:0}
.terms{list-style:none;display:grid;gap:8px}
.terms li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--md-on-surface-variant)}
.terms li .material-symbols-rounded{font-size:18px;color:var(--md-on-surface-variant);flex-shrink:0}

.cta-desk{text-align:center;margin-top:24px}
.cta-desk .btn-filled{min-width:280px;min-height:54px;font-size:1.05rem}
.cta-disabled{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:280px;min-height:54px;border-radius:var(--r-full);background:var(--md-surface-variant);color:var(--md-on-surface-variant);font-size:1.05rem;font-weight:500;cursor:not-allowed}

/* sticky CTA bar (mobile) */
.cart-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--md-surface-container);border-top:1px solid var(--md-outline-variant);box-shadow:0 -2px 10px rgba(0,0,0,.08);padding:14px 0;backdrop-filter:saturate(1.2)}
.cart-bar-inner{display:flex;align-items:center;gap:16px}
.cart-total{display:flex;flex-direction:column;line-height:1.2}
.cart-total .lbl{font-size:.75rem;color:var(--md-on-surface-variant)}
.cart-total .val{font-size:1.2rem;font-weight:700;color:var(--md-primary)}
.cart-bar .btn-filled{flex:1;min-height:52px}
.cta-disabled-bar{min-width:auto;flex:1;min-height:52px;font-size:.95rem}

@media(prefers-reduced-motion:reduce){.acc-body,.gal-thumbs button{transition:none}}

@media(max-width:640px){
  .cart-bar{display:block;bottom:var(--navbar-h)}
  .cart-bar-inner{flex-direction:column;align-items:stretch;gap:8px}
  .cart-total{flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px}
  .cart-bar .btn-filled,.cta-disabled-bar{width:100%;white-space:nowrap}
  .cta-desk{display:none}
  .detail{padding-bottom:120px}
  .title-row h1{font-size:1.5rem}
  .valid{margin-left:0;width:100%}
}