:root{--bg:#141414;--bg2:#1a1a1a;--bg3:#232323;--surface:#2a2a2a;--border:rgba(255,255,255,0.08);--gold:#f5c842;--gold2:#e8a800;--silver:#b0b8c8;--bronze:#cd7f32;--accent:#e50914;--accent2:#ff4757;--green:#2ed573;--blue:#3a7bd5;--text:#f2f2f4;--text2:#a3a3ab;--text3:#7a7a84;--card-w:200px;--radius:12px;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans KR',sans-serif;overflow-x:hidden;min-height:100vh;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 4%;height:80px;display:flex;align-items:center;background:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,rgba(0,0,0,.65) 45%,rgba(0,0,0,.25) 75%,transparent 100%);transition:background .3s;}
nav.scrolled{background:rgba(20,20,20,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.nav-center{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;}
/* 돋보기는 메뉴 오른쪽 끝. 입력칸은 줄 안에서 폭이 늘어나며 오른쪽으로 펼쳐진다 (메뉴 줄 위를 덮지 않음) */
.nav-search-wrap{display:flex;align-items:center;flex-shrink:0;position:relative;z-index:5;}
.nav-search-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text3);padding:6px;transition:color .2s;position:relative;z-index:2;}
.nav-search-btn:hover{color:var(--text);}
.nav-search-input{width:0;opacity:0;padding:0;border:none;outline:none;color:var(--text);font-family:inherit;font-size:13px;border-radius:20px;transition:width .35s cubic-bezier(0.4,0,0.2,1),opacity .25s ease,padding .35s cubic-bezier(0.4,0,0.2,1),margin .35s cubic-bezier(0.4,0,0.2,1);min-width:0;background:rgba(255,255,255,0.07);}
.nav-search-input.open{width:168px;opacity:1;padding:7px 14px;margin-left:4px;border:1px solid var(--border);}
.nav-search-input.open:focus{border-color:var(--gold);background:rgba(255,255,255,0.12);}
.nav-search-input::placeholder{color:var(--text3);}
.nav-arrow{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text3);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s ease;padding:0;}
.nav-arrow.visible{opacity:1;pointer-events:auto;}
.nav-arrow:hover{color:var(--text);}
.nav-cats-scroll-area{max-width:603px;min-width:0;position:relative;overflow:hidden;flex-shrink:1;}
.nav-edge{position:absolute;top:0;bottom:0;width:20px;z-index:2;pointer-events:none;}
.nav-edge-left{left:0;background:linear-gradient(to right,rgba(0,0,0,0.9) 0%,transparent 100%);}
.nav-edge-right{right:0;background:linear-gradient(to left,rgba(0,0,0,0.9) 0%,transparent 100%);}
nav.scrolled .nav-edge-left{background:linear-gradient(to right,rgba(10,10,15,0.97) 0%,transparent 100%);}
nav.scrolled .nav-edge-right{background:linear-gradient(to left,rgba(10,10,15,0.97) 0%,transparent 100%);}
.nav-cats-track{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0;}
.nav-cats-track::-webkit-scrollbar{display:none;}
.nav-logo{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;color:var(--gold);cursor:pointer;flex-shrink:0;text-decoration:none;display:flex;align-items:flex-end;line-height:1;padding-bottom:2px;transform:translateY(4px);}
.nav-logo span{transition:transform .25s cubic-bezier(.4,0,.2,1);}
.nav-logo .lg-fang{color:var(--accent);}
.nav-logo:hover span{transform:translateY(0) rotate(0deg) scaleY(1) skewX(-6deg) !important;}
.nav-cats{display:flex;gap:4px;flex:1;justify-content:center;}
.nav-cat{text-decoration:none;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;color:#e5e5e5;border:none;background:transparent;transition:all .2s;white-space:nowrap;font-family:inherit;flex-shrink:0;}
.nav-cat:hover{color:#b3b3b3;background:rgba(255,255,255,.07);}
.nav-cat.active{color:#000;background:var(--gold);font-weight:700;}
/* 아직 열지 않은 메뉴 탭 (정보) — 보이지만 누를 수 없다 */
.nav-cat.is-disabled{opacity:.35;cursor:not-allowed;}

/* ===== 광고·제휴 문의 (/advertise) — 밝은 가운데 칸 + COUFANG 식 (2026-11-05):
   사이트와 같은 어두운 머리말 + 금·빨 로고 · 아이콘·설명이 있는 유형 카드 · 금색 번호 단계 · 금색 보내기 (무신사식 파란 탭·회색 띠 대신) ===== */
.biz{--b-bg:#f4f5f7;--b-card:#fff;--b-line:#e6e7ea;--b-soft:#f7f7f9;--b-text:#17171b;--b-text2:#4d5058;--b-text3:#8b8f98;--b-gold:#f5c842;--b-gold-ink:#8a6400;--b-gold-bg:#fff7dc;--b-red:#d93025;min-height:100vh;padding:0 0 80px;background:var(--b-bg);color:var(--b-text);}
.biz-wrap{max-width:560px;margin:0 auto;padding-bottom:28px;background:var(--b-card);border-left:1px solid var(--b-line);border-right:1px solid var(--b-line);min-height:100vh;}
/* 머리말: 사이트 맨 위 메뉴와 같은 어두운 막대 */
.biz-top{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:48px 1fr 96px;align-items:center;height:56px;background:#141414;color:#fff;}
.biz-top h1{text-align:center;font-size:15px;font-weight:700;}
.biz-top-btn{justify-self:center;font-size:26px;line-height:1;color:#fff;text-decoration:none;}
.biz-top-logo{justify-self:end;margin-right:16px;display:flex;align-items:flex-end;font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:2px;line-height:1;color:var(--b-gold);text-decoration:none;transform:translateY(2px);}
.biz-top-logo .lg-fang{color:#e50914;}
/* 문의 유형: 아이콘 + 이름 + 한 줄 설명 카드 */
.biz-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px 14px 8px;}
.biz-tabs button{display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:11px 10px;border:1px solid var(--b-line);border-radius:10px;background:#fff;color:var(--b-text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s;}
.biz-tabs button:hover{border-color:#cdd0d6;}
.biz-tabs svg{grid-row:1/3;width:22px;height:22px;color:var(--b-text3);}
.biz-tabs b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.biz-tabs small{font-size:11px;color:var(--b-text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.biz-tabs button.is-on{border-color:var(--b-gold);box-shadow:inset 0 0 0 1px var(--b-gold);background:var(--b-gold-bg);}
.biz-tabs button.is-on svg{color:var(--b-gold-ink);}
/* 안내: 왼쪽 금색 선 */
.biz-notice{margin:6px 14px 10px;padding:12px 14px 12px 16px;border-left:3px solid var(--b-gold);border-radius:0 8px 8px 0;background:var(--b-soft);}
.biz-notice b{display:block;margin-bottom:5px;font-size:13px;}
.biz-notice ul{margin:0;padding:0;list-style:none;}
.biz-notice li{position:relative;padding-left:10px;font-size:12px;line-height:1.7;color:var(--b-text2);}
.biz-notice li::before{content:"·";position:absolute;left:0;}
/* 입력 단계: 금색 번호 */
.biz-step{padding:20px 14px 2px;border-top:1px solid var(--b-line);}
.biz-step h2{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:15px;font-weight:800;}
.biz-step h2 i{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#141414;color:var(--b-gold);font-style:normal;font-size:12px;font-weight:800;}
.biz-fields{display:flex;flex-direction:column;gap:14px;padding:0 0 14px;}
.biz-field{display:flex;flex-direction:column;gap:7px;position:relative;}
.biz-label{font-size:12.5px;font-weight:600;color:var(--b-text2);}
.biz-label i{font-style:normal;color:var(--b-red);}
.biz-field input,.biz-field select,.biz-field textarea{width:100%;height:44px;padding:0 13px;border:1px solid var(--b-line);border-radius:8px;background:#fff;color:var(--b-text);font:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s;}
.biz-field textarea{height:auto;padding:12px 13px;line-height:1.6;resize:vertical;}
.biz-field input::placeholder,.biz-field textarea::placeholder{color:#b3b7be;}
.biz-field input:focus,.biz-field select:focus,.biz-field textarea:focus{outline:none;border-color:var(--b-gold);box-shadow:0 0 0 3px var(--b-gold-bg);}
.biz-count{align-self:flex-end;font-size:11.5px;color:var(--b-text3);}
.biz-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.biz-chips{display:flex;flex-wrap:wrap;gap:6px;}
.biz-chips button{padding:8px 13px;border:1px solid var(--b-line);border-radius:18px;background:#fff;color:var(--b-text2);font:inherit;font-size:12.5px;cursor:pointer;}
.biz-chips button.is-on{border-color:var(--b-gold);background:var(--b-gold-bg);color:var(--b-text);font-weight:700;}
.biz-guide{margin:0;padding:0;list-style:none;}
.biz-guide li{position:relative;padding-left:10px;font-size:11.5px;line-height:1.7;color:var(--b-text3);}
.biz-guide li::before{content:"·";position:absolute;left:0;}
/* 동의 · 보내기 */
.biz-agree{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;padding:16px 14px 6px;border-top:1px solid var(--b-line);}
.biz-agree label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer;}
.biz-agree input{width:18px;height:18px;accent-color:#141414;}
.biz-agree i{font-style:normal;color:var(--b-red);font-weight:500;}
.biz-terms-btn{border:0;background:none;color:var(--b-text3);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;}
.biz-terms{width:calc(100% - 28px);margin:6px 14px 0;border-collapse:collapse;font-size:12px;}
.biz-terms th,.biz-terms td{padding:8px 10px;border:1px solid var(--b-line);text-align:left;vertical-align:top;line-height:1.6;}
.biz-terms th{width:52px;background:var(--b-soft);font-weight:600;white-space:nowrap;}
.biz-terms td{color:var(--b-text2);word-break:keep-all;}
.biz-agree-note{padding:6px 14px 0;font-size:11.5px;color:var(--b-text3);}
.biz-agree-note a{color:var(--b-text2);}
.biz-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.biz-error{margin:14px 14px 0;padding:10px 12px;border-radius:8px;background:#fdecea;color:var(--b-red);font-size:12.5px;}
.biz-submit{display:flex;align-items:center;justify-content:center;width:calc(100% - 28px);height:54px;margin:18px 14px 0;border:0;border-radius:10px;background:var(--b-gold);color:#141414;font:inherit;font-size:15px;font-weight:800;text-decoration:none;cursor:pointer;transition:background .15s;}
.biz-submit:hover{background:#ecbb2c;}
.biz-submit:disabled{background:#e3e4e7;color:#9a9da4;cursor:not-allowed;}
.biz-done{padding:60px 14px 20px;text-align:center;}
.biz-done-icon{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#141414;color:var(--b-gold);font-size:26px;font-weight:700;}
.biz-done h2{font-size:19px;font-weight:800;margin-bottom:10px;}
.biz-done p{font-size:13px;line-height:1.8;color:var(--b-text2);margin-bottom:10px;}
@media(max-width:600px){.biz-wrap{border:0;}.biz-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){body:has(.biz){padding-top:0;}} /* 휴대폰 메뉴 높이만큼 띄운 위 여백 — 이 페이지는 메뉴가 없다 */
body:has(.biz)>footer{display:none;} /* 광고·제휴 문의 화면에서는 사이트 바닥글을 숨긴다 (사용자 요청 2026-11-05) */
.hero{position:relative;height:82vh;min-height:500px;display:flex;align-items:flex-end;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg-inner{width:100%;height:100%;background:linear-gradient(135deg,#0d0d1a 0%,#1a0a2e 40%,#2a0a0a 100%);}
.hero-particles{position:absolute;inset:0;overflow:hidden;}
.hero-particles::before,.hero-particles::after{content:'';position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;}
.hero-particles::before{width:600px;height:600px;background:radial-gradient(circle,#f5c842 0%,transparent 70%);right:-100px;top:-100px;}
.hero-particles::after{width:500px;height:500px;background:radial-gradient(circle,#e50914 0%,transparent 70%);left:-50px;bottom:-50px;}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:60px 60px;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(10,10,15,.9) 30%,transparent 70%),linear-gradient(to top,rgba(10,10,15,1) 0%,transparent 40%);}
.hero-content{position:relative;z-index:2;padding:0 4% 60px;max-width:640px;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(245,200,66,.15);border:1px solid rgba(245,200,66,.4);border-radius:20px;padding:5px 14px;margin-bottom:16px;font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.5px;}
.hero-badge .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.3);}}
.hero-rank{font-family:'Bebas Neue',sans-serif;font-size:100px;line-height:.9;color:var(--gold);text-shadow:0 0 60px rgba(245,200,66,.3);}
.hero-rank span{color:rgba(245,200,66,.3);font-size:50px;}
.hero-title{font-size:36px;font-weight:900;line-height:1.2;margin:12px 0 6px;}
.hero-brand{font-size:14px;color:var(--text2);margin-bottom:16px;letter-spacing:1px;text-transform:uppercase;}
.hero-score{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.score-bar{display:flex;align-items:center;gap:8px;}
.stars{color:var(--gold);font-size:16px;letter-spacing:2px;}
.score-num{font-size:22px;font-weight:900;color:var(--gold);}
.score-count{font-size:12px;color:var(--text3);}
.rank-change{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;}
.rank-change.up{color:var(--green);}
.rank-change.down{color:var(--accent2);}
.hero-desc{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:28px;max-width:480px;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.btn-primary{display:flex;align-items:center;gap:8px;padding:12px 28px;background:var(--gold);color:#000;border-radius:6px;font-weight:700;font-size:14px;cursor:pointer;border:none;font-family:inherit;transition:all .15s;}
.btn-primary:hover{background:#ffd700;transform:translateY(-1px);}
.btn-secondary{display:flex;align-items:center;gap:8px;padding:12px 24px;background:rgba(255,255,255,.1);color:var(--text);border-radius:6px;font-weight:600;font-size:14px;cursor:pointer;border:1px solid rgba(255,255,255,.2);font-family:inherit;transition:all .15s;}
.btn-secondary:hover{background:rgba(255,255,255,.18);}
.hero-floating{position:absolute;right:4%;bottom:80px;z-index:2;display:flex;flex-direction:column;gap:12px;}
.mini-rank-card{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;width:240px;}
.mini-rank-card:hover{background:rgba(255,255,255,.1);transform:translateX(-4px);}
.mini-rank-num{font-family:'Bebas Neue',sans-serif;font-size:32px;line-height:1;min-width:28px;}
.mini-rank-num.g2{color:var(--silver);}
.mini-rank-num.g3{color:var(--bronze);}
.mini-rank-info{flex:1;}
.mini-rank-name{font-size:13px;font-weight:700;margin-bottom:2px;}
.mini-rank-sub{font-size:11px;color:var(--text2);}
.mini-rank-score{font-size:13px;font-weight:700;color:var(--gold);}
.section{padding:40px 0 0;}
.section-header{padding:0 4%;display:flex;align-items:baseline;gap:16px;margin-bottom:8px;}
.section-title{font-size:20px;font-weight:700;cursor:pointer;transition:color .15s;}
.section-title:hover{color:var(--gold);}
.section-subtitle{font-size:13px;color:var(--text3);}
.section-more{font-size:12px;color:var(--text2);cursor:pointer;margin-left:auto;display:flex;align-items:center;gap:4px;transition:color .15s;}
.section-more:hover{color:var(--gold);}
.page-indicator{display:flex;gap:4px;align-items:center;margin-left:auto;}
.page-dot{width:22px;height:2px;border-radius:1px;background:rgba(255,255,255,.25);transition:background .2s;}
.page-dot.active{background:#fff;}
/* 모바일은 손가락으로 넘기므로 페이지 점을 숨긴다 (카드 1장씩이라 점이 많아져 화면 밖으로 삐져나가 페이지 전체가 옆으로 밀렸다) */
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.page-indicator{display:none;}}
.row-wrap{position:relative;}
.row-viewport{overflow-x:clip;overflow-y:visible;}
.row-track{display:flex;gap:14px;padding:10px 0 10px 70px;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform;}
.row-arrow{position:absolute;top:0;bottom:0;width:64px;display:flex;align-items:center;justify-content:center;background:linear-gradient(to right,rgba(20,20,20,.9),transparent);cursor:pointer;z-index:30;color:var(--text);opacity:0;transition:opacity .2s;border:none;}
.row-arrow.right{right:0;background:linear-gradient(to left,rgba(20,20,20,.9),transparent);}
.row-arrow svg{width:48px;height:48px;}
.row-arrow.left svg{transform:rotate(180deg);}
.row-wrap:hover .row-arrow{opacity:1;}
.row-arrow:focus{opacity:1;outline:none;}
.row-arrow:hover{color:var(--gold);}
.card{flex-shrink:0;width:var(--card-w);cursor:pointer;border-radius:var(--radius);overflow:visible;position:relative;transition:transform .25s ease,z-index 0s .25s;}
/* 올렸을 때: 살짝 떠오르기만 (2026-11-05 — 1.15배는 줄 끝 카드가 가운데 칸 경계 · 넘기기 버튼에 잘려서 1.05배로). 그림자는 가까운 것 + 퍼지는 것 두 겹 */
.card:hover{transform:translateY(-6px) scale(1.05);z-index:20;transition:transform .25s ease,z-index 0s;}
.card:hover .card-img{box-shadow:0 2px 6px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.45);}
.card-img{width:var(--card-w);aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;position:relative;background:var(--surface);}
.card-img-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:48px;}
.card-product-img{width:100%;height:100%;object-fit:contain;background:#fff;}
.top10-product-img{width:100%;height:100%;object-fit:contain;padding:16px;}
.card-rank-badge{position:absolute;top:10px;left:10px;z-index:2;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:16px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.5);}
.card-rank-badge.r1{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;}
.card-rank-badge.r2{background:linear-gradient(135deg,#c0c0c0,#808080);color:#000;}
.card-rank-badge.r3{background:linear-gradient(135deg,#cd7f32,#8b4513);color:#fff;}
.card-rank-badge.rn{background:rgba(0,0,0,.7);color:var(--text2);font-size:14px;}
.card-change{position:absolute;top:10px;right:10px;z-index:2;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;}
.card-change.up{background:rgba(46,213,115,.2);color:var(--green);}
.card-change.down{background:rgba(255,71,87,.2);color:var(--accent2);}
.card-change.new{background:rgba(245,200,66,.2);color:var(--gold);}
.card-badge{position:absolute;bottom:10px;left:10px;z-index:2;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:.5px;}
.card-badge.hot{background:var(--accent);color:#fff;}
.card-badge.pick{background:var(--gold);color:#000;}
.card-badge.sale{background:var(--green);color:#000;}
.card-hover-actions{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:8px;opacity:0;transform:translateY(8px);transition:all .25s;z-index:3;}
.card:hover .card-hover-actions{opacity:1;transform:translateY(0);}
.card-action-btn{padding:5px 12px;border-radius:4px;font-size:11px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:all .15s;}
/* 사진을 어둡게 덮던 막은 없앴다 (흰 사진 위에서 회색 얼룩처럼 보여서, 2026-11-05) — 버튼은 자체 그림자로 흰 사진 위에서도 보이게 */
.ca-detail{background:#fff;color:#111;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.22);}
.ca-buy{background:var(--gold);color:#000;box-shadow:0 4px 12px rgba(0,0,0,.22);}
.card-wishlist-btn{position:absolute;top:10px;right:10px;z-index:4;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-4px);transition:all .2s;color:#fff;}
.card:hover .card-wishlist-btn{opacity:1;transform:translateY(0);}
.card-wishlist-btn:hover{background:var(--accent);}
.card-wishlist-btn.active{opacity:1;color:var(--accent);}
.card-wishlist-btn svg{width:14px;height:14px;}
.card-info{padding:10px 2px 0;}
.card-name{min-height:calc(13px * 1.45 * 2);font-size:13px;font-weight:400;line-height:1.45;color:#a9a9b8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-brand{font-size:11.5px;font-weight:700;color:#dcdce6;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:7px;}
.card-score{display:flex;align-items:center;gap:4px;}
.card-stars{color:var(--gold);font-size:10px;}
.card-score-num{font-size:12px;font-weight:700;color:var(--gold);}
.card-price{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-price.is-unknown{font-size:12px;font-weight:500;color:#8a8a9a;letter-spacing:0;}
.card-price-date{flex:none;padding:1px 6px;border:1px solid rgba(255,255,255,.12);border-radius:10px;font-size:10px;color:#8a8a9a;white-space:nowrap;}  /* 기준일 칩 — COUFANG 만의 신뢰 표시 */
.top10-viewport{overflow-x:clip;overflow-y:visible;}
.top10-edge{position:absolute;top:0;bottom:0;z-index:5;pointer-events:none;}
.top10-edge-left{left:0;width:60px;background:linear-gradient(to right,var(--bg) 0%,transparent 100%);}
.top10-edge-right{right:0;width:36px;background:linear-gradient(to left,var(--bg) 0%,transparent 100%);}

/* 고르기 전에 읽어보세요 — 글 카드 줄 (랭킹 줄과 같은 70px / 4% 기준선) */
.guide-track{--guide-w:280px;display:grid;grid-auto-flow:column;grid-auto-columns:var(--guide-w);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 4% 0 70px;padding:10px 4% 10px 70px;scrollbar-width:none;}
.guide-track::-webkit-scrollbar{display:none;}
.guide-card{scroll-snap-align:start;min-width:0;cursor:pointer;color:inherit;text-decoration:none;}
.guide-card.is-soon{cursor:default;}
.guide-thumb{aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--surface);}
.guide-thumb img,.guide-thumb-inner{width:100%;height:100%;transition:transform .35s ease;}
.guide-thumb img{object-fit:cover;}
.guide-thumb-inner{display:flex;align-items:center;justify-content:center;font-size:52px;}
.guide-card:hover .guide-thumb img,.guide-card:hover .guide-thumb-inner{transform:scale(1.04);}
.guide-title{margin-top:12px;font-size:16px;font-weight:700;transition:color .15s;}
.guide-card:hover .guide-title{color:var(--gold);}
.guide-desc{margin-top:5px;font-size:13px;line-height:1.55;color:var(--text2);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.guide-track{--guide-w:72%;gap:14px;padding:10px 4%;scroll-padding:0 4%;}.guide-thumb-inner{font-size:44px;}.guide-title{font-size:15px;}}

/* 할인 중 PC게임 (CheapShark) — 트랙은 guide-track 을 그대로 쓰고 카드 폭만 바꾼다 */
.deal-track{--guide-w:236px;}
.deal-header{flex-wrap:wrap;row-gap:2px;}
.deal-header .section-title{white-space:nowrap;}
.deal-card{display:block;scroll-snap-align:start;min-width:0;color:inherit;text-decoration:none;}
.deal-thumb{position:relative;aspect-ratio:231/87;border-radius:10px;overflow:hidden;background:var(--surface);}
/* 스팀 이미지(231x87)는 칸과 비율이 같아 꽉 차고, 다른 비율(세로 표지 등)은 자르지 않고 칸 안에 맞춘다 */
.deal-thumb img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease;}
.deal-card:hover .deal-thumb img{transform:scale(1.04);}
.deal-off{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:6px;background:var(--green);color:#000;font-size:12px;font-weight:800;}
.deal-off.is-free{background:var(--gold);}
.deal-title{margin-top:10px;font-size:14px;font-weight:700;line-height:1.4;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s;}
.deal-card:hover .deal-title{color:var(--gold);}
.deal-price{margin-top:6px;display:flex;align-items:baseline;gap:8px;font-size:15px;}
.deal-price b{font-weight:800;}
.deal-price s{font-size:12px;color:var(--text3);}
.deal-meta{margin-top:4px;font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.deal-source{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;padding:4px 4% 0;font-size:11.5px;color:var(--text3);}
.deal-source b{padding:1px 6px;border:1px solid var(--border);border-radius:4px;font-size:10.5px;font-weight:600;color:var(--text2);}  /* '출처' 꼬리표 */
.deal-source i{font-style:normal;opacity:.6;}
.deal-card.is-skeleton .deal-thumb,.deal-card.is-skeleton .deal-title,.deal-card.is-skeleton .deal-price{background:var(--surface);border-radius:8px;animation:deal-pulse 1.2s ease-in-out infinite;}
.deal-card.is-skeleton .deal-price{height:18px;width:50%;}
@keyframes deal-pulse{50%{opacity:.5;}}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.deal-track{--guide-w:62%;}}

/* 박스오피스 TOP 10 (KOBIS) — 영화 포스터 비율 2:3, 큰 순위 숫자는 포스터 높이에 맞춘다 */
.bo-track{--bo-w:150px;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 4% 0 70px;padding:10px 4% 10px 70px;margin:0;list-style:none;scrollbar-width:none;}
.bo-track::-webkit-scrollbar{display:none;}
.bo-item{display:flex;align-items:flex-start;scroll-snap-align:start;}
/* 박스오피스 순위 숫자도 포스터 왼쪽에 윗선 맞춤, 포스터를 가리지 않는다 */
.bo-num{height:calc(var(--bo-w) * .9);width:auto;margin-right:10px;flex-shrink:0;position:relative;z-index:3;pointer-events:none;transform:skewX(-8deg);transform-origin:top left;filter:drop-shadow(0 6px 10px rgba(0,0,0,.65));}
.bo-card{width:var(--bo-w);position:relative;z-index:2;}
.bo-poster{position:relative;width:100%;aspect-ratio:2/3;border-radius:8px;overflow:hidden;padding:14px 12px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,.08);background:var(--surface);}
.bo-title{font-size:17px;font-weight:900;line-height:1.3;color:#fff;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.bo-open{margin-top:6px;font-size:11px;color:rgba(255,255,255,.6);}
.bo-change{position:absolute;top:10px;right:10px;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:800;background:rgba(0,0,0,.45);}
.bo-change.new{background:var(--gold);color:#000;}
.bo-change.up{color:var(--green);}
.bo-change.down{color:var(--accent2);}
.bo-stats{display:flex;justify-content:space-between;gap:6px;margin-top:8px;font-size:11.5px;color:var(--text2);white-space:nowrap;}
.bo-item.is-skeleton .bo-poster{width:var(--bo-w);animation:deal-pulse 1.2s ease-in-out infinite;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.bo-track{--bo-w:120px;gap:18px;padding:10px 4%;scroll-padding:0 4%;}.bo-title{font-size:15px;}}
/* KMDb 포스터가 붙은 카드 — 포스터(2:3 안팎)는 칸을 채우고, 제목은 포스터 아래에 한 줄로 */
button.bo-card{display:block;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.bo-poster.has-img{padding:0;}
.bo-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.bo-open{display:block;}
.bo-change{z-index:1;}
.bo-name{display:block;margin-top:8px;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s;}
.bo-name + .bo-stats{margin-top:3px;}
.bo-card.is-clickable .bo-poster{transition:border-color .15s;}
.bo-card.is-clickable:hover .bo-poster{border-color:rgba(255,255,255,.4);}
.bo-card.is-clickable:hover .bo-name{color:var(--gold);}
.bo-card.is-clickable:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px;}

/* 박스오피스 영화 상세 — 왼쪽 포스터, 오른쪽에 KOBIS 기록과 KMDb 정보를 따로 묶는다 */
.modal.movie-modal{display:flex;width:min(780px,95vw);}
.movie-modal .modal-close{position:absolute;top:12px;right:12px;z-index:3;}
.movie-modal-poster{flex:0 0 260px;padding:28px 0 28px 28px;}
.movie-modal-poster img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;background:var(--surface);}
.movie-modal-body{flex:1;min-width:0;padding:28px;}
.movie-modal .modal-name{font-size:24px;margin:4px 44px 0 0;}
.movie-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.movie-block .game-facts{margin:0 0 12px;}
.movie-plot{margin:0 0 12px;font-size:13.5px;line-height:1.75;color:var(--text2);white-space:pre-line;}
.movie-more{font-size:13px;font-weight:700;color:var(--gold);text-decoration:none;}
.movie-src{margin-top:10px;font-size:11.5px;color:var(--text3);}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.modal.movie-modal{flex-direction:column;}.movie-modal-poster{flex:none;width:160px;margin:0 auto;padding:48px 0 0;}.movie-modal-body{padding:16px 16px 20px;}.movie-modal .modal-name{font-size:21px;margin-right:0;}}

/* 할인 게임 상세 팝업 — 상품 팝업 틀(.modal)을 한 칸으로 쓴다 */
.modal.game-modal{display:block;width:min(560px,95vw);}
.game-modal .modal-close{position:absolute;top:12px;right:12px;z-index:3;background:rgba(0,0,0,.6);color:#fff;}
.game-modal-thumb{display:flex;justify-content:center;padding:28px 28px 0;}
.game-modal-thumb-inner{position:relative;width:min(100%,347px);aspect-ratio:231/87;border-radius:8px;overflow:hidden;background:var(--surface);}
.game-modal-thumb-inner img{display:block;width:100%;height:100%;object-fit:contain;}
.game-modal-body{padding:20px 28px 28px;}
.game-modal .modal-name{font-size:22px;margin:4px 0 0;}
.game-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:16px 0 22px;font-size:13px;}
.game-facts dt{color:var(--text3);}
.game-facts dd{margin:0;color:var(--text2);}
.game-prices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.game-prices li{display:flex;align-items:baseline;gap:10px;padding:12px 14px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);font-size:14px;}
.game-prices li.is-best{border-color:rgba(46,213,115,.5);}
.game-price-store{min-width:88px;font-weight:700;}
.game-price-now{font-weight:800;}
.game-prices s{font-size:12px;color:var(--text3);}
.game-price-off{font-size:12px;font-weight:800;color:var(--green);}
.game-prices a{margin-left:auto;font-size:13px;font-weight:700;color:var(--gold);text-decoration:none;}
.game-prices-msg{font-size:13px;color:var(--text3);}
.game-lowest{margin-top:12px;font-size:13px;color:var(--text2);}
.game-lowest b{color:var(--text);}
.game-buy{margin-top:20px;background:var(--green);color:#000;}
.game-note{margin-top:12px;font-size:11.5px;line-height:1.6;color:var(--text3);}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.game-modal-thumb{padding:44px 16px 0;}.game-modal-body{padding:16px 16px 20px;}.game-prices li{flex-wrap:wrap;}}

/* 쿠팡 파트너스 고지 — 본문보다 크고 눈에 띄는 색으로, 링크가 있는 화면 가장 위에 */
.cp-disclosure{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:10px;background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.4);color:var(--gold);font-size:14px;font-weight:600;line-height:1.5;}
.cp-disclosure-tag{flex-shrink:0;font-size:11px;font-weight:800;padding:2px 7px;border-radius:4px;background:var(--gold);color:#000;}
.cp-disclosure-top{margin:92px 48px 0;}
.cp-disclosure-top + .hero-frame{margin-top:12px;}
.cp-disclosure-inline{margin:0 4% 20px;}
.cat-page .cp-disclosure-inline{margin-bottom:24px;}
.cp-disclosure-modal{margin-bottom:10px;font-size:13px;}
.modal-buy-empty{font-size:13px;color:var(--text3);padding:10px 0;}
@media(max-width:1280px){.cp-disclosure-top{margin:82px 36px 0;}}
@media(max-width:960px){.cp-disclosure-top{margin:70px 24px 0;}}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.cp-disclosure-top{margin:84px 4% 0;}.cp-disclosure{font-size:13px;align-items:flex-start;}}
/* 홈: 넓은 화면(1025px~)에서는 고지를 메인 배너 오른쪽 1·2·3위 아래(.cp-disclosure-hero)로 옮기고 위 띠는 숨긴다 (사용자 결정 2026-10-30).
   1·2·3위 칸이 숨는 좁은 화면(~1024px)에서는 위 띠 그대로. 문구는 그대로, 첫 화면에서 보이는 자리 */
/* 1·2·3위 카드 밑, 아래 끝 = 상품 이미지 아래 선 (2026-11-03). 한 줄(약 550px)은 카드 칸(280px)보다 넓어 왼쪽으로 나가므로
   이미지와 겹치지 않을 만큼 넓을 때(.hero-side 1340px~ = 이미지와 카드 사이 290px 이상)만 한 줄, 아니면 카드 폭 안에서 줄바꿈 */
.cp-disclosure-hero{align-self:flex-end;align-items:flex-start;margin-top:6px;padding:7px 14px;font-size:13px;}
@container (min-width:1340px){.cp-disclosure-hero{white-space:nowrap;align-items:center;}}
@media(max-width:1024px){.cp-disclosure-hero{display:none;}}
@media(min-width:1025px){.cp-disclosure-top{display:none;}.cp-disclosure-top + .hero-frame{margin-top:92px;}}
@media(min-width:1025px) and (max-width:1280px){.cp-disclosure-top + .hero-frame{margin-top:82px;}}


/* 카테고리 페이지 (/{slug}) */
.cat-page{padding-top:100px;}
.cat-header{padding:0 4%;margin-bottom:4px;}
.cat-header h1{font-size:32px;font-weight:900;margin-bottom:8px;}
.cat-header p{color:var(--text2);font-size:14px;}
.cat-empty{margin:40px 4% 0;padding:80px 20px;text-align:center;border:1px dashed var(--border);border-radius:16px;}
.cat-empty-icon{font-size:48px;margin-bottom:14px;}
.cat-empty p{font-size:17px;font-weight:700;color:var(--text);}
.cat-empty span{display:block;margin-top:6px;font-size:13px;color:var(--text3);}

/* 광고 줄 제목 옆 '광고' 표기 (스폰서 줄은 끌 수 없음) */
.row-ad-label{font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;border:1px solid rgba(245,200,66,.45);color:var(--gold);align-self:center;}

/* 브랜드 추천 줄 — 스폰서 카드 + 광고주가 고른 상품 */
.brandpick-track{display:flex;gap:14px;overflow-x:auto;padding:10px 4% 10px 70px;scrollbar-width:none;}
.brandpick-track::-webkit-scrollbar{display:none;}
.brandpick-track .card:hover{transform:none;}
.brandpick-sponsor{flex-shrink:0;width:var(--card-w);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.1);}
.brandpick-sponsor .infeed-label{align-self:flex-start;margin-bottom:auto;}
.brandpick-sponsor.is-link{cursor:pointer;}
.brandpick-brand{font-size:22px;font-weight:900;color:#fff;}
.brandpick-tagline{font-size:13px;line-height:1.5;color:rgba(255,255,255,.75);}
.brandpick-cta{margin-top:8px;align-self:flex-start;padding:8px 14px;border-radius:8px;background:#fff;color:#111;font-size:12px;font-weight:700;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.brandpick-track{padding:10px 4%;}}

/* 구매 가이드 글 (/guide/{id}) */
.gd-page{padding-top:80px;}
.gd-hero{height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.gd-hero-emoji{font-size:84px;line-height:1;}
.gd-hero-label{font-size:13px;font-weight:700;color:#1f2937;background:rgba(255,255,255,.6);padding:5px 12px;border-radius:20px;}
.gd-hero.has-photo{position:relative;height:340px;justify-content:flex-end;padding-bottom:28px;background-size:cover;background-position:center;}  /* 대표 사진 (Unsplash) */
.gd-credit{position:absolute;right:14px;bottom:10px;font-size:11px;color:rgba(255,255,255,.75);text-decoration:none;}
.gd-credit:hover{color:#fff;text-decoration:underline;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.gd-hero.has-photo{height:220px;padding-bottom:20px;}}
.gd-body{max-width:760px;margin:0 auto;padding:40px 20px 80px;}
.gd-body h1{font-size:30px;font-weight:900;line-height:1.35;}
.gd-intro{margin-top:12px;font-size:16px;line-height:1.7;color:var(--text2);}
.gd-check{margin-top:28px;padding:22px 24px;border-radius:14px;background:rgba(245,200,66,.07);border:1px solid rgba(245,200,66,.25);}
.gd-check strong{display:block;font-size:15px;color:var(--gold);margin-bottom:12px;}
.gd-check ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;}
.gd-check li{font-size:14.5px;line-height:1.6;color:var(--text2);}
.gd-check li b{color:var(--text);margin-right:6px;}
.gd-toc{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px;}
.gd-toc a{padding:7px 14px;border-radius:20px;border:1px solid var(--border);font-size:13px;color:var(--text2);text-decoration:none;transition:all .15s;}
.gd-toc a:hover{border-color:var(--gold);color:var(--gold);}
.gd-chapter{padding-top:44px;scroll-margin-top:80px;}
.gd-chapter-head{padding-bottom:16px;margin-bottom:8px;border-bottom:1px dashed var(--border);}
.gd-chapter-no{font-size:12px;font-weight:800;letter-spacing:1px;color:var(--gold);}
.gd-chapter-head h2{margin-top:6px;font-size:24px;font-weight:900;}
.gd-chapter-head p{margin-top:4px;font-size:14px;color:var(--text3);}
.gd-sec{padding:18px 0 4px;}
.gd-sec h3{font-size:17px;font-weight:800;display:flex;align-items:baseline;gap:10px;}
.gd-sec h3 span{font-size:13px;font-weight:700;color:var(--text3);}
.gd-sec p{margin-top:8px;font-size:15px;line-height:1.8;color:var(--text2);}
.gd-sec ul{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;}
.gd-sec li{font-size:15px;line-height:1.7;color:var(--text2);}
.gd-callout{margin-top:14px;padding:14px 18px;border-radius:10px;background:var(--bg3);border:1px solid var(--border);}
.gd-callout strong{font-size:13.5px;color:var(--text);}
.gd-callout p{margin-top:4px;font-size:14px;}
.gd-more{margin-top:16px;width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;}
.gd-more:hover{border-color:var(--gold);color:var(--gold);}
.gd-footer{margin-top:56px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.gd-cta{padding:14px 28px;border-radius:10px;background:var(--gold);color:#000;font-size:15px;font-weight:800;text-decoration:none;}
.gd-back{font-size:13px;color:var(--text3);text-decoration:none;}
.gd-back:hover{color:var(--text2);}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.gd-hero{height:180px;}.gd-hero-emoji{font-size:60px;}.gd-body h1{font-size:24px;}.gd-chapter-head h2{font-size:20px;}}

/* 인피드 배너 — 랭킹 줄 사이 가로 광고. 광고주 색 + '광고' 표기로 일반 순위와 구분 */
.infeed-wrap{padding:40px 4% 0 70px;}
.infeed-banner{display:flex;align-items:center;gap:24px;aspect-ratio:8/1;padding:22px 28px;border-radius:16px;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;}
.infeed-banner:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.45);}
.infeed-copy{flex:1;min-width:0;}
.infeed-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.infeed-label{font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);color:#fff;}
.infeed-brand{font-size:12px;font-weight:600;color:rgba(255,255,255,.75);}
.infeed-title{font-size:22px;font-weight:800;line-height:1.3;color:#fff;}
.infeed-desc{margin-top:6px;font-size:14px;color:rgba(255,255,255,.8);}
.infeed-visual{flex-shrink:0;font-size:72px;line-height:1;}
.infeed-cta{flex-shrink:0;padding:10px 18px;border-radius:8px;background:#fff;color:#111;font-size:13px;font-weight:700;}
/* 쿠팡 파트너스 이미지 배너: 받은 크기 그대로 가운데에 (늘리면 흐려진다). 틀은 배너 크기에 딱 맞추고, 모바일은 폭에 맞춰 줄인다 */
.infeed-partner{position:relative;width:fit-content;max-width:100%;margin:0 auto;padding:30px 6px 6px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);}
/* 광고 표시는 너무 작거나 배경과 비슷한 색이면 안 된다 (공정위 지침) — 12px, 흰 바탕에 검은 글씨 */
.infeed-partner .infeed-label{position:absolute;top:6px;left:6px;font-size:12px;padding:2px 8px;background:#fff;border-color:#fff;color:#111;}
.infeed-partner a{display:block;width:100%;}
.infeed-partner img{display:block;width:100%;height:100%;border-radius:4px;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.infeed-pc-only{display:none;}.infeed-wrap{padding:32px 4% 0;}.infeed-banner{gap:14px;aspect-ratio:auto;padding:18px;}.infeed-title{font-size:17px;}.infeed-desc{font-size:13px;}.infeed-visual{font-size:48px;}.infeed-cta{display:none;}}
.top10-track{display:flex;align-items:flex-start;gap:28px;padding:4px 0 8px 70px;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform;}
.top10-card{flex-shrink:0;display:flex;align-items:flex-start;cursor:pointer;}
/* 순위 숫자: 포스터 높이의 62%, 포스터 왼쪽에 윗선을 맞춰 둔다 — 제품을 가리지 않게 겹치지 않는다 (사용자 결정 2026-10-30) */
.top10-num-slot{height:calc(var(--t10-poster,150px) * .62);flex-shrink:0;position:relative;margin-right:10px;z-index:3;pointer-events:none;}
.top10-num{display:block;height:100%;width:auto;user-select:none;pointer-events:none;overflow:visible;transform:skewX(-8deg);transform-origin:top left;filter:drop-shadow(0 6px 10px rgba(0,0,0,.65));}
.top10-poster-col{display:flex;flex-direction:column;position:relative;z-index:2;}
.top10-poster{width:var(--t10-poster,150px);aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;position:relative;z-index:2;background:var(--surface);transition:transform .25s,box-shadow .25s;}
.top10-poster:hover{transform:translateY(-6px);box-shadow:0 2px 6px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.45);}
.top10-poster-img{width:100%;height:100%;object-fit:contain;background:#fff;}
.top10-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:42px;}
/* 상품 줄 카드(RankingCard)와 같은 배치: 아래 가운데 가로 버튼 (2026-11-05) */
.top10-poster:hover .card-hover-actions{opacity:1;transform:translateY(0);}
.top10-info{padding:10px 2px 0;width:var(--t10-poster,150px);}
.top10-name{min-height:calc(13px * 1.45 * 2);font-size:13px;font-weight:400;line-height:1.45;color:#a9a9b8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.filter-bar{padding:0 4%;display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.filter-chip{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text2);font-family:inherit;transition:all .15s;}
.filter-chip:hover{border-color:var(--gold);color:var(--gold);}
.filter-chip.active{background:rgba(245,200,66,.15);border-color:var(--gold);color:var(--gold);}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(4px);}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--bg3);border:1px solid var(--border);border-radius:16px;width:min(1060px,95vw);max-height:90vh;overflow-y:auto;transform:scale(.95) translateY(20px);transition:transform .25s;display:grid;grid-template-columns:minmax(0,560px) minmax(340px,1fr);position:relative;}
.modal-overlay.open .modal{transform:scale(1) translateY(0);}
.modal-left{position:sticky;top:0;padding:32px;background:var(--bg3);border-right:1px solid var(--border);}
.modal-img{width:100%;max-width:492px;margin-left:auto;margin-right:auto;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface);margin-bottom:20px;}
.modal-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:96px;}
.modal-rank-big{font-family:'Bebas Neue',sans-serif;font-size:64px;line-height:1;text-align:center;margin-bottom:8px;}
.modal-rank-big.r1{color:var(--gold);}
.modal-rank-big.r2{color:var(--silver);}
.modal-rank-big.r3{color:var(--bronze);}
.modal-rank-big.rn{color:var(--text3);}
.modal-right{padding:32px;}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.modal-brand{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;}
.modal-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:none;cursor:pointer;color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.modal-close:hover{background:rgba(255,255,255,.15);}
.modal-name{font-size:26px;font-weight:900;line-height:1.2;margin-bottom:16px;}
.modal-score-row{display:flex;align-items:center;gap:20px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border);}
.modal-score-main{display:flex;flex-direction:column;align-items:center;}
.modal-score-big{font-size:48px;font-weight:900;color:var(--gold);line-height:1;}
.modal-score-stars{color:var(--gold);font-size:16px;margin-top:2px;}
.modal-score-count{font-size:11px;color:var(--text3);margin-top:2px;}
.modal-scores-detail{flex:1;display:flex;flex-direction:column;gap:6px;}
.score-row{display:flex;align-items:center;gap:8px;}
.score-label{font-size:11px;color:var(--text3);width:48px;flex-shrink:0;}
.score-track{flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;}
.score-fill{height:100%;background:var(--gold);border-radius:2px;transition:width 1s ease;}
.score-val{font-size:11px;font-weight:700;color:var(--gold);width:20px;text-align:right;}
.modal-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.modal-tag{padding:4px 10px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:4px;font-size:11px;color:var(--text2);}
.modal-section{margin-bottom:20px;}
.modal-section-title{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px;}
.modal-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pros-list,.cons-list{background:rgba(255,255,255,.03);border-radius:8px;padding:12px;}
.pros-list{border-top:2px solid var(--green);}
.cons-list{border-top:2px solid var(--accent2);}
.pc-item{display:flex;align-items:flex-start;gap:6px;font-size:12px;color:var(--text2);margin-bottom:6px;line-height:1.4;}
.pc-item:last-child{margin-bottom:0;}
.pc-item .dot{flex-shrink:0;margin-top:4px;width:6px;height:6px;border-radius:50%;}
.pros-list .dot{background:var(--green);}
.cons-list .dot{background:var(--accent2);}
.modal-price-box{background:rgba(245,200,66,.05);border:1px solid rgba(245,200,66,.2);border-radius:10px;padding:16px;margin-bottom:16px;}
.modal-price-main{font-size:28px;font-weight:900;color:var(--gold);margin-bottom:4px;}
.modal-price-sub{font-size:12px;color:var(--text3);}
.modal-buy-btns{display:flex;flex-direction:column;gap:8px;}
.modal-buy-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:all .15s;text-decoration:none;color:inherit;}
.modal-buy-btn:hover{transform:scale(1.01);opacity:.9;}
.mbb-c{background:#e31c1c;color:#fff;}
.mbb-n{background:#03c75a;color:#fff;}
.mbb-a{background:#ff9900;color:#000;}
.modal-rank-history{display:flex;align-items:flex-end;gap:4px;height:60px;}
.rh-bar{flex:1;background:rgba(245,200,66,.2);border-radius:2px 2px 0 0;position:relative;cursor:default;transition:background .2s;}
.rh-bar:hover{background:rgba(245,200,66,.4);}
.rh-bar-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--text3);white-space:nowrap;}
.toast{position:fixed;bottom:32px;right:32px;z-index:300;background:var(--bg3);border:1px solid var(--gold);border-radius:10px;padding:14px 20px;font-size:13px;font-weight:600;color:var(--gold);transform:translateY(80px);opacity:0;transition:all .3s;max-width:300px;}
.toast.show{transform:translateY(0);opacity:1;}
/* ===== 바닥글 (SiteFooter) — 올리브영 바닥글 구성 참고 (2026-11-05): 알림·문의 + 소개 카드 → 카테고리 줄 → 로고·운영 정보·약관·출처 → 순위 원칙 → 저작권 ===== */
.ft{margin-top:80px;border-top:1px solid var(--border);background:var(--bg);color:var(--text2);font-size:12.5px;}
.ft-in{max-width:1280px;margin:0 auto;padding:0 4%;}
.ft a{color:inherit;text-decoration:none;}
.ft a:hover{color:var(--text);}
.ft .is-disabled{opacity:.45;cursor:not-allowed;}
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;padding:32px 0 28px;}
.ft-rows{display:flex;flex-direction:column;}
.ft-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--border);}
.ft-row:first-child{padding-top:0;}
.ft-row:last-child{border-bottom:0;}
.ft-row h2{font-size:14px;font-weight:700;color:var(--text2);}
.ft-row p{line-height:1.7;color:var(--text3);}
.ft-notice{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.ft-notice li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.ft-notice a,.ft-notice span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text2);}
.ft-notice a:hover{color:var(--text);text-decoration:underline;}
.ft-notice time{flex:none;font-size:11.5px;color:var(--text3);}
.ft-mail{display:inline-block;margin-bottom:4px;font-size:15px;font-weight:600;color:var(--text2)!important;}
.ft-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.ft-btns a,.ft-btns span{padding:7px 14px;border:1px solid var(--border);border-radius:2px;font-size:12px;color:var(--text2);}
.ft-btns a:hover{border-color:var(--text3);}
.ft-card{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 24px;border-radius:4px;background:var(--bg2);border:1px solid var(--border);}
.ft-card-logo{display:flex;align-items:flex-end;font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:2px;line-height:1;color:var(--gold);}
.ft-card-logo .lg-fang,.ft-logo .lg-fang{color:var(--accent);}
.ft-card p{font-size:14px;font-weight:700;line-height:1.6;color:var(--text);}
.ft-card a{align-self:flex-start;font-size:12px;color:var(--gold)!important;}
.ft-bar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.ft-bar ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.ft-bar li{position:relative;padding:13px 18px;font-size:12.5px;}
.ft-bar li:first-child{padding-left:0;}
.ft-bar li+li::before{content:"";position:absolute;left:0;top:50%;width:1px;height:11px;margin-top:-5px;background:var(--border);}
.ft-info{display:grid;grid-template-columns:150px minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr);gap:28px;padding:30px 0;}
.ft-logo{display:flex;align-items:center;font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;line-height:1;color:var(--gold)!important;}
.ft-company b,.ft-guide b{display:block;margin-bottom:8px;font-size:13px;color:var(--text);}
.ft-company p{line-height:1.8;color:var(--text3);}
.ft-company i{margin:0 6px;font-style:normal;color:var(--border);}
.ft-disc{margin-top:6px;font-size:11px;line-height:1.6;color:var(--text3);opacity:.85;}
.ft-policy{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.ft-policy .is-strong{font-weight:800;color:var(--text);}
.ft-guide ul{list-style:none;margin:0;padding:0;}
.ft-guide li{position:relative;padding-left:10px;line-height:1.8;color:var(--text3);}
.ft-guide li::before{content:"·";position:absolute;left:0;}
.ft-note{padding:14px 0;border-top:1px solid var(--border);text-align:center;font-size:11.5px;color:var(--text3);}
.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 28px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text3);}
.ft-top-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--border);border-radius:2px;font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--text2)!important;}
@media(max-width:1024px){.ft-info{grid-template-columns:1fr 1fr;}.ft-logo{grid-column:1/-1;}}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.ft{margin-top:56px;}.ft-top{grid-template-columns:1fr;gap:20px;padding-top:24px;}.ft-row{grid-template-columns:1fr;gap:6px;}.ft-bar li{padding:10px 12px;}.ft-info{grid-template-columns:1fr;gap:18px;padding:24px 0;}.ft-note{text-align:left;}}

/* ===== 네이티브 광고 카드 ===== */
/* 줄 사이 광고 카드 = 쿠팡 파트너스 프로모션 배너 (NativeAdCard). 배너는 자르지 않고 위에 아무것도 얹지 않는다 */
.native-ad-card{flex-shrink:0;display:block;width:var(--card-w);color:inherit;text-decoration:none;cursor:pointer;border-radius:var(--radius);overflow:visible;position:relative;transition:transform .25s,z-index 0s .25s;}
.native-ad-card:hover{transform:scale(1.08) translateY(-8px);z-index:20;transition:transform .25s,z-index 0s;}
.native-ad-img{width:var(--card-w);aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;position:relative;background:var(--surface);}
.native-ad-img img{width:100%;height:100%;object-fit:contain;display:block;}
.native-ad-glow{position:absolute;inset:-1px;border-radius:var(--radius);pointer-events:none;z-index:1;border:1.5px solid rgba(245,200,66,0.25);transition:all .3s ease;}
.native-ad-card:hover .native-ad-glow{border-color:rgba(245,200,66,0.6);box-shadow:0 0 20px rgba(245,200,66,0.2),inset 0 0 20px rgba(245,200,66,0.05);}
.native-ad-info{padding:10px 4px 0;}
.native-ad-name{font-size:13px;font-weight:400;line-height:1.45;color:#a9a9b8;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.native-ad-label{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:3px;background:rgba(245,200,66,0.9);color:#000;font-size:10px;font-weight:800;line-height:1.5;vertical-align:1px;}
.native-ad-brand{font-size:11.5px;font-weight:700;color:#dcdce6;margin-bottom:3px;}
.native-ad-price{font-size:12px;font-weight:700;color:var(--text);}
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--surface) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.hero-frame{margin:92px 48px 24px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.06);}
.hero-media{position:absolute;inset:0;overflow:hidden;transition:opacity .4s ease;}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.hero-mute-btn{position:absolute;top:24px;right:24px;z-index:5;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.hero-mute-btn:hover{background:rgba(0,0,0,.6);border-color:#fff;}
.hero-mute-btn svg{width:18px;height:18px;}
/* 화면에는 안 보이고 검색엔진·화면 낭독기만 읽는 글 (홈 h1) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* 메인 배너 = 쿠팡 판매량 베스트 1·2·3위 (Hero). 상품 이미지는 자르지 않고 흰 바탕에 그대로 */
/* 메인 배너 상품 이미지: 380px → 760px (사용자 결정 2026-10-30, 가로세로 2배). 화면 높이가 낮으면 배너 밖으로 넘치지 않게 78vh 까지 */
/* 이미지 + 1·2·3위 묶음: 배너 높이 가운데에 두고 오른쪽 칸은 이미지 아래 선에 맞춤. 줄어드는 비율 0.53 = 예전 이미지 칸(360px)만 줄던 것과 같게 */
.hero-side{flex:1 0.53 680px;min-width:0;display:flex;align-items:flex-end;align-self:center;gap:40px;container-type:inline-size;}
.hero-product-img{width:min(760px,100%,78vh);aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:20px;display:block;
  /* 배너 한가운데에 (2026-11-03): 칸 가운데 두면 왼쪽 글 칸(520px)이 오른쪽 카드 칸(280px)보다 넓어 120px 오른쪽으로 쏠린다.
     남는 자리가 그만큼 없으면(좁은 화면) 0 = 왼쪽 글 쪽에 붙임 */
  margin-left:max(0px,(100% - min(760px,100%,78vh))/2 - 120px);}
.hero-mobile-img{display:none;width:160px;height:160px;object-fit:contain;background:#fff;border-radius:14px;margin-bottom:12px;}
.hero-rank-card{width:100%;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:10px;color:var(--text);font:inherit;cursor:pointer;backdrop-filter:blur(16px);transition:all .3s ease;}
@media(max-width:1024px){.hero-mobile-img{display:block;}}
@keyframes floatEmoji{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulseGlow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@media(max-width:1024px){.hero-side{display:none!important}}
@media(max-width:1280px){.hero-frame{margin:82px 36px 20px;}}
@media(max-width:960px){.hero-frame{margin:70px 24px 16px;border-radius:16px;}}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.hero-floating{display:none;}.hero-rank{font-size:60px;}.hero-title{font-size:24px;}.nav-cats{display:none;}.nav-cats-area{display:none;}.modal{grid-template-columns:1fr;}.modal-left{position:static;padding:16px 16px 0;border-right:none;}.modal-rank-big{display:none;}.modal-close{position:absolute;top:12px;right:12px;z-index:3;background:rgba(0,0,0,.6);color:#fff;}.hero-frame{margin:0;border-radius:0;border:none;}}

/* 메뉴 개편(007): 하위 카테고리 버튼 줄 · 빈 틀 줄 · 하위 페이지 경로 */
.sub-nav{padding:14px 4% 0;}
.sub-nav-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
.sub-nav-track::-webkit-scrollbar{display:none;}
.sub-chip{flex:none;padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:13px;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s;}
.sub-chip:hover{border-color:rgba(255,255,255,.35);}
.sub-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.sub-chip.active{background:var(--gold);border-color:var(--gold);color:#141414;font-weight:700;}
.sub-section{scroll-margin-top:84px;}
.frame-header{flex-wrap:wrap;}
.frame-more{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:13px;color:var(--text2);text-decoration:none;white-space:nowrap;}
.frame-more:hover{color:var(--text);}
.more-chev{width:16px;height:16px;flex:none;}  /* '더 보기' 화살표 */
.frame-more:hover{color:var(--gold);}
.frame-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:6px 4% 0;}
.frame-card{aspect-ratio:1/1;border-radius:10px;border:1px dashed var(--border);background:var(--bg2);display:grid;place-items:center;}
.frame-card span{font-size:12px;color:var(--text3);}
.sub-crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text3);margin-bottom:6px;}
.sub-crumb a{color:var(--text2);text-decoration:none;}
.sub-crumb a:hover{color:var(--gold);}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.frame-track{grid-template-columns:repeat(3,minmax(0,1fr));}.frame-card:nth-child(n+4){display:none;}.sub-section{scroll-margin-top:70px;}}

/* OTT 최근 공개작 (영상물등급위원회 자체등급분류) — 포스터 칸 2:3. 이미지(ott_title.image_url)가 없으면 제목으로 만든 글자 카드 */
.ott-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 4% 0;margin-bottom:12px;}
.ott-tabs::-webkit-scrollbar{display:none;}
.ott-tab{flex:none;padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text2);font:inherit;font-size:13px;cursor:pointer;transition:color .15s,border-color .15s;}
.ott-tab:hover{color:var(--text);border-color:rgba(255,255,255,.3);}
.ott-tab[aria-selected="true"]{background:var(--text);border-color:var(--text);color:#000;font-weight:700;}
.ott-tab:disabled{cursor:default;opacity:.5;}
.ott-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.ott-track{--ott-w:240px;display:grid;grid-auto-flow:column;grid-auto-columns:var(--ott-w);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 4%;padding:4px 4% 10px;scrollbar-width:none;}
.ott-track::-webkit-scrollbar{display:none;}
.ott-card{display:block;min-width:0;scroll-snap-align:start;color:inherit;text-decoration:none;}
/* 줄 카드는 가로 16:9 (예고편 썸네일이 꽉 차게). 상세 페이지(is-hero)는 세로 2:3 */
.ott-poster{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;padding:12px 14px;border:1px solid rgba(255,255,255,.08);background:var(--surface);transition:border-color .15s;}
.ott-poster.has-img{padding:0;}
.ott-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ott-poster-ott{position:absolute;top:11px;left:12px;font-size:11px;font-weight:700;letter-spacing:.3px;color:rgba(255,255,255,.6);}
.ott-poster-title{position:relative;font-size:17px;font-weight:900;line-height:1.3;color:#fff;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.35);}
/* 이미지 없는 작품의 디자인 카드: 그라데이션 · 가운데 종류 아이콘 · 왼쪽 아래 굵은 제목 + OTT 색 막대 (예고편 썸네일 느낌) */
.ott-poster.is-art{justify-content:flex-end;padding:10px 12px 11px;}
.ott-art-icon{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);display:grid;place-items:center;color:rgba(255,255,255,.5);}
.ott-art-icon svg{width:26px;height:26px;}
/* 막대는 종류 글자 시작점부터 제목 끝까지 — 한 줄 제목이면 짧게, 두 줄이면 그만큼 (같은 줄 수끼리는 같은 길이) */
.ott-art-text{position:relative;padding-left:11px;}
.ott-art-text::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;background:var(--ott-accent,#e50914);}
.ott-art-kind{display:block;margin-bottom:2px;font-size:11px;font-weight:700;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 긴 제목: 시즌·부제는 위 줄로, 길이에 따라 글자를 줄이고, 그래도 넘치면 두 줄에서 '…' */
.ott-art-title{font-weight:900;line-height:1.18;letter-spacing:-.2px;color:#fff;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 6px rgba(0,0,0,.3);}
.ott-art-title.t-xl{font-size:19px;}
.ott-art-title.t-l{font-size:17px;}
.ott-art-title.t-m{font-size:15px;}
.ott-art-title.t-s{font-size:14px;}
.ott-poster .ott-fill{object-fit:cover;}
.ott-poster.has-video:not(.is-hero){padding:0;background:#000;}
.ott-state{position:absolute;top:8px;right:8px;z-index:1;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:800;background:var(--gold);color:#000;}
.ott-name{display:block;margin-top:8px;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s;}
.ott-meta{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11.5px;color:var(--text2);min-width:0;}
.ott-meta-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ott-date{display:block;margin-top:3px;font-size:11.5px;color:var(--text3);font-variant-numeric:tabular-nums;}
.ott-first{font-weight:700;color:var(--gold);}
.ott-grade{display:inline-grid;place-items:center;flex:none;min-width:20px;height:20px;padding:0 4px;border-radius:50%;font-size:10px;font-weight:900;line-height:1;color:#fff;}
.ott-grade.all{border-radius:5px;background:#2fae5b;}
.ott-grade.g12{background:#e2b500;color:#000;}
.ott-grade.g15{background:#ee7d1a;}
.ott-grade.g19{background:#e0313b;}
.ott-card:hover .ott-poster{border-color:rgba(255,255,255,.4);}
.ott-card:hover .ott-name{color:var(--gold);}
.ott-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px;}
.ott-card.is-skeleton .ott-poster{animation:deal-pulse 1.2s ease-in-out infinite;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.ott-track{--ott-w:200px;gap:10px;}.ott-poster-title{font-size:15px;}.ott-art-icon svg{width:22px;height:22px;}.ott-art-title.t-xl{font-size:17px;}.ott-art-title.t-l{font-size:15px;}.ott-art-title.t-m,.ott-art-title.t-s{font-size:13px;}}

/* OTT 작품 상세 /ott/{id} — 왼쪽 포스터 칸, 오른쪽 작품 정보. 아래에 공개 기록 표와 같은 OTT 최근 공개작 */
.ott-detail{padding-left:4%;padding-right:4%;}
.ott-hero{display:flex;align-items:flex-start;gap:36px;margin-top:10px;}
.ott-poster.is-hero{flex:0 0 260px;width:260px;aspect-ratio:2/3;padding:22px 18px;}
.ott-poster.is-hero.has-img{padding:0;}
.ott-poster.is-hero .ott-poster-title{font-size:24px;-webkit-line-clamp:6;}
.ott-poster.is-hero .ott-art-icon svg{width:52px;height:52px;}
.ott-poster.is-hero .ott-art-kind{font-size:13px;white-space:normal;}
.ott-poster.is-hero .ott-art-title{font-size:26px;-webkit-line-clamp:5;}
.ott-poster.is-hero .ott-art-title.t-m,.ott-poster.is-hero .ott-art-title.t-s{font-size:22px;}
.ott-poster.is-hero .ott-art-text::before{width:4px;}
.ott-poster.is-hero .ott-poster-ott{top:16px;left:18px;font-size:12px;}
.ott-hero-body{flex:1;min-width:0;max-width:720px;}
.ott-hero-body h1{margin:6px 0 4px;font-size:30px;font-weight:900;line-height:1.3;word-break:keep-all;text-wrap:balance;}
.ott-orig{margin:0 0 6px;font-size:13px;color:var(--text3);}
.ott-hero-grade{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13px;color:var(--text2);}
.ott-hero-body .game-facts{margin:16px 0 18px;}
.ott-block{margin-top:44px;}
.ott-block h2{margin:0 0 14px;font-size:18px;font-weight:700;}
.ott-records-wrap{max-width:900px;overflow-x:auto;}
.ott-records{width:100%;border-collapse:collapse;font-size:13px;}
.ott-records th,.ott-records td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
.ott-records th{font-size:12px;font-weight:500;color:var(--text3);white-space:nowrap;}
.ott-records td{color:var(--text2);}
.ott-records td:first-child,.ott-records td:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;}
.ott-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px 16px;max-width:1100px;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.ott-hero{flex-direction:column;align-items:stretch;gap:20px;}.ott-poster.is-hero{flex:none;width:180px;margin:0 auto;padding:16px 14px;}.ott-poster.is-hero .ott-poster-title{font-size:19px;}.ott-hero-body h1{font-size:23px;}.ott-more{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;}}

/* OTT 공식 유튜브 예고편 — 썸네일(16:9)은 자르지 않는다. 줄 카드는 칸을 꽉 채우고, 상세(세로 칸)는 위쪽에 그대로. 출처 'YouTube' 표시 (YouTube 정책) */
.ott-poster.is-hero.has-video{justify-content:flex-start;padding-top:32px;}
.ott-poster.is-hero.has-video .ott-art-icon{display:none;}
.ott-poster.is-hero.has-video .ott-art-text{margin-top:auto;}
.ott-thumb{position:relative;display:block;margin:0 -12px 10px;aspect-ratio:16/9;background:#000;}
.ott-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.ott-yt{position:absolute;right:6px;bottom:6px;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.75);color:#fff;font-size:10px;font-weight:700;letter-spacing:.2px;}
.ott-poster.is-hero.has-video{padding-top:46px;}
.ott-poster.is-hero .ott-thumb{margin:0 -18px 14px;}
.ott-player{position:relative;max-width:860px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;}
.ott-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ott-block .movie-src{margin-top:10px;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.ott-poster.is-hero.has-video{padding-top:38px;}.ott-poster.is-hero .ott-thumb{margin:0 -14px 12px;}}

/* 웹툰 "오늘 뭐 볼까?" (만화규장각) — 세로 표지(없으면 제목 카드) 아래 제목·작가·추천 이유·줄거리, 플랫폼 검색으로 가는 버튼 */
.wt-section .section-header{flex-wrap:wrap;}
.wt-track{display:grid;grid-auto-flow:column;grid-auto-columns:176px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 4%;padding:4px 4% 10px;scrollbar-width:none;}
.wt-track::-webkit-scrollbar{display:none;}
.wt-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:7px;min-width:0;padding:0 0 12px;border-radius:12px;overflow:hidden;background:var(--bg2);border:1px solid var(--border);}
.wt-card > .wt-go{margin-left:12px;margin-right:12px;}
.wt-open{display:flex;flex-direction:column;gap:7px;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.wt-open > :not(.wt-cover){margin-left:12px;margin-right:12px;}
.wt-open:hover .wt-title{color:var(--gold);}
.wt-open:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:12px;}
.wt-by{display:block;}

.wt-card.is-skeleton{min-height:400px;animation:deal-pulse 1.2s ease-in-out infinite;}
.wt-cover{position:relative;display:flex;align-items:flex-end;aspect-ratio:3/4;padding:12px;margin-bottom:3px;background:linear-gradient(160deg,#2a2a33,#121216);}
.wt-cover.naver{background:linear-gradient(160deg,#123d27,#07140d);}
.wt-cover.kakao{background:linear-gradient(160deg,#3d3510,#141107);}
.wt-cover.book{background:linear-gradient(160deg,#3a2216,#140c08);}
.wt-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.wt-cover-title{position:relative;font-size:17px;font-weight:900;line-height:1.3;color:#fff;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}
.wt-pf{position:absolute;top:8px;left:8px;z-index:1;padding:2px 7px;border-radius:5px;background:rgba(0,0,0,.75);font-size:11px;font-weight:700;}
.wt-pf.naver{color:#2fd36b;}
.wt-pf.kakao{color:#f7d94c;}
.wt-pf.book{color:#f0b48a;}
.wt-age{position:absolute;top:8px;right:8px;z-index:1;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.75);color:#fff;font-size:11px;}
.wt-title{transition:color .15s;font-size:15px;font-weight:900;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.wt-by{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wt-why{display:flex;flex-wrap:wrap;gap:4px;}
.wt-why span{font-size:11px;padding:1px 7px;border-radius:4px;background:rgba(245,200,66,.14);color:var(--gold);}
.wt-outline{margin-top:0;margin-bottom:0;font-size:12px;line-height:1.5;color:var(--text3);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.wt-go{margin-top:auto;display:block;text-align:center;padding:7px 8px;border-radius:8px;border:1px solid var(--border);color:var(--text);font-size:12.5px;font-weight:700;text-decoration:none;transition:background .15s,border-color .15s;}
.wt-go.naver{border-color:rgba(47,211,107,.5);}
.wt-go.kakao{border-color:rgba(247,217,76,.5);}
.wt-go:hover{background:rgba(255,255,255,.06);}
.wt-go:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.wt-track{grid-auto-columns:150px;gap:10px;}.wt-title{font-size:14px;}.wt-cover-title{font-size:15px;}}

/* 웹툰 상세 (모달) — 영화 상세 틀을 쓰고 표지 비율만 세로 3:4 */
.wt-modal .movie-modal-poster img,.wt-modal .movie-modal-poster .wt-cover{aspect-ratio:3/4;border-radius:10px;}
.wt-modal .movie-modal-poster .wt-cover{width:100%;}
.wt-modal-why{margin-top:10px;}
.wt-modal .ott-player{max-width:100%;}
.wt-go-lg{margin-top:20px;padding:11px 12px;font-size:14px;}

/* 만화책 상세 — 전자책 서점 버튼 */
.cm-stores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;}
.cm-store{margin-top:0;padding:10px 8px;font-size:13px;white-space:nowrap;}
@media(max-width:480px){.cm-store{padding:10px 4px;font-size:12px;}}
.cm-store.ridi{border-color:rgba(31,140,230,.55);}
.cm-store.series{border-color:rgba(47,211,107,.5);}
.cm-store.kakao{border-color:rgba(247,217,76,.5);}

/* 홈 메뉴 베스트 줄의 '○○ 더 보기' — 페이지 점이 있으면 그 앞에 */
.row-more + .page-indicator{margin-left:12px;}

.wt-go.book{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:transparent;width:calc(100% - 24px);border-color:rgba(31,140,230,.5);}

/* 박스오피스 상세 — 예매하러 가기 (네이버 시간표 · 메가박스 · CGV · 롯데시네마) */
.bo-book{grid-template-columns:repeat(4,minmax(0,1fr));}
.cm-store.bo-naver{border-color:rgba(47,211,107,.5);}
.cm-store.bo-megabox{border-color:rgba(124,92,255,.55);}
.cm-store.bo-cgv{border-color:rgba(255,71,87,.5);}
.cm-store.bo-lotte{border-color:rgba(255,120,80,.5);}
@media(max-width:480px){.bo-book{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* 박스오피스 카드 아래 '예매하기' (상세 창의 예매처 버튼으로) */
.bo-cell{width:var(--bo-w);position:relative;z-index:2;display:flex;flex-direction:column;}
.bo-cell > .bo-card{width:100%;}
.bo-book-btn{margin-top:8px;width:100%;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:transparent;border-color:rgba(245,200,66,.45);}
.bo-book-btn:hover{background:rgba(245,200,66,.08);}

/* 개인정보처리방침 등 문서 페이지 (/privacy) */
.legal-page{max-width:860px;margin:0 auto;padding:110px 24px 80px;line-height:1.75;font-size:15px;color:var(--text);}
.legal-page h1{font-size:30px;font-weight:900;margin-bottom:14px;}
.legal-page h2{font-size:18px;font-weight:800;margin:36px 0 12px;padding-top:20px;border-top:1px solid var(--border);}
.legal-page p{margin:0 0 12px;color:var(--text2);}
.legal-page ul{margin:0 0 12px;padding-left:20px;color:var(--text2);}
.legal-page li{margin-bottom:6px;}
.legal-page b{color:var(--text);}
.legal-page code{font-size:13px;padding:1px 6px;border-radius:4px;background:var(--bg3);color:var(--gold);}
.legal-page a{color:var(--gold);}
.legal-lead{font-size:16px;}
.legal-date{font-size:13px;color:var(--text3)!important;}
.legal-table-wrap{overflow-x:auto;margin:0 0 12px;}
.legal-table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px;}
.legal-table th{text-align:left;font-size:13px;color:var(--text3);font-weight:700;padding:10px 12px;background:var(--bg2);border-bottom:1px solid var(--border);white-space:nowrap;}
/* 한글은 낱말 중간에서 줄을 바꾸지 않게(keep-all), 첫 칸(구분)은 '방문 통계'가 한 줄에 들어갈 폭 */
.legal-table td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text2);word-break:keep-all;overflow-wrap:anywhere;}
.legal-table td:first-child{min-width:8.5em;color:var(--text);}
.legal-table td small{color:var(--text3);font-size:12px;}
.legal-todo{color:var(--accent2)!important;background:rgba(229,9,20,.12);padding:1px 6px;border-radius:4px;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.legal-page{padding:84px 16px 60px;font-size:14px;}.legal-page h1{font-size:24px;}}

/* ── 금융 목업 (/admin/mock/finance, 이 PC에서만) ── */
.fin-head{flex-wrap:wrap;row-gap:4px;}
.mock-ribbon{margin:0 4% 16px;padding:10px 14px;border:1px dashed var(--gold);border-radius:10px;color:var(--gold);font-size:13px;background:rgba(245,200,66,.06);}
.fin-ind{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:6px 4% 0;}
.fin-ind-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px 12px;min-width:0;}
.fin-ind-name{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fin-ind-value{font-size:24px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.fin-ind-value small{font-size:13px;font-weight:500;color:var(--text2);margin-left:3px;}
.fin-ind-diff{font-size:12px;font-weight:700;margin-top:2px;color:var(--text3);}
.fin-ind-card svg{display:block;width:100%;height:30px;margin:8px 0 6px;color:var(--text3);}
.fin-ind-card.up .fin-ind-diff,.fin-ind-card.up svg{color:var(--accent2);}
.fin-ind-card.down .fin-ind-diff,.fin-ind-card.down svg{color:#5b9bff;}
.fin-ind-src{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fin-calc{margin:6px 4% 0;background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.fin-tabs{display:flex;gap:4px;padding:6px 12px 0;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.fin-tab{padding:12px 16px;border:none;border-bottom:2px solid transparent;background:none;color:var(--text2);font:inherit;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;}
.fin-tab.active{color:var(--text);border-bottom-color:var(--gold);}
.fin-tab:disabled{color:var(--text3);cursor:default;}
.fin-tab em{font-style:normal;font-size:11px;font-weight:500;margin-left:5px;}
.fin-calc-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.fin-form{padding:22px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;align-content:start;}
.fin-field label,.fin-label{display:block;font-size:13px;color:var(--text2);margin-bottom:6px;}
.fin-input{display:flex;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:0 14px;}
.fin-input:focus-within{border-color:var(--gold);}
.fin-input input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font:inherit;font-size:17px;font-weight:700;padding:12px 0;font-variant-numeric:tabular-nums;}
.fin-input span{color:var(--text2);font-size:14px;margin-left:6px;}
.fin-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.fin-quick button{padding:5px 10px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--text2);font:inherit;font-size:12px;cursor:pointer;}
.fin-seg{display:flex;flex-wrap:wrap;gap:6px;}
.fin-seg button{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);font:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.fin-seg button.active{background:var(--gold);border-color:var(--gold);color:#000;}
.fin-result{padding:24px 26px;background:var(--bg3);border-left:1px solid var(--border);display:flex;flex-direction:column;}
.fin-result-label{font-size:14px;color:var(--text2);}
.fin-result-big{font-size:36px;font-weight:900;color:var(--gold);margin:6px 0 20px;font-variant-numeric:tabular-nums;}
.fin-result-big small{font-size:17px;margin-left:4px;}
.fin-result dl{margin:0;display:flex;flex-direction:column;gap:12px;}
.fin-result-row{display:flex;justify-content:space-between;gap:16px;font-size:14px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.fin-result-row dt{color:var(--text2);}
.fin-result-row dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;}
.fin-result-note{margin-top:auto;padding-top:20px;font-size:12px;color:var(--text3);line-height:1.6;}
.fin-notice{margin:40px 4% 0;padding:16px 18px;border-radius:12px;background:var(--bg2);border:1px solid var(--border);color:var(--text3);font-size:13px;line-height:1.7;}
.fin-notice b{color:var(--text2);margin-right:6px;}
@media(max-width:1280px){.fin-ind{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.fin-ind{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.fin-ind-value{font-size:20px;}.fin-calc-body{grid-template-columns:1fr;}.fin-form{grid-template-columns:1fr;}.fin-result{border-left:none;border-top:1px solid var(--border);}.fin-form,.fin-result{padding:18px 16px;}.fin-result-big{font-size:28px;}}

/* ===== 휴대폰 (768px 이하, 또는 손가락 화면이면서 높이 500px 이하 = 휴대폰을 가로로 눕힌 경우 — 2026-11-05) — 모바일 시안 A (사용자 결정 2026-11-04) =====
   같은 조건이 lib/utils/breakpoints.ts MOBILE_MQ 에도 있다 (자동 넘김 · 배너 크기 · 방문 통계 기기 종류)
   위 메뉴줄은 두 줄(로고·검색 / 메뉴 칩), 홈 맨 위는 1·2·3위 카드(.m-hero) + 메뉴 아이콘 줄(.m-cats, MobileHomeTop),
   TOP 10 은 132px 카드 줄(.m-top10), 상품 줄은 손가락으로 밀기(자동 넘김·화살표 없음), 줄 제목 한 줄,
   아래 고정 탭(.m-tabbar, MobileTabBar), 글자 최소 12px. PC·태블릿(769px~)은 그대로 */
.row-copy{display:contents;}
.m-hero,.m-cats,.m-top10,.m-tabbar,.m-sheet{display:none;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){
  /* 위 메뉴줄이 PC(80px)보다 18px 높아(98px) 모든 페이지를 그만큼 내린다 */
  body{padding-top:18px;padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  nav{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:52px 46px;height:auto;padding:0;align-items:center;background:var(--bg);}
  .nav-center{display:contents;}
  .nav-logo{grid-row:1;grid-column:1;justify-self:start;padding-left:16px;}
  .nav-search-wrap{grid-row:1;grid-column:2;padding-right:6px;}
  .nav-search-btn{width:44px;height:44px;color:var(--text);}
  .nav-arrow,.nav-edge{display:none;}
  .nav-cats-scroll-area{grid-row:2;grid-column:1/-1;align-self:start;max-width:none;}
  .nav-cats-track{gap:8px;padding:0 16px 10px;}
  .nav-cat{height:36px;padding:0 14px;display:flex;align-items:center;border-radius:18px;background:var(--bg3);color:var(--text);font-size:14px;}
  .nav-cat.active{background:var(--gold);color:#000;}
  .sub-section,.gd-chapter{scroll-margin-top:106px;}
  /* 홈 맨 위: 메인 배너·큰 숫자 TOP 10 줄 대신 */
  .hero-frame,.home-top10{display:none;}
  .m-top10{display:block;}
  .m-hero{display:block;margin:12px 16px 0;padding:12px;border-radius:16px;background:#1f1f1f;border:1px solid rgba(245,200,66,.25);}
  .m-hero-card{width:100%;display:flex;gap:14px;align-items:center;padding:0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;}
  .m-hero-thumb{flex:none;width:112px;height:112px;border-radius:12px;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:44px;}
  .m-hero-thumb img{width:100%;height:100%;object-fit:contain;}
  .m-hero-text{min-width:0;display:flex;flex-direction:column;gap:2px;}
  .m-hero-rank{font-family:'Bebas Neue',sans-serif;font-size:40px;line-height:1;color:var(--text);}
  .m-hero-rank.r1{color:var(--gold);}
  .m-hero-rank.r2{color:var(--silver);}
  .m-hero-rank.r3{color:var(--bronze);}
  .m-hero-name{font-size:15px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .m-hero-price{font-size:15px;font-weight:900;color:var(--gold);}
  .m-hero-price em{font-style:normal;font-weight:400;font-size:12px;color:var(--text2);}
  .m-hero-price.is-unknown{font-size:12px;font-weight:400;color:var(--text2);}
  .m-hero-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;min-height:24px;font-size:12px;color:var(--text2);}
  .m-hero-dots{display:flex;margin-right:-6px;}
  .m-hero-dots button{width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;}
  .m-hero-dots button::before{content:"";width:6px;height:6px;border-radius:3px;background:#4a4a5a;transition:width .2s;}
  .m-hero-dots button.is-on::before{width:18px;background:var(--gold);}
  .m-cats{display:grid;gap:4px;margin:18px 16px 0;padding:0;list-style:none;}
  .m-cats a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--text);text-decoration:none;white-space:nowrap;}
  .m-cats-icon{width:48px;height:48px;border-radius:16px;background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--gold);}
  /* TOP 10 카드 순위: 동그라미 대신 사진 왼쪽 아래 큰 숫자 */
  .m-top10 .card-rank-badge{top:auto;bottom:2px;left:8px;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;font-size:38px;font-weight:400;line-height:1;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);}
  .m-top10 .card-rank-badge.r1{color:var(--gold);}
  .m-top10 .card-rank-badge.r2{color:var(--silver);}
  .m-top10 .card-rank-badge.r3{color:var(--bronze);}
  .m-top10 .card-img::after{content:"";position:absolute;left:0;bottom:0;width:70%;height:60%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 0 100%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.25) 45%,transparent 70%);}
  /* 줄 제목 한 줄: 넘치면 기준 문구부터 줄임표 */
  .section{padding-top:28px;}
  .section-header{padding:0 16px!important;gap:8px;margin-bottom:4px;}
  .section-title{flex:none;max-width:70%;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .section-subtitle{flex:0 100 auto;min-width:0;font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* 상품 줄: 가운데 벌만, 132px 카드를 손가락으로 민다 (RankingRow 가 자동 넘김을 끈다) */
  .row-viewport{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;}
  .row-viewport::-webkit-scrollbar{display:none;}
  .row-track{--card-w:132px!important;width:max-content;gap:10px;padding:8px 16px 4px;transform:none!important;transition:none!important;}
  .row-copy[data-copy="spare"]{display:none;}
  .row-wrap .row-arrow,.row-wrap .top10-edge{display:none;}
  .row-track .card{scroll-snap-align:start;scroll-margin-left:16px;}
  .card-info{padding:8px 2px 0;}
  .card-brand{font-size:11.5px;margin-bottom:2px;}
  .card-meta{flex-wrap:wrap;gap:2px 6px;}
  .card-price{font-size:14px;}
  .card-price-date{font-size:10.5px;}
  /* 아래 고정 탭 (아이폰 홈 바만큼 비켜 선다) */
  .m-tabbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:150;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(20,20,20,.97);backdrop-filter:blur(12px);border-top:1px solid var(--border);}
  .m-tabbar a,.m-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:0;color:var(--text2);font:inherit;font-size:12px;font-weight:500;text-decoration:none;cursor:pointer;}
  .m-tabbar .is-on{color:var(--gold);font-weight:700;}
  /* 카테고리 창 (아래 탭 '카테고리') */
  .m-sheet{display:block;position:fixed;top:0;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:160;overflow-y:auto;background:var(--bg);padding:0 16px 24px;}
  .m-sheet-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;height:56px;background:var(--bg);font-size:18px;}
  .m-sheet-close{width:44px;height:44px;margin-right:-10px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--text);cursor:pointer;}
  .m-sheet-menu{padding:14px 0;border-bottom:1px solid var(--border);}
  .m-sheet-menu h3{font-size:16px;font-weight:700;margin-bottom:10px;}
  .m-sheet-menu h3 a{color:var(--text);text-decoration:none;}
  .m-sheet-menu h3.is-disabled{color:var(--text2);margin-bottom:0;}
  .m-sheet-menu h3 em{margin-left:6px;font-style:normal;font-size:12px;font-weight:500;}
  .m-sheet-subs{display:flex;flex-wrap:wrap;gap:8px;}
  .m-chip{height:36px;padding:0 14px;display:inline-flex;align-items:center;border-radius:18px;border:1px solid rgba(255,255,255,.14);color:var(--text);font-size:14px;text-decoration:none;}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom));}
}
/* 터치 화면: 눌렀을 때 카드가 커지거나 '상세보기·바로가기'가 남지 않게 (누르면 상세 창) */
@media(hover:none){.card:hover{transform:none;}.top10-poster:hover{transform:none;box-shadow:none;}.card:hover .card-hover-actions,.top10-poster:hover .card-hover-actions{opacity:0;pointer-events:none;}}
/* 손가락 화면인데 PC 모양인 태블릿: 줄 넘기기 버튼(‹ ›)은 마우스를 올려야 보여서 늘 보이게 — 카드를 가리는 어두운 띠 대신 둥근 버튼 (2026-11-05).
   휴대폰은 손가락으로 미는 줄이라 버튼이 없다 (위 휴대폰 묶음의 display:none) */
@media(hover:none){.row-wrap .row-arrow{opacity:1;width:52px;background:none;}.row-wrap .row-arrow svg{width:40px;height:40px;padding:9px;border-radius:50%;background:rgba(20,20,20,.78);box-shadow:0 2px 8px rgba(0,0,0,.4);}}

/* ===== PC 가운데 집중형 (769px~) — 2026-11-05 확정 (밝은 배너), 가운데 칸은 2026-11-06 1280 → 1020px (올리브영과 같은 폭, 사용자 결정) =====
   머리말 세 줄(.sh, SiteHeader) → 홈 메인 배너(.hh-hero, HomeHero) → 가운데 칸(--mw: .site-center · .cat-page · 바닥글).
   상품 줄은 한 화면 4장 (RankingRow rowCardLayout 이 칸 폭에서 계산).
   휴대폰(768px 이하)은 예전 메뉴줄(nav.nav-m) · MobileHomeTop 그대로 */
:root{--mw:1020px;--line:#2b2b2b;--band:#1c1c1f;}
.sh,.hh-hero{display:none;}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.home-search{padding:100px 4% 60px;}}
@media(min-width:769px) and (pointer:fine),(min-width:769px) and (min-height:501px){
  nav.nav-m{display:none;}
  .cp-disclosure-top{display:none;}
  /* 가운데 칸 — 예전 메뉴줄(위에 떠 있던 80px)이 없어져 위 여백을 줄인다 */
  .site-center,.cat-page{max-width:var(--mw);margin-left:auto;margin-right:auto;}
  .cat-page{padding-top:28px;}
  .gd-page{max-width:var(--mw);margin:0 auto;padding-top:0;}
  .legal-page{padding-top:48px;}
  .home-search{padding:32px 4% 60px;}
  .ft-in{max-width:var(--mw);padding:0 24px;}

  /* ── 머리말 (SiteHeader): 내려가면 ③ 메뉴 줄만 위에 붙는다 (①32+1 · ②84 · ③ 윗선 1 만큼 위로) ── */
  .sh{display:block;position:sticky;top:-118px;z-index:100;background:var(--bg);}
  .sh-in{max-width:var(--mw);margin:0 auto;padding:0 24px;display:flex;align-items:center;}
  .sh-util{border-bottom:1px solid var(--line);}
  .sh-util .sh-in{justify-content:flex-end;height:32px;}
  .sh-util a,.sh-util span{position:relative;padding:0 10px;font-size:11.5px;color:var(--text3);text-decoration:none;}
  .sh-util a+a::before,.sh-util span+a::before{content:"";position:absolute;left:0;top:50%;width:1px;height:9px;margin-top:-4px;background:var(--line);}
  .sh-util a:last-child{padding-right:0;}
  .sh-util a:hover{color:var(--text);}
  .sh-main .sh-in{height:84px;gap:48px;}
  .sh-logo{display:flex;align-items:flex-end;flex-shrink:0;font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:2px;line-height:1;color:var(--gold);text-decoration:none;}
  .sh-logo .lg-fang{color:var(--accent);}
  .sh-logo span{transition:transform .25s cubic-bezier(.4,0,.2,1);}
  .sh-logo:hover span{transform:translateY(0) rotate(0deg) scaleY(1) skewX(-6deg)!important;}
  .sh-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);}
  .sh-nav .sh-in{height:50px;}
  .sh-cat{position:relative;align-self:stretch;flex-shrink:0;width:190px;border-left:1px solid var(--line);border-right:1px solid var(--line);}
  .sh-cat>button{display:flex;align-items:center;gap:10px;width:100%;height:100%;padding:0 0 0 20px;border:0;background:none;color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
  .sh-cat>button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
  .sh-cat.is-open>button{background:#1d1d21;}
  .sh-cat>.sh-cat-panel{position:absolute;left:-1px;top:100%;width:190px;background:#16161a;border:1px solid var(--line);border-top:0;box-shadow:0 18px 40px rgba(0,0,0,.45);}
  .sh-menu{display:flex;list-style:none;margin:0 0 0 18px;padding:0;gap:6px;min-width:0;}
  .sh-menu a,.sh-menu span{display:block;padding:0 16px;line-height:48px;font-size:14.5px;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;}
  .sh-menu a:hover{color:#fff;border-bottom-color:var(--text3);}
  .sh-menu a.is-on{border-bottom-color:var(--text);}
  .sh-menu .is-off{color:var(--text3);font-weight:500;cursor:default;}

  /* ── 검색창 (HeaderSearch): 최근 검색어 · 많이 찾는 검색어 | 카테고리별 판매량 1위 ── */
  .hs{position:relative;flex:0 1 460px;min-width:0;}
  .hs-box{display:flex;align-items:center;height:42px;padding:0 6px 0 18px;border:1.5px solid #555;border-radius:21px;background:var(--bg2);}
  .hs-box:focus-within{border-color:var(--text2);}
  .hs-box input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:13.5px;outline:none;}
  .hs-box input::placeholder{color:var(--text3);}
  .hs-box button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;background:none;color:var(--text);cursor:pointer;}
  .hs-box svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
  .hs-box .hs-clear{width:28px;color:var(--text3);}
  .hs-box .hs-clear:hover{color:var(--text);}
  .hs-box .hs-clear svg{width:15px;height:15px;}
  .hs-panel{position:absolute;left:0;top:calc(100% + 8px);z-index:120;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;width:min(660px,calc(100vw - 220px));padding:18px 20px 20px;border:1px solid var(--line);border-radius:12px;background:#1b1b1f;box-shadow:0 18px 50px rgba(0,0,0,.55);}
  .hs-panel.is-single{grid-template-columns:minmax(0,1fr);width:min(420px,calc(100vw - 220px));}
  .hs-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;}
  .hs-head b{font-size:13px;color:var(--text);}
  .hs-head small{font-size:11px;color:var(--text3);}
  .hs-head button{margin-left:auto;padding:0;border:0;background:none;color:var(--text3);font:inherit;font-size:11.5px;cursor:pointer;}
  .hs-head button:hover{color:var(--text);}
  .hs-gap{margin-top:20px;}
  .hs-empty{font-size:12px;color:var(--text3);}
  .hs-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;}
  .hs-panel>section{min-width:0;}  /* 칸 안 내용이 길어도 칸이 넓어지지 않게 (긴 최근 검색어가 오른쪽 칸을 침범하던 문제, 2026-11-06) */
  .hs-chips li{display:flex;align-items:center;max-width:100%;min-width:0;border:1px solid var(--line);border-radius:16px;}
  .hs-chips li>button:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}  /* 긴 검색어는 끝을 … 으로 */
  .hs-chips button{padding:5px 4px 5px 12px;border:0;background:none;color:var(--text2);font:inherit;font-size:12.5px;cursor:pointer;}
  .hs-chips button:hover{color:var(--text);}
  .hs-chips .hs-x{display:flex;align-items:center;padding:5px 10px 5px 2px;color:var(--text3);}
  .hs-chips .hs-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
  .hs-pop{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(5,auto);gap:2px 16px;list-style:none;margin:0;padding:0;}
  .hs-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:5px 0;border:0;background:none;color:var(--text2);font:inherit;font-size:13px;text-align:left;cursor:pointer;}
  .hs-pop button:hover{color:var(--text);}
  .hs-pop i{width:14px;font-style:normal;font-weight:800;font-size:12.5px;color:var(--text3);}
  .hs-pop i.is-top{color:var(--gold);}
  .hs-best{padding-left:24px;border-left:1px solid var(--line);}
  .hs-best ul{list-style:none;margin:0;padding:0;}
  .hs-best a{display:grid;grid-template-columns:18px 52px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #26262b;color:inherit;text-decoration:none;}
  .hs-best li:last-child a{border-bottom:0;}
  .hs-best a:hover .hs-name{color:var(--text);text-decoration:underline;}
  .hs-ico{width:16px;height:16px;color:var(--text3);}
  .hs-cat{font-size:12px;font-weight:700;color:var(--text);}
  .hs-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;color:var(--text2);}
  .hs-best em{font-style:normal;font-size:11px;font-weight:700;color:var(--gold);white-space:nowrap;}

  /* ── 카테고리 칸 (CategoryPanel): 배너 왼쪽 · 머리말 펼침 칸 공용 ── */
  .cpn{position:relative;z-index:5;display:flex;flex-direction:column;background:rgba(22,22,26,.94);color:#e8e8ee;}
  .cpn>ul{flex:1;list-style:none;margin:0;padding:10px 0;}
  .cpn>ul>li>a,.cpn>ul>li>span{position:relative;display:flex;align-items:center;gap:10px;padding:9px 16px 9px 18px;font-size:13.5px;font-weight:600;color:#e8e8ee;text-decoration:none;}
  .cpn-ico{flex:none;width:17px;height:17px;color:#9a9aa8;}
  .cpn-name{flex:1;min-width:0;}
  .cpn-go{flex:none;width:14px;height:14px;fill:none;stroke:transparent;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .cpn>ul>li.is-open>a{background:rgba(255,255,255,.07);color:#fff;}
  .cpn>ul>li.is-open>a::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 2px 2px 0;background:var(--gold);}
  .cpn>ul>li.is-open .cpn-ico{color:var(--gold);}
  .cpn>ul>li.is-open .cpn-go{stroke:var(--gold);}
  .cpn .is-off>span{color:#6c6c78;font-weight:500;cursor:default;}
  .cpn .is-off small{font-size:10.5px;}
  .cpn-fly{position:absolute;left:100%;top:10px;min-height:calc(100% - 20px);display:grid;grid-template-columns:200px;background:#fff;color:#16161a;border-top:2px solid var(--gold);border-radius:0 12px 12px 0;box-shadow:14px 10px 34px rgba(0,0,0,.22);overflow:hidden;}
  .cpn-fly.has-best{grid-template-columns:200px 168px;}
  .cpn-fly-subs{display:flex;flex-direction:column;padding:18px 20px;}
  .cpn-fly-subs b{font-size:15px;margin-bottom:10px;}
  .cpn-fly ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
  .cpn-fly li a{display:block;padding:5px 0;font-size:13.5px;color:#3a3a42;text-decoration:none;}
  .cpn-fly li a:hover{color:#000;text-decoration:underline;}
  .cpn-fly-all{margin-top:auto;padding-top:12px;font-size:12.5px;font-weight:700;color:#16161a;text-decoration:none;}
  .cpn-fly-all:hover{text-decoration:underline;}
  .cpn-best{display:flex;flex-direction:column;gap:6px;padding:18px 16px;border:0;border-left:1px solid #ececf0;background:#fafafb;color:inherit;font:inherit;text-align:left;cursor:pointer;}
  .cpn-best:hover .cpn-best-name{text-decoration:underline;}
  .cpn-best small{font-size:11.5px;font-weight:700;color:#a5502a;}
  .cpn-best-vis{display:flex;align-items:flex-start;gap:4px;margin-top:4px;}
  .cpn-best-num{display:block;height:56px;width:auto;overflow:visible;transform:skewX(-8deg);transform-origin:top left;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)) brightness(.86);}
  .cpn-best-thumb{flex:none;width:92px;height:92px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid #ececf0;}
  .cpn-best-thumb img{width:100%;height:100%;object-fit:contain;}
  .cpn-best-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;font-weight:700;line-height:1.4;color:#16161a;}
  .cpn-best-date{font-size:11px;color:#8a8a96;}
  .cpn-foot{display:flex;flex-direction:column;gap:2px;padding:11px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:#9a9aa8;}
  .cpn-foot b{color:var(--gold);font-size:11.5px;font-weight:700;}
  /* 최근 본 상품 (RecentViewed, 배너 카테고리 칸 아래) — 이 기기에만 저장 */
  .rv{display:flex;flex-direction:column;gap:8px;padding:2px 0 2px;}
  .rv>b{color:#e8e8ee;font-size:11.5px;font-weight:700;}
  .rv ul{display:flex;gap:8px;list-style:none;margin:0;padding:0;}
  .rv button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:8px;overflow:hidden;background:#fff;font-size:22px;cursor:pointer;}
  .rv button:hover{opacity:.85;}
  .rv img{width:100%;height:100%;object-fit:contain;}
  .rv-empty{font-size:11px;line-height:1.5;color:#8a8a96;}

  /* ── 홈 메인 배너 (HomeHero): 바깥 띠는 무채색 단색 · 배너 최대 1920px · 장이 바탕색째 옆으로 밀려 넘어간다 ── */
  .hh-hero{display:block;background:var(--band);}
  .hh-banner{position:relative;max-width:1920px;height:460px;margin:0 auto;overflow:hidden;}
  .hh-track{display:flex;height:100%;will-change:transform;}
  .hh-slide{flex:0 0 100%;height:100%;}
  /* 바탕: 위 → 아래 그라데이션 + 고운 입자(grainy) (2026-11-05 사용자 요청).
     기본 색(아래, --hb2)은 상품 사진의 바깥 색(대개 흰색). 위로 갈수록 상품 대표색이 은은하게 섞인다(--hb1 → --hb0, 서버 lib/server/heroColors).
     입자 굵기는 baseFrequency (클수록 가늘다, 1.3 — 2026-11-05 사용자 요청으로 .85 에서 가늘게). 입자는 바탕에만 — 상품 사진 위에는 얹지 않는다. 색이 있는 위쪽에서 잘 보이고, 기본 색(흰색)인 아래로 갈수록 옅어진다 (사진 둘레가 튀지 않게) */
  .hh-slide{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--hb0) 0%,var(--hb1) 45%,var(--hb2) 85%);}
  .hh-slide::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.15) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.15) 100%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .hh-slide-in{position:relative;}  /* z-index 를 주면 따로 묶여 사진의 곱하기가 바탕과 섞이지 않는다 */
  /* 사진 바깥 색이 기본 색과 같으면 흰 카드 · 그림자를 없애고 사진을 곱하기(multiply)로 겹친다 — 흰 바탕이 그라데이션 · 입자에 그대로 녹아 테두리가 사라진다.
     (예전 곱하기의 문제였던 넘길 때 흰 바탕 깜빡임은 사라지는 방식(투명도) 탓이라 지금 밀기 방식에선 없고, 바탕이 흰색 기본이라 흰 상품이 물드는 정도도 위쪽 옅은 틴트만큼) */
  .hh-slide.is-seamless .hh-visual img{background:transparent;box-shadow:none;border-radius:0;mix-blend-mode:multiply;}
  .hh-slide-in,.hh-over{display:grid;grid-template-columns:190px minmax(0,1fr) minmax(0,.95fr);gap:0 44px;max-width:var(--mw);height:100%;margin:0 auto;padding:0 24px;}
  .hh-slide-in{align-items:center;padding-bottom:80px;}  /* 아래 80px = 넘기기 버튼 자리 */
  .hh-over{position:absolute;inset:0;pointer-events:none;}  /* 밀리지 않는 칸: 카테고리 · 넘기기 */
  .hh-over>*{pointer-events:auto;}
  .hh-cats{grid-column:1;grid-row:1;align-self:stretch;}
  /* 배너 왼쪽 칸은 뒤 배너가 비치게 — 올리브영과 같은 검정 40%, 흐림 없음 (2026-11-05 사용자 요청). 머리말 펼침 칸(.sh-cat-panel)은 불투명 그대로.
     비치는 바탕에서도 읽히게 글자는 흰색 굵게 (올리브영도 흰색 14px 굵게) */
  .hh-cats{background:rgba(0,0,0,.4);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);}  /* 바탕이 밝아도 흰 글자가 읽히게 옅은 그림자 */
  .hh-cats>ul>li>a,.hh-cats>ul>li>span{color:#fff;font-size:14px;font-weight:700;}
  .hh-cats .cpn-ico{color:rgba(255,255,255,.85);}
  .hh-cats .is-off>span{color:rgba(255,255,255,.55);}
  .hh-cats>ul>li.is-open>a{background:rgba(255,255,255,.14);}
  .hh-cats .cpn-foot{border-top-color:rgba(255,255,255,.22);}
  .hh-cats .rv>b{color:#fff;}
  .hh-cats .rv-empty{color:rgba(255,255,255,.8);}
  .hh-label{font-size:13.5px;font-weight:800;}
  .hh-copy h2{margin-top:14px;font-size:40px;font-weight:300;line-height:1.22;letter-spacing:-1px;word-break:keep-all;overflow-wrap:anywhere;}  /* 줄은 낱말 사이에서만 바꾼다 ('우동다시 소/스' 처럼 낱말이 쪼개지지 않게) */
  .hh-copy h2 span{display:block;}
  .hh-copy h2 b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:700;}
  .hh-sub{margin-top:14px;font-size:17px;font-weight:700;}
  .hh-sub small{font-size:12.5px;font-weight:400;opacity:.65;}
  .hh-btns{display:flex;gap:8px;margin-top:20px;}
  .hh-go{padding:11px 20px;border:0;border-radius:2px;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
  .hh-more{padding:10px 18px;border:1px solid;border-radius:2px;background:transparent;font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
  .hh-go:hover,.hh-more:hover{opacity:.85;}
  .hh-ctrl{grid-column:2;grid-row:1;align-self:end;justify-self:start;display:flex;align-items:center;gap:8px;margin-bottom:40px;color:#16161a;}
  .hh-ctrl button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;transition:background .15s;}
  .hh-ctrl button:hover{background:rgba(0,0,0,.75);}
  .hh-ctrl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
  .hh-ctrl svg .is-fill{fill:currentColor;stroke:none;}
  .hh-ctrl span{min-width:48px;text-align:center;font-size:14px;font-weight:700;opacity:.8;}
  .hh-ctrl span i{font-style:normal;opacity:.5;margin:0 2px;}
  .hh-visual{align-self:center;margin-bottom:-80px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;cursor:pointer;}  /* 아래 버튼 자리를 빼지 않고 배너 한가운데 */
  .hh-visual img,.hh-emoji{width:min(340px,100%);height:auto;aspect-ratio:1/1;padding:22px;object-fit:contain;border-radius:22px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.12);}  /* 올렸을 때 움직이는 효과 없음 (사용자 요청) */
  .hh-emoji{display:flex;align-items:center;justify-content:center;font-size:96px;}
  .hh-disc{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:flex-end;max-width:var(--mw);margin:0 auto;padding:0 24px;pointer-events:none;}
  .cp-disclosure-banner{pointer-events:auto;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.78);border:1px solid rgba(0,0,0,.08);color:#2a2a30;font-size:12.5px;font-weight:600;}
  .cp-disclosure-banner .cp-disclosure-tag{background:#2a2a30;color:#fff;}

  /* ── 아래 줄들: 위아래 여백 · 구분선, 가운데 칸 왼쪽 끝에서 잘린 카드 조각은 가린다 ── */
  :is(.site-center,.cat-page) .section{padding-top:48px;}
  :is(.site-center,.cat-page) .section+.section{border-top:1px solid var(--line);}
  :is(.site-center,.cat-page) .section-title{font-size:21px;font-weight:800;}
  :is(.site-center,.cat-page) :is(.row-viewport,.top10-viewport){clip-path:polygon(64px -80px,100% -80px,100% calc(100% + 80px),64px calc(100% + 80px));}
  /* 강조색 줄이기: 금색은 로고 · 순위 숫자에만 */
  :is(.site-center,.cat-page) .page-dot.active{background:var(--text);}
  :is(.site-center,.cat-page) :is(.row-more,.frame-more){color:var(--text3);}
  :is(.site-center,.cat-page) :is(.row-more,.frame-more):hover{color:var(--text);}
}
@media(min-width:769px) and (max-width:1100px) and (pointer:fine),(min-width:769px) and (max-width:1100px) and (min-height:501px){
  .hh-slide-in,.hh-over{grid-template-columns:170px minmax(0,1fr) minmax(0,.8fr);gap:0 32px;}
  .hh-copy h2{font-size:34px;}
  .rv button{width:38px;height:38px;}
  .hh-ctrl{margin-bottom:56px;}
  .sh-cat,.sh-cat>.sh-cat-panel{width:170px;}
  .sh-main .sh-in{gap:32px;}
}
@media(min-width:769px) and (max-width:900px) and (pointer:fine),(min-width:769px) and (max-width:900px) and (min-height:501px){
  .hh-slide-in,.hh-over{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);}
  .hh-slot,.hh-cats{display:none;}
  .hh-ctrl{grid-column:1;}
  .sh-cat{width:auto;}
  .sh-cat>button{padding:0 16px;}
  .sh-menu{margin-left:8px;gap:0;}
  .sh-menu a,.sh-menu span{padding:0 10px;font-size:14px;}
  .hs-panel{grid-template-columns:minmax(0,1fr);}
  .hs-best{padding-left:0;border-left:0;}
  .cp-disclosure-banner{font-size:11.5px;}
}

/* ===== 사이트 검색 결과 (SearchResults, 2026-11-06) — 콘텐츠마다 칸을 나누고 칸마다 출처. 박스오피스는 테두리 친 독립 칸 (KOBIS 약관) ===== */
.sr-head{font-size:22px;font-weight:800;margin:4px 0 4px;}
.sr-head span{margin-left:8px;font-size:15px;font-weight:600;color:var(--text3);}
.sr-sec{margin-top:30px;}
.sr-sec.is-boxed{padding:18px 20px 16px;border:1px solid var(--border);border-radius:14px;background:var(--bg2);}
.sr-sec-head{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;}
.sr-sec-head h3{font-size:17px;font-weight:800;}
.sr-count{font-size:13px;font-weight:700;color:var(--gold);}
.sr-sub{font-size:12.5px;color:var(--text3);}
.sr .deal-source{padding:12px 0 0;}
.sr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--sr-w,180px),1fr));gap:18px 14px;list-style:none;margin:0;padding:0;}
.sr-products{--sr-w:180px;}
.sr-products .card,.sr-products .card-img{width:auto;}
.sr-products .card-img{aspect-ratio:1/1;}
.sr-bo{--sr-w:230px;--bo-w:130px;}  /* 순위 숫자 · 포스터 크기는 박스오피스 줄과 같은 변수 (.bo-track 에서만 정해져 있어서 여기서도) */
.sr-deals{--sr-w:200px;}
.sr-ott{--sr-w:170px;}
.sr-wt{--sr-w:170px;}
.sr-cats{display:flex;flex-wrap:wrap;gap:8px;}
.sr-cat{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--border);border-radius:18px;color:var(--text);font-size:14px;font-weight:600;text-decoration:none;}
.sr-cat small{font-size:11.5px;font-weight:500;color:var(--text3);}
.sr-cat span{color:var(--text3);}
.sr-cat:hover{border-color:var(--text3);}
.sr-loading{margin-top:24px;font-size:13px;color:var(--text3);}
.sr-empty{margin-top:28px;padding:48px 20px;text-align:center;border:1px dashed var(--border);border-radius:14px;}
.sr-empty p{font-size:16px;font-weight:700;color:var(--text);}
.sr-empty span{display:block;margin-top:8px;font-size:13px;color:var(--text3);}
@media(max-width:768px),(pointer:coarse) and (max-height:500px){.sr-head{font-size:19px;}.sr-products,.sr-ott,.sr-wt{--sr-w:132px;}.sr-deals{--sr-w:150px;}.sr-bo{--sr-w:190px;--bo-w:110px;}.sr-sec.is-boxed{padding:14px 12px 12px;}}