:root {
  --ink: #080a0d;
  --surface: #11151a;
  --surface-soft: #191e25;
  --paper: #eeebe6;
  --muted: #a6a9a4;
  --lavender: #cdb5ff;
  --lime: #dbf584;
  --line: rgba(238, 235, 230, 0.16);
  --radius: 28px;
  font-family: Inter, "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--paper);
  background: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
input, select { color-scheme: dark; }

.page-grain { position: fixed; inset: 0; opacity: .18; pointer-events: none; z-index: 4; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; letter-spacing: .1em; }
.brand-mark { color: var(--ink); display: grid; place-items: center; width: 27px; height: 27px; background: linear-gradient(135deg, var(--lavender), var(--lime)); clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 57%, 26% 100%, 0 100%); font-size: 13px; font-weight: 950; line-height: 1; }
nav { display: flex; gap: 26px; margin-left: auto; color: var(--muted); font-size: 13px; }
nav a:hover { color: var(--paper); }
.header-cta { border: 1px solid rgba(219,245,132,.58); border-radius: 999px; background: rgba(219,245,132,.08); padding: 10px 16px; font-size: 12px; font-weight: 700; }
.header-cta:hover { background: var(--lime); color: var(--ink); }

.hero { min-height: calc(100svh - 88px); display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: clamp(34px, 8vw, 120px); padding-block: clamp(36px, 7vh, 84px) 70px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.eyebrow span { width: 17px; height: 1px; background: currentColor; display: inline-block; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 25px; max-width: 690px; font-size: clamp(50px, 7vw, 96px); font-weight: 650; line-height: .94; letter-spacing: -.078em; }
h1 em { font-style: normal; background: linear-gradient(95deg, var(--lavender), var(--lime)); color: transparent; background-clip: text; -webkit-background-clip: text; }
.hero-description { color: var(--muted); font-size: clamp(16px, 1.65vw, 20px); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 32px; }
[hidden] { display: none !important; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 14px 20px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.button-primary { color: var(--ink); background: var(--lime); box-shadow: 0 7px 40px rgba(219,245,132,.12); }
.button-primary:hover { background: #e8ff9d; transform: translateY(-1px); }
.button-quiet { border-color: var(--line); background: rgba(255,255,255,.015); }
.button-quiet:hover { border-color: rgba(205,181,255,.7); }
.hero-note { margin: 22px 0 0; max-width: 470px; color: #7c807f; font-size: 11px; line-height: 1.55; }

.hero-device { position: relative; min-height: 700px; display: grid; place-items: center; }
.device-glow { position: absolute; width: 530px; aspect-ratio: 1; background: radial-gradient(circle, rgba(205,181,255,.2), rgba(219,245,132,.08) 40%, transparent 71%); filter: blur(16px); }
.phone-shell { position: relative; z-index: 1; width: min(70vw, 430px); aspect-ratio: 9 / 17.6; padding: 7px; overflow: hidden; border: 1px solid rgba(238,235,230,.28); border-radius: 40px; background: #15171b; box-shadow: 0 24px 90px rgba(0,0,0,.65), inset 0 0 0 1px rgba(219,245,132,.13); transform: rotate(4deg); }
.phone-notch { position: absolute; z-index: 2; top: 10px; left: 50%; width: 34%; height: 20px; border-radius: 99px; background: #050607; transform: translateX(-50%); }
.hero-video { display: block; width: 100%; height: 100%; border-radius: 34px; object-fit: cover; object-position: center; background: #0a0c10; }
.device-caption { position: absolute; z-index: 2; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(238,235,230,.25); border-radius: 99px; background: rgba(7,9,13,.58); backdrop-filter: blur(10px); color: #f2f0ea; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(219,245,132,.5); animation: pulse 1.8s infinite; }
.hero-coordinate { position: absolute; z-index: 1; right: 5%; bottom: 5%; margin: 0; color: #6e706f; font-size: 9px; letter-spacing: .13em; transform: rotate(-90deg); transform-origin: right bottom; }
@keyframes pulse { 60% { box-shadow: 0 0 0 7px rgba(219,245,132,0); } 100% { box-shadow: 0 0 0 0 rgba(219,245,132,0); } }

.statement { padding: 112px max(24px, calc((100% - 1040px)/2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(116deg, rgba(205,181,255,.1), transparent 46%), #101319; }
.statement > p:last-child { margin: 0; font-size: clamp(35px, 5.4vw, 76px); line-height: 1.03; letter-spacing: -.072em; }
.statement strong { color: var(--lime); font-weight: inherit; }

.try-on { padding-block: 120px; border-top: 1px solid var(--line); background: radial-gradient(circle at 88% 15%, rgba(205,181,255,.11), transparent 28%); }
.try-on-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 16px; }
.try-on-form, .try-on-result { min-height: 610px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(25,30,37,.97), rgba(12,15,19,.96)); }
.upload-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.upload-field { position: relative; display: grid; align-content: end; min-height: 230px; overflow: hidden; padding: 20px; border: 1px dashed rgba(219,245,132,.42); border-radius: 20px; background: rgba(6,8,10,.52); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.upload-field:hover, .upload-field:focus-within { border-color: var(--lime); background: rgba(219,245,132,.06); }
.upload-field input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-field > span, .upload-field > strong, .upload-field > small { position: relative; z-index: 1; pointer-events: none; }
.upload-index { margin-bottom: auto; color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.upload-field strong { margin-top: 40px; font-size: 18px; letter-spacing: -.04em; }
.upload-field small { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.upload-preview { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity .25s ease; }
.upload-field:has(.upload-preview:not([hidden]))::after { content: "CHANGE"; position: absolute; z-index: 3; top: 12px; right: 12px; padding: 5px 7px; border: 1px solid rgba(238,235,230,.33); border-radius: 99px; background: rgba(8,10,13,.72); color: var(--paper); font-size: 8px; font-weight: 800; letter-spacing: .12em; pointer-events: none; }
.look-fieldset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 20px 0; padding: 0; border: 0; }
.look-fieldset legend { width: 100%; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.look-fieldset label { position: relative; display: grid; place-items: center; min-height: 48px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); cursor: pointer; }
.look-fieldset input { position: absolute; opacity: 0; }.look-fieldset input:checked + span { color: var(--ink); }.look-fieldset label:has(input:checked) { border-color: var(--lime); background: var(--lime); }.look-fieldset span { font-size: 12px; font-weight: 800; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.consent-check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--lime); }
.try-on-submit { width: 100%; justify-content: space-between; }.try-on-submit:disabled { cursor: wait; opacity: .58; }
.form-status { min-height: 35px; margin: 15px 2px 0; color: #8f948f; font-size: 11px; line-height: 1.5; }.form-status.is-error { color: #ffc9c5; }.form-status.is-success { color: var(--lime); }
.try-on-result { position: relative; display: grid; overflow: hidden; place-items: center; isolation: isolate; background: radial-gradient(circle at 50% 40%, rgba(205,181,255,.13), transparent 40%), #0e1116; }.try-on-result::before { content: ""; position: absolute; z-index: -1; inset: 15px; border: 1px solid rgba(238,235,230,.09); border-radius: 18px; }
.result-empty { text-align: center; }.result-empty > span { display: inline-block; margin-bottom: 18px; color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .18em; }.result-empty strong { display: block; font-size: clamp(27px, 4vw, 42px); line-height: 1.03; letter-spacing: -.065em; }.result-empty p { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.result-image-wrap { position: absolute; inset: 0; }.result-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }.result-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 46%, rgba(6,7,8,.72)); pointer-events: none; }.result-image-wrap span { position: absolute; z-index: 1; right: 15px; bottom: 16px; max-width: calc(100% - 30px); color: rgba(238,235,230,.9); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-align: right; }
.result-lock { position: absolute; z-index: 2; right: 15px; bottom: 14px; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid rgba(219,245,132,.36); border-radius: 12px; background: rgba(8,10,13,.77); backdrop-filter: blur(10px); }.result-lock b { color: var(--lime); font-size: 10px; letter-spacing: .08em; }.result-lock span { color: var(--muted); font-size: 9px; }
.try-on-disclaimer { max-width: 800px; margin: 17px 0 0; color: #777c79; font-size: 10px; line-height: 1.6; }

.preview, .how, .notice { padding-block: 120px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
h2 { margin-bottom: 0; font-size: clamp(36px, 4.7vw, 66px); line-height: .98; letter-spacing: -.07em; font-weight: 620; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; text-align: right; }
.preview-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 15px; }
.fit-card { position: relative; overflow: hidden; min-height: 490px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.fit-media { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fit-card-main { min-height: 510px; }
.before-after { position: absolute; inset: 0; overflow: hidden; background: #101318; }
.before-after > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.compare-after-wrap { position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; border-right: 1px solid var(--lime); }
.compare-after-wrap img { width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 47%; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.compare-handle { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--lime); border-radius: 50%; background: rgba(8,10,13,.64); transform: translate(-50%, -50%); pointer-events: none; }
.compare-handle::before, .compare-handle::after { content: ""; position: absolute; height: 1px; width: 9px; background: var(--lime); }
.compare-handle::before { left: 7px; }.compare-handle::after { right: 7px; }.compare-handle i { display:none; }
.compare-label { position: absolute; z-index: 2; bottom: 74px; padding: 7px 9px; border: 1px solid rgba(238,235,230,.24); border-radius: 99px; background: rgba(8,10,13,.64); color: var(--paper); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.label-before { right: 15px; }.label-after { left: 15px; }
.fit-card-footer { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; min-height: 68px; padding: 14px 16px; background: linear-gradient(90deg, rgba(7,9,13,.9), rgba(7,9,13,.67)); backdrop-filter: blur(12px); }
.fit-card-footer p { margin: 0 0 3px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; }.fit-card-footer p span { color: var(--lime); }.fit-card-footer strong { font-size: 14px; font-weight: 600; }
.fit-card-film { isolation: isolate; }.fit-card-film video { display: block; width: 100%; height: 100%; object-fit: cover; }.film-overlay { position: absolute; z-index: 2; inset: auto 18px 18px; display: grid; gap: 5px; }.film-overlay span { color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .11em; }.film-overlay strong { font-size: 16px; letter-spacing: -.03em; }

.how { border-top: 1px solid var(--line); }.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.steps li { min-height: 250px; padding: 27px 24px; border-right: 1px solid var(--line); }.steps li:first-child { border-left: 1px solid var(--line); }.steps span { color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .13em; }.steps h3 { margin: 68px 0 10px; font-size: 22px; letter-spacing: -.05em; }.steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.object-section { overflow: hidden; padding-block: 90px; background: radial-gradient(circle at 72% 50%, rgba(205,181,255,.17), transparent 33%), linear-gradient(110deg, #171921, #0a0c10); }.object-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 60px; }.object-copy > p:not(.eyebrow) { max-width: 410px; margin: 25px 0; color: var(--muted); line-height: 1.7; }.text-button { padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--lime); background: transparent; color: var(--lime); font-size: 13px; font-weight: 800; }.model-stage { position: relative; min-height: 460px; overflow: hidden; border: 1px solid rgba(238,235,230,.16); border-radius: var(--radius); background: radial-gradient(circle at 50% 42%, rgba(219,245,132,.09), transparent 40%), #101218; }.model-stage model-viewer { display: block; width: 100%; height: 450px; }.model-stage > p { position: absolute; left: 18px; bottom: 15px; margin: 0; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .16em; }

.notice { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; }.notice-list { border-top: 1px solid var(--line); }.notice-list p { margin: 0; padding: 24px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.65; }.notice-list b { color: var(--paper); }
.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 30px; padding: 44px 0 30px; border-top: 1px solid var(--line); }.site-footer > div > p { margin: 13px 0 0; color: var(--muted); font-size: 13px; }.footer-links { display: flex; gap: 18px; align-items: center; color: var(--muted); font-size: 12px; }.footer-links a:hover, .footer-links button:hover { color: var(--lime); }.footer-links button { padding: 0; border: 0; background: none; }.site-footer small { grid-column: 1 / -1; color: #676b6d; font-size: 10px; }

.open-dialog { width: min(430px, calc(100% - 32px)); padding: 35px; border: 1px solid rgba(219,245,132,.44); border-radius: 24px; background: #171a20; color: var(--paper); box-shadow: 0 24px 100px rgba(0,0,0,.72); }.open-dialog::backdrop { background: rgba(2,3,4,.68); backdrop-filter: blur(6px); }.open-dialog h2 { margin-bottom: 18px; font-size: 42px; }.open-dialog > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }.open-dialog small { display: block; margin-top: 15px; color: #8c918d; font-size: 11px; line-height: 1.55; }.dialog-close { position: absolute; top: 14px; right: 18px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 30px; line-height: 1; }

@media (max-width: 760px) {
  .wrap { width: min(100% - 32px, 600px); }.site-header { min-height: 68px; }.site-header nav { display: none; }.brand { font-size: 14px; }.header-cta { padding: 8px 12px; font-size: 11px; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 45px; padding-bottom: 58px; gap: 10px; }.hero-copy { text-align: left; }.hero-actions { margin-top: 25px; }.hero-note { font-size: 10px; }.hero-device { min-height: 640px; margin-top: 4px; }.phone-shell { width: min(90vw, 390px); }.hero-coordinate { right: 0; bottom: 12%; }
  .statement { padding: 72px 16px; }.statement > p:last-child { font-size: 42px; }.preview, .how, .notice { padding-block: 75px; }.section-heading { display: block; margin-bottom: 30px; }.section-heading > p { margin-top: 16px; text-align: left; font-size: 13px; }.preview-grid { grid-template-columns: 1fr; }.fit-card, .fit-card-main { min-height: 500px; }.fit-card-film { min-height: 300px; }.steps { grid-template-columns: 1fr; }.steps li, .steps li:first-child { min-height: auto; padding: 22px 20px; border-left: 1px solid var(--line); }.steps h3 { margin-top: 28px; }
  .object-section { padding-block: 70px; }.object-layout, .notice { grid-template-columns: 1fr; gap: 35px; }.model-stage { min-height: 360px; }.model-stage model-viewer { height: 350px; }.site-footer { grid-template-columns: 1fr; }.footer-links { justify-content: space-between; }.compare-label { bottom: 80px; }
  .try-on { padding-block: 75px; }.try-on-shell { grid-template-columns: 1fr; }.try-on-form, .try-on-result { min-height: auto; padding: 16px; border-radius: 20px; }.upload-field { min-height: 190px; padding: 15px; }.upload-field strong { margin-top: 25px; font-size: 15px; }.look-fieldset { gap: 6px; }.look-fieldset label { min-height: 44px; }.try-on-result { aspect-ratio: 3 / 4; }.result-lock { right: 10px; bottom: 10px; }.try-on-disclaimer { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* --- 2026-08-11 expansion: item categories + motion clip --- */
.item-fieldset { grid-template-columns: repeat(3, 1fr); }
.item-fieldset span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.badge-adult { padding: 1px 4px; border-radius: 6px; background: rgba(255,120,120,.18); color: #ff9c9c; font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.item-fieldset label:has(input:checked) .badge-adult { background: rgba(8,10,13,.22); color: #7c1d1d; }
.adult-check b { color: #ffb4b4; }
.motion-block { position: relative; z-index: 2; width: 100%; display: grid; gap: 10px; padding: 14px 2px 46px; }
.motion-button { width: 100%; justify-content: space-between; }
.motion-button:disabled { cursor: wait; opacity: .6; }
.motion-status { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
#motion-video { width: 100%; max-height: 320px; border-radius: 14px; background: #000; }
.motion-download { justify-self: start; color: var(--lime); font-size: 12px; font-weight: 800; border-bottom: 1px solid rgba(219,245,132,.4); }
@media (max-width: 760px) { .item-fieldset span { font-size: 10px; } .motion-block { padding-bottom: 52px; } }

/* 결과 표시 후: 이미지 온전히 보이고 버튼·가격은 아래로 스택 (얼굴 가림 방지) */
.try-on-result.has-result { display: block; aspect-ratio: auto; min-height: auto; }
.try-on-result.has-result .result-image-wrap { position: relative; inset: auto; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; }
.try-on-result.has-result .result-lock { position: static; margin-top: 12px; }
.try-on-result.has-result .motion-block { padding-bottom: 6px; }

/* SAMPLES-CSS: 비포/애프터 갤러리 + 후기 + 루미 룩북 */
.samples, .reviews { padding-block: 110px; }
.samples-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sample-card { min-height: 0; aspect-ratio: 3 / 4.15; }
.sample-card .fit-card-footer { min-height: 50px; padding: 10px 12px; }
.sample-card .fit-card-footer strong { font-size: 12px; }
.sample-card .compare-label { bottom: 58px; padding: 5px 7px; font-size: 8px; }
.lumi-strip { margin-top: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; }
.lumi-strip-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 13px; }
.lumi-strip-head span { color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.lumi-strip-head strong { color: var(--muted); font-size: 12px; font-weight: 600; }
.lumi-strip-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lumi-strip-row img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.review-card { display: grid; gap: 10px; align-content: start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 22px; }
.review-card .tag { color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.review-card p { margin: 0; font-size: 13px; line-height: 1.7; }
.review-card .meta { color: var(--muted); font-size: 11px; }
.review-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 26px; border: 1px dashed rgba(219,245,132,.4); border-radius: var(--radius); padding: 20px 22px; }
.review-cta p { margin: 0; color: var(--muted); font-size: 13px; }
@media (max-width: 1080px) { .samples-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .samples, .reviews { padding-block: 75px; }
  .samples-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sample-card .fit-card-footer { min-height: 44px; padding: 8px 10px; }
  .sample-card .fit-card-footer strong { font-size: 10px; }
  .sample-card .fit-card-footer p { font-size: 8px; margin-bottom: 1px; }
  .sample-card .compare-label { bottom: 50px; }
  .lumi-strip-row { grid-template-columns: 1fr 1fr; }
  .review-grid { grid-template-columns: 1fr; }
}

/* SAMPLE3D-CSS */
.sample3d { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; align-items: center; margin-top: 14px; border: 1px solid rgba(219,245,132,.36); border-radius: var(--radius); background: var(--surface); padding: 22px; }
.sample3d-copy { display: grid; gap: 10px; }
.sample3d-copy .tag { color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.sample3d-copy strong { font-size: 20px; letter-spacing: -.03em; }
.sample3d-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.sample3d model-viewer { width: 100%; height: 420px; background: #14181d; border-radius: 14px; }
@media (max-width: 760px) { .sample3d { grid-template-columns: 1fr; padding: 16px; } .sample3d model-viewer { height: 320px; } }

/* PROCESS-CSS: 제작 과정 플로우 */
.sample3d { grid-template-columns: 1fr; }
.process-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pf-cell { position: relative; margin: 0; }
.pf-cell img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 12px; }
.pf-cell figcaption { margin-top: 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.pf-cell figcaption b { color: var(--lime); margin-right: 5px; }
.pf-op { position: absolute; z-index: 2; top: calc(50% - 26px); right: -20px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--lime); color: #10130a; font-size: 14px; font-weight: 900; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.pf-op-down { top: auto; right: 12px; bottom: 34px; }
.sample3d-stage { position: relative; }
.pf-stage-badge { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 7px 11px; border-radius: 999px; background: rgba(8,10,13,.78); border: 1px solid rgba(219,245,132,.4); color: var(--paper); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.pf-stage-badge b { color: var(--lime); margin-right: 4px; }
@media (max-width: 760px) {
  .process-flow { gap: 8px; }
  .pf-op { width: 21px; height: 21px; font-size: 11px; right: -15px; top: calc(50% - 24px); }
  .pf-op-down { top: auto; right: 8px; bottom: 26px; }
  .pf-cell figcaption { font-size: 8px; }
  .sample3d model-viewer { height: 300px; }
}

/* PROCESS-SECTION-CSS: 시연 바로 아래 배치 시 여백 조정 */
.process-section { padding-block: 0 90px; }
@media (max-width: 760px) { .process-section { padding-block: 0 60px; } }

/* SHOES-CROP-CSS: 신발 카드는 발끝까지 보이도록 하단 기준 크롭 */
.sample-card[data-cat="shoes"] img.compare-before,
.sample-card[data-cat="shoes"] .compare-after-wrap img { object-position: 50% 100%; }

/* SETGALLERY-CSS: 3무드 세트 결과 */
#set-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
#set-gallery[hidden] { display: none !important; }
.set-card { margin: 0; }
.set-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; }
.set-card figcaption { margin-top: 6px; text-align: center; }
.set-card figcaption a { color: var(--lime); font-size: 11px; font-weight: 800; }
.set-fail { grid-column: 1 / -1; color: #e0645f; font-size: 11px; }
@media (max-width: 760px) { #set-gallery { gap: 6px; } .set-card figcaption a { font-size: 10px; } }

/* GENLIVE-CSS: 생성 중 라이브 연출 — 망사 + 상하 빛 스캔 + 진행률 */
.gen-live { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #0e1116; }
.gen-live[hidden] { display: none !important; }
.gen-live img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(.96); }
.gen-mesh { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(219,245,132,.22) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(219,245,132,.22) 0 1px, transparent 1px 13px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 72% 82% at 50% 46%, #000 58%, rgba(0,0,0,.25) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 82% at 50% 46%, #000 58%, rgba(0,0,0,.25) 82%, transparent 100%);
  animation: genMeshShimmer 2.6s ease-in-out infinite;
}
@keyframes genMeshShimmer { 0%,100% { opacity: .55; background-position: 0 0, 0 0; } 50% { opacity: 1; background-position: 7px 7px, -7px 7px; } }
.gen-scan { position: absolute; left: 0; right: 0; top: -18%; height: 16%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(219,245,132,.38) 45%, rgba(255,255,255,.5) 50%, rgba(219,245,132,.38) 55%, transparent);
  filter: blur(1px);
  animation: genScanSweep 2.4s ease-in-out infinite alternate;
}
@keyframes genScanSweep { 0% { top: -18%; } 100% { top: 102%; } }
.gen-progress { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(8,10,13,.72); backdrop-filter: blur(8px); border: 1px solid rgba(219,245,132,.3); }
.gen-progress-track { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.gen-progress-bar { width: 0%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9ad8ff, var(--lime)); box-shadow: 0 0 12px rgba(219,245,132,.6); transition: width .4s ease; }
.gen-pct { color: var(--lime); font-size: 15px; font-weight: 900; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.gen-label { justify-self: end; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
@media (prefers-reduced-motion: reduce) { .gen-mesh, .gen-scan { animation: none; } }

/* INSPO-CSS: 룩북 영감 보드 */
.inspo-board { display: grid; gap: 12px; margin: 4px 0 8px; padding: 16px; border: 1px solid rgba(219,245,132,.3); border-radius: 16px; background: linear-gradient(140deg, rgba(219,245,132,.06), rgba(255,255,255,.015)); }
.inspo-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.inspo-head b { color: var(--lime); }
.inspo-kicker { color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.inspo-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inspo-group > span { flex: 0 0 100%; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.inspo-group a { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--paper); font-size: 11px; font-weight: 700; transition: border-color .15s, background .15s; }
.inspo-group a:hover { border-color: var(--lime); background: rgba(219,245,132,.09); }
.inspo-note { margin: 0; color: var(--muted); font-size: 9.5px; }
@media (max-width: 760px) { .inspo-board { padding: 13px; } .inspo-group a { font-size: 10px; padding: 6px 9px; } }

/* AUTOCOMPARE-CSS: 자동 왕복 비포애프터 쇼케이스 */
.auto-compare{margin:30px 0 36px}
.auto-compare-head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.auto-compare-head span{font-size:10px;font-weight:900;letter-spacing:.16em;color:#c8e400}
.auto-compare-head strong{font-size:15px;color:#eef3f8}
.auto-compare-stage{position:relative;max-width:430px;margin:0 auto;aspect-ratio:2/3;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:#0a0c10}
.auto-compare-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ac-after-wrap{position:absolute;inset:0;overflow:hidden}
.ac-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#c8e400;box-shadow:0 0 14px rgba(200,228,0,.8);transform:translateX(-50%)}
.ac-tag{position:absolute;top:12px;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.08em}
.ac-tag-b{left:12px;background:rgba(8,10,13,.72);color:#eef3f8}
.ac-tag-a{right:12px;background:#c8e400;color:#111}
.ac-label{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:5px 14px;border-radius:999px;background:rgba(8,10,13,.72);color:#fff;font-size:12px;font-weight:900;letter-spacing:.04em;white-space:nowrap}

/* ABOUT-CSS: 브랜드 정의·어원 */
.about-brand{display:grid;gap:18px;max-width:640px}
.about-def{font-size:14.5px;line-height:1.75;color:rgba(238,243,248,.85);word-break:keep-all}
.about-def strong{color:#c8e400;font-weight:800}
.about-etym{display:grid;gap:10px}
.about-etym div{display:flex;align-items:baseline;gap:14px;padding:12px 16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.03)}
.about-etym b{flex:0 0 52px;font-size:17px;font-weight:900;color:#c8e400;letter-spacing:.02em}
.about-etym span{font-size:12.5px;line-height:1.6;color:rgba(238,243,248,.72);word-break:keep-all}
.about-note{font-size:12px;color:rgba(238,243,248,.55)}
.about-note strong{color:#c8e400;font-weight:900}

/* BRANDSUB-CSS: 로고 아래 서브라벨 */
.brand-text{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand-sub{font-size:7.5px;font-weight:800;letter-spacing:.22em;color:#c8e400}
@media (max-width:720px){.brand-sub{font-size:6.5px;letter-spacing:.16em}}
.hero-slogan{display:inline-block;margin-top:10px;color:#c8e400;font-weight:900;letter-spacing:.01em}

/* 헤드라인 두 줄 사이 반 글자 간격 */
#hero-title em{display:block;margin-top:.5em}

/* FITLANG-CSS: 언어 선택 */
#fitLang{appearance:none;-webkit-appearance:none;padding:7px 26px 7px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23c8e400'/%3E%3C/svg%3E") no-repeat right 10px center;color:#eef3f8;font-size:11px;font-weight:700;cursor:pointer}
#fitLang:focus{outline:2px solid #c8e400;outline-offset:2px}
@media (max-width:720px){#fitLang{padding:6px 22px 6px 9px;font-size:10px}}