/* 유상옵션 설명(.opt-desc)의 라벨 위계 — opt-desc-tier.js가 감싼 줄에만 걸린다.
   기존은 테두리 칩, 특화는 파랑 채움 칩. 보조 줄(주의·참고·선행조건 …)은 평문에
   형광펜 강조만 남긴다. 시안 비교 과정은 desc-lead-lab/README.md. */
.opt-desc[data-dl="1"]{--dl-accent:#1c47c4;}
.opt-desc[data-dl="1"] .dl-line{display:block;}
.opt-desc[data-dl="1"] .dl-body{display:inline;}

/* 기존 · 특화 */
.opt-desc[data-dl="1"] .dl-lead-group{display:block; margin-top:6px;}
.opt-desc[data-dl="1"] .dl-lead{display:flex; align-items:baseline; gap:8px;
  font-size:1.06em; line-height:1.6;}
.opt-desc[data-dl="1"] .dl-lead + .dl-lead{margin-top:7px;}
.opt-desc[data-dl="1"] .dl-lead .dl-sep{display:none;}

.opt-desc[data-dl="1"] .dl-lead .dl-label{flex:0 0 auto; display:inline-block;
  padding:2px 10px; border-radius:999px; font-size:13px; font-weight:700;
  line-height:1.5; white-space:nowrap; letter-spacing:-.01em;}
.opt-desc[data-dl="1"] .dl-lead-old .dl-label{color:#7a8391; background:#fff;
  border:1px solid #d7dbe3;}
.opt-desc[data-dl="1"] .dl-lead-new .dl-label{color:#fff; background:var(--dl-accent);
  border:1px solid var(--dl-accent);}

/* 기존·특화 본문은 같은 색·같은 크기로 읽는다 — 둘의 구분은 칩이 맡는다.
   기존 쪽을 흐리게 두면 "안 고르면 뭐가 되는지"가 안 읽힌다 (2026-08-22). */
.opt-desc[data-dl="1"] .dl-lead .dl-body{flex:1 1 auto; min-width:0; color:#2c313a;}
.opt-desc[data-dl="1"] .dl-lead .dl-body b{color:#12161d;}

/* 보조 줄 — 칩 없이, 기존·특화와 한 줄 띄운다 */
.opt-desc[data-dl="1"] .dl-aux{margin-top:4px;}
.opt-desc[data-dl="1"] .dl-aux-start{margin-top:11px;}

/* 보조 줄 안의 강조 문구는 페이지 공통 형광펜(.kp)과 같은 모양으로.
   이미 .kp가 붙은 조각은 그라디언트가 겹치지 않게 뺀다. */
.opt-desc[data-dl="1"] .dl-aux .dl-body b:not(.kp){font-weight:700; color:#2c313a;
  background:linear-gradient(transparent 66%, rgba(43,87,212,.3) 66%);
  padding:0 1px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}

/* 기존·특화 줄 끝 괄호에 들어 있던 선택지 목록 — 불렛으로 세운다.
   `(LG전자 … 1,150,000원 / 삼성전자 … 850,000원)`처럼 한 줄로 흘러가면
   제조사별 금액을 비교하기 어렵다. 붙는 조건은 opt-desc-tier.js 참고. */
.opt-desc[data-dl="1"] .dl-vars{display:block; margin:5px 0 1px;}
.opt-desc[data-dl="1"] .dl-var{display:flex; align-items:baseline; gap:6px;
  position:relative; padding-left:13px; line-height:1.55;}
.opt-desc[data-dl="1"] .dl-var + .dl-var{margin-top:3px;}
.opt-desc[data-dl="1"] .dl-var::before{content:""; position:absolute; left:3px;
  top:.62em; width:4px; height:4px; border-radius:50%; background:#aeb6c2;}
.opt-desc[data-dl="1"] .dl-var-name{flex:1 1 auto; min-width:0;}
.opt-desc[data-dl="1"] .dl-var-price{flex:0 0 auto; font-weight:700; color:#12161d;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;}

/* 목록 뒤에 이어지던 설명 문장은 불렛 아래 줄로 내린다.
   (`… 8,600,000원이며, 실내기 1대당 무선리모컨 1개가 제공되고 …`) */
.opt-desc[data-dl="1"] .dl-vars-note{display:block; margin-top:4px;}
/* 「… 등」으로 줄여 적은 목록이라는 표시 */
.opt-desc[data-dl="1"] .dl-var-etc{color:#828b99;}
.opt-desc[data-dl="1"] .dl-var-etc::before{display:none;}

/* 드랍다운으로 고르는 선택지(금액은 드랍다운에 있다) — 「택1」 안내 + 불렛.
   같은 행 <select>와 1:1로 맞을 때만 붙는다. opt-desc-tier.js의 pickVars 참고. */
.opt-desc[data-dl="1"] .dl-pick{display:block;}
/* 안내 줄은 「모두 포함」과 같은 모양으로 — 앞머리 표식만 다르다.
   ✓(모두 포함) 자리에 「택1」을 같은 강조색 글자로 둔다. 알약(테두리+배경)으로
   두었더니 바로 왼쪽 `특화` 칩과 두 겹으로 겹쳐 보여 걷어냈다.
   글자색만으로는 안내 줄에 묻혀 페이지 공통 형광펜(.kp)을 그어 둔다 (2026-08-30). */
.opt-desc[data-dl="1"] .dl-pick-note{display:block; margin:6px 0 1px;
  font-size:.92em; color:#6b7481;}
.opt-desc[data-dl="1"] .dl-pick-note b{margin-right:6px; padding:0 2px;
  font-weight:700; color:var(--dl-accent); letter-spacing:-.01em;
  background:linear-gradient(transparent 66%,rgba(43,87,212,.3) 66%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;}
.opt-desc[data-dl="1"] .dl-pick-list{margin-top:5px;}

/* `+`로 이어 붙인 사양 나열 — 공간별 소제목 + 불렛 (2026-08-30).
   품목이 셋을 넘으면 한 줄로는 어디까지가 한 품목인지 안 읽힌다.
   붙는 조건은 opt-desc-tier.js의 itemize 참고. */
.opt-desc[data-dl="1"] .dl-incl{display:block; margin:5px 0 1px;}
.opt-desc[data-dl="1"] .dl-incl-note{display:block; margin-bottom:6px;
  font-size:.92em; color:#6b7481;}
.opt-desc[data-dl="1"] .dl-incl-note::before{content:"\2713"; margin-right:4px;
  font-weight:700; color:var(--dl-accent);}
.opt-desc[data-dl="1"] .dl-incl-grp + .dl-incl-grp{display:block; margin-top:9px;}
.opt-desc[data-dl="1"] .dl-incl-title{display:block; margin-bottom:3px;
  font-weight:700; color:#12161d;}
.opt-desc[data-dl="1"] .dl-items{display:block;}
.opt-desc[data-dl="1"] .dl-item{display:block; position:relative;
  padding-left:13px; line-height:1.55;}
.opt-desc[data-dl="1"] .dl-item + .dl-item{margin-top:3px;}
.opt-desc[data-dl="1"] .dl-item::before{content:""; position:absolute; left:3px;
  top:.62em; width:4px; height:4px; border-radius:50%; background:#aeb6c2;}

/* 품목 안 괄호에 다시 들어 있던 나열은 한 단 들여 짧은 줄표로 */
.opt-desc[data-dl="1"] .dl-subitems{display:block; margin:2px 0 4px;}
.opt-desc[data-dl="1"] .dl-subitem{display:block; position:relative;
  padding-left:12px; color:#5b6472;}
.opt-desc[data-dl="1"] .dl-subitem::before{content:""; position:absolute; left:2px;
  top:.78em; width:5px; height:1px; background:#c3c9d3;}

/* 목록 뒤에 딸린 문장(미적용 범위·주의 문구)은 불렛 아래 줄로 */
.opt-desc[data-dl="1"] .dl-items-note{display:block; margin-top:5px;}

/* 드랍다운과 같은 행의 요약줄이 실제 선택지를 나열하면 같은 불렛 규격으로
   세운다. 납부 비율·실별 제약은 옵션명과 1:1 대응하지 않아 변환되지 않는다. */
.opt-note[data-dl-choices="1"] .dl-choice-head,
.opt-note[data-dl-choices="1"] .dl-choice-tail{display:block;}
.opt-note[data-dl-choices="1"] .dl-choice-list{display:block; margin:4px 0 2px;}
.opt-note[data-dl-choices="1"] .dl-var{display:block; position:relative;
  padding-left:13px; line-height:1.55;}
.opt-note[data-dl-choices="1"] .dl-var + .dl-var{margin-top:3px;}
.opt-note[data-dl-choices="1"] .dl-var::before{content:""; position:absolute; left:3px;
  top:.62em; width:4px; height:4px; border-radius:50%; background:#aeb6c2;}
.opt-note[data-dl-choices="1"] .dl-choice-tail{margin-top:3px;}

/* 좁은 화면에서는 금액을 오른쪽 끝으로 밀지 않는다 — 모델명이 두 줄로 접히면
   첫 줄 오른쪽의 금액과 아래 줄 모델명이 서로 엇갈려 읽힌다. */
@media (max-width:560px){
  .opt-desc[data-dl="1"] .dl-var{display:block; padding-left:12px;}
  .opt-desc[data-dl="1"] .dl-var-price{display:inline; margin-left:5px;}
}

/* ── 옵션 행이 카드 밖으로 삐져나오는 것 막기 ─────────────────────────────
   계산기 공통 CSS에 두 규칙이 함께 있다.
     .row:has(select){flex-wrap:wrap}                  ← 라벨과 셀렉트를 줄바꿈
     .row:has(> .opt-price){flex-direction:column}     ← 금액을 아래 줄로
   둘이 겹치면 **세로 방향 + 줄바꿈** 플렉스가 된다. 이때 플렉스 줄의 가로 폭은
   컨테이너가 아니라 **가장 넓은 자식의 max-content**로 잡히고, align-items:stretch가
   그 폭으로 형제를 모두 늘린다. 그래서 셀렉트의 옵션 글이 길면(침실1 붙박이장처럼)
   설명 칸까지 함께 늘어나 카드를 뚫고 나간다. 세로 행에서는 줄바꿈이 할 일이
   없으므로 꺼 둔다 (2026-08-22).
   opt-desc-tier.css는 계산기 <head>의 마지막 스타일이라 여기서 덮을 수 있다. */
.row:has(> .opt-price){flex-wrap:nowrap;}
.row:has(> .opt-price) > *{max-width:100%;}

/* 같은 이유로, 셀렉트의 **가장 긴 옵션 글**이 행의 최소 너비가 되는 것도 막는다.
   `<select>`의 min-content는 옵션 중 가장 긴 줄이라, 「파우더룸 확장 + 드레스룸 +
   알파룸 통합형 …」 같은 옵션 하나가 설명 칸까지 밀어내 카드 밖으로 내보낸다.
   행·라벨 칸이 줄어들 수 있게 열어 두고(min-width:0) 셀렉트를 그 안에 가둔다.
   짧은 셀렉트의 폭은 그대로 두고 넘치는 것만 잘린다. */
.row > div{min-width:0;}
.row label > span{min-width:0;}
.row .inline-sel{min-width:0; max-width:100%;}
.row .inline-sel select{min-width:0; max-width:100%;}

/* ── 고르는 자리의 택1 표시 (2026-08-30) ────────────────────────────────
   선택 드랍다운이 붙은 유상옵션 행마다 한 번 선다 — 이름·요약줄에 이미 적힌
   `택N` 글자를 감싸거나(`.dl-pick-mark`), 아무 데도 없으면 이름 뒤에 붙인다
   (`.dl-pick-badge`). 붙는 조건은 opt-desc-tier.js의 markPickRow 참고.
   모양은 설명 줄의 「택1」(.dl-pick-note b)과 같은 형광펜이다 —
   `--dl-accent`는 .opt-desc 안에서만 살아 있어 색을 그대로 적는다. */
.dl-pick-mark{font-weight:700; color:#1c47c4; padding:0 2px;
  background:linear-gradient(transparent 66%,rgba(43,87,212,.3) 66%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;}
/* 이름 뒤에 새로 붙는 표는 제목보다 한 급 작게 — 이름을 밀어내지 않는다.
   요약줄이 줄바꿈 없이 이름 뒤에 바로 이어지는 계산기가 있어(`… 택1전 주택형 …`)
   오른쪽에도 사이를 둔다. */
.opt-name + .dl-pick-badge{margin:0 8px 0 6px; font-size:13px; vertical-align:1px;
  white-space:nowrap;}

/* ── 드랍다운 위에 세우는 선택지 불렛 (2026-08-30) ──────────────────────
   설명 줄에도 요약줄에도 목록이 없는 행은 「택1」만 붙어 있어 **무엇 중에서
   고르는지**를 드랍다운을 열어야 알 수 있었다. 그런 행에만 드랍다운 바로 위에
   선택지를 그대로 세운다 (opt-desc-tier.js의 buildPickList).
   `.opt-desc` 밖이라 위의 `.opt-desc[data-dl="1"] …` 규칙이 안 걸린다 —
   같은 모양을 여기서 한 번 더 적는다. */
.dl-pick-auto{display:block; margin:7px 0 8px; font-size:14.5px; color:#2c313a;
  line-height:1.55;}
.dl-pick-auto .dl-pick-note{display:block; margin:0 0 1px; font-size:.92em;
  color:#6b7481;}
.dl-pick-auto .dl-pick-note .dl-pick-mark{margin-right:6px;}
.dl-pick-auto .dl-vars{display:block; margin:5px 0 1px;}
.dl-pick-auto .dl-var{display:flex; align-items:baseline; gap:6px; position:relative;
  padding-left:13px;}
.dl-pick-auto .dl-var + .dl-var{margin-top:3px;}
.dl-pick-auto .dl-var::before{content:""; position:absolute; left:3px; top:.62em;
  width:4px; height:4px; border-radius:50%; background:#aeb6c2;}
.dl-pick-auto .dl-var-name{flex:1 1 auto; min-width:0;}
.dl-pick-auto .dl-var-price{flex:0 0 auto; font-weight:700; color:#12161d;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;}

/* 요약줄을 불렛으로 바꾼 자리에도 같은 안내를 세운다 */
.opt-note[data-dl-choices="1"] .dl-pick-note{display:block; margin:0 0 1px;
  font-size:.92em;}
.opt-note[data-dl-choices="1"] .dl-pick-note .dl-pick-mark{margin-right:6px;}

/* 좁은 화면에서는 금액을 오른쪽 끝으로 밀지 않는다 — 모델명이 접히면 엇갈린다 */
@media (max-width:560px){
  .dl-pick-auto .dl-var{display:block; padding-left:12px;}
  .dl-pick-auto .dl-var-price{display:inline; margin-left:5px;}
}