/* ─────────────────────────────────────────────────────────
   YEKUN — 사이트 스타일
   레이아웃·간격 기준: Vestre / 언어별 타이포그래피 구조: Kompan
   ───────────────────────────────────────────────────────── */
:root {
  --ink: #2e2c2a;
  --ink-2: #5d5a56;
  --ink-3: #8b8782;
  --gray: #7a7572;
  --lime: #a3c63c;
  --lime-2: #b4d84a;
  --lime-ink: #2c3a08;
  --page: #fff;      /* 페이지 바탕 — 모든 페이지 흰색 */
  --bg: #f4f3f0;     /* 옅은 회색 면 (칩 · 표 · 안쪽 면) */
  --bg-2: #e6e4df;
  --card: #f4f3f0;   /* 흰 바탕 위에 놓이는 상자 (제품 칸 · 카드) */
  --line: rgba(46, 44, 42, .14);
  --line-2: rgba(46, 44, 42, .28);
  --pad: clamp(16px, 2.5vw, 36px);
  --gap: 4px;
  --hd: 132px;
  --hd-c: 64px;
  --ease: cubic-bezier(.3, .6, 0, 1);
  --font-en: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Pretendard Variable", Pretendard, "Helvetica Neue", "Segoe UI", sans-serif;
  --font-ko: -apple-system, BlinkMacSystemFont, "SF Pro KR", "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;
  --font-ja: -apple-system, BlinkMacSystemFont, "SF Pro JP", "Hiragino Sans", "Pretendard JP Variable", "Pretendard JP", "Yu Gothic", sans-serif;
  --font: var(--font-ko);
  --display: var(--font);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}
html:lang(en) { --font: var(--font-en); }
html:lang(ja) { --font: var(--font-ja); }
html:lang(ko) { --font: var(--font-ko); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 16px/1.55 var(--font); letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }
html:lang(ja) body { line-break: strict; overflow-wrap: anywhere; letter-spacing: .01em; }
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--lime); color: var(--lime-ink); }

.wrap { padding-inline: var(--pad); }
.kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mono { font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0; }
.lead { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.45; }
.note { font-size: 12px; color: var(--ink-3); }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 0;
  font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
html:lang(ko) .btn, html:lang(ja) .btn { letter-spacing: 0; font-size: 14px; }
.btn svg { width: 16px; height: 16px; }
.btn small { font-size: 11px; opacity: .6; }
.btn-line { border-color: var(--fg, currentColor); color: var(--fg, currentColor); }
.btn-line:hover { background: var(--fg, currentColor); color: var(--bg, #fff); }
.banner .btn-line:hover, .hero .btn-line:hover { color: var(--bg); }
.btn-line-dark { border-color: var(--line-2); background: transparent; }
.btn-line-dark:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--lime-2); }
.btn-dark:hover { background: #000; }
.btn-lime { background: var(--lime); color: var(--lime-ink); }
.btn-lime:hover { background: var(--lime-2); }
.btn-block { width: 100%; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line-2); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 헤더 ─────────────────────────────────────────────── */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hd); transition: height .32s var(--ease), color .32s var(--ease); }
.hd-fill { position: absolute; inset: 0; background: rgba(255, 255, 255, .8); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .32s var(--ease); }
.hd[data-compact="true"] { height: var(--hd-c); }
.hd[data-compact="true"] .hd-fill, .hd[data-menu-open="true"] .hd-fill { opacity: 1; }
.hd[data-menu-open="true"] .hd-fill { background: var(--page); }
.hd-in { position: relative; height: 100%; display: flex; align-items: center; gap: clamp(20px, 4vw, 64px); padding-inline: var(--pad); }
.hd-logo {
  position: relative; align-self: flex-start; flex: none; margin-top: 22px;
  width: 136px; height: 88px; background: transparent; display: flex; align-items: flex-end; padding: 0 0 15px;
  transition: all .32s var(--ease);
}
.logo-svg { display: block; width: 100%; height: auto; }
.hd[data-compact="true"] .hd-logo { margin-top: 12px; width: 120px; height: 40px; padding: 0 0 9px; background: transparent; }
.hd-nav { display: flex; gap: clamp(18px, 3.4vw, 52px); margin-top: -34px; transition: margin .32s var(--ease); }
.hd[data-compact="true"] .hd-nav, .hd[data-compact="true"] .hd-tools { margin-top: 0; }
.hd-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
html:lang(ko) .hd-link, html:lang(ja) .hd-link { font-size: 14px; letter-spacing: 0; font-weight: 500; }
.hd-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.hd-link:hover::after, .hd-link.is-active::after { transform: scaleX(1); }
.hd-link svg { opacity: .7; }
.hd-tools { margin-left: auto; display: flex; align-items: center; gap: clamp(8px, 1.6vw, 22px); margin-top: -34px; transition: margin .32s var(--ease); }
.hd-tool { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; min-width: 32px; justify-content: center; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.hd-count { position: absolute; top: 2px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--lime); color: var(--lime-ink); font: 600 10px/16px var(--font-en); text-align: center; font-style: normal; }
.hd-burger { display: none; }
.hd[data-cover="true"][data-compact="false"]:not([data-menu-open="true"]) { color: #fff; }
.hd[data-cover="true"][data-compact="true"]:not([data-menu-open="true"]) { color: #fff; }
.hd[data-cover="true"][data-compact="true"]:not([data-menu-open="true"]) .hd-fill { background: rgba(30, 30, 28, .35); border-color: rgba(255, 255, 255, .14); }
.hd[data-cover="true"]:not([data-menu-open="true"]) .hd-logo { --logo-gray: #fff; }

/* 메가 메뉴 */
.mega { position: absolute; inset: 100% 0 auto 0; background: var(--page); border-bottom: 1px solid var(--line); padding: 28px var(--pad) 24px; color: var(--ink); animation: drop .32s var(--ease); max-height: calc(100vh - var(--hd-c)); overflow: auto; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.mega-in { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.mega-col { background: var(--card); padding: 14px 16px 18px; }
.mega-head { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.mega-thumb { width: 64px; height: 52px; flex: none; }
.mega-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mega-head b { display: block; font-weight: 600; font-size: 16px; }
.mega-head em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); }
.mega-col li a { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--ink-2); }
.mega-col li a:hover { color: var(--ink); }
.mega-col li i { font-style: normal; font-size: 11px; color: var(--ink-3); font-family: var(--font-en); }
.mega-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 16px; flex-wrap: wrap; }
.mega-planner { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }

/* ── 히어로 ───────────────────────────────────────────── */
.page { min-height: 70vh; }
.page:not(.page-home) { padding-top: calc(var(--hd) + 8px); }
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #23402f; }
.hero-slide { position: absolute; inset: 0; background: var(--bg); color: var(--fg); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 0s 1.1s; }
.hero-slide.is-on { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease); }
.art { position: absolute; inset: -4%; width: 108%; height: 108%; animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(-1.5%, -1%, 0) rotate(-.6deg) scale(1.02); } to { transform: translate3d(1.5%, 1.2%, 0) rotate(.8deg) scale(1.08); } }
.hero-copy { position: relative; text-align: center; padding: 0 var(--pad); display: grid; justify-items: center; gap: 10px; }
.hero-kicker { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.hero-word { font: 600 clamp(64px, 15.5vw, 236px)/.86 var(--display); letter-spacing: -.01em; display: flex; flex-wrap: wrap; justify-content: center; }
.hero-word span { display: inline-block; transform: translateY(40%); opacity: 0; transition: transform .9s var(--ease), opacity .9s var(--ease); transition-delay: calc(var(--k) * 45ms + 150ms); }
.hero-slide.is-on .hero-word span { transform: none; opacity: 1; }
.hero-sub { font-size: clamp(15px, 1.3vw, 19px); margin: 14px 0 12px; }
.hero-dots { position: absolute; left: var(--pad); bottom: 28px; display: flex; gap: 8px; z-index: 2; }
.hero-dots button { width: 44px; height: 24px; display: grid; align-items: center; }
.hero-dots i { display: block; height: 2px; background: rgba(255, 255, 255, .35); }
.hero-dots .is-on i { background: #fff; }

/* ── 타일 그리드 ──────────────────────────────────────── */
.mosaic, .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); grid-auto-flow: dense; }
.mosaic { padding-top: var(--gap); margin-top: clamp(16px, 3vw, 40px); }
.tile { position: relative; display: flex; flex-direction: column; background: var(--card); aspect-ratio: 46 / 39; overflow: hidden; }
.tile-img { flex: 1; min-height: 0; display: grid; place-items: center; padding: 7% 9% 2%; }
.tile-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--ease); }
.tile:hover .tile-img img { transform: scale(1.045); }
.tile-meta { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px 13px; font-size: 14px; min-width: 0; }
.tile-meta b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-meta em { font: 400 11.5px var(--mono); color: var(--ink-3); white-space: nowrap; font-style: normal; }
.tile-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 4px; z-index: 1; }
.badge { font: 600 10px/1 var(--font-en); letter-spacing: .06em; padding: 5px 6px; background: var(--ink); color: var(--lime-2); font-style: normal; display: inline-flex; align-items: center; }
.badge-ic { padding: 3px 4px; } .badge-ic svg { width: 11px; height: 11px; fill: currentColor; }
.tile-add { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; background: #fff; opacity: 0; transform: translateY(-4px); transition: all .25s var(--ease); cursor: pointer; }
.tile:hover .tile-add, .tile-add:focus-visible { opacity: 1; transform: none; }
.tile-add:hover { background: var(--lime); }
.banner { position: relative; grid-column: span 2; background: var(--bg); color: var(--fg); overflow: hidden; display: grid; place-items: center; min-height: 260px; }
.banner-word { position: relative; font: 600 clamp(48px, 9.5vw, 148px)/.9 var(--display); letter-spacing: -.01em; text-align: center; padding: 0 20px; }
.banner .btn { position: absolute; right: 16px; bottom: 16px; }

/* ── 홈 로고 칸 — 3칸 중 가운데 1칸에 브랜드 로고만 (원본 그대로) ── */
.lb { grid-column: 2; display: grid; place-items: center; background: var(--card); }
.lb img { width: 54%; height: auto; user-select: none; }
.lb-iboom img { width: 46%; }

/* ── 홈 섹션 ──────────────────────────────────────────── */
.statement { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 120px); padding-block: clamp(56px, 7vw, 104px); align-items: start; }
.statement h2 { font-weight: 400; font-size: clamp(27px, 3vw, 44px); line-height: 1.18; letter-spacing: -.02em; }
.statement p { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; margin-bottom: 24px; max-width: 40em; }
.strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip-item { position: relative; flex: none; height: clamp(300px, 46vw, 600px); scroll-snap-align: center; overflow: hidden; }
.strip-item:nth-child(odd) { aspect-ratio: 4 / 3; } .strip-item:nth-child(even) { aspect-ratio: 3 / 4; }
.strip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.strip-item:hover img { transform: scale(1.04); }
.strip-item span { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: #fff; background: rgba(30, 30, 28, .55); padding: 5px 9px; backdrop-filter: blur(6px); }
.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; padding-block: clamp(64px, 9vw, 136px); align-items: start; }
.feature-dark { background: var(--ink); color: var(--lime-2); padding: clamp(24px, 4vw, 64px); padding-right: clamp(24px, 8vw, 128px); margin-top: clamp(0px, 5vw, 80px); display: grid; gap: 14px; }
.feature-light { background: var(--bg-2); padding: clamp(24px, 3.2vw, 52px); margin-left: clamp(-80px, -5vw, 0px); display: grid; gap: 14px; position: relative; }
.feature-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.feature h2 { font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -.01em; }
.feature p { max-width: 30em; font-size: 16px; }
.feature-light p { color: var(--ink-2); }
.sq { flex: none; width: 34px; height: 34px; border: 1px solid currentColor; display: grid; place-items: center; transition: all .25s var(--ease); }
a:hover > .feature-head .sq { background: currentColor; } a:hover > .feature-head .sq svg { stroke: var(--ink); }
.feature-light:hover .sq svg { stroke: #fff !important; }
.feature-img { margin-top: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #0002; }
.feature-light .feature-img { aspect-ratio: 16 / 11; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 10px; }
.stats b { display: block; font: 600 clamp(24px, 2.6vw, 40px)/1.1 var(--display); letter-spacing: -.02em; }
.stats span { font-size: 12px; color: var(--ink-2); }
.stats-xl { padding-block: clamp(32px, 5vw, 72px); border-block: 1px solid var(--line); margin-block: clamp(32px, 5vw, 72px); }
.stats-xl b { font-size: clamp(34px, 5.4vw, 84px); }
.promo { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--gap); margin-bottom: clamp(56px, 8vw, 120px); }
.promo-copy { background: var(--card); padding: clamp(24px, 4vw, 64px); display: grid; align-content: center; gap: 16px; justify-items: start; }
.promo-copy h2 { font-weight: 400; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.16; letter-spacing: -.02em; }
.promo-copy p:not(.kicker) { color: var(--ink-2); max-width: 32em; }
.promo-art { background: #dfe7d2; display: grid; place-items: center; overflow: hidden; min-height: 320px; }
.promo-art svg { width: 100%; height: auto; max-width: 860px; transition: transform .9s var(--ease); }
.promo-art:hover svg { transform: scale(1.03); }
.rail { margin-bottom: clamp(48px, 7vw, 104px); }
.rail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.rail-head h2, .sec h2, .pd-details h2, .pd-always h2, .pd-video h2, .pd-models h2, .pd-config h2 { font-weight: 400; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.01em; text-transform: uppercase; }
html:lang(ko) .rail-head h2, html:lang(ko) .sec h2, html:lang(ja) .sec h2 { font-weight: 500; }
.more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); } .more:hover svg { transform: translateX(4px); }
.rail-arrows { display: flex; gap: 4px; } .rail-arrows button { width: 40px; height: 40px; display: grid; place-items: center; } .rail-arrows button:hover { background: var(--card); }
.news-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.news-card { background: var(--card); padding: 18px 18px 22px; display: grid; gap: 28px; align-content: space-between; min-height: 150px; transition: background .25s; }
.news-card:hover { background: var(--ink); color: #fff; }
.news-card time { font: 400 12px var(--mono); color: var(--ink-3); }
.news-card b { font-weight: 400; font-size: 18px; line-height: 1.3; }
.refs-row { display: flex; gap: 8px; overflow-x: auto; padding-inline: var(--pad); scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); scrollbar-width: thin; padding-bottom: 14px; }
.ref-card { flex: none; width: clamp(240px, 24vw, 340px); scroll-snap-align: start; display: grid; gap: 4px; }
.ref-img { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 8px; background: var(--bg-2); }
.ref-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ref-card:hover img { transform: scale(1.05); }
.ref-card b { font-weight: 400; font-size: 17px; line-height: 1.3; }
.ref-card em { font: 400 11px var(--mono); letter-spacing: .03em; color: var(--ink-3); text-transform: uppercase; font-style: normal; }

/* ── 푸터 ─────────────────────────────────────────────── */
.ft { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) var(--pad) 84px; }
.ft-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.ft-cta h2 { font-weight: 400; font-size: clamp(22px, 2.3vw, 32px); letter-spacing: -.01em; }
.ft-cta-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ft-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 40px; }
.ft-cols h3 { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.ft-cols li a { display: inline-block; padding: 5px 0; font-size: 14px; color: var(--ink-2); }
.ft-cols li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.ft-info { font-size: 12.5px; color: var(--ink-2); display: grid; gap: 2px; padding-bottom: 28px; }
.ft-info b { color: var(--ink); font-weight: 600; }
.ft-base { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; font-size: 13px; }
.ft-logo { width: 132px; }
.ft-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.ft-legal a:hover { text-decoration: underline; }
.ft-copy { color: var(--ink-3); margin-left: auto; }
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: var(--ink); color: var(--lime-2); font-size: 13px; font-weight: 500; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); transition: transform .3s var(--ease); }
.fab:hover { transform: translateY(-2px); }
.fab svg { width: 18px; height: 18px; }
.page-p ~ .fab { display: none; }

/* ── 드로어 · 검색 · 라이트박스 ─────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(30, 30, 28, .38); backdrop-filter: blur(3px); animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 8px; right: 8px; bottom: 8px; z-index: 80; width: min(460px, calc(100vw - 16px)); background: #fff; padding: 28px 28px 24px; overflow: auto; box-shadow: 0 20px 80px rgba(0, 0, 0, .25); animation: slide .4s var(--ease); }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.drawer-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; }
.drawer-x:hover { background: var(--bg); }
.drawer h2 { font-weight: 500; font-size: 22px; letter-spacing: -.01em; margin-bottom: 6px; padding-right: 40px; }
.drawer > p { color: var(--ink-2); font-size: 14px; }
.drawer-mark { display: block; width: 96px; margin-bottom: 26px; }
.lang-list { margin-top: 22px; display: grid; gap: 6px; }
.lang-list a { display: grid; grid-template-columns: 1fr auto 20px; grid-template-areas: "c code ic" "l code ic"; align-items: center; column-gap: 12px; padding: 14px 16px; border: 1px solid var(--line); transition: all .2s; }
.lang-list a:hover { border-color: var(--ink); }
.lang-list a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.lang-list b { grid-area: c; font-weight: 500; } .lang-list span { grid-area: l; font-size: 13px; opacity: .7; }
.lang-list code { grid-area: code; font: 11px var(--mono); opacity: .6; } .lang-list svg { grid-area: ic; }
.lang-list a:lang(ko) { font-family: var(--font-ko); } .lang-list a:lang(en) { font-family: var(--font-en); } .lang-list a:lang(ja) { font-family: var(--font-ja); }
.cart-h { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin: 22px 0 10px; display: flex; gap: 8px; align-items: center; }
.cart-h i { font-style: normal; background: var(--lime); color: var(--lime-ink); border-radius: 9px; min-width: 18px; height: 18px; padding: 0 5px; font: 600 11px/18px var(--font-en); text-align: center; }
.cart-list { display: grid; gap: 4px; }
.cart-list li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; background: var(--bg); padding: 8px; }
.cart-img { background: #fff; aspect-ratio: 1; display: grid; place-items: center; padding: 6px; } .cart-img img { mix-blend-mode: multiply; max-height: 100%; object-fit: contain; }
.cart-info { display: grid; align-content: center; gap: 2px; min-width: 0; }
.cart-info b { font-weight: 500; font-size: 15px; } .cart-info em { font: 11px var(--mono); color: var(--ink-3); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qty { display: flex; align-items: center; gap: 2px; margin-top: 6px; font-size: 13px; }
.qty button:not(.cart-rm) { width: 26px; height: 26px; background: #fff; } .qty span { min-width: 28px; text-align: center; }
.cart-rm { margin-left: auto; font-size: 12px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.cart-empty { background: var(--bg); padding: 18px; font-size: 14px; color: var(--ink-2); margin-top: 18px; }
.cart-plan { display: flex; gap: 10px; align-items: center; margin-top: 6px; padding: 12px; background: #eef4dc; font-size: 13px; }
.qform { display: grid; gap: 10px; margin-top: 8px; }
.qform label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); }
.qform input:not([type=checkbox]), .qform textarea, .modal textarea { width: 100%; border: 1px solid var(--line-2); background: #fff; padding: 11px 12px; font-size: 15px; border-radius: 0; color: var(--ink); resize: vertical; }
.qform input:focus, .qform textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.qform-files input { padding: 8px !important; font-size: 13px !important; } .qform-files small { color: var(--ink-3, var(--ink-2)); }
.qform-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qform-agree { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px !important; font-size: 13px !important; }
.qform-agree input { width: 18px; height: 18px; accent-color: var(--ink); }
.qform-done { display: grid; justify-items: center; gap: 10px; padding: 40px 12px; text-align: center; background: #eef4dc; }
.qform-done svg { width: 32px; height: 32px; }
.mm { display: grid; margin-top: 30px; }
.mm > a, .mm summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 400; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.mm summary::-webkit-details-marker { display: none; }
.mm details[open] summary svg { transform: rotate(180deg); }
.mm ul { padding: 8px 0 14px; border-bottom: 1px solid var(--line); }
.mm li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 16px; }
.mm li em { font-style: normal; font-size: 12px; color: var(--ink-3); text-align: right; }
.mm-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.searchp { position: fixed; inset: 0 0 auto 0; z-index: 80; background: var(--page); max-height: 100vh; overflow: auto; animation: drop .35s var(--ease); box-shadow: 0 20px 80px rgba(0, 0, 0, .2); }
.searchp-bar { position: sticky; top: 0; display: flex; align-items: center; gap: 14px; padding: 20px var(--pad); background: var(--page); border-bottom: 1px solid var(--line); z-index: 1; }
.searchp-bar > svg { width: 26px; height: 26px; flex: none; }
.searchp-bar input { flex: 1; min-width: 0; border: 0; background: none; font-size: clamp(20px, 3vw, 36px); font-weight: 400; outline: none; letter-spacing: -.01em; }
.searchp-bar input::-webkit-search-cancel-button { display: none; }
.searchp-body { padding: 20px var(--pad) 40px; }
.searchp-hint, .searchp-n { color: var(--ink-3); font-size: 14px; }
.searchp-body h3 { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin: 22px 0 10px; }
.searchp-body h3 i { font-style: normal; color: var(--ink-3); margin-left: 4px; }
.searchp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); margin-bottom: 14px; }
.sres { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; background: var(--card); padding: 8px; transition: background .2s; }
.sres:hover { background: var(--ink); color: #fff; } .sres:hover em { color: #fff9; }
.sres-img { aspect-ratio: 1; background: #fff; display: grid; place-items: center; } .sres-img img { max-height: 100%; object-fit: contain; }
.sres-photo img { width: 100%; height: 100%; object-fit: cover; }
.sres b { display: block; font-weight: 500; font-size: 15px; } .sres em { font: 11px var(--mono); color: var(--ink-3); font-style: normal; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(20, 20, 19, .96); display: grid; place-items: center; color: #fff; }
.lightbox img { max-width: min(92vw, 1500px); max-height: 86vh; object-fit: contain; background: #fff; }
.lightbox button { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; }
.lightbox button:hover { background: #fff2; }
.lb-x { top: 14px; right: 14px; } .lb-prev { left: 14px; top: 50%; } .lb-next { right: 14px; top: 50%; }
.lb-count { position: absolute; bottom: 18px; font: 12px var(--mono); opacity: .7; }
.toast { position: fixed; left: 50%; bottom: 84px; z-index: 120; transform: translate(-50%, 12px); background: var(--ink); color: #fff; padding: 12px 18px; display: flex; gap: 10px; align-items: center; font-size: 14px; opacity: 0; transition: all .3s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); } .toast svg { color: var(--lime-2); }
.modal { position: fixed; inset: 0; z-index: 110; background: rgba(30, 30, 28, .45); display: grid; place-items: center; padding: 16px; animation: fade .25s; }
.modal-box { position: relative; background: #fff; width: min(520px, 100%); padding: 32px 28px 28px; display: grid; gap: 14px; }
.modal-box h3 { font-weight: 500; font-size: 20px; padding-right: 40px; } .modal-box p { color: var(--ink-2); font-size: 15px; }
.modal textarea { font: 12px/1.5 var(--mono); }
.popup { position: fixed; left: 18px; bottom: 18px; z-index: 52; width: min(360px, calc(100vw - 36px)); background: #fff; padding: 22px; display: grid; gap: 10px; box-shadow: 0 12px 48px rgba(0, 0, 0, .2); animation: slide .5s var(--ease); }
.popup h3 { font-weight: 500; font-size: 19px; line-height: 1.3; padding-right: 30px; } .popup p { font-size: 14px; color: var(--ink-2); }
.popup-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; }

/* ── 카탈로그 ─────────────────────────────────────────── */
.catalog { padding-bottom: clamp(56px, 8vw, 120px); }
.catbar { display: flex; gap: 1px; overflow-x: auto; scrollbar-width: none; margin-bottom: 26px; }
.catbar::-webkit-scrollbar { display: none; }
.cattab { flex: none; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 22px 0 10px; background: var(--card); font-size: 15px; white-space: nowrap; transition: background .2s, color .2s; }
.cattab:first-child { padding: 0 22px; }
.cattab i { width: 56px; height: 44px; display: grid; place-items: center; } .cattab img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cattab:hover { background: var(--bg-2); }
.cattab.is-active { background: var(--ink); color: #fff; } .cattab.is-active i { background: #fff; }
.cathead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cathead h1 { font-weight: 400; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -.02em; line-height: 1.1; }
.cathead p { font-size: 13px; color: var(--ink-3); }
.subbar { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 14px; position: sticky; top: var(--hd-c); z-index: 20; background: var(--page); padding-block: 10px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; background: var(--card); font-size: 13.5px; white-space: nowrap; transition: all .2s; }
.chip i { font: 400 11px var(--font-en); color: var(--ink-3); font-style: normal; }
.chip svg { width: 15px; height: 15px; }
.chip-colors { width: 15px; height: 15px; border-radius: 50%; background: conic-gradient(#E75B12, #F7B500, #61993B, #007CB0, #76689A, #C1121C, #E75B12); box-shadow: 0 0 0 1.5px #fff; } /* 색상 선택 가능: 색상환 */
.chip:hover { background: var(--bg-2); }
.chip.is-active { background: var(--ink); color: #fff; } .chip.is-active i { color: #fff9; }
.subbar-tools { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sort { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); margin-left: 8px; }
.sort select { height: 34px; border: 0; background: var(--card); padding: 0 10px; font-size: 13.5px; color: var(--ink); border-radius: 0; }
.grid-more { display: grid; place-items: center; padding: 32px; }
.empty { display: grid; justify-items: center; gap: 16px; padding: 80px 20px; background: var(--card); color: var(--ink-2); }

/* ── 상품 상세 ────────────────────────────────────────── */
.page-p { padding-top: calc(var(--hd) + 14px) !important; padding-bottom: 90px; }
.pd-gallery { display: flex; gap: 8px; overflow-x: auto; padding-inline: var(--pad); scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; }
.pd-gallery::-webkit-scrollbar { display: none; }
.pd-shot { position: relative; flex: none; height: clamp(300px, 52vw, 680px); aspect-ratio: 1; background: #fff; scroll-snap-align: start; overflow: hidden; cursor: zoom-in; }
.pd-shot-main { aspect-ratio: 16 / 9.6; max-width: 84vw; }
.pd-shot img { width: 100%; height: 100%; object-fit: contain; padding: 4%; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.pd-shot:hover img { transform: scale(1.03); }
.pd-marks { position: absolute; top: 16px; right: 16px; display: flex; gap: 4px; }
.pd-marks i { font: 500 11px var(--font); font-style: normal; background: var(--bg); padding: 5px 8px; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; padding-block: 18px 6px; color: var(--ink-2); flex-wrap: wrap; }
.crumbs svg { transform: rotate(-90deg); opacity: .6; } .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.pd-title { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; padding-bottom: clamp(28px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.pd-title h1 { font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 8px; }
.pd-title .lead { max-width: 26em; margin-bottom: 14px; }
.pd-title-btns { display: flex; gap: 6px; }
.pd-models { padding-block: clamp(28px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.pd-models h2 { margin-bottom: 18px; }
.models-row { display: flex; gap: var(--gap); overflow-x: auto; scrollbar-width: thin; padding-bottom: 10px; }
.model { flex: none; width: 300px; display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; background: var(--card); padding: 10px 14px 10px 10px; transition: background .2s; }
.model-img { aspect-ratio: 1; display: grid; place-items: center; } .model-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.model b { display: block; font: 500 13px var(--mono); } .model em { font-style: normal; font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.model:hover { background: var(--bg-2); }
.model.is-active { background: var(--ink); color: #fff; } .model.is-active em { color: #fffa; } .model.is-active .model-img { background: #fff; }
.pd-config { display: grid; grid-template-columns: minmax(300px, 1fr) 1.35fr; border-bottom: 1px solid var(--line); }
.pd-config-opts { padding: clamp(28px, 4vw, 56px) var(--pad); display: grid; gap: 22px; align-content: start; }
.optgroup h3 { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.optgroup { display: grid; gap: 2px; max-width: 520px; }
.optrow { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 12px; align-items: center; height: 46px; padding: 0 12px 0 8px; background: var(--card); font-size: 14.5px; text-align: left; transition: background .2s, color .2s; }
.optrow:hover { background: var(--bg-2); }
.optrow.is-active { background: var(--ink); color: #fff; font-weight: 500; }
.optrow .sw { width: 30px; height: 30px; border: 1px solid rgba(0, 0, 0, .12); }
.optrow .meta { font-size: 12px; opacity: .65; white-space: nowrap; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 8px; background: var(--bg-2); }
.swatch { width: 34px; height: 34px; border: 1px solid rgba(0, 0, 0, .14); position: relative; transition: transform .2s var(--ease); }
.swatch:hover { transform: scale(1.08); }
.swatch.is-active::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--ink); }
.pd-config-view { position: sticky; top: var(--hd-c); align-self: start; height: min(760px, calc(100vh - var(--hd-c) - 68px)); min-height: 380px; border-left: 1px solid var(--line); background: #efeeeb; overflow: hidden; }
.pd-config-view:fullscreen { background: #efeeeb; height: 100vh; max-height: none; }
.viewer { position: absolute; inset: 0; touch-action: none; cursor: grab; } .viewer:active { cursor: grabbing; }
.viewer canvas { display: block; width: 100% !important; height: 100% !important; }
.viewer-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); text-align: center; }
.viewer-2d { position: absolute; inset: 0; background: #fff; display: grid; place-items: center; padding: 6%; } .viewer-2d img { max-height: 100%; object-fit: contain; }
.seg { display: inline-flex; border: 1px solid var(--line-2); background: #fff; }
.seg button { height: 34px; min-width: 52px; padding: 0 12px; font: 500 12px var(--font-en); letter-spacing: .04em; }
.seg button.is-active { background: var(--ink); color: #fff; }
.viewer-mode { position: absolute; top: 16px; right: 16px; }
.viewer-tools { position: absolute; top: 16px; left: 16px; display: flex; gap: 2px; }
.viewer-tools button { width: 36px; height: 36px; display: grid; place-items: center; background: rgba(255, 255, 255, .8); backdrop-filter: blur(6px); transition: background .2s; }
.viewer-tools button:hover { background: #fff; } .viewer-tools button.is-active { background: var(--ink); color: var(--lime-2); }
.viewer-tools svg { width: 17px; height: 17px; }
.viewer-tools button.viewer-ar { width: auto; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; background: var(--lime); color: var(--lime-ink); font: 600 12px var(--font-en); letter-spacing: .06em; } .viewer-tools button.viewer-ar:hover { background: var(--lime-2); }
.viewer-hq { font: 600 11px var(--font-en); letter-spacing: .04em; }
.viewer-hint { position: absolute; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); pointer-events: none; }
/* 뷰어 아래쪽: 바닥재 고르기 + 조작 안내. 자리가 좁으면 안내가 위로 올라감 */
.viewer-bottom { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-wrap: wrap-reverse; align-items: flex-start; justify-content: space-between; gap: 8px 16px; pointer-events: none; }
.viewer-bottom .viewer-hint { position: static; margin-left: auto; } .has-ground .viewer-hint { text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; }
.viewer-opts { display: grid; gap: 8px; max-width: 100%; min-width: 0; }
.viewer-ground { pointer-events: auto; max-width: 100%; } .viewer-ground[hidden] { display: none; }
.viewer-ground p { margin-bottom: 6px; font-size: 11.5px; color: var(--ink-2); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; pointer-events: none; } .viewer-ground p b { margin-left: 4px; font-weight: 600; color: var(--ink); }
.viewer-ground-list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.viewer-ground button { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(0, 0, 0, .14); background: url(../img/ground/thumbs.jpg) 0 0 / 900% 100% no-repeat; color: var(--ink-2); }
.viewer-ground button[data-ground=""] { background: #fff; } .viewer-ground svg { width: 17px; height: 17px; }
.viewer-ground button.is-active { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px #fff; }
/* AR: PC 안내의 QR코드, WebXR 화면 위에 올리는 닫기 버튼과 안내(배경은 투명 — 카메라가 보여야 함) */
.ar-qr { width: 168px; } .ar-qr svg { display: block; width: 100%; height: auto; }
.ar-ui { position: fixed; inset: 0; z-index: 130; touch-action: none; user-select: none; -webkit-user-select: none; }
.ar-ui button { width: 44px; height: 44px; background: rgba(30, 30, 28, .6); color: #fff; font-size: 28px; line-height: 1; }
.ar-ui > button { position: absolute; top: 16px; left: 16px; }
.ar-ui p { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 10px 14px; background: rgba(30, 30, 28, .6); color: #fff; font-size: 15px; text-align: center; pointer-events: none; }
.ar-turn { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; gap: 16px; } .ar-turn button { width: 60px; height: 60px; font-size: 32px; } .ar-ui.is-scan .ar-turn { display: none; }
.ar-scan { display: none; position: absolute; left: 50%; top: 46%; margin: -40px 0 0 -24px; } .ar-ui.is-scan .ar-scan { display: block; }
.ar-scan i { display: block; width: 48px; height: 80px; border: 3px solid #fff; border-radius: 9px; box-shadow: 0 0 10px rgba(0, 0, 0, .35); animation: ar-sway 1.5s ease-in-out infinite alternate; }
@keyframes ar-sway { from { transform: translateX(-64px) rotate(-12deg); } to { transform: translateX(64px) rotate(12deg); } }
.pd-details, .pd-always, .pd-video, .pd-related { padding-block: clamp(36px, 5vw, 72px); }
.pd-details h2, .pd-always h2, .pd-video h2 { margin-bottom: 26px; }
.pd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 3vw, 44px); }
.pd-cols h3 { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.facts > div { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.facts dt { color: var(--ink-2); } .facts dd { text-align: right; overflow-wrap: anywhere; }
.certs li, .dls li a { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.certs svg { width: 16px; height: 16px; color: #5d7a14; flex: none; }
.dls li a { justify-content: space-between; } .dls li a:hover { padding-left: 6px; } .dls li a { transition: padding .2s var(--ease); } .dls svg { width: 16px; height: 16px; }
.pd-place { margin-top: 16px; }
.video { position: relative; aspect-ratio: 16 / 9; background: #000; max-width: 1200px; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ral { background: var(--bg-2); padding: 22px 0 22px 22px; margin-bottom: var(--gap); }
.ral-head { display: grid; margin-bottom: 14px; } .ral-head b { font-weight: 500; font-size: 17px; } .ral-head span { color: var(--ink-2); font-size: 15px; }
.ral-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 10px; }
.ral-row span { flex: none; width: clamp(120px, 14vw, 200px); aspect-ratio: 1; display: flex; align-items: flex-end; padding: 8px; font: 10px var(--mono); }
.always { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.always > div { background: var(--bg-2); padding: 20px 20px 26px; } .always b { font-weight: 500; font-size: 17px; display: block; margin-bottom: 4px; } .always p { color: var(--ink-2); font-size: 14.5px; }
.pd-bar { position: fixed; inset: auto 0 0 0; z-index: 45; background: #fff; border-top: 1px solid var(--line); transform: translateY(102%); transition: transform .4s var(--ease); }
.pd-bar.is-on { transform: none; }
.pd-bar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px var(--pad); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.pd-bar-name { min-width: 0; } .pd-bar-name em { display: block; font: 11px var(--mono); color: var(--ink-3); font-style: normal; } .pd-bar-name b { font-weight: 400; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pd-bar-btns { display: flex; align-items: center; gap: 6px; flex: none; }
.pd-bar-ask { font-size: 13px; text-decoration: underline; text-underline-offset: 4px; margin-right: 12px; }

/* ── 시공사례 · 회사 · 지원 ─────────────────────────── */
.phead { padding-block: clamp(20px, 3vw, 44px) clamp(28px, 4vw, 56px); display: grid; gap: 16px; }
.phead h1 { font-weight: 400; font-size: clamp(28px, 3.6vw, 54px); line-height: 1.14; letter-spacing: -.025em; max-width: 22em; }
.phead .chips { margin-top: 10px; }
.refgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 8px; padding-bottom: clamp(56px, 8vw, 120px); }
.refx { display: grid; gap: 10px; align-content: start; }
.refx-wide { grid-column: span 2; }
.refx-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); } .refx-wide .refx-img { aspect-ratio: 8 / 2.96; }
.refx-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .refx:hover img { transform: scale(1.04); }
.refx-meta b { display: block; font-weight: 400; font-size: 18px; line-height: 1.3; } .refx-meta em { font: 11px var(--mono); color: var(--ink-3); text-transform: uppercase; font-style: normal; }
.refhero { padding-inline: var(--pad); } .refhero button { display: block; width: 100%; height: clamp(300px, 56vw, 760px); overflow: hidden; cursor: zoom-in; } .refhero img { width: 100%; height: 100%; object-fit: cover; }
.refhead-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 5vw, 80px); padding-block: 10px clamp(28px, 4vw, 56px); align-items: start; }
.refhead h1 { font-weight: 400; font-size: clamp(28px, 3.4vw, 50px); letter-spacing: -.02em; line-height: 1.12; }
.refshots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding-bottom: clamp(36px, 5vw, 72px); }
.refshots button { aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; } .refshots button:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 16 / 8; }
.refshots img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .refshots button:hover img { transform: scale(1.03); }
.refnext { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 28px clamp(56px, 8vw, 120px); border-top: 1px solid var(--line); flex-wrap: wrap; }
.refnext-link { display: grid; grid-template-columns: 1fr auto; gap: 0 14px; align-items: center; text-align: right; } .refnext-link em { grid-column: 1; font: 11px var(--mono); color: var(--ink-3); font-style: normal; text-transform: uppercase; } .refnext-link b { grid-column: 1; font-weight: 400; font-size: 20px; } .refnext-link svg { grid-row: 1 / 3; grid-column: 2; }
.about-photo { padding-inline: var(--pad); } .about-photo img { width: 100%; height: clamp(260px, 48vw, 680px); object-fit: cover; }
.about3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 64px); padding-block: clamp(36px, 5vw, 72px) 0; }
.about3 h3 { font: 600 clamp(26px, 2.6vw, 38px) var(--display); margin-bottom: 10px; } .about3 p { color: var(--ink-2); max-width: 26em; }
.sec { padding-block: clamp(36px, 5vw, 72px); } .sec > h2 { margin-bottom: 26px; }
.biz { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.biz-card { background: var(--card); padding: 14px 16px 22px; display: grid; gap: 4px; align-content: start; transition: background .25s; } .biz-card:hover { background: var(--bg-2); }
.biz-img { aspect-ratio: 4 / 3; display: grid; place-items: center; margin-bottom: 8px; } .biz-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.biz-card em { font: 11px var(--mono); color: var(--ink-3); font-style: normal; text-transform: uppercase; } .biz-card b { font-weight: 500; font-size: 18px; } .biz-card p { font-size: 14px; color: var(--ink-2); }
.timeline { display: grid; } .timeline li { display: grid; grid-template-columns: clamp(80px, 14vw, 220px) 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-2); align-items: baseline; }
.timeline b { font: 600 clamp(24px, 2.6vw, 38px) var(--display); } .timeline span { font-size: 16px; color: var(--ink-2); }
.certgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); } .certgrid li { background: var(--card); padding: 16px; display: flex; gap: 10px; font-size: 14.5px; align-items: flex-start; } .certgrid svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: #5d7a14; }
.sec-dark { background: var(--ink); color: #fff; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 5vw, 80px); margin-inline: var(--pad); padding-inline: clamp(24px, 4vw, 64px); }
.sec-dark h2 { color: var(--lime-2); margin-bottom: 16px; } .sec-dark p { color: #fffc; max-width: 34em; }
.factory { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #fff3; } .factory li { background: var(--ink); padding: 16px 4px 16px 16px; display: grid; gap: 4px; } .factory em { font: 11px var(--mono); color: var(--lime-2); font-style: normal; } .factory b { font-weight: 400; font-size: 17px; }
.partners { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); } .partners li { background: var(--card); padding: 18px 12px; text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-2); font-family: var(--font-ko); }
.loc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .loc > div { background: var(--card); padding: 24px; display: grid; gap: 8px; align-content: start; justify-items: start; }
.loc h3 { font-weight: 500; font-size: 18px; margin-bottom: 6px; } .loc p, .contact p { display: flex; gap: 10px; align-items: center; color: var(--ink-2); font-size: 15px; } .loc svg, .contact p svg { width: 17px; height: 17px; flex: none; } .loc .btn { margin-top: 10px; }
.supgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.sup { background: var(--card); padding: 22px 20px 28px; display: grid; gap: 6px; align-content: start; text-align: left; min-height: 190px; transition: background .25s, color .25s; }
.sup:hover { background: var(--ink); color: #fff; } .sup:hover p { color: #fffb; } .sup:hover svg { color: var(--lime-2); }
.sup svg { width: 26px; height: 26px; margin-bottom: 26px; } .sup b { font-weight: 500; font-size: 19px; } .sup p { font-size: 14px; color: var(--ink-2); }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-items: start; }
.faq details { border: 1px solid var(--line-2); } .faq summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; font-size: 15.5px; } .faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; transition: transform .25s var(--ease); width: 18px; height: 18px; } .faq details[open] summary svg { transform: rotate(45deg); } .faq p { padding: 0 16px 16px; color: var(--ink-2); font-size: 15px; }
.contact { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-bottom: 40px; } .contact h2 { margin-bottom: 14px; } .contact p { margin-bottom: 6px; }
.newslist { padding-bottom: clamp(56px, 8vw, 120px); } .newslist > a { display: grid; grid-template-columns: clamp(100px, 14vw, 220px) 1fr auto; gap: 16px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line-2); }
.newslist > a:hover h3 { text-decoration: underline; text-underline-offset: 5px; } .newslist time { font: 12px var(--mono); color: var(--ink-3); } .newslist h3 { font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); }

/* ── 임베드 ───────────────────────────────────────────── */
.is-embed { background: #efeeeb; overflow: hidden; }
.embed { position: fixed; inset: 0; }
.embed-brand { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-2); }
.embed-brand svg { width: 78px; }
.embed .viewer-tools { left: auto; right: 16px; }
.viewer-bottom .embed-brand { position: static; pointer-events: auto; } .embed .viewer-ground { margin-left: auto; }

/* ── 반응형: 태블릿 ───────────────────────────────────── */
@media (max-width: 1000px) {
  :root { --hd: 76px; --hd-c: 60px; }
  .hd-nav, .hd-tools .hd-lang span { display: none; }
  .hd-burger { display: inline-flex; }
  .hd-logo { margin-top: 14px; width: 124px; height: 48px; padding: 0 12px 11px; }
  .hd[data-compact="true"] .hd-logo { margin-top: 10px; width: 108px; }
  .hd-nav, .hd-tools { margin-top: 0; }
  .mega { display: none; }
  .mosaic, .tiles { grid-template-columns: repeat(2, 1fr); }
  .lb { grid-column: 1 / -1; aspect-ratio: 23 / 10; } .lb img { width: 40%; } .lb-iboom img { width: 34%; }
  .mosaic > .tile:last-child { display: none; } /* 2칸일 때 짝수로 맞춤 */
  .statement, .feature, .promo, .refhead-grid, .sec-dark { grid-template-columns: 1fr; }
  .feature-light { margin-left: 0; } .feature-dark { margin-top: 0; padding-right: clamp(24px, 4vw, 64px); }
  .news-row, .always, .certgrid, .supgrid { grid-template-columns: repeat(2, 1fr); }
  .biz { grid-template-columns: repeat(2, 1fr); } .partners { grid-template-columns: repeat(4, 1fr); }
  .refgrid { grid-template-columns: repeat(2, 1fr); } .refx-wide { grid-column: span 2; }
  .pd-config { grid-template-columns: 1fr; } .pd-config-view { position: relative; top: 0; order: -1; border-left: 0; border-bottom: 1px solid var(--line); height: 62vw; min-height: 340px; }
  .ft-cols { grid-template-columns: repeat(2, 1fr); }
  .pd-bar-ask { display: none; }
}

/* ── 반응형: 모바일 (별도 설계) ───────────────────────── */
@media (max-width: 640px) {
  :root { --gap: 3px; }
  body { font-size: 15.5px; }
  .hero { height: 88svh; min-height: 520px; }
  .hero-word { font-size: clamp(54px, 21vw, 110px); }
  .hero-dots { left: 50%; transform: translateX(-50%); }
  .mosaic { margin-top: 3px; }
  .tile { aspect-ratio: 1 / 1.12; }
  .tile-meta { flex-direction: column; gap: 1px; padding: 8px 10px 10px; font-size: 13px; }
  .tile-add { opacity: 1; transform: none; width: 30px; height: 30px; top: 6px; right: 6px; background: transparent; }
  .tile-badges { top: 8px; left: 8px; }
  .banner { grid-column: span 2; min-height: 200px; }
  .banner .btn { left: 12px; right: 12px; bottom: 12px; }
  .banner-word { margin-bottom: 44px; }
  .statement { gap: 18px; }
  .strip-item { height: 62vw; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .news-row { display: flex; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; } .news-card { flex: none; width: 72vw; }
  .ref-card { width: 68vw; }
  .ft-cta { flex-direction: column; align-items: stretch; } .ft-cta-btns .btn { flex: 1; }
  .ft-copy { margin-left: 0; width: 100%; order: 5; }
  .fab span { display: none; } .fab { width: 46px; padding: 0; justify-content: center; right: 12px; bottom: 12px; }
  .drawer { inset: auto 0 0 0; top: auto; width: 100%; max-height: 92svh; padding: 26px 18px max(20px, env(safe-area-inset-bottom)); animation-name: sheet; border-radius: 14px 14px 0 0; }
  .drawer-menu { top: 0; max-height: none; border-radius: 0; }
  @keyframes sheet { from { transform: translateY(40px); opacity: 0; } }
  .catbar { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); } .cattab { height: 50px; font-size: 14px; padding-right: 16px; } .cattab i { width: 44px; height: 36px; }
  .subbar { flex-direction: column; top: var(--hd-c); } .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); } .chips::-webkit-scrollbar { display: none; }
  .phead .chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; }
  .pd-shot { height: 78vw; } .pd-shot-main { aspect-ratio: 1 / 1; max-width: 88vw; }
  .pd-title-btns { width: 100%; } .pd-title-btns .btn { flex: 1; }
  .pd-config-view { height: 96vw; } .viewer-hint { left: 16px; right: auto; } .viewer-bottom .viewer-hint { display: none; } .viewer-ground button { width: 34px; height: 34px; }
  .optrow { grid-template-columns: 30px 1fr auto; } .optrow .meta:last-child { display: none; }
  .always, .certgrid, .supgrid, .biz, .loc, .faq, .about3, .refshots { grid-template-columns: 1fr; }
  .refshots button:nth-child(3n+1) { grid-column: auto; aspect-ratio: 4 / 3; }
  .partners { grid-template-columns: repeat(2, 1fr); }
  .refgrid { grid-template-columns: 1fr; } .refx-wide { grid-column: auto; } .refx-wide .refx-img { aspect-ratio: 4 / 3; }
  .pd-bar-name { display: none; } .pd-bar-btns { flex: 1; } .pd-bar-btns .btn { flex: 1; padding: 0 10px; }
  .model { width: 250px; }
  .newslist article { grid-template-columns: 1fr auto; } .newslist time { grid-column: 1 / -1; }
  .sec-dark { margin-inline: 0; }
  .qform-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* 대표 외장 자재 칩 */
.facts dd.mats-dd, .facts dd:has(.matchip) { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.matchip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 4px 10px 4px 5px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; white-space: nowrap; }
.matchip i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; }

/* ── 상품 상세: 상단 = 대표 사진 + (GLB 가 있으면) 3D 뷰어 ── */
.pd-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-inline: var(--pad); }
.pd-top.has-3d { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.pd-photo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pd-top:not(.has-3d) .pd-photo { width: 100%; max-width: 1000px; margin-inline: auto; }
.pd-shot-main { position: relative; display: block; width: 100%; height: clamp(320px, 44vw, 640px); background: #fff; overflow: hidden; cursor: zoom-in; }
.pd-shot-main img { width: 100%; height: 100%; object-fit: contain; padding: 4%; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.pd-shot-main:hover img { transform: scale(1.03); }
.pd-thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.pd-thumbs button { flex: none; width: 84px; height: 64px; background: #fff; border: 2px solid transparent; }
.pd-thumbs button.is-active { border-color: var(--ink); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pd-viewer-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pd-top .pd-config-view { position: relative; top: auto; align-self: auto; height: clamp(320px, 44vw, 640px); min-height: 0; border: 0; }
@media (max-width: 1000px) {
  .pd-top.has-3d { grid-template-columns: minmax(0, 1fr); }
  .pd-shot-main, .pd-top .pd-config-view { height: 86vw; max-height: 560px; }
}

/* ── 첫 화면 글꼴 — 큰 낱말은 굵은(600) 고딕, 설명은 보통(400) 고딕 ── */
.hero-kicker { display: inline-flex; align-items: center; gap: 12px; font: 500 11.5px/1 var(--font-en); letter-spacing: .34em; }
.hero-kicker::before { content: ""; width: 5px; height: 13px; background: currentColor; transform: skewX(-14deg); opacity: .8; }
html:lang(ko) .hero-kicker, html:lang(ja) .hero-kicker { font-family: var(--font); font-size: 12.5px; letter-spacing: .3em; }
.hero-word { font: 600 clamp(64px, 15vw, 236px)/.9 var(--font-en); letter-spacing: -.02em; padding-bottom: .04em; }
.hero-sub { margin: 20px 0 26px; font: 600 clamp(19px, 1.9vw, 28px)/1.3 var(--font); letter-spacing: -.015em; }
html:lang(ko) .hero-sub { font: 600 clamp(18px, 1.65vw, 25px)/1.5 var(--font); letter-spacing: -.02em; }
html:lang(ja) .hero-sub { font: 600 clamp(17px, 1.55vw, 23px)/1.6 var(--font); letter-spacing: 0; }
.hero-copy .btn-line { height: 46px; padding: 0 28px; font: 500 11.5px/1 var(--font-en); letter-spacing: .26em; }
html:lang(ko) .hero-copy .btn-line, html:lang(ja) .hero-copy .btn-line { font-family: var(--font); font-size: 13px; letter-spacing: .14em; }

/* ── 글 편집기로 쓴 글 (소식 · 팝업 · 제품 설명) ── */
.rte-out { font-size: 16px; line-height: 1.8; color: var(--ink); overflow-wrap: anywhere; }
.rte-out > * + * { margin-top: .9em; }
.rte-out h2 { font-weight: 500; font-size: 1.5em; line-height: 1.3; letter-spacing: -.02em; margin-top: 1.4em; }
.rte-out h3 { font-weight: 600; font-size: 1.15em; margin-top: 1.2em; }
.rte-out ul, .rte-out ol { padding-left: 1.4em; } .rte-out ul { list-style: disc; } .rte-out ol { list-style: decimal; } .rte-out li + li { margin-top: .3em; }
.rte-out blockquote { border-left: 3px solid var(--lime); padding: .2em 0 .2em 1em; color: var(--ink-2); }
.rte-out a { text-decoration: underline; text-underline-offset: 3px; }
.rte-out img { max-width: 100%; height: auto; border-radius: 4px; }
.rte-out hr { border: 0; border-top: 1px solid var(--line); }
.popup .rte-out { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.pd-long { padding-block: clamp(40px, 5vw, 72px) 0; } .pd-long h2 { font-weight: 400; font-size: clamp(22px, 2vw, 28px); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 20px; } .pd-long .rte-out { max-width: 860px; }
.newsd-head h1 { max-width: 22em; } .newsd-head .kicker a { text-decoration: underline; text-underline-offset: 3px; }
.newsd-img img { width: 100%; max-height: 72vh; object-fit: cover; border-radius: 4px; } .newsd-img.is-product img { object-fit: contain; background: #fff; padding: 4%; max-height: 60vh; }
.newsd-body { max-width: 820px; padding-block: clamp(32px, 4vw, 56px); }

/* ── 첫 화면 사진(페이지 편집으로 넣은 경우) ── */
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); }
.hero-slide.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 22, 20, .28), rgba(20, 22, 20, .5)); }
.hero-slide.has-photo .hero-copy { z-index: 2; }

/* ── 자료 받기 등록 창 ── */
.signup { display: grid; gap: 12px; }
.signup h3 { font-weight: 500; font-size: 21px; line-height: 1.35; padding-right: 40px; }
.signup-lead { color: var(--ink-2); font-size: 14.5px; }
.signup label:not(.qform-agree) { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); }
.signup input:not([type=checkbox]) { width: 100%; border: 1px solid var(--line-2); background: #fff; padding: 11px 12px; font-size: 15px; }
.signup input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.signup .qform-agree { align-items: flex-start !important; line-height: 1.5; } .signup .qform-agree input { flex: none; margin-top: 2px; }
.signup-note { font-size: 12.5px; color: var(--ink-3); text-align: center; }
.qform-err { color: #a13a22; font-size: 13.5px; background: #fbeee9; padding: 9px 12px; }

/* ── 페이지 편집기 (관리자 로그인 상태에서만) ── */
.yke-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; justify-content: center; z-index: 120; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: calc(100vw - 36px); padding: 8px 10px 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .5); }
.yke-bar:not(.is-on) { padding: 0; background: none; box-shadow: none; }
.yke-bar button, .yke-bar a { height: 32px; padding: 0 12px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .12); font-size: 13px; display: inline-flex; align-items: center; }
.yke-bar button:hover, .yke-bar a:hover { background: rgba(255, 255, 255, .22); }
.yke-bar .yke-start { height: 42px; padding: 0 18px; background: var(--ink); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55); font-weight: 600; }
.yke-bar .yke-save { background: var(--lime); color: var(--lime-ink); font-weight: 600; }
.yke-bar em { font-style: normal; opacity: .6; } .yke-n { color: var(--lime-2); font-weight: 600; } .yke-hint { opacity: .7; }
.yke-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(163, 198, 60, .25); animation: ykePulse 1.6s ease-in-out infinite; }
@keyframes ykePulse { 50% { box-shadow: 0 0 0 7px rgba(163, 198, 60, 0); } }
.yk-editing [data-edit] { outline: 1px dashed rgba(163, 198, 60, .95); outline-offset: 5px; cursor: text; border-radius: 2px; }
.yk-editing [data-edit]:hover { outline-style: solid; }
.yk-editing [data-edit]:focus { outline: 2px solid var(--lime); background: rgba(163, 198, 60, .1); }
.yk-editing [data-rv] { opacity: 1 !important; transform: none !important; }
.yk-editing .ab-title span, .yk-editing .ab-word span, .yk-editing .hero-word span { transform: none !important; opacity: 1 !important; }
.yk-editing .fab { display: none; }
.yke-img { position: absolute; top: 14px; right: 14px; z-index: 30; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font-size: 13px; font-weight: 600; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .55); }
.hero .yke-img { top: calc(var(--hd, 90px) + 14px); }
.yke-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: rgba(20, 20, 18, .55); }
.yke-panel { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; padding: 24px; display: grid; gap: 14px; border-radius: 10px; }
.yke-panel h3 { font-weight: 600; font-size: 19px; } .yke-panel > p { color: var(--ink-2); font-size: 14px; }
.yke-prev { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); border-radius: 6px; cursor: crosshair; display: grid; place-items: center; color: var(--ink-3); font-size: 14px; }
.yke-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.yke-pin { position: absolute; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; background: var(--lime); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 4px 10px rgba(0, 0, 0, .4); pointer-events: none; }
.yke-zoom { display: flex; align-items: center; gap: 12px; font-size: 13px; } .yke-zoom input { flex: 1; accent-color: var(--ink); }
.yke-msg { font-size: 13.5px; color: var(--ink-2); background: var(--bg); padding: 8px 12px; border-radius: 6px; }
.yke-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .yke-btns > span { flex: 1; } .yke-btns .btn { border-radius: 6px; text-transform: none; letter-spacing: 0; cursor: pointer; }

/* ── 글 편집기 (관리자) ── */
.rte { border: 1px solid var(--line-2); border-radius: 8px; background: #fff; overflow: hidden; }
.rte.is-busy { opacity: .6; pointer-events: none; }
.rte-tools { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: #faf9f7; position: sticky; top: 0; z-index: 1; }
.rte-tools button { height: 30px; min-width: 30px; padding: 0 8px; border-radius: 5px; font-size: 12.5px; color: var(--ink-2); }
.rte-tools button:hover { background: var(--bg-2); color: var(--ink); }
.rte-tools i { width: 1px; margin: 4px 4px; background: var(--line); }
.rte-area { min-height: 220px; max-height: 60vh; overflow: auto; padding: 16px 18px; font-size: 15px; outline: none; }
.rte-area.is-empty::before { content: attr(data-ph); color: var(--ink-3); pointer-events: none; position: absolute; }