/* compare.css — 상품 비교 공유 페이지 (손님용 뷰 + 직원 도구 미리보기 공용)
   매거진형 에디토리얼 톤. 견적서 상세일정표(gyeonjeok/)와 같은 계열. */

.cmp-root {
  --ink:#0A0A0A; --paper:#FAF9F6; --surface:#F2F1EC; --text2:#525252; --text3:#A3A3A3;
  --line-1:#E3E1DA; --line-2:#CFCCC3;
  --red:#DC2626; --c0:#B45309; --c1:#1D4ED8; --c2:#15803D;
  --display:"Archivo Black","Pretendard Variable",Pretendard,Impact,sans-serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,monospace;
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
.cmp-root *, .cmp-root *::before, .cmp-root *::after { box-sizing:border-box; }
.cmp-root img { max-width:100%; display:block; }
.cmp-root a { color:inherit; }
.cmp-wrap { max-width:560px; margin:0 auto; padding:0 22px 34px; }

/* ── 색상 슬롯 (상품 순서대로 0,1,2) ── */
.cmp-root .s0 { color:var(--c0); }
.cmp-root .s1 { color:var(--c1); }
.cmp-root .s2 { color:var(--c2); }

/* ── 헤더 ── */
.cmp-head { padding:34px 22px 30px; margin:0 -22px 30px; border-bottom:2px solid var(--ink); }
.cmp-masthead { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding-bottom:18px; border-bottom:1px solid var(--line-1); margin-bottom:26px; }
.cmp-masthead .brand { font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.5; }
.cmp-masthead .issue { font-family:var(--mono); font-size:10.5px; color:var(--text2);
  letter-spacing:.04em; white-space:nowrap; }
.cmp-eyebrow { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text3); margin-bottom:12px; }
.cmp-head h1 { font-size:clamp(24px,7vw,32px); font-weight:800; line-height:1.3;
  letter-spacing:-.02em; margin:0 0 16px; }
.cmp-head h1 .thin { font-weight:500; color:var(--red); }
.cmp-deck { font-size:15px; color:var(--text2); line-height:1.7; margin:0; }
.cmp-byline { font-family:var(--mono); font-size:10.5px; color:var(--text3); letter-spacing:.03em;
  padding-top:18px; margin-top:20px; border-top:1px solid var(--line-1); line-height:1.7; }

/* ── 섹션 ── */
.cmp-root section { padding:30px 0 26px; border-bottom:1px solid var(--line-1); }
.cmp-root section:last-of-type { border-bottom:0; }
.cmp-rubric { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding-bottom:6px; border-bottom:3px solid var(--ink); display:inline-block; margin:0 0 8px; }
.cmp-rubric.red { border-bottom-color:var(--red); }
.cmp-root h2.stitle { font-size:20px; font-weight:800; letter-spacing:-.02em;
  margin:10px 0 6px; line-height:1.35; }
.cmp-root h3.ptitle { font-size:14px; font-weight:800; margin:22px 0 10px; }
.cmp-root h3.ptitle:first-of-type { margin-top:4px; }
.cmp-lede { font-size:14.5px; color:var(--text2); margin:0 0 20px; line-height:1.7; }
.cmp-root section p { margin:0 0 14px; }
.cmp-root .last { margin-bottom:0; }

/* ── 비교 그리드 ── */
.cmp-grid { border-top:2px solid var(--ink); }
.cmp-row { display:grid; gap:0; border-bottom:1px solid var(--line-1); }
.cmp-row.n2 { grid-template-columns:1fr 1fr; }
.cmp-row.n3 { grid-template-columns:1fr 1fr 1fr; }
.cmp-rowlabel { grid-column:1 / -1; font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text3); padding:12px 0 4px; }
.cmp-cell { padding:0 12px 14px 0; font-size:14.5px; line-height:1.6; word-break:keep-all; }
.cmp-cell + .cmp-cell { padding-left:12px; padding-right:0; border-left:1px solid var(--line-1); }
.cmp-cell strong { font-weight:700; }
.cmp-cell .sub { display:block; font-size:12.5px; color:var(--text2); margin-top:3px; line-height:1.55; }
.cmp-headrow { display:grid; border-bottom:2px solid var(--ink); }
.cmp-headrow.n2 { grid-template-columns:1fr 1fr; }
.cmp-headrow.n3 { grid-template-columns:1fr 1fr 1fr; }
.cmp-headrow > div { padding:12px 12px 12px 0; font-size:13px; font-weight:800;
  line-height:1.4; word-break:keep-all; }
.cmp-headrow > div + div { padding-left:12px; padding-right:0; border-left:1px solid var(--line-1); }
.cmp-tick { font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  display:block; margin-bottom:2px; }

/* ── 상품 카드 ── */
.cmp-card { border:1.5px solid var(--line-2); background:#fff; margin-bottom:22px; }
.cmp-card:last-child { margin-bottom:0; }
.cmp-card figure { margin:0; background:var(--surface); }
.cmp-card figure img { width:100%; height:200px; object-fit:cover; }
.cmp-card .cbody { padding:16px 16px 18px; }
.cmp-card .kicker { font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; }
.cmp-card h3 { font-size:17px; font-weight:800; line-height:1.45; letter-spacing:-.015em; margin:0 0 12px; }
.cmp-card .pname { font-size:12.5px; color:var(--text2); line-height:1.55;
  padding:10px 12px; background:var(--surface); margin:0 0 14px; word-break:keep-all; }
.cmp-card dl { display:grid; grid-template-columns:74px 1fr; gap:7px 12px; margin:0 0 16px; font-size:13.5px; }
.cmp-card dt { font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text3); padding-top:3px; }
.cmp-card dd { margin:0; line-height:1.55; }
.cmp-root .cmp-btn { display:block; text-align:center; font-size:13px; font-weight:700;
  letter-spacing:.02em; padding:12px; border:1.5px solid var(--ink); text-decoration:none;
  background:var(--ink); color:var(--paper); }

/* ── 요금 박스 ── */
.cmp-pbox { border:2px solid var(--ink); padding:16px 16px 18px; margin-bottom:16px; background:#fff; }
.cmp-pbox:last-of-type { margin-bottom:0; }
.cmp-pbox .ph { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--line-1); margin-bottom:12px; }
.cmp-pbox .pname2 { font-size:13px; font-weight:800; line-height:1.4; }
.cmp-pbox .pval { font-family:var(--display); font-size:26px; line-height:1; white-space:nowrap; }
.cmp-pbox .pval .won { font-family:var(--sans); font-size:13px; font-weight:700; margin-left:3px; }
.cmp-calc { font-family:var(--mono); font-size:11.5px; color:var(--text2); margin-bottom:12px; }
.cmp-pbox ul { list-style:none; margin:0; padding:0; }
.cmp-pbox li { font-size:13.5px; color:var(--text2); line-height:1.55; padding:6px 0 6px 17px;
  position:relative; border-top:1px dotted var(--line-1); word-break:keep-all; }
.cmp-pbox li:first-child { border-top:0; }
.cmp-pbox li::before { content:"+"; position:absolute; left:0; top:6px;
  font-weight:800; color:var(--ink); font-size:12px; }
.cmp-pbox.ex li::before { content:"\2212"; color:var(--red); }
.cmp-pernight { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:14px; padding-top:12px; border-top:1.5px solid var(--ink); font-size:13px; }
.cmp-pernight .k { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text3); }
.cmp-pernight .v { font-weight:800; font-size:15px; }

/* ── 표 ── */
.cmp-scroller { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 14px; }
.cmp-root table { border-collapse:collapse; width:100%; font-size:13px; table-layout:fixed; }
.cmp-root th, .cmp-root td { text-align:left; padding:10px 8px 10px 0;
  border-bottom:1px solid var(--line-1); vertical-align:top; line-height:1.55; word-break:keep-all; }
.cmp-root th { font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text3); border-bottom:2px solid var(--ink); font-weight:700; line-height:1.5; }
.cmp-root th:first-child { width:28%; }
.cmp-root td.num { font-family:var(--mono); white-space:nowrap; font-weight:700; font-size:12.5px; }
.cmp-root td .tsub { display:block; font-size:11.5px; color:var(--text2);
  font-family:var(--sans); font-weight:400; white-space:normal; margin-top:2px; }

/* ── 콜아웃 ── */
.cmp-note { border-left:3px solid var(--line-2); padding:2px 0 2px 14px; margin:0 0 16px;
  font-size:13.5px; color:var(--text2); line-height:1.68; }
.cmp-note.warn { border-left-color:var(--red); }
.cmp-note.warn b { color:var(--red); }
.cmp-note b { color:var(--ink); font-weight:700; }

/* ── 일반 리스트 ── */
.cmp-root ul.plain { list-style:none; margin:0 0 14px; padding:0; }
.cmp-root ul.plain li { font-size:13.8px; color:var(--text2); line-height:1.62;
  padding:7px 0 7px 15px; position:relative; border-top:1px dotted var(--line-1); word-break:keep-all; }
.cmp-root ul.plain li:first-child { border-top:0; }
.cmp-root ul.plain li::before { content:""; position:absolute; left:0; top:15px;
  width:5px; height:1.5px; background:var(--line-2); }
.cmp-root ul.plain li b { color:var(--ink); font-weight:700; }

/* ── 일정 ── */
.cmp-day { display:grid; grid-template-columns:46px 1fr; gap:14px; padding:18px 0;
  border-top:1px solid var(--line-1); }
.cmp-day:first-of-type { border-top:2px solid var(--ink); }
.cmp-daynum { font-family:var(--display); font-size:22px; line-height:1; }
.cmp-daydate { font-family:var(--mono); font-size:10px; color:var(--text3); margin-top:5px; }
.cmp-dayroute { font-size:15.5px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
.cmp-dayline { font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:3px; }
.cmp-dayline .tag { font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.04em;
  border:1px solid var(--line-2); padding:1px 5px; margin-right:6px; vertical-align:1px; color:var(--text3); }

/* ── 사진 ── */
.cmp-photos { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px; }
.cmp-photos figure { margin:0; }
.cmp-photos img { width:100%; height:132px; object-fit:cover; }
.cmp-photos figcaption { font-family:var(--mono); font-size:9.5px; color:var(--text3);
  margin-top:5px; line-height:1.5; }

/* ── 푸터 ── */
.cmp-footer { padding:28px 0 32px; background:var(--ink); color:var(--paper); }
.cmp-footer .inner { max-width:560px; margin:0 auto; padding:0 22px; }
.cmp-footer .fbrand { font-size:13px; font-weight:800; margin-bottom:10px; }
.cmp-footer .fline { font-size:13px; color:#D4D4D4; line-height:1.75; }
.cmp-footer .fline b { color:#fff; font-weight:700; }
.cmp-footer .fcta { display:block; text-align:center; margin-top:16px; padding:12px;
  border:1.5px solid var(--paper); text-decoration:none; color:var(--paper);
  font-size:13px; font-weight:700; }
.cmp-footer .fnote { font-family:var(--mono); font-size:9.5px; color:#8A8A8A;
  margin-top:14px; line-height:1.7; word-break:break-all; }

@media (max-width:400px) {
  .cmp-card dl { grid-template-columns:64px 1fr; }
  .cmp-cell { font-size:13.8px; }
}

/* ── 정리 (이렇게 고르시면 됩니다) ── */
.cmp-verdict { border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:20px 0; }
.cmp-vitem { padding:14px 0; border-top:1px dotted var(--line-2); }
.cmp-vitem:first-child { border-top:0; padding-top:0; }
.cmp-vitem:last-child { padding-bottom:0; }
.cmp-vq { font-size:14.5px; font-weight:800; margin-bottom:6px; line-height:1.5; word-break:keep-all; }
.cmp-va { font-size:14px; color:var(--text2); line-height:1.68; word-break:keep-all; }
.cmp-va b { color:var(--ink); font-weight:700; }
.cmp-va .pick { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em;
  border:1.5px solid currentColor; padding:1px 6px; margin-right:7px; vertical-align:2px; white-space:nowrap; }

/* ── 현지 지출 금액 목록 ── */
.cmp-fee { display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:baseline;
  padding:8px 0; border-top:1px dotted var(--line-1); font-size:13.5px; }
.cmp-fee:first-of-type { border-top:1.5px solid var(--ink); margin-top:12px; }
.cmp-fee .what { color:var(--text2); line-height:1.55; word-break:keep-all; }
.cmp-fee .amt { font-family:var(--mono); font-weight:700; white-space:nowrap; text-align:right; }
.cmp-fee .amt .krw { display:block; font-family:var(--sans); font-size:11.5px;
  font-weight:400; color:var(--text3); margin-top:2px; }
.cmp-feehead { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text3); margin-top:16px; }