/* 사이트 공통 CSS 가 새어 드는 것 되돌리기 (tools/build-product-details.mjs) */
.uv-detail :where(*) { margin: revert; padding: revert; }
.uv-detail :where(img) { max-width: revert; display: revert; }
.uv-detail :where(.hero) { position: revert; height: revert; min-height: revert; overflow: revert; }
.uv-detail :where(.legal) { display: revert; align-items: revert; list-style: revert; flex-wrap: revert; grid-template-columns: revert; justify-content: revert; gap: revert; width: revert; }
.uv-detail :where(.legal) li { position: revert; display: revert; align-items: revert; }
.uv-detail :where(.legal) li:not(:last-child)::after { content: revert; flex: revert; width: revert; height: revert; background: revert; margin: revert; position: revert; right: revert; display: revert; }
.uv-detail :where(.legal) a { font-size: revert; color: revert; transition: revert; }
.uv-detail :where(.legal) a:hover { color: revert; }
.uv-detail :where(.legal) strong { color: revert; font-weight: revert; }
.uv-detail :where(.sr-only) { position: revert; width: revert; height: revert; margin: revert; padding: revert; overflow: revert; clip: revert; white-space: revert; border: revert; }
/* ---- 여기부터 pdetail 원본 style.css (선택자 앞에 .uv-detail 만 붙임) ---- */
@font-face { font-family: "Pretendard Variable"; font-weight: 100 900; font-display: swap;
  src: url("../fonts/PretendardVariable.subset.woff2?v=d4b60c9b") format("woff2-variations"); }
.uv-detail {
  --strip: #162119;
  --dark: #0D120C;
  --dark-txt: #131A14;      
  --teal: #0A3B4D;
  --light: #E9F4EC;
  --warm: #EFE7D6;
  --green: #0E6B3C;
  --green-2: #1E8A47;
  --mint: #7FE3B4;
  --ink: #111;
  --ink-2: #444;
  --line: rgba(0, 0, 0, .12);
  --line-dark: rgba(166, 242, 207, .28);
  --f: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --gutter: clamp(20px, 5vw, 60px);
  --fs-body: clamp(15px, 2.1vw, 21px);
}
.uv-detail *, .uv-detail *::before, .uv-detail *::after { box-sizing: border-box; }
.uv-detail { margin: 0; background: #DCE2DD; color: var(--ink); font: 500 var(--fs-body)/1.7 var(--f); letter-spacing: -.02em; word-break: keep-all; -webkit-font-smoothing: antialiased; }
.uv-detail img { display: block; width: 100%; height: auto; }
.uv-detail h1, .uv-detail h2, .uv-detail p, .uv-detail ul, .uv-detail ol, .uv-detail dl, .uv-detail dd, .uv-detail table { margin: 0; padding: 0; }
.uv-detail ul, .uv-detail ol { list-style: none; }
.uv-detail .page { max-width: 1000px; margin-inline: auto; background: #fff; box-shadow: 0 0 60px rgba(0, 0, 0, .18); }
.uv-detail .txt { padding: clamp(28px, 5vw, 52px) var(--gutter) clamp(40px, 7vw, 72px); }
.uv-detail .sec--strip .txt { background: var(--strip); color: #fff; }
.uv-detail .sec--dark  .txt { background: var(--dark-txt); color: #fff; }
.uv-detail .sec--teal  .txt { background: var(--teal); color: #fff; }
.uv-detail .sec--light .txt { background: var(--light); }
.uv-detail .sec--warm  .txt { background: var(--warm); }
.uv-detail .sec--white .txt { background: #fff; }
.uv-detail .sec--strip img, .uv-detail .sec--dark img, .uv-detail .sec--teal img { background: var(--dark); }
.uv-detail .tag { display: inline-block; height: 34px; padding: 0 18px; border-radius: 999px; font-size: clamp(12px, 1.5vw, 15px); font-weight: 600; line-height: 34px; letter-spacing: .02em; }
.uv-detail .tag--green, .uv-detail .sec--light .tag, .uv-detail .sec--warm .tag, .uv-detail .sec--white .tag { background: var(--green); color: #fff; }
.uv-detail .tag--mint, .uv-detail .sec--dark .tag, .uv-detail .sec--teal .tag, .uv-detail .sec--strip .tag { background: linear-gradient(180deg, #B8F5D6, #5FD9A6); color: #083A22; }
.uv-detail h1, .uv-detail h2 { margin-top: clamp(14px, 2.4vw, 22px); font-size: clamp(22px, 3.4vw, 34px); font-weight: 800; line-height: 1.3; letter-spacing: -.04em; }
.uv-detail h1 { font-size: clamp(26px, 4vw, 40px); }
.uv-detail .sec--light h2, .uv-detail .sec--warm h2, .uv-detail .sec--white h2 { color: var(--green); }
.uv-detail .sec--dark h2, .uv-detail .sec--teal h2, .uv-detail .sec--strip h2 { color: #fff; }
.uv-detail .sec--strip .txt { padding-top: clamp(24px, 4vw, 40px); }
.uv-detail .sec--strip h2 { margin-top: 0; font-size: clamp(18px, 2.8vw, 28px); color: #DDF5E4; }
.uv-detail .h2--faq { margin-top: clamp(40px, 7vw, 72px); padding-top: clamp(24px, 4vw, 40px); border-top: 1px solid var(--line); }
.uv-detail .txt > p { margin-top: clamp(12px, 2vw, 18px); font-weight: 400; }
.uv-detail .sec--dark .txt > p, .uv-detail .sec--teal .txt > p, .uv-detail .sec--strip .txt > p { color: rgba(255, 255, 255, .85); }
.uv-detail .lead { font-size: clamp(16px, 2.3vw, 23px); line-height: 1.75; }
.uv-detail .lead strong, .uv-detail .txt > p strong { font-weight: 700; color: var(--green); }
.uv-detail .sec--dark strong, .uv-detail .sec--teal strong { color: var(--mint); }
.uv-detail .meta { margin-top: clamp(14px, 2.4vw, 22px) !important; font-size: clamp(12px, 1.6vw, 15px) !important; color: var(--ink-2) !important; }
.uv-detail .sec--dark .meta, .uv-detail .sec--teal .meta { color: rgba(255, 255, 255, .55) !important; }
.uv-detail .facts { margin-top: clamp(18px, 3vw, 28px); border-top: 1px solid var(--line); }
.uv-detail .facts > div { display: grid; grid-template-columns: clamp(96px, 16vw, 150px) 1fr; gap: 8px clamp(12px, 2.4vw, 24px); padding: clamp(10px, 1.8vw, 16px) 0; border-bottom: 1px solid var(--line); }
.uv-detail .facts dt { font-weight: 700; }
.uv-detail .facts dd { font-weight: 400; }
.uv-detail .facts small { display: block; margin-top: 4px; font-size: .78em; line-height: 1.55; color: var(--ink-2); }
.uv-detail .facts--dark, .uv-detail .facts--dark > div { border-color: var(--line-dark); }
.uv-detail .facts--dark dt { color: var(--mint); }
.uv-detail .facts--dark small { color: rgba(255, 255, 255, .55); }
.uv-detail .facts--legal dd { font-size: .92em; }
.uv-detail .list { margin-top: clamp(12px, 2vw, 18px); }
.uv-detail .list li { position: relative; padding: 6px 0 6px 1.5em; font-weight: 400; }
.uv-detail .list li::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); }
.uv-detail .list--dark li::before { background: var(--mint); }
.uv-detail .list--num { counter-reset: n; }
.uv-detail .list--num li { counter-increment: n; padding-left: 2.2em; }
.uv-detail .list--num li::before { content: counter(n); width: auto; height: auto; top: .55em; border-radius: 0; background: none; color: var(--mint); font-weight: 800; font-size: .9em; }
.uv-detail .tbl { width: 100%; margin-top: clamp(18px, 3vw, 28px); border-collapse: collapse; font-size: .95em; }
.uv-detail .tbl th, .uv-detail .tbl td { padding: clamp(10px, 1.8vw, 16px) clamp(8px, 1.6vw, 16px); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.uv-detail .tbl thead th { font-weight: 700; color: var(--green); border-bottom: 2px solid var(--green); }
.uv-detail .tbl tbody th { font-weight: 600; }
.uv-detail .tbl td { font-weight: 400; }
.uv-detail .tbl td strong { color: var(--green); }
.uv-detail .faq { margin-top: clamp(14px, 2.4vw, 22px); }
.uv-detail .faq > div { padding: clamp(12px, 2vw, 18px) 0; border-bottom: 1px solid var(--line); }
.uv-detail .faq dt { position: relative; padding-left: 1.6em; font-weight: 700; }
.uv-detail .faq dt::before { content: "Q."; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.uv-detail .faq dd { margin-top: 6px; padding-left: 1.6em; font-weight: 400; color: var(--ink-2); }
@media (max-width: 600px) {
.uv-detail .facts > div { grid-template-columns: 1fr; gap: 2px; }
.uv-detail .tbl { font-size: .88em; }

}
.uv-detail .sec[style] .txt { background: var(--bg); }
.uv-detail .gutter { height: calc(var(--h) / 1000 * min(100vw, 1000px)); background: #fff; }