:root{
    --paper:#f6f7f4; --panel:#fff; --ink:#17211c; --sub:#6a6f66; --faint:#9a9e94;
    --pine:#14504a; --pine-soft:#e5ede9; --line:#e3e5df;
    --ochre:#b57d2a; --ochre-soft:#f6ecd6; --ochre-ink:#8a5d16;
    --clay:#b14a38; --clay-soft:#f4e3df;
    --serif:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
    --sans:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
  }
  /* 남부 상품별 리스트 */
  .plist{display:flex; flex-direction:column}
  .prow{display:flex; flex-wrap:wrap; align-items:baseline; padding:14px 2px; border-bottom:1px solid var(--line)}
  .prow:last-child{border-bottom:none}
  .plist{gap:0}
  .pmore{width:100%}
  .pmore>summary{list-style:none; cursor:pointer; text-align:center; font-size:12.5px; font-weight:700; color:var(--pine); padding:13px; border-bottom:1px solid var(--line)}
  .pmore>summary::-webkit-details-marker{display:none}
  .pmore[open]>summary{}
  .pmore .plist{gap:0}
  .prow.flag{}
  .pmain{display:contents}
  .pnm{font-size:14.5px; font-weight:800; line-height:1.4; order:1; flex:1; min-width:0}
  .pnm em{font-style:normal; font-weight:600; color:var(--pine); font-size:12px; margin-left:4px}
  .pnm .dup{font-size:10px; font-weight:800; color:#fff; background:var(--faint); padding:1px 6px; border-radius:5px; margin-left:5px; vertical-align:middle}
  .pwarn{font-size:12px; color:var(--sub); order:4; flex-basis:100%; margin-top:11px; line-height:1.55; padding-left:9px; border-left:2px solid #e8d9b5}
  .pwarn.ok{color:var(--sub); border-left-color:#cfe0cf}
  .pwarn b{color:var(--ink); font-weight:600}
  .pmeta{display:contents}
  .ppr{font-size:17px; font-weight:800; letter-spacing:-.01em; order:2; margin-left:auto}
  .ppr::after{content:"원"; font-size:12px; font-weight:600; color:var(--sub); margin-left:1px}
  .prt{display:none}
  .prt .recent{color:var(--clay); font-weight:700}
  *{box-sizing:border-box; margin:0; padding:0}
  html{-webkit-text-size-adjust:100%}
  body,button,a,div,span,p,li,h1,h2,h3{word-break:keep-all; overflow-wrap:break-word}
  body{font-family:var(--sans); background:#dedfd8; color:var(--ink);
    line-height:1.62; -webkit-font-smoothing:antialiased; font-size:15px; font-feature-settings:"tnum";}
  .wrap{max-width:460px; margin:0 auto; background:var(--paper); min-height:100vh; position:relative;
    box-shadow:0 0 50px rgba(0,0,0,.13);}
  header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px;}
  .logo{font-weight:800; letter-spacing:-.02em; font-size:18px}
  .logo b{color:var(--pine)}
  .mark{width:28px;height:28px;border-radius:8px;background:var(--pine);display:flex;align-items:center;justify-content:center;flex:none}
  .hmenu{color:var(--sub); font-size:19px}

  .verdict{margin:0 16px; background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden}
  .v-top{padding:20px 20px 4px}
  .eyebrow{font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--ochre-ink); text-transform:uppercase; display:flex; align-items:center; gap:8px}
  .eyebrow::before{content:""; width:14px; height:1.5px; background:var(--ochre)}
  .op-name{font-size:27px; font-weight:800; letter-spacing:-.02em; margin-top:12px}
  .op-loc{font-size:13px; color:var(--sub); margin-top:3px; line-height:1.5}
  .op-loc a{color:var(--pine); font-weight:700; text-decoration:none; white-space:nowrap}
  .microstat{font-size:12.5px; color:var(--sub); margin:13px 0 2px; padding-top:13px; border-top:1px solid var(--line); line-height:1.6}
  .microstat b{color:var(--ink); font-weight:700}
  .tbadge{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; color:var(--pine); background:var(--pine-soft); padding:3px 9px; border-radius:20px; vertical-align:middle; margin-left:9px; letter-spacing:0}
  .statstrip{display:flex; flex-wrap:wrap; gap:7px 0; margin:14px 0 2px; padding-top:14px; border-top:1px solid var(--line)}
  .statstrip .st{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--sub); padding:0 13px; border-right:1px solid var(--line)}
  .statstrip .st:last-child, .statstrip .st:nth-child(3){border-right:none}
  .statstrip .st:first-child{padding-left:0}
  .statstrip .st .i{font-size:13px; opacity:.9}
  .statstrip .st b{color:var(--ink); font-weight:700}
  .statstrip .st a{color:var(--pine); font-weight:700; text-decoration:none}
  .v-line{font-family:var(--serif); font-weight:700; font-size:19px; line-height:1.5; margin:16px 0 4px; letter-spacing:-.01em}
  .v-line em{font-style:normal}
  .meter{display:flex; border-top:1px solid var(--line); margin-top:16px}
  .meter div{flex:1; padding:13px 14px; border-right:1px solid var(--line)}
  .meter div:last-child{border-right:none}
  .m-k{font-size:10.5px; font-weight:700; letter-spacing:.03em; color:var(--faint); text-transform:uppercase}
  .m-v{font-size:15px; font-weight:800; margin-top:3px; letter-spacing:-.01em}
  .m-v.fit{} .m-v small{font-weight:600; font-size:11px; color:var(--sub)}
  .v-foot{background:#fbfbf9; border-top:1px solid var(--line); padding:10px 16px; font-size:11.5px; color:var(--sub); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
  .v-foot b{color:var(--pine); font-weight:700}
  .dot{width:3px; height:3px; border-radius:50%; background:var(--faint)}

  nav.tabs{position:sticky; top:0; z-index:20; background:var(--paper); display:flex; gap:4px;
    padding:14px 16px 10px; margin-top:14px; border-bottom:1px solid var(--line);
    overflow-x:auto; scrollbar-width:none}
  nav.tabs::-webkit-scrollbar{display:none}
  .tab{flex:none; font-size:13.5px; font-weight:700; color:var(--sub); background:none; border:none; padding:8px 13px; border-radius:20px; cursor:pointer; white-space:nowrap}
  .tab.on{background:var(--pine); color:#fff}

  main{padding:8px 16px 24px}
  .panel{display:none} .panel.on{display:block}
  .block{margin-top:18px} .block:first-child{margin-top:14px}
  .h{font-family:var(--serif); font-weight:800; font-size:16px; letter-spacing:-.01em; display:flex; align-items:baseline; gap:8px; margin-bottom:12px}
  .h span{font-family:var(--sans); font-size:11.5px; font-weight:600; color:var(--faint)}
  .box{background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:17px}

  .chips{display:flex; flex-wrap:wrap; gap:7px}
  .chips span{font-size:12.5px; font-weight:600; background:#eef0ea; color:var(--sub); padding:6px 11px; border-radius:8px}
  .chips span.off{background:#eef0ea; color:var(--sub); text-decoration:line-through}
  .subnote{font-size:12.5px; color:var(--sub); margin-top:12px; line-height:1.65}
  .subnote b{color:var(--ink); font-weight:600}

  .prow{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 0; border-top:1px solid var(--line)}
  .prow:first-of-type{border-top:none}
  .prow.rec{margin:0 -17px; padding:13px 17px; background:var(--ochre-soft); border-top:1px solid var(--ochre-soft)}
  .pn{font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:7px}
  .pn .rp{font-size:10.5px; font-weight:700; background:#eef0ea; color:var(--sub); padding:2px 7px; border-radius:6px}
  .ps{font-size:11.5px; color:var(--sub); margin-top:3px}
  .pv{text-align:right; white-space:nowrap}
  .pv b{font-size:16px} .pv .ps{margin-top:2px}

  .rrow{display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:9px 0; border-top:1px dashed var(--line)}
  .rrow:first-of-type{border-top:none}
  .rrow .rk{color:var(--sub); font-weight:600; flex:none}
  .rrow .rv{text-align:right}

  .call{border-radius:13px; padding:13px 15px; font-size:12.5px; line-height:1.68; margin-top:13px}
  .call b{font-weight:400}
  .call.amber{background:var(--ochre-soft); color:var(--ochre-ink)} .call.amber b{color:inherit; font-weight:400}
  .call.blue{background:#e9f0f6; color:#2c4a68} .call.blue b{color:inherit; font-weight:400}
  .call.pine{background:var(--pine-soft); color:#0f4640} .call.pine b{color:inherit; font-weight:400}
  .call.clay{background:var(--clay-soft); color:#7d3327} .call.clay b{color:inherit; font-weight:400}

  /* 예약 직전 '잡아낸 것' 카드 (세로 1열) */
  .finds{margin:14px 16px 0; display:flex; flex-direction:column; gap:11px}
  .find{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line); border-radius:14px; padding:15px 16px}
  .find.risk{border-left-color:var(--clay)} .find.cost{border-left-color:var(--ochre-ink)} .find.work{border-left-color:var(--pine)}
  .find .fl{font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin-bottom:7px}
  .find.risk .fl{color:var(--clay)} .find.cost .fl{color:var(--ochre-ink)} .find.work .fl{color:var(--pine)}
  .find .fb{font-size:13px; line-height:1.62; color:#3a3f37}
  .find .fq{list-style:none; margin:9px 0 0; display:flex; flex-direction:column; gap:5px}
  .find .fq li{font-size:12.5px; line-height:1.5; color:#3a3f37; padding-left:13px; position:relative}
  .find .fq li::before{content:""; position:absolute; left:1px; top:7px; width:5px; height:5px; border-radius:50%; background:var(--faint); opacity:.55}
  .find .fq li.q{color:var(--sub)}
  .find .fdim{color:var(--faint); font-size:12px}
  .find .fn{font-size:11.5px; color:var(--faint); line-height:1.55; margin-top:9px}
  .find a.fa{display:inline-block; margin-top:11px; font-size:12px; font-weight:700; color:var(--pine); text-decoration:none; cursor:pointer}
  .find a.fa:hover{text-decoration:underline}
  /* 아코디언: 제목+한줄 요약은 항상, 인용·안내·링크는 펼침 */
  .find>summary.fl{cursor:pointer; list-style:none; position:relative; padding-right:20px; margin-bottom:0}
  .find>summary.fl::-webkit-details-marker{display:none}
  .find>summary.fl::after{content:"▾"; position:absolute; right:0; top:0; font-size:12px; color:var(--faint); transition:transform .2s}
  .find[open]>summary.fl::after{transform:rotate(180deg)}
  .find[open]>summary.fl{margin-bottom:9px}
  .find>summary.fl:focus-visible{outline:2px solid var(--pine); outline-offset:3px; border-radius:5px}
  .find .fsub{display:block; margin-top:4px; font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--sub)}
  .find[open] .fsub{display:none}
  .rvsort{display:flex; align-items:center; gap:9px; margin:8px 0 12px; font-size:12.5px; color:var(--faint)}
  .rvsort-b{background:none; border:none; padding:0; font:inherit; color:var(--faint); cursor:pointer}
  .rvsort-b.on{color:var(--ink); font-weight:700}
  .rvsort-sep{color:var(--line)}

  ul.li{list-style:none; display:flex; flex-direction:column; gap:11px}
  ul.li li{font-size:14px; display:flex; gap:9px; line-height:1.55}
  .ic{flex:none; width:16px; font-weight:800}
  .pro .ic{color:var(--sub)} .neu .ic{color:var(--sub)}
  ul.li.pro li{flex-direction:row}
  ul.li li>div{display:flex; flex-direction:column; gap:6px}
  .only{align-self:flex-start; font-size:11px; font-weight:700; background:#eef0ea; color:var(--sub); padding:3px 9px; border-radius:7px}

  details.cx{border-top:1px solid var(--line); padding:11px 0}
  details.cx:first-of-type{border-top:none}
  details.cx summary{list-style:none; cursor:pointer; font-size:14px; display:flex; gap:9px; align-items:flex-start}
  details.cx summary::-webkit-details-marker{display:none}
  details.cx summary .ic{color:var(--clay)}
  details.cx summary .more{margin-left:auto; flex:none; font-size:11px; color:var(--pine); font-weight:700}
  details.cx[open] summary .more{visibility:hidden; position:relative}
  details.cx[open] summary .more::before{content:"닫기"; visibility:visible; position:absolute; right:0}
  .cx-body{font-size:12.5px; color:var(--sub); line-height:1.65; margin:9px 0 2px 25px; padding:11px 13px; background:#faf9f6; border-radius:10px}
  .cx-body .meta{display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:9px; font-size:11px; color:var(--faint); font-weight:600}
  .cx-body .reply{margin-top:9px; padding-top:9px; border-top:1px dashed var(--line); color:#556}
  .cx-body .reply b{color:var(--pine)}
  .sev{flex:none; width:8px; height:8px; border-radius:50%; margin-top:6px}
  .sev.hi{background:var(--clay)} .sev.mid{background:var(--ochre)} .sev.lo{background:var(--faint)}

  .stars{display:flex; gap:24px; margin-bottom:8px}
  .sv{font-size:27px; font-weight:800; letter-spacing:-.02em}
  .sv span{color:var(--ochre)}
  .sl{font-size:12px; color:var(--sub); margin-top:1px}
  .asof{font-size:11.5px; color:var(--faint)}

  .crit{padding:12px 0; border-top:1px solid var(--line)}
  .crit:first-of-type{border-top:none}
  .crit-top{display:flex; align-items:center; gap:11px; font-size:13.5px}
  .crit-top .lab{width:88px; flex:none; color:#2c3129; font-weight:600}
  .bar{flex:1; height:7px; background:#edeeE9; border-radius:5px; overflow:hidden}
  .bar>i{display:block; height:100%; background:var(--pine); border-radius:5px}
  .bar>i.warn{background:var(--clay)}
  .crit-top .cv{width:24px; text-align:right; font-size:12px; color:var(--sub); flex:none}
  .crit-why{font-size:12px; color:var(--sub); margin:7px 0 0 99px; line-height:1.5}

  .catg{margin-top:14px} .catg:first-child{margin-top:0}
  .catg .ct{font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--pine); text-transform:uppercase; margin-bottom:8px}
  .prod{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:8px 0; border-top:1px solid var(--line)}
  .catg .prod:first-of-type{border-top:none}
  .prod .pt{font-weight:600; display:flex; align-items:center; gap:6px}
  .pch{font-size:10px; font-weight:600; color:var(--sub); background:#eef0ea; padding:1px 6px; border-radius:5px}
  .best{font-size:9.5px; font-weight:700; background:#eef0ea; color:var(--sub); padding:2px 6px; border-radius:5px}
  .ref{font-size:9.5px; font-weight:800; background:#f0ebe0; color:#8a7a55; padding:2px 6px; border-radius:5px}

  .mgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; margin-bottom:14px}
  .mgrid>div{font-size:13.5px; line-height:1.4}
  .mgrid .mk{display:block; font-size:11px; color:var(--sub); font-weight:700; margin-bottom:2px}

  .tray{max-width:460px; width:calc(100% - 32px); margin:16px auto 40px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px}
  .tray .t1{font-size:11.5px; color:var(--sub)} .tray .t2{font-size:15px; font-weight:800}
  .tray button{background:var(--pine); color:#fff; border:none; padding:13px 22px; border-radius:13px; font-weight:700; font-size:15px; cursor:pointer}

  @media(min-width:920px){
    body{padding:26px 0}
    .wrap{max-width:560px; min-height:auto; border-radius:22px; padding-bottom:20px; overflow:hidden}
    .tray{max-width:560px}
  }

  /* ===== 데스크톱 반응형 ===== */
  @media (min-width:800px){
    body{font-size:16px}
    .wrap{max-width:560px; margin:26px auto; min-height:auto; border-radius:22px; padding-bottom:0; overflow:hidden}
    .tray{max-width:560px}
    main{padding:8px 22px 24px}
    .verdict{margin:0 22px}
    nav.tabs{border-radius:0}
    .op-name{font-size:30px}
  }

  /* 실제 후기 카드 */
  .revlist .rvc{border:1px solid var(--line); border-radius:11px; padding:11px 13px; margin-top:9px; background:#fff}
  .revlist .rvc:first-child{margin-top:0}
  .rvc-h{display:flex; align-items:center; gap:8px; margin-bottom:5px}
  .rvc-star{font-weight:800; font-size:13px; color:var(--ink)}
  .rvc-meta{font-size:11px; color:var(--faint)}
  .rvc-good{font-size:10px; font-weight:800; color:var(--sub); background:#eef0ea; border-radius:20px; padding:2px 8px; margin-left:auto; white-space:nowrap}
  .rvc-prod{font-size:10px; font-weight:700; color:var(--pine); background:var(--pine-soft); border-radius:20px; padding:2px 8px; white-space:nowrap}
  .rvc-s{font-size:13px; line-height:1.55; color:#43483f}
  .rvc-r{margin-top:7px}
  .rvc-r summary{font-size:11px; color:var(--pine); font-weight:700; cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:3px}
  .rvc-r summary::-webkit-details-marker{display:none}
  .rvc-r summary::before{content:"\21B3"; color:var(--faint)}
  .rvc-rb{font-size:11.5px; color:var(--sub); line-height:1.5; margin-top:5px; padding:8px 10px; background:#f6f7f4; border-radius:8px}
  .rvmore{margin-top:9px}
  .rvmore summary{font-size:12px; font-weight:700; color:var(--pine); cursor:pointer; list-style:none}
  .rvmore summary::-webkit-details-marker{display:none}
  /* 근거 툴팁 (cebu 이식) */
  .tip{display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:4px;
    border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--faint); font-size:9px; font-weight:800;
    cursor:pointer; vertical-align:middle; line-height:1; flex:none; transition:.12s}
  .tip:hover{border-color:var(--pine); color:var(--pine)}
  .tip-backdrop{position:fixed; inset:0; background:rgba(20,30,25,.34); z-index:99; opacity:0; pointer-events:none; transition:.18s}
  .tip-backdrop.on{opacity:1; pointer-events:auto}
  .tipsheet{position:fixed; left:50%; bottom:0; transform:translateX(-50%) translateY(100%);
    width:100%; max-width:460px; background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.18);
    padding:20px 22px calc(24px + env(safe-area-inset-bottom)); z-index:100; opacity:0; pointer-events:none; transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s}
  .tipsheet.on{transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto}
  .tipsheet .ts-grip{width:38px; height:4px; border-radius:3px; background:var(--line); margin:0 auto 14px}
  .tipsheet .ts-t{font-family:var(--serif); font-weight:800; font-size:16px; margin:5px 0 9px; letter-spacing:-.01em}
  .tipsheet .ts-d{font-size:13px; color:#43483f; line-height:1.65}
  .tipsheet .ts-d b{color:var(--ink); font-weight:400}
  .tipsheet .ts-d b.op{font-weight:800; display:inline-block; margin-top:4px}
  .tipsheet .ts-close{position:absolute; top:15px; right:18px; width:28px; height:28px; border:none; background:#f1f2ee;
    border-radius:50%; color:var(--sub); font-size:15px; cursor:pointer}
  @media (min-width:800px){
    .tipsheet{left:50%; top:50%; bottom:auto; width:440px; max-width:440px; border-radius:18px;
      transform:translate(-50%,-46%) scale(.98); opacity:0; box-shadow:0 20px 60px rgba(0,0,0,.24);
      padding:24px 26px 26px; transition:opacity .18s ease, transform .18s ease; pointer-events:none}
    .tipsheet.on{transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto}
    .tipsheet .ts-grip{display:none}
  }