/*
  딜 상세 전용 CSS — 예전에는 deal_detail.html 안의 <style>(85KB)이었다(2026-11-07 분리).
  HTML 안에 있으면 상세를 열 때마다 매번 다시 받는다(상세 HTML 172KB 중 101KB가 CSS였다). 파일이면 한 번 받고 브라우저가 보관한다.
  **같은 자리에서 <link>로 불러온다** — detail.css·product_feed_cards.css 뒤, base.html의 .card 규칙과의 순서도 그대로다.
  이 파일을 고치면 deal_detail.html의 `?v=` 값을 반드시 함께 올린다.
*/
  .detail-card {
    padding: clamp(.78rem, 2vw, 1rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .detail-card > * {
    max-width: 100%;
    min-width: 0;
  }

  .detail-title {
    margin: 0;
    font-size: clamp(1.05rem, 2.6vw, 1.28rem);
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .detail-content {
    margin: .75rem 0 1rem;
    color: #334155;
    font-size: clamp(.9rem, 1.9vw, .96rem);
    line-height: 1.55;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .detail-hero {
    margin: .85rem 0 1rem;
  }

  .detail-hero-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
  }

  .detail-content > * {
    max-width: 100%;
  }

  .detail-content * {
    box-sizing: border-box;
  }

  .detail-content img,
  .detail-content video,
  .detail-content iframe {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .detail-content h1,
  .detail-content h2,
  .detail-content h3,
  .detail-content h4 {
    margin: 1.1em 0 .55em;
    color: #0f172a;
    line-height: 1.35;
  }

  .detail-content ul,
  .detail-content ol {
    padding-left: 1.3rem;
    margin: .7rem 0 1rem;
  }

  .detail-content li + li {
    margin-top: .25rem;
  }

  .detail-content blockquote {
    margin: 1rem 0;
    padding: .2rem 0 .2rem 1rem;
    border-left: 4px solid #f4b4c7;
    color: #6b5560;
    background: #fff7fa;
    border-radius: 0 10px 10px 0;
  }

  .detail-content pre {
    margin: 1rem 0;
    padding: .85rem 1rem;
    background: #fff6f8;
    border: 1px solid #f4d8e1;
    border-radius: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
  }

  .detail-content code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    background: rgba(234, 137, 166, 0.12);
    padding: .08rem .3rem;
    border-radius: 6px;
  }

  .detail-content pre code {
    background: transparent;
    padding: 0;
  }

  .detail-content hr {
    border: 0;
    border-top: 1px solid #e6d9de;
    margin: 1.25rem 0;
  }

  .detail-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
  }

  .detail-content td,
  .detail-content th {
    max-width: 100%;
    word-break: break-word;
  }

  .item-index-wrap,
  .item-section {
    border: 1px solid #e6ebf5;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #fcfdff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
  }

  .item-index-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
  }

  .item-index-row {
    display: grid;
    grid-template-columns: clamp(44px, 11vw, 56px) minmax(0, 1fr) auto;
    gap: clamp(.5rem, 1.5vw, .65rem);
    align-items: center;
    padding: clamp(.48rem, 1.5vw, .6rem);
    border: 1px solid #eef2ff;
    border-radius: 10px;
    background: #f8faff;
  }

  .item-index-row.is-focused {
    border-color: rgba(217, 104, 141, 0.42);
    background: linear-gradient(135deg, #fff5f8, #fff9fb);
    box-shadow: 0 10px 20px rgba(217, 104, 141, 0.08);
  }

  .item-index-row img {
    width: clamp(44px, 11vw, 56px);
    height: clamp(44px, 11vw, 56px);
    object-fit: cover;
    border-radius: 8px;
    background: #eef2f7;
  }

  .item-link {
    color: inherit;
    text-decoration: none;
  }

  /* 출처 줄은 오른쪽 정렬이다 — 위의 정체성 줄·가격과 같은 축에 놓는다.
     글자 크기는 **가격비교표의 `판매처 · 가격 · 비고`와 같은 값**이다. 이보다 크면
     주 정보도 아닌 것이 표보다 커 보인다(2026-08-04 지적: 14.72px → 14.08px). */
  .origin-meta.origin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    /* 클래스를 두 번 적어 특이성을 올린다. 같은 요소에 붙은 `.muted`(0.92rem)가
       이 규칙보다 뒤에 정의돼 있어서, 한 번만 적으면 그쪽이 이긴다(실측 14.72px). */
    font-size: clamp(.78rem, 1.6vw, .88rem);
    line-height: 1.4;
  }

  .origin-meta__dot {
    color: #cbd5e1;
  }

  /* 원문 링크. 이 줄에서 **누를 수 있는 것은 이것뿐**이라, 알약 버튼 대신
     밑줄 링크로 둔다. 버튼 모양은 "눌러야 하는 것"으로 보여 구매와 경합한다. */
  .origin-meta__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #475569;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 1px;
  }

  .origin-meta__link:hover {
    color: #0f172a;
    border-bottom-color: #64748b;
  }

  .origin-meta__link-arrow {
    font-size: .9em;
    color: #94a3b8;
  }

  .origin-meta__source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #475569;
    font-weight: 500;
  }

  .origin-meta__source strong {
    color: inherit;
    font-weight: 500;
  }

  .origin-meta__check {
    color: #6b5560;
  }

  .origin-meta__original-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: .3rem .62rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    font-size: inherit;
    font-weight: 500;
    line-height: 1;
  }

  .origin-meta .mini-tip__trigger {
    width: 16px;
    height: 16px;
    font-size: .68rem;
  }

  .origin-meta__icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: block;
    border-radius: 3px;
    object-fit: contain;
    vertical-align: middle;
  }

  .price-compare-table__mall-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    display: block;
    border-radius: 3px;
    object-fit: contain;
    vertical-align: middle;
  }

  .mini-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .mini-tip__trigger {
    width: 18px;
    height: 18px;
    padding: 0;
    /* base.html이 `button`에 `margin: 4px 0 10px`를 전역으로 건다. 끄지 않으면
       이 동그라미가 옆 글자보다 6px 아래로 내려앉는다 — 폭은 18px로 고정돼 있어
       앱 배너 같은 사고는 안 나지만, 줄 안에서 눈에 띄게 어긋난다. */
    margin: 0;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }

  .mini-tip__trigger:hover,
  .mini-tip__trigger:focus-visible,
  .mini-tip.is-open .mini-tip__trigger {
    background: #1f2937;
    color: #fff;
    transform: translateY(-1px);
    outline: none;
  }

  /*
    툴팁은 트리거 중앙을 기준으로 뜬다.

    예전에는 좁은 화면에서 좌/우 한쪽에 고정(`left:0` 또는 `right:-8px`)했는데,
    트리거가 줄 **중간**에 있으면 어느 쪽에 붙여도 반대편이 화면 밖으로 나간다
    (2026-07-31 모바일에서 오른쪽이 잘려 나갔다).

    그래서 위치 보정은 CSS가 아니라 JS(initMiniTips)가 한다 —
    열릴 때 실제 좌표를 재서 화면 안으로 밀어 넣은 거리를 `--mini-tip-shift`에,
    그만큼 반대로 옮긴 화살표 위치를 `--mini-tip-arrow`에 넣는다.
    값이 없으면(JS 실패) 중앙 정렬 그대로라 최소한 읽을 수는 있다.
  */
  .mini-tip__panel {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 25;
    width: min(320px, calc(100vw - 24px));
    padding: 12px 14px;
    border-radius: 14px;
    /* 검은 상자는 화면에서 너무 튀었다(2026-08-04). 브랜드 색으로 낮춘다 —
       `--brand-deep`은 흰 글씨 대비 4.7:1이라 이 위에서도 읽힌다(§3.24). */
    background: var(--brand-deep, #c04a72);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.55;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translate(calc(-50% + var(--mini-tip-shift, 0px)), 6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
  }

  .mini-tip__panel::after {
    content: "";
    position: absolute;
    left: var(--mini-tip-arrow, 50%);
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: var(--brand-deep, #c04a72);
    transform: translateX(-50%) rotate(45deg);
  }

  .mini-tip:hover .mini-tip__panel,
  .mini-tip:focus-within .mini-tip__panel,
  .mini-tip.is-open .mini-tip__panel {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translate(calc(-50% + var(--mini-tip-shift, 0px)), 0);
    pointer-events: auto;
  }

  .origin-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  /*
    좁은 화면용 좌/우 고정 규칙은 없앴다. 위의 JS 보정이 화면 폭과 무관하게
    같은 방식으로 처리하므로, 여기서 left/right/transform을 다시 잡으면
    보정값(--mini-tip-shift)이 덮여 다시 잘린다.
  */

  .item-index-title {
    margin: 0;
    font-size: clamp(.84rem, 1.8vw, .92rem);
    font-weight: 700;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .item-section {
    margin-top: .85rem;
    padding: clamp(.78rem, 2vw, .95rem);
    scroll-margin-top: 16px;
    min-width: 0;
  }

  .item-section.is-focused {
    border-color: rgba(217, 104, 141, 0.42);
    box-shadow: 0 16px 28px rgba(217, 104, 141, 0.1);
  }

  .item-head {
    display: grid;
    gap: .8rem;
    grid-template-columns: 1fr;
    min-width: 0;
  }

  /* 좁은 화면의 순서는 DOM 순서 그대로: 정체성 → 이미지 → 가격.
     넓은 화면에서는 이미지가 왼쪽에서 두 줄을 걸치고 오른쪽에 정체성·가격이 쌓인다.
     영역 이름을 쓰는 이유는 **마크업을 두 벌 쓰지 않기 위해서**다. */
  .item-head--with-identity {
    grid-template-areas:
      "identity"
      "image"
      "price";
  }

  .item-head--with-identity > .deal-identity { grid-area: identity; }
  .item-head--with-identity > .item-head__image-link { grid-area: image; }
  .item-head--with-identity > .price-hero { grid-area: price; }

  /* 제목(왼쪽)과 판매처·출처·시간(오른쪽)을 한 줄에 나눈다. **폭과 무관하게** 같은
     구조다 — 좁은 화면에서 이것들을 제목 아래 왼쪽에 쌓았더니 "왜 여기 왼쪽에
     붙어 있지?"라는 인상을 줬다(2026-08-04 지적). 오른쪽 축에 모아 두면 나중에
     댓글·추천 수가 붙어도 자리가 흔들리지 않는다.

     판매처 배지는 제목과 같은 줄 끝, 출처·시간은 그 아래 줄 — `aside`가 세로로
     쌓이므로 자연히 그렇게 된다. */
  .deal-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 12px;
    min-width: 0;
  }

  /* `margin-left: auto`라 **아래 줄로 밀려나도 오른쪽에 붙는다.** 좁은 화면에서
     제목이 길면 자연히 두 줄이 되는데, 그때도 축은 오른쪽으로 유지된다. */
  .deal-identity__aside {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
  }

  /* 제목이 이 블록의 주인이다. 카드 위에 따로 떠 있던 것을 여기로 들여왔다.
     `flex-basis: 200px`은 최소 지분이다 — 이것이 없으면 제목이 공간을 다 먹고
     오른쪽 묶음이 64px까지 눌려 배지와 통계가 세로로 쪼개진다(2026-08-04 실측). */
  .deal-identity__title {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
    font-size: clamp(1.05rem, 2.6vw, 1.3rem);
    font-weight: 800;
    line-height: 1.35;
    color: #0f172a;
    word-break: keep-all;
  }

  /* 카드 위의 원래 제목은 화면에서만 감춘다. 마크업은 남겨야 검색·접근성이 산다. */
  .detail-title--moved {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .deal-identity__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  .deal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.5;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
  }

  .deal-badge__icon {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    object-fit: contain;
    flex: none;
  }

  .deal-badge--shipping {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #475569;
  }

  .deal-badge--shipping.is-free {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
  }

  .deal-identity__age {
    white-space: nowrap;
  }

  /* 통계·경과시간 줄. 예전에는 #94a3b8 · 0.76rem이라 **눈에 걸리지 않았다**
     (2026-08-04 지적). 한 단계 진하고 크게 해서 읽히게 한다. 그래도 배지보다는
     약해야 한다 — 구매 결정 정보가 아니라 신뢰 보조다. */
  /* 통계 줄은 접지 않는다 — `42 · 뽐뿌 · 1일 전`이 세 줄로 끊기면 읽히지 않는다. */
  .deal-identity__meta {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 6px 0 0;
    color: #64748b;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.5;
  }

  .deal-identity__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .deal-identity__stat svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    flex: none;
  }

  /* 수집 출처(뽐뿌·루리웹). 판매처 배지와 달리 **배경 없이** 아이콘+이름만 둔다 —
     같은 모양이면 "어디서 사나"와 "어디서 왔나"가 섞인다. */
  .deal-identity__source {
    color: #475569;
  }

  /* 판매처 pill 옆에 서지만 **pill이 아니다** — 테두리도 배경도 주지 않는다(§3.24).
     `.deal-badge`의 세로 padding(3px)만큼 광학 중심을 맞추고, pill과 붙어 보이지
     않게 6px gap에 2px을 더한다. 글자 크기는 통계 줄과 같게 둬서 "보조 정보"라는
     신호를 유지한다 — 배지 크기(.74rem)로 키우면 판매처와 같은 급으로 읽힌다. */
  /* 글자 크기는 **판매처 pill과 같게** 맞춘다(.74rem). 통계 줄에 있을 때의 .88rem을
     그대로 들고 오면 출처가 판매처보다 커 보여 위계가 뒤집힌다 — pill보다 큰 회색
     글씨는 "더 중요한 것"으로 읽힌다. 크기를 맞추면 구분은 색과 모양이 맡는다(§3.24). */
  .deal-identity__badges .deal-identity__source {
    padding: 3px 0;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
  }

  /* 판매처 pill의 아이콘과 **같은 크기**로 맞춘다. 통계 줄에 있을 때는 16px이었는데,
     pill 옆에 서면 둘의 아이콘 크기가 다른 것이 눈에 띈다. 좁은 화면에서 이 줄이
     한 줄로 남느냐를 가르는 2px이기도 하다(375px에서 4px이 모자랐다). */
  .deal-identity__badges .deal-identity__source-icon {
    width: 14px;
    height: 14px;
  }

  .deal-identity__source-icon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: contain;
    flex: none;
  }

  .deal-identity__stat--link {
    color: inherit;
    text-decoration: none;
  }

  .deal-identity__stat--link:hover {
    color: #475569;
  }

  .deal-identity__dot {
    color: #cbd5e1;
  }

  /* `hidden` 속성은 display가 지정된 요소를 감추지 못한다. inline-flex가 이긴다. */
  .deal-identity__stat[hidden],
  .deal-identity__dot[hidden] {
    display: none;
  }

  .item-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(48vw, 220px);
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
  }

  /* 여백 아래끝을 .55rem까지 내린다. 이 상자는 `.card`(16px) → `.item-section`(12.5px)
     안에 또 들어 있어서, 375px에서 세 겹의 안쪽 여백이 80px을 먹고 정작 내용은 269px만
     쓴다. 판매처 배지 + 출처가 한 줄에 들어가느냐가 여기서 갈렸다(실측: 152 필요 / 150
     가능 — 2px 모자랐다). `1.8vw`가 .72rem을 넘는 640px 이상에서는 예전 그대로다. */
  .price-hero {
    border: 1px solid #e9eefe;
    border-radius: 12px;
    padding: clamp(.55rem, 1.8vw, .85rem);
    background: linear-gradient(140deg, #f8fbff 0%, #f2f6ff 100%);
    min-width: 0;
  }

  .price-label {
    margin: 0;
    color: #64748b;
    font-size: clamp(.73rem, 1.4vw, .78rem);
    font-weight: 700;
    letter-spacing: .04em;
  }

  .final-price-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .deal-price-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
  }

  /* 주 액션. 화면에서 가장 강한 것은 이것 하나여야 한다. */
  .deal-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: .6rem 0 0;
    /* 주 행동이라 손가락·시선이 가장 먼저 닿아야 한다. 세로를 키워 존재감을 준다. */
    padding: 1.05rem 1rem;
    min-height: 56px;
    border: 0;
    border-radius: 12px;
    background: var(--brand-deep, #c04a72);
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    text-decoration: none;
    box-sizing: border-box;
    box-shadow: 0 10px 22px rgba(192, 74, 114, 0.22);
  }

  .deal-buy-btn:hover {
    background: var(--brand-deep-hover, #a83e62);
  }

  .deal-buy-btn.is-disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
  }

  .deal-buy-btn__arrow {
    font-size: 1.05rem;
    line-height: 1;
  }

  .deal-affiliate-note {
    margin: 6px 0 0;
    color: #94a3b8;
    font-size: .72rem;
    line-height: 1.5;
    text-align: right;
  }
  /* 구매 스탬프 안내. 제휴 고지와 같은 자리·같은 크기, 색만 브랜드로 — 구매 버튼과 경합하지 않게 링크 글자다. */
  .deal-stamp-hint a { color: var(--brand-deep, #c04a72); font-weight: 700; text-decoration: none; }
  /* ── 스탬프 세 단계 띠(2026-10-26, C안): 1줄 🛒▸🎟▸🎁, 2줄 상태 문구 + 알약. includes/stamp_purchase_strip.html 한 벌을
     고정바 위(--bar)와 넓은 화면 구매 버튼 아래(--inline)가 같이 쓴다. 숫자는 purchase_cta()가 준다. */
  .stamp-strip { margin: 10px 0 0; padding: 8px 10px 7px; border-radius: 14px; background: linear-gradient(180deg, #fff1f6, #fff7fa); border: 1px solid #f3d9e4; text-align: left; }
  .stamp-strip__steps { display: grid; grid-template-columns: 1fr 14px 1fr 14px 1fr; align-items: center; }
  .stamp-strip__step { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; font-size: .74rem; font-weight: 800; color: #7a3350; line-height: 1.15; text-align: center; }
  .stamp-strip__ico { font-size: 1.1rem; line-height: 1; flex: 0 0 auto; }
  .stamp-strip__label b { color: var(--brand-deep, #c04a72); }
  .stamp-strip__label small { display: block; font-size: .64rem; font-weight: 700; color: #a8647f; }
  .stamp-strip__arrow { color: #e2b4c6; font-size: .7rem; text-align: center; }
  .stamp-strip__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #f0d6e0; font-size: .74rem; font-weight: 700; color: #7a3350; line-height: 1.3; }
  .stamp-strip__text { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
  .stamp-strip__mark { width: 18px; height: 18px; flex: 0 0 auto; }
  .stamp-strip__pill { flex: 0 0 auto; width: auto; margin: 0; padding: 5px 11px; border-radius: 999px; background: var(--brand-deep, #c04a72); color: #fff; font-size: .74rem; font-weight: 900; white-space: nowrap; text-decoration: none; }
  .stamp-strip__pill--ghost { background: #fff; color: var(--brand-deep, #c04a72); border: 1.5px solid var(--brand-deep, #c04a72); }
  .stamp-strip--paused .stamp-strip__row { color: #92400e; }
  .stamp-strip--paused .stamp-strip__steps { opacity: .55; }
  /* 넓은 화면: 결정 블록(max 640px) 안이라 글자를 조금 키운다 */
  .stamp-strip--inline .stamp-strip__step { font-size: .8rem; }
  .stamp-strip--inline .stamp-strip__row { font-size: .8rem; }
  @media (max-width: 1024px) { .stamp-strip--inline { display: none; } }

  /* 보조 액션 네 개(추천·찜·앱 알림·카카오 알림)를 담는 하나의 그리드.
     두 묶음(`.deal-quick-actions` / `.deal-alarm-panel .alarm-actions`)은
     `display: contents`로 자기 상자를 없애고 버튼만 이 그리드에 올린다.
     그래서 **마크업을 한 벌만 두고** 폭에 따라 2+2 ↔ 4분할이 바뀐다. */
  .deal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: .7rem 0 0;
  }

  .deal-quick-actions {
    display: contents;
  }

  /* base.html이 button에 `width:100%; margin:4px 0 10px`을 전역으로 건다.
     grid 칸 안에서는 그 여백이 칸을 흔들므로 여기서 끈다 — CLAUDE.md §7. */
  /* 아이콘과 라벨을 **가로로** 놓는다. 세로로 쌓으면 버튼 높이가 58px까지 올라가
     네 개가 화면을 크게 먹는다(2026-08-05 지적). 알림 버튼도 원래 가로 배치라,
     가로로 통일해야 네 개가 한 종류의 버튼으로 읽힌다. */
  .deal-actions .quick-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: .45rem .4rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #475569;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    min-width: 0;
  }

  .deal-actions .quick-action:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .deal-actions .quick-action[disabled] {
    opacity: .5;
    cursor: not-allowed;
  }

  .quick-action__icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    flex: none;
  }

  .quick-action__label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
  }

  .quick-action__count {
    font-variant-numeric: tabular-nums;
  }

  .quick-action__count[hidden] {
    display: none;
  }

  .deal-actions .quick-action.is-active {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
  }

  .deal-actions .quick-action--recommend.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
  }

  /* 알림 두 개도 `.deal-actions` 그리드의 칸이 된다 — 감싼 상자를 전부 없앤다.
     둘 중 하나만 보이거나 접히면 안 된다(앱 설치·카카오 가입 유도가 목적이다). */
  .deal-alarm-panel,
  .deal-alarm-panel .alarm-actions,
  .deal-alarm-panel .alarm-actions__buttons {
    display: contents;
  }

  /* 같은 줄의 칸은 높이가 같아야 한 묶음으로 읽힌다 — 추천·찜과 같은 값을 쓴다. */
  .deal-alarm-panel .alarm-btn {
    width: 100%;
    min-width: 0;
    margin: 0;
    height: auto;
    min-height: 46px;
  }

  /* 안내 문구는 버튼이 아니라 줄 전체를 쓴다. 정렬은 폭과 무관하게 오른쪽 —
     가격·제휴 문구·출처와 같은 축이다. */
  .deal-alarm-panel .alarm-help {
    grid-column: 1 / -1;
    margin: 0;
    text-align: right;
  }

  /* 원문 · 출처 접기. 국내 딜의 원문은 대부분 링크와 한 줄이라 기본은 접는다. */
  .deal-origin-fold {
    margin: 16px 0 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
  }

  .deal-origin-fold__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: .7rem .9rem;
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  .deal-origin-fold__summary::-webkit-details-marker {
    display: none;
  }

  .deal-origin-fold__chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
    transition: transform .15s ease;
    flex: none;
  }

  .deal-origin-fold[open] .deal-origin-fold__chevron {
    transform: rotate(-135deg);
  }

  .detail-content--folded {
    margin: 0;
    padding: 0 .9rem .9rem;
  }

  /* 접힘 블록 바로 뒤에 오는 출처 카드는 위 간격을 좁혀 한 덩어리로 읽히게 한다. */
  .deal-origin-meta-card {
    margin-top: 8px !important;
  }

  /* 출처 한 줄만 담는 상자다. `.chart-card`의 여백(.75rem)은 그래프·표 기준이라
     여기서는 과하게 두껍다 — 내용에 맞춰 줄인다. */
  .origin-meta-card {
    padding: .5rem .75rem;
  }

  .final-price-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .6rem;
    padding: .56rem .72rem;
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: #fff5f5;
  }

  .final-price-label {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: #991b1b;
  }

  /* 가격은 이 화면에서 **가장 큰 글자**다. 결정에 쓰이는 숫자라 작게 두면
     눈이 먼저 가지 않는다. */
  .final-price-value {
    font-size: clamp(1.35rem, 4.6vw, 1.75rem);
    font-weight: 800;
    color: #991b1b;
    line-height: 1.05;
  }

  /* 국내 딜: 상자·배경 없이 숫자만. 라벨("최종가")도 템플릿에서 빠진다.
     보여 줄 가격이 하나뿐이라 라벨이 설명하는 것이 없고, 상자는 그 안에
     정가→할인→최종가 계산이 있던 시절의 흔적이다. */
  /* 배지·출처·시간 묶음(`aside`)과 가격을 한 행에 놓는다.
     좁은 화면에서는 **가격 왼쪽의 빈 자리**가 이 정보의 자리다 — 가격이 오른쪽에
     크게 있어서 왼쪽이 비는데, 거기에 넣으면 한 줄로 정리된다.
     넓은 화면에서는 이 행을 `display: contents`로 없애고 `aside`를 블록 맨 아래로
     보낸다(아래 미디어쿼리) — 그쪽이 비어 보였기 때문이다. */
  /* 가격은 배지·출처 두 줄의 **세로 가운데**에 놓는다. 아래에 맞추면 왼쪽 묶음보다
     낮게 걸려 두 덩어리가 어긋나 보인다. */
  .deal-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* 줄바꿈을 허용하지 않는다. 375px에서 배지 147 + 가격 136 + gap 12 = 295로 딱 1px
     넘쳐 가격이 아래로 떨어졌다(실측). `min-width: 0`이라 모자라면 배지가 안에서
     두 줄로 접힌다 — 가격이 아래로 밀리는 것보다 그편이 낫다. */
  .deal-price-row > .deal-identity__aside {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    text-align: left;
  }

  .deal-price-row > .deal-identity__aside .deal-identity__badges,
  .deal-price-row > .deal-identity__aside .deal-identity__meta {
    justify-content: flex-start;
  }

  /* **가격은 줄어들지 않는다.** 예전에는 `0 1 auto`로 열어 뒀는데, 그러면 왼쪽 칸이
     남긴 폭만 받고 그 안에서 글자가 접혀 `24,900` / `원`으로 쪼개졌다(2026-08-08
     제보 스크린샷). 이 화면에서 가장 큰 숫자가 두 줄이 되는 것보다, 왼쪽 배지 줄이
     안에서 접히는 편이 낫다 — 그쪽은 `flex-wrap: wrap`이라 출처가 아래로 내려갈 뿐이다.

     예전 주석은 "0 0 auto면 배지 묶음이 85px까지 눌려 세 줄이 된다"고 적고 있었는데,
     그때는 배지 줄에 판매처+배송비 두 pill이 있었다. 배송비는 그 뒤 가격 밑
     (`.deal-price-tags`)으로 내려가 조건이 달라졌다. */
  .deal-price-row > .final-price-wrap {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin-left: auto;
  }

  /* 오른쪽 정렬인 이유는 위의 제목 줄과 **같은 축**에 놓기 위해서다.
     왼쪽에 두면 화면에 축이 둘 생겨 시선이 좌우로 흔들린다. */
  /* 가격과 배송 배지를 세로로 쌓는다 — 배송비는 가격의 일부다. */
  .final-price-wrap--bare {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border: 0;
    background: none;
    padding: 0;
    margin-top: .2rem;
    gap: 4px;
  }

  .final-price-wrap--bare .final-price-side {
    justify-content: flex-end;
    gap: 10px;
  }

  /* 가격 밑 꼬리표 줄 — `최저가` 다음에 배송비. 오른쪽 축에 맞춰 붙인다.
     `nowrap`인 이유: 375px에서 wrap이면 둘이 세로로 쪼개져 오른쪽이 세 줄이 된다
     (실측). 배지 문구는 짧아서 한 줄로 둬도 넘치지 않는다. */
  .deal-price-tags {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  .deal-price-tags > * {
    flex: 0 0 auto;
  }

  /* 제휴 고지의 각 절. `inline-block`이라 절 안에서는 줄이 갈리지 않고 통째로
     다음 줄로 넘어간다 — 두 줄이 되면 쉼표에서 끊긴다. */
  .mini-tip__clause {
    display: inline-block;
  }

  .final-price-wrap--bare .final-price-value {
    font-size: clamp(1.75rem, 6vw, 2.3rem);
    letter-spacing: -.02em;
    /* `24,900`과 `원`이 갈라지지 않게 한다. 폭이 모자라면 왼쪽 칸을 접는다(위 주석). */
    white-space: nowrap;
  }

  .item-section > h3 > a {
    font-size: clamp(.92rem, 2.1vw, 1.02rem);
    line-height: 1.25;
  }

  .final-price-value .currency {
    font-size: .82rem;
    margin-right: .2rem;
    vertical-align: text-top;
  }

  .final-price-wrap.compact {
    padding: .46rem .64rem;
  }

  /* 국내 딜은 분홍 상자가 없다(§3.24). 상자가 없으면 안쪽 여백도 없어야 하는데,
     `.final-price-wrap.compact`는 클래스가 둘이라 `--bare`의 `padding: 0`을 이겼다
     (§7의 그 함정). 좌우 10.24px씩 20px이 가격 칸 폭으로 잡혀, 그만큼 왼쪽 배지
     줄이 눌리고 있었다(375px 실측: 가격 글자 111px인데 칸은 132px). */
  .final-price-wrap--bare.compact {
    padding: 0;
  }

  .final-price-wrap.compact .final-price-label {
    font-size: .85rem;
  }

  .promo-meta {
    margin-top: .45rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .promo-badge {
    font-size: clamp(.69rem, 1.4vw, .74rem);
    padding: .2rem .45rem;
    border-radius: 999px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
  }

  .price-grid {
    margin-top: .75rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
  }

  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .45rem .6rem;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #edf1f9;
    font-size: clamp(.82rem, 1.7vw, .87rem);
  }

  .price-row .key {
    color: #475569;
  }

  .price-row .val {
    font-weight: 700;
    color: #111827;
  }

  .price-row.discount .val {
    color: #b91c1c;
  }


  .price-row.total {
    border: 1px solid #fecaca;
    background: #fff5f5;
  }

  .price-row.total .key,
  .price-row.total .val {
    color: #991b1b;
    font-weight: 800;
  }

  /* --- [추가] 알림 버튼 스타일 그대로 유지 --- */
  .alarm-actions {
    margin-top: 8px;
    display: grid;
    gap: 8px;
  }
  .alarm-actions--with-share {
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
  }
  .alarm-actions--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .alarm-actions--app-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .alarm-actions__buttons {
    display: grid;
    gap: 8px;
    min-width: 0;
  }
  .alarm-actions__buttons--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .alarm-actions__buttons--app-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .alarm-actions--with-app {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .alarm-actions__app-button {
    grid-column: auto;
  }
  .alarm-btn {
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 42px;
    min-height: 42px;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  .alarm-btn::before {
    content: "";
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
  }
  .alarm-btn__label {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .alarm-btn:hover { background: #eef2ff; }
  .alarm-btn--web {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
  }
  .alarm-btn--web::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 4.25a4.25 4.25 0 0 0-4.25 4.25v1.71c0 .47-.17.92-.48 1.26l-1.05 1.17A1 1 0 0 0 7.96 14h8.08a1 1 0 0 0 .74-1.68l-1.05-1.17a1.9 1.9 0 0 1-.48-1.26V8.5A4.25 4.25 0 0 0 12 4.25Z' stroke='%231D4ED8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.25 16a1.75 1.75 0 0 0 3.5 0' stroke='%231D4ED8' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .alarm-btn--web:hover { background: #dbeafe; }
  .alarm-btn--web.is-active {
    background: #dbeafe;
    border-color: #60a5fa;
    color: #1d4ed8;
  }
  .alarm-btn--web.is-active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 4.5a4 4 0 0 0-4 4v1.84c0 .42-.15.83-.43 1.14l-.93 1.06c-.3.34-.06.87.39.87h9.9c.45 0 .69-.53.39-.87l-.93-1.06c-.28-.31-.43-.72-.43-1.14V8.5a4 4 0 0 0-4-4Z' fill='%231D4ED8'/%3E%3Cpath d='M10.4 15.95a1.6 1.6 0 0 0 3.2 0' stroke='%231D4ED8' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M5.85 7.1 4.7 5.95M18.15 7.1l1.15-1.15' stroke='%231D4ED8' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .alarm-btn--kakao {
    border-color: #facc15;
    background: #fff7cc;
    color: #7c5f00;
  }
  .alarm-btn--kakao::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='2' width='20' height='20' rx='6' fill='%233C1E1E'/%3E%3Cpath d='M12 6.1c-3.26 0-5.9 2.1-5.9 4.69 0 1.46.85 2.79 2.2 3.66l-.52 2.02c-.05.2.18.36.35.24l2.35-1.55c.46.07.93.1 1.52.1 3.26 0 5.9-2.1 5.9-4.69S15.26 6.1 12 6.1Z' fill='%23FEE500'/%3E%3C/svg%3E");
  }
  .alarm-btn--kakao:hover { background: #fef08a; }
  .alarm-btn--kakao.is-active {
    background: #fde68a;
    border-color: #f59e0b;
    color: #92400e;
  }
  .alarm-btn--kakao.is-active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='2' width='20' height='20' rx='6' fill='%233C1E1E'/%3E%3Cpath d='M10.7 6.1C7.44 6.1 4.8 8.2 4.8 10.79c0 1.46.85 2.79 2.2 3.66l-.52 2.02c-.05.2.18.36.35.24l2.35-1.55c.46.07.93.1 1.52.1 3.26 0 5.9-2.1 5.9-4.69S13.96 6.1 10.7 6.1Z' fill='%23FEE500'/%3E%3Ccircle cx='18.25' cy='17.75' r='3.25' fill='%2316A34A'/%3E%3Cpath d='m16.75 17.8.95.95 1.8-1.95' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .alarm-btn--app {
    border-color: #f9a8d4;
    background: #fff1f6;
    color: #9f3158;
  }
  .alarm-btn--app::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='7' y='2.75' width='10' height='18.5' rx='2.2' stroke='%239F3158' stroke-width='1.7'/%3E%3Cpath d='M10.25 18.1h3.5' stroke='%239F3158' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M12 6.5v5.2m0 0 2.1-2.1M12 11.7 9.9 9.6' stroke='%239F3158' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .alarm-btn--app:hover { background: #ffe4ef; }
  .alarm-btn.is-loading {
    opacity: .72;
    pointer-events: none;
  }
  .alarm-actions__share-btn {
    width: 44px;
    min-width: 44px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
  }
  .alarm-actions__share-btn:hover {
    background: #fff5f8;
    border-color: rgba(217, 104, 141, 0.28);
    color: var(--brand-strong);
  }
  .alarm-actions__share-btn:active {
    transform: translateY(1px);
  }
  .alarm-help {
    margin: .12rem 0 0;
    font-size: .76rem;
    line-height: 1.4;
    color: #475569;
  }
  .affiliate-disclosure {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-right: .18rem;
    color: #64748b;
    white-space: nowrap;
  }
  .affiliate-disclosure .mini-tip {
    position: static;
  }
  .affiliate-disclosure .mini-tip__trigger {
    width: 16px;
    height: 16px;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
    vertical-align: -1px;
  }
  .affiliate-disclosure .mini-tip__panel {
    left: 0;
    right: auto;
    width: min(330px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    transform: translateY(6px);
  }
  .affiliate-disclosure .mini-tip__panel::after {
    left: 58px;
    right: auto;
    transform: rotate(45deg);
  }
  .affiliate-disclosure .mini-tip:hover .mini-tip__panel,
  .affiliate-disclosure .mini-tip:focus-within .mini-tip__panel,
  .affiliate-disclosure .mini-tip.is-open .mini-tip__panel {
    transform: translateY(0);
  }

  /*
    `.mini-tip--right`는 **오른쪽 끝에 붙은 아이콘**을 위한 것이다(제휴 링크 ⓘ,
    원문 보기 !). 기본값은 `left: 50%` 중앙 정렬인데, 아이콘이 화면 오른쪽 가장자리에
    있으면 패널 절반이 밖으로 나가 잘린다(2026-08-04 실측).

    위 주석은 JS(`initMiniTips`)가 좌표를 재서 밀어 넣는다고 적고 있으나 **그 함수는
    실제로 없다** — 그래서 보정이 전혀 되지 않았다. CSS로 오른쪽 기준을 잡는다.
    화살표도 같이 오른쪽으로 옮겨 아이콘을 가리키게 한다.
  */
  .mini-tip--right .mini-tip__panel {
    left: auto;
    right: 0;
    transform: translate(0, 6px);
  }

  .mini-tip--right .mini-tip__panel::after {
    left: auto;
    right: 10px;
    transform: translateX(50%) rotate(45deg);
  }

  .mini-tip--right:hover .mini-tip__panel,
  .mini-tip--right:focus-within .mini-tip__panel,
  .mini-tip--right.is-open .mini-tip__panel {
    transform: translate(0, 0);
  }

  /*
    좁은 화면에서는 오른쪽 기준으로 붙여도 패널이 화면보다 넓으면 **왼쪽이 잘린다**
    (375px에서 폭 330 · 좌 -11 실측). 기준점(ⓘ 아이콘)이 화면 오른쪽 끝이 아니라
    조금 안쪽에 있어서 그렇다. 화면 폭에서 그 여백까지 빼 준다.
  */
  @media (max-width: 520px) {
    /* 제휴 툴팁은 제외한다 — 그쪽은 아래에서 옆으로 뻗도록 따로 정한다. */
    .mini-tip--right:not(.mini-tip--affiliate) .mini-tip__panel {
      width: min(320px, calc(100vw - 64px));
    }

    /* 좁은 화면에서는 앞 절을 뺀다. 패널이 화면을 거의 덮으면 읽히지 않는다. */
    .mini-tip__lead {
      display: none;
    }
  }
  /*
    제휴 고지 툴팁은 **위가 아니라 옆으로** 편다. 폭과 무관하게 그렇다.
    위로 띄우면 바로 위에 있는 가격을 가리고(데스크탑), 좁은 화면에서는 배지·출처
    줄까지 덮는다(2026-08-04 지적 — 두 번 다 실물에서 확인됐다).
    아이콘 왼쪽은 어차피 비어 있는 줄이라, 거기로 뻗으면 아무것도 가리지 않는다.

    **한 줄로 펴지 않는다.** `width: max-content`로 뒀더니 문구가 한 줄로 길게
    뻗어 왼쪽이 화면 밖으로 잘렸다(2026-08-04 실물 확인). 폭을 고정해 두 줄로
    떨어뜨린다 — 그만큼 말풍선이 위아래로 조금 나가 추천·찜 버튼 위를 살짝
    덮지만, 문구가 잘리는 것보다 낫다. 가격은 여전히 가리지 않는다.
  */
  .affiliate-disclosure .mini-tip__panel {
    top: 50%;
    bottom: auto;
    left: auto;
    right: calc(100% + 10px);
    width: min(360px, calc(100vw - 72px));
    white-space: normal;
    transform: translate(6px, -50%);
  }

  .affiliate-disclosure .mini-tip:hover .mini-tip__panel,
  .affiliate-disclosure .mini-tip:focus-within .mini-tip__panel,
  .affiliate-disclosure .mini-tip.is-open .mini-tip__panel {
    transform: translate(0, -50%);
  }

  /* 화살표도 옆을 가리킨다 — 패널 오른쪽 가운데에서 아이콘 쪽으로. */
  .affiliate-disclosure .mini-tip__panel::after {
    top: 50%;
    bottom: auto;
    left: auto;
    right: -6px;
    transform: translateY(-50%) rotate(45deg);
  }

  @media (max-width: 520px) {
    /*
      좁은 화면에서도 **말풍선은 아이콘 왼쪽으로 편다.** 위로 띄우면 가격과 배지·출처를,
      아래로 펴면 추천·찜 버튼을 덮는다(2026-08-04 두 방향 다 실물에서 확인).
      옆으로 펴면 그 줄은 원래 비어 있어서 아무것도 가리지 않는다.

      좁은 화면에서는 `.mini-tip__lead`("본 게시물에는 …")만 감춘다. 남는 문구
      `해당 링크를 통한 구매 시 일정액의 수수료를 제공받습니다.`는 **줄이지 않는다** —
      대가성 고지라 문구가 곧 내용이다(§3.10).

      그 문구를 다 담으려면 293px가 필요한데 아이콘 **왼쪽**에 남는 자리는 238px뿐이라
      화면 밖으로 나간다(실측 좌 -47). 그래서 기준을 아이콘 왼쪽이 아니라 **그 줄
      오른쪽 끝**으로 옮긴다. 말풍선이 "제휴 링크 ⓘ" 위에 겹치지만, 열려 있는 동안
      가려지는 것은 그 글자뿐이고 **가격과 버튼은 그대로 보인다.**

      꼬리는 뗀다. 가리키려는 아이콘을 말풍선 자신이 덮고 있어서, 어디를 향해도
      어긋나 보인다. 둥근 모서리와 브랜드 색만으로 말풍선임은 충분히 읽힌다.
    */
    /*
      좁은 화면에서는 `.mini-tip__lead`가 빠져 문구가 짧아진다. 그런데 폭은 넓은
      화면 값(360px)을 그대로 물려받아 **왼쪽에 빈 자리가 크게 남았다**(2026-08-04 지적).
      `max-content`로 문구만큼만 차지하게 하고, 넘칠 때만 `max-width`가 접는다.
    */
    .affiliate-disclosure .mini-tip__panel {
      right: 0;
      width: max-content;
      max-width: calc(100vw - 60px);
      padding: 8px 12px;
      font-size: .74rem;
      border-radius: 10px;
    }

    .affiliate-disclosure .mini-tip__panel::after {
      display: none;
    }
  }

  body.ios-guide-open {
    overflow: hidden;
  }
  .ios-guide-overlay[hidden] {
    display: none !important;
  }
  .ios-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px 14px;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(6px);
  }
  .ios-guide-sheet {
    position: relative;
    width: min(100%, 460px);
    max-height: min(86vh, 760px);
    overflow-y: auto;
    border-radius: 24px;
    border: 1px solid rgba(234, 137, 166, 0.2);
    background: linear-gradient(180deg, #fffefe 0%, #fff6f9 100%);
    box-shadow: 0 28px 56px rgba(15, 23, 42, 0.2);
    padding: 20px 18px 18px;
  }
  .ios-guide-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .ios-guide-header {
    padding-right: 44px;
  }
  .ios-guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(234, 137, 166, 0.12);
    color: #c84f79;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  .ios-guide-title {
    margin: 12px 0 8px;
    font-size: 1.18rem;
    line-height: 1.4;
    color: #0f172a;
    word-break: keep-all;
  }
  .ios-guide-intro {
    margin: 0;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .ios-guide-steps {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
  }
  .ios-guide-step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid #f2d7df;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(234, 137, 166, 0.08);
  }
  .ios-guide-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ea89a6, #d9688d);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(217, 104, 141, 0.24);
  }
  .ios-guide-step__content {
    min-width: 0;
  }
  .ios-guide-step__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .ios-guide-step__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff7fa, #ffe7ee);
    border: 1px solid rgba(234, 137, 166, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  .ios-guide-step__icon svg {
    width: 24px;
    height: 24px;
    stroke: #d9688d;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ios-guide-step__label {
    margin: 0;
    color: #0f172a;
    font-size: 0.97rem;
    font-weight: 800;
    line-height: 1.35;
    word-break: keep-all;
  }
  .ios-guide-step__text {
    margin: 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.65;
    word-break: keep-all;
  }
  .ios-guide-action-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 8px;
  }
  .ios-guide-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff7fa;
    border: 1px solid rgba(234, 137, 166, 0.2);
    color: #c84f79;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
  }
  .ios-guide-action-pill svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ios-guide-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff0f4;
    color: #7d6b72;
    font-size: 0.84rem;
    line-height: 1.6;
  }
  .ios-guide-confirm {
    margin: 16px 0 0;
    width: 100%;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #ea89a6, #d9688d);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 14px 26px rgba(217, 104, 141, 0.24);
  }
  @media (max-width: 520px) {
    .alarm-btn {
      font-size: .78rem;
      padding: 0 8px;
      gap: 4px;
    }
    .alarm-btn::before {
      width: 16px;
      height: 16px;
      flex-basis: 16px;
      background-size: 16px 16px;
    }
    .ios-guide-overlay {
      padding: 12px 10px;
    }
    .ios-guide-sheet {
      border-radius: 22px;
      padding: 18px 14px 14px;
    }
    .ios-guide-step {
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 10px;
      padding: 12px;
    }
    .ios-guide-step__number {
      width: 28px;
      height: 28px;
      font-size: 0.84rem;
    }
    .ios-guide-step__top {
      gap: 8px;
    }
    .ios-guide-step__icon {
      width: 38px;
      height: 38px;
      flex-basis: 38px;
    }
    .ios-guide-step__icon svg {
      width: 22px;
      height: 22px;
    }
  }

  .chart-card {
    margin-top: .75rem;
    border: 1px solid #e8edf7;
    border-radius: 12px;
    background: #fff;
    padding: .75rem;
    min-width: 0;
  }

  .chart-meta {
    margin-top: .55rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: .4rem;
    font-size: clamp(.73rem, 1.5vw, .79rem);
  }

  .detail-insights {
    margin-top: .75rem;
  }

  .detail-insights__header {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    margin: 0 0 .85rem;
  }

  .detail-insights__tabs {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding-bottom: .15rem;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .detail-insights__tabs::-webkit-scrollbar {
    display: none;
  }

  .detail-insights__tab {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: .68rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
  }

  .detail-insights__tab.is-active {
    border-color: rgba(217, 104, 141, 0.28);
    background: linear-gradient(135deg, #fff5f8, #ffe8ef);
    color: var(--brand-strong);
    box-shadow: 0 8px 18px rgba(233, 122, 154, 0.12);
  }

  .detail-insights__tab--share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 46px;
    padding: .68rem .82rem;
    cursor: pointer;
  }

  .detail-insights__tab-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 18px;
  }

  .detail-insights__tab-icon path,
  .detail-insights__tab-icon circle {
    stroke: currentColor;
  }

  .detail-insights__panel[hidden] {
    display: none !important;
  }

  .price-compare-message {
    margin: 0 0 .7rem;
    color: #64748b;
    font-size: .84rem;
    line-height: 1.5;
  }

  .price-compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .price-compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
  }

  .price-compare-table th,
  .price-compare-table td {
    padding: .78rem .45rem;
    border-top: 1px solid #e8edf7;
    text-align: left;
    vertical-align: top;
    font-size: clamp(.78rem, 1.6vw, .88rem);
  }

  .price-compare-table thead th {
    border-top: 0;
    color: #64748b;
    font-weight: 700;
    background: #f8fafc;
  }

  .price-compare-table tbody tr:first-child td {
    border-top-color: #dbe4ff;
  }

  .price-compare-table__row--dealbom td {
    background: #fff7fa;
  }

  .price-compare-table__row--recommended td {
    background: #fff1f6;
  }

  .price-compare-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: .14rem .4rem;
    border-radius: 999px;
    background: #fce7f3;
    color: #be185d;
    font-size: .66rem;
    font-weight: 800;
    /* 판매처 칸이 좁아도 배지는 줄이지 않는다(모바일에서 글자가 잘려 보였다). */
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .price-compare-badge__icon {
    display: block;
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    fill: currentColor;
  }

  .price-compare-recommendation {
    margin: .8rem 0 0;
    padding: .8rem .9rem;
    border: 1px solid #fbcfe8;
    border-radius: .8rem;
    background: #fff7fa;
    color: #334155;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.5;
  }

  .price-compare-table__mall,
  .price-compare-table__price,
  .price-compare-table__note {
    white-space: nowrap;
  }

  .price-compare-table__mall {
    font-weight: 700;
    color: #0f172a;
  }

  .price-compare-table__mall-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .price-compare-table__title {
    min-width: 220px;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .price-compare-table__price {
    font-weight: 800;
    color: #0f172a;
  }

  .price-compare-table__note {
    color: #64748b;
  }

  .price-compare-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--brand-strong);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: rgba(217, 104, 141, 0.28);
    text-underline-offset: 2px;
  }

  .price-compare-link:hover,
  .price-compare-link:focus-visible {
    color: #b04371;
    text-decoration-color: rgba(176, 67, 113, 0.48);
  }

  .price-compare-link__icon {
    flex: 0 0 auto;
    font-size: .78em;
    line-height: 1;
    opacity: .72;
  }

  .chip {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: .35rem .45rem;
    background: #f8fafc;
  }

  .chip strong { display: block; color: #0f172a; }

  .chip-label {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-wrap: wrap;
  }

  .chip-label-low {
    color: inherit;
    font-weight: inherit;
  }

  .chip-value-low {
    color: #1d4ed8;
  }

  .chip-date {
    display: inline;
    color: inherit;
    font-size: .72rem;
    letter-spacing: -.01em;
  }

  .chip.positive {
    border-color: #bfdbfe;
    background: #eff6ff;
  }

  .chip.negative {
    border-color: #fecaca;
    background: #fff1f2;
  }

  .chart-wrap {
    position: relative;
    width: 100%;
    height: clamp(168px, 34vw, 190px);
  }

  /* 그래프 도구(Chart.js)를 받는 동안·못 받았을 때(2026-11-07 — detail.js ensureChartJs). 자리는 그대로 두고 글자만 띄운다. */
  .chart-wrap.is-loading::after,
  .chart-wrap.is-load-failed::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(90deg, #f8fafc 25%, #f1f5f9 50%, #f8fafc 75%);
    background-size: 200% 100%;
    color: #94a3b8;
    font-size: .82rem;
    font-weight: 600;
  }

  .chart-wrap.is-loading::after {
    content: "가격 흐름을 불러오는 중…";
    animation: chart-wrap-shimmer 1.2s ease-in-out infinite;
  }

  .chart-wrap.is-load-failed::after {
    content: "그래프를 불러오지 못했어요. 새로고침해 주세요.";
  }

  @keyframes chart-wrap-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .chart-wrap.is-loading::after { animation: none; }
  }

  .price-history-pending {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .72rem;
    align-items: center;
    margin-top: .25rem;
    padding: .86rem .9rem;
    border-radius: 12px;
    border: 1px solid #e8edf7;
    background: linear-gradient(135deg, #f8fbff, #fff7fa);
  }

  .price-history-pending[hidden] {
    display: none !important;
  }

  .price-history-pending__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-strong);
    border: 1px solid rgba(217, 104, 141, 0.24);
    box-shadow: 0 8px 18px rgba(217, 104, 141, 0.12);
  }

  .price-history-pending__icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
  }

  .price-history-pending__title {
    margin: 0;
    color: #0f172a;
    font-size: clamp(.9rem, 1.9vw, .96rem);
    font-weight: 900;
    line-height: 1.35;
  }

  .price-history-pending__text {
    display: block;
    margin: .2rem 0 0;
    color: #64748b;
    font-size: clamp(.79rem, 1.55vw, .84rem);
    line-height: 1.5;
    word-break: keep-all;
  }

  .cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: .75rem 0 0 auto;
    padding: .72rem 1.2rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #111827, #000);
    font-weight: 700;
    font-size: clamp(.84rem, 1.8vw, .92rem);
    max-width: 100%;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
  }

  .cta-link:hover {
    background: linear-gradient(135deg, #1f2937, #111827);
  }

  .favorite-btn,
  .purchase-btn {
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid #dbe4ff;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  }

  .favorite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 108px;
    padding: 0 16px;
    margin: 0;
    background: #fff;
    color: #475569;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    cursor: pointer;
  }

  .favorite-btn:hover {
    border-color: rgba(217, 104, 141, 0.4);
    color: var(--brand-strong);
    transform: translateY(-1px);
  }

  .favorite-btn.is-active {
    border-color: rgba(217, 104, 141, 0.42);
    background: rgba(255, 224, 232, 0.7);
    color: var(--brand-strong);
  }

  .favorite-btn.is-loading {
    opacity: .72;
    pointer-events: none;
  }

  .favorite-btn__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .favorite-btn__icon path {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.9;
    transition: fill .18s ease, transform .18s ease;
  }

  .favorite-btn.is-active .favorite-btn__icon path {
    fill: currentColor;
    transform: scale(1.04);
  }

  .favorite-btn__label {
    white-space: nowrap;
  }

  .purchase-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 0 18px;
    /* 인라인 구매 버튼과 같은 색이어야 같은 행동으로 읽힌다.
       그라데이션을 뺀 이유는 밝은 쪽 끝(`--brand`)에서 흰 글씨 대비가
       2.4:1까지 떨어지기 때문이다. */
    background: var(--brand-deep, #c04a72);
    color: #fff;
    white-space: nowrap;
    word-break: keep-all;
    box-shadow: 0 12px 24px rgba(192, 74, 114, 0.24);
  }

  .purchase-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(217, 104, 141, 0.28);
  }

  .purchase-btn.is-disabled,
  .purchase-btn[aria-disabled="true"] {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #94a3b8;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
    transform: none;
  }

  .mobile-purchase-bar[hidden] {
    display: none !important;
  }

  .mobile-purchase-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    /*
      아래 여백은 **`env()`만 믿으면 안 된다.** `env(safe-area-inset-bottom)`은
      viewport 메타에 `viewport-fit=cover`가 있어야 실제 값을 내는데, 이 사이트는
      그것을 쓰지 않아 **항상 0**이다(2026-08-06 실측: 계산된 padding-bottom 12px).
      그래서 안드로이드 제스처 네비게이션 바가 그 12px을 덮어 버튼 아래가 잘려 보였다.

      `max()`로 최소 20px을 보장한다. `viewport-fit=cover`를 나중에 켜면 그때는
      `12 + inset`이 더 커져 자동으로 그쪽이 이긴다 — 지금 값을 지워도 되지 않는다.
    */
    padding: 10px 14px max(18px, calc(10px + env(safe-area-inset-bottom, 0px)));
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid rgba(226, 232, 240, 0.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08);
  }

  /* 고정바 위 스탬프 띠(2026-10-26 C안 — 2026-10-25의 한 줄 글자를 세 단계 그림으로). 높이 약 79px, 바 전체 약 164px(390px 실측). */
  .mobile-purchase-bar__stamp.stamp-strip { width: min(100%, 720px); margin: 0 auto 8px; }

  .mobile-purchase-bar__inner {
    width: min(100%, 720px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(92px, 108px) minmax(0, 1fr);
    gap: 10px;
  }

  /* 화면 아래를 차지하는 띠라 낮을수록 좋다. 56px는 상품 하나를 보는 화면에서
     너무 컸다(2026-08-06 지적) — 48px로 낮추고, 찜하기도 아이콘·라벨을 **가로로**
     놓아 세로를 더 먹지 않게 한다. 상세의 보조 액션 줄과 같은 방식이다(§3.24). */
  .mobile-purchase-bar .favorite-btn,
  .mobile-purchase-bar .purchase-btn {
    min-height: 48px;
    height: 48px;
  }

  .mobile-purchase-bar .favorite-btn {
    min-width: 0;
    padding: 0 10px;
    flex-direction: row;
    gap: 6px;
  }

  .mobile-purchase-bar .favorite-btn__label {
    font-size: .8rem;
  }

  /* 1024px 이하에서는 하단 고정바가 뜬다. 데스크탑에서도 창을 줄이면 이 폭으로
     내려오므로, 넓은 화면 전용이라고 생각하면 안 된다.

     **좁은 화면에서 구매 버튼은 고정바 하나뿐이다.** 본문에도 버튼을 두면 같은
     행동이 둘로 보이고, 스크롤 위치에 따라 있다 없다 하는 것보다 **늘 같은 자리에
     있는 편이 안정적이다**(2026-08-04). 넓은 화면은 고정바가 없으므로 본문 버튼을
     그대로 쓴다. */
  @media (max-width: 1024px) {
    /*
      고정바에 가려지지 않을 만큼 본문 아래를 비운다.

      **`env()`에 폴백을 반드시 준다.** `env(safe-area-inset-bottom)`을 지원하지 않는
      브라우저에서는 그 `calc()`가 통째로 무효가 되고, `max()`도 함께 무효가 되어
      **이 선언이 무시된다** — 그러면 `.detail-card`의 기본 padding(16px)만 남아
      본문 마지막 줄이 고정바 뒤로 들어간다(2026-08-06 실측).
    */
    /* 클래스를 두 번 적어 특이성을 올린다. base.html의 `.card { padding: 16px }`가
       이 규칙보다 **뒤에 로드**돼서, 한 번만 적으면 그쪽이 이긴다(실측: 16px 적용).
       `padding` 단축 속성이라 `padding-bottom`까지 통째로 덮는다. */
    .detail-card--with-mobile-bar.detail-card--with-mobile-bar {
      padding-bottom: max(104px, calc(92px + env(safe-area-inset-bottom, 0px)));
    }

    .mobile-purchase-bar {
      display: block;
    }

    .deal-buy-btn {
      display: none;
    }

    /* 제휴 고지는 구매 버튼과 함께 사라지면 안 된다 — §3.10.
       버튼이 빠진 자리에서 최종가 바로 아래에 붙는다. */
    .deal-affiliate-note {
      margin-top: 8px;
    }
  }

  @media (min-width: 1025px) {
    .mobile-purchase-bar {
      display: none !important;
    }
  }

  /* 보조 액션 넷을 한 줄로 펴는 구간.
     기준을 1200px로 잡은 것은 **"카카오 알림받기"가 잘리지 않는 최소 폭**에서 왔다.
     900px에서 4분할을 시도했더니 칸이 111px이 되어 라벨이 잘렸다(2026-08-04 실측).
     1200px면 결정 블록이 640px를 다 쓰고 칸당 약 154px이 나온다.
     그보다 좁으면 2+2 두 줄이 낫다 — 줄 수가 늘어나는 것보다 글자가 잘리는 쪽이 나쁘다. */
  @media (min-width: 1200px) {
    .deal-actions {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* 안내 문구는 버튼 칸이 아니라 줄 전체를 쓴다. */
    .deal-actions .alarm-help {
      grid-column: 1 / -1;
    }

    /* 한 줄에 넷을 놓으면 칸이 좁아진다. 알림 버튼은 라벨이 길어 여백을 줄인다. */
    .deal-actions .alarm-btn {
      font-size: .78rem;
      padding: 0 8px;
      gap: 4px;
    }
  }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .42rem .68rem;
    border-radius: 999px;
    border: 1px solid #dbe4ff;
    background: #f8faff;
    color: #1d4ed8;
    font-size: clamp(.76rem, 1.5vw, .81rem);
    font-weight: 700;
    max-width: 100%;
  }

  .icon-btn-danger {
    border-color: #fecaca;
    background: #fff5f5;
    color: #b91c1c;
  }

  .action-row {
    display: flex;
    gap: .45rem;
    margin-top: .8rem;
    flex-wrap: wrap;
    align-items: center;
  }

  /* base.html이 `button`에 전역으로 `width:100%` + `margin:4px 0 10px`를 건다(CLAUDE.md §7).
     .action-row는 flex라 끄지 않으면 버튼 하나가 폭을 전부 요구해 줄이 깨진다.
     기존 글수정·글삭제는 <a>라서 이 문제가 없었다 — button을 넣는 순간 필요해진다. */
  .action-row button.icon-btn {
    width: auto;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
  }

  .action-row button.icon-btn[disabled] {
    opacity: .55;
    cursor: progress;
  }

  .price-compare-refresh-status {
    color: var(--muted, #7d6b72);
    font-size: .78rem;
    font-weight: 600;
  }

  .price-compare-refresh-status[data-tone="error"] {
    color: #b91c1c;
  }

  .price-compare-refresh-status[data-tone="done"] {
    color: #15803d;
  }

  .comment-wrap {
    margin-top: 1.25rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
  }
  .comment-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
  }
  .comment-title {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
  }
  .comment-title span {
    color: var(--brand-strong);
  }
  /*
    입력창은 "아바타 + 한 줄 입력 + 등록" 한 줄이다.
    예전에는 테두리 친 카드 안에 74px 텍스트영역과 전체 폭 핑크 버튼이 들어가
    댓글 목록보다 입력창이 더 무거웠다. 목록이 주인공이고 입력은 거들 뿐이다.
  */
  .comment-form {
    border: 0;
    background: transparent;
    padding: 0;
  }
  .comment-form__row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .comment-form__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    flex: 0 0 auto;
  }
  /*
    base.html이 `input, select, textarea, button`에 width:100% + margin을 걸어 둔다.
    한 줄 배치에서는 그 둘을 반드시 꺼야 한다 — 안 끄면 버튼이 폭을 전부 요구하고
    입력창이 0으로 눌려 동그라미만 남는다(2026-07-31에 실제로 그렇게 깨졌다).
  */
  .comment-form textarea {
    flex: 1;
    min-width: 0;
    width: auto;
    margin: 0;
    height: 40px;
    /* 한 줄 높이를 유지하고 길어지면 안에서 스크롤한다. 캡슐 모양이 깨지지 않는다. */
    resize: none;
    overflow-y: auto;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    /* 40px 높이 - 위아래 패딩 18 - 테두리 2 = 20px. 한 줄(14×1.4=19.6px)이 잘리지 않는 최소값이다. */
    padding: 9px 14px;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
  }
  .comment-form textarea:focus {
    background: #fff;
    border-color: #cbd5e1;
  }
  .comment-submit {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    border-color: var(--brand-strong);
    background: var(--brand-strong);
    border-radius: 999px;
    height: 40px;
    padding: 0 1.05rem;
    font-size: 13px;
    font-weight: 800;
  }
  .comment-form__hint {
    /* 36px = 아바타 28px + 간격 8px. 입력창 왼쪽 선에 맞춘다. */
    margin: 6px 0 0 36px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.4;
  }
  .comment-list {
    margin-top: 16px;
  }
  .comment-list + .comment-form {
    margin-top: 20px;
  }
  .comment-item {
    display: flex;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
  }
  .comment-item:first-child {
    border-top: 0;
  }
  .comment-item:last-child {
    border-bottom: 0;
  }
  .comment-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .comment-avatar-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: block;
    /* ::before/::after 오프셋이 24px 상자 기준이라 크기 대신 배율로 줄인다. */
    transform: scale(.68);
  }
  .comment-avatar-icon::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #94a3b8;
  }
  .comment-avatar-icon::after {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 3px;
    width: 16px;
    height: 9px;
    border-radius: 999px 999px 5px 5px;
    background: #94a3b8;
  }
  .comment-content {
    flex: 1;
    min-width: 0;
  }
  .comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .comment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  .comment-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
  }
  /*
    댓글 글씨는 본문보다 **작아야** 한다. 예전에는 작성자 20px · 본문 17px이라
    상세 본문(15~16px)보다 커서 댓글이 페이지에서 제일 큰 글씨였다.
    이름 > 시간, 이름 ≈ 본문 굵기 차이로 위계를 만들고 크기는 눌러 둔다.
  */
  .comment-author {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
  }
  .comment-time {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.25;
  }
  .comment-body {
    margin-top: 5px;
    font-size: 14px;
    color: #334155;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
  }
  /* 남이 쓴 링크다. 브랜드 분홍(우리 행동)이 아니라 평범한 파랑으로 둔다 —
     같은 색이면 딜봄이 보증하는 링크처럼 읽히고, 구매 버튼과도 경합한다(§3.24). */
  .comment-body .comment-link {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.35);
    text-underline-offset: 2px;
    /* 긴 주소가 카드를 넘지 않게 한다. `word-break`만으로는 한 낱말인 URL이 안 끊긴다. */
    overflow-wrap: anywhere;
  }
  .comment-body .comment-link:hover,
  .comment-body .comment-link:focus-visible {
    color: #1d4ed8;
    text-decoration-color: rgba(29, 78, 216, 0.6);
  }
  /* 운영자 응대함·회원 목록에서 `#comment-<id>`로 들어오면 그 댓글이 어디인지 보여야 한다.
     헤더가 위를 가리므로 scroll-margin으로 띄우고, 들어온 댓글에 브랜드색 띠를 붙인다. */
  .comment-item {
    scroll-margin-top: 84px;
  }
  /* 클래스를 두 번 적어 특이성을 올린다 — 뒤의 `.comment-item` 배경 규칙이 이긴다(§7의 그 함정). */
  .comment-item.comment-item:target {
    background: #fff5f8;
    box-shadow: inset 3px 0 0 #c04a72;
  }
  .comment-item--root.js-reply-target,
  .comment-item--reply.js-reply-target {
    cursor: pointer;
    transition: background-color .15s ease;
  }
  .comment-item--root.js-reply-target:hover,
  .comment-item--reply.js-reply-target:hover {
    background: #fafafa;
  }
  .comment-reply-form-wrap {
    margin-top: 14px;
  }
  .comment-reply-form {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    cursor: default;
  }
  .comment-reply-form-title {
    font-size: 12.5px;
    color: #64748b;
  }
  .comment-reply-form textarea {
    width: 100%;
    /* grid gap이 이미 간격을 만든다. base.html의 margin까지 더해지면 두 배가 된다. */
    margin: 0;
    min-height: 60px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    background: #fff;
  }
  .comment-reply-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
  }
  .comment-reply-submit,
  .comment-reply-cancel {
    /* 위와 같은 이유로 base.html의 width:100%·margin을 끈다. */
    width: auto;
    margin: 0;
    min-height: 30px;
    border-radius: 999px;
    padding: 0 .85rem;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
  }
  .comment-reply-submit {
    border: 1px solid var(--brand-strong);
    background: var(--brand-strong);
    color: #fff;
  }
  .comment-reply-cancel {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
  }
  .comment-reply-login {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    cursor: default;
  }
  .comment-reply-login__text {
    margin: 0;
    flex: 1;
    min-width: 0;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.4;
  }
  .comment-reply-login__button {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fee500;
    color: #3c1e1e;
    border: 1px solid #f3d600;
    padding: 0 .8rem;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
  }
  .comment-replies {
    margin-top: 16px;
  }
  .comment-item--reply {
    margin-left: 24px;
    padding: 12px 0 0;
    border-bottom: 0;
    gap: 8px;
  }
  .comment-reply-marker {
    flex: 0 0 14px;
    color: #9ca3af;
    font-size: 14px;
    line-height: 30px;
  }
  .comment-item--reply .comment-avatar {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }
  .comment-item--reply .comment-avatar-icon {
    transform: scale(.58);
  }
  .comment-item--reply .comment-author {
    font-size: 13px;
  }
  .comment-item--reply .comment-time {
    font-size: 11.5px;
  }
  .comment-item--reply .comment-body {
    margin-top: 4px;
    font-size: 13.5px;
  }
  .comment-item.is-deleted .comment-body {
    color: #94a3b8;
    font-style: italic;
  }
  .comment-delete-form {
    margin: 0;
    flex: 0 0 auto;
  }
  .comment-delete-button {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
    font-size: 18px;
    line-height: 1;
  }
  .comment-delete-button:hover {
    color: #ef4444;
    background: #f8fafc;
  }
  .comment-delete-button:focus-visible {
    outline: 2px solid #cbd5e1;
    outline-offset: 2px;
  }
  .comment-empty {
    margin: .85rem 0 0;
    color: #64748b;
  }

  @media (min-width: 700px) {
    .item-head {
      grid-template-columns: minmax(0, clamp(148px, 26vw, 180px)) minmax(0, 1fr);
      align-items: start;
    }

    .item-head--with-identity {
      grid-template-areas:
        "image identity"
        "image price";
      grid-template-rows: auto 1fr;
      /* 이미지 칸을 넓힌다. 180px 상한은 오른쪽에 알리의 할인 계산 테이블(정가·코인·
         쿠폰·판매자·카드 5행)이 있던 시절 값이다. 국내 딜의 오른쪽은 가격 한 줄과
         버튼뿐이라, 그 값을 그대로 두면 작은 사진 옆에 텅 빈 넓은 상자가 된다
         (1280 뷰포트 실측: 이미지 180px / 오른쪽 921px).

         360px에서 460px로 한 번 더 키운 이유는 **가운데 빈 띠** 때문이다. 결정
         블록이 640px 상한이라 741px 칸에서 101px이 남아 중앙이 뚫려 보였다.
         1280px 기준 460 + 12 + 641이면 결정 블록이 칸을 꽉 채운다. */
      grid-template-columns: minmax(0, clamp(280px, 38vw, 460px)) minmax(0, 1fr);
    }

    .item-head--with-identity .item-image {
      max-height: 460px;
      width: 100%;
    }

    .deal-identity {
      gap: 16px;
    }

    /*
      **오른쪽 상자를 이미지 높이에 맞추지 않는다.** `align-self: stretch`로 늘렸더니
      내용이 끝난 뒤 아래가 통째로 비어 더 횡해 보였다(2026-08-04 지적). 상자는
      내용만큼만 — "가격하락 시…" 문구에서 끝난다. 이미지가 더 길면 그냥 더 긴 채로 둔다.

      배지·출처도 아래로 내리지 않는다. **좁은 화면과 똑같이 가격 왼편**이다 —
      가격이 오른쪽에 크게 있어 왼쪽이 비는데, 그 자리가 이 정보의 자리다.
      그래서 `.deal-price-row`를 여기서 풀지 않는다(폭과 무관하게 같은 배치).
    */
    .item-head--with-identity > .price-hero {
      align-self: start;
    }

    /* 안내 문구도 오른쪽 축에 맞춘다. */
    .deal-alarm-panel .alarm-help {
      text-align: right;
    }

    /* 오른쪽 칸은 넓은 화면에서 900px를 넘는다. 버튼을 그 폭까지 늘리면 누를 곳을
       눈으로 찾는 데 시간이 걸린다. 결정 블록을 한 덩어리로 묶되 **오른쪽에 붙인다**
       — 왼쪽 정렬로 두면 오른쪽에 빈 공간만 남아 균형이 깨진다(2026-08-04). */
    .final-price-wrap,
    .deal-buy-btn,
    .deal-affiliate-note,
    .deal-actions {
      max-width: 640px;
      margin-left: auto;
    }

    .item-image {
      max-height: 180px;
    }

    .price-grid {
      grid-template-columns: 1fr 1fr;
    }

    .price-row.total {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 699px) {
    .item-image {
      max-height: none;
    }
  }

  @media (max-width: 768px) {
    .detail-card {
      overflow-x: hidden;
    }

    .item-index-wrap,
    .item-index-list,
    .item-index-row,
    .item-section,
    .item-head,
    .price-hero,
    .price-grid,
    .price-row,
    .chart-card,
    .detail-insights,
    .detail-insights__header,
    .detail-insights__tabs,
    .detail-insights__panel,
    .alarm-actions,
    .alarm-actions__buttons,
    .coupon-wrap,
    .deal-identity,
    .deal-quick-actions,
    .comment-wrap,
    .comment-form,
    .comment-list,
    .origin-meta {
      max-width: 100%;
      min-width: 0;
    }

    /*
      좁은 화면이라고 댓글만 키우지 않는다. 예전에는 여기서 작성자 18px·본문 16px로
      되돌려 놓아, 기본값을 줄여도 모바일에서는 그대로 커 보였다.
      크기는 기본값을 그대로 쓰고 여백만 좁힌다.
    */
    .comment-item {
      gap: 10px;
      padding: 13px 0;
    }

    .comment-avatar {
      flex-basis: 30px;
      width: 30px;
      height: 30px;
    }

    .comment-avatar-icon {
      transform: scale(.64);
    }

    .comment-actions {
      gap: 6px;
    }

    .comment-item--reply {
      margin-left: 16px;
      gap: 8px;
      padding-top: 12px;
    }

    .comment-reply-marker {
      flex-basis: 12px;
      font-size: 13px;
      line-height: 28px;
    }

    .comment-item--reply .comment-avatar {
      flex-basis: 26px;
      width: 26px;
      height: 26px;
    }

    .comment-item--reply .comment-avatar-icon {
      transform: scale(.54);
    }

    .item-index-row {
      grid-template-columns: 48px minmax(0, 1fr) auto;
      align-items: center;
    }

    .item-index-row .icon-btn {
      grid-column: auto;
      width: auto;
      max-width: 100%;
      white-space: nowrap;
    }

    .chart-meta {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-insights__header {
      flex-wrap: nowrap;
      align-items: stretch;
    }

    .detail-insights__tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .45rem;
      overflow-x: visible;
    }

    .detail-insights__tab {
      width: 100%;
      min-height: 38px;
      padding: .62rem .5rem;
      font-size: .84rem;
      white-space: normal;
    }

    .detail-insights__tab--share {
      width: 42px;
      min-width: 42px;
      flex-basis: 42px;
      padding: 0;
    }

    .price-compare-table-wrap {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    .price-compare-table {
      min-width: 0;
      width: 100%;
      table-layout: fixed;
    }

    .price-compare-table thead th:nth-child(2),
    .price-compare-table__title {
      display: none;
    }

    .price-compare-table th,
    .price-compare-table td {
      padding: .72rem .4rem;
      font-size: .77rem;
    }

    .price-compare-table__mall,
    .price-compare-table__price {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .price-compare-table__mall-content,
    .price-compare-link {
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .price-compare-table__mall {
      width: 30%;
    }

    /* 좁은 화면에서는 배지 글자를 화면에서만 감추고 아이콘만 남긴다.
       글자를 두면 판매처명을 밀어내 잘리고, 줄바꿈하면 표가 길어진다.
       display:none 이 아니라 클립으로 감춰 스크린리더는 그대로 읽는다. */
    .price-compare-badge__text {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    .price-compare-badge {
      padding: 0;
      background: none;
    }

    .price-compare-table__price {
      width: 22%;
    }

    .price-compare-table__note {
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
      width: 48%;
    }

    .price-compare-link {
      min-height: 28px;
      font-size: .8rem;
    }

    .origin-meta__icon,
    .price-compare-table__mall-icon {
      width: 11px;
      height: 11px;
      flex-basis: 11px;
    }

    /* 국내 딜(`--bare`)은 제외한다 — 가격과 배송 배지를 오른쪽에 맞춰 쌓으므로
       여기서 왼쪽으로 되돌리면 축이 어긋난다(2026-08-04 실측: 가격 우 312 / 배지 우 267). */
    .price-row,
    .final-price-wrap:not(.final-price-wrap--bare) {
      align-items: flex-start;
    }

    .price-row .val,
    .final-price-value,
    .promo-badge,
    .item-section > h3 > a,
    .detail-title,
    .comment-content,
    .comment-body {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .item-section details summary,
    .item-section details > div > div,
    .chart-card > div[style*="display:grid"] > a[style*="grid-template-columns"] {
      min-width: 0;
    }

    .item-section details summary,
    .item-section details > div > div {
      display: flex !important;
      flex-wrap: wrap;
      gap: .4rem;
    }

    .chart-card > div[style*="display:grid"] > a[style*="grid-template-columns"] {
      grid-template-columns: 56px minmax(0, 1fr) !important;
      gap: 10px !important;
    }

    .chart-card > div[style*="display:grid"] > a[style*="grid-template-columns"] img,
    .chart-card > div[style*="display:grid"] > a[style*="grid-template-columns"] > div[style*="width:72px"] {
      width: 56px !important;
      height: 56px !important;
    }


  }

  @media (max-width: 480px) {
    .item-index-row {
      grid-template-columns: 48px minmax(0, 1fr);
    }

    .item-index-row .icon-btn {
      grid-column: 2;
      justify-self: start;
    }

    .alarm-actions--split,
    .alarm-actions--app-pair,
    .alarm-actions--with-app,
    .alarm-actions__buttons--split,
    .alarm-actions__buttons--app-pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* 기존 CSS */

    .coupon-toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(20px);
      background: rgba(17, 24, 39, 0.95);
      color: #fff;
      padding: 12px 16px;
      border-radius: 12px;
      font-size: 0.92rem;
      font-weight: 600;
      line-height: 1.35;
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,0.18);
      white-space: nowrap;
      max-width: calc(100vw - 32px);
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .coupon-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    
    /* 쿠폰 컨테이너: 가로 배치 유지 */
    .coupon-wrap {
        display: grid !important;
        grid-template-columns: repeat(var(--coupon-count, 1), minmax(0, 1fr));
        gap: clamp(6px, 1.6vw, 8px);
        margin-top: 10px;
        width: 100%;
        max-width: 100%;
        white-space: normal;
    }

    /* 쿠폰 버튼: 알림 버튼과 높이 및 폰트 크기 동기화 */
    .coupon-btn {
        /* 알림 버튼과 동일한 규격 적용 */
        padding: 8px 10px; 
        font-size: clamp(.79rem, 1.6vw, .85rem); 
        border-radius: 8px;
        min-height: 20px; /* 알림 버튼과 높이를 맞춤 */
        
        /* 눈에 띄는 색상 변경 (강력한 오렌지 그라데이션) */
        background: linear-gradient(135deg, #ff6b6b, #ff8e53); 
        border: 1px solid #fa5252;
        color: white !important; /* 글자를 흰색으로 하여 가독성 확보 */
        font-weight: 800;
        
        display: flex;
        flex-direction: row; /* 가로 배열로 변경하여 높이 절약 */
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
        transition: all 0.2s;
        font-family: 'Pretendard', sans-serif;
        width: 100%;
        min-width: 0;
    }

    .coupon-btn:active { transform: scale(0.95); filter: brightness(0.9); }

    .coupon-btn svg {
        flex: 0 0 auto;
    }

    /* 아이콘과 텍스트 상세 설정 */
    .coupon-label {
        font-size: 0.7rem;
        background: rgba(255, 255, 255, 0.2);
        padding: 2px 4px;
        border-radius: 4px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .coupon-code {
        min-width: 0;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }