:root{
    --navy:#0a1628; --burgundy:#7b1e3d;
    --ink:#0a1628; --ink2:#4a5568; --ink3:#8a94a6;
    --line:#e8eaef; --bg:#ffffff; --bg2:#f7f8fa;
    --green:#0f7a55; --greenbg:#e6f4ee;
    --red:#b3261e; --redbg:#fdeceb;
    --r:14px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{word-break:keep-all; overflow-wrap:break-word;   /* 한국어는 어절 단위, 긴 영문·URL만 강제 분리 */
    margin:0; background:var(--bg); color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Helvetica Neue","Malgun Gothic",sans-serif;
    line-height:1.6; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums}
  a{color:inherit}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px}
  section{padding:56px 0}
  h2{font-size:27px; line-height:1.3; letter-spacing:-.02em; margin:0 0 10px; font-weight:650}
  h3{font-size:18px; font-weight:640; letter-spacing:-.01em; margin:0 0 8px}
  .sub{color:var(--ink2); font-size:15.5px; margin:0 0 28px; max-width:660px}
  /* about.html 전용 읽기 칼럼 — 이 페이지는 제목·본문·카드가 한 칼럼을 써야 한다.
     기본값에서는 .wrap 이 1072px 인데 .sub 만 660px 라, 본문은 화면 왼쪽 62%(660/1072)에
     몰리고 오른쪽이 비는데 h2 와 .cols 카드는 끝까지 뻗어 제목이 자기 본문에서 떨어져 보였다.
     ※ .sub 만 가운데로 몰면 왼쪽 끝에 붙은 h2 와 오히려 더 어긋나고,
       .sub 를 전역으로 넓히면 660px 가 정답인 index·auctions 의 한 줄 부제까지 늘어난다.
       → about 섹션만 칼럼 자체를 본문 폭으로 좁히고, 그 안에서 .sub 상한을 푼다.
       카드 4장짜리(.cols.c4)는 그대로 2×2(각 351px)라 기존 세로 리듬이 유지된다. */
  .abt .wrap{max-width:768px}
  .abt .sub{max-width:none}
  .eyebrow{font-size:12px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--burgundy); margin:0 0 10px}
  .beta{display:inline-block; font-size:12px; font-weight:650; border-radius:980px; padding:4px 12px;
    background:#fff4e5; color:#8a5a00; border:1px solid #f3ddb8; margin:0 0 14px}

  /* nav */
  nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
    backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--line)}
  .navin{max-width:1120px; margin:0 auto; padding:9px 24px; display:flex; align-items:center; gap:16px}
  .logo{font-size:19px; font-weight:680; letter-spacing:-.03em; color:var(--navy); text-decoration:none;
    display:flex; align-items:center; gap:8px; flex:none}
  .logo i{width:9px;height:9px;border-radius:50%;background:var(--burgundy);display:inline-block;font-style:normal;
    box-shadow:0 0 0 4px rgba(123,30,61,.14)}
  .navsearch{flex:1 1 180px; max-width:300px; display:flex; align-items:center; gap:8px;
    border:1px solid var(--line); border-radius:980px; padding:6px 14px; background:var(--bg2)}
  .navsearch input{border:0; background:transparent; outline:none; font-family:inherit; font-size:13.5px;
    width:100%; color:var(--ink)}
  .navsearch .ic{color:var(--ink3); font-size:13px}
  .navlinks{display:flex; gap:20px; margin-left:auto; font-size:13.5px; color:var(--ink2); white-space:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{color:inherit; text-decoration:none; padding:4px 0}
  .navlinks a:hover{color:var(--navy)}
  .navlinks a.on{color:var(--navy); font-weight:640; box-shadow:inset 0 -2px 0 var(--burgundy)}
  @media(max-width:820px){
    .navin{flex-wrap:wrap; gap:10px}
    .navsearch{order:3; flex:1 1 100%; max-width:none}
    .navlinks{gap:16px; font-size:13px}
  }

  .btn{border:0; border-radius:980px; padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer;
    font-family:inherit; background:var(--navy); color:#fff; transition:opacity .15s; text-decoration:none;
    display:inline-block}
  .btn:hover{opacity:.86}
  .btn.ghost{background:transparent; color:var(--navy); border:1px solid var(--line)}
  .btn.wine{background:var(--burgundy)}
  .btn.sm{padding:7px 15px; font-size:13px}

  /* hero + big search */
  .hero{padding:70px 0 34px; text-align:center;
    background:radial-gradient(900px 380px at 50% -10%, rgba(123,30,61,.07), transparent 70%), var(--bg)}
  .hero h1{font-size:42px; line-height:1.2; letter-spacing:-.035em; margin:0 auto 14px; max-width:740px; font-weight:680}
  .hero h1 span{color:var(--burgundy)}
  .hero p{font-size:16.5px; color:var(--ink2); max-width:580px; margin:0 auto 30px}
  .bigsearch{display:flex; align-items:center; gap:12px; max-width:620px; margin:0 auto;
    border:1px solid var(--line); border-radius:980px; padding:15px 22px; background:#fff;
    box-shadow:0 2px 16px rgba(10,22,40,.07); transition:box-shadow .18s, border-color .18s}
  .bigsearch:focus-within{border-color:#cdd3dd; box-shadow:0 6px 28px rgba(10,22,40,.11)}
  .bigsearch .ic{color:var(--ink3); font-size:17px}
  .bigsearch input{flex:1; border:0; outline:none; font-family:inherit; font-size:16.5px; color:var(--ink);
    background:transparent; min-width:0}
  .bigsearch input::placeholder{color:var(--ink3)}
  .popular{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:18px auto 0; max-width:680px}
  .pchip{border:1px solid var(--line); background:#fff; border-radius:980px; padding:7px 15px;
    font-size:13.5px; color:var(--ink2); cursor:pointer; font-family:inherit}
  .pchip:hover{border-color:#cfd4dd; color:var(--navy)}
  @media(max-width:680px){.hero h1{font-size:31px} .hero{padding:48px 0 26px}}

  /* 검색 결과 (와인 단위) */
  .rescount{font-size:13.5px; color:var(--ink3); margin:0 0 12px}
  .rows{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
  .row{display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line);
    text-decoration:none; color:inherit; transition:background .13s; cursor:pointer}
  .row:last-child{border-bottom:0}
  .row:hover{background:var(--bg2)}
  .rmain{flex:1; min-width:0}
  .rmain b{display:block; font-size:14.5px; font-weight:620; letter-spacing:-.01em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .rmain span{display:block; font-size:12.5px; color:var(--ink3);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .rprice{text-align:right; flex:none}
  .rprice b{display:block; font-size:15px; font-weight:640; letter-spacing:-.02em; color:var(--navy)}
  .rprice span{display:block; font-size:11.5px; color:var(--ink3)}
  /* ㊺ 배지 컬럼 고정폭 — 배지 유무·길이와 무관하게 가격 우측 끝 x 를 통일한다.
     min-width 로 두면 배지가 길 때 셀이 늘어 가격을 왼쪽으로 밀어 정렬이 어긋난다. */
  .rdisc{flex:0 0 104px; width:104px; text-align:right; white-space:nowrap}
  @media(max-width:620px){.rdisc{display:none} .rprice b{font-size:14px}}
  .empty{border:1px dashed var(--line); border-radius:var(--r); padding:34px 20px; text-align:center;
    color:var(--ink3); font-size:14px; background:var(--bg2)}

  /* KPI */
  .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
  .kpi{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:20px 18px}
  .kpi b{display:block; font-size:27px; font-weight:660; letter-spacing:-.025em; color:var(--navy)}
  .kpi span{display:block; font-size:13px; color:var(--ink3); margin-top:4px}

  /* 카드 */
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px}
  .card{border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; text-decoration:none;
    color:inherit; box-shadow:0 1px 2px rgba(10,22,40,.04); display:flex; flex-direction:column;
    transition:box-shadow .18s, transform .18s; cursor:pointer}
  .card:hover{box-shadow:0 8px 26px rgba(10,22,40,.09); transform:translateY(-2px)}
  .thumb{position:relative; height:170px; background:var(--bg2); display:flex; align-items:center;
    justify-content:center; overflow:hidden}
  /* 유사 추천 카드의 match% 배지 — 썸네일 좌상단. simCard() 가 사용 중이므로 지우지 말 것. */
  .mbadge{position:absolute; top:10px; left:10px; font-size:12px; font-weight:660; border-radius:980px;
    padding:5px 10px; background:rgba(10,22,40,.82); color:#fff}
  .badge{position:absolute; top:10px; right:10px; font-size:12px; font-weight:680; border-radius:980px;
    padding:3px 8px; white-space:nowrap; background:var(--greenbg); color:var(--green);
    border:1px solid rgba(15,122,85,.16)}
  .badge.mini{padding:2px 7px; font-size:11.5px}
  .capline{margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:12.5px; color:var(--wine); font-weight:660}
  .capline span{color:var(--ink3); font-weight:400}
  .drow .capline{margin:2px 0 0; padding:0; border:0; font-size:11px}
  .badge.over{background:var(--redbg); color:var(--red); border-color:rgba(179,38,30,.16)}
  /* 행 안에서는 같은 pill 을 인라인으로 (카드의 .mbadge 는 absolute 유지) */
  .mbadge.rowchip{position:static; display:inline-block; margin-right:7px; padding:2px 7px;
    font-size:11px; vertical-align:1px}
  /* 지난 낙찰 대비 — 시세 배지(그린/레드)와 구분되는 남색 계열 */
  .pbadge{display:inline-block; font-size:11.5px; font-weight:660; border-radius:980px; white-space:nowrap;
    padding:3px 8px; background:#eaf0fa; color:#1f4e8c; border:1px solid rgba(31,78,140,.18)}
  .pbadge.mini{padding:2px 7px; font-size:11px}
  .pline{margin-top:8px}
  .drow .pbadge{margin-left:6px}
  .badge.flat{background:#eef1f5; color:#5a6473; border-color:rgba(90,100,115,.16)}
  /* ㊾ 사진 위 두 코너 — 좌상단 소매(그린), 우상단 옥션(남색). 없는 코너는 :empty 로 안 보임.
     겹침 방지: 각 코너 max-width 50%, 텍스트는 말줄임. z-index 로 사진 위, 반투명 배경으로 가독성. */
  .corner-l{position:absolute; top:10px; left:10px; z-index:3; max-width:calc(50% - 12px); overflow:hidden}
  .corner-r{position:absolute; top:10px; right:10px; z-index:3; max-width:calc(50% - 12px); overflow:hidden}
  /* ★㊿ 버그: base `.badge.tipx{position:absolute}`(아래 line) 가 소스 순서상 뒤라 `.badge.corner{static}`
     를 이긴다(동일 특이도) → 0폭 부모 안에서 배지가 세로로 찌그러져 안 보였다. !important 로 확정 override. */
  .corner-l .badge, .corner-l .pbadge, .corner-r .badge, .corner-r .pbadge{
    position:static !important; top:auto; right:auto; left:auto;
    display:inline-block; max-width:100%; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
    box-shadow:0 1px 4px rgba(10,22,40,.18)}
  .badge.corner{background:rgba(232,246,240,.95); backdrop-filter:blur(2px)}
  .badge.corner.flat{background:rgba(238,241,245,.95)}
  .pbadge.corner{background:rgba(234,240,250,.95); backdrop-filter:blur(2px)}
  .sugline{margin:14px 0 0; font-size:14.5px; color:var(--ink2)}
  .sugline a{color:var(--wine); font-weight:660; text-decoration:none; border-bottom:1px solid var(--wine)}
  .basisnote{font-weight:400; color:var(--ink3); font-size:12.5px; margin-left:6px}
  /* 커스텀 툴팁 — 네이티브 title 은 뜨는 데 ~1초 걸려 회장님이 못 보셨다. 즉시 표시. */
  .ihint{position:relative; display:inline-block; margin-left:7px; vertical-align:middle}
  .ibtn{border:0; background:none; padding:0; font-size:15px; line-height:1; color:var(--ink3); cursor:pointer}
  .ibtn:hover{color:var(--wine)}
  .ibox{position:absolute; left:0; top:calc(100% + 7px); width:270px; padding:11px 13px; border-radius:10px;
    background:#2b2f36; color:#fff; font-size:12.5px; font-weight:400; line-height:1.6; text-align:left;
    box-shadow:0 8px 24px rgba(0,0,0,.2); opacity:0; visibility:hidden; z-index:70}
  .ibox b{color:#fff}
  .ibox a{color:#f0b8c9; text-decoration:none}
  .ihint:hover .ibox, .ihint.open .ibox{opacity:1; visibility:visible}
  @media(hover:none){.ihint:hover .ibox{opacity:0; visibility:hidden} .ihint.open .ibox{opacity:1; visibility:visible}}
  .tipx{position:relative}
  .tipx::after{content:attr(data-tip); position:absolute; left:0; top:calc(100% + 6px);
    min-width:180px; max-width:280px; padding:8px 10px; border-radius:8px;
    background:#2b2f36; color:#fff; font-size:12px; font-weight:500; line-height:1.5;
    white-space:normal; text-align:left; box-shadow:0 6px 20px rgba(0,0,0,.18);
    opacity:0; visibility:hidden; pointer-events:none; z-index:70}
  .tipx:hover::after, .tipx:focus::after, .tipx:focus-visible::after{opacity:1; visibility:visible}
  .badge.na{background:#eef0f4; color:var(--ink3); border-color:var(--line)}
  /* ★ .tipx{position:relative} 가 뒤에 있어 카드 배지의 absolute 를 덮었다(중앙으로 밀림).
     두 클래스 선택자로 되돌린다. 인라인 배지는 아래 규칙대로 static 유지. */
  .badge.tipx{position:absolute}
  .badge.inline{position:static; display:inline-block}
  .badge.inline.tipx{position:static}
  .cbody{padding:15px 16px 16px; display:flex; flex-direction:column; flex:1}
  .cbody h4{margin:0 0 3px; font-size:15px; line-height:1.4; font-weight:620; letter-spacing:-.01em}
  .prod{font-size:12.5px; color:var(--ink3); margin:0 0 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .price{display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin-top:auto;
    border-top:1px solid var(--line); padding-top:12px}
  .price .l{font-size:11.5px; color:var(--ink3); display:block; margin-bottom:1px}
  .price .mk{font-size:14px; color:var(--ink3); text-decoration:line-through}
  .price .sd{font-size:19px; font-weight:660; color:var(--navy); letter-spacing:-.02em}
  .meta{display:flex; justify-content:space-between; align-items:center; gap:8px;
    font-size:11.5px; color:var(--ink3); margin-top:10px}
  .dots{letter-spacing:1px}
  .dots .on{color:var(--burgundy)}
  .aiest{font-size:10.5px; font-weight:650; color:#8a5a00; background:#fff4e5; border:1px solid #f3ddb8;
    border-radius:980px; padding:1px 7px; margin-left:5px; white-space:nowrap}

  /* 컬러 타일 (랏 이미지 대체 — 저작권) */
  .tile{display:flex; align-items:center; justify-content:center; flex:none; color:#fff;
    font-weight:700; letter-spacing:.04em; text-shadow:0 1px 2px rgba(0,0,0,.25); user-select:none}
  .tile{position:relative; overflow:hidden}
  .tile .tphoto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit}
  /* 사진이 덮인 타일은 .lt/.dk 색보정을 끈다(사진 색이 왜곡되지 않도록) */
  .tile.hasimg{filter:none}
  .tile.lt{filter:brightness(1.2) saturate(.82)}
  .tile.dk{filter:brightness(.94)}
  .tile.sq{width:52px; height:52px; border-radius:10px; font-size:15px}
  .tile.md{width:44px; height:44px; border-radius:9px; font-size:13px}
  .tile.big{width:200px; height:230px; border-radius:16px; font-size:44px}
  .tile.full{position:absolute; inset:0; width:100%; height:100%; font-size:40px; border-radius:0}
  .t-BG{background:linear-gradient(140deg,#7b1e3d,#b8546e)}
  .t-BX{background:linear-gradient(140deg,#3d0d1a,#8c2b3f)}
  .t-CH{background:linear-gradient(140deg,#a8842a,#e2c86f)}
  .t-IT{background:linear-gradient(140deg,#1f5e3a,#5aa06a)}
  .t-NA{background:linear-gradient(140deg,#1f3d7a,#5177bd)}
  .t-RH{background:linear-gradient(140deg,#6b3410,#b06e2c)}
  .t-ES{background:linear-gradient(140deg,#8a3b0c,#c9791f)}
  .t-DE{background:linear-gradient(140deg,#25505c,#5a9aa6)}
  .t-XX{background:linear-gradient(140deg,#3f4a5c,#8a94a6)}
  @media(max-width:620px){.tile.big{width:100%; height:150px}}

  /* 로딩 스피너 */
  .spin{display:flex; align-items:center; justify-content:center; gap:12px; padding:60px 20px;
    color:var(--ink3); font-size:14px}
  .spin i{width:18px; height:18px; border-radius:50%; border:2px solid var(--line);
    border-top-color:var(--burgundy); display:inline-block; animation:sp .7s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}

  /* 필터 / 툴바 */
  .toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:20px}
  .fchip{border:1px solid var(--line); background:#fff; color:var(--ink2); border-radius:980px;
    padding:8px 16px; font-size:13.5px; cursor:pointer; font-family:inherit; transition:.15s}
  .fchip:hover{border-color:#cfd4dd}
  .fchip.on{background:var(--navy); color:#fff; border-color:var(--navy)}
  .count{font-size:13.5px; color:var(--ink3); margin-bottom:16px}
  .more{text-align:center; margin-top:26px}
  .chips{display:flex; flex-wrap:wrap; gap:8px}
  .chip{font-size:13px; background:#fff; border:1px solid var(--line); border-radius:980px; padding:6px 13px; color:var(--ink)}

  /* 와인 상세 */
  .extlinks{display:flex; gap:16px; flex-wrap:wrap; margin:14px 0 0; font-size:13px}
  .extlinks a{color:var(--ink3); text-decoration:none; border-bottom:1px solid var(--line)}
  .extlinks a:hover{color:var(--wine); border-bottom-color:var(--wine)}
  .whead{display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap}
  .winfo{flex:1; min-width:280px}
  .winfo h1{font-size:31px; line-height:1.24; letter-spacing:-.03em; margin:6px 0 6px; font-weight:670}
  .winfo .pr{font-size:14.5px; color:var(--ink2); margin:0 0 16px}
  .facts{display:flex; gap:26px; flex-wrap:wrap; margin:0 0 20px}
  .fact b{display:block; font-size:21px; font-weight:650; letter-spacing:-.02em; color:var(--navy)}
  .fact span{display:block; font-size:12px; color:var(--ink3)}
  table.rec{width:100%; border-collapse:collapse; font-size:13.5px; background:#fff;
    border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
  table.rec th{background:var(--bg2); font-size:12px; font-weight:640; color:var(--ink2); text-align:right;
    padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
  table.rec th:first-child,table.rec td:first-child{text-align:left}
  table.rec th:last-child,table.rec td:last-child{text-align:left}
  table.rec td{padding:11px 14px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap}
  table.rec tr:last-child td{border-bottom:0}
  table.rec td.b{font-weight:640; color:var(--navy)}
  .qsflag{color:var(--ink2); border-bottom:1px dotted var(--ink3); cursor:help}
  .cdcell{max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--ink2)}
  .cdots{margin-left:6px; white-space:nowrap}   /* ㊿ 신뢰도 점 — 배지 뒤 우측 끝 */
  /* 정렬 가능한 헤더 — 활성 열만 진하게, 화살표가 현재 방향 */
  table.rec th .sortth{cursor:pointer; user-select:none; -webkit-user-select:none; color:var(--ink2)}
  table.rec th .sortth:hover{color:var(--burgundy)}
  table.rec th .sortth.on{color:var(--navy); font-weight:700}
  table.rec th .sortth:focus{outline:2px solid var(--burgundy); outline-offset:2px; border-radius:3px}
  table.rec th .sortth:focus:not(:focus-visible){outline:none}
  /* Ⓐ 낙찰 이력 = 스카이스캐너식 최저가 강조 */
  table.rec tr.rec-best{background:#fbf7e8}
  table.rec tr.rec-best td{font-weight:640}
  table.rec tr.rec-best td.b{color:var(--navy)}
  /* 행 전체가 그 회차 딜 피드로 가는 링크 — 열 수는 7 그대로, 화살표는 마지막 셀 안에 띄운다 */
  table.rec tr.recrow{cursor:pointer}
  table.rec tr.recrow:hover{background:#eef2f8}
  table.rec tr.rec-best:hover{background:#f6edcf}          /* 금색 최저가 행도 hover 가 보이게 */
  table.rec tr.recrow:focus{outline:2px solid var(--burgundy); outline-offset:-2px}
  table.rec tr.recrow:focus:not(:focus-visible){outline:none}
  /* 화살표는 마지막 셀(소매·옥션) 안에 절대배치한다. float 로 띄우면 좁은 화면에서
     nowrap 내용 위에 겹친다(테이블이 줄어들 때 float 는 폭을 예약하지 못한다).
     padding-right 로 자리를 예약해야 min-content 계산에 포함돼 겹치지 않는다. */
  table.rec td:last-child{position:relative; padding-right:46px}
  .recgo{position:absolute; right:16px; top:50%; transform:translateY(-50%);
    color:var(--ink3); font-weight:700; line-height:1}
  table.rec tr.recrow:hover .recgo,table.rec tr.recrow:focus .recgo{color:var(--burgundy)}
  .recinfo{display:inline-block; margin-left:6px; font-size:15px; color:var(--ink3); cursor:help; vertical-align:middle; font-weight:400}
  .recinfo:hover{color:var(--wine)}
  .recbest{margin:10px 0 14px; font-size:14px; color:var(--ink2)}
  .recbest b{color:var(--navy)}
  .recbest .bwin{color:var(--ink3); font-size:13px}   /* 🥇 후보 제약(최근 3년)은 값보다 한 톤 낮게 */
  /* 하우스 열 — 좌측 정렬(고유명사라 숫자 정렬 규칙을 따르지 않는다) */
  table.rec th:nth-child(2),table.rec td.rhouse{text-align:left}
  table.rec td.rhouse{font-size:12.5px; color:var(--ink2)}
  .hchip{display:inline-block; padding:2px 8px; border-radius:980px; font-size:11.5px;
    background:#eef1f7; color:var(--navy); font-weight:640; letter-spacing:-.01em}
  .eursub{display:block; font-size:11px; color:var(--ink3); font-weight:400; margin-top:1px}
  /* 외부 출처로 나가는 행 — 화살표를 ↗ 로 달아 내부 이동(→)과 구분한다 */
  .extgo{font-size:13px}
  table.rec tr.recext:hover{background:#f4f1f7}
  table.rec tr.rec-best.recext:hover{background:#f6edcf}
  .recfoot{margin:10px 0 0; font-size:12.5px; color:var(--ink3); line-height:1.6}
  .upnow{margin:6px 0 14px; padding:10px 14px; border-radius:10px; background:#fdecec;
    border:1px solid rgba(179,38,30,.18); font-size:13.5px; color:var(--ink2); font-weight:600}
  .upnow a{color:var(--red); font-weight:700; text-decoration:none; border-bottom:1px solid rgba(179,38,30,.4)}
  .tblwrap{overflow-x:auto; border-radius:var(--r)}

  /* 스파크라인 */
  .cmp{margin-top:22px; border:1px solid var(--line); border-radius:16px; padding:22px 24px; background:var(--bg2)}
  .cmp .big{font-size:23px; font-weight:660; letter-spacing:-.02em; color:var(--navy); margin:6px 0 8px}
  .cmp .big em{font-style:normal; color:var(--green)}
  .cmp .big em.over{color:var(--red)}
  .cmp p{margin:0; font-size:13.5px; color:var(--ink2)}
  .cmp .eff{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink2)}
  .cmp .eff b{color:var(--navy)}
  .sparkbox{margin:22px 0 0; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px 8px; background:#fff}
  .sparkbox .sl{font-size:11.5px; font-weight:650; letter-spacing:.06em; color:var(--ink3);
    text-transform:uppercase; margin:0 0 8px}
  .sparkbox svg{width:100%; height:auto; display:block; overflow:visible}
  /* 크로스헤어 차트 — 마우스·터치·키보드 셋 다 받는다.
     touch-action:pan-y = 세로 스크롤은 그대로 두고 가로 제스처만 우리가 읽는다. */
  .sparkbox svg[data-pts]{cursor:crosshair; touch-action:pan-y}
  .sparkbox svg:focus{outline:none}
  .sparkbox svg:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:8px}
  .sparkbox .sfoot{font-size:12px; color:var(--ink3); margin:6px 0 0}

  /* AI 소믈리에 프로파일 */
  .somm{margin-top:34px; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden}
  .sommhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:18px 24px 0}
  .sommhead h3{margin:0; font-size:17px}
  .sommbody{display:grid; grid-template-columns:1.05fr 1fr; gap:0}
  .sommL{padding:18px 24px 24px; border-right:1px solid var(--line)}
  .sommR{padding:18px 24px 24px}
  @media(max-width:760px){.sommbody{grid-template-columns:1fr} .sommL{border-right:0; border-bottom:1px solid var(--line)}}
  .slbl{font-size:11.5px; font-weight:650; letter-spacing:.06em; color:var(--ink3); text-transform:uppercase; margin:0 0 12px}
  .gauges{display:flex; flex-direction:column; gap:11px}
  .gauge{display:flex; align-items:center; gap:12px}
  .gauge .gl{font-size:13px; color:var(--ink2); width:56px; flex:none}
  .gbar{flex:1; height:8px; border-radius:980px; background:#eceef3; overflow:hidden}
  .gbar i{display:block; height:100%; border-radius:980px; background:var(--burgundy); transition:width .5s ease}
  .gauge .gv{font-size:12px; color:var(--ink3); width:30px; text-align:right; flex:none}
  .somm.pending .gbar i{background:#dfe3ea}
  .somm.pending .gauge .gl,.somm.pending .gauge .gv{color:#b7bdc9}
  .story{font-size:14px; color:var(--ink2); line-height:1.72; margin:0 0 16px}
  .pairtail{font-size:13.5px; color:var(--ink2); margin-left:7px}
  .pairing{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink);
    background:var(--bg2); border:1px solid var(--line); border-radius:980px; padding:8px 16px}
  .aroma{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px}
  .aroma span{font-size:12.5px; background:#fbf5f7; border:1px solid #f0e0e6; color:var(--burgundy);
    border-radius:980px; padding:5px 12px}
  .sommnote{font-size:12.5px; color:var(--ink3); margin:0}

  /* 모달 */
  .wmnote{margin:10px 0 0; font-size:12px; color:var(--ink3); line-height:1.5}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
  .mask{position:fixed; inset:0; pointer-events:auto; background:rgba(10,22,40,.42); display:none; align-items:center;
    justify-content:center; z-index:100; padding:20px}
  .mask.on{display:flex}
  .modal{background:#fff; border-radius:18px; padding:28px; max-width:420px; width:100%;
    box-shadow:0 24px 60px rgba(10,22,40,.24)}
  .modal h3{margin:0 0 6px}
  .modal p{margin:0 0 16px; font-size:13.5px; color:var(--ink2)}
  .modal input[type=email]{width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
    font-family:inherit; font-size:14.5px; outline:none; margin-bottom:12px}
  .modal input[type=email]:focus{border-color:#cdd3dd}
  .modal .row2{display:flex; gap:10px; margin-top:6px}
  .modal .row2 .btn{flex:1; text-align:center}
  .msg{display:none; font-size:13.5px; font-weight:600; margin-top:12px; line-height:1.6}
  .msg.on{display:block}
  .msg.good{color:var(--green)}
  .msg.bad{color:var(--red)}

  /* 옥션 */
  table.auc{width:100%; border-collapse:collapse; font-size:13.5px; background:#fff;
    border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
  table.auc th{background:var(--bg2); font-size:12px; font-weight:640; color:var(--ink2); text-align:right;
    padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap}
  table.auc th:first-child,table.auc td:first-child{text-align:left}
  table.auc td{padding:13px 16px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap}
  table.auc tbody tr{cursor:pointer; transition:background .13s}
  table.auc tbody tr:hover{background:var(--bg2)}
  table.auc tr:last-child td{border-bottom:0}
  table.auc td.b{font-weight:640; color:var(--navy)}
  table.auc .code{font-weight:650; color:var(--navy)}
  .upc{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:14px}
  .upcard{border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:var(--bg2)}
  .upcard .code{font-size:12px; font-weight:680; letter-spacing:.08em; color:var(--burgundy)}
  .upcard h3{margin:6px 0 4px; font-size:17px}
  .upcard p{margin:0 0 14px; font-size:13.5px; color:var(--ink2)}
  .pill{display:inline-block; font-size:11.5px; font-weight:650; border-radius:980px; padding:3px 10px;
    background:var(--greenbg); color:var(--green)}
  .pill.gray{background:#eef0f4; color:var(--ink3)}
  .backlink{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink2);
    background:none; border:0; padding:0; cursor:pointer; font-family:inherit; margin-bottom:14px}
  .backlink:hover{color:var(--navy)}

  /* 워치리스트 */

  .acode{display:block; font-size:11px; font-weight:600; color:var(--ink3); letter-spacing:.03em}
  .wrap.wide{max-width:1400px}
  .dfwrap{display:grid; grid-template-columns:220px minmax(0,1fr); gap:14px 28px; align-items:start; margin-top:22px}
  /* 딜피드 카드 — 밀도 상향(정보는 그대로, 여백만 줄인다) */
  .dfmain .grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
  .dfmain .thumb{height:132px}
  .dfmain .cbody{padding:11px 13px 13px}
  .dfmain .cbody h4{font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; overflow-wrap:break-word}
  .dfmain .cbody .prod{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .dfmain .cbody .meta{font-size:11.5px}
  .dqrow{grid-column:2; grid-row:1; display:flex; align-items:center; gap:12px}
  .dfmain{grid-column:2; grid-row:2}   /* ★ 반드시 미디어쿼리 앞에 — 뒤에 두면 모바일 1열 규칙을 덮어 암시적 2열이 생긴다 */
  .dqrow .dqbox{flex:1; margin-bottom:0}
  /* 좌측 필터 — 본문과 함께 스크롤(일반 흐름). 레이아웃 배치 속성만 남긴다. */
  .fside{grid-column:1; grid-row:1 / span 2}
  .ftoggle{display:none}
  .fsec{border-bottom:1px solid var(--line); padding:0 0 14px; margin-bottom:14px}
  .fsec:last-child{border-bottom:0}
  .fsec h4{margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.05em; color:var(--ink3); text-transform:uppercase}
  .frow{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13.5px; cursor:pointer; color:var(--ink2)}
  .frow:hover{color:var(--ink)}
  .frow.on{color:var(--wine); font-weight:640}
  .frow input{margin:0; accent-color:#7b1e3d; flex:none}
  .frow span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .frow i{font-style:normal; font-size:12px; color:var(--ink3)}
  .fsearch{width:100%; box-sizing:border-box; margin:0 0 6px; padding:6px 9px; font-size:13px;
    border:1px solid var(--line); border-radius:8px}
  .fmore{background:none; border:0; padding:4px 0; font-size:12.5px; color:var(--wine); font-weight:640; cursor:pointer}
  .fempty{margin:2px 0; font-size:12.5px; color:var(--ink3)}
  .fbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--ink2);
    padding-bottom:12px; border-bottom:1px solid var(--line)}
  .fbar b{font-size:17px; color:var(--ink)}
  .dqbox{position:relative; display:flex; align-items:center; margin-bottom:14px}
  .dqbox .ic{position:absolute; left:13px; font-size:15px; color:var(--ink3); pointer-events:none}
  .dqbox input{width:100%; box-sizing:border-box; padding:11px 38px 11px 36px; font-size:14.5px;
    border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
  .dqbox input:focus{outline:none; border-color:var(--wine)}
  .dqx{position:absolute; right:8px; width:24px; height:24px; border:0; border-radius:50%;
    background:var(--bg2); color:var(--ink2); font-size:15px; line-height:1; cursor:pointer}
  .dqx:hover{background:var(--line)}
  .fview{display:flex; gap:3px; margin-left:8px}
  .fview button{border:1px solid var(--line); background:#fff; border-radius:8px; width:30px; height:28px;
    font-size:13px; color:var(--ink3); cursor:pointer; line-height:1}
  .fview button.on{border-color:var(--wine); color:var(--wine); background:#fdf2f5}
  .drows{display:flex; flex-direction:column}
  .drow{display:grid; grid-template-columns:44px minmax(0,2.1fr) minmax(0,1.5fr) 88px 132px 128px;
    align-items:center; gap:12px; padding:7px 8px; border-bottom:1px solid var(--line);
    text-decoration:none; color:inherit; font-size:13px}
  .drow:hover{background:var(--bg2)}
  .drow .dth .tile{width:40px; height:40px; border-radius:8px; font-size:11px}
  .drow .dnm{min-width:0; display:flex; flex-direction:column; gap:1px}
  .drow .dnm b{font-size:13.5px; font-weight:640; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .drow .dnm i{font-style:normal; font-size:11.5px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .drow .dcd{min-width:0; font-size:11.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .drow .dqt{font-size:12px; color:var(--ink3); white-space:nowrap}
  .drow .dpr{white-space:nowrap; text-align:right}
  .drow .dpr s{color:var(--ink3); font-size:11.5px}
  .drow .dpr b{font-size:13.5px}
  .drow .ddc{text-align:right; display:flex; align-items:center; justify-content:flex-end}
  .drow.dhead{font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--ink3);
    padding-top:0; padding-bottom:7px; background:none}
  .drow.dhead:hover{background:none}
  .drow.dhead span{white-space:nowrap}
  .drow.dhead .dpr, .drow.dhead .ddc{text-align:right; justify-content:flex-end}
  .drow.dhead .tipx{cursor:help; border-bottom:1px dotted var(--ink3)}
  @media(max-width:1100px){.drow{grid-template-columns:44px minmax(0,2.1fr) 80px 124px 120px} .drow .dcd{display:none}}
  @media(max-width:820px){.drow{grid-template-columns:44px minmax(0,1fr) 116px 112px} .drow .dqt{display:none}}
  @media(max-width:560px){.drow{grid-template-columns:40px minmax(0,1fr) 104px; gap:8px} .drow .dpr{display:none}}
  .idic{display:block; margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.18); font-size:11.5px; line-height:1.6}
  .idic em{color:#f0b8c9; font-style:normal}
  .ibox{width:320px}
  .fsort{display:flex; gap:4px; margin-left:auto}
  @media(max-width:640px){.fsort{margin-left:0; width:100%}}
  .fsort button{border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 12px;
    font-size:12.5px; color:var(--ink3); cursor:pointer}
  .fsort button.on{border-color:var(--wine); color:var(--wine); font-weight:660}
  .fver{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
  .fchips{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
  .fchip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:4px 10px;
    font-size:12.5px; color:var(--ink2); cursor:pointer}
  .fchip:hover{border-color:var(--wine); color:var(--wine)}
  .fchip em{font-style:normal; opacity:.6}
  .fclear{background:none; border:0; font-size:12.5px; color:var(--wine); font-weight:650; cursor:pointer}
  .fbadge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
    padding:0 5px; border-radius:999px; background:var(--wine); color:#fff; font-size:11px; font-weight:700; font-style:normal}
  @media(max-width:768px){
    /* 모바일 — 1열, 순서: 검색 → 필터(접이식) → 결과 */
    /* ★ 1fr 은 minmax(auto,1fr) 이라 카드/표의 min-content 가 컨테이너를 밀어낸다(가로 스크롤).
       minmax(0,1fr) 로 못 박아야 모바일에서 넘치지 않는다. */
    .dfwrap{grid-template-columns:minmax(0,1fr); gap:14px}
    .dqrow, .fside, .dfmain{grid-column:1; grid-row:auto}
    .dqrow{order:1; flex-wrap:wrap}
    .fside{order:2}
    .dfmain{order:3}
    .dqrow .dqbox{flex:1 1 100%}
    .fsort{width:100%}
    .fside{position:static}
    .ftoggle{display:inline-flex; align-items:center; gap:7px; width:100%; justify-content:space-between;
      padding:11px 14px; border:1px solid var(--line); border-radius:10px; background:#fff;
      font-size:14px; font-weight:640; color:var(--ink); cursor:pointer}
    .fbody{display:none; border:1px solid var(--line); border-top:0; border-radius:0 0 10px 10px; padding:14px}
    .fside.open .fbody{display:block}
  }
  .myabanner{display:flex; align-items:center; gap:8px; margin:22px 0 2px; padding:13px 16px;
    border:1px solid var(--line); border-radius:12px; background:var(--bg2); font-size:14px;
    color:var(--ink); text-decoration:none}
  .myabanner:hover{border-color:var(--wine)}
  .myabanner b{color:var(--wine)}
  .brief{border:1px solid var(--line); border-radius:16px; background:#fff; padding:20px 22px; margin:26px 0 4px}
  .briefhead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px}
  .briefhead h3{margin:0; font-size:17px}
  .briefup{font-size:12.5px; color:var(--burgundy); font-weight:650; background:#fdf2f5; border-radius:999px; padding:4px 10px}
  .bnote{font-size:12.5px; color:var(--ink3); margin:0 0 14px}
  .bcard{border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:10px}
  .bcard .btop{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px}
  .bcard .blot{font-size:12px; font-weight:680; color:var(--ink3); letter-spacing:.04em}
  .bcard .bname{font-weight:660; font-size:15px}
  .bcard .bwhy{margin-left:auto; font-size:11.5px; color:var(--ink3)}
  .aibasis{display:block; font-style:normal; font-size:11.5px; color:#9a6b1f; font-weight:640; margin-top:2px}
  .bcard .bsim{background:#eef2f7; color:#4a5568; border-radius:999px; padding:3px 9px; font-size:11.5px; font-weight:640}
  .bgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px 14px; font-size:13px}
  @media(max-width:620px){.bgrid{grid-template-columns:1fr 1fr}}
  .bgrid .l{display:block; color:var(--ink3); font-size:11.5px; margin-bottom:2px}
  .bgrid b{font-size:14px}
  .bcap{margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:13px}
  .bcap .cap{color:var(--wine); font-weight:680; font-size:15px}
  .bverdict{margin-top:8px; font-size:13px; font-weight:640}
  .bverdict.ok{color:var(--green)}
  .bverdict.no{color:var(--red)}
  .bwarn{margin-top:6px; font-size:12.5px; color:var(--red)}
  .nrows{margin:2px 0 0}
  /* 고정 3컬럼 — 강조 행도 패딩·높이 동일(배경만 차이)이라 컬럼 x 가 흔들리지 않는다 */
  .nrow{display:grid; grid-template-columns:74px minmax(96px, max-content) 1fr;
    align-items:baseline; column-gap:12px; padding:9px 8px;
    border-bottom:1px solid var(--line); font-size:14px}
  .nrow:last-child{border-bottom:0}
  .nrow>*:nth-child(1){color:var(--ink2); font-weight:650}
  .nrow>*:nth-child(2){text-align:right; color:var(--ink); font-style:normal}
  .nrow>*:nth-child(3){text-align:right; font-style:normal; font-size:12.5px; color:var(--ink3);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .nrow.on{background:#fdf2f5; border-radius:8px}
  .nrow.on>*:nth-child(2) b{color:var(--wine)}
  @media(max-width:640px){
    .nrow{grid-template-columns:74px 1fr}
    .nrow>*:nth-child(3){grid-column:1 / -1; text-align:left; white-space:normal}
  }
  .band{background:var(--navy); color:#fff; border-radius:20px; padding:44px 40px; text-align:center}
  .band h2{color:#fff; max-width:760px; margin:0 auto 12px; font-size:25px}
  .band h2 em{font-style:normal; color:#f0b8c9}
  .band p{color:#9fb0c6; max-width:560px; margin:0 auto 22px; font-size:15.5px}
  .band .btn{background:#fff; color:var(--navy)}
  .band small{display:block; margin-top:12px; color:#6f83a0; font-size:12.5px}
  @media(max-width:680px){.band{padding:34px 20px} .band h2{font-size:21px}}

  .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; align-items:stretch}
  .box{border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; background:#fff}
  .box h3{margin:0 0 6px; font-size:16px}
  .box p{margin:0; font-size:13.5px; color:var(--ink2)}

  footer{border-top:1px solid var(--line); margin-top:60px; padding:32px 0 56px; color:var(--ink3); font-size:12.5px}
  footer .wrap>div{max-width:860px}
  footer b{color:var(--ink2); font-weight:620}
  footer ul{margin:10px 0 0; padding-left:18px}
  footer li{margin:4px 0; line-height:1.6}
  footer .fl{margin-top:16px; display:flex; gap:16px; flex-wrap:wrap}
  footer .fl a{color:var(--ink3); text-decoration:none}
  footer .fl a:hover{color:var(--ink2)}
  footer .cr{margin-top:14px}

  /* ── 언어 토글 (KO/EN) ─────────────────────────────────────────
     같은 내용을 두 벌 출력하고 <html data-lang> 으로 한 쪽만 보인다.
     ★클래스는 원래 있던 요소에 직접 붙인다 — 새 래퍼로 감싸면 자식 선택자가 깨진다. */
  html[data-lang="ko"] .i18n-en{display:none !important}
  html[data-lang="en"] .i18n-ko{display:none !important}
  .langsw{flex:none; display:flex; gap:2px; margin-left:14px; padding:2px;
    border:1px solid var(--line); border-radius:980px; background:var(--bg2)}
  .langsw button{border:0; background:transparent; cursor:pointer; font:inherit; font-size:11.5px;
    font-weight:620; letter-spacing:.02em; color:var(--ink3); padding:3px 9px; border-radius:980px; line-height:1.5}
  .langsw button:hover{color:var(--ink2)}
  html[data-lang="ko"] .langsw button[data-l="ko"],
  html[data-lang="en"] .langsw button[data-l="en"]{background:#fff; color:var(--navy);
    box-shadow:0 1px 2px rgba(10,22,40,.10)}
  @media(max-width:820px){ .langsw{margin-left:10px} }

  /* ── 개수를 아는 카드 세트 — 고아 카드 방지 ────────────────────
     auto-fit + minmax 는 "몇 장인지" 를 모른다. 1120px wrap(내부 1072px)에서 260px 트랙이
     정확히 3개 들어가므로 4장짜리 세트가 3+1 로 끊겨 마지막 한 장이 홀로 남았다.
     그래서 세트 카드 수를 세어 c2·c3·c4 를 붙이고(빌드 시 add_count_class), 열 수를 못 박는다.
     ★규칙: 마지막 줄은 꽉 차거나, 아니면 1열로 접는다 — 중간 단계(3→2, 4→3)는 두지 않는다.
       · c4 → 2×2 (4×1 은 이 카피에 너무 좁다) → 1열
       · c3 → 3×1 → 1열 (3→2 는 고아가 생긴다)
       · c2 → 2×1 → 1열
     ★이 블록은 CSS 맨 끝에 둔다 — 미디어쿼리도 (0,2,0) 으로 같은 특정도라 순서가 승부를 가른다.
     ※ 접는 지점은 원 디자인의 최소 트랙(카드 260px / KPI 200px)을 밑돌기 직전으로 잡았다. */
  .cols.c2,.cols.c4,.upc.c2,.upc.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols.c3,.upc.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpis.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpis.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media(max-width:900px){ .kpis.c4{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media(max-width:880px){ .cols.c3,.upc.c3,.kpis.c3{grid-template-columns:minmax(0,1fr)} }
  @media(max-width:600px){ .cols.c2,.cols.c4,.upc.c2,.upc.c4{grid-template-columns:minmax(0,1fr)} }
  @media(max-width:460px){ .kpis.c2,.kpis.c4{grid-template-columns:minmax(0,1fr)} }