:root{
    --bg:#0f0e0c; --panel:#1a1815; --panel2:#232019;
    --ink:#f4efe4; --ink-soft:#dcd5c7; --ink-dim:#a8a092; --ink-mute:#7d766a;
    --accent:#e8a13a; --accent2:#7fae6e; --danger:#d9694f; --good:#6fae8e;
    --line:#3a352c; --rank1:#e8c14a; --rank-bg:#2a261d;
    --pin:#e87aa1;
    /* 가독성 토큰 (PW_research C10) */
    --hl:rgba(232,161,58,.32); --hl-good:rgba(111,174,142,.30); --hl-warn:rgba(217,105,79,.28);
    --fs-cap:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:16px;
    --fs-h3:20px; --fs-h2:25px; --fs-h1:31px;
  }
  body.light{
    --bg:#f6f1e7; --panel:#fffdf8; --panel2:#f0e9da;
    --ink:#2b2820; --ink-soft:#3a362c; --ink-dim:#6f685a; --ink-mute:#938b79; --line:#ddd3c2; --rank-bg:#f5edd6;
    --hl:rgba(200,130,30,.30); --hl-good:rgba(90,150,110,.26); --hl-warn:rgba(190,80,55,.24);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:radial-gradient(circle at 12% -5%, rgba(232,161,58,.10), transparent 40%),
      radial-gradient(circle at 95% 8%, rgba(127,174,110,.08), transparent 35%), var(--bg);
    color:var(--ink); font-family:'IBM Plex Sans KR',sans-serif; line-height:1.7;
    padding:0 0 140px; min-height:100vh; transition:background .3s,color .3s;
  }
  body[data-country="jp"]{font-family:'Noto Sans JP','IBM Plex Sans KR',sans-serif}
  /* ===== 가독성 타이포 (인테리어 제외 — body.rd 스코프, 2026-06-06) =====
     행간 1.8(WCAG 권장 1.75 범위) + 자간 +0.01em(미세 숨통) + 빽빽한 하위요소 완화.
     한글 관례는 자간을 좁히지만(폰트가 넓어서) 사용자 체감 답답함 해소 위해 미세 양수. 과도하게 띄우지 않음. */
  body.rd{ line-height:1.8; letter-spacing:.01em; }
  body.rd p{ margin:.4em 0 .85em; }
  body.rd li{ margin-bottom:.3em; }
  body.rd .gc-meta, body.rd .gc-ow, body.rd .hc-line, body.rd .cat-note,
  body.rd .honey-body, body.rd .rev-body, body.rd details.reviews ul li,
  body.rd .guide-card ul li, body.rd .wel-real li, body.rd .long-review li,
  body.rd .comp-src .cs-d, body.rd .cl-good, body.rd .cl-bad, body.rd .cl-next,
  body.rd .cl-lesson, body.rd .lv-core, body.rd .lv-tip, body.rd .lv-reg, body.rd .lv-back{ line-height:1.75; }
  body.rd .wel-table td, body.rd .cg-table td, body.rd .cmp-table td{ line-height:1.62; }
  body.rd .game-card{ letter-spacing:.008em; }
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
  a{color:inherit}

  /* ===== 가독성 유틸 (PW_research C10 — 형광펜·수치·행폭) ===== */
  .hl{background:linear-gradient(transparent 58%, var(--hl) 58%);padding:0 2px;border-radius:2px;font-weight:600}
  .hl-good{background:linear-gradient(transparent 58%, var(--hl-good) 58%);padding:0 2px;border-radius:2px;font-weight:600}
  .hl-warn{background:linear-gradient(transparent 58%, var(--hl-warn) 58%);padding:0 2px;border-radius:2px;font-weight:600}
  .num{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
  .prose{max-width:72ch}
  .prose p+p{margin-top:.6em}
  /* 본문 가독성 기본 — 카드 안 긴 텍스트는 ink-soft + 행간 1.65 */
  .gc-meta,.gc-ow,.hc-line,.cat-note{color:var(--ink-soft);line-height:1.6}
  details.reviews ul li,.guide-card ul li,.honey-body,.rev-body{line-height:1.65}

  /* ===== TOP BAR (sticky) ===== */
  .topbar{
    position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
    background:color-mix(in srgb,var(--bg) 86%,transparent);
    border-bottom:1px solid var(--line);
  }
  .topbar-inner{max-width:1120px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .brand{font-family:'Black Han Sans';font-size:20px;color:var(--accent);white-space:nowrap}
  .brand small{font-family:'IBM Plex Sans KR';font-weight:600;font-size:11px;color:var(--ink-dim);margin-left:6px}
  .country-toggle{display:flex;border:1px solid var(--line);border-radius:30px;overflow:hidden}
  .country-toggle button{
    background:transparent;color:var(--ink-dim);border:none;padding:7px 15px;font-size:13px;
    font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;
  }
  .country-toggle button.on{background:var(--accent);color:#1a1815}
  .search-box{flex:1;min-width:130px;position:relative}
  .search-box input{
    width:100%;background:var(--panel);border:1px solid var(--line);border-radius:30px;
    padding:8px 14px 8px 34px;color:var(--ink);font-size:13px;font-family:inherit;
  }
  .search-box::before{content:"🔎";position:absolute;left:12px;top:7px;font-size:13px;opacity:.6}
  .top-btn{
    background:var(--panel);border:1px solid var(--line);border-radius:30px;
    padding:8px 13px;font-size:13px;color:var(--ink);cursor:pointer;font-family:inherit;
    white-space:nowrap;transition:.15s;display:inline-flex;align-items:center;gap:6px;
  }
  .top-btn:hover{border-color:var(--accent)}
  .top-btn .cnt{background:var(--pin);color:#1a1815;border-radius:20px;padding:0 7px;font-size:11px;font-weight:700}

  /* ===== VIEW NAV (categories + virtual pages) ===== */
  nav.viewnav{
    position:sticky;top:54px;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);
    border-bottom:1px solid var(--line);
  }
  .viewnav-inner{max-width:1120px;margin:0 auto;padding:9px 16px;display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin}
  .viewnav button{
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    padding:8px 12px;font-size:12.5px;color:var(--ink);cursor:pointer;font-family:inherit;
    white-space:nowrap;transition:.15s;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  }
  .viewnav button:hover{border-color:var(--accent2);transform:translateY(-1px)}
  .viewnav button.on{border-color:var(--accent);background:var(--rank-bg);color:var(--accent)}
  .viewnav .sep{width:1px;background:var(--line);margin:2px 4px;flex-shrink:0}
  .grp-label{font-size:10px;letter-spacing:.1em;color:var(--ink-dim);align-self:center;padding:0 4px;flex-shrink:0;font-weight:700}

  /* ===== HERO (compact) ===== */
  header.hero{padding:30px 22px 14px;position:relative;overflow:hidden}
  .kicker{font-weight:600;letter-spacing:.3em;font-size:11px;color:var(--accent);text-transform:uppercase;margin-bottom:8px}
  header.hero h1{font-family:'Black Han Sans';font-size:clamp(28px,5vw,44px);line-height:1.05}
  header.hero h1 .em{color:var(--accent)}
  .sub{margin-top:10px;max-width:680px;color:var(--ink-dim);font-size:14px;font-family:'Gowun Dodum'}
  .meta-row{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
  .chip{background:var(--panel2);border:1px solid var(--line);padding:5px 12px;border-radius:30px;font-size:12px;color:var(--ink-dim)}
  .chip b{color:var(--accent2)}

  /* re-research banner */
  .rebanner{
    margin:16px 0 0;background:linear-gradient(90deg,rgba(232,161,58,.10),transparent);
    border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;
    padding:11px 15px;font-size:12.5px;color:var(--ink-dim);display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  }
  .rebanner b{color:var(--accent)}
  .rebanner .dday{background:var(--accent);color:#1a1815;border-radius:20px;padding:2px 10px;font-weight:700;font-size:11.5px}

  /* ===== CONTROLS (sort/filter) ===== */
  .controls{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 8px;align-items:center}
  .controls .lbl{font-size:11px;color:var(--ink-dim);letter-spacing:.05em}
  .fchip{
    background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:5px 12px;
    font-size:12px;color:var(--ink-dim);cursor:pointer;font-family:inherit;transition:.15s;
  }
  .fchip:hover{border-color:var(--accent2)}
  .fchip.on{background:var(--accent2);color:#15140f;border-color:var(--accent2)}
  select.sortsel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:5px 10px;color:var(--ink);font-size:12px;font-family:inherit}

  /* ===== CATEGORY SECTION ===== */
  section.cat{margin-top:34px;scroll-margin-top:108px}
  .cat-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--accent);padding-bottom:10px;margin-bottom:4px}
  .cat-head .ic{font-size:24px}
  .cat-head h2{font-weight:700;font-size:22px}
  .cat-head .tag{font-size:12px;color:var(--ink-dim);font-family:'Gowun Dodum';margin-left:auto}
  /* W3: 자취/건강도감 카테고리 → 아이디어 상품 페이지 크로스링크 */
  .idea-xlink{font-size:11.5px;font-weight:600;color:var(--accent);text-decoration:none;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:3px 11px;white-space:nowrap;transition:background .15s,border-color .15s}
  .cat-head .tag + .idea-xlink{margin-left:8px}
  .idea-xlink:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
  .cat-note{font-family:'Gowun Dodum';color:var(--ink-dim);font-size:13.5px;margin:12px 0 18px;border-left:3px solid var(--line);padding-left:13px}
  /* P8: 비전문가용 효능 한 줄(항상 노출) — 건강도감 */
  .eff-role{font-family:'Gowun Dodum';font-size:13.5px;line-height:1.65;color:var(--ink);background:var(--panel2);border-left:3px solid var(--accent);border-radius:0 9px 9px 0;padding:9px 13px;margin:10px 0 6px}
  .eff-role .eff-good{color:var(--ink-dim)}
  /* P9: 카테고리별 획기적·혁신 제품 토글 — 건강도감 */
  .catguide.innov summary{color:var(--accent)}
  .innov-note{font-family:'Gowun Dodum';font-size:12px;line-height:1.6;color:var(--ink-dim);margin-bottom:10px}
  .innov-note .innov-link{color:var(--accent);font-weight:600;text-decoration:none}
  .innov-note .innov-link:hover{text-decoration:underline}
  .innov-item{border-left:2px solid var(--accent);padding:7px 0 7px 12px;margin-bottom:9px}
  .innov-name{font-size:13.5px;font-weight:700;color:var(--ink)}
  .innov-why{font-family:'Gowun Dodum';font-size:13px;line-height:1.6;color:var(--ink);margin-top:2px}
  .innov-meta{font-size:11.5px;color:var(--ink-dim);margin-top:3px}
  .innov-cau{color:var(--danger,#e07a5f)}
  /* Z1: ⌘K 빠른 이동 팔레트 (career/map/living/index 공용 — cmdk.js) */
  .ck{display:none;position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);align-items:flex-start;justify-content:center}
  .ck.on{display:flex}
  .ck-box{margin-top:12vh;width:min(560px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.45);overflow:hidden;display:flex;flex-direction:column;max-height:72vh}
  .ck-input{padding:16px 18px;border:none;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font-size:15px;font-family:inherit;outline:none}
  .ck-list{overflow-y:auto;padding:6px;scrollbar-width:thin}
  .ck-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;border-radius:9px;padding:9px 12px;cursor:pointer;font-family:inherit}
  .ck-item.sel,.ck-item:hover{background:var(--panel2)}
  .ck-label{font-size:13.5px;color:var(--ink);flex:1}
  .ck-sub{font-size:10.5px;color:var(--ink-dim);background:var(--bg);border-radius:8px;padding:1px 8px;white-space:nowrap}
  .ck-empty{padding:22px;text-align:center;color:var(--ink-dim);font-size:13px}
  .ck-foot{padding:8px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-dim)}

  /* ===== PRODUCT CARD (image left) ===== */
  .ranks{display:flex;flex-direction:column;gap:12px}
  .rank{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 17px;transition:.18s;display:grid;grid-template-columns:74px 1fr;gap:15px}
  .rank:hover{border-color:var(--accent2)}
  .rank.top{border-color:var(--rank1);background:var(--rank-bg)}
  .rank .thumb{
    width:74px;height:74px;border-radius:11px;background:var(--panel2);border:1px solid var(--line);
    display:grid;place-items:center;align-self:start;overflow:hidden;
  }
  .rank .thumb img{width:100%;height:100%;object-fit:cover;border-radius:11px}
  .rank .thumb img.ico{object-fit:contain;padding:12px}
  .rank .thumb a{position:relative;display:block;width:100%;height:100%}
  .rank .thumb .cam{position:absolute;right:2px;bottom:2px;font-size:10px;background:rgba(0,0,0,.55);border-radius:6px;padding:1px 3px;line-height:1;opacity:.8}
  .rank .thumb a:hover .cam{opacity:1;background:var(--accent);color:#1a1815}
  .rank .body{min-width:0}
  .rank-top-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .badge{font-family:'Black Han Sans';font-size:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--panel2);color:var(--ink-dim);border:1px solid var(--line)}
  .rank.top .badge{background:var(--rank1);color:#1a1815;border-color:var(--rank1)}
  .rank .name{font-weight:700;font-size:15.5px}
  .yr{font-size:11px;color:var(--ink-dim);border:1px solid var(--line);border-radius:20px;padding:1px 8px;white-space:nowrap}
  .pin-btn{margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:15px;color:var(--ink-dim);transition:.15s;flex-shrink:0}
  .pin-btn:hover{border-color:var(--pin)}
  .pin-btn.on{background:var(--pin);border-color:var(--pin);color:#1a1815}
  .price{color:var(--accent2);font-weight:600;font-size:13.5px;margin-top:6px}
  .name-ko{font-size:12.5px;color:var(--ink-dim);font-family:'Gowun Dodum';margin-top:3px}
  .prod-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  .prod-links a{font-size:11.5px;color:var(--ink-dim);border:1px solid var(--line);border-radius:14px;padding:3px 10px;text-decoration:none;transition:.15s}
  .prod-links a:hover{border-color:var(--accent2);color:var(--accent2)}
  .why{margin-top:10px;font-size:13px;color:var(--ink-dim);font-family:'Gowun Dodum'}
  .pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
  @media(max-width:600px){.pros-cons{grid-template-columns:1fr}.rank{grid-template-columns:54px 1fr;gap:11px}.rank .thumb{width:54px;height:54px}.rank .thumb img{width:36px;height:36px}}
  .pc{border-radius:9px;padding:9px 12px;font-size:12.5px}
  .pc.pro{background:rgba(111,174,142,.08);border:1px solid rgba(111,174,142,.2)}
  .pc.con{background:rgba(217,105,79,.08);border:1px solid rgba(217,105,79,.2)}
  .pc .lbl{font-weight:700;font-size:10.5px;letter-spacing:.06em;display:block;margin-bottom:3px}
  .pc.pro .lbl{color:var(--good)} .pc.con .lbl{color:var(--danger)}
  .verdict{font-size:11px;padding:2px 9px;border-radius:20px;font-weight:600;white-space:nowrap}
  .v-buy{background:rgba(111,174,142,.16);color:var(--good)}
  .v-care{background:rgba(232,193,74,.14);color:var(--rank1)}
  .v-no{background:rgba(217,105,79,.16);color:var(--danger)}
  .v-info{background:rgba(90,140,200,.16);color:var(--accent2)}

  /* review toggle (default closed) */
  details.reviews{margin-top:12px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;overflow:hidden}
  details.reviews summary{cursor:pointer;padding:11px 14px;font-size:12.5px;font-weight:600;color:var(--accent2);list-style:none;user-select:none;display:flex;align-items:center;gap:8px}
  details.reviews summary::-webkit-details-marker{display:none}
  details.reviews summary::before{content:"▸";color:var(--accent);font-size:11px;transition:.2s}
  details.reviews[open] summary::before{transform:rotate(90deg)}
  details.reviews[open] summary{border-bottom:1px solid var(--line)}
  .rev-body{padding:6px 14px 12px}
  .rev-body ul{list-style:none;margin-top:6px}
  .rev-body li{font-size:12.5px;color:var(--ink-dim);font-family:'Gowun Dodum';padding:6px 0 6px 18px;position:relative;border-bottom:1px dashed var(--line)}
  .rev-body li:last-child{border-bottom:none}
  .rev-body li::before{content:"🗣";position:absolute;left:0;font-size:11px}
  .rev-body li .tg{color:var(--accent);font-weight:600;font-size:11px;margin-right:5px}

  /* insight (regret / comeback) */
  .insight{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}
  @media(max-width:600px){.insight{grid-template-columns:1fr}}
  .ins-box{border-radius:11px;padding:12px 14px;font-size:12.8px;font-family:'Gowun Dodum'}
  .ins-box.regret{background:rgba(217,105,79,.07);border:1px solid rgba(217,105,79,.22)}
  .ins-box.back{background:rgba(232,161,58,.07);border:1px solid rgba(232,161,58,.22)}
  .ins-box h4{font-family:'IBM Plex Sans KR';font-size:12px;font-weight:700;margin-bottom:6px;display:flex;gap:6px}
  .ins-box.regret h4{color:var(--danger)} .ins-box.back h4{color:var(--accent)}

  /* ===== TABLES / generic panels ===== */
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-top:16px}
  .panel h3{font-size:16px;color:var(--accent);margin-bottom:6px}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th,td{padding:10px 11px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
  th{color:var(--accent);font-weight:600;font-size:11.5px;letter-spacing:.03em}
  tr:last-child td{border-bottom:none}
  .empty{text-align:center;color:var(--ink-dim);font-family:'Gowun Dodum';padding:40px 20px;border:2px dashed var(--line);border-radius:14px;margin-top:18px}

  /* simulator */
  .sim-scenarios{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
  .sim-total{font-family:'Black Han Sans';font-size:30px;color:var(--accent);margin-top:6px}
  .sim-total small{font-family:'IBM Plex Sans KR';font-size:13px;color:var(--ink-dim);font-weight:400}

  /* link grid */
  .linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px}
  .linkcard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px 17px}
  .linkcard h4{font-size:14px;color:var(--accent2);margin-bottom:8px;display:flex;gap:7px;align-items:center}
  .linkcard a{display:block;font-size:12.8px;color:var(--ink-dim);text-decoration:none;padding:4px 0;border-bottom:1px dashed var(--line);transition:.15s}
  .linkcard a:last-child{border-bottom:none}
  .linkcard a:hover{color:var(--accent)}
  .linkcard .desc{font-size:11.5px;color:var(--ink-dim);font-family:'Gowun Dodum';margin-top:2px;display:block}

  /* honey tips accordions */
  .honey-acc{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden}
  .honey-acc summary{cursor:pointer;padding:15px 18px;font-size:14.5px;font-weight:700;color:var(--accent);list-style:none;display:flex;gap:10px;align-items:center}
  .honey-acc summary::-webkit-details-marker{display:none}
  .honey-acc summary::after{content:"＋";margin-left:auto;color:var(--ink-dim)}
  .honey-acc[open] summary::after{content:"－"}
  .honey-body{padding:0 18px 16px;font-size:13px;color:var(--ink-dim);font-family:'Gowun Dodum'}
  .honey-body p{margin:8px 0}
  .honey-body .qa{border-left:3px solid var(--line);padding-left:12px;margin:10px 0}
  .honey-body .qa b{color:var(--ink)}

  /* JP guide cards */
  .guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:13px;margin-top:14px}
  .guide-card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px 18px}
  .guide-card h4{font-size:14.5px;color:var(--accent);margin-bottom:8px;display:flex;gap:8px}
  .guide-card ul{list-style:none}
  .guide-card li{font-size:12.8px;color:var(--ink-dim);font-family:'Gowun Dodum';padding:5px 0 5px 16px;position:relative}
  .guide-card li::before{content:"›";position:absolute;left:0;color:var(--accent);font-weight:700}
  .guide-card li b{color:var(--ink)}
  /* ── F3 이직·입문 가이드 가독성 (gbody 리치 타이포그래피) ── */
  .guide-card .gbody{font-size:13.4px;line-height:1.95;color:var(--ink);letter-spacing:.1px}
  .guide-card .gbody b{color:var(--accent2);font-weight:700}
  .guide-card .gbody ul{list-style:none;margin:10px 0 6px;padding-left:2px}
  .guide-card .gbody li{font-size:13px;color:var(--ink);font-family:'Gowun Dodum';padding:5px 0 5px 17px;position:relative;line-height:1.72}
  .guide-card .gbody li::before{content:"›";position:absolute;left:0;color:var(--accent);font-weight:700}
  .guide-card .gbody li b{color:var(--accent2)}
  .guide-card .gbody mark,.guide-card .gbody .hl{background:linear-gradient(transparent 52%,rgba(232,161,58,.42) 52%);color:var(--ink);padding:0 1.5px;border-radius:2px;font-weight:600}
  .guide-card .gbody .hl-g{background:linear-gradient(transparent 52%,rgba(127,174,110,.40) 52%);color:var(--ink);padding:0 1.5px;border-radius:2px;font-weight:600}
  .guide-card .gbody hr{border:none;border-top:1px dashed var(--line);margin:13px 0}
  .guide-card .gbody img{display:block;max-width:100%;border-radius:9px;margin:11px 0;border:1px solid var(--line)}
  .lvg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:5px 0 11px;max-width:430px}
  .lvg-cell{display:block;border:1px solid var(--line);border-radius:9px;overflow:hidden;aspect-ratio:4/3;background:rgba(127,174,110,.06)}
  .lvg-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
  .lvg-cell:hover img{transform:scale(1.06)}
  .lvg-more{display:flex;align-items:center;justify-content:center;border-style:dashed;color:var(--muted);text-decoration:none;text-align:center;font-size:12px;line-height:1.45;font-weight:600}
  .lvg-more:hover{border-color:var(--accent);color:var(--ink)}
  @media(max-width:600px){.lvg{gap:5px;max-width:none}.lvg-more{font-size:11px}}
  #lvbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.86);align-items:center;justify-content:center;cursor:zoom-out;padding:22px}
  #lvbox img{max-width:95%;max-height:95%;border-radius:8px;box-shadow:0 10px 44px rgba(0,0,0,.6)}
  /* 🚆 통근권 살이 (index 일본살이 — map과 공유 데이터) */
  .cl-host{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
  .cl-wrap .cl-h h3{margin:0 0 8px;font-size:16px}
  .cl-intro{font-size:13px;line-height:1.75;color:var(--ink-dim);margin:0 0 12px}
  .cl-gen{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
  @media(max-width:560px){.cl-gen{grid-template-columns:1fr}}
  .cl-gen-col{border-radius:9px;padding:10px 12px;font-size:12.3px}
  .cl-good-col{background:rgba(127,174,110,.1);border:1px solid rgba(127,174,110,.3)}
  .cl-bad-col{background:rgba(217,105,79,.08);border:1px solid rgba(217,105,79,.22)}
  .cl-gen-col ul{margin:5px 0 0;padding-left:16px;line-height:1.65}.cl-gen-col li{margin-bottom:4px}
  .cl-lesson{background:var(--rank-bg);border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:0 9px 9px 0;padding:11px 13px;font-size:12.8px;line-height:1.7;margin-bottom:14px}
  .cl-towns-h{font-weight:700;font-size:13.5px;margin-bottom:9px}
  .cl-town{background:rgba(23,184,166,.06);border:1px solid rgba(23,184,166,.18);border-left:3px solid #17b8a6;border-radius:0 9px 9px 0;padding:10px 13px;margin-bottom:9px}
  .cl-tn{font-size:14px;margin-bottom:3px}.cl-jp{font-size:11.5px;color:var(--ink-dim)}
  .cl-pref{font-size:11px;font-weight:700;background:rgba(23,184,166,.16);color:#13a193;padding:1px 8px;border-radius:6px;vertical-align:middle}
  .cl-line{font-size:11.5px;color:var(--accent2);margin-bottom:5px}
  .cl-good{font-size:12.3px;line-height:1.6;margin-bottom:4px;font-family:'Gowun Dodum'}
  .cl-bad{font-size:12.3px;line-height:1.6;color:var(--ink-dim);margin-bottom:4px;font-family:'Gowun Dodum'}
  .cl-next{font-size:12px;line-height:1.6;color:#c98a2e;background:rgba(201,138,46,.1);border-radius:7px;padding:5px 9px;margin-bottom:5px;font-family:'Gowun Dodum'}
  .cl-src a{font-size:11px;color:var(--accent2);margin-right:9px;text-decoration:none}
  .cl-note{font-size:11.5px;color:var(--ink-dim);margin-top:7px;line-height:1.55}
  .guide-card summary{color:var(--accent)}
  .guide-card .qa{background:var(--rank-bg);border-left:3px solid var(--accent2);padding:9px 12px;border-radius:0 9px 9px 0;margin-top:11px;font-size:12.7px;line-height:1.78}
  .guide-card .greg{background:rgba(217,105,79,.12);border-left:3px solid var(--danger);padding:9px 12px;border-radius:0 9px 9px 0;margin-top:9px;font-size:12.7px;line-height:1.72}
  .guide-card .gback{background:rgba(90,170,160,.13);border-left:3px solid #5aaaa0;padding:9px 12px;border-radius:0 9px 9px 0;margin-top:9px;font-size:12.7px;line-height:1.78}
  .guide-card .gback b{color:var(--ink);font-weight:700}
  /* ── H5 살림도감 찜/메모 ── */
  .guide-card .gc-pin{background:none;border:none;cursor:pointer;font-size:15px;color:var(--accent2);margin-left:6px;padding:0 2px;line-height:1;vertical-align:middle}
  .guide-card .gc-pin.on{color:#e0846c}
  /* 메모 textarea — 게임커리어 기준 통일(제품 카드도 적용되게 일반 셀렉터) */
  .wish-memo{width:100%;margin-top:9px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:inherit;font-size:12.5px;padding:9px 11px;min-height:60px;resize:vertical;line-height:1.6;box-sizing:border-box}
  .wish-memo:focus{outline:none;border-color:var(--accent)}
  /* 메모 토글+배지 (L-6 — 게임커리어식 통일) */
  .memo-box{margin-top:9px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:4px 10px}
  .memo-box>summary{cursor:pointer;font-weight:700;font-size:12.5px;color:var(--accent2);padding:5px 0;list-style:none;display:flex;align-items:center;gap:7px}
  .memo-box>summary::-webkit-details-marker{display:none}
  .memo-box>summary::before{content:'▸';transition:.15s;opacity:.6}
  .memo-box[open]>summary::before{transform:rotate(90deg)}
  .memo-badge{background:var(--accent);color:#fff;font-size:10px;font-weight:700;border-radius:8px;padding:1px 8px}
  .memo-box .wish-memo{margin-top:0;margin-bottom:8px}
  .life-pin-toggle{background:var(--panel2);border:1px solid var(--line);border-radius:14px;color:var(--ink-dim);cursor:pointer;font-size:12px;padding:5px 12px;margin-left:auto}
  .life-pin-toggle.on{background:#e0846c;color:#fff;border-color:#e0846c}
  /* ── 토픽스위처 pill (index.html 용 — career/map/benefits/interior 는 각자 inline 보유) ── */
  .topic-switcher{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-left:6px}
  .topic-switcher .tchip{font-size:11.5px;padding:4px 9px;border-radius:14px;background:var(--panel2);color:var(--ink-dim);text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:.15s}
  .topic-switcher .tchip:hover{color:var(--ink);border-color:var(--accent)}
  .topic-switcher .tchip.on{background:var(--accent);color:#fff;font-weight:600}
  .warn{color:var(--danger);font-weight:600}

  /* FAB */
  .fab{position:fixed;right:20px;bottom:24px;z-index:60;display:flex;flex-direction:column;gap:9px}
  .fab button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:17px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:.15s}
  .fab button:hover{border-color:var(--accent);transform:translateY(-2px)}

  footer{margin-top:50px;padding:24px 22px;border-top:1px solid var(--line);color:var(--ink-dim);font-size:11.5px;text-align:center;font-family:'Gowun Dodum'}
  .hide{display:none!important}

  /* ===== 스크롤바 디자인 (사용자 명시 — 기본 스크롤바 튀어서 정리) ===== */
  *{scrollbar-width:auto;scrollbar-color:var(--line) transparent}
  ::-webkit-scrollbar{width:14px;height:14px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:3px solid var(--bg);background-clip:padding-box;min-height:40px}
  ::-webkit-scrollbar-thumb:hover{background:var(--accent2);background-clip:padding-box}
  .sidebar::-webkit-scrollbar{width:10px}

  /* ===== LEFT SIDEBAR (PW_research C10 — Baymard 좌측 네비: 항상 보임·세로 확장) ===== */
  .topbar-inner{max-width:none}
  .sb-toggle{background:var(--panel);border:1px solid var(--line);border-radius:9px;width:34px;height:34px;font-size:16px;color:var(--ink);cursor:pointer;flex-shrink:0;transition:.15s}
  .sb-toggle:hover{border-color:var(--accent);color:var(--accent)}
  .layout{display:flex;align-items:flex-start;max-width:none;margin:0;gap:0}
  .sidebar{width:222px;flex-shrink:0;position:sticky;top:55px;max-height:calc(100vh - 55px);overflow-y:auto;padding:14px 12px 40px;border-right:1px solid var(--line);scrollbar-width:thin}
  .sidebar.collapsed{display:none}
  .main{flex:1;min-width:0;padding:0 6px}
  .main .wrap{max-width:none;padding:0 20px}
  .sb-glabel{font-size:10px;letter-spacing:.12em;color:var(--ink-dim);font-weight:700;padding:10px 10px 5px;text-transform:uppercase}
  .sb-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:9px;padding:8px 10px;font-size:13px;color:var(--ink);cursor:pointer;font-family:inherit;transition:.13s}
  .sb-item:hover{background:var(--panel2)}
  .sb-item.on{background:var(--rank-bg);border-color:var(--accent);color:var(--accent)}
  .sb-item.spy:not(.on){background:var(--panel2);box-shadow:inset 3px 0 0 var(--accent2)}
  .sb-item .ic{font-size:15px;width:18px;text-align:center;flex-shrink:0}
  .sb-divider{height:1px;background:var(--line);margin:8px 6px}
  .sb-backdrop{display:none}
  @media(max-width:900px){
    .sidebar{position:fixed;left:0;top:55px;bottom:0;z-index:60;width:252px;background:var(--panel);transform:translateX(-100%);transition:transform .2s;max-height:none}
    .sidebar.open{transform:none;box-shadow:6px 0 28px rgba(0,0,0,.45)}
    .sb-backdrop.show{display:block;position:fixed;inset:55px 0 0 0;background:rgba(0,0,0,.45);z-index:55}
    .main .wrap{padding:0 14px}
  }
  /* ===== 제품 이미지 — 카드 높이만큼 세로 확대 + 가로 확대 (사용자 명시 2026-06-04) ===== */
  .rank{grid-template-columns:160px 1fr;gap:18px;padding:16px 20px}
  .rank .thumb{width:160px;height:auto;align-self:start;min-height:130px;max-height:220px;place-items:stretch}
  .rank .thumb a{overflow:hidden;border-radius:11px;display:block;height:100%;min-height:130px;max-height:220px}
  .rank .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
  .rank .thumb img.ico{object-fit:contain;padding:22px}
  .rank .thumb a:hover img{transform:scale(1.08)}
  @media(max-width:600px){
    .rank{grid-template-columns:100px 1fr;gap:12px}
    .rank .thumb{width:100px;min-height:100px}
    .rank .thumb a{min-height:100px}
  }
  /* ===== 꿀정보 하위 카테고리 헤더 ===== */
  .honey-cat{font-size:15.5px;color:var(--accent);font-weight:700;margin:26px 0 2px;padding-bottom:7px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:7px}
  .honey-cat:first-of-type{margin-top:14px}
  /* 카테고리 방식·타입별 비교 가이드 */
  .catguide{margin:4px 0 12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:4px 12px}
  .catguide>summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--accent2);padding:7px 0}
  .cg-wrap{overflow-x:auto}
  .cg-table{width:100%;border-collapse:collapse;margin:4px 0 8px;font-size:12px}
  .cg-table th{background:var(--panel);color:var(--ink-soft);font-weight:600;text-align:left;padding:5px 8px;border:1px solid var(--line);white-space:nowrap}
  .cg-table td{border:1px solid var(--line);padding:5px 8px;vertical-align:top;line-height:1.5}
  .cg-table .cg-t{font-weight:700;color:var(--ink);white-space:nowrap}
  .cg-sec{margin:4px 0 8px}
  .cg-sec+.cg-sec{border-top:1px dashed var(--line);padding-top:8px}
  .cg-h{font-size:13px;font-weight:800;color:var(--accent2);margin:6px 0 6px}
  .cg-regret{font-size:12px;line-height:1.6;background:rgba(217,69,94,.08);border-radius:7px;padding:6px 9px;margin:5px 0}
  .cg-pick{font-size:12px;line-height:1.6;background:rgba(31,157,115,.1);border-radius:7px;padding:6px 9px;margin:5px 0}
  .cg-honey{margin:6px 0 4px;font-size:12px;font-weight:600;background:rgba(232,161,58,.16);color:#c98a2e;border:1px solid rgba(232,161,58,.4);border-radius:8px;padding:5px 12px;cursor:pointer}
  .honey-nav{font-size:12px;margin:2px 0 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--ink-dim)}
  .hn-btn{font-size:11.5px;font-weight:600;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:4px 10px;cursor:pointer;color:var(--accent2);text-decoration:none}
  .hn-btn:hover{background:var(--accent);color:#fff}
  /* 정보형 카드 (verdict:info — 차관리·운전법규 등 물리제품 아님) */
  .rank.info-card{position:relative;border-left:3px dashed var(--accent2);background:linear-gradient(180deg,rgba(127,174,110,.06),transparent 60%)}
  .rank.info-card .price{color:var(--ink-dim);font-weight:500}
  .rank.info-card .thumb{opacity:.85}
  .info-ribbon{position:absolute;top:6px;right:34px;z-index:2;font-size:10px;font-weight:700;background:rgba(127,174,110,.22);color:var(--accent2);border:1px solid rgba(127,174,110,.45);border-radius:8px;padding:1px 8px}
  tr.sim-info td{color:var(--ink-dim);font-style:italic}
  /* 일본살이 → 자취도감 jp 제품 연계 */
  .lv-prods{margin:8px 0 2px;font-size:12.5px;line-height:1.9;color:var(--ink-soft)}
  .lv-prod{display:inline-block;margin:2px 5px 2px 0;font-size:11.8px;font-weight:600;background:rgba(110,168,254,.14);color:var(--accent);border:1px solid rgba(110,168,254,.35);border-radius:9px;padding:3px 10px;text-decoration:none}
  .lv-prod:hover{background:var(--accent);color:#fff}
.lp-tip{background:rgba(127,174,110,.12);border-left:3px solid var(--accent);border-radius:8px;padding:8px 12px;margin:8px 0;font-size:13px;line-height:1.6;color:var(--ink)}

/* BB7: 일본 용어 해설 토글 (lifeplan 등 공유) */
.lv-gloss{margin-top:11px}
.lv-gloss>summary{cursor:pointer;font-size:12.9px;color:#c79a4e;list-style:none;font-weight:600}
.lv-gloss>summary::-webkit-details-marker{display:none}
.lv-gloss>summary::before{content:'▸ ';opacity:.6}
.lv-gloss[open]>summary::before{content:'▾ '}
.lv-gloss-list{margin-top:8px;display:flex;flex-direction:column;gap:7px}
.lv-gloss-item{font-size:13.3px;line-height:1.62;background:rgba(199,154,78,.09);border-left:3px solid rgba(199,154,78,.5);border-radius:0 8px 8px 0;padding:8px 12px}
.lv-gloss-item .jp{font-weight:700;color:var(--accent2,#c79a4e)}
.lv-gloss-item .ko{color:var(--ink-dim);font-size:11.8px;margin-left:3px}
.lv-gloss-item .mn{display:block;margin-top:2px;color:var(--ink)}

/* JJ-7: 인생도감 여가·취미 하위 카테고리 시각 구분 — accent 바 헤더 + 점프 칩 + 구분선 */
.lp-subnav{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.lp-subchip{font-size:11.5px;padding:4px 11px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s}
.lp-subchip b{opacity:.55;font-weight:600;margin-left:2px}
.lp-subchip:hover{border-color:var(--accent);color:var(--accent)}
.lp-subhead{display:flex;align-items:center;gap:9px;margin:24px 0 10px;font-weight:800;font-size:15.5px;scroll-margin-top:70px}
.lp-subhead .lp-subbar{width:4px;height:19px;border-radius:2px;background:linear-gradient(180deg,var(--accent),rgba(0,0,0,0))}
.lp-subhead .tag{font-size:11px;opacity:.6;font-weight:600}
.lp-subdiv{height:1px;background:linear-gradient(90deg,var(--line),rgba(0,0,0,0));margin:20px 0 0}

/* JJ-1: 식품관 대카테고리(구매처) 헤더 */
.food-big{margin:30px 0 6px;scroll-margin-top:70px}
.fb-head{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;padding:10px 14px;border-radius:10px;background:linear-gradient(135deg,rgba(225,29,72,.14),rgba(127,29,29,.07));border:1px solid var(--line)}
.fb-head .fb-ic{font-size:19px}
.fb-head .tag{font-size:11px;opacity:.6;font-weight:600}
.fb-desc{font-size:12px;opacity:.7;margin:6px 2px 0;line-height:1.5}
.fg-nav{display:flex;flex-wrap:wrap;gap:7px;margin:10px 2px 2px}
.fg-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s}
.fg-chip:hover{border-color:#e11d48}
.fg-chip.on{background:linear-gradient(135deg,#e11d48,#7f1d1d);color:#fff;border-color:transparent}
.fg-chip .n{font-size:10.5px;opacity:.75;font-weight:600;margin-left:2px}
.food-hot{font-size:10.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#f43f5e,#f97316);border-radius:9px;padding:2px 8px}
.food-season{font-size:10.5px;font-weight:600;opacity:.75;border:1px solid var(--line);border-radius:9px;padding:2px 7px}

/* 식품관 매장 뱃지 (카드별 어느 매장인지) */
.food-store{font-size:10.5px;font-weight:700;border:1px solid var(--line);border-radius:9px;padding:2px 8px;background:var(--panel2);margin-right:4px;white-space:nowrap}

/* Z3: 컬렉션 보드 (career 찜 그룹 — interior 패턴 공유) */
.bd-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 16px}
.bd-tab{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:16px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.bd-tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.bd-tab .bd-cnt{font-size:10.5px;opacity:.65;font-weight:600}
.bd-tab .bd-del{font-size:10px;opacity:.5;margin-left:2px}
.bd-tab .bd-del:hover{opacity:1;color:#f43f5e}
.bd-tab.bd-add{border-style:dashed;opacity:.75}
.ba-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 2px}
.ba-lbl{font-size:11.5px;font-weight:700;opacity:.7}
.ba-chip{font-size:11px;padding:3px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.ba-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- dismiss (카드 숨기기) ---- */
.dismiss-btn{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--ink-dim);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;z-index:2;line-height:1}
.rank:hover .dismiss-btn,.game-card:hover .dismiss-btn{opacity:.7}
.dismiss-btn:hover{opacity:1!important;background:#f43f5e;color:#fff;border-color:#f43f5e}
.rank,.game-card{position:relative}
#dismissMgr{display:none;font-size:11.5px}
#dismissMgr .top-btn{font-size:11.5px}
.dismiss-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:none;align-items:center;justify-content:center}
.dismiss-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 24px;max-width:480px;width:90%;max-height:70vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.dismiss-list{display:flex;flex-direction:column;gap:6px}
.dismiss-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;background:var(--panel2);font-size:12.5px}
.dismiss-id{flex:1;margin-right:8px;overflow:hidden;min-width:0}
.dismiss-id .dpath{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:12.5px;line-height:1.4}
.dismiss-id .dts{display:block;font-size:10.5px;color:var(--ink-dim);margin-top:1px}
.dismiss-restore{font-size:11px;padding:3px 10px;border-radius:8px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
.dismiss-restore:hover{background:var(--accent);color:#fff}
.dismiss-clearall{font-size:12px;padding:5px 14px;border-radius:8px;border:1px solid #f43f5e;background:transparent;color:#f43f5e;cursor:pointer}
.dismiss-clearall:hover{background:#f43f5e;color:#fff}
.dismiss-close{font-size:12px;padding:5px 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}