/* 처음 방문한 이용자를 위한 안내와 독립 광고 영역 */
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 18px; background: var(--primary); color: var(--primary-ink); border-radius: 12px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.intro-detail { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.intro-detail p { margin: 0; }
.intro-detail a { color: var(--primary-label); font-weight: 650; text-decoration: none; white-space: nowrap; }
.intro-detail a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 혜택을 고르는 기준 · 자주 묻는 질문 */
.service-guide { margin: 16px 0 0; padding: 24px 16px 12px; background: var(--bg); }
.service-guide h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.service-guide > p { margin: 0 0 16px; font-size: 14px; color: var(--text-2); line-height: 1.6; }
.service-guide ul.criteria { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.service-guide ul.criteria li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; font-size: 14px; line-height: 1.5; }
.service-guide ul.criteria li::before { content: ""; grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b540b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center; }
.service-guide ul.criteria strong { font-weight: 700; }
.service-guide ul.criteria span { color: var(--text-2); font-size: 13px; }
.service-guide details { border-top: 1px solid var(--line); font-size: 14px; line-height: 1.65; }
.service-guide summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; font-weight: 650; list-style: none; }
.service-guide summary::-webkit-details-marker { display: none; }
.service-guide summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform .15s; }
.service-guide details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.service-guide details p { margin: 0 0 16px; color: var(--text-2); }
.service-guide a { color: var(--primary-label); font-weight: 600; text-underline-offset: 3px; }
.service-guide .guide-link { margin: 0; padding: 14px 0 6px; border-top: 1px solid var(--line); font-size: 14px; }

/* 직접 계약 광고: 목록 밖, '광고' 표시로 분리 */
.sponsor { margin: 16px 16px 0; padding: 18px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--bg); overflow-wrap: anywhere; }
.sponsor[hidden] { display: none; }
.sponsor-label { display: inline-block; color: var(--text-2); font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); margin-bottom: 10px; }
.sponsor h2 { margin: 0 0 6px; font-size: 17px; }
.sponsor p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.sponsor a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-label); font-size: 13.5px; font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 680px) { .service-guide { padding: 24px 24px 12px; } .sponsor { margin: 16px 0 0; } }

/* 홈과 탐색 */
:root {
  --panel-shadow: 0 2px 4px rgb(35 22 57 / .04), 0 12px 32px -20px rgb(45 27 74 / .32);
  --hero-fill: color-mix(in srgb, var(--primary-soft) 67%, var(--bg));
  --ticket-shadow: drop-shadow(0 2px 2px rgb(31 18 57 / .075)) drop-shadow(0 7px 8px rgb(36 21 62 / .11));
}
body { background: linear-gradient(160deg, color-mix(in srgb, var(--primary-soft) 22%, var(--canvas)), var(--canvas) 680px); }
.bar { height: 62px; gap: 10px; }
.bar .logo { min-height: 44px; }
.me-pill { min-height: 40px; border: 1px solid var(--line); }
.view-nav { align-items: center; padding-block: 4px 8px; }
.view-nav button { min-height: 40px; padding: 0 14px; border-radius: 11px; }
.view-nav button[aria-pressed="true"] { color: var(--primary-ink); background: var(--primary); }
.view-nav button[aria-pressed="true"]::after { content: none; }
.view-nav button[aria-pressed="true"] #followingCount:not(:empty) { background: var(--primary-ink); color: var(--primary); }

/* 머리글 바나나 바둑판 (11/07 대표 요청: "배너 = 이 부분(로고·탭 머리글)", "정사각형 말고 직사각형 바둑판, 1:1.7 비율")
   칸 하나 = 가로 1.7 : 세로 1, 넓은 화면 25.5×15px · 좁은 화면 17×10px (20:37 "한 칸 한 칸 작게, 4분할 정도로"). 넓은 화면은 border-image 바깥 그림으로 화면 양끝까지 깔아 가로 스크롤을 만들지 않는다.
   노란 바탕 위 글자는 바나나 잉크색, 선택 탭은 잉크색 알약. 어두운 화면은 어두운 바나나 바둑판에 기존 색. */
:root {
  --hd-bricks: #ffe765 url("banana-bricks.svg"); --hd-ink: #211c10; --hd-muted: #5a4a12; --hd-glass: rgb(255 255 255 / .55);
  --hd-pill: rgb(255 255 255 / .76); --hd-pill-ink: #3d3315; --hd-pill-line: rgb(33 28 16 / .12); --hd-pill-set: #fff;
  --hd-on: #211c10; --hd-on-ink: var(--primary); --hd-line: rgb(33 28 16 / .12);
  --hd-symbol: drop-shadow(1.2px 0 0 #fff) drop-shadow(-1.2px 0 0 #fff) drop-shadow(0 1.2px 0 #fff) drop-shadow(0 -1.2px 0 #fff);
  --hd-tile: url("banana-bricks.svg");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hd-bricks: #2a2412 url("banana-bricks-dark.svg"); --hd-ink: var(--text); --hd-muted: var(--muted); --hd-glass: rgb(255 255 255 / .08);
    --hd-pill: rgb(255 255 255 / .07); --hd-pill-ink: var(--text-2); --hd-pill-line: rgb(255 255 255 / .1); --hd-pill-set: var(--primary-soft);
    --hd-on: var(--primary); --hd-on-ink: var(--primary-ink); --hd-line: var(--line); --hd-symbol: none; --hd-tile: url("banana-bricks-dark.svg");
  }
}
:root[data-theme="dark"] {
  --hd-bricks: #2a2412 url("banana-bricks-dark.svg"); --hd-ink: var(--text); --hd-muted: var(--muted); --hd-glass: rgb(255 255 255 / .08);
  --hd-pill: rgb(255 255 255 / .07); --hd-pill-ink: var(--text-2); --hd-pill-line: rgb(255 255 255 / .1); --hd-pill-set: var(--primary-soft);
  --hd-on: var(--primary); --hd-on-ink: var(--primary-ink); --hd-line: var(--line); --hd-symbol: none; --hd-tile: url("banana-bricks-dark.svg");
}
header.top { background: var(--hd-bricks) repeat center top / 204px 80px; }
header.top .brand-symbol { filter: var(--hd-symbol); }
header.top .icon-btn { color: var(--hd-ink); }
header.top .icon-btn:hover, header.top .icon-btn[aria-expanded="true"] { background: var(--hd-glass); }
header.top .me-pill { background: var(--hd-pill); border-color: var(--hd-pill-line); color: var(--hd-pill-ink); }
header.top .me-pill.set { background: var(--hd-pill-set); color: var(--primary-label); }
header.top .me-pill:hover, header.top .me-pill.set:hover { background: var(--hd-pill-set); color: var(--hd-ink); }
header.top .search input { background-color: var(--hd-pill); border-color: var(--hd-pill-line); }
header.top .search input:focus { background-color: var(--bg); border-color: var(--hd-on); }
header.top .view-nav button { color: var(--hd-muted); }
header.top .view-nav button:hover { color: var(--hd-ink); background: var(--hd-glass); }
header.top .view-nav button[aria-pressed="true"] { color: var(--hd-on-ink); background: var(--hd-on); }
header.top .view-nav button[aria-pressed="true"] #followingCount:not(:empty) { background: var(--hd-on-ink); color: var(--hd-on); }
header.top :focus-visible { outline-color: var(--hd-ink); }
.lead-block { background: transparent; padding: 0; }
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: 230px; padding: 26px clamp(22px,4vw,48px); border-radius: 22px;
  /* 바둑판은 머리글이 맡고(11/07), 소개 상자는 옅은 바나나색으로 조용히 */
  color: var(--hero-ink);
  background: linear-gradient(110deg, var(--hero-from), var(--primary-soft) 70%);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--bg));
  box-shadow: var(--panel-shadow);
}
:root { --hero-ink: #211c10; --hero-from: #fffdf2; --hero-detail: #453b1d; --hero-link: #413615; --hero-btn: #211c10; --hero-btn-ink: #fff; --hero-btn-hover: #40361b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hero-ink: var(--text); --hero-from: var(--surface); --hero-detail: var(--text-2); --hero-link: var(--text-2); --hero-btn: var(--primary); --hero-btn-ink: var(--primary-ink); --hero-btn-hover: var(--primary-press); }
}
:root[data-theme="dark"] { --hero-ink: var(--text); --hero-from: var(--surface); --hero-detail: var(--text-2); --hero-link: var(--text-2); --hero-btn: var(--primary); --hero-btn-ink: var(--primary-ink); --hero-btn-hover: var(--primary-press); }
.hero a:focus-visible { outline: 2px solid var(--hero-ink); }
.hero-copy { position: relative; z-index: 1; max-width: 38rem; }
.hero .intro { color: inherit; font-size: clamp(32px, 4.1vw, 48px); letter-spacing: -.06em; line-height: 1.12; margin: 0 0 10px; }
.hero .intro-detail { color: var(--hero-detail); font-size: 15px; }

.hero-links { display: flex; align-items: center; gap: 16px; margin-top: 17px; }
.hero-links .budget-jump { display: inline-flex; gap: 10px; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 12px; background: var(--hero-btn); color: var(--hero-btn-ink); font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 5px rgb(35 22 57 / .12); }
.hero-links .guide-shortcut { color: var(--hero-link); font-size: 13px; text-underline-offset: 3px; text-decoration: underline; }
#budget { scroll-margin-block-start: calc(var(--hh) + 12px); }
.hot, .grid, .brand-panel, .service-guide { box-shadow: var(--panel-shadow); }
.hot, .grid { margin-top: 14px; }
.hot { border-radius: 28px; background: linear-gradient(180deg, var(--bg) 10%, color-mix(in srgb, var(--bg) 83%, var(--canvas))); }
.hcard { border-color: color-mix(in srgb, var(--line-strong) 66%, var(--surface));
  box-shadow: 0 2px 3px -1px rgb(33 24 52 / .11), 0 8px 13px -7px rgb(33 24 52 / .23); }
.hcard:focus-visible, .hcard:focus-within { outline: 2px solid var(--primary-label); outline-offset: 1px; }
.hot .sec-h h2 { font-size: clamp(19px, 2.5vw, 24px); letter-spacing: -.045em; }
@media (min-width: 960px) {
  .hcard { flex-basis: calc((100% - 24px) / 3); max-width: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hcard { transition: transform .2s ease, box-shadow .2s ease; }
  .hcard:hover { transform: translateY(-2px); box-shadow: 0 3px 5px -2px rgb(33 24 52 / .14), 0 11px 17px -8px rgb(33 24 52 / .27); }
}
.hot .sec-h { align-items: center; }
.rail-controls { display: flex; gap: 4px; }
.rail-controls button { display: grid; place-items: center; width: 36px; height: 36px; font: 24px/1 sans-serif; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text); background: var(--bg); }
.rail-controls button:disabled { opacity: .38; cursor: default; }
.rail-controls button:enabled:hover { color: var(--primary-label); background: var(--primary-soft); }
.gi .ic { box-shadow: inset 0 1px rgb(255 255 255 / .28), inset 0 -2px rgb(38 25 57 / .09); }
.gi:has(.n.z) { opacity: .72; }
.card .ticket { box-shadow: inset 0 0 0 1px var(--line); }
.card .ticket::after { border-color: color-mix(in srgb, var(--muted) 42%, var(--line)); }
#list .empty { background: var(--surface); border-radius: 16px; }
#onlineDeals .od-heading, #brandPanel .brand-intro { border-left: 3px solid var(--primary); padding-left: 14px; }
@media (hover: hover) {
  .gi:hover .ic { transform: translateY(-2px); }
  .hero-links .budget-jump:hover { background: var(--hero-btn-hover); color: var(--hero-btn-ink); }
}
@media (min-width: 680px) {
  .bar { height: 68px; }
  /* 머리글 바둑판을 화면 양끝까지: border-image 바깥 그림(스크롤 영역에 들어가지 않음), 타일 306×120px = 칸 25.5×15px. 아래 경계선은 기존 그림자 */
  header.top { background: none; border-image: var(--hd-tile) 0 fill / 0 / 0 100vmax repeat; box-shadow: 0 1px 0 100vmax var(--hd-line); }
  .lead-block { padding: 0; margin-top: 18px; }
  .service-guide .criteria { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hero-links { gap: 20px; }
}
@media (max-width: 679px) {
  .shell { --gutter: 12px; }
  header.top { border-bottom: 1px solid var(--hd-line); }
  .bar { height: 54px; }
  .view-nav { padding: 2px var(--gutter) 8px; gap: 3px; border: 0; }
  .view-nav button { flex: 1 0 auto; font-size: clamp(12px,3.45vw,15px); padding: 0 4px; }
  .lead-block { margin: 12px var(--gutter) 0; }
  .hero { border-radius: 18px; min-height: 182px; padding: 20px 16px; }
  .hero-copy { width: 100%; }
  .hero .intro { font-size: clamp(27px,7.3vw,38px); margin-bottom: 10px; }

  .hero .intro-detail p { font-size: 13px; }
  .hero-links { gap: 12px; margin-top: 14px; }
  .hero-links .budget-jump { min-height: 40px; font-size: 13px; }
  .hot, .grid, .brand-panel, .service-guide { margin-inline: var(--gutter); border-radius: 22px; }
  .hot .sec-h { gap: 6px; padding: 15px 12px 10px; }
  .hot .sec-h small { display: none; }
  .hcard { flex-basis: 84%; }
  .rail { padding-inline: 12px; scroll-padding: 12px; }
  .gi .ic { width: 44px; height: 44px; border-radius: 14px; }
  .gi .ic svg { width: 30px; height: 30px; }
  .gi .n { left: calc(50% + 11px); }
  .hot + .grid { margin-top: 12px; }
  .budget .budget-btn { height: 40px; }
}
@media (max-width: 350px) {

  .hero-links { gap: 10px; }
}

/* 선택 표시는 클릭한 프레임에서 곧바로 바뀐다. */
.budget-btn { transition: none; }

/* 사진이 없는 카드도 실제 혜택 금액이나 브랜드를 먼저 읽을 수 있다. */
.hcard.noph .notice-placeholder {
  background: linear-gradient(135deg, var(--hero-fill), var(--surface-2));
  color: var(--primary-label);
}
.fallback-brand { font-size: 24px; letter-spacing: -.045em; }
.hcard.noph:has(.notice-placeholder) .hot-visual::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px;
  border-bottom: 1px dashed color-mix(in srgb, var(--primary) 22%, transparent);
}
.hcard.noph:has(.notice-placeholder):has(.lbl) .fallback-brand { visibility: hidden; }
.hcard.noph:has(.notice-placeholder) .hot-meta .lbl {
  position: absolute; inset: 0 0 auto; aspect-ratio: var(--hot-ratio); display: grid; place-items: center;
  font-size: 40px; line-height: 1; letter-spacing: -.05em; color: var(--primary-label);
}
.hcard.noph:has(.notice-placeholder) .hot-meta .lbl.money-label,
.hcard.noph:has(.notice-placeholder) .hot-meta .lbl.long-label { font-size: 26px; }
.hcard.noph:has(.notice-placeholder) .kind { margin-left: auto; }


/* 브랜드, 온라인 특가에서도 같은 구역 간격과 터치 영역을 사용한다. */
#onlineDeals .od-heading { margin-block: 6px 16px; padding-block: 4px; }
#onlineDeals .od-disclosure { background: var(--bg); border-color: var(--line); box-shadow: var(--panel-shadow); }
#onlineDeals .od-item-tabs .chip-btn { min-height: 42px; }
#onlineDeals .od-item-tabs .chip-btn:focus-visible { outline-offset: -3px; }
#brandPanel .brand-intro { margin-bottom: 14px; }
#brandPanel .brand-intro p { margin-bottom: 0; }
@media (hover: hover) {
  #brandPanel .brand-tile:hover { background: color-mix(in srgb, var(--primary-soft) 25%, var(--bg)); }
}
@media (min-width: 680px) {
  #onlineDeals { padding-inline: 4px; }
  #onlineDeals .od-heading { margin-top: 12px; }
  #onlineDeals .od-picks-list, #onlineDeals .od-products-list { grid-template-columns: repeat(2,minmax(0, 1fr)); }
}