/* 모바일 혜택 탭 (2026-11 개편) — 설계 docs/mobile/design/benefit_tab_redesign.md
   시안 = docs/mobile/design/benefit_tab_redesign_mockup.html 혜택 화면(.arrive · .duo · .bsec · .brow) 최종 값.
   모든 규칙은 .bnf-body 아래로 한정(전역 리셋 없음 — 헤더·푸터·공용 CSS 와 섞이지 않게).
   다크모드 = html[data-dark=true] (사이트 공용 전환). 등장 효과는 opacity 만 */
.bnf-body{
	--bnf-ink:#222428;--bnf-muted:#62666d;--bnf-muted-2:#6c7078;--bnf-hair:#eeeff1;
	--bnf-chip:#f1f2f4;--bnf-chip-ink:#2b2e33;--bnf-blue:#2b6cf0;--bnf-mark:#e5484d;
	--bnf-duo:#f5f6f7;--bnf-card:#fff;--bnf-ev:#2b6cf0;
	display:flex;flex-direction:column;gap:16px;padding:6px 16px 28px;color:var(--bnf-ink);
	letter-spacing:-.01em;-webkit-tap-highlight-color:transparent
}
html[data-dark=true] .bnf-body{
	--bnf-ink:#f1f2f4;--bnf-muted:#a6abb3;--bnf-muted-2:#9aa0a8;--bnf-hair:#272a30;
	--bnf-chip:#2a2d33;--bnf-chip-ink:#eceef1;--bnf-duo:#1b1c20;--bnf-card:#22232a;--bnf-ev:#7aa5ff
}
.bnf-body *,.bnf-body *::before,.bnf-body *::after{box-sizing:border-box}
.bnf-body a{color:inherit;text-decoration:none}
.bnf-body h3,.bnf-body p,.bnf-body ul{margin:0;padding:0}
.bnf-body ul{list-style:none}
.bnf-body button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.bnf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 상단 롤링 (시안 .arrive 최종: 파란 띠 64px · 아이콘 링 타이머) ── */
.bnf-roll{position:relative;height:64px;border-radius:18px;overflow:hidden;
	background:linear-gradient(120deg,#2b6cf0 0%,#2f6ff0 55%,#3673f0 100%);box-shadow:0 14px 26px -16px rgba(43,108,240,.75)}
html[data-dark=true] .bnf-roll{box-shadow:none}
/* 색은 .bnf-body 를 붙여 명시도를 올린다 — .bnf-body a{color:inherit}(0,1,1) 에 지면 파란 띠 위 글자가 검게 나온다 */
.bnf-body .bnf-roll__item{position:absolute;inset:0;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;
	padding:0 16px 0 18px;color:#fff;opacity:0;pointer-events:none;transition:opacity .45s ease}
.bnf-body .bnf-roll__item.is-on{opacity:1;pointer-events:auto}
.bnf-roll__item:active{background:rgba(255,255,255,.06)}
.bnf-roll__tw{position:relative;display:grid;place-items:center;width:36px;height:36px}
.bnf-roll__tw .bnf-tile{position:relative;z-index:1}
.bnf-roll__ring{position:absolute;inset:-4px;display:block;pointer-events:none;z-index:0}
.bnf-roll__ring svg{width:100%;height:100%;overflow:visible}
.bnf-roll__ring rect{fill:none;stroke-width:2.2;stroke-linecap:round}
.bnf-roll__ring .bg{stroke:rgba(255,255,255,.3)}
.bnf-roll__ring .fg{stroke:#fff;stroke-dasharray:100;stroke-dashoffset:100}
.bnf-roll__item.is-on .bnf-roll__ring .fg{animation:bnf-ring 3.5s linear forwards}
.bnf-roll.is-paused .bnf-roll__ring .fg{animation-play-state:paused}
.bnf-roll.is-single .bnf-roll__ring{display:none}
@keyframes bnf-ring{to{stroke-dashoffset:0}}
.bnf-roll__title{min-width:0;font-size:17px;font-weight:600;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnf-roll__title b{font-weight:700}
/* 제목 + 설명 한 줄 (bob.bae 11-05) — 설명은 한 단계 옅게. 넘치면 설명 쪽이 … 로 잘린다 */
.bnf-roll__desc{margin-left:8px;font-size:15px;font-weight:500;opacity:.82}
@media (prefers-reduced-motion: reduce){
	.bnf-roll__ring{display:none}
	.bnf-body .bnf-roll__item{transition:none}
}

/* ── 쿠키통 · VIP 2단 (시안 .duo) ── */
.bnf-duo{position:relative;display:block;padding:12px 10px 10px;border-radius:20px;background:var(--bnf-duo)}
.bnf-duo__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 10px}
.bnf-duo__hl{display:flex;align-items:center;gap:6px;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.03em;color:var(--bnf-ink)}
.bnf-duo__badge{flex:none;display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 6px 0 5px;border-radius:6px;
	background:#efe8fb;color:#6a35b8;font-size:11.5px;font-weight:750;letter-spacing:.03em}
.bnf-duo__badge svg{width:12px;height:12px}
.bnf-duo__badge.is-first{background:#e8f0fe;color:#1f55c9;letter-spacing:0}
html[data-dark=true] .bnf-duo__badge{background:#2d2640;color:#cdb6f4}
html[data-dark=true] .bnf-duo__badge.is-first{background:#1d2a45;color:#9dbcff}
.bnf-duo__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnf-duo__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.bnf-duo__card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;
	min-height:100px;padding:12px;border-radius:16px;background:var(--bnf-card);box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--bnf-ink)}
html[data-dark=true] .bnf-duo__card{box-shadow:none}
a.bnf-duo__card:active{opacity:.85}
.bnf-duo__card.has-act{gap:8px}
.bnf-duo__hit{position:absolute;inset:0;z-index:0;border-radius:inherit}
.bnf-duo__card.has-act>*:not(.bnf-duo__hit):not(.bnf-duo__act){position:relative;z-index:1;pointer-events:none}
.bnf-duo__icon{display:block;width:30px;height:33px}
.bnf-duo__icon .bnf-tile{border-radius:9px!important}
.bnf-jarsvg{display:block;width:30px;height:33px}
.bnf-duo__text{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%}
.bnf-duo__label{font-size:14px;color:var(--bnf-muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnf-duo__label.is-warn{color:var(--bnf-ev);font-weight:500}
.bnf-duo__value{font-size:17px;font-weight:600;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnf-duo__value b{font-weight:600;font-variant-numeric:tabular-nums}
.bnf-duo__act{position:relative;z-index:2;min-height:32px!important;padding:0 12px!important;font-size:13.5px!important;font-weight:500}
.bnf-duo__act.is-charge{background:var(--bnf-blue)!important;color:#fff!important}
html[data-dark=true] .bnf-duo__act.is-charge{background:#3d6fe0!important}
.bnf-hot{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--bnf-mark);animation:bnf-dot 1.6s ease-in-out infinite}
@keyframes bnf-dot{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.bnf-hot{animation:none}}

/* ── 섹션 · 행 (시안 .bsec · .brow 최종) ── */
.bnf-panel{display:flex;flex-direction:column;gap:30px;padding-top:4px}
.bnf-sec__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bnf-sec__head h3{font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--bnf-ink)}
.bnf-sec__head span{flex:none;font-size:14.5px;color:var(--bnf-muted-2);font-variant-numeric:tabular-nums}
.bnf-sec__cap{margin-top:2px!important;font-size:14.5px;color:var(--bnf-muted-2)}
.bnf-sec ul{margin-top:4px}
.bnf-row{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;
	padding:12px 0;margin:0;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--bnf-ink);border-radius:0}
.bnf-row:active{opacity:.7}
div.bnf-row{cursor:default}
div.bnf-row:active{opacity:1}
.bnf-row>.bnf-tile{border-radius:11px!important}
.bnf-row__text{min-width:0;display:flex;flex-direction:column}
.bnf-row__title{font-size:16.5px;font-weight:500;letter-spacing:-.025em;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnf-row__sub{margin-top:2px;font-size:15px;letter-spacing:-.015em;line-height:1.45;color:var(--bnf-muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnf-ev{font-weight:500;color:var(--bnf-ev)}
.bnf-row.is-done .bnf-tile{opacity:.45}
.bnf-row.is-done .bnf-row__title{color:var(--bnf-muted-2)}
.bnf-body .bnf-chip{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;border:0;border-radius:999px;
	background:var(--bnf-chip);color:var(--bnf-chip-ink);font-size:14.5px;font-weight:500;white-space:nowrap;letter-spacing:-.01em}
.bnf-done{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:38px;padding:0 4px;font-size:15px;font-weight:500;color:var(--bnf-muted)}
.bnf-done svg{width:17px;height:17px}
.bnf-owframe{margin-top:8px;border-radius:14px;overflow:hidden}

/* ── PC (kuki/kukir_benefit.jsp · .bnf-body.is-pc) — 시안 PC 화면: 가운데 760px 한 줄, 섹션 = 흰 카드 ──
   바탕색은 PC 공용 감싸개(.kkr_wrap)가 깐다. 값은 시안 .pc .arrive · .pc .duo · .pc .bsec 그대로 */
.bnf-body.is-pc{width:760px;max-width:calc(100% - 32px);margin:0 auto;gap:20px;padding:28px 0 64px;
	--bnf-pcsec:#fff;--bnf-pcline:#e8eaee;font-size:15px}
html[data-dark=true] .bnf-body.is-pc{--bnf-pcsec:#1b1c20;--bnf-pcline:#2a2d33}
.bnf-body.is-pc .bnf-roll__item{grid-template-columns:38px minmax(0,1fr);padding:0 16px 3px 18px}
.bnf-body.is-pc .bnf-roll__tw{width:38px;height:38px}
.bnf-body.is-pc .bnf-roll__tw .bnf-tile{width:38px!important;height:38px!important;border-radius:11px!important}
.bnf-body.is-pc .bnf-roll__title{font-size:18px}
.bnf-body.is-pc .bnf-roll__desc{font-size:16px}
.bnf-body.is-pc .bnf-roll__item:hover{background:rgba(255,255,255,.06)}
.bnf-body.is-pc .bnf-duo{padding:16px 14px 14px}
.bnf-body.is-pc .bnf-duo__act{min-height:36px!important;padding:0 14px!important;font-size:14.5px!important}
.bnf-body.is-pc .bnf-panel{gap:20px;padding-top:0}
.bnf-body.is-pc .bnf-sec{padding:18px 22px 8px;border-radius:18px;background:var(--bnf-pcsec);box-shadow:0 0 0 1px var(--bnf-pcline)}
.bnf-body.is-pc .bnf-sec__head h3{font-size:19px}
.bnf-body.is-pc .bnf-row__title{font-size:17px}
.bnf-body.is-pc .bnf-row:hover .bnf-chip{filter:brightness(.96)}
.bnf-body.is-pc a.bnf-duo__card:hover,.bnf-body.is-pc .bnf-duo__hit:hover{opacity:.92}