/* ─────────────────────────────────────────────────────────
   YEKUN — 어두운 테마
   index.html 에서 site.css 등 기존 스타일 뒤에 불러와 덧씌웁니다. (플래너 · 카탈로그 뷰어 · 관리자 화면은 밝은 색 그대로)
   기준: apple.com/kr 제품 상세 페이지 실측값
     바탕 #1d1d1f · 카드 #000 · 작은 면(칩·입력칸) #2a2a2d · 글자 #f5f5f7 / #86868b
     제목 600 · 본문 400 · 설명 문단 600 회색 · 상자 모서리는 각지게 · 버튼은 알약 모양
   제품을 보여 주는 상자만 흰색(#fff)
   ───────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --gray: #86868b;
  --lime-ink: #1c2606;
  --page: #1d1d1f;                 /* 페이지 바탕 — Apple 의 어두운 구역 바탕 */
  --bg: #2a2a2d;                   /* 칩 · 입력칸 같은 작은 면 */
  --bg-2: #3a3a3d;
  --card: #000;                    /* 바탕 위에 놓이는 카드 */
  --sheet: #161617;                /* 메뉴 · 서랍 · 검색 창 */
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .2);
  --pad: clamp(20px, 3.4vw, 52px);
  --gap: 12px;
  --hd: 52px;
  --hd-c: 52px;
  --mono: var(--font-en);          /* Apple 은 고정폭 글꼴을 쓰지 않음 */
  --logo-gray: #f5f5f7;
  --box: #fff;                     /* 제품 상자 */
  --box-ink: #1d1d1f;
  --box-ink-2: #6e6e73;
  --glass: rgba(22, 22, 23, .72);
  --r-box: 0;                      /* 상자 모서리는 모두 각지게 (버튼 · 칩만 알약 모양) */
  --r-card: 0;
  --r-ctl: 0;
  --r-pill: 980px;
}

/* 밝은 바탕을 그대로 두는 곳 — 3D 뷰어 상자, 그리고 도구 화면(플래너 · 카탈로그 뷰어 · 관리자) */
.pd-config-view, .embed, .ad, .pl, .cat, .yke-modal, .rte {
  color-scheme: light;
  --ink: #1d1d1f; --ink-2: #6e6e73; --ink-3: #86868b; --gray: #7a7572;
  --page: #fff; --bg-2: #e6e4df;
  --line: rgba(0, 0, 0, .12); --line-2: rgba(0, 0, 0, .24);
  --lime-ink: #2c3a08; --logo-gray: #7a7572;
  color: var(--ink);
}
.pd-config-view, .embed { --bg: #f5f5f7; --card: #f5f5f7; }

/* ── 글자 ─────────────────────────────────────────────── */
body { background: var(--page); color: var(--ink); font-size: 17px; line-height: 1.588; letter-spacing: -.011em; }
::selection { background: var(--lime); color: var(--lime-ink); }
:focus-visible { outline-color: var(--lime-2); }
.kicker { font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--ink-3); }
.lead { font-size: clamp(19px, 1.65vw, 24px); line-height: 1.38; font-weight: 600; letter-spacing: -.012em; color: var(--ink-3); }
.note { color: var(--ink-3); }

/* ── 버튼 — 알약 모양 ─────────────────────────────────── */
.btn, html:lang(ko) .btn, html:lang(ja) .btn { height: 44px; padding: 0 22px; border-radius: var(--r-pill); font-size: 15px; font-weight: 400; letter-spacing: -.01em; text-transform: none; }
.btn-line { border-color: rgba(255, 255, 255, .44); }
.btn-line-dark { border-color: var(--line-2); }
.btn-line-dark:hover { background: var(--ink); color: var(--page); border-color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--page); }
.btn-dark:hover { background: color-mix(in srgb, var(--ink) 84%, var(--page)); }
.btn-lime { font-weight: 500; }

/* ── 헤더 — 얇은 유리 띠 ─────────────────────────────── */
.hd { color: var(--ink); }
.hd-fill, .hd[data-compact="true"] .hd-fill { opacity: 1; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.hd[data-cover="true"][data-compact="false"]:not([data-menu-open="true"]) .hd-fill { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hd[data-cover="true"][data-compact="true"]:not([data-menu-open="true"]) .hd-fill { background: var(--glass); border-color: rgba(255, 255, 255, .08); }
.hd[data-menu-open="true"] .hd-fill { background: var(--sheet); border-color: transparent; }
.hd .hd-logo, .hd[data-compact="true"] .hd-logo { align-self: center; margin-top: 0; width: 96px; height: auto; padding: 0; }
.hd-nav, .hd-tools { margin-top: 0; }
.hd-nav { gap: clamp(18px, 2.8vw, 44px); }
.hd-link, html:lang(ko) .hd-link, html:lang(ja) .hd-link { font-size: 13px; font-weight: 400; letter-spacing: -.01em; text-transform: none; color: rgba(255, 255, 255, .8); transition: color .3s var(--ease); }
.hd-link:hover, .hd-link.is-active { color: #fff; }
.hd-link::after { display: none; }
.hd-tool { color: rgba(255, 255, 255, .8); letter-spacing: 0; transition: color .3s var(--ease); }
.hd-tool:hover { color: #fff; }

/* 메가 메뉴 */
.mega { background: var(--sheet); border-bottom: 0; padding: 36px var(--pad) 40px; box-shadow: 0 40px 80px rgba(0, 0, 0, .6); }
.mega-in { gap: clamp(16px, 2.4vw, 40px); }
.mega-col { background: none; padding: 0; }
.mega-head { border-bottom: 0; padding-bottom: 14px; margin-bottom: 0; gap: 14px; }
.mega-thumb { background: var(--box); border-radius: 0; padding: 5px; }
.mega-head b { font-size: 19px; letter-spacing: -.015em; }
.mega-head em { color: var(--ink-3); }
.mega-col li a { padding: 5px 0; font-size: 13px; font-weight: 600; color: #e8e8ed; transition: color .2s; }
.mega-col li a:hover { color: #fff; }
.mega-col li i { font-weight: 400; color: var(--ink-3); }
.mega-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.mega-planner { border-bottom: 0; color: var(--lime-2); }

/* ── 첫 화면 — 영상 하나 (영상이 없으면 사진) ───────────── */
.hero { background: var(--page); }
.hero-one .hero-photo, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-one::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .38) 100%); pointer-events: none; } /* 위쪽 메뉴 · 아래쪽 브랜드 막대의 글자가 읽히게 */

/* ── 브랜드 막대 — 첫 화면 아래 (js/brands.js) ─────────────
   반투명 유리 막대 하나에 로고 셋. 로고에 커서를 올리면 그 위로 밝은 유리 렌즈가 오고, 막대 바로 아래에 대표 제품 3개가 뜸.
   로고는 투명 PNG 한 장을 두 겹으로 겹쳐 씀 — 평소에는 흰 실루엣(어두운 바탕에서도 또렷함), 커서를 올린 것은 밝은 렌즈 위에 제 색.
   (iboom 로고는 진회색이라 어두운 바탕 위에 제 색으로 두지 않음)
   첫 화면 = 화면을 가득 채운 영상. 막대는 영상 안 아래쪽에 놓이고, 대표 제품은 막대 위로 뜸 (영상을 화면 비율에 가깝게 두어 위아래가 덜 잘리게) */
.page-home { --bar-h: 124px; --bar-in: 7px; --bar-off: clamp(20px, 3.4vh, 40px); }
.hero:has(+ .brands) { height: 100svh; min-height: 420px; }
.brands { position: relative; z-index: 6; margin: calc((var(--bar-h) + var(--bar-off)) * -1) 0 var(--bar-off); }
.brands-bar { position: relative; display: flex; width: min(1020px, calc(100% - var(--pad) * 2)); height: var(--bar-h); margin-inline: auto; padding: var(--bar-in); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 24px 60px -20px rgba(0, 0, 0, .7); }
/* 유리 테두리의 빛 */
.brands-bar::after { content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .08) 36%, rgba(255, 255, 255, .04) 64%, rgba(255, 255, 255, .32)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
/* 커서를 올린 로고 위에 놓이는 밝은 유리 렌즈 */
.brands-thumb { position: absolute; top: var(--bar-in); bottom: var(--bar-in); left: var(--bar-in); width: calc((100% - var(--bar-in) * 2) / 3); background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .84)); box-shadow: inset 0 1px 0 #fff, 0 8px 22px -6px rgba(0, 0, 0, .5); transform: translateX(calc(var(--i) * 100%)); opacity: 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .25s var(--ease); }
.brands.is-open .brands-thumb { opacity: 1; }
.brand { position: relative; z-index: 1; flex: 1; min-width: 0; }
.brand-btn { display: grid; align-content: center; justify-items: center; gap: 10px; height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.brand-btn:focus-visible { outline-offset: -5px; }
.brand-logo { display: grid; place-items: center; height: calc(var(--bar-h) * .46); }
.brand-logo img { grid-area: 1 / 1; width: auto; max-width: none; height: calc(var(--bar-h) * .46); transition: opacity .3s var(--ease); }
.brand[data-brand="iboom"] .brand-logo img { height: calc(var(--bar-h) * .25); }
.brand-logo .is-mono { filter: brightness(0) invert(1); opacity: .8; }
.brand-logo .is-color { opacity: 0; }
.brand.is-on .is-mono { opacity: 0; }
.brand.is-on .is-color { opacity: 1; }
.brand-cap { font-size: 13px; font-weight: 600; line-height: 1; color: rgba(255, 255, 255, .62); transition: color .3s var(--ease); }
.brand.is-on .brand-cap { color: var(--box-ink); }
/* 대표 제품 판 — 막대 바로 아래에 뜸 */
.brands-tray { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); width: min(1020px, calc(100% - var(--pad) * 2)); margin-inline: auto; padding: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(48, 48, 51, .86); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); box-shadow: 0 -20px 80px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s .2s; }
.brands.is-open .brands-tray { opacity: 1; visibility: visible; transition: opacity .2s var(--ease), visibility 0s; }
.brands-tray-in { display: grid; }
.brands-set { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(140px, .62fr) repeat(3, minmax(0, 1fr)); gap: 10px; visibility: hidden; }
.brands-set.is-on { visibility: visible; }
.brands-set-h { display: grid; align-content: center; justify-items: start; gap: 2px; padding: 0 6px 0 16px; min-width: 0; }
.brands-set-h em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.brands-set-h b { font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.brands-set-h a { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; color: var(--lime-2); }
.brands-set-h a svg { width: 14px; height: 14px; }
.brand-card { display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: center; gap: 6px; height: 116px; padding: 8px 14px 8px 8px; background: var(--box); color: var(--box-ink); min-width: 0; }
.brand-card-img { display: grid; place-items: center; height: 100px; min-width: 0; }
.brand-card-img img { max-width: 100%; max-height: 100px; object-fit: contain; mix-blend-mode: multiply; }
.brand-card-t { display: grid; gap: 2px; min-width: 0; }
.brand-card-t b { font-size: 15px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-card-t em { font-style: normal; font-size: 12px; color: var(--box-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 페이지 편집 — "대표 제품 고르기" 버튼과 고르는 창 */
.yke-pick { position: absolute; top: -14px; left: 50%; z-index: 30; transform: translateX(-50%); height: 32px; padding: 0 14px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .7); }
.yke-pickp h3 small { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.yke-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.yke-slots li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; align-items: center; gap: 8px; min-height: 66px; padding: 6px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; }
.yke-slots li.is-empty { grid-template-columns: 1fr; justify-items: center; border: 1.5px dashed var(--line-2); background: none; color: var(--ink-3); font-size: 13px; }
.yke-slots i, .yke-list i { display: grid; place-items: center; aspect-ratio: 1; } .yke-slots img, .yke-list img { max-width: 100%; max-height: 100%; object-fit: contain; }
.yke-slots b, .yke-list b { font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yke-slots button { width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--ink-2); } .yke-slots button:hover { background: var(--bg-2); color: var(--ink); }
.yke-find { display: flex; gap: 8px; }
.yke-find input, .yke-find select { height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font-size: 14.5px; color: var(--ink); } .yke-find input { flex: 1; min-width: 0; }
.yke-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); align-content: start; gap: 6px; height: min(320px, 38vh); overflow: auto; padding: 2px; }
.yke-list button { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; text-align: left; }
.yke-list button:hover { border-color: var(--line-2); }
.yke-list button.is-on { border-color: var(--ink); background: #eef4dc; }
.yke-none { grid-column: 1 / -1; padding: 14px 6px; font-size: 13.5px; color: var(--ink-3); }

/* ── 제품 상자 — 흰색 ─────────────────────────────────── */
.mosaic { margin-top: var(--gap); }
.tile { background: var(--box); color: var(--box-ink); border-radius: var(--r-box); transition: transform .5s var(--ease); }
.tile:hover { transform: scale(1.012); }
.tile-img { padding: 8% 11% 1%; }
.tile-meta { justify-content: center; padding: 10px 22px 22px; font-size: 17px; }
.tile-meta b { font-weight: 600; letter-spacing: -.015em; }
.tile-meta em { font: 400 12px var(--font-en); color: var(--box-ink-2); }
.tile-badges { top: 18px; left: 18px; }
.badge { padding: 6px 9px; border-radius: var(--r-pill); background: var(--box-ink); color: var(--lime-2); }
.tile-add { top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--box-ink); color: #fff; }
.tile-add:hover { background: var(--lime); color: var(--lime-ink); }
.lb { background: var(--box); border-radius: var(--r-box); }
.banner { border-radius: var(--r-box); }

/* ── 홈 — 옛 구역 (값만 맞춤) ─────────────────────────── */
.statement h2, .feature h2, .promo-copy h2, .ft-cta h2 { font-weight: 600; letter-spacing: -.022em; }
.feature-dark { background: var(--card); color: var(--ink); border-radius: var(--r-box); }
.feature-light { border-radius: var(--r-box); }
.promo-copy, .promo-art { border-radius: var(--r-box); }
.promo-art { background: var(--bg); }
.stats b { letter-spacing: -.025em; }
.rail-head h2, .sec h2, .pd-details h2, .pd-always h2, .pd-video h2, .pd-models h2, .pd-config h2, .pd-long h2,
html:lang(ko) .rail-head h2, html:lang(ko) .sec h2, html:lang(ja) .sec h2 { font-weight: 600; font-size: clamp(26px, 3.2vw, 48px); line-height: 1.19; letter-spacing: -.022em; text-transform: none; }
.more { font-size: 17px; color: var(--lime-2); }
.rail-arrows button { border-radius: 50%; }
.news-card { border-radius: var(--r-card); padding: 24px; }
.news-card:hover { background: var(--bg-2); color: var(--ink); }
.news-card b, .ref-card b, .refx-meta b { font-weight: 600; letter-spacing: -.015em; }
.ref-img, .strip-item { border-radius: var(--r-box); }
.strip-item span { border-radius: var(--r-pill); }

/* ── 홈 — 아래쪽 (소개 · 시공사례 · 플래너 · 소식) ─────── */
.ah-label, .ab-kicker { font-weight: 600; font-size: 13px; letter-spacing: .06em; color: var(--ink-3); }
.ah-label i { color: var(--ink); letter-spacing: .04em; }
.ah-link { font-size: 17px; font-weight: 400; color: var(--lime-2); background-size: 0 1px; padding-bottom: 3px; }
.ah-link:hover { background-size: 100% 1px; }
.ah-h { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.1; letter-spacing: -.025em; }
.ah-h em { color: var(--ink-3); }
.ah-top-r p { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; font-weight: 600; letter-spacing: -.01em; color: var(--ink-3); }
.ah-intro { background: var(--page); margin-top: 0; padding-block: clamp(112px, 14vw, 224px); }
.ah-say { font-size: clamp(36px, 6.2vw, 96px); line-height: 1.146; letter-spacing: -.025em; }
.ah-intro-body { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.52; font-weight: 600; letter-spacing: -.01em; color: var(--ink-3); }
.ah-sec { margin-top: clamp(96px, 10vw, 144px); }
.ah-card-img { border-radius: var(--r-box); background: var(--card); }
.ah-card-img em { color: var(--box-ink); }
.ah-card-meta { margin-top: 16px; padding-inline: 4px; }
.ah-card-meta b { font-size: 17px; font-weight: 600; }
.ah-card-meta time, .ah-card-meta small { color: var(--ink-3); }
/* 시공사례 띠: 사진 위에서 커서가 "끌기" 동그라미로 바뀌던 효과는 쓰지 않음 (보통 커서 그대로, 끌어서 넘기기는 그대로 동작) */
.ah-cursor { display: none; }
.ah-car, .ah-car.is-drag { cursor: auto; } .ah-car a { cursor: pointer; }
.ah-car-btns button { background: rgba(66, 66, 69, .72); border-color: transparent; width: 44px; height: 44px; }
.ah-car-btns button:hover { background: var(--ink); border-color: var(--ink); color: #000; }
.ah-car-bar { background: rgba(255, 255, 255, .16); }
.ah-plan { margin-inline: var(--pad); }
.ah-panel { border-radius: var(--r-box); background: radial-gradient(90% 120% at 82% 50%, #26381a 0%, #171c13 44%, var(--card) 78%); padding: clamp(40px, 5.4vw, 88px) clamp(28px, 5vw, 80px); }
.ah-panel .ah-label { color: var(--ink-3); }
.ah-panel h2 { font-size: clamp(30px, 3.8vw, 56px); line-height: 1.1; }
.ah-panel p { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; font-weight: 600; letter-spacing: -.01em; color: var(--ink-3); }
.ah-panel .btn-lime { height: 44px; }
/* 플래너 칸 · 소식 상자는 메인의 목재 · 기부 칸과 같은 반투명 유리 */
.ab-plan-solo { padding-top: clamp(48px, 6vw, 96px); } /* 브랜드 아래 첫 칸. 그 아래 목재 · 기부 칸과는 칸 사이 간격만큼만 띄움 */
.ab-plan-solo + .home-duo { padding-top: var(--gap); }
.ah-car-ctrl { display: none; } /* 시공사례: 아래의 순번 · 진행 막대 · 화살표는 쓰지 않음 (사진 줄은 그대로 끌어 넘김) */
.ab-plan-solo .ah-plan { margin-top: 0; }
.ah-panel, .ah-n { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .7); }
.ah-n { position: relative; }
.ah-panel::after, .ah-n::after { content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .08) 36%, rgba(255, 255, 255, .04) 64%, rgba(255, 255, 255, .32)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.ah-panel p { color: var(--ink-2); }
/* 플래너 칸의 그림: 실제 플래너 엔진으로 만든 작은 부지가 유리 상자 위에서 천천히 돎 (js/home-planner.js 가 .ah-live 안에 그림).
   3D가 준비되기 전이나 3D를 못 쓰는 기기에서는 플래너 화면을 떠 있는 '앱 창'처럼 기울여 보여 줌 (.ah-win) */
.ah-panel { gap: clamp(20px, 3vw, 48px); padding-block: 0; padding-right: 0; align-items: stretch; }
.ah-panel-copy { align-self: center; padding-block: clamp(40px, 5.4vw, 88px); }
.ah-panel-art { position: relative; min-height: clamp(320px, 37vw, 540px); perspective: 1700px; }
.ah-win { position: absolute; left: 9%; top: 50%; display: block; width: 88%; background: #161617; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), -34px 44px 90px rgba(0, 0, 0, .6); transform: translateY(-50%) rotateY(-17deg) rotateX(6deg) rotateZ(1.2deg); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .9s ease; }
.ah-panel-art:hover .ah-win { transform: translateY(-50%) rotateY(-9deg) rotateX(3deg) rotateZ(.6deg) translateX(-3%); } /* 커서를 올리면 이쪽으로 살짝 돌아섬 */
.ah-live { position: absolute; inset: 0 0 0 -12%; display: block; opacity: 0; pointer-events: none; transition: opacity 1.4s ease; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%); mask-image: linear-gradient(90deg, transparent, #000 16%); } /* 왼쪽 끝은 글 쪽으로 번지며 사라짐(바닥 그림자가 뚝 끊기지 않게) */
.ah-live .pl-canvas { pointer-events: none; touch-action: auto; }
.ah-panel-art.is-live .ah-live { opacity: 1; }
.ah-panel-art.is-3d .ah-win { opacity: 0; visibility: hidden; transition: none; } /* 3D를 쓰는 동안에는 창 그림을 아예 보이지 않음(준비되는 동안은 빈 유리 → 부지가 나타남). 3D를 못 쓰는 기기에서만 창 그림 */
.ah-win-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #1d1d1f; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ah-win-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.ah-win-bar i:first-child { background: var(--lime); }
.ah-win-bar em { margin-left: 8px; font: 500 11px/1 var(--font-en); font-style: normal; letter-spacing: .06em; color: var(--ink-3); }
.ah-win img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .ah-panel { padding: 0; gap: 0; } .ah-panel-copy { padding: clamp(28px, 6vw, 48px); } .ah-panel-art { order: -1; min-height: 0; padding: 16px 16px 0; perspective: none; } .ah-win { position: static; transform: none; } .ah-panel-art:hover .ah-win { transform: none; }
  .ah-panel-art.is-3d { aspect-ratio: 4 / 3; padding: 0; }
  .ah-panel-art.is-3d .ah-win { position: absolute; left: 16px; top: 50%; width: calc(100% - 32px); transform: translateY(-50%); }
  .ah-live { inset: 0 0 -10%; -webkit-mask-image: linear-gradient(0deg, transparent, #000 16%); mask-image: linear-gradient(0deg, transparent, #000 16%); } }
.ah-ncard.is-product .ah-card-img { background: var(--box); color: var(--box-ink); }
.ah-ncard.is-empty .ah-card-img { background: var(--card); color: var(--ink); }

/* ── 푸터 ─────────────────────────────────────────────── */
.ft { background: var(--page); padding-top: clamp(72px, 9vw, 144px); }
.ft-cta { padding-bottom: clamp(40px, 5vw, 72px); }
.ft-cta h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.19; }
.ft-cta-btns { gap: 12px; }
.ft-cols h3 { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 10px; }
.ft-cols li a { padding: 4px 0; font-size: 12px; color: var(--ink-2); }
.ft-cols li a:hover { color: var(--ink); }
.ft-info, .ft-base { font-size: 12px; }
.ft-info { color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 20px; }
.ft-info b { color: var(--ink-2); }
.ft-legal { color: var(--ink-2); }
.fab { height: 48px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .1); background: rgba(58, 58, 61, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: var(--ink); font-size: 14px; font-weight: 400; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.fab svg { color: var(--lime-2); }

/* ── 드로어 · 검색 · 창 ───────────────────────────────── */
.scrim { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.drawer { background: var(--sheet); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-box); box-shadow: 0 30px 100px rgba(0, 0, 0, .7); }
.drawer-x, .popup-x { border-radius: 50%; }
.drawer h2 { font-weight: 600; font-size: 28px; letter-spacing: -.02em; }
.drawer > p { font-size: 15px; }
.lang-list a { border-radius: 0; }
.lang-list a.is-active { color: var(--page); }
.cart-h, .searchp-body h3, .optgroup h3 { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.cart-list { gap: 8px; }
.cart-list li { border-radius: 0; padding: 10px; }
.cart-img { background: var(--box); border-radius: 0; }
.cart-info b { font-weight: 600; }
.qty button:not(.cart-rm) { background: rgba(255, 255, 255, .1); border-radius: 50%; }
.cart-empty { border-radius: 0; }
.cart-plan, .qform-done { background: rgba(163, 198, 60, .14); color: var(--lime-2); border-radius: 0; }
.qform input:not([type=checkbox]), .qform textarea, .modal textarea, .signup input:not([type=checkbox]) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); border-radius: var(--r-ctl); color: var(--ink); }
.qform input:focus, .qform textarea:focus, .signup input:focus { outline-color: var(--lime-2); }
.qform-agree input { accent-color: var(--lime); }
.qform-err { color: #ff6961; background: rgba(255, 69, 58, .12); border-radius: var(--r-ctl); }
.mm > a, .mm summary { font-size: 28px; font-weight: 600; letter-spacing: -.02em; border-bottom: 0; padding: 10px 0; }
.mm ul { border-bottom: 0; }
.mm li a { font-size: 17px; color: var(--ink-2); }
.searchp, .searchp-bar { background: var(--sheet); }
.searchp { box-shadow: 0 40px 80px rgba(0, 0, 0, .6); }
.searchp-bar { border-bottom-color: var(--line); }
.searchp-bar input { font-weight: 600; letter-spacing: -.02em; }
.searchp-bar input::placeholder { color: var(--ink-3); }
.searchp-grid { gap: 8px; }
.sres { background: var(--bg); border-radius: 0; padding: 10px; }
.sres:hover { background: var(--bg-2); color: var(--ink); } .sres:hover em { color: var(--ink-3); }
.sres-img { background: var(--box); border-radius: 0; overflow: hidden; }
.sres b { font-weight: 600; }
.lightbox { background: rgba(0, 0, 0, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.lightbox img { border-radius: var(--r-box); }
.lightbox button { border-radius: 50%; background: rgba(66, 66, 69, .72); }
.toast { background: rgba(58, 58, 60, .92); color: var(--ink); border-radius: var(--r-pill); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.modal { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.modal-box, .popup { background: var(--bg); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-box); }
.modal-box h3, .popup h3, .signup h3 { font-weight: 600; letter-spacing: -.02em; }
.popup { box-shadow: 0 20px 80px rgba(0, 0, 0, .7); }
.yke-bar, .yke-bar .yke-start { background: #2c2c2e; }

/* ── 제품 목록 ────────────────────────────────────────── */
.page:not(.page-home) { padding-top: calc(var(--hd) + clamp(20px, 3vw, 44px)); }
.catbar { gap: 8px; margin-bottom: clamp(28px, 4vw, 56px); }
.cattab { height: 56px; padding: 0 22px 0 8px; border-radius: 0; background: var(--bg); font-size: 15px; }
.cattab:first-child { padding: 0 24px; }
.cattab i { width: 52px; height: 40px; border-radius: 0; background: var(--box); overflow: hidden; padding: 3px 5px; }
.cattab:hover { background: var(--bg-2); }
.cattab.is-active { color: var(--page); font-weight: 600; }
.cathead { margin-bottom: clamp(18px, 2.2vw, 30px); gap: 18px; }
.cathead h1 { font-weight: 600; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.1; letter-spacing: -.028em; }
.cathead p { font-size: 17px; font-weight: 600; color: var(--ink-3); }
.subbar { background: rgba(29, 29, 31, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); margin-bottom: 20px; }
.chips { gap: 6px; }
.chip { height: 36px; padding: 0 16px; border-radius: 0; background: var(--bg); font-size: 14px; }
.chip i { color: var(--ink-3); }
.chip.is-active { color: var(--page); font-weight: 600; } .chip.is-active i { color: rgba(0, 0, 0, .5); }
.chip-colors { box-shadow: none; }
/* 제품 목록 머리(큰 제목 → 대분류 → 소분류 · 필터) — 테두리 없이 평평하게. 스크롤해 내려가 화면 위에 붙으면 짙은 젖빛 띠가 됨 */
.cathead { margin-bottom: clamp(20px, 2.6vw, 36px); }
.catbar { margin-bottom: clamp(14px, 1.6vw, 22px); }
.subbar { transition: background .3s ease; }
.subbar.is-stuck { background: rgba(22, 22, 23, .86); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 1px 0 rgba(255, 255, 255, .1); }
.subbar-pin { display: block; height: 0; }
/* 한눈에 들어오게(애플 스토어 식): 상자를 걷어 내고 글자와 여백으로 정리.
   대분류 = 그림 위 · 이름 아래의 아이콘 줄(고른 것만 흰 글자 + 밑줄), 소분류 = 상자 없는 글자 줄(고른 것만 흰 판), 필터 · 정렬 = 가는 테의 작은 단추 */
.catbar { gap: clamp(18px, 2.4vw, 40px); padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cattab, .cattab:first-child { position: relative; flex-direction: column; justify-content: flex-end; gap: 10px; height: auto; padding: 0 2px 14px; background: none; font-size: 14px; font-weight: 600; color: var(--ink-3); transition: color .25s ease; }
.cattab i { width: 84px; height: 62px; padding: 6px 8px; background: var(--box); transition: transform .4s var(--ease); }
.cattab:first-child::before { content: ""; width: 84px; height: 62px; background: radial-gradient(circle, var(--ink-3) 0 3px, transparent 3.5px) center / 16px 16px, rgba(255, 255, 255, .06); background-clip: content-box, border-box; padding: 15px 26px; box-sizing: border-box; }
.cattab:hover { background: none; color: var(--ink); } .cattab:hover i { transform: translateY(-3px); }
.cattab.is-active { background: none; color: var(--ink); }
.cattab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--ink); }
.chips { gap: 2px 4px; align-items: center; }
.chip { height: 34px; padding: 0 12px; background: none; font-size: 15px; font-weight: 600; color: var(--ink-3); }
.chip i { font-size: 11px; font-weight: 400; transform: translateY(-4px); color: var(--ink-3); opacity: .8; }
.chip:hover { background: none; color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--page); }
.subbar-tools { gap: 6px; }
.subbar-tools .chip { height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.subbar-tools .chip:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.subbar-tools .chip.is-active { box-shadow: none; color: var(--page); }
.sort select { height: 32px; padding: 0 8px; background: none; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.sort select option { background: #2a2a2d; color: #f5f5f7; }
@media (max-width: 760px) { .catbar { gap: 16px; } .catbar .cattab i, .catbar .cattab:first-child::before { width: 64px; height: 48px; } .catbar .cattab:first-child::before { padding: 12px 20px; background-size: 12px 12px, auto; } .catbar .cattab, .catbar .cattab:first-child { height: auto; font-size: 12.5px; padding: 0 2px 12px; } .chip { font-size: 14px; padding: 0 10px; } }
.sort select { height: 36px; padding: 0 14px; border-radius: 0; background: var(--bg); color: var(--ink); font-size: 14px; }
.empty { border-radius: var(--r-box); }

/* ── 제품 상세 ────────────────────────────────────────── */
.page-p { padding-top: calc(var(--hd) + var(--gap)) !important; padding-bottom: 140px; }
.pd-top { gap: var(--gap); }
.pd-top:not(.has-3d) .pd-photo { max-width: none; }
.pd-photo, .pd-viewer-card { gap: var(--gap); }
.pd-shot, .pd-shot-main { background: var(--box); border-radius: var(--r-box); }
.pd-shot-main { height: clamp(340px, 46vw, 680px); max-width: none; aspect-ratio: auto; }
.pd-shot-main img { padding: 5%; }
.pd-thumbs { gap: 8px; }
.pd-thumbs button { width: 88px; height: 66px; border-radius: 0; background: var(--box); overflow: hidden; opacity: .5; transition: opacity .3s; }
.pd-thumbs button:hover { opacity: .8; }
.pd-thumbs button.is-active { opacity: 1; border-color: var(--lime); }
.pd-marks i { border-radius: var(--r-pill); background: var(--box-ink); color: #fff; padding: 6px 10px; }
.pd-top .pd-config-view, .pd-config-view { background: var(--box); border-radius: var(--r-box); }
.pd-top .pd-config-view { height: clamp(340px, 46vw, 680px); }
.pd-config-view:fullscreen { background: var(--box); border-radius: 0; }
/* 3D 화면은 색 보정(톤 매핑)을 거쳐 흰 바탕(viewer.js 기본값 #ffffff)이 #f0f0f0 으로 나오므로, 화면에서 살짝 밝혀 옆의 흰 사진 상자와 맞춤 */
.pd-config-view .viewer canvas { filter: brightness(1.065); }
.viewer-tools { top: 18px; left: 18px; gap: 6px; }
.viewer-tools button { width: 38px; height: 38px; border-radius: 50%; background: rgba(232, 232, 237, .78); }
.viewer-tools button.viewer-ar { border-radius: var(--r-pill); padding: 0 14px 0 12px; }
.viewer-mode { top: 18px; right: 18px; }
.seg { border-radius: var(--r-pill); overflow: hidden; }
.viewer-bottom { left: 20px; right: 20px; bottom: 18px; }
.viewer-ground button { border-radius: 50%; }
/* 색상 · 바닥재 고르기: 접혀 있을 때는 이름표(지금 고른 것 + 이름)만, 누르면 종류가 옆으로 펼쳐짐 */
.viewer-opts { justify-items: start; }
.viewer-ground { display: flex; align-items: center; gap: 8px; }
.viewer-ground .viewer-ground-h { flex: none; display: inline-flex; align-items: center; gap: 8px; width: auto; height: 38px; padding: 0 12px 0 5px; border: 1px solid rgba(0, 0, 0, .1); border-radius: var(--r-pill); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .25); font-size: 12.5px; color: #6e6e73; cursor: pointer; transition: background .2s, box-shadow .2s; }
.viewer-ground .viewer-ground-h:hover { background: #fff; }
.viewer-ground-h b { font-weight: 600; color: #1d1d1f; } .viewer-ground-h b:empty { display: none; }
.viewer-ground-h svg { width: 9px; height: 9px; color: #86868b; transition: transform .3s var(--ease); }
.viewer-ground.is-open .viewer-ground-h svg { transform: rotate(180deg); }
.viewer-ground-cur { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.viewer-ground-cur.is-none { background: conic-gradient(#474c48, #a8aaab, #f4f5f1, #f2b90f, #1e4a38, #b3a084, #1b1b1c, #474c48); }
.viewer-ground-cur.is-off { background: #fff linear-gradient(135deg, transparent 46%, #86868b 46% 54%, transparent 54%); }
.viewer-ground-cur.is-tex { background: url(../img/ground/thumbs.jpg) 0 0 / 900% 100% no-repeat; }
.viewer-ground-list { display: none; padding: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .08); min-width: 0; }
.viewer-ground.is-open .viewer-ground-list { display: flex; }
.viewer-ground.is-open .viewer-ground-list button { animation: vgPop .34s var(--ease) backwards; }
.viewer-ground.is-open .viewer-ground-list button:nth-child(2) { animation-delay: .03s; } .viewer-ground.is-open .viewer-ground-list button:nth-child(3) { animation-delay: .06s; } .viewer-ground.is-open .viewer-ground-list button:nth-child(4) { animation-delay: .09s; } .viewer-ground.is-open .viewer-ground-list button:nth-child(5) { animation-delay: .12s; } .viewer-ground.is-open .viewer-ground-list button:nth-child(n + 6) { animation-delay: .15s; }
/* 좁은 화면: 펼친 종류를 이름표 아랫줄에 놓고, 한 줄에 다 안 들어가면 다음 줄로 넘겨 밀지 않아도 전부 보이게 */
@media (max-width: 760px) {
  /* 3D 모델을 가리지 않게 왼쪽 가장자리에 바짝 붙임: 펼친 종류는 이름표 위로, 세로로 좁게(두 줄) 쌓임 */
  .viewer-bottom { left: 8px; bottom: 10px; }
  .viewer-ground { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
  .viewer-ground-list { flex-direction: column; flex-wrap: wrap; align-content: flex-start; max-height: 168px; overflow: visible; border-radius: 20px; padding: 4px; gap: 4px; }
  .viewer-ground .viewer-ground-list button, .viewer-ground-pick { width: 28px; height: 28px; }
  .viewer-ground .viewer-ground-h { height: 34px; padding: 0 10px 0 4px; gap: 6px; font-size: 12px; } .viewer-ground-cur { width: 24px; height: 24px; }
  @keyframes vgPop { from { opacity: 0; transform: translateY(8px) scale(.6); } }
}
/* 맨 끝의 직접 고르기 칸: 무지개 동그라미(고른 뒤에는 가운데에 그 색). 누르면 브라우저의 정밀 색상 고르기가 열림 */
.viewer-ground-pick { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, var(--pick, #fff) 0 42%, transparent 44%), conic-gradient(#f33, #fc0, #3c3, #0cf, #36f, #c3f, #f33); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); cursor: pointer; overflow: hidden; }
.viewer-ground-pick input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.viewer-ground-pick.is-active { box-shadow: inset 0 0 0 2px #1d1d1f, inset 0 0 0 3px #fff; }
.viewer-ground.is-open .viewer-ground-pick { animation: vgPop .34s var(--ease) .18s backwards; }
@keyframes vgPop { from { opacity: 0; transform: translateX(-10px) scale(.6); } }
.viewer-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.pd-key-note { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.viewer-2d { background: var(--box); }
.crumbs { font-size: 12px; padding-block: clamp(28px, 3.4vw, 48px) 10px; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.pd-title { border-bottom: 0; padding-bottom: clamp(40px, 6vw, 96px); align-items: flex-end; }
.pd-title h1 { font-weight: 600; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.1; letter-spacing: -.028em; margin-bottom: 14px; }
.pd-title .lead { max-width: 34em; margin-bottom: 0; }
/* 제품번호 아래 한눈에 보는 줄: 분류는 작은 연두 꼬리표, 규격은 흰색으로 굵게, 자재는 색 점이 달린 칩 */
.pd-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(14px, 1.6vw, 24px); }
.pd-key-cat { padding: 6px 12px; font-size: 13px; font-weight: 600; line-height: 1; color: var(--lime-2); background: rgba(163, 198, 60, .14); border-radius: var(--r-pill); }
.pd-key-size { font: 600 clamp(20px, 2vw, 30px)/1.2 var(--font-en); letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pd-key-size small { margin-left: 2px; font-size: .6em; font-weight: 600; color: var(--ink-3); }
.pd-key-mats { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-key-mats li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px; font-size: clamp(14px, 1.1vw, 16px); font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); border-radius: var(--r-pill); }
.pd-key-mats i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
/* 모델 선택: 옆으로 넘칠 때 마우스로 잡아 끌기 */
.models-row.is-drag { cursor: grab; user-select: none; -webkit-user-select: none; }
.models-row.is-dragging { cursor: grabbing; }
.models-row.is-dragging .model { pointer-events: none; }
.models-row .model img { -webkit-user-drag: none; }
.pd-title:has(+ .pd-spec) { padding-bottom: clamp(24px, 3vw, 44px); }
/* 제품 이름 아래의 사양 상자 — 다른 칸들과 같은 반투명 유리. (예전의 "상세 정보와 다운로드" 구역을 대신함) */
.pd-spec { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 3vw, 48px); margin-bottom: clamp(40px, 6vw, 96px); padding: clamp(22px, 2.8vw, 44px); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .7); }
.pd-spec::after { content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .08) 36%, rgba(255, 255, 255, .04) 64%, rgba(255, 255, 255, .32)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.pd-spec > div:only-child { max-width: 860px; }
.pd-spec h3 { margin-bottom: 8px; font-size: 19px; font-weight: 600; letter-spacing: -.012em; text-transform: none; color: var(--ink-2); }
.pd-spec .facts > div:last-child, .pd-spec .certs li:last-child, .pd-spec .dls li:last-child a { border-bottom: 0; padding-bottom: 0; }
.pd-spec .facts dt { color: var(--ink-2); }
.pd-spec .matchip { background: rgba(255, 255, 255, .1); }
.pd-title-btns { gap: 10px; }
.pd-models, .pd-config { border-color: var(--line); }
.model { border-radius: var(--r-card); padding: 10px 16px 10px 10px; }
.model-img { background: var(--box); border-radius: 0; overflow: hidden; }
.model b { font: 600 14px var(--font-en); }
.model.is-active { color: var(--page); } .model.is-active em { color: rgba(0, 0, 0, .56); }
.optgroup { gap: 6px; }
.optrow { border-radius: var(--r-ctl); height: 50px; font-size: 15px; }
.optrow.is-active { color: var(--page); font-weight: 600; }
.optrow .sw, .swatch { border-radius: 50%; border-color: rgba(255, 255, 255, .2); }
.swatches { border-radius: var(--r-ctl); gap: 8px; padding: 12px; }
.swatch.is-active::after { border-radius: 50%; }
.pd-details, .pd-always, .pd-video, .pd-related { padding-block: clamp(48px, 6vw, 96px); }
.pd-details { border-top: 1px solid var(--line); }
.pd-details h2, .pd-always h2, .pd-video h2 { margin-bottom: clamp(28px, 3.4vw, 48px); }
.pd-cols > div:only-child { max-width: 860px; }
.pd-cols h3 { font-size: 19px; font-weight: 600; letter-spacing: -.012em; text-transform: none; color: var(--ink-3); margin-bottom: 8px; }
.facts > div, .certs li, .dls li a { padding: 16px 0; border-bottom-color: var(--line); font-size: 17px; }
.facts dt { color: var(--ink-3); font-weight: 600; }
.certs svg, .certgrid svg { color: var(--lime-2); }
.dls li a { color: var(--lime-2); }
.matchip { font-size: 14px; padding: 5px 13px 5px 7px; border-radius: var(--r-pill); background: var(--bg); border-color: transparent; }
.matchip i { border-color: rgba(255, 255, 255, .24); }
.video { border-radius: var(--r-box); overflow: hidden; }
.ral { background: var(--card); border-radius: var(--r-box); padding: 28px 0 24px 28px; margin-bottom: var(--gap); }
.ral-head b { font-weight: 600; font-size: 21px; }
.ral-row span { border-radius: 0; }
.always > div { background: var(--card); border-radius: var(--r-box); padding: 30px 28px 34px; }
/* "모델 선택"의 칸과 "예건 제품의 기본" 상자도 같은 반투명 유리 (고른 모델은 흰색 그대로) */
.model:not(.is-active), .always > div { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .3); }
.model:not(.is-active):hover { background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .1)); }
.model:not(.is-active)::after, .always > div::after { content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .08) 36%, rgba(255, 255, 255, .04) 64%, rgba(255, 255, 255, .32)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.always p { color: var(--ink-2); }
.always b { font-weight: 600; font-size: 21px; letter-spacing: -.015em; margin-bottom: 8px; }
.always p { font-size: 17px; font-weight: 600; line-height: 1.42; color: var(--ink-3); }
/* 아래쪽 띠 — 화면에 떠 있는 유리 캡슐 */
.pd-bar { inset: auto 0 18px 0; width: min(900px, calc(100% - 32px)); margin-inline: auto; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-pill); background: rgba(58, 58, 61, .72); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 20px 60px rgba(0, 0, 0, .55); transform: translateY(calc(100% + 40px)); }
.pd-bar-in { padding: 9px 9px 9px 28px; }
.pd-bar-name em { color: var(--ink-3); }
.pd-bar-name b { font-weight: 600; font-size: 17px; }
.pd-bar-btns { gap: 8px; }
.pd-bar-ask { font-size: 14px; text-decoration: none; color: var(--lime-2); margin-right: 14px; }
.pd-bar-ask:hover { text-decoration: underline; }

/* ── 시공사례 · 회사 · 지원 · 소식 ─────────────────────── */
.phead h1, .refhead h1 { font-weight: 600; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.14; letter-spacing: -.025em; }
.refgrid { gap: 40px var(--gap); }
.refx-img, .refhero button, .refshots button, .about-photo img, .feature-img, .newsd-img img { border-radius: var(--r-box); }
.refshots { gap: var(--gap); }
.refx-meta em, .ref-card em, .refnext-link em { color: var(--ink-3); }
.refnext-link b { font-weight: 600; }
.about3 p, .biz-card p, .sup p, .loc p, .contact p, .faq p { color: var(--ink-2); }
.biz-card, .sup, .loc > div { border-radius: var(--r-box); }
.biz-card { padding: 16px 18px 26px; }
.biz-img { background: var(--box); border-radius: 0; padding: 8px; }
.biz-card b, .sup b, .loc h3 { font-weight: 600; letter-spacing: -.015em; }
.certgrid li, .partners li { border-radius: 0; }
.sec-dark { background: var(--card); border-radius: var(--r-box); }
.sec-dark p { color: var(--ink-2); }
.factory { background: var(--line); border-radius: 0; overflow: hidden; } .factory li { background: var(--bg); }
.sup { padding: 28px 26px 32px; }
.sup:hover { background: var(--bg-2); color: var(--ink); } .sup:hover p { color: var(--ink-2); }
.sup svg { color: var(--lime-2); }
.faq details { border-color: var(--line); border-radius: 0; background: var(--card); }
.faq summary { padding: 18px 22px; font-size: 17px; font-weight: 600; } .faq p { padding: 0 22px 20px; font-size: 17px; }
.newslist > a { border-top-color: var(--line); } .newslist h3 { font-weight: 600; letter-spacing: -.015em; }
.timeline li { border-top-color: var(--line); }
.rte-out h2 { font-weight: 600; }
.rte-out img { border-radius: 0; }

/* ── 회사소개 ─────────────────────────────────────────── */
.ab-vision { background: var(--page); }
.ab-sub, .ab-vbody { font-weight: 600; color: var(--ink-3); line-height: 1.52; }
.ab-ch { --tone: var(--page) !important; color: var(--ink); }
.ab-ch.is-light { color: var(--ink); } .ab-ch.is-light .ab-no { color: var(--lime-2); }
.ab-card { background: var(--card); border: 1px solid rgba(255, 255, 255, .06); border-radius: 0; box-shadow: none; }
.ab-stats, .ab-area, .ab-now, .ab-ip, .ab-loc { border-color: var(--line-2); }
.ab-stats li:first-child b { color: var(--lime-2); }
.ab-rows dd { font-weight: 600; }
.ab-by, .ab-loc-grid em { color: var(--lime-2); background: rgba(163, 198, 60, .14); border-radius: var(--r-pill); }
.ab-ph { border-radius: 0; }
.ab-ph figcaption { background: var(--card); border-top-right-radius: 0; }
.ab-dec li::before { background: var(--card); border-color: var(--ink-3); }
.ab-certs span { border-radius: 0; border-color: transparent; }
.ab-node::before { background: var(--bg); border-color: rgba(255, 255, 255, .4); }
.ab-node-ceo { color: #000; }
.ab-node-ceo::before { background: var(--ink); border-color: var(--ink); }
.ab-node-qm::before { background: var(--lime); border-color: var(--lime); }
.ab-div:hover .ab-node { color: var(--lime-ink); }
.ab-div ul li { border-radius: 0; }
/* 글 뒤의 등고선 · 흐름선 그림, 맺음 글 아래의 사선, 아래쪽 두 상자의 연두 사선은 쓰지 않음. 상자 색은 페이지 바탕과 같게 */
.ab-contour, .ab-flow, .ab-vision-art, .ab-slash, .ab-tiles a::before { display: none; }
.ab-card, .ab-ph figcaption, .ab-dec li::before, .ab-node:not(.ab-node-ceo):not(.ab-node-qm)::before { background: var(--page); }
.ab-div ul li { background: var(--page); border: 1px solid var(--line); }
/* 큰 상자는 첫 화면 브랜드 막대와 같은 반투명 유리 — 뒤의 사진이 흐리게 비침. 글이 읽히도록 어두운 막을 한 겹 깖 */
.ab-card { border: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05)), rgba(29, 29, 31, .5); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 24px 60px -20px rgba(0, 0, 0, .7); }
.ab-card::after { content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .08) 36%, rgba(255, 255, 255, .04) 64%, rgba(255, 255, 255, .32)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
/* 유리 상자 안의 작은 상자들도 옅은 유리 면으로 */
.ab-div ul li, .ab-node:not(.ab-node-ceo):not(.ab-node-qm)::before { background: rgba(255, 255, 255, .07); }
.ab-div ul li { border-color: rgba(255, 255, 255, .1); }
.ab-ph figcaption { background: rgba(29, 29, 31, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ab-dec li::before { background: #2a2a2d; }
.ab-tiles { gap: var(--gap); padding-inline: var(--pad); }
.ab-tiles a { background: #000; border-radius: var(--r-box); }

/* ── 작은 화면 ────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hd .hd-logo, .hd[data-compact="true"] .hd-logo { width: 88px; }
  .pd-top .pd-config-view { height: 86vw; }
}
@media (max-width: 640px) {
  :root { --gap: 8px; }
  body { font-size: 16px; }
  .tile-meta { align-items: center; padding: 6px 12px 16px; font-size: 14px; }
  .tile-add { top: 8px; right: 8px; width: 30px; height: 30px; background: rgba(0, 0, 0, .06); color: var(--box-ink); }
  .tile-badges { top: 12px; left: 12px; }
  /* 휴대폰: 영상을 자르지 않고 16:9 그대로 보여 주고, 막대는 영상 아래에 따로 둠. 대표 제품은 막대 아래로 뜸 */
  .page-home { --bar-h: 88px; --bar-in: 5px; }
  .hero:has(+ .brands) { height: auto; min-height: 0; aspect-ratio: 16 / 9; margin-top: var(--hd); }
  .brands { margin: var(--gap) 0 0; }
  /* 휴대폰: 막대 전체를 밝은 젖빛 유리 한 장으로 — 로고는 원래 색 (iboom 의 진회색 로고도 묻히지 않음). 고른 브랜드는 PC와 같이 흰 렌즈가 그 자리로 미끄러져 옴 */
  .brands-bar { background: linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .46)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 14px 36px -14px rgba(0, 0, 0, .8); }
  .brands-bar::after { display: none; }
  .brand + .brand::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(0, 0, 0, .12); }
  .brand-logo .is-mono { opacity: 0; }
  .brand-logo .is-color { opacity: 1; }
  .brand-cap { color: #3a3a3c; }
  /* 고른 브랜드 표시: 빛을 머금은 투명한 유리 렌즈 — 위는 밝고 아래로 비침. 살짝 튕기듯 미끄러져 옴 */
  .brands-thumb { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .38)); -webkit-backdrop-filter: blur(10px) brightness(1.3) saturate(160%); backdrop-filter: blur(10px) brightness(1.3) saturate(160%); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .75), 0 10px 22px -10px rgba(0, 0, 0, .3); overflow: hidden; transition: transform .6s cubic-bezier(.22, 1.2, .32, 1), opacity .4s var(--ease); }
  .brands-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .85) 48%, transparent 62%); transform: translateX(-120%); }
  .brands.is-open .brands-thumb::after { animation: brandSheen .9s var(--ease) .1s; } /* 나타날 때 빛이 한 번 스침 */
  @keyframes brandSheen { to { transform: translateX(120%); } }
  .brands-tray { top: calc(100% + 8px); bottom: auto; }
  .brand-btn { gap: 7px; } .brand-cap { font-size: 11px; }
  .brands-tray { padding: 10px; }
  .brands-set { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .brands-set-h { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; padding: 4px 8px 2px; }
  .brands-set-h b { font-size: 17px; } .brands-set-h a { margin: 0 0 0 auto; font-size: 13px; }
  .brand-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 72px auto; height: auto; gap: 4px; padding: 8px 8px 10px; text-align: center; }
  .brand-card-img { height: 72px; } .brand-card-img img { max-height: 72px; }
  .brand-card-t b { font-size: 12.5px; } .brand-card-t em { font-size: 11px; }
  .yke-slots { grid-template-columns: minmax(0, 1fr); }
  .drawer { border-radius: var(--r-box) var(--r-box) 0 0; }
  .drawer-menu { border-radius: 0; border: 0; }
  .cattab { height: 48px; } .cattab i { width: 44px; height: 34px; }
  .subbar { flex-wrap: nowrap; } /* 칩 줄이 화면 폭을 넘겨 페이지 전체가 옆으로 밀리던 것을 막음 (칩 줄 안에서만 옆으로 넘김) */
  .pd-bar { inset: auto 0 8px 0; width: calc(100% - 16px); border-radius: 26px; }
  .pd-bar-in { padding: 8px; }
}