:root { --pink:#e11d48; --ink:#1f2733; --muted:#5b6675; --bg:#fff7f8; --card:#fff; --line:#ffe1e7; }
    * { box-sizing:border-box; }
    * { font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; }
    body { margin:0; color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
    a { color:var(--pink); text-decoration:none; }
    a:hover { text-decoration:underline; }
    header,main,footer { max-width:880px; margin:0 auto; padding:0 20px; }
    header { display:flex; align-items:center; justify-content:space-between; height:64px; }
    .brand { font-weight:900; font-size:22px; color:var(--pink); letter-spacing:-.5px; }
    .brand-logo { display:inline-flex; align-items:center; height:64px; }
    .brand-logo img { width:170px; height:auto; display:block; }
    .play { display:inline-flex; align-items:center; gap:8px; background:var(--pink); color:#fff; font-weight:800; padding:14px 26px; border-radius:16px; font-size:17px; box-shadow:0 6px 18px rgba(225,29,72,.25); }
    .play:hover { text-decoration:none; opacity:.92; }
    .cover { width:100%; max-width:460px; aspect-ratio:1; object-fit:cover; border-radius:24px; border:1px solid var(--line); display:block; margin:8px auto 20px; }
    h1 { font-size:34px; font-weight:900; margin:18px 0 6px; letter-spacing:0; }
    h2 { font-size:20px; font-weight:800; margin:28px 0 8px; }
    p { font-size:16px; margin:0; }
    .card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px 22px; margin:16px 0; }
    .card p + p { margin-top:14px; }
    /* 카드의 첫 요소(보통 h2)는 위쪽 여백 제거 — h2의 margin-top(28px)이 카드 padding 위에 더해져 상단이 휑해지는 것 방지 */
    .card > :first-child { margin-top:0; }
    .tags { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
    .tag { background:#fff; border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:700; padding:5px 12px; border-radius:999px; }
    .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px; margin-top:8px; }
    .grid-2rows { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
    @media (min-width:600px) {
      .grid-2rows { grid-template-columns:repeat(5,1fr); }
    }
    .gcard { display:block; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
    .gcard img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
    .gcard span { display:block; padding:8px 10px; font-weight:700; font-size:13px; color:var(--ink); }
    footer { color:var(--muted); font-size:13px; padding:30px 20px 54px; border-top:1px solid var(--line); margin-top:30px; }
    .footer-section { display:flex; flex-direction:column; gap:10px; }
    .footer-title { font-size:14px; font-weight:900; color:var(--ink); }
    .footer-langs, .footer-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; font-weight:800; }
    .footer-langs a, .footer-links a { color:var(--muted); }
    .footer-langs a.active { color:var(--pink); font-weight:900; }
    .footer-sep { width:1px; height:12px; background:var(--line); display:inline-block; }
    .footer-rule { height:1px; background:var(--line); margin:22px 0; }
    .copyright { font-size:11px; color:var(--muted); margin:10px 0 0; }
    .footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; }
    .footer-social { display:flex; align-items:center; gap:16px; }
    .footer-social a { color:var(--muted); display:inline-flex; }
    .footer-social a:hover { color:var(--pink); text-decoration:none; }
    .footer-social svg { width:20px; height:20px; display:block; fill:currentColor; }
    [dir="rtl"] .footer-langs, [dir="rtl"] .footer-links { direction:rtl; }
    .plan { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px 22px; margin:14px 0; position:relative; }
    .plan.featured { border:2px solid var(--pink); }
    .plan .amount { font-size:30px; font-weight:900; color:var(--pink); }
    .plan .period { font-size:14px; color:var(--muted); font-weight:700; }
    .plan .was { color:var(--muted); text-decoration:line-through; font-weight:700; margin-right:8px; font-size:16px; }
    .badge { position:absolute; top:16px; right:18px; background:var(--pink); color:#fff; font-size:12px; font-weight:900; padding:4px 11px; border-radius:999px; }
    .benefits { margin:6px 0 0; padding-left:18px; }
    .benefits li { margin:6px 0; font-weight:600; }
    .statbar { display:flex; flex-wrap:wrap; gap:16px; margin:16px 0 4px; }
    .statbar .s { display:inline-flex; align-items:baseline; gap:6px; font-size:16px; font-weight:800; color:var(--ink); }
    .statbar .s b { color:var(--pink); font-weight:900; font-size:18px; }
    .statbar .s small { color:var(--muted); font-weight:700; font-size:13px; }
    .lb { list-style:none; margin:6px 0 0; padding:0; }
    .lb li { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); font-weight:700; }
    .lb li:last-child { border-bottom:0; }
    .lb .rk { min-width:26px; text-align:center; color:var(--muted); font-weight:900; }
    .lb .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .lb .sc { color:var(--pink); font-weight:900; white-space:nowrap; }