:root{
    --bg:#f5f7fb; --panel:#ffffff; --panel-2:#fbfcfe;
    --ink:#10151d; --ink-2:#4a5361; --ink-3:#7b8593;
    --line:#e2e8f1; --line-2:#eef2f8;
    --brand:#2e7df6; --brand-ink:#1b5ed4; --brand-soft:#e8f1fe;
    --brand-line:#bcd6fb; --surface-head:#dde9fd;
    --price:#d9530a; --price-soft:#fff4ec;
    --ok:#0b8f52; --ok-soft:#e4f5ec;
    --warn:#a86400; --warn-soft:#fcf1dc;
    --shadow:0 1px 2px rgba(16,24,35,.06), 0 6px 18px -10px rgba(16,24,35,.22);
    --shadow-lg:0 2px 6px rgba(16,24,35,.08), 0 28px 56px -24px rgba(16,24,35,.34);
    --kr:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
    --r:10px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#0b1018; --panel:#121821; --panel-2:#161e28;
      --ink:#e9eef6; --ink-2:#a5b1c1; --ink-3:#7a8695;
      --line:#232d3a; --line-2:#1a222c;
      --brand:#6ea8ff; --brand-ink:#a3c4ff; --brand-soft:#12203a;
    --brand-line:#2b436e; --surface-head:#16294a;
      --price:#ff8259; --price-soft:#2d1a14;
      --ok:#42c98a; --ok-soft:#0f2820;
      --warn:#e5b45c; --warn-soft:#2c2312;
      --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -10px rgba(0,0,0,.7);
      --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 28px 56px -24px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0b1018; --panel:#121821; --panel-2:#161e28;
    --ink:#e9eef6; --ink-2:#a5b1c1; --ink-3:#7a8695;
    --line:#232d3a; --line-2:#1a222c;
    --brand:#6ea8ff; --brand-ink:#a3c4ff; --brand-soft:#12203a;
    --brand-line:#2b436e; --surface-head:#16294a;
    --price:#ff8259; --price-soft:#2d1a14;
    --ok:#42c98a; --ok-soft:#0f2820;
    --warn:#e5b45c; --warn-soft:#2c2312;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -10px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 28px 56px -24px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--kr); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased}
  a{color:inherit; text-decoration:none}
  button,input,select,textarea{font:inherit; color:inherit}
  :focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}
  .num{font-variant-numeric:tabular-nums}
  [hidden]{display:none !important}

  /* ============ 공통 컨트롤 ============ */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid transparent; border-radius:var(--r); padding:9px 15px; font-weight:700; font-size:13.5px; cursor:pointer; transition:.14s; white-space:nowrap}
  .btn-pri{background:var(--brand); color:#fff}
  .btn-pri:hover{background:var(--brand-ink)}
  .btn-out{background:var(--panel); border-color:var(--line); color:var(--ink)}
  .btn-out:hover{border-color:var(--brand); color:var(--brand)}
  .btn-quiet{background:transparent; color:var(--ink-2)}
  .btn-quiet:hover{background:var(--brand-soft); color:var(--brand)}
  .btn-sm{padding:6px 11px; font-size:12.5px; border-radius:8px}
  .btn:disabled{opacity:.45; cursor:not-allowed}
  .inp,.sel{width:100%; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:14px; transition:.14s}
  .inp:hover,.sel:hover{border-color:var(--ink-3)}
  .inp:focus,.sel:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-soft)}
  .sel{appearance:none; cursor:pointer; padding-right:30px;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
  .pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:999px}
  .pill.ok{background:var(--ok-soft); color:var(--ok)}
  .pill.low{background:var(--warn-soft); color:var(--warn)}
  .pill.none{background:var(--line-2); color:var(--ink-3)}
  .pill.new{background:var(--brand-soft); color:var(--brand)}
  .pill.up{background:var(--price-soft); color:var(--price)}

  /* ============ 헤더 ============ */
  .top{position:sticky; top:0; z-index:60; background:var(--panel); border-bottom:1px solid var(--line)}
  .top-in{display:flex; align-items:center; gap:14px; height:58px; padding:0 20px; max-width:1560px; margin:0 auto}
  .logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:16.5px; letter-spacing:-.045em; white-space:nowrap}
  /* 로고 마크 = 사이트 아이콘. SVG 라 색과 크기를 자유롭게 바꾼다 */
  .logo .mk{width:27px; height:27px; flex:none; border:0; padding:0; background:none;
    appearance:none; cursor:pointer; color:var(--brand); display:block; line-height:0;
    border-radius:7px; -webkit-user-select:none; user-select:none}
  .logo .mk svg{width:100%; height:100%; display:block}
  .logo .mk:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

  /* 관리자 진입 — 로고 마크를 누르면 열린다 */
  .veil{position:fixed; inset:0; z-index:150; background:rgba(16,24,35,.5); display:grid; place-items:center; padding:20px}
  .lock{width:100%; max-width:320px; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:22px}
  .lock h3{margin:0 0 4px; font-size:17px; font-weight:800; letter-spacing:-.03em}
  .lock p{margin:0 0 16px; font-size:12.5px; color:var(--ink-3)}
  .lock .inp{text-align:center; font-size:19px; font-weight:800; letter-spacing:.3em; padding:12px}
  .lock .row{display:flex; gap:8px; margin-top:12px}
  .lock .row .btn{flex:1}
  .lock .err{margin:10px 0 0; font-size:12.5px; font-weight:700; color:var(--price)}
  .logo b{color:var(--brand)}
  .gsearch{flex:1; max-width:480px; position:relative}
  .gsearch .inp{padding-left:36px; background:var(--bg)}
  .top-right{margin-left:auto; display:flex; align-items:center; gap:10px}
  .who{font-size:13.5px; font-weight:800; white-space:nowrap}

  /* ============ 조회 레이아웃 ============ */
  .shell{max-width:1560px; margin:0 auto; padding:18px 20px 60px; display:flex; flex-direction:column; gap:14px}

  .main{min-width:0; display:flex; flex-direction:column; gap:12px}
  .fchips{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
  .fchip{display:inline-flex; align-items:center; gap:6px; background:var(--brand-soft); color:var(--brand); border:0; border-radius:999px; padding:5px 9px 5px 11px; font-size:12.5px; font-weight:700; cursor:pointer}
  .fchip::after{content:"✕"; font-size:10px; opacity:.7}
  .fchip:hover{background:var(--brand); color:#fff}

  .tblwrap{background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
  .c-fac{font-size:15.5px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; color:var(--ink-2)}
  /* 할인가 = 공장도가 × (1 − DC율). 이 화면에서 제일 중요한 숫자다 */
  .c-sale{font-size:18px; font-weight:800; letter-spacing:-.035em; color:var(--price); white-space:nowrap}
  .dcinp{width:66px; text-align:right; padding:6px 22px 6px 8px; border:1px solid var(--line); border-radius:7px; background:var(--panel); font-weight:800; font-size:14px; font-variant-numeric:tabular-nums}
  .dcinp::-webkit-outer-spin-button,.dcinp::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
  .dcinp{-moz-appearance:textfield}
  .dcinp:hover{border-color:var(--ink-3)}
  .dcinp:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-soft)}
  .dcinp.set{border-color:var(--brand); background:var(--brand-soft); color:var(--brand)}
  .dccell{position:relative; display:inline-block}
  .dccell .pc{position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:800; color:var(--ink-3); pointer-events:none}
  .empty{padding:64px 20px; text-align:center; color:var(--ink-3)}
  .empty b{display:block; color:var(--ink); font-size:16px; margin-bottom:6px; font-weight:800}

  .pager{display:flex; align-items:center; justify-content:center; gap:5px; padding:16px}
  .pager button{min-width:33px; height:33px; padding:0 9px; border:1px solid var(--line); background:var(--panel); border-radius:8px; font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer}
  .pager button:hover:not(:disabled){border-color:var(--brand); color:var(--brand)}
  .pager button.on{background:var(--brand); border-color:var(--brand); color:#fff}
  .pager button:disabled{opacity:.35; cursor:not-allowed}

  /* ============ 관리자 ============ */
  .adm{max-width:1200px; margin:0 auto; padding:26px 20px 60px; display:flex; flex-direction:column; gap:18px}
  .admhead{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap}
  .admhead h2{margin:0; font-size:22px; font-weight:800; letter-spacing:-.04em}
  .admhead p{margin:5px 0 0; font-size:13.5px; color:var(--ink-2); max-width:62ch}
  .admhead .sp{margin-left:auto}

  /* 제조사별 업로드 박스 */
  .bgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
  .bcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:15px; display:flex; flex-direction:column; gap:3px; transition:.15s}
  .bcard.over{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft), var(--shadow)}
  .bc-h{display:flex; align-items:center; gap:8px; margin-bottom:2px}
  .bc-h b{font-size:16px; font-weight:800; letter-spacing:-.03em}
  .bc-h .pill{margin-left:auto}
  .bc-file{font-size:12.5px; font-weight:700; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .bc-when{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
  .bdrop{margin-top:11px; border:1.5px dashed var(--line); border-radius:10px; background:var(--panel-2); padding:13px 10px; text-align:center; cursor:pointer; transition:.14s}
  .bdrop:hover,.bcard.over .bdrop{border-color:var(--brand); background:var(--brand-soft)}
  .bdrop b{display:block; font-size:13.5px; font-weight:800; color:var(--brand)}
  .bdrop span{font-size:11.5px; color:var(--ink-3)}
  .bcard.done{border-color:var(--ok)}
  .bcard.done .bdrop{border-color:var(--ok); background:var(--ok-soft)}
  .bcard.done .bdrop b{color:var(--ok)}

  .card{background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
  .card-h{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line-2); flex-wrap:wrap}
  .card-h h3{margin:0; font-size:15.5px; font-weight:800; letter-spacing:-.03em}
  .card-h p{margin:0; font-size:12.5px; color:var(--ink-3)}
  .card-h .sp{margin-left:auto}
  .card-b{padding:16px}

  table.mini{width:100%; border-collapse:collapse; font-size:13px; min-width:720px}
  table.mini th{text-align:left; font-size:11px; font-weight:800; letter-spacing:.05em; color:var(--ink-3); padding:9px 11px; background:var(--panel-2); border-bottom:1px solid var(--line); white-space:nowrap}
  table.mini td{padding:9px 11px; border-bottom:1px solid var(--line-2); white-space:nowrap}
  table.mini th.t-r,table.mini td.t-r{text-align:right}
  table.mini th.t-c,table.mini td.t-c{text-align:center}
  .toast{position:fixed; right:20px; bottom:20px; z-index:200; background:var(--ink); color:var(--bg); padding:12px 17px; border-radius:11px; font-size:13.5px; font-weight:700; box-shadow:var(--shadow-lg); opacity:0; transform:translateY(10px); transition:.22s; pointer-events:none}
  .toast.show{opacity:1; transform:none}


  @media (max-width:1240px){ .bgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
  @media (max-width:980px){
    .gsearch{max-width:none}
    .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:720px){
    .top-in{gap:10px}
    .who{display:none}
  }
  @media (max-width:560px){ .bgrid{grid-template-columns:1fr} }
  @media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ===== 관리자 화면 =====*/
/* 제조사 박스 안의 삭제 버튼 */
  .bc-del{position:absolute; top:8px; right:8px; width:24px; height:24px; border:1px solid var(--line); border-radius:7px;
    background:var(--panel); color:var(--ink-3); font-size:12px; line-height:1; cursor:pointer; transition:.14s}
  .bcard{position:relative}
  .bcard .bc-h{padding-right:30px}   /* 삭제 버튼 자리 비워두기 */

  /* 순서 번호 입력칸 */
  .bc-no{flex:none; width:34px; height:26px; text-align:center; padding:0;
    border:1px solid var(--line); border-radius:7px; background:var(--panel-2);
    font-size:13.5px; font-weight:800; color:var(--ink-2); font-variant-numeric:tabular-nums;
    -moz-appearance:textfield; transition:.14s}
  .bc-no::-webkit-outer-spin-button,
  .bc-no::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
  .bc-no:hover{border-color:var(--brand)}
  .bc-no:focus{border-color:var(--brand); background:var(--brand-soft); color:var(--brand);
    outline:none; box-shadow:0 0 0 3px var(--brand-soft)}
  .bc-del:hover{background:var(--price-soft); border-color:var(--price); color:var(--price); opacity:1}

  /* 맨 끝의 빈 박스 = 제조사 추가 */
  .bcard.bnew{border-style:dashed; background:var(--panel-2); display:flex; align-items:center; justify-content:center;
    min-height:150px; cursor:pointer; color:var(--ink-3); font-weight:800; font-size:14px; gap:6px}
  .bcard.bnew:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-soft)}
  .bcard.bnew span{font-size:20px; font-weight:700; line-height:1}

  /* 파일보관함 / 최근 올린 파일 2열 */
  .twocol{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
  .card.keep{border-color:var(--ok)}
  .card.keep .card-h{background:var(--ok-soft); border-bottom-color:var(--ok)}
  .card.hist .card-h{background:var(--panel-2)}
  .tag{font-size:11px; font-weight:800; letter-spacing:.04em; padding:3px 9px; border-radius:999px;
    background:var(--line-2); color:var(--ink-3)}
  .tag.ok{background:var(--ok); color:#fff}
  .fname{font-weight:700}
  .fnone{color:var(--ink-3); font-weight:600}
  /* 2열 안에서는 표가 좁으므로 최소폭을 줄이고 글자도 조금 작게 */
  .twocol table.mini{min-width:430px; font-size:12.5px}
  .twocol table.mini th,
  .twocol table.mini td{padding:8px 9px}
  .twocol .card-h p{font-size:12px}
  @media (max-width:1080px){ .twocol{grid-template-columns:1fr} }


/* ============================================================
   공개 사이트 전용 — 페이지 제목 · 광고 자리 · 내부 링크 · 푸터
   ============================================================ */
.pagehead{margin:0; display:flex; align-items:flex-start; gap:16px; justify-content:space-between}
.pagehead h1{margin:2px 0 0; font-size:22px; font-weight:800; letter-spacing:-.04em; line-height:1.3}
.pagehead p{margin:6px 0 0; font-size:13.5px; color:var(--ink-2)}


/* 광고 자리 — 오른쪽 위에 가로로 하나만.
   비어 있으면 화면에 아무것도 나타나지 않는다 (광고 코드를 넣으면 그때 보인다) */
.adslot{display:none}
.adslot:not(:empty){display:block; flex:none; max-width:468px; max-height:70px; overflow:hidden; margin-left:auto}
.adslot img,.adslot iframe{max-width:100%; display:block}


a.logo,.logo .txt{text-decoration:none;color:inherit}



/* ============================================================
   휴대폰 화면 — 필터를 접어두고 가격표가 먼저 보이게 한다.
   아래 규칙은 화면 폭이 980px 이하일 때만 적용된다. PC 화면은 그대로다.
   ============================================================ */

/* ============================================================
   제조사 색 딱지 · 계절 딱지  —  후보 D 에서 가져온 것.
   제조사마다 제 색을 줘서 표를 훑을 때 눈으로 바로 갈라지게 한다.
   ============================================================ */
.bb{display:inline-block; font-size:11.5px; font-weight:800; color:#fff; background:var(--brand);
    border-radius:6px; padding:3px 8px; letter-spacing:.2px; white-space:nowrap}
.bb[data-b="한국"]{background:#c2410c}
.bb[data-b="금호"]{background:#1d4ed8}
.bb[data-b="넥센"]{background:#7c3aed}
.bb[data-b="던롭"]{background:#b91c1c}
.bb[data-b="굿이어"]{background:#0369a1}
.bb[data-b="요코하마"]{background:#0f766e}
.bb[data-b="미쉐린"]{background:#1e40af}
.bb[data-b="콘티넨탈"]{background:#a16207}
.bb[data-b="브리지스톤"]{background:#be123c}
.bb[data-b="피렐리"]{background:#4338ca}


/* ============================================================
   가격표 — 카드 한 가지로. PC 에서는 한 줄에 쭉, 화면이 좁아지면
   저절로 접혀서 휴대폰에서도 옆으로 밀지 않고 볼 수 있다.
   ============================================================ */
.tblwrap{background:none; border:0; box-shadow:none; overflow:visible}
.cards{display:flex; flex-direction:column; gap:9px}
.pcard{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
       background:var(--panel); border:1px solid var(--line); border-radius:13px;
       padding:14px 16px; box-shadow:var(--shadow);
       transition:border-color .13s, box-shadow .13s}
.pcard:hover{border-color:var(--brand-line)}
.pcard.on{border-color:var(--price); background:var(--price-soft)}

.pcard .pname{flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:6px}
.pcard .pname .pline{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pcard .pname .mo{font-size:15.5px; font-weight:800; letter-spacing:-.02em}
/* 한글 이름 — 영문 모델과 갈라 보이도록 포인트 색.
   할인가가 이미 주황이라, 겹치지 않게 사이트 중심색(파랑)을 쓴다 */
.pcard .pname .pr{font-size:13.5px; font-weight:700; color:var(--brand)}
.pcard .pname .bot{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
                 font-size:13px; color:var(--ink-2)}
.pcard .pname .bot b{font-size:13.5px; font-weight:800; color:var(--ink); letter-spacing:.01em}
.pcard .pname .bot i{font-style:normal; color:var(--ink-3); font-size:12.5px}

.pcard .nums{display:flex; align-items:center; gap:14px; flex:0 0 auto}
.pcard .col{text-align:right}
.pcard .col .lb{display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px; font-weight:600}
.pcard .col.fac{width:118px}
.pcard .col.fac .c-fac{font-size:16.5px; font-weight:800; color:var(--ink-2)}
.pcard .col.dcc{width:92px; text-align:center}
.pcard .col.sal{width:132px}
.pcard .col.sal .c-sale{font-size:20px; font-weight:800; color:var(--price); letter-spacing:-.02em}

/* 태블릿 — 값 세 칸이 아래로 내려가 한 줄을 차지한다 */
@media (max-width:860px){
  .pcard{gap:11px}
  .pcard .pname{flex:1 1 100%}
  .pcard .nums{flex:1 1 100%; justify-content:space-between; gap:10px;
               padding-top:11px; border-top:1px dashed var(--line)}
  .pcard .col.fac,.pcard .col.sal{width:auto}
  .pcard .col.dcc{width:auto}
}
/* 휴대폰 — 글씨를 한 단계 줄여 한 손에 들어오게 */
@media (max-width:430px){
  .cards{gap:8px}
  .pcard{padding:12px 13px}
  .pcard .pname .mo{font-size:14.5px}
  .pcard .col.fac .c-fac{font-size:15px}
  .pcard .col.sal .c-sale{font-size:18px}
  .pcard .col .lb{font-size:11px}
}

/* ============================================================
   머리 배치 — 로고 / 큰 검색창 / 제조사 한 줄
   ============================================================ */
.shell > .gsearch{position:relative; max-width:none; width:100%}
.shell > .gsearch .inp{height:54px; padding:0 62px 0 18px; font-size:16px;
  border-width:1.5px; background:var(--panel)}
.shell > .gsearch .inp:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft)}
.shell > .gsearch .qbtn{position:absolute; right:7px; left:auto; top:50%; transform:translateY(-50%);
  width:42px; height:42px; display:grid; place-items:center; border:0; padding:0;
  border-radius:10px; background:var(--brand); color:#fff; cursor:pointer;
  box-shadow:0 2px 8px rgba(46,125,246,.28); transition:filter .13s, transform .08s}
.shell > .gsearch .qbtn svg{width:20px; height:20px}
.shell > .gsearch .qbtn:hover{filter:brightness(1.12)}
.shell > .gsearch .qbtn:active{transform:translateY(-50%) scale(.94)}
.shell > .gsearch .qbtn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* 제조사 줄 */
.brandbar{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.bchips{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.bchip{font-size:13.5px; font-weight:700; color:var(--ink-2); background:var(--panel);
  border:1px solid var(--line); border-radius:9px; padding:8px 14px; cursor:pointer;
  transition:all .13s}
.bchip:hover{border-color:var(--brand-line); background:var(--brand-soft); color:var(--brand)}
.bchip.on{background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 2px 8px rgba(46,125,246,.24)}
.bchip:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

@media (max-width:560px){
  .shell > .gsearch .inp{height:48px; font-size:15px; padding-right:56px}
  .shell > .gsearch .qbtn{width:38px; height:38px}
  .bchip{font-size:12.5px; padding:7px 12px}
}

/* 올린 기록 지우기 단추 — 되돌릴 수 없는 일이라 붉은 기를 준다 */
.btn.btn-del{border-color:#e7c3bb; color:#b3492c; background:var(--panel)}
.btn.btn-del:hover{border-color:#c9553a; color:#8f3620; background:#fdf0ec}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.btn-del{border-color:#4a2a22; color:#f0917a}
  :root:not([data-theme="light"]) .btn.btn-del:hover{border-color:#6b3a2c; color:#ffb098; background:#2a1712}
}
:root[data-theme="dark"] .btn.btn-del{border-color:#4a2a22; color:#f0917a}
:root[data-theme="dark"] .btn.btn-del:hover{border-color:#6b3a2c; color:#ffb098; background:#2a1712}

/* 로고 뒤에 붙는 표시 */
.logo .txt i{font-style:normal; font-weight:800; color:var(--brand); letter-spacing:-.02em}