: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; text-shadow: 0 1px 14px rgba(8,10,13,.8); 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 { flex: 0 0 auto; white-space: nowrap; 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 { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; align-items: end;
  padding-block: calc(88px + clamp(40px, 9vh, 110px)) clamp(56px, 9vh, 96px);
  margin-inline: calc(50% - 50vw); margin-top: -88px; }
.hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; background: var(--ink); filter: saturate(.9) contrast(1.05) brightness(.78); }
/* 문구가 읽혀야 한다. 왼쪽을 짙게 덮고 위아래로 화면에 이어 붙인다. */
.hero-veil { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(97deg, rgba(8,10,13,.95) 0%, rgba(8,10,13,.92) 22%, rgba(8,10,13,.78) 40%,
    rgba(8,10,13,.52) 54%, rgba(8,10,13,.28) 68%, rgba(8,10,13,.34) 84%, rgba(8,10,13,.58) 100%),
  linear-gradient(to bottom, rgba(8,10,13,.86) 0%, rgba(8,10,13,.28) 14%, rgba(8,10,13,0) 30%,
    rgba(8,10,13,.22) 50%, rgba(8,10,13,.72) 76%, var(--ink) 100%); }
.hero-copy { position: relative; z-index: 1; }
.hero-badge { position: absolute; z-index: 1; right: max(24px, calc((100% - 1180px) / 2)); bottom: 38px; display: flex; align-items: center; gap: 7px; padding: 7px 11px; 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; }
.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: 15ch; 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 { max-width: 42ch; 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; }

.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: 14px; bottom: 34%; 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: repeat(3, 1fr); 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); }
/* 비포/애프터는 반드시 같은 기준점이어야 한다 — 1%만 어긋나도 이음새에서 몸이 튄다. */
.compare-after-wrap img { width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 46%; }
.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 11px; font-size: 11px; }.site-header { gap: 10px; }#fitLang { min-width: 0; max-width: 96px; }.brand { min-width: 0; }
  .hero { min-height: 100svh; margin-top: -68px; padding-top: 92px; padding-bottom: 52px; align-items: end; }.hero-bg { height: 132%; bottom: auto; object-position: center top; }.hero-copy { text-align: left; }.hero-actions { margin-top: 25px; }.hero-note { font-size: 10px; }h1 { max-width: 100%; }.hero-description { max-width: 100%; }.hero-badge { right: 16px; bottom: auto; top: 78px; }.hero-coordinate { display: none; }.hero-veil { background: linear-gradient(to bottom, rgba(8,10,13,.34) 0%, rgba(8,10,13,.16) 18%, rgba(8,10,13,.44) 40%, rgba(8,10,13,.88) 68%, var(--ink) 96%); }
  .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; }
.look-note { margin: -10px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.65; word-break: keep-all; }
@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}

/* AUTOCOMPARE-HERO: 시안창 바로 아래 21컨셉 대형 쇼케이스 */
.autocompare-section{padding-top:8px}
.auto-compare--hero{margin:0}
.auto-compare--hero .auto-compare-head{display:none}
.auto-compare--hero .auto-compare-stage{max-width:760px;border-radius:22px;border-color:rgba(200,228,0,.22);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.auto-compare--hero .ac-line{width:3px;box-shadow:0 0 26px rgba(200,228,0,.95),0 0 60px rgba(200,228,0,.45)}
.auto-compare--hero .ac-tag{top:18px;padding:6px 14px;font-size:11px}
.auto-compare--hero .ac-tag-b{left:18px}
.auto-compare--hero .ac-tag-a{right:18px}
.auto-compare--hero .ac-label{bottom:18px;padding:8px 22px;font-size:15px}
@media (max-width:760px){
  .auto-compare--hero .ac-label{bottom:12px;padding:6px 16px;font-size:13px}
  .auto-compare--hero .auto-compare-stage{border-radius:18px}
}

/* SAMPLE-SWEEP: 샘플 카드와 룩북 첫 칸도 대형 쇼케이스처럼 대각선 라인빛이 자동으로 오간다 */
.sample-card .compare-after-wrap,
.fit-card-main .compare-after-wrap{inset:0;width:100%;border-right:0}
.sample-card .compare-handle,
.fit-card-main .compare-handle,
.fit-card-main .compare-range{display:none}
/* 대형 쇼케이스와 좌우를 맞춘다 — BEFORE 왼쪽, AFTER 오른쪽 */
.sample-card .label-before,
.fit-card-main .label-before{left:15px;right:auto}
.sample-card .label-after,
.fit-card-main .label-after{right:15px;left:auto}
.sample-card .before-after::after,
.fit-card-main .before-after::after{content:"";position:absolute;z-index:3;top:-12%;bottom:-12%;left:var(--sweep-l,50%);width:2px;margin-left:-1px;pointer-events:none;background:linear-gradient(180deg,rgba(200,228,0,0),#c8e400 12%,#f2ffb0 50%,#c8e400 88%,rgba(200,228,0,0));box-shadow:0 0 16px rgba(200,228,0,.9),0 0 38px rgba(200,228,0,.4);transform:rotate(var(--sweep-tilt,6deg))}
@media (prefers-reduced-motion:reduce){.sample-card .before-after::after,.fit-card-main .before-after::after{box-shadow:0 0 8px rgba(200,228,0,.6)}}

/* STARBURST: 라인이 지나간 자리에 금빛 반짝이가 피었다 사라진다 (뷰휠 대각선 폭죽 이식) */
.ac-burst{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:0}
.ac-burst.is-on{opacity:1}
.ac-burst i{position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;opacity:0;transform:scale(.15);background:radial-gradient(circle,#fffef8 0 30%,rgba(255,238,176,.98) 50%,rgba(255,214,92,0) 78%);box-shadow:0 0 14px rgba(255,232,160,.95),0 0 30px rgba(255,214,92,.55)}
.ac-burst i::before,.ac-burst i::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,rgba(255,253,240,.98),transparent)}
.ac-burst i::before{width:420%;height:1.5px;transform:translate(-50%,-50%)}
.ac-burst i::after{width:1.5px;height:420%;transform:translate(-50%,-50%);background:linear-gradient(180deg,transparent,rgba(255,253,240,.98),transparent)}
.ac-burst.is-on i{animation:acSparkle .78s ease-out forwards;animation-delay:var(--dl)}
@keyframes acSparkle{
  0%{opacity:0;transform:scale(.15) rotate(0deg)}
  20%{opacity:1;transform:scale(1.05) rotate(10deg)}
  62%{opacity:1;transform:scale(1.12) rotate(20deg)}
  100%{opacity:0;transform:scale(.55) rotate(30deg)}
}
@media (prefers-reduced-motion:reduce){.ac-burst{display:none}}

/* 대형 쇼케이스 라인도 대각선으로 */
.auto-compare--hero .ac-line{top:-12%;bottom:-12%;transform:translateX(-50%) rotate(var(--sweep-tilt,6deg));background:linear-gradient(180deg,rgba(200,228,0,0),#c8e400 12%,#f4ffb8 50%,#c8e400 88%,rgba(200,228,0,0))}

/* 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:inline;margin:0 0 0 .22em}  /* 2026-09-15 대표 「가로로」 — 「입기 전, 미리봐」 한 줄 */

/* 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}}

/* BOUNDARY-CSS: B2B/B2C 바운드리 + 카테고리 호버 전환 */
.boundary{position:relative;margin-bottom:14px;padding:16px 16px 14px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.025)}
.boundary--b2b{border-color:rgba(154,216,255,.28)}
.boundary--b2c{border-color:rgba(200,228,0,.3)}
.boundary legend{display:flex;align-items:center;gap:9px;padding:0 6px;font-size:12px;color:rgba(238,243,248,.72)}
.boundary-tag{padding:3px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.1em}
.boundary--b2b .boundary-tag{background:#9ad8ff;color:#08131c}
.boundary--b2c .boundary-tag{background:#c8e400;color:#111}
.cat-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 12px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.09)}
.cat-tab{padding:8px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:transparent;color:rgba(238,243,248,.7);font:800 11.5px/1 inherit;letter-spacing:.01em;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.cat-tab:hover{border-color:rgba(255,255,255,.4);color:#fff}
.boundary--b2c .cat-tab.is-active{background:#c8e400;border-color:#c8e400;color:#111}
.boundary--b2b .cat-tab.is-active{background:#9ad8ff;border-color:#9ad8ff;color:#08131c}
.cat-panel{display:none;grid-template-columns:repeat(3,1fr);gap:8px}
.cat-panel.is-active{display:grid;animation:catFade .22s ease}
@keyframes catFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:720px){.cat-panel{grid-template-columns:repeat(2,1fr)}.cat-tab{padding:7px 11px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.cat-panel.is-active{animation:none}}
/* 바운드리는 3열 그리드가 아니라 블록 흐름 (탭 → 아이템 패널) */
.look-fieldset.boundary{display:block;grid-template-columns:none;margin:0 0 14px}
.boundary .cat-tabs,.boundary .cat-panels{width:100%}
.boundary .cat-panel label{min-height:52px;padding:6px 8px;text-align:center}
.boundary .cat-panel span{font-size:12.5px;line-height:1.25}
/* THREED-PROGRESS: 3D 변환 진행바 (모바일에서 진행 상황이 보이도록) */
.threed-progress{display:flex;flex-direction:column;gap:7px;padding:12px 13px;border:1px solid rgba(200,228,0,.28);border-radius:12px;background:rgba(200,228,0,.05)}
.threed-scan{position:relative;width:100%;aspect-ratio:1/1;border-radius:11px;overflow:hidden;background:#0f1216;isolation:isolate}
.threed-scan img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.55) brightness(.62) contrast(1.05)}
.threed-scan-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(200,228,0,.09) 1px,transparent 1px);background-size:100% 22px;mix-blend-mode:screen}
.threed-scan-beam{position:absolute;left:0;right:0;top:0;height:26%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(200,228,0,.18) 42%,rgba(200,228,0,.85) 50%,rgba(200,228,0,.18) 58%,transparent);mix-blend-mode:screen;filter:blur(.4px);animation:threedScanBeam 3.4s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes threedScanBeam{from{top:-26%}to{top:100%}}
@media (prefers-reduced-motion:reduce){.threed-scan-beam{animation:none;top:37%;opacity:.5}}

.threed-progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;font-weight:800;letter-spacing:.02em;color:rgba(238,243,248,.9)}
.threed-progress-head b{font-size:14px;color:#c8e400;font-variant-numeric:tabular-nums}
.threed-progress-track{position:relative;height:7px;border-radius:999px;background:rgba(238,243,248,.12);overflow:hidden}
.threed-progress-track i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#8fb300,#c8e400);transition:width .5s cubic-bezier(.4,0,.2,1)}
.threed-progress-track i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:translateX(-100%);animation:threedSheen 1.6s ease-in-out infinite}
.threed-progress small{font-size:11px;line-height:1.55;color:rgba(238,243,248,.58);word-break:keep-all}
@keyframes threedSheen{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.threed-progress-track i::after{animation:none}.threed-progress-track i{transition:none}}

.threed-help{margin:8px 0 0;font-size:11.5px;line-height:1.6;color:rgba(238,243,248,.62);word-break:keep-all}
.threed-help b{color:#c8e400;font-weight:800}
/* 통합 바운드리 + B2B 문의 라인 */
.boundary--all{border-color:rgba(200,228,0,.3)}
.b2b-inquiry{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);font-size:11.5px;color:rgba(238,243,248,.6)}
.b2b-inquiry a{color:#c8e400;font-weight:800;border-bottom:1px solid rgba(200,228,0,.4)}
.upload-role{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:999px;background:rgba(200,228,0,.14);border:1px solid rgba(200,228,0,.35);color:#c8e400;font-size:9.5px;font-weight:900;font-style:normal;letter-spacing:.06em;vertical-align:middle}

/* AUTH-CSS: 구글 로그인 */
.auth-google-nav{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.05);backdrop-filter:blur(10px);color:rgba(238,243,248,.92);font:800 11px/1 inherit;letter-spacing:.02em;cursor:pointer;transition:border-color .2s,background .2s}
.auth-google-nav:hover{border-color:rgba(200,228,0,.55);background:rgba(200,228,0,.09)}
.auth-google-nav[hidden]{display:none!important}
.auth-google-nav svg{flex:0 0 auto;background:#fff;border-radius:50%;padding:2px;box-sizing:content-box}
.auth-account-badge{display:inline-flex;align-items:center;gap:8px;min-height:38px;max-width:170px;padding:0 13px 0 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.05);color:rgba(238,243,248,.92);font-size:10.5px;font-weight:800;letter-spacing:.04em}
.auth-account-badge[hidden]{display:none!important}
.auth-account-badge>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-badge-avatar{flex:0 0 auto;display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#c8e400;color:#111;font:900 10px/1 inherit;font-style:normal}
@media(max-width:720px){.auth-google-nav span[data-fit-i18n]{display:none}.auth-google-nav{padding:0;width:38px;justify-content:center}.auth-account-badge{max-width:110px;font-size:9.5px}}


/* ── 해외 결제 버튼 ────────────────────────────────────────────
   PayPal은 정책상 한국↔한국 거래를 막는다. 한국어 화면에는 내보내지 않는다. */
html:not([data-market="intl"]) [data-fit-buy-usd] { display: none !important; }

/* PayPal 브랜드색 — 금색 #FFC439 에 남색 글자 #003087.
   PayPal 이 결제 버튼 기본으로 쓰는 조합이고 명암비 7.9:1 로 잘 읽힌다.
   주황이 아니다. 눌렀을 때는 PayPal 자체 hover 색 #F2BA36. */
.fit-paypal-btn {
  background: #FFC439;
  border: 1px solid #FFC439;
  color: #003087;
  font-weight: 800;
  text-shadow: none;
}
.fit-paypal-btn:hover { background: #F2BA36; border-color: #F2BA36; color: #003087; }

/* 전자상거래법 표시 의무 — 결제창이 열리는 화면에는 하단 고정 노출이 필요하다. */
.avvm-biz{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.5);font-size:11px;line-height:1.8;text-align:left}
.avvm-biz b{color:rgba(255,255,255,.8)}
.avvm-biz a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 360px 대 폰 — 상단바 요소가 넷이라 한 단 더 조인다 */
@media (max-width: 400px) {
  .header-cta { padding: 7px 9px; font-size: 10.5px; letter-spacing: -.02em; }
  #fitLang { max-width: 78px; font-size: 11px; }
  .brand { font-size: 13px; }
}

/* ── 라인빛 CTA (2026-09-08 대표 「이거 나머지 홈피 적용」) ─────────
   뷰휠에서 먼저 쓴 기법. 색은 각 사이트 것을 그대로 두고 빛줄기만 얹는다.
   합성은 overlay — 밝은 라임 버튼의 검은 글자를 씻지 않는다
   (screen 을 쓰면 글자가 날아간다. 뷰휠은 어두운 버튼+흰 글자라 screen 이 맞았다). */
.sweepCta{position:relative;overflow:hidden}
.sweepCta::after{
  content:'';position:absolute;top:-25%;bottom:-25%;left:0;right:0;
  pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(100deg,
    transparent 34%, rgba(255,255,255,.22) 42%, rgba(255,255,255,.62) 48%,
    rgba(255,255,255,.85) 50%, rgba(255,255,255,.62) 52%,
    rgba(255,255,255,.22) 58%, transparent 66%);
  filter:blur(.4px);
  animation:sweepCtaRun 1.9s cubic-bezier(.42,0,.58,1) infinite alternate;
}
@keyframes sweepCtaRun{ from{transform:translateX(-64%)} to{transform:translateX(64%)} }
@media (prefers-reduced-motion:reduce){ .sweepCta::after{display:none} }

/* 슬로건 한 줄 — 폰 폭에서 「입기 전, 미리봐」가 접히지 않게 (2026-09-15) */
@media (max-width:760px){ #hero-title{ font-size:clamp(30px,9.2vw,56px); line-height:1.15; } }