/* ILJIN TOOL TECH — product detail pages (first sample: ko/products/bta/dhd/).
   Loaded after css/site.css and uses its tokens and parts (header, buttons, .cards4, .pair, .meta, modal, footer). Class prefix: pd- */

/* ---------- hero ---------- */
.pd-hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; min-height:min(940px,100svh);
  padding:calc(var(--header-h) + var(--inset) * 2 + 20px) 0 48px; }
.pd-hero-media{ position:absolute; inset:0; z-index:-2; background:#0d0f11; }
.pd-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:78% 0%; }   /* the renders put the tool in the top part: on short wide screens crop the bottom, never the tool */
/* very wide, short windows (e.g. 2000 x 600): a full-width image would blow the tool up over the title; instead the picture
   takes the hero's height and sits on the right, its left edge fading into the background */
@media (min-width:761px) and (min-aspect-ratio:2/1){
  .pd-hero-media img:not(.fit-contain){ position:absolute; top:0; right:0; width:auto; height:calc(100% * var(--hz, 1)); aspect-ratio:1.6;   /* --hz: per page zoom for renders whose tool sits high and small (705 · 805) */ -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%); mask-image:linear-gradient(90deg, transparent 0, #000 22%); }
}
.pd-hero::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(11,12,13,.88) 0%, rgba(11,12,13,.5) 34%, rgba(11,12,13,0) 62%),
             linear-gradient(0deg, rgba(11,12,13,.96) 0%, rgba(11,12,13,.4) 30%, rgba(11,12,13,0) 52%); }
.pd-hero-in{ width:100%; display:flex; flex-direction:column; }
.pd-title{ margin-top:auto; }
.pd-title .eyebrow{ margin-bottom:18px; }
.pd-h1{ margin:0; font-weight:400; font-size:clamp(46px,5.4vw,108px); line-height:1.06; letter-spacing:-.035em; text-wrap:balance; }
.pd-h1 .ln{ display:block; }
.pd-h1 .l2{ color:var(--tx-2); font-size:.5em; letter-spacing:-.025em; margin-top:.25em; }
.pd-hero-foot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,400px); gap:48px; align-items:end; margin-top:34px; }
.pd-lead{ margin:0; max-width:clamp(420px,34vw,620px); color:var(--tx-2); font-size:clamp(15.4px,1.07vw,19px); line-height:1.7; text-wrap:pretty; }
.pd-actions{ display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; margin-top:28px; }
.pd-actions .btn{ height:40px; }
.pd-actions .link-mono{ color:var(--tx); }
.pd-facts{ margin:0; padding:4px 20px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(17,19,21,.72);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.pd-facts div{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:12px 0; border-top:1px solid var(--line); }
.pd-facts div:first-child{ border-top:0; }
.pd-facts dt{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--tx-3); flex:none; }
.pd-facts dd{ margin:0; font-size:14px; text-align:right; color:var(--tx); }
@media screen and (prefers-reduced-motion:no-preference){
  .pd-title, .pd-hero-foot{ opacity:0; animation:fadeUp .9s var(--ease) forwards; }
  .pd-hero-foot{ animation-delay:.15s; }
}

/* breadcrumbs */
.crumbs ol{ display:flex; flex-wrap:wrap; gap:6px 10px; margin:0; padding:0; list-style:none; font-size:13px; color:var(--tx-3); }
.crumbs li + li::before{ content:'/'; margin-right:10px; color:#474c52; }
.crumbs a{ transition:color .18s; }
.crumbs a:hover{ color:var(--tx); }
.crumbs [aria-current]{ color:var(--tx-2); }

/* ---------- section heads ---------- */
.pd-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:end; margin-bottom:44px; }
.pd-head > .lead{ justify-self:end; max-width:440px; margin:0; }
.pd-head-link{ justify-self:end; }

/* ---------- 3D ---------- */
#model .lab-app{ --lab-stage-h:min(72vh, 680px); }

/* ---------- spec: dimensions drawing ---------- */
.pd-dims{ margin:0; justify-self:end; width:min(100%,520px); padding:22px 24px 16px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,var(--bg-1),var(--bg)); }
.pd-dims img{ width:100%; height:auto; opacity:.82; }
.pd-dims figcaption{ margin-top:14px; font-size:12.5px; color:var(--tx-3); }

/* ---------- spec: finder ---------- */
.pd-finder{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); overflow:hidden; margin-bottom:14px; }
.pd-find{ padding:30px 30px 32px; border-right:1px solid var(--line); }
.pd-find label, .pd-find-k{ display:block; margin:0; font-size:14px; color:var(--tx-2); }
.pd-find-k{ margin-top:24px; }
.pd-input{ display:flex; align-items:center; gap:10px; height:60px; margin-top:12px; padding:0 8px 0 16px; border:1px solid #62676e; border-radius:6px; background:var(--bg); transition:border-color .18s, box-shadow .18s; }
.pd-input:focus-within{ border-color:var(--tx); box-shadow:0 0 0 1px var(--tx); }
.pd-input > span{ font-size:24px; color:var(--tx-3); }
.pd-input input{ flex:1; min-width:0; height:100%; padding:0; border:0; outline:none; background:none; font-size:26px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.pd-input input::placeholder{ color:#565a60; }
.pd-input .btn{ height:44px; }
.pd-tabs{ display:inline-flex; gap:4px; margin-top:10px; padding:4px; border:1px solid var(--line); border-radius:8px; background:var(--bg); max-width:100%; }
.pd-tabs button{ display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 14px; border-radius:5px; font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; color:var(--tx-2); white-space:nowrap; transition:background-color .18s, color .18s; }
.pd-tabs button::before{ content:''; width:6px; height:6px; background:var(--tx-3); opacity:.5; }
.pd-tabs button:hover{ color:var(--tx); }
.pd-tabs button[aria-selected="true"]{ background:var(--bg-3); color:var(--tx); }
.pd-tabs button[aria-selected="true"]::before{ background:var(--red); opacity:1; }
.pd-out{ padding:30px; display:flex; flex-direction:column; justify-content:center; gap:22px; min-height:236px; }
.pd-out-empty, .pd-out-msg{ margin:0; max-width:460px; font-size:15px; line-height:1.7; color:var(--tx-3); }
.pd-out-empty b{ color:var(--tx-2); font-weight:500; }
.pd-out-msg{ color:var(--tx-2); }
.pd-out-msg + .btn{ align-self:flex-start; height:40px; }
.pd-hit + .pd-hit{ padding-top:22px; border-top:1px solid var(--line); }
.pd-hit-sys{ margin:0; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; color:var(--tx-3); }
.pd-hit-code{ margin:6px 0 0; font-size:clamp(30px,2.5vw,46px); font-weight:400; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.pd-hit-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 20px; margin:18px 0 0; }
.pd-hit-grid dt{ font-size:12px; color:var(--tx-3); }
.pd-hit-grid dd span{ display:block; }
.pd-hit-grid dd span + span{ margin-top:4px; }
.pd-hit-grid dd{ margin:4px 0 0; font-family:var(--f-mono); font-size:13px; letter-spacing:.02em; color:var(--tx); overflow-wrap:anywhere; }
.pd-hit .btn{ margin-top:20px; height:40px; }
.pd-hit-sub{ margin:20px 0 0; padding-top:14px; border-top:1px solid var(--line); font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--tx-3); }
.pd-hit-sub + .pd-hit-grid{ margin-top:12px; }
.pd-hit-grid dd i{ font-style:normal; white-space:nowrap; }

/* ---------- tables ---------- */
.pd-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.pd-table-wrap:focus-visible{ outline-offset:2px; }
.pd-table{ width:100%; min-width:1060px; border-collapse:collapse; font-family:var(--f-mono); font-size:13px; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.pd-table caption{ caption-side:top; padding:18px 18px 14px; text-align:left; font-family:var(--f-sans); font-size:15px; font-weight:500; letter-spacing:0; color:var(--tx); }
.pd-table th, .pd-table td{ padding:13px 14px; text-align:left; vertical-align:middle; white-space:nowrap; border-top:1px solid var(--line); }
.pd-table thead th{ background:var(--bg-2); font-family:var(--f-sans); font-size:12.5px; font-weight:500; letter-spacing:0; color:var(--tx-2); }
.pd-table thead small{ display:block; margin-top:2px; font-family:var(--f-mono); font-size:10.5px; font-weight:400; color:var(--tx-3); }
.pd-table tbody th{ font-weight:500; color:var(--tx); }
.pd-table td{ color:var(--tx-2); }
.pd-table .nr{ text-align:right; }
.pd-table .code{ color:var(--tx); }
.pd-table .code i{ font-style:normal; color:var(--tx-3); }
.pd-table .opt span{ display:block; }
.pd-table .opt span + span{ margin-top:7px; padding-top:7px; border-top:1px dashed var(--line); }
.pd-table .span{ text-align:center; }
.pd-table tbody tr{ transition:background-color .25s; }
.pd-table tbody tr:hover{ background:var(--bg-2); }
/* one <tbody> per catalogue group (a diameter range and its alternative combinations) */
.pd-table tbody.is-hit tr{ background:rgba(214,17,46,.13); }
.pd-table tbody.is-hit tr:first-child th{ box-shadow:inset 3px 0 0 var(--red); }
.pd-table tbody.is-hit :is(td, th){ color:var(--tx); }
.pd-table tbody + tbody tr:first-child :is(td, th){ border-top-color:#3a3f45; }
.pd-table td[rowspan], .pd-table th[rowspan]{ vertical-align:middle; }
.pd-table .c{ text-align:center; }
.pd-table .pd-custom{ color:var(--tx-3); font-family:var(--f-sans); letter-spacing:0; }
.pd-table .pd-star{ color:var(--tx); }
.pd-table .pd-dim{ color:var(--tx-3); }
.pd-table .pd-th-top{ text-align:center; border-bottom:1px solid var(--line); }
.pd-notes{ margin:18px 0 0; padding:0; list-style:none; display:grid; gap:6px; font-size:13.5px; line-height:1.6; color:var(--tx-3); }
.pd-notes li{ display:flex; gap:10px; }
.pd-notes li::before{ content:''; flex:none; width:4px; height:4px; margin-top:.7em; background:var(--tx-3); }
.pd-notes b{ font-family:var(--f-mono); font-weight:400; color:var(--tx-2); }

/* ---------- parts: exploded drawing + legend ---------- */
.pd-exploded{ margin:0; padding:30px 30px 26px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,var(--bg-1),var(--bg)); }
.pd-exploded img{ width:min(100%,560px); height:auto; margin:0 auto; opacity:.85; }
.pd-exploded figcaption{ margin-top:18px; font-size:12.5px; color:var(--tx-3); }
.pd-exploded.pd-drawing{ padding:36px 32px 26px; }
.pd-exploded.pd-drawing img{ width:auto; max-width:100%; opacity:.92; }   /* catalogue dimension drawings (gundrill made-to-order): natural size, never upscaled */
.pd-legend-card{ padding:18px 18px 6px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.pd-legend-t{ margin:0 0 12px; font-size:15px; font-weight:500; }
.pd-legend{ margin:0; padding:0; list-style:none; }
.pd-legend li{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:14px; padding:11px 0; border-top:1px solid var(--line); }
.pd-legend b{ width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--tx-3); border-radius:50%; font-family:var(--f-mono); font-size:12px; font-weight:400; }
.pd-legend span{ font-size:15px; }
.pd-legend small{ margin-left:6px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--tx-3); }
.pd-legend code{ font-family:var(--f-mono); font-size:12.5px; color:var(--tx-2); }

/* ---------- line-up ---------- */
.pd-line{ padding:30px 32px 26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.pd-line-axis{ position:relative; height:22px; margin-left:300px; }
.pd-line-axis span{ position:absolute; left:calc(var(--x) * 100%); transform:translateX(-50%); font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--tx-3); }
.pd-line-axis span:first-child{ transform:none; }
.pd-line-rows{ margin:0; padding:0; list-style:none; }
.pd-line-row, .pd-line-row > a{ display:grid; grid-template-columns:300px minmax(0,1fr); align-items:center; min-height:52px; }
.pd-line-row{ border-top:1px solid var(--line-soft); }
.pd-line-row:has(> a){ display:block; }
.pd-line-row > a{ transition:background-color .2s; border-radius:4px; }
.pd-line-row > a:hover{ background:var(--bg-2); }
.pd-line-row > a:hover .pd-line-name b{ color:var(--tx); }
.pd-line-name{ display:flex; align-items:baseline; gap:12px; padding-right:16px; min-width:0; }
.pd-line-name b{ font-size:16px; font-weight:500; color:var(--tx-2); white-space:nowrap; }
.pd-line-name small{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--tx-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-line-track{ position:relative; height:36px; }
.pd-line-track::before{ content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line-soft); }
.pd-line-track i{ position:absolute; top:50%; height:8px; margin-top:-4px; left:calc(var(--a) * 100%); width:calc((var(--b) - var(--a)) * 100%); border-radius:2px; background:#3a3f45; }
.pd-line-row.is-cur .pd-line-name b{ color:var(--tx); }
.pd-line-row.is-cur .pd-line-name b::after{ content:var(--pd-t-cur,'이 페이지'); margin-left:10px; padding:2px 7px; border-radius:4px; background:var(--red); font-size:11px; font-weight:500; vertical-align:2px; color:var(--tx); }
.pd-line-row.is-cur .pd-line-track i{ height:10px; margin-top:-5px; background:linear-gradient(90deg,var(--red-2),var(--red)); }
.pd-line-more{ margin-top:22px; color:var(--tx); }

/* ---------- call to action ---------- */
.pd-cta-sec{ padding-bottom:0; }
.pd-cta{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:40px; padding:clamp(36px,4.4vw,80px); border:1px solid var(--line); border-radius:14px;
  background:radial-gradient(ellipse 60% 90% at 90% 110%, rgba(214,17,46,.16), rgba(214,17,46,0) 70%), var(--bg-1); }
.pd-cta .lead{ max-width:520px; }
.pd-cta-r{ display:flex; flex-direction:column; align-items:flex-end; gap:18px; }
.pd-cta-r .btn{ height:44px; }
.pd-foot .wrap{ padding-top:8px; }

/* ---------- hero without a photo yet: a labelled empty frame on the right (the owner drops the file in later) ---------- */
.pd-hero-media img.fit-contain{ object-fit:contain; object-position:100% 0; padding:calc(var(--header-h) + 34px) 2% 40% 46%; filter:drop-shadow(0 28px 34px rgba(0,0,0,.55)); }
.pd-hero.no-photo::before{ background:linear-gradient(0deg, rgba(11,12,13,.9) 0%, rgba(11,12,13,0) 40%); }
.pd-hero-media.is-empty{ background:radial-gradient(ellipse 60% 70% at 72% 40%, #1c1f23 0%, #111315 55%, #0b0c0d 100%); }
.pd-hero-media.is-empty::after{ content:attr(data-hint); position:absolute; right:var(--gutter); top:calc(var(--header-h) + var(--inset) * 2 + 20px); width:min(36vw,520px); aspect-ratio:1.6;
  display:grid; place-items:center; padding:24px; text-align:center; border:1px dashed #3a3f45; border-radius:var(--radius);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; line-height:1.7; color:var(--tx-3); white-space:pre-line; }

/* ---------- hero without a photo, glass instead (js/hero-glass.js; only groups with milling.mjs glass, e.g. 엔드밀 커터) ----------
   The stage (.pd-glass) is the box a photo would fill (placement reviewed in 홈페이지/_시안_엔드밀_글래스 ?v=d2, 2026-10-04): the whole photo slot;
   wide short windows (2:1+) the right 1.6 box like the photo; 761–1180 px the top of the right half (4:5) so the ring never sits on the text column;
   1181–1280 px the top 80 %; phones fade the bottom. Edges that are not the window's are faded into the background. The ring is the stage's centre.
   Where the ring would come closer than 12 px to the hero text or 16 px to the facts card, hero-glass.js (placeStage) shrinks this box from its
   anchored corner, or on phones moves it down below the breadcrumb, with inline width / height / transform. */
.pd-hero.has-glass .pd-hero-media{ background:var(--bg); }
.pd-glass{ position:absolute; inset:0; }
@media (min-width:761px) and (min-aspect-ratio:2/1){
  .pd-glass{ left:auto; right:0; width:auto; height:calc(100% * var(--hz, 1)); aspect-ratio:1.6;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%); mask-image:linear-gradient(90deg, transparent 0, #000 22%); }
}
@media (min-width:761px) and (max-width:1180px){
  .pd-glass{ left:auto; right:0; bottom:auto; width:50%; height:auto; aspect-ratio:4/5; max-height:100%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%), linear-gradient(180deg, #000 84%, transparent 100%); -webkit-mask-composite:source-in;
            mask-image:linear-gradient(90deg, transparent 0, #000 10%), linear-gradient(180deg, #000 84%, transparent 100%); mask-composite:intersect; }
}
@media (min-width:1181px) and (max-width:1280px){
  .pd-glass{ left:0; right:0; bottom:auto; width:auto; height:80%; aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(180deg, #000 84%, transparent 100%); mask-image:linear-gradient(180deg, #000 84%, transparent 100%); }
}
@media (max-width:760px){
  .pd-glass{ -webkit-mask-image:linear-gradient(180deg, #000 80%, transparent 92%); mask-image:linear-gradient(180deg, #000 80%, transparent 92%); }
}
/* empty hero space takes the drag (the component turns the ring); text and buttons stay clickable */
.pd-hero.has-glass .pd-hero-in{ pointer-events:none; }
.pd-hero.has-glass .pd-hero-in > *{ pointer-events:auto; }
.pd-hero.has-glass .pd-title{ pointer-events:none; }   /* full-width block: only its lines take clicks */
.pd-hero.has-glass .pd-title > *{ pointer-events:auto; }
/* until hero-glass.js runs, a missing photo must not flash the dashed frame: it only fades in if the glass has not come within 1.5 s
   (no module, no WebGL → .glass-off shows it at once) */
html.js .pd-hero-media[data-glass].is-empty:not(.glass-off){ background:var(--bg); }
html.js .pd-hero-media[data-glass].is-empty:not(.glass-off)::after,
html.js .pd-hero:has(> .pd-hero-media[data-glass].is-empty:not(.glass-off)) .pd-gall-open{ animation:pdGlassWait .4s 1.5s both; }   /* the frame's own gallery button too */
@keyframes pdGlassWait{ from{ opacity:0; } }

/* ---------- spec: tabs without a finder ---------- */
.pd-finder-tabs{ grid-template-columns:1fr; }
.pd-finder-tabs .pd-find{ border-right:0; padding:18px 22px 22px; }
.pd-finder-tabs .pd-find-k{ margin-top:0; }
.pd-hit-combo{ margin:6px 0 0; font-size:13px; color:var(--tx-3); }

/* ---------- content blocks (parts, inserts, cutting data …): two columns, wide items span both ---------- */
.pd-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.pd-grid-1{ grid-template-columns:minmax(0,1fr); }
.pd-grid > .pd-wide{ grid-column:1 / -1; }
.pd-table-s{ min-width:0; }
.pd-steps{ margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.pd-steps li{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:18px; padding:22px 26px; border-top:1px solid var(--line); }
.pd-steps li:first-child{ border-top:0; }
.pd-steps b{ font-family:var(--f-mono); font-size:13px; font-weight:400; letter-spacing:.12em; color:var(--red); padding-top:3px; }
.pd-steps h3{ margin:0; font-size:17px; font-weight:500; letter-spacing:-.01em; }
.pd-steps p{ margin:8px 0 0; max-width:62em; font-size:15px; line-height:1.7; color:var(--tx-2); }
.pd-order{ padding:24px 26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.pd-order-t{ margin:0 0 16px; font-size:15px; font-weight:500; }
.pd-order-code{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-order-code span{ display:flex; flex-direction:column; gap:6px; min-width:96px; padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
.pd-order-code b{ font-family:var(--f-mono); font-size:17px; font-weight:500; letter-spacing:.02em; color:var(--tx); }
.pd-order-code small{ font-size:12.5px; color:var(--tx-3); }
.pd-order-n{ margin:14px 0 0; font-size:13.5px; color:var(--tx-3); }
/* made to order: what to tell us + a button that opens the form with it */
.pd-request{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px 28px; flex-wrap:wrap; padding:24px 26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.pd-request > div{ flex:1 1 520px; min-width:0; }
.pd-request ul{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0 24px; }
.pd-request li{ display:flex; flex-direction:column; gap:3px; padding:11px 0; border-top:1px solid var(--line); }
.pd-request li b{ font-size:15px; font-weight:500; }
.pd-request li span{ font-size:13px; color:var(--tx-3); }
.pd-request .btn{ height:44px; flex:none; }
.pd-mini{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.pd-mini article{ padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.pd-mini h3{ margin:10px 0 0; font-size:17px; font-weight:500; }
.pd-mini p:not(.tag){ margin:8px 0 0; font-size:14.5px; line-height:1.65; color:var(--tx-2); }
.pd-block + .pd-block{ padding-top:0; }

/* ---------- family pages ---------- */
.pd-fhero{ padding:calc(var(--header-h) + var(--inset) * 2 + 20px) 0 24px; }
.pd-fhero .crumbs{ margin-bottom:clamp(56px,8vw,120px); }
.pd-fhero .eyebrow{ margin-bottom:18px; }
.pd-fhero .pd-lead{ margin-top:28px; }
.pd-fam{ padding-top:56px; }
.pd-scards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr)); gap:14px; }
.pd-scard{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-1); transition:border-color .25s; }
.pd-scard:hover{ border-color:#454a50; }
.pd-scard-img{ position:relative; display:block; aspect-ratio:16/10; background:radial-gradient(ellipse 70% 70% at 60% 45%, #24282c 0%, #15181b 52%, #0d0e10 100%); overflow:hidden; }
.pd-scard-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.pd-scard-img img.fit-contain{ object-fit:contain; padding:6%; }
.pd-scard:hover .pd-scard-img img{ transform:scale(1.03); }
.pd-scard-img.is-empty::after{ content:var(--pd-t-nophoto,'사진 준비 중'); position:absolute; inset:14px; display:grid; place-items:center; border:1px dashed #3a3f45; border-radius:6px; font-size:13px; color:var(--tx-3); }
.pd-scard-body{ display:flex; flex-direction:column; flex:1; padding:22px 24px 24px; }
.pd-scard-body .tag{ font-size:11px; }
.pd-scard h3{ margin:10px 0 0; font-size:clamp(21px,1.46vw,26px); font-weight:500; letter-spacing:-.01em; }
.pd-scard p{ margin:10px 0 0; font-size:14.5px; line-height:1.65; color:var(--tx-2); }
.pd-scard-foot{ margin-top:auto; padding-top:20px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.pd-scard-foot b{ font-family:var(--f-mono); font-size:13px; font-weight:500; letter-spacing:.02em; }
.pd-scard-foot .link-mono{ color:var(--tx); }

/* ---------- milling: part-number search, series chips, one section per catalogue table ---------- */
.pd-msearch-sec{ padding:0 0 24px; }
.pd-msearch{ padding:26px 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.pd-msearch label{ display:block; font-size:14px; color:var(--tx-2); }
.pd-msearch .pd-input input{ font-family:var(--f-mono); font-size:22px; letter-spacing:.02em; }
.pd-msearch .pd-input input::-webkit-search-cancel-button{ filter:invert(1); }
.pd-msearch-n{ margin:12px 0 0; font-size:13px; color:var(--tx-3); }
.pd-msearch-r{ margin:10px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:6px; }
.pd-msearch-r a{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--bg); transition:border-color .18s, background-color .18s; }
.pd-msearch-r a:hover{ border-color:#50555b; background:var(--bg-2); }
.pd-msearch-r b{ font-family:var(--f-mono); font-size:13px; font-weight:500; color:var(--tx); overflow-wrap:anywhere; }
.pd-msearch-r span{ flex:none; max-width:45%; font-size:12px; color:var(--tx-3); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-mgroup{ padding-top:88px; }
.pd-mchips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 36px; }
.pd-mchips a, .pd-mchips span{ padding:8px 12px; border:1px solid var(--line); border-radius:6px; font-family:var(--f-mono); font-size:12.5px; letter-spacing:.02em; color:var(--tx-2); transition:border-color .18s, color .18s; }
.pd-mchips a:hover{ border-color:#50555b; color:var(--tx); }
.pd-mchips-g a, .pd-mchips-g span{ font-family:var(--f-sans); font-size:14px; letter-spacing:0; }
.pd-mchips-g span{ border-color:var(--red); color:var(--tx); }
.pd-mothers{ padding:24px 0 0; }
.pd-mser{ padding-top:34px; margin-top:34px; border-top:1px solid var(--line); scroll-margin-top:calc(var(--header-h) + var(--inset) + 16px); }
.pd-mser:first-of-type{ margin-top:0; }
.pd-mser-h{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px 24px; flex-wrap:wrap; margin-bottom:16px; }
.pd-mser-h h2{ margin:0; font-family:var(--f-mono); font-size:clamp(20px,1.5vw,26px); font-weight:500; letter-spacing:.01em; }
.pd-mser-h p{ margin:6px 0 0; font-size:13.5px; color:var(--tx-3); }
.pd-mser-h .btn{ height:36px; }
.pd-mser-hold{ margin:0; padding:22px 24px; border:1px dashed #3a3f45; border-radius:var(--radius); font-size:14.5px; color:var(--tx-2); }
.pd-table-m{ min-width:0; font-size:12.5px; }
.pd-table-m th, .pd-table-m td{ padding:10px 12px; }
.pd-table-m caption{ padding:14px 16px 10px; font-size:14px; }
.pd-table tr[id]{ scroll-margin-top:calc(var(--header-h) + var(--inset) + 120px); }
.pd-table tr:target :is(th, td){ background:rgba(214,17,46,.18); color:var(--tx); }
.pd-table tr:target th{ box-shadow:inset 3px 0 0 var(--red); }

/* ---------- milling group names in weight-hover type (milling first page cards, product finder tiles) ---------- */
/* js/weight-hover.js draws the letters; product.js sizes them to the box and adds .is-wh on hover / focus / (touch) mid-screen */
.pd-wcard-art, .pd-wtile{ position:relative; overflow:hidden; isolation:isolate; color:var(--tx-2); transition:color .35s var(--ease), border-color .25s;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(ellipse 80% 80% at 72% 28%, #1e2226 0%, #131518 55%, #0d0e10 100%); }
.pd-wcard-art::after, .pd-wtile::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .6s var(--ease);
  background:radial-gradient(ellipse 75% 85% at 18% 100%, rgba(214,17,46,.24) 0%, rgba(214,17,46,0) 70%); }
.pd-wcard.is-wh .pd-wcard-art, .pd-wtile.is-wh{ color:var(--tx); }
.pd-wcard.is-wh .pd-wcard-art::after, .pd-wtile.is-wh::after{ opacity:1; }
.pd-wcard-art{ display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:16/10; padding:18px 20px 20px; border-bottom:1px solid var(--line); }
.pd-wcard-top{ display:flex; justify-content:space-between; align-items:center; gap:14px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--tx-3); }
.pd-wcard-no{ flex:none; display:inline-flex; align-items:center; gap:8px; color:var(--tx-2); }
.pd-wcard-no::before{ content:''; width:6px; height:6px; background:var(--red); }
.pd-wcard-en{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-wh{ --wh-max:64px; width:100%; margin:0; font-size:40px; font-weight:400; line-height:1.15; letter-spacing:-.02em; }
.pd-wcard .pd-scard-body p{ margin-top:0; }
.pd-wtiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:10px; }
.pd-wtile{ display:flex; flex-direction:column; gap:12px; min-height:180px; padding:18px 20px 20px; border:1px solid var(--line); border-radius:var(--radius); background-color:var(--bg-1); }
.pd-wtile.is-wh{ border-color:#454a50; }
.pd-wtile .pd-wh{ --wh-max:46px; margin-top:auto; }
.pd-wtile small{ padding-right:28px; font-size:12.5px; color:var(--tx-3); }
.pd-wtile svg{ position:absolute; right:20px; bottom:20px; width:16px; height:16px; color:var(--tx-2); transition:transform .25s var(--ease), color .2s; }
.pd-wtile.is-wh svg{ transform:translateX(3px); color:var(--tx); }

/* ---------- new products (ko/products/new/) ---------- */
.pd-new .pd-mchips, .pd-mgroup .pd-head + .pd-mchips{ margin-bottom:28px; }
.pd-nitems{ display:grid; gap:14px; }
.pd-nitem{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-1); scroll-margin-top:calc(var(--header-h) + var(--inset) + 16px); }
.pd-nitem-img{ position:relative; align-self:start; aspect-ratio:1.6; background:radial-gradient(ellipse 70% 70% at 60% 45%, #24282c 0%, #15181b 52%, #0d0e10 100%); }
.pd-nitem-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pd-nitem-img.is-empty::after{ content:var(--pd-t-nophoto,'사진 준비 중'); position:absolute; inset:14px; display:grid; place-items:center; border:1px dashed #3a3f45; border-radius:6px; font-size:13px; color:var(--tx-3); }
.pd-nitem-body{ min-width:0; padding:26px 28px 24px; }
.pd-nitem-body .tag{ font-size:11px; }
.pd-nitem h3{ margin:10px 0 0; font-family:var(--f-mono); font-size:clamp(22px,1.6vw,28px); font-weight:500; letter-spacing:.01em; }
.pd-nitem-meta{ margin:6px 0 18px; font-size:14px; color:var(--tx-2); }
.pd-nitem .pd-table-wrap{ max-height:420px; overflow:auto; }
.pd-nitem-foot{ margin-top:18px; display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; }
.pd-nitem-foot .btn{ height:40px; }
.pd-nitem-foot .link-mono{ color:var(--tx); }
.pd-mser-act{ display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; }
.pd-mser-act .link-mono{ color:var(--tx); }
.pd-table-n{ min-width:0; }
.pd-table-n td.code{ font-family:var(--f-mono); white-space:nowrap; vertical-align:top; }

/* ---------- product finder (ko/products/find/) ---------- */
.pd-fhero-find .crumbs{ margin-bottom:clamp(40px,5vw,80px); }
.pd-findsec{ padding-top:24px; }
.pd-find2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
.pd-dsearch form label{ display:block; font-size:14px; color:var(--tx-2); }
.pd-dsearch .pd-input input{ font-family:var(--f-sans); font-size:26px; }
.pd-dfind-r{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.pd-dfind-r a{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 16px; padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:var(--bg); transition:border-color .18s, background-color .18s; }
.pd-dfind-r a:hover{ border-color:#50555b; background:var(--bg-2); }
.pd-dfind-r b{ font-size:15px; font-weight:500; }
.pd-dfind-r small{ grid-column:1; font-size:12.5px; color:var(--tx-3); }
.pd-dfind-r .link-mono{ grid-column:2; grid-row:1 / span 2; color:var(--tx); font-size:11px; }
.pd-dfind-r .btn{ margin-top:6px; height:40px; }
.pd-ftiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:10px; }
.pd-ftile{ position:relative; display:flex; flex-direction:column; gap:6px; padding:22px 56px 22px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); transition:border-color .2s; }
.pd-ftile:hover{ border-color:#454a50; }
.pd-ftile .tag{ font-size:11px; }
.pd-ftile b{ font-size:21px; font-weight:500; letter-spacing:-.01em; }
.pd-ftile small{ font-size:13px; color:var(--tx-3); }
.pd-ftile svg{ position:absolute; right:22px; top:50%; width:16px; height:16px; margin-top:-8px; color:var(--tx-2); transition:transform .25s var(--ease), color .2s; }
.pd-ftile:hover svg{ transform:translateX(3px); color:var(--tx); }
.nav .nav-find.is-active{ border-color:var(--red); }

/* language menu: languages that are not built yet */
.lang-menu button:disabled{ cursor:default; opacity:.45; }
.lang-menu button:disabled:hover{ background:none; color:var(--tx-2); }
/* the published languages are links to the same page in that language (_build/i18n LIVE_LANGS): styled as site.css styles the buttons */
.lang-menu a{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 10px; border-radius:5px; font-size:14px; text-align:left; color:var(--tx-2); }
.lang-menu a span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--tx-3); }
.lang-menu a:hover{ background:var(--bg-2); color:var(--tx); }

/* en / ja / zh pages (Korean pages are not touched): a long English word in a big title or a narrow card may break
   rather than run out of its box; Japanese titles break at phrase boundaries, as on the main page (site.css) */
html:not([data-lang="ko"]) :is(.pd-h1, .pd-head .h2, .pd-scard h3, .pd-ftile b, .pd-steps h3, .pd-cta .h2){ overflow-wrap:break-word; hyphens:auto; }
html[lang="ja"] :is(.pd-h1, .pd-head .h2, .pd-cta .h2, .pd-scard h3, .pd-mser-h h2, .card4 h3, .pd-facts dd, .how-name){ word-break:auto-phrase; overflow-wrap:anywhere; }
/* QA 2026-10-05, en / ja / zh only (Korean pages are laid out exactly as before) */
/* Japanese line-breaking rules (no line starting with ー ャ ッ ィ …), as the main page's .statement */
html[lang="ja"] body.pd{ line-break:strict; }
/* Chinese headings break at spaces and punctuation, not inside a word; a run too long for the line still breaks */
html[data-lang="zh"] :is(.pd-h1 .ln, .pd-head .h2, .pd-cta .h2, .pd-scard h3){ word-break:keep-all; overflow-wrap:anywhere; }
html[data-lang="zh"] :is(.pd-head .h2, .pd-cta .h2) > span{ text-wrap:pretty; }   /* a sentence with no break point: no 1–2 character last line ('…规格⏎吗？') */
/* no one- or two-character last line in card and lead paragraphs */
html:is([data-lang="ja"], [data-lang="zh"]) :is(.pd-lead, .pd-head .lead, .pd-cta .lead, .pd-scard-body p, .pd-mini p, .card4 p, .pd-mser-hold, .pd-mser-h p, .pd-nitem-meta){ text-wrap:pretty; }
/* a product code in a footnote stays on one line (build-products.mjs noteCodes) */
.pd-notes .pd-nw{ white-space:nowrap; }
/* line-up: the row's detail ("Single lip · Ø1.00 – 33.02") goes under the name when the two do not fit, never cut with … */
html:not([data-lang="ko"]) .pd-line-name{ flex-wrap:wrap; row-gap:2px; padding-block:6px; }
html:not([data-lang="ko"]) .pd-line-name small{ overflow:visible; text-overflow:clip; max-width:100%; }
/* QA round 2 (2026-10-05), en / ja / zh only */
/* hero facts TYPE: each type stays whole and the line breaks at the " · " between them (build-products.mjs millHero .pd-ib);
   a type longer than the box still wraps inside itself */
html:not([data-lang="ko"]) .pd-facts dd .pd-ib{ display:inline-block; max-width:100%; }
/* phones: the part-number search placeholder fits the field ('e.g. DHD-08D, LXET1605, AQXR') */
@media (max-width:480px){
  html:not([data-lang="ko"]) #pn-search::placeholder{ font-size:15px; letter-spacing:0; }
}
/* ja / zh notes and CTA text: no katakana word split at a line end ('カッ⏎ター'), no one-character last line ('ま⏎す。') */
:is(:lang(ja), :lang(zh)) :is(.pd-notes li, .pd-cta .lead){ text-wrap:pretty; }
html[lang="ja"] .pd-cta .lead{ word-break:auto-phrase; text-wrap:pretty; }
/* milling series meta: a part longer than the name column ("Inserts: TAEGU-TEC etc.") wraps instead of running out of it */
html:not([data-lang="ko"]) .pd-mser-t p span{ display:inline-block; max-width:100%; white-space:normal; vertical-align:top; }

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .pd-hero-foot{ grid-template-columns:1fr; gap:28px; }
  .pd-facts{ max-width:560px; }
  .pd-head{ grid-template-columns:1fr; gap:28px; }
  .pd-head > .lead, .pd-head-link, .pd-dims{ justify-self:start; }
  .pd-finder{ grid-template-columns:minmax(0,1fr); }   /* minmax: the nowrap tabs must not widen the track past the card */
  .pd-find{ border-right:0; border-bottom:1px solid var(--line); }
  .pd-grid{ grid-template-columns:minmax(0,1fr); }
  .pd-hero-media.is-empty::after{ width:min(46vw,440px); }
  .pd-cta{ grid-template-columns:1fr; }
  .pd-cta-r{ align-items:flex-start; }
  .pd-find2{ grid-template-columns:minmax(0,1fr); }
  html:not([data-lang="ko"]) .pd-head{ grid-template-columns:minmax(0,1fr); }   /* a long unbreakable heading never widens the page */
}
@media (max-width:760px){
  .pd-hero{ min-height:0; padding:calc(var(--header-h) + var(--inset) + 18px) 0 28px; }
  .pd-hero-in{ min-height:0; }
  /* the product sits on top, the copy starts under it on plain dark */
  .pd-hero-media{ bottom:auto; height:118vw; max-height:560px; }
  .pd-hero-media img{ object-position:74% 30%; }
  .pd-hero::before{ background:linear-gradient(180deg, rgba(11,12,13,.55) 0%, rgba(11,12,13,0) 24%, rgba(11,12,13,0) 46%, rgba(11,12,13,1) min(118vw,560px)); }
  .pd-title{ margin-top:min(78vw,380px); }
  .pd-h1{ font-size:clamp(40px,12vw,60px); }
  .pd-h1 .l2{ font-size:.46em; }
  .pd-hero-foot{ margin-top:22px; }
  .pd-facts{ max-width:none; padding:2px 16px; }
  .pd-facts dd{ font-size:13.5px; }
  .pd-actions .btn{ height:44px; }
  .pd-actions .link-mono{ padding:12px 0; margin:-12px 0; }
  .pd-dims{ width:100%; padding:16px 14px 12px; }
  .pd-find, .pd-out{ padding:22px 18px; }
  .pd-input{ height:56px; }
  .pd-input input{ font-size:22px; }
  .pd-tabs{ display:flex; }
  .pd-tabs button{ flex:1; min-width:0; justify-content:center; gap:7px; padding:0 6px; font-size:11px; letter-spacing:.04em; height:44px; }
  .pd-hit-grid{ grid-template-columns:1fr 1fr; }
  .pd-out{ min-height:0; }
  .pd-table{ font-size:12.5px; }
  .pd-exploded{ padding:20px 16px 16px; }
  .pd-legend li{ grid-template-columns:28px minmax(0,1fr); }
  .pd-legend code{ grid-column:2; margin-top:-6px; }
  .pd-line{ padding:22px 16px 18px; }
  .pd-line-axis{ margin-left:0; }
  .pd-line-row, .pd-line-row > a{ grid-template-columns:1fr; padding-top:12px; min-height:0; }
  .pd-line-row:has(> a){ padding-top:0; }
  .pd-line-name{ padding-right:0; }
  .pd-line-track{ height:28px; }
  .pd-cta-r .link-mono{ padding:12px 0; margin:-12px 0; }
  /* no photo yet: the empty frame sits where the photo will go, above the title */
  .pd-hero-media.is-empty::after{ left:16px; right:16px; width:auto; top:calc(var(--header-h) + var(--inset) + 52px); aspect-ratio:1.6; font-size:11px; }
  .pd-hero-media img.fit-contain{ padding:calc(var(--header-h) + 50px) 4% 14% 4%; }
  .pd-steps li{ grid-template-columns:34px minmax(0,1fr); gap:10px; padding:18px 16px; }
  .pd-order{ padding:18px 16px; }
  .pd-order-code span{ min-width:0; flex:1 1 40%; }
  .pd-fhero .crumbs{ margin-bottom:48px; }
  .pd-nitem{ grid-template-columns:minmax(0,1fr); }
  .pd-nitem-body{ padding:20px 16px 18px; }
  .pd-msearch{ padding:22px 18px; }
  .pd-dsearch .pd-input input{ font-size:22px; }
  /* ja: long katakana words in the hero title fit a phone line (as the main page's ja hero h1) */
  html[lang="ja"] .pd-h1{ font-size:clamp(30px,9.4vw,46px); }
}

/* ---------- photos & drawings per series (js/gallery.js) — only on pages with _build/source/media/<category>.json ---------- */
/* series strip. Wide screens: a name column (series name, meta, "사진 N · 도면 N", 견적 문의 at the bottom) | the pictures,
   from right after the name column to the right edge. The name column has ONE width on every series, so the pictures
   start at the same x down the page, and nothing sits at the right end, so what a short row leaves over is the row's end,
   not a hole between things. Below 1180: 견적 문의 back at the right of the name, the pictures on their own row.
   Phones: name, 견적 문의, then a sideways-scrolling row.
   Every picture at ONE row height and its own aspect ratio, never cropped or letterboxed: tile width = --ar x --rh
   (a drawing: its picture inside a --dp frame on the drafting grid). --rh = the cap --gh, or lower when the row does not fit
   the strip (100cqw); --sar, --gn, --gk, --maxar per strip from _build/build-products.mjs (galleryStrip). */
.pd-mser-h.has-g{ display:grid; grid-template-columns:clamp(250px,17vw,320px) minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:"t s" "b s"; gap:0 32px; align-items:start; }
.pd-mser-h.has-g .pd-mser-t{ grid-area:t; min-width:0; }
.pd-mser-h.has-g > .btn{ grid-area:b; align-self:end; justify-self:start; margin-top:16px; }   /* bottom edge = the pictures' bottom edge */
.pd-mser-t p span{ white-space:nowrap; }   /* the line breaks only between "웰던 생크 · 호환 인서트 TAEGU-TEC · …" parts */
.pd-mser-h h2 .pd-mser-k{ font-size:.66em; color:var(--tx-2); letter-spacing:0; }   /* its parts are nowrap spans (below): it wraps between them */   /* what tells same-name series apart (build-products.mjs headSuffix) */
.pd-mser-h h2 span{ white-space:nowrap; }  /* a code with a hyphen (M-TRMS, NT50-WMA) never breaks at the hyphen; a long name wraps at its spaces */
.pd-gcount{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:3px 0; border-bottom:1px solid transparent; font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--tx-2); white-space:nowrap; transition:color .18s, border-color .18s; }
.pd-gcount svg{ width:15px; height:15px; flex:none; color:var(--tx-3); transition:color .18s; }
.pd-gcount:hover{ color:var(--tx); border-bottom-color:var(--tx-3); }
.pd-gcount:hover svg{ color:var(--tx-2); }
.pd-gstrip{ grid-area:s; min-width:0; container-type:inline-size; }
/* --gh: at least 167 px = the name column with a two-line meta (1181–1390 px), so the pictures fill that height (the header
   is that tall anyway) and their bottom edge meets 견적 문의's; about 1/3 of the screen height at most (221 px at 2000 x 690).
   --ghn (js/gallery.js) = the name column's own height: when a long series name takes two lines the column is taller than
   that, and the row grows with it (still never wider than the strip), so the two bottom edges meet there too */
.pd-gthumbs{ --gap:10px; --dp:8px; --gh:max(var(--ghn, 0px), clamp(167px, min(12vw, 32vh), 320px));
  --rh:min(var(--gh), (100cqw - 1px - var(--gn) * var(--gap) - var(--gk) * var(--dp)) / var(--sar));
  display:flex; gap:var(--gap); margin:0; padding:0; list-style:none; }
.pd-gthumbs li{ flex:none; }
.pd-gthumb{ position:relative; display:block; width:calc(var(--ar) * var(--rh)); height:var(--rh); border-radius:6px; }
.pd-gthumb.is-drawing{ width:calc(var(--ar) * (var(--rh) - 2 * var(--dp)) + 2 * var(--dp)); }
.pd-gpic{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; background:var(--bg-2); }
.pd-gthumb.is-drawing .pd-gpic{ padding:var(--dp); }
.pd-gpic img{ display:block; width:100%; height:100%; object-fit:contain; transition:transform .45s var(--ease); }
.pd-gthumb::after{ content:''; position:absolute; inset:0; border:1px solid var(--line); border-radius:inherit; pointer-events:none; transition:border-color .18s var(--ease); }
.pd-gthumb:hover::after{ border-color:#5a6066; }
.pd-gthumb:hover img{ transform:scale(1.04); }
/* viewer tiles (js/gallery.js): fixed 1.6 : 1, never cropped. Around a photo the tile takes the photo's own backdrop
   (inline style from the manifest's bg), so the letterbox reads as part of the studio shot */
.pd-g-tile, .pd-g-rt{ position:relative; display:block; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--bg-2); transition:border-color .18s var(--ease), opacity .18s; }
.pd-g-tile img, .pd-g-rt img{ width:100%; height:100%; object-fit:contain; transition:transform .45s var(--ease); }
.pd-g-tile:hover{ border-color:#5a6066; }
.pd-g-tile:hover img{ transform:scale(1.04); }
/* drawings: light lines on a dark drafting canvas */
.pd-gthumb.is-drawing .pd-gpic, .pd-g-tile.is-drawing, .pd-g-rt.is-drawing, .pd-g-frame.is-drawing{
  background:linear-gradient(rgba(243,241,236,.035) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(243,241,236,.035) 1px, transparent 1px) 0 0 / 16px 16px, #0e1012; }
.pd-g-tile.is-drawing img, .pd-g-rt.is-drawing img{ padding:7px 6px 14px; }
.pd-gtag{ position:absolute; left:5px; bottom:5px; padding:0 5px; border:1px solid var(--line); border-radius:3px; background:rgba(11,12,13,.86); font-family:var(--f-mono); font-size:10px; line-height:16px; letter-spacing:.04em; color:var(--tx-2); pointer-events:none; }
/* strip: the tag sits on the top edge of the drawing's frame like a legend, so it never covers a line */
.pd-gthumb .pd-gtag{ z-index:1; left:10px; top:-8px; bottom:auto; padding:0 6px; border:0; border-radius:2px; background:var(--bg); font-size:10.5px; letter-spacing:.06em; color:var(--tx-2); }
.pd-gmore .pd-gpic{ display:grid; place-items:center; background:var(--bg-1); font-family:var(--f-mono); font-size:14px; color:var(--tx-2); }
.pd-gmore:hover .pd-gpic{ color:var(--tx); }

/* hero: "사진 N · 도면 N". With the owner's photo: the third, outline-only button of .pd-actions (never over the photo).
   While the slot is empty (.no-photo): at the bottom-right of the dashed frame instead. One of the two is shown. */
.pd-gall-act{ gap:9px; padding:0 14px 0 12px; border:1px solid rgba(243,241,236,.24); background:transparent; color:var(--tx); font-variant-numeric:tabular-nums; transition:border-color .18s, background-color .18s; }
.pd-gall-act svg{ width:16px; height:16px; flex:none; color:var(--tx-2); transition:color .18s; }
.pd-gall-act:hover{ border-color:rgba(243,241,236,.5); background:rgba(243,241,236,.06); }
.pd-gall-act:hover svg{ color:var(--tx); }
.pd-hero.no-photo .pd-gall-act, html:not(.js) .pd-gall-act{ display:none; }
.pd-gall-open{ display:none; position:absolute; z-index:1; right:calc(var(--gutter) + 12px); top:calc(var(--header-h) + var(--inset) * 2 + 20px + min(36vw,520px) / 1.6 - 48px);
  align-items:center; gap:9px; height:36px; padding:0 13px 0 11px; border:1px solid rgba(243,241,236,.16); border-radius:6px;
  background:rgba(11,12,13,.66); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--tx); white-space:nowrap; transition:border-color .18s, background-color .18s; }
.pd-gall-open svg{ width:16px; height:16px; flex:none; color:var(--tx-2); transition:color .18s; }
.pd-gall-open:hover{ border-color:rgba(243,241,236,.38); background:rgba(17,19,21,.86); }
.pd-gall-open:hover svg{ color:var(--tx); }
.pd-hero.no-photo .pd-gall-open{ display:inline-flex; }
html:not(.js) .pd-hero .pd-gall-open{ display:none; }
@media screen and (prefers-reduced-motion:no-preference){ .pd-gall-open{ animation:fadeUp .9s .3s var(--ease) both; } }

/* viewer: native <dialog> (top layer, inert page behind), full screen */
html.pd-g-lock{ overflow:hidden; }
.pd-g{ position:fixed; inset:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden;
  background:var(--bg); color:var(--tx); font-family:var(--f-sans); overscroll-behavior:contain; }
.pd-g[open]{ display:grid; grid-template-rows:auto minmax(0,1fr); }
.pd-g::backdrop{ background:rgba(5,6,7,.5); }
.pd-g [hidden]{ display:none !important; }
@media screen and (prefers-reduced-motion:no-preference){ .pd-g[open]{ animation:pdGIn .22s var(--ease); } }
@keyframes pdGIn{ from{ opacity:0; } }
.pd-g-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:10px var(--inset) 10px calc(var(--inset) + 8px); border-bottom:1px solid var(--line-soft); }
.pd-g-cap{ min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:var(--tx-2); word-break:keep-all; }
.pd-g-cap b{ font-family:var(--f-mono); font-size:15px; font-weight:500; letter-spacing:.01em; color:var(--tx); }
.pd-g.is-grid .pd-g-cap b{ font-family:var(--f-sans); letter-spacing:0; }
.pd-g-meta::before, .pd-g-n:not(:empty)::before, .pd-g-t:not(:empty)::before{ content:' · '; color:var(--tx-3); }
.pd-g-n{ font-family:var(--f-mono); font-size:13px; color:var(--tx-3); font-variant-numeric:tabular-nums; }
.pd-g-t{ font-size:13px; color:var(--tx-3); }   /* 호환 인서트 … · 카탈로그 N쪽: tells the four ENCC tables apart */
.pd-g-t span{ white-space:nowrap; }
.pd-g-tools{ flex:none; display:flex; align-items:center; gap:6px; }
.pd-g-zoom{ display:flex; align-items:center; gap:2px; margin:0 4px; padding:0 6px; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.pd-g-btn{ display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 9px; border:1px solid transparent; border-radius:6px; color:var(--tx-2); transition:color .18s, background-color .18s, border-color .18s; }
.pd-g-btn:hover{ color:var(--tx); background:var(--bg-2); }
.pd-g-btn:disabled{ opacity:.32; cursor:default; background:none; color:var(--tx-2); }
.pd-g-btn svg{ width:19px; height:19px; }
.pd-g-all{ display:inline-flex; gap:8px; padding:0 13px 0 11px; border-color:var(--line); font-size:13.5px; }
.pd-g-all svg{ width:16px; height:16px; }
.pd-g-lvl{ min-width:56px; font-family:var(--f-mono); font-size:12px; font-variant-numeric:tabular-nums; }
.pd-g-x{ border-color:var(--line); }
.pd-g-view{ display:grid; grid-template-rows:minmax(0,1fr) auto; min-height:0; }
.pd-g-sw{ position:relative; min-height:0; }
.pd-g-stage{ position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:zoom-in; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.pd-g-stage:focus-visible{ outline:1px solid rgba(243,241,236,.28); outline-offset:-1px; border-radius:0; }   /* a full-screen red ring would be a large red area */
.pd-g-stage.is-zoomed{ cursor:grab; }
.pd-g-stage.is-drag{ cursor:grabbing; }
.pd-g-slide{ position:absolute; inset:0; }
.pd-g-slide.is-snap{ transition:transform .25s var(--ease); }
.pd-g-frame{ position:absolute; left:0; top:0; overflow:hidden; border-radius:4px; transform-origin:0 0; will-change:transform; }
.pd-g-frame.is-anim{ transition:transform .3s var(--ease); }
.pd-g-frame img{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; -webkit-user-drag:none; }
.pd-g-lo{ filter:blur(10px); transform:scale(1.04); }
.pd-g-frame.is-drawing .pd-g-lo{ filter:blur(3px); opacity:.6; transform:none; }
.pd-g-hi{ opacity:0; transition:opacity .25s var(--ease); }
.pd-g-frame.is-ready .pd-g-hi{ opacity:1; }
.pd-g-frame.is-ready .pd-g-lo{ visibility:hidden; }   /* transparent drawings: no blurred copy behind the lines */
@media screen and (prefers-reduced-motion:no-preference){
  .pd-g-slide.in-r{ animation:pdGFromR .32s var(--ease); }
  .pd-g-slide.in-l{ animation:pdGFromL .32s var(--ease); }
}
@keyframes pdGFromR{ from{ opacity:0; transform:translate3d(36px,0,0); } }
@keyframes pdGFromL{ from{ opacity:0; transform:translate3d(-36px,0,0); } }
.pd-g-spin{ position:absolute; left:50%; top:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border:2px solid rgba(243,241,236,.16); border-top-color:var(--tx-2); border-radius:50%; opacity:0; pointer-events:none; transition:opacity .2s; }
.pd-g-sw.is-loading .pd-g-spin{ opacity:1; transition-delay:.2s; animation:pdGSpin .8s linear infinite; }
@media (prefers-reduced-motion:reduce){ .pd-g-sw.is-loading .pd-g-spin{ animation:none; } }
@keyframes pdGSpin{ to{ transform:rotate(1turn); } }
.pd-g-msg{ position:absolute; left:0; right:0; top:50%; margin:0; text-align:center; font-size:14px; color:var(--tx-2); pointer-events:none; }
.pd-g-hint{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); margin:0; padding:4px 10px; border-radius:4px; background:rgba(11,12,13,.72);
  font-size:12px; color:var(--tx-3); white-space:nowrap; pointer-events:none; transition:opacity .3s; }
.pd-g-stage.is-zoomed ~ .pd-g-hint{ opacity:0; }
.pd-g-nav{ position:absolute; z-index:2; top:50%; width:48px; height:48px; margin-top:-24px; display:grid; place-items:center; border:1px solid var(--line); border-radius:6px;
  background:rgba(17,19,21,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--tx); transition:border-color .18s, background-color .18s; }
.pd-g-nav:hover{ border-color:#5a6066; background:rgba(28,31,34,.92); }
.pd-g-nav svg{ width:20px; height:20px; }
.pd-g-prev{ left:var(--inset); }
.pd-g-next{ right:var(--inset); }
.pd-g-rail{ display:flex; gap:6px; margin:0; padding:10px var(--inset) 12px; list-style:none; overflow-x:auto; overscroll-behavior:contain; border-top:1px solid var(--line-soft);
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.pd-g-rail li{ flex:none; }
.pd-g-rail li:first-child{ margin-left:auto; }   /* centred while it fits, scrolls from the start when it does not */
.pd-g-rail li:last-child{ margin-right:auto; }
.pd-g-rail li.is-new{ padding-left:12px; }   /* whole-category sequence: a small break where the series changes */
.pd-g-rt{ width:76px; height:48px; border-radius:4px; opacity:.5; }
.pd-g-rt:hover{ opacity:.85; }
.pd-g-rt[aria-current="true"]{ opacity:1; border-color:var(--tx-2); }
.pd-g-rt[aria-current="true"]::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red); }
.pd-g-rt.is-drawing img{ padding:4px 4px 6px; }
/* whole category, grouped by series */
.pd-g-grid{ min-height:0; overflow:auto; overscroll-behavior:contain; padding:26px var(--gutter) 48px; }
.pd-g-sec + .pd-g-sec{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line-soft); }
.pd-g-sec h3{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:0 0 14px; font-family:var(--f-mono); font-size:16px; font-weight:500; letter-spacing:.01em; }
.pd-g-sec h3 small{ font-family:var(--f-sans); font-size:13px; font-weight:400; letter-spacing:0; color:var(--tx-3); word-break:keep-all; }
.pd-g-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.pd-g-tile{ width:100%; aspect-ratio:1.6; }
.pd-g-tile.is-cur{ border-color:var(--tx-2); }
.pd-g-note{ margin:7px 2px 0; font-size:12px; line-height:1.45; color:var(--tx-3); word-break:keep-all; }   /* one catalogue picture used by several series */
.pd-g-note span{ margin-right:4px; color:var(--tx-2); }

@media (max-width:1180px){
  .pd-mser-h.has-g{ grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; grid-template-areas:"t b" "s s"; gap:16px 32px; align-items:end; }
  .pd-mser-h.has-g > .btn{ margin-top:0; }
  .pd-gthumbs{ --gh:clamp(110px, min(15vw, 22vh), 150px); }
  .pd-gall-open{ top:calc(var(--header-h) + var(--inset) * 2 + 20px + min(46vw,440px) / 1.6 - 48px); }
}
@media (max-width:760px){
  /* phones: one fixed row height, natural widths, swipe sideways (the count link is under the series name now, so snapping is fine) */
  .pd-mser-h.has-g{ grid-template-columns:minmax(0,1fr); grid-template-areas:"t" "b" "s"; }
  .pd-mser-h.has-g > .btn{ justify-self:start; }
  .pd-mser-h.has-g .pd-gstrip{ margin:0 calc(-1 * var(--gutter)); padding:10px var(--gutter) 2px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter); scrollbar-width:none; }
  .pd-mser-h.has-g .pd-gstrip::-webkit-scrollbar{ display:none; }
  /* 120 px, or lower so the widest tile (--maxar, sized as a drawing) still fits the screen width and can be seen whole */
  .pd-gthumbs{ --gap:8px; --dp:6px; --rh:min(120px, (100cqw - 1px - 2 * var(--dp)) / var(--maxar) + 2 * var(--dp)); width:max-content; }
  .pd-gthumbs li{ scroll-snap-align:start; }
  .pd-gall-open{ right:26px; top:calc(var(--header-h) + var(--inset) + 52px + (100vw - 32px) / 1.6 - 46px); height:34px; }
  .pd-g-bar{ min-height:56px; gap:8px; padding:8px 8px 8px 14px; }
  .pd-g-cap{ white-space:normal; font-size:12.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }   /* name, then shank · kind · n · tag on up to two lines */
  .pd-g-t{ font-size:12.5px; }
  .pd-g-cap b{ display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pd-g-meta::before{ content:none; }                /* the series name has its own line */
  .pd-g-zoom{ display:none; }                        /* pinch and double tap */
  .pd-g-all{ padding:0 10px; }
  .pd-g-all span{ display:none; }
  .pd-g-nav{ top:auto; bottom:8px; width:40px; height:40px; margin-top:0; }   /* bottom corners: not over the picture */
  .pd-g-hint{ bottom:17px; }
  .pd-g-prev{ left:8px; }
  .pd-g-next{ right:8px; }
  .pd-g-rail{ padding:8px 10px 10px; }
  .pd-g-rt{ width:64px; height:40px; }
  .pd-g-grid{ padding:20px 16px 40px; }
  .pd-g-tiles{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:6px; }
}
@media (max-height:520px){ .pd-g-rail{ display:none; } }

/* ---------- milling series: a quiet card in the free width right of a series' pictures (owner, 2026-10-03; of three trial
   versions the owner chose C, 2026-10-04 — _build/build-products.mjs fillHtml). Two forms: 사용 인서트 | 시리즈 요약
   (.pd-gins.pd-gboth) where an insert of the 밀링 인서트 category matches the series' table exactly, else 시리즈 요약 alone
   with the parts (.pd-gsumc).
   The strip becomes one row: the pictures (.pd-gset, as wide as they are) | the card (.pd-gfill, the rest of the width).
   .pd-gfill is a size container: its height is the row's, so the card's top and bottom edges are the pictures', and its
   content follows its own width and height (cqw / cqh, @container gfill). The card shows from 290 px wide (about 320 px
   left over after the pictures) and never on phones; where it does not show, nothing moves.
   Row heights it meets: 221 px (2000 x 690), 167-181 (1440 x 900), 150 (1181 px), 110-150 (761-1180 px windows). ---------- */
.pd-gstrip.has-fill{ display:flex; align-items:stretch; }
.pd-gset{ flex:0 1 auto; min-width:0; }   /* gives way only when the row is full: the pictures then run on under the empty box */
.pd-gfill{ flex:1 1 0; min-width:0; margin-left:28px; container:gfill / size; }
.pd-gfill-card{ display:none; flex-direction:column; gap:10px; height:100%; overflow:hidden;
  padding:12px 18px 13px; border:1px solid var(--line); border-radius:6px; color:var(--tx-2); }
@container gfill (min-width:290px){ .pd-gfill-card{ display:flex; } }
.pd-gfill-k{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0; font-family:var(--f-mono); font-size:10.5px; line-height:16px; letter-spacing:.06em; color:var(--tx-3); white-space:nowrap; }
.pd-gfill-k span{ min-width:0; overflow:hidden; text-overflow:ellipsis; letter-spacing:.02em; }
.pd-gfill-k.is-part{ font-family:var(--f-sans); font-size:12px; letter-spacing:0; color:var(--tx-2); }   /* the insert fits only some sizes: the heading says which */
@container gfill (max-width:419.98px){ .pd-gfill-k span{ display:none; } }

/* 시리즈 요약 alone (no insert matched) — the numbers (R, D, d, 날수, 품번) and the parts (인서트, 스크류, 렌치).
   Under 600 px: one label | value list, the parts under a hairline, lowest lines dropped first when the row is low.
   600-899: the two lists side by side, the parts zone under the catalogue page.
   900 and up: the numbers big in fixed columns (two rows) | the parts as a list. */
.pd-gsumc{ justify-content:flex-start; }
.pd-gsum-b{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.pd-gsum, .pd-gparts{ display:grid; grid-template-columns:5.6em minmax(0, 1fr); gap:3px 12px; margin:0; }
.pd-gsum div, .pd-gparts div, .pd-gmini div{ display:contents; }
.pd-gsum dt, .pd-gparts dt, .pd-gmini dt{ font-size:12px; line-height:18px; color:var(--tx-3); white-space:nowrap; }
.pd-gsum dd, .pd-gmini dd{ margin:0; min-width:0; font-family:var(--f-mono); font-size:13px; line-height:18px; font-variant-numeric:tabular-nums; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-gsum .sep, .pd-gmini .sep{ color:var(--tx-3); }
.pd-gsum small, .pd-gmini small{ margin-left:4px; font-size:11px; letter-spacing:.02em; color:var(--tx-3); }
.pd-gparts-z{ min-width:0; padding-top:8px; border-top:1px solid var(--line-soft); }
.pd-gparts-k{ display:none; }
.pd-gparts dd{ margin:0; min-width:0; font-family:var(--f-mono); font-size:12.5px; line-height:18px; color:var(--tx-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* lower rows (each line 21 px; a card with five numbers needs about 40 px more): first the parts after the first, then the
   parts, then the fifth and fourth numbers */
@container gfill (max-width:599.98px) and (max-height:249.98px){ .pd-gsumc:has(.pd-gsum > div:nth-child(5)) .pd-gparts div:nth-child(n+2){ display:none; } }
@container gfill (max-width:599.98px) and (max-height:213.98px){ .pd-gparts div:nth-child(n+2){ display:none; } }
/* the heading goes only where the card cannot hold it above the lines still shown (owner's review, 2026-10-04: two- and
   three-line cards lost it at 1440 x 900 and looked empty). Frame 27 px + heading 26 + n numbers at 21 px = 50 + 21 n; the
   parts zone with its first line adds 35. Big numbers (900 px and up) take two rows from three numbers: 177 with the heading.
   Each limit is 1 px under that sum (a line may end in the bottom padding by less than 1 px: 1440 px windows give 172.8 px rows). */
@container gfill (max-width:599.98px) and (min-height:170px) and (max-height:188.98px){ .pd-gsumc:has(.pd-gsum > div:nth-child(5)):has(.pd-gparts-z) > .pd-gsum-k{ display:none; } }
@container gfill (max-width:599.98px) and (min-height:150px) and (max-height:167.98px){ .pd-gsumc:has(.pd-gsum > div:nth-child(4):last-child):has(.pd-gparts-z) > .pd-gsum-k{ display:none; } }
@container gfill (max-width:899.98px) and (max-height:153.98px){ .pd-gsumc:has(.pd-gsum > div:nth-child(5)) > .pd-gsum-k{ display:none; } }
@container gfill (max-width:899.98px) and (max-height:132.98px){ .pd-gsumc:has(.pd-gsum > div:nth-child(4)) > .pd-gsum-k{ display:none; } }
@container gfill (max-width:899.98px) and (max-height:111.98px){ .pd-gsumc:has(.pd-gsum > div:nth-child(3)) > .pd-gsum-k{ display:none; } }
@container gfill (min-width:900px) and (max-height:175.98px){ .pd-gsumc:has(.pd-gsum > div:nth-child(3)) > .pd-gsum-k{ display:none; } }
@container gfill (max-width:599.98px) and (max-height:169.98px){ .pd-gsumc:has(.pd-gsum > div:nth-child(5)) .pd-gparts-z{ display:none; } }
@container gfill (max-width:599.98px) and (max-height:149.98px){ .pd-gparts-z{ display:none; } .pd-gsum div:nth-child(n+5){ display:none; } }
@container gfill (max-width:599.98px) and (max-height:114.98px){ .pd-gsum div:nth-child(n+4){ display:none; } }
@container gfill (min-width:600px){
  .pd-gsumc{ justify-content:center; }
  .pd-gsumc.has-parts > .pd-gsum-k{ display:none; }
  .pd-gsum-b{ flex-direction:row; align-items:center; gap:0; }
  .pd-gsum{ flex:0 1 auto; padding-right:28px; }
  .pd-gparts-z{ flex:1 1 0; min-width:220px; align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:0 0 0 28px; border-top:0; border-left:1px solid var(--line-soft); }
  .pd-gparts-k{ display:block; margin:0 0 8px; font-family:var(--f-mono); font-size:10.5px; line-height:16px; letter-spacing:.02em; color:var(--tx-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pd-gparts{ grid-template-columns:3.6em minmax(0, 1fr); gap:5px 12px; }
  .pd-gparts dd{ font-size:13px; }
}
@container gfill (max-width:899.98px){ html:not([data-lang="ko"]) .pd-gsum{ grid-template-columns:max-content minmax(0, 1fr); } }
html:not([data-lang="ko"]) .pd-gparts{ grid-template-columns:max-content minmax(0, 1fr); }
@container gfill (min-width:600px) and (max-height:129.98px){ .pd-gsum div:nth-child(n+5), .pd-gparts-k{ display:none; } }
@container gfill (min-width:900px){
  .pd-gsum{ grid-template-columns:repeat(var(--c), minmax(176px, max-content)); gap:18px 0; padding-right:40px; }
  .pd-gsum div{ display:block; min-width:0; padding-right:28px; }
  .pd-gsum dt{ line-height:16px; }
  .pd-gsum dd{ margin-top:5px; font-size:24px; line-height:32px; letter-spacing:-.01em; }
  .pd-gsum small{ margin-left:5px; font-size:12px; }
  .pd-gsum .sep{ position:relative; top:-.18em; font-size:.62em; }   /* 24 px mono spaces are wide: the separator and its spaces at a smaller size */
  .pd-gsum.is-c3{ grid-template-columns:repeat(3, minmax(150px, max-content)); }   /* five numbers: three columns, a little smaller */
  .pd-gsum.is-c3 dd{ font-size:20px; }
  .pd-gparts-z{ min-width:290px; padding-left:40px; }
  .pd-gparts{ grid-template-columns:4em minmax(0, 1fr); gap:8px 14px; }
  .pd-gparts dt, .pd-gparts dd{ font-size:13.5px; line-height:20px; }
}

/* 사용 인서트 | 시리즈 요약 — the insert's photo and drawing, small (about 43 % of the row: under the series' own pictures,
   level with its code), then its code and part number (the first one of each, the rest as '외 N종'), and beside them the
   series' own numbers. Narrower cards drop the drawing, then the pictures (below). */
.pd-gins{ padding:12px 16px 12px 14px; }
.pd-gz{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.pd-gz-ins{ flex:1 1 0; container:gins / inline-size; }   /* the pictures size to this zone's width (cqw) and the row's height (cqh, from .pd-gfill) */
.pd-gins-b{ flex:1 1 auto; display:flex; align-items:center; gap:18px; min-width:0; }
.pd-gins-pics{ --dp:5px; --tw:max(150px, var(--tn, 0px));   /* --tw: the text column; --tn (from the page) = the code line's own width */
  --ih:min(100cqh * .43, (100cqw - 18px - var(--tw) - 8px - var(--gk2) * var(--dp)) / var(--sar2));
  flex:none; display:flex; align-items:center; gap:8px; }
.pd-gfi{ position:relative; display:block; flex:none; width:calc(var(--ar) * var(--ih)); height:var(--ih); border-radius:4px; }
.pd-gfi.is-drawing{ width:calc(var(--ar) * (var(--ih) - 2 * var(--dp)) + 2 * var(--dp)); }
.pd-gfi::after{ content:''; position:absolute; inset:0; border:1px solid var(--line); border-radius:inherit; pointer-events:none; transition:border-color .18s var(--ease); }
.pd-gfi:not(.is-drawing) img{ filter:brightness(.8) saturate(.85); transition:filter .25s var(--ease); }   /* quieter than the series' own photo */
.pd-gins-pics:hover .pd-gfi::after{ border-color:#5a6066; }
.pd-gins-pics:hover .pd-gfi img{ filter:none; }
.pd-gfi.is-drawing .pd-gpic{ padding:var(--dp); background:linear-gradient(rgba(243,241,236,.035) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(243,241,236,.035) 1px, transparent 1px) 0 0 / 16px 16px, #0e1012; }
.pd-gfi .pd-gtag{ z-index:1; left:6px; top:-7px; bottom:auto; padding:0 4px; border:0; border-radius:2px; background:var(--bg); font-size:9.5px; line-height:14px; letter-spacing:.06em; color:var(--tx-3); }
.pd-gins-i{ flex:1 1 0; min-width:0; }
.pd-gins-code{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-family:var(--f-mono); font-size:15px; line-height:20px; color:var(--tx); }
.pd-gins-code .c, .pd-gins-pn .c{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:top; }   /* a code never breaks, and one too long for the column ends in an ellipsis, never cut silently */
.pd-gins-code svg{ display:inline-block; width:13px; height:13px; margin-left:8px; vertical-align:-1px; color:var(--tx-3); transition:transform .25s var(--ease), color .18s; }
.pd-gins-code:hover svg{ transform:translateX(3px); color:var(--tx); }
.pd-gins-i .pd-gs{ display:inline-flex; max-width:calc(100% - 22px); vertical-align:top; }   /* the first code + '외 N종', on one line (a long part number below is cut with …) */
.pd-gins-code .pd-gs{ flex-wrap:wrap; }   /* should the column still be too narrow, '외 N종' goes to the second line and the code stays whole */
.pd-gins-pn .pd-gs{ max-width:100%; }
.pd-gs .c{ flex:0 1 auto; min-width:0; }
.pd-gs .x{ flex:none; white-space:nowrap; }
.pd-gins-pn{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:4px 0 0; font-family:var(--f-mono); font-size:11.5px; line-height:16px; color:var(--tx-3); }
@container gfill (max-height:139.98px){ .pd-gz-ins > .pd-gfill-k:not(.is-part){ display:none; } }

/* two zones, each under its own heading — the insert | the series' numbers (from 600 px); narrower, the numbers on top
   and the insert as one line under a hairline (no pictures: they do not fit the height) */
.pd-gboth{ flex-direction:row; gap:0; }
.pd-gboth .pd-gz-ins{ padding-right:22px; }
.pd-gz-sum{ flex:0 0 auto; min-width:190px; max-width:48%; padding-left:22px; border-left:1px solid var(--line-soft); }
.pd-gmini{ flex:1 1 auto; display:grid; grid-template-columns:auto minmax(0, 1fr); align-content:center; gap:3px 14px; margin:0; }
@container gfill (max-width:819.98px){
  .pd-gboth .pd-gfi.is-drawing{ display:none; }
  .pd-gboth .pd-gins-pics{ --tw:max(120px, var(--tn, 0px)); --ih:min(100cqh * .43, (100cqw - 18px - var(--tw)) / var(--sar1)); }
}
@container gfill (max-width:599.98px){
  .pd-gboth{ flex-direction:column; gap:10px; }
  .pd-gboth .pd-gz-sum{ order:-1; flex:1 1 auto; max-width:none; min-width:0; padding:0; border:0; }
  .pd-gboth .pd-gmini{ align-content:start; }
  .pd-gboth .pd-gz-ins{ flex:none; flex-direction:row; align-items:baseline; gap:14px; padding:9px 0 0; border-top:1px solid var(--line-soft); }
  .pd-gboth .pd-gz-ins > .pd-gfill-k{ flex:none; display:block; }
  .pd-gboth .pd-gz-ins > .pd-gfill-k span, .pd-gboth .pd-gins-pics, .pd-gboth .pd-gins-pn{ display:none; }
  .pd-gboth .pd-gins-b{ flex:1 1 0; }
  .pd-gboth .pd-gins-code{ -webkit-line-clamp:1; }
  .pd-gboth .pd-gz-ins:has(.is-part){ flex-direction:column; align-items:stretch; gap:3px; }   /* a long heading ('일부 품번용 …') gets its own line */
}
/* the numbers' heading goes only where it does not fit (as for 시리즈 요약 alone, 1 px of slack): frame 26 + heading 26 +
   n numbers at 21 px + the insert line 40 = 89 + 21 n; a long insert heading on its own line ('일부 품번용 …') adds 19 */
@container gfill (max-width:599.98px) and (max-height:192.98px){ .pd-gboth:has(.pd-gmini > div:nth-child(5)) .pd-gz-sum > .pd-gfill-k{ display:none; } }
@container gfill (max-width:599.98px) and (max-height:190.98px){ .pd-gboth:has(.is-part):has(.pd-gmini > div:nth-child(4)) .pd-gz-sum > .pd-gfill-k{ display:none; } }
@container gfill (max-width:599.98px) and (max-height:171.98px){ .pd-gboth:has(.pd-gmini > div:nth-child(4)) .pd-gz-sum > .pd-gfill-k{ display:none; } }
@container gfill (max-width:599.98px) and (max-height:169.98px){ .pd-gboth:has(.is-part):has(.pd-gmini > div:nth-child(3)) .pd-gz-sum > .pd-gfill-k{ display:none; } }
@container gfill (max-width:599.98px) and (max-height:150.98px){ .pd-gboth:has(.pd-gmini > div:nth-child(3)) .pd-gz-sum > .pd-gfill-k{ display:none; } }
@container gfill (max-width:599.98px) and (max-height:148.98px){ .pd-gboth:has(.is-part):has(.pd-gmini > div:nth-child(2)) .pd-gz-sum > .pd-gfill-k{ display:none; } }
@container gfill (max-width:599.98px) and (max-height:129.98px){ .pd-gboth .pd-gz-sum > .pd-gfill-k{ display:none; } }
@container gfill (max-width:599.98px) and (max-height:159.98px){ .pd-gboth .pd-gmini div:nth-child(n+5){ display:none; } }
@container gfill (max-width:599.98px) and (max-height:134.98px){ .pd-gboth .pd-gmini div:nth-child(n+4){ display:none; } }
@container gfill (max-width:599.98px) and (max-height:169.98px){ .pd-gboth:has(.is-part) .pd-gmini div:nth-child(n+4){ display:none; } }   /* the two-line insert part */
@container gfill (max-width:599.98px) and (max-height:134.98px){ .pd-gboth:has(.is-part) .pd-gmini div:nth-child(n+3){ display:none; } }
@container gfill (min-width:600px) and (max-height:139.98px){ .pd-gboth .pd-gz-sum > .pd-gfill-k{ display:none; } .pd-gboth .pd-gmini div:nth-child(n+5){ display:none; } }
@media (max-width:760px){
  .pd-gstrip.has-fill{ display:block; }
  .pd-gfill{ display:none; }   /* phones: the pictures already scroll sideways at full width, the table follows right under them */
}
/* privacy policy (<lang>/privacy/, build-products.mjs privacyPage) */
.pd-legal{ padding-top:calc(var(--header-h) + var(--inset) * 2 + 28px); }
.pd-legal .wrap{ max-width:920px; }
.pd-legal .crumbs{ margin-bottom:30px; }
.pd-legal-h1{ margin:0 0 10px; font-size:clamp(32px,3.4vw,52px); font-weight:500; letter-spacing:-.02em; line-height:1.15; }
.pd-legal-meta{ margin:0 0 26px; font-family:var(--f-mono); font-size:12.5px; letter-spacing:.08em; color:var(--tx-3); }
.pd-legal-note{ margin:0 0 28px; padding:12px 16px; border:1px solid var(--line); border-radius:8px; font-size:14px; line-height:1.6; color:var(--tx-2); }
.pd-legal-body{ font-size:15.5px; line-height:1.8; color:var(--tx-2); }
.pd-legal-body > p:first-child{ color:var(--tx); }
.pd-legal-body h2{ margin:46px 0 12px; font-size:clamp(18px,1.4vw,21px); font-weight:600; line-height:1.4; color:var(--tx); }
.pd-legal-body h3{ margin:24px 0 8px; font-size:16px; font-weight:600; color:var(--tx); }
.pd-legal-body p{ margin:0 0 10px; }
.pd-legal-body ul{ margin:10px 0 0; padding-left:20px; }
.pd-legal-body li{ margin:5px 0; }
.pd-legal-table{ overflow-x:auto; margin:14px 0 8px; border:1px solid var(--line); border-radius:8px; }
.pd-legal-table table{ width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.6; }
.pd-legal-table th, .pd-legal-table td{ padding:11px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.pd-legal-table tr:last-child > *{ border-bottom:0; }
.pd-legal-table thead th{ font-family:var(--f-mono); font-size:12px; font-weight:400; letter-spacing:.1em; color:var(--tx-3); background:var(--bg-1); }
.pd-legal-table tbody th{ width:1%; white-space:nowrap; font-weight:500; color:var(--tx); }
@media (max-width:760px){
  .pd-legal-table.is-stack thead{ display:none; }
  .pd-legal-table.is-stack tr{ display:block; padding:12px 16px; border-bottom:1px solid var(--line); }
  .pd-legal-table.is-stack tr:last-child{ border-bottom:0; }
  .pd-legal-table.is-stack tbody th, .pd-legal-table.is-stack td{ display:block; width:auto; padding:0; border:0; white-space:normal; }
  .pd-legal-table.is-stack td{ margin-top:8px; }
  .pd-legal-table.is-stack td::before{ content:attr(data-label); display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--tx-3); }
}