/* Oh,zip 홈 전용 스타일 (build.py 홈 페이지에서 사용). 브랜드 단일 퍼플 시스템. */
:root{
  --p50:#f5f2fe; --p100:#eae2fc; --p200:#d3c4f7; --p300:#b49cf0;
  --p400:#8c69e7; --p500:#6c48de; --p600:#553bc0; --p700:#4d35b0;
  --brand:var(--p500); --brand-d:var(--p600);
  --paper:#fbfaff; --surface:#ffffff;
  --ink:#2b2f3e; --ink2:#666b7b; --ink3:#9a9eab;
  --line:#ecebf4; --line2:#e0ddef; --charcoal:#232634;
  --ui:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --amb:#8c69e7;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--ui); line-height:1.6;}
a{ cursor:pointer; }
/* 한글 제목은 단어(띄어쓰기) 단위로만 줄바꿈 */
.m-cap h1, .side .lbl, .scard h3, .pt, .sh h2, .cat .cn{ word-break:keep-all; }
.page{ max-width:1120px; margin:0 auto; padding:0 22px; }
@media (max-width:640px){ .page{ padding:0 15px; } }

/* nav */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brandlogo{ height:34px; width:auto; display:block; }
.nav-r{ display:flex; gap:8px; align-items:center; }
.badge{ font-size:10.5px; font-weight:800; color:var(--brand-d); background:var(--p100); padding:5px 11px; border-radius:999px; }
.icn{ width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:var(--surface);display:grid;place-items:center;color:var(--ink2);font-size:15px; cursor:pointer; text-decoration:none; }

/* hero */
.hero{ position:relative; padding:26px 0 98px; overflow:visible; }
.hero .amb{ pointer-events:none; }
.amb{ position:absolute; left:50%; top:36%; width:min(470px,60%); height:400px; transform:translate(-50%,-50%); border-radius:50%; filter:blur(72px); opacity:.55; z-index:0; background:radial-gradient(circle, var(--amb) 0%, transparent 68%); transition:background .5s ease; pointer-events:none; }
.stage{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:22px; align-items:center; max-width:920px; margin:0 auto; }
.side{ position:relative; border:0; background:transparent; cursor:pointer; padding:0; font-family:inherit; opacity:.58; transition:opacity .3s; text-decoration:none; }
.side:hover{ opacity:.85; }
.thumb{ display:block; position:relative; border-radius:16px; aspect-ratio:1/1; overflow:hidden; background-color:var(--c);
  background-image:
    radial-gradient(120% 120% at 22% 16%, color-mix(in srgb,var(--c) 66%,#fff) 0%, transparent 55%),
    radial-gradient(130% 130% at 84% 92%, color-mix(in srgb,var(--c) 88%,#000) 0%, transparent 62%),
    linear-gradient(150deg, var(--c), color-mix(in srgb,var(--c) 56%,#160f2a));
  box-shadow:0 14px 30px -12px rgba(24,20,45,.22); }
.thumb::after{ content:""; position:absolute; inset:0; opacity:.16;
  background:center/44% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='24' y='13' width='52' height='74' rx='3'/%3E%3Cline x1='50' y1='13' x2='50' y2='87'/%3E%3Cline x1='24' y1='50' x2='76' y2='50'/%3E%3C/g%3E%3C/svg%3E"); }
.thumb .cc{ position:absolute; left:11px; top:11px; z-index:1; font-size:10.5px; font-weight:800; color:#fff; background:rgba(20,12,40,.34); backdrop-filter:blur(3px); padding:4px 10px; border-radius:999px; }
.thumb .nb{ position:absolute; right:11px; top:11px; z-index:1; font-size:9.5px; font-weight:800; color:var(--brand-d); background:#fff; padding:3px 8px; border-radius:999px; }
.thumb .tmb-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.thumb.has-img::after{ display:none; }
.side .lbl{ position:absolute; left:0; right:0; top:100%; margin-top:9px; font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.34; text-align:center; text-wrap:balance; }
.main > a{ display:block; text-decoration:none; color:inherit; }
.main .thumb{ aspect-ratio:4/5; box-shadow:0 26px 56px -18px rgba(24,20,45,.3); }
.m-cap{ position:relative; z-index:1; text-align:center; margin-top:17px; }
.m-cat{ font-size:15.5px; font-weight:800; color:var(--brand-d); }
.m-cap h1{ font-size:clamp(21px,2.7vw,28px); font-weight:800; letter-spacing:-.02em; line-height:1.24; margin:8px auto 8px; max-width:18ch; text-wrap:balance; }
.m-cap h1 a{ color:inherit; text-decoration:none; }
.m-by{ font-size:12px; color:var(--ink3); }
@media (max-width:640px){
  .m-cap h1{ max-width:92%; }
  .side .lbl{ font-size:11px; margin-top:7px; }
}
.dots{ display:flex; gap:7px; justify-content:center; margin-top:17px; position:relative; z-index:1; }
.dots i{ width:7px;height:7px;border-radius:50%;background:var(--line2);cursor:pointer;transition:.2s; }
.dots i.on{ background:var(--brand); width:20px; border-radius:999px; }
.dock{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3; display:flex; gap:5px; background:rgba(255,255,255,.86); backdrop-filter:blur(12px) saturate(1.3); border:1px solid var(--line2); border-radius:999px; padding:6px; box-shadow:0 12px 34px -10px rgba(40,25,90,.24); max-width:calc(100% - 30px); overflow-x:auto; scrollbar-width:none; }
.dock::-webkit-scrollbar{ display:none; }
.dock a{ border:0; background:transparent; font-family:inherit; font-weight:700; font-size:13px; white-space:nowrap; color:var(--ink2); padding:9px 15px; border-radius:999px; cursor:pointer; transition:.15s; text-decoration:none; }
.dock a.on{ background:var(--brand); color:#fff; }
.dock a:hover:not(.on){ background:var(--p100); color:var(--brand-d); }

/* sections */
.sec{ margin-top:64px; }
.sh{ display:flex; align-items:baseline; gap:10px; margin:0 0 18px; }
.sh h2{ font-size:23px; font-weight:800; letter-spacing:-.01em; margin:0; }
.sh .tag{ font-size:10.5px; font-weight:800; color:var(--brand-d); background:var(--p100); padding:3px 9px; border-radius:999px; }
.sh .rule{ flex:1; height:1px; background:var(--line); }

.pop{ display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; }
.prow{ display:grid; grid-template-columns:26px 1fr auto; gap:13px; align-items:center; padding:13px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit; cursor:pointer; }
.prow:hover .pt{ color:var(--brand-d); }
.rank{ font-size:17px; font-weight:800; color:var(--brand); display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.prow:nth-child(n+3) .rank{ color:var(--p200); }
.pt{ font-size:14.5px; font-weight:700; line-height:1.35; transition:.15s; }
.pv{ font-size:12px; color:var(--ink3); font-variant-numeric:tabular-nums; }
@media (max-width:640px){ .pop{ grid-template-columns:1fr; gap:0; } }

.kq{ display:flex; flex-wrap:wrap; gap:10px; }
.kq a{ text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line2); border-radius:14px; padding:13px 16px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:10px; transition:.15s; }
.kq a:hover{ border-color:var(--brand); color:var(--brand-d); box-shadow:0 6px 16px -8px var(--p400); }
.kq .q{ color:#fff; background:var(--brand); font-weight:800; font-size:11px; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; flex:0 0 auto; }

.cta{ margin:0 0 4px; border-radius:12px; overflow:hidden; position:relative; background:linear-gradient(120deg,var(--p400),var(--p700)); color:#fff; text-decoration:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:14px 18px; }
.cta-body{ position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.cta::after{ content:""; position:absolute; right:-30px; top:50%; transform:translateY(-50%); width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,#ffffff2e,transparent 70%); pointer-events:none; }
.cta .eye{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.95; background:rgba(255,255,255,.16); padding:4px 10px; border-radius:999px; position:relative; }
.cta h2{ font-size:16px; font-weight:800; margin:0; letter-spacing:-.01em; line-height:1.35; word-break:keep-all; }
.cta p{ display:none; }
.cta .btn{ flex:0 0 auto; background:#fff; color:var(--brand-d); font-weight:800; font-size:13.5px; padding:10px 18px; border-radius:999px; text-decoration:none; white-space:nowrap; position:relative; cursor:pointer; }

.cat{ border:1px solid var(--line2); border-radius:15px; background:var(--surface); margin-bottom:11px; overflow:hidden; }
.cat > button{ width:100%; display:flex; align-items:center; gap:12px; border:0; background:transparent; font-family:inherit; padding:16px 18px; cursor:pointer; text-align:left; }
.cat .cico{ color:var(--brand); flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--p100); }
.cat .cico svg{ width:18px; height:18px; display:block; }
.cat .cn{ font-size:15px; font-weight:800; flex:1; }
.cat .cd{ font-size:12.5px; color:var(--ink3); font-weight:500; }
.cat .chev{ color:var(--ink3); flex:0 0 auto; display:grid; place-items:center; transition:transform .25s; }
.cat .chev svg{ width:24px; height:24px; display:block; }
.cat.open .chev{ transform:rotate(180deg); }
/* 아코디언: 높이가 쫀득하게 펼쳐짐(grid-rows 트릭) */
.cat .panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .44s cubic-bezier(.22,1.1,.36,1); }
.cat.open .panel{ grid-template-rows:1fr; }
.cat .panel-in{ overflow:hidden; min-height:0; }
.cat .panel-in .slide{ padding:0 18px 18px; opacity:0; transform:translateY(-8px); transition:opacity .32s ease, transform .38s cubic-bezier(.22,1.1,.36,1); }
.cat.open .panel-in .slide{ opacity:1; transform:none; transition-delay:.06s; }
.cat .chev{ transition:transform .4s cubic-bezier(.22,1.1,.36,1); }
.slide{ display:grid; grid-auto-flow:column; grid-auto-columns:calc(25% - 10.5px); gap:14px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
@media (max-width:1000px){ .slide{ grid-auto-columns:calc(33.333% - 9.34px); } }
@media (max-width:640px){ .slide{ grid-auto-columns:calc(50% - 7px); } }
.slide::-webkit-scrollbar{ display:none; }
.slide .empty{ color:var(--ink3); font-size:13px; padding:6px 2px; }
.scard{ text-decoration:none; color:inherit; cursor:pointer; }
.scard .st{ position:relative; overflow:hidden; aspect-ratio:16/10; border-radius:11px; background-color:var(--c); background-image:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 56%,#160f2a)); }
.scard .st::after{ content:""; position:absolute; inset:0; opacity:.13; background:center/34% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='24' y='13' width='52' height='74' rx='3'/%3E%3Cline x1='50' y1='13' x2='50' y2='87'/%3E%3Cline x1='24' y1='50' x2='76' y2='50'/%3E%3C/g%3E%3C/svg%3E"); }
.scard .st .st-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scard .st.has-img::after{ display:none; }
.scard h3{ font-size:13.5px; font-weight:700; line-height:1.35; margin:9px 0 0; text-wrap:balance; }

.foot{ margin-top:60px; background:var(--charcoal); color:#c7c9d4; }
.foot .in{ padding:28px 0 32px; }
.foot .fl{ font-weight:800; color:#fff; font-size:18px; letter-spacing:-.01em; }
.foot .fl b{ color:var(--p300); }
.foot .fl a{ color:inherit; text-decoration:none; }
.foot p{ margin:9px 0 0; font-size:12.5px; color:#8b8e9c; max-width:52ch; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }