:root{font-family:"Plus Jakarta Sans","Noto Sans KR",system-ui,sans-serif;color:#0b1c30;background:#f8f9ff;font-synthesis:none;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh;line-height:1.55}
button,input,select{font:inherit}
button{touch-action:manipulation}
.benefit-header-inner,.benefit-toolbar,.benefit-meta,.benefit-main,.benefit-footer{max-width:880px;margin-left:auto;margin-right:auto}
.benefit-overview{max-width:880px;margin:0 auto;padding:18px 20px 0}
.benefit-overview h1{margin:0;color:#0b1c30;font-size:21px;font-weight:800;letter-spacing:-.045em}
.benefit-description{margin:3px 0 0;color:#64748b;font-size:12px}
.benefit-description strong{color:#334155}
.benefit-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.benefit-tab{appearance:none;min-height:38px;padding:0 15px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#64748b;font-size:12px;font-weight:750;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.benefit-tab:hover{border-color:#cbd5e1;background:#f8fafc;color:#334155}
.benefit-tab[data-carrier="SKT"].active{border-color:var(--carrier-skt);background:var(--carrier-skt-soft);color:var(--carrier-skt-dark);box-shadow:inset 0 0 0 1px var(--carrier-skt)}
.benefit-tab[data-carrier="KT"].active{border-color:#0d9488;background:#f0fdfa;color:#0f766e;box-shadow:inset 0 0 0 1px #0d9488}
.benefit-tab[data-carrier="LGU+"].active{border-color:#ec4899;background:#fdf2f8;color:#be185d;box-shadow:inset 0 0 0 1px #ec4899}
.benefit-tab:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.benefit-tab-count{margin-left:5px;opacity:.68;font-size:12px}
.benefit-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;padding:0 20px}
.benefit-search{position:relative;flex:1;min-width:220px}
.benefit-search-icon{position:absolute;top:50%;left:13px;transform:translateY(-50%);color:#64748b;font-size:17px;pointer-events:none}
.benefit-search input,.benefit-toolbar select{height:42px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#0b1c30;font-size:12px;box-shadow:0 1px 3px rgba(15,23,42,.035)}
.benefit-search input{width:100%;padding:0 13px 0 40px}
.benefit-search input:focus,.benefit-toolbar select:focus{border-color:#93c5fd;outline:2px solid #bfdbfe;outline-offset:0}
.benefit-toolbar select{max-width:210px;padding:0 34px 0 12px;cursor:pointer}
.benefit-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;padding:0 20px;color:#64748b;font-size:11px}
.benefit-main{padding:6px 20px 56px}
.benefit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px}
.benefit-card{min-width:0;min-height:184px;display:flex;flex-direction:column;gap:10px;padding:15px;border:1px solid #e8edf5;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 2px 8px rgba(15,23,42,.035);text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.benefit-card:hover,.benefit-card:focus-visible{transform:translateY(-2px);border-color:#bcd7ff;box-shadow:0 7px 20px rgba(15,23,42,.09);outline:none}
.benefit-card:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
.benefit-card-head{display:flex;align-items:center;gap:12px;min-width:0}
.benefit-logo,.benefit-logo-fallback{width:54px;height:54px;flex:0 0 54px;border:1px solid #e8edf5;border-radius:13px;background:#fff;object-fit:contain}
.benefit-logo{padding:4px}
.benefit-logo-fallback{display:grid;place-items:center;background:#eff4ff;color:#1d4ed8;font-size:20px;font-weight:800}
.benefit-card-info{min-width:0}
.benefit-card-name{overflow:hidden;color:#0b1c30;font-size:14px;font-weight:800;letter-spacing:-.035em;text-overflow:ellipsis;white-space:nowrap}
.benefit-card-category{margin-top:2px;color:#64748b;font-size:10px}
.benefit-card-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.benefit-chip{padding:2px 7px;border:1px solid #e2e8f0;border-radius:7px;background:#f1f5f9;color:#475569;font-size:9px;font-weight:750}
.benefit-chip.popular{border-color:#fedf89;background:#fff4e5;color:#b54708}
.benefit-chip.new{border-color:#a6e5b4;background:#e6f4ea;color:#1e7b34}
.benefit-card-offer{display:flex;flex-direction:column;gap:6px;overflow:hidden;color:#334155;font-size:11px;line-height:1.55;word-break:keep-all}
.benefit-card-offer-row{display:flex;flex-direction:column;gap:3px;min-width:0}
.benefit-card-offer-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.benefit-discount-highlight{color:#dc2626;font-size:1.12em;font-weight:850}
.benefit-card-grade{margin-top:auto;color:#64748b;font-size:10px}
.benefit-empty,.benefit-loading,.benefit-error{padding:64px 16px;color:#667085;text-align:center}
.benefit-error strong{display:block;color:#b42318;font-size:15px}
.benefit-error p{margin:8px 0 0;font-size:13px}
.benefit-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 20px 30px;border-top:1px solid #e8edf5;color:#64748b;font-size:11px}
.benefit-footer-links{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
.benefit-footer a{color:#64748b;text-decoration:none}
.benefit-footer a:hover{text-decoration:underline}
.benefit-footer small{font-size:10px;white-space:nowrap}
.benefit-dialog{width:min(760px,calc(100vw - 32px));max-height:min(90dvh,820px);overflow:hidden;padding:0;border:1px solid #e2e8f0;border-radius:20px;background:#fff;color:#0b1c30;box-shadow:0 24px 80px rgba(15,23,42,.28)}
.benefit-dialog::backdrop{background:#1018288c;backdrop-filter:blur(2px)}
.benefit-dialog-inner{position:relative;max-height:calc(min(90dvh,820px) - 2px);overflow-x:hidden;overflow-y:auto;padding:26px;scrollbar-width:none;-ms-overflow-style:none}
.benefit-dialog-inner::-webkit-scrollbar{display:none}
.benefit-dialog-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:1px solid #e2e8f0;border-radius:12px;background:#f8f9ff;color:#475569;font-size:20px;cursor:pointer}
.benefit-dialog-close:hover{background:#e4e7ec}
.benefit-dialog-head{display:flex;align-items:center;gap:16px;padding-right:42px}
.benefit-dialog-head .benefit-logo,.benefit-dialog-head .benefit-logo-fallback{width:72px;height:72px;flex-basis:72px}
.benefit-dialog-label{display:inline-block;margin-bottom:6px;padding:3px 9px;border:1px solid #bfdbfe;border-radius:7px;background:#eff6ff;color:#1d4ed8;font-size:10px;font-weight:800}
.benefit-dialog-label.SKT{border-color:var(--carrier-skt-border);background:var(--carrier-skt-soft);color:var(--carrier-skt-dark)}
.benefit-dialog-label.KT{border-color:#99f6e4;background:#f0fdfa;color:#0f766e}
.benefit-dialog-label.LGU\+{border-color:#fbcfe8;background:#fdf2f8;color:#be185d}
.benefit-dialog h2{margin:0;font-size:21px;letter-spacing:-.03em}
.benefit-dialog-subtitle{margin:4px 0 0;color:#667085;font-size:12px;overflow-wrap:anywhere}
.benefit-detail-section{margin-top:20px;border-top:1px solid #e4e7ec;padding-top:15px}
.benefit-detail-section h3{display:flex;align-items:center;gap:7px;margin:0 0 8px;color:#101828;font-size:14px}
.benefit-detail-section h3::before{width:4px;height:14px;border-radius:2px;background:#0f6fff;content:""}
.benefit-offer-row{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px dashed #eef1f5;color:#344054;font-size:13px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.benefit-offer-row:last-child{border-bottom:0}
.benefit-grade-list{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:3px}
.benefit-grade{display:inline-flex;align-items:center;min-height:18px;padding:2px 6px;border:1px solid transparent;border-radius:6px;background:#0f6fff;color:#fff;font-size:9px;font-weight:800;line-height:1.2;white-space:nowrap}
.benefit-grade.VVIP{background:#7c3aed}.benefit-grade.VIP{background:#a16207}.benefit-grade.GOLD{background:#d97706}.benefit-grade.SILVER{background:#64748b}
.benefit-grade.LITE{background:#e2e8f0;color:#475569}.benefit-grade.WHITE{border-color:#cbd5e1;background:#fff;color:#475569}
.benefit-grade[class~="우수"]{background:#15803d}.benefit-grade[class~="일반"]{background:#475569}.benefit-grade[class~="전등급"]{background:#2563eb}
.carrier-detail-KT{--grade-vvip:#0f766e;--grade-vip:#0d9488;--grade-gold:#b45309;--grade-silver:#475569;--grade-lite:#ccfbf1;--grade-white:#5eead4;--grade-excellent:#047857;--grade-general:#475569;--grade-all:#0f766e}
.carrier-detail-LGU\+{--grade-vvip:#be185d;--grade-vip:#db2777;--grade-gold:#c2410c;--grade-silver:#6b7280;--grade-lite:#fce7f3;--grade-white:#f9a8d4;--grade-excellent:#a21caf;--grade-general:#475569;--grade-all:#be185d}
.benefit-grade.VVIP{background:var(--grade-vvip,#7c3aed)}.benefit-grade.VIP{background:var(--grade-vip,#a16207)}
.benefit-grade.GOLD{background:var(--grade-gold,#d97706)}.benefit-grade.SILVER{background:var(--grade-silver,#64748b)}
.benefit-grade.LITE{background:var(--grade-lite,#e2e8f0);color:#475569}
.benefit-grade.WHITE{border-color:var(--grade-white,#cbd5e1);background:#fff;color:#475569}
.benefit-grade[class~="우수"]{background:var(--grade-excellent,#15803d)}
.benefit-grade[class~="일반"]{background:var(--grade-general,#475569)}
.benefit-grade[class~="전등급"]{background:var(--grade-all,#2563eb)}
.benefit-detail-lines{margin:0;padding-left:19px;color:#344054;font-size:13px;line-height:1.85;overflow-wrap:anywhere}
.benefit-detail-lines li+li{margin-top:4px}
.benefit-detail-link{display:block;margin:6px 0;color:#0f6fff;font-size:12px;overflow-wrap:anywhere}
.benefit-detail-link:hover{text-decoration:none}
@media(max-width:700px){
  .benefit-overview h1{font-size:16px}
  .benefit-description{max-width:56ch;font-size:11px}
  .benefit-tabs{gap:6px;margin-top:12px}
  .benefit-tab{min-height:34px;padding:0 11px;font-size:11px}
  .benefit-toolbar{gap:7px;margin-top:13px}
  .benefit-search{flex-basis:100%}
  .benefit-toolbar select{max-width:none;flex:1;min-width:0;font-size:12px}
  .benefit-meta{font-size:11px}
  .benefit-main{padding:6px 20px 40px}
  .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .benefit-card{min-height:184px;padding:11px;gap:8px}
  .benefit-logo,.benefit-logo-fallback{width:44px;height:44px;flex-basis:44px;border-radius:10px}
  .benefit-card-head{gap:8px;align-items:flex-start}
  .benefit-card-name{font-size:12px}
  .benefit-card-category{font-size:10px}
  .benefit-card-badges{gap:3px}
  .benefit-chip{padding:1px 5px;font-size:9px}
  .benefit-card-offer{font-size:11px;line-height:1.55}
  .benefit-card-grade{font-size:9px}
  .benefit-dialog-inner{padding:22px 18px}
  .benefit-dialog-head{gap:11px}
  .benefit-dialog-head .benefit-logo,.benefit-dialog-head .benefit-logo-fallback{width:58px;height:58px;flex-basis:58px}
  .benefit-dialog h2{font-size:18px}
}
@media(max-width:600px){
  .benefit-overview{padding:14px 16px 0}
  .benefit-toolbar{padding-right:16px;padding-left:16px}
  .benefit-meta{padding-right:16px;padding-left:16px}
  .benefit-main{padding-right:16px;padding-left:16px}
  .benefit-footer{padding-right:16px;padding-left:16px}
}
@media(max-width:360px){.benefit-grid{grid-template-columns:1fr}.benefit-card{min-height:150px}.benefit-card-head{align-items:center}}