@charset "utf-8";
/* =========================================================================
   의료 광학기기형 1 (optic1)
   어두운 그래파이트 바탕과 밝은 무채색 판을 번갈아 쓴다.
   포인트는 렌즈 코팅의 반사색 — 청록 → 보라 그라데이션을 가는 선 · 버튼에만.
   동그라미(렌즈 · 시야)를 반복 모티프로 쓴다. 영문 표제는 Sora, 한글은 Noto Sans KR.
   ========================================================================= */

:root{
  --oc-ink:#0b0d11;
  --oc-ink2:#12151b;
  --oc-ink3:#1b1f27;
  --oc-text:#e8ebf0;
  --oc-mut:#8a93a2;
  --oc-dline:rgba(255,255,255,.1);
  --oc-light:#f2f3f5;
  --oc-light2:#e7e9ed;
  --oc-dark-text:#14171d;
  --oc-dark-mut:#5d6573;
  --oc-lline:#d9dce2;
  --oc-c1:#6ee7f9;            /* 코팅 청록 */
  --oc-c2:#8b7cf6;            /* 코팅 보라 */
  --oc-grad:linear-gradient(100deg,var(--oc-c1),var(--oc-c2));
  --oc-wrap:1240px;
  --oc-gutter:28px;
  --oc-fixedh:72px;
  --oc-en:"Sora", "Noto Sans KR", sans-serif;
  --oc-sans:"Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--oc-ink); color:var(--oc-text);
  font-family:var(--oc-sans); font-size:16px; line-height:1.75; font-weight:400; letter-spacing:-.01em; -webkit-text-size-adjust:100%; }
img,video{ max-width:100%; height:auto; vertical-align:middle; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.3; letter-spacing:-.03em; word-break:keep-all; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; }
:focus-visible{ outline:2px solid var(--oc-c1); outline-offset:3px; }

.oc-skip{ position:absolute; left:-9999px; }
.oc-skip:focus{ left:10px; top:10px; z-index:999; background:#fff; color:#000; padding:10px 16px; }
.sound_only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.oc-wrap{ max-width:var(--oc-wrap); margin:0 auto; padding-left:var(--oc-gutter); padding-right:var(--oc-gutter); }
.oc-ico{ width:1.1em; height:1.1em; flex:none; }
#oc-main [id]{ scroll-margin-top:var(--oc-fixedh); }
.oc-empty{ padding:24px; border:1px dashed currentColor; opacity:.7; font-size:14px; }
.oc-empty code{ font-family:ui-monospace,Menlo,Consolas,monospace; }

.oc-sec{ padding:120px 0; }
.oc-light{ background:var(--oc-light); color:var(--oc-dark-text); }
.oc-en{ display:inline-block; margin-bottom:14px; font-family:var(--oc-en); font-size:12.5px; font-weight:600; letter-spacing:.28em;
  background:var(--oc-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.oc-light .oc-en{ background:linear-gradient(100deg,#1aa6c4,#6a58e8); -webkit-background-clip:text; background-clip:text; }
.oc-sec h2{ font-size:clamp(30px,3.8vw,48px); font-weight:500; }
.oc-head{ margin-bottom:48px; }
.oc-lead{ margin-top:20px; max-width:520px; font-size:16.5px; color:var(--oc-mut); }
.oc-light .oc-lead{ color:var(--oc-dark-mut); }
.oc-note{ margin-top:14px; font-size:12.5px; color:var(--oc-mut); }
.oc-light .oc-note{ color:var(--oc-dark-mut); }

.oc-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 28px;
  border-radius:99px; font-size:15.5px; font-weight:500; transition:transform .2s, box-shadow .2s, background .2s, color .2s; }
.oc-btn--grad{ background:var(--oc-grad); color:#0b0d11; font-weight:700; }
.oc-btn--grad:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(110,231,249,.25); }
.oc-btn--ghost{ border:1px solid rgba(255,255,255,.35); color:#fff; backdrop-filter:blur(6px); }
.oc-btn--ghost:hover{ background:#fff; color:#0b0d11; }
.oc-btn--line{ border:1px solid currentColor; }
.oc-btn--line:hover{ background:var(--oc-dark-text); border-color:var(--oc-dark-text); color:#fff; }

/* 헤더 ------------------------------------------------------------------ */
.oc-fixed{ position:fixed; inset:0 0 auto; z-index:60; transition:background .3s, border-color .3s; border-bottom:1px solid transparent; }
.oc-fixed.is-solid,.oc-fixed:not(.is-main){ background:rgba(11,13,17,.86); backdrop-filter:blur(14px); border-bottom-color:var(--oc-dline); }
.oc-demo{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; padding:6px 16px; background:#000; color:#9aa3b2; font-size:12.5px; }
.oc-demo b{ color:#fff; }
.oc-demo a{ color:var(--oc-c1); font-weight:700; }
.oc-header__in{ display:flex; align-items:center; gap:28px; height:72px; }
.oc-logo{ display:flex; align-items:center; gap:10px; }
.oc-logo__mark{ position:relative; width:28px; height:28px; border-radius:50%; background:var(--oc-grad); }
.oc-logo__mark i{ position:absolute; inset:6px; border-radius:50%; background:var(--oc-ink); box-shadow:inset 0 0 0 3px rgba(255,255,255,.12); }
.oc-logo__txt{ font-family:var(--oc-en); font-size:18px; font-weight:600; letter-spacing:.16em; }
.oc-gnb{ margin-left:auto; }
.oc-gnb>ul{ display:flex; gap:4px; }
.oc-gnb>ul>li{ position:relative; }
.oc-gnb>ul>li>a{ display:block; padding:10px 16px; border-radius:99px; font-size:15px; color:#c9cfd9; transition:color .2s, background .2s; }
.oc-gnb>ul>li:hover>a,.oc-gnb>ul>li:focus-within>a{ color:#fff; background:rgba(255,255,255,.07); }
.oc-gnb li ul{ position:absolute; left:0; top:calc(100% + 8px); min-width:170px; padding:8px; border-radius:16px;
  background:rgba(18,21,27,.96); border:1px solid var(--oc-dline); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transform:translateY(-4px); transition:.18s; }
.oc-gnb li ul::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.oc-gnb li:hover ul,.oc-gnb li:focus-within ul{ opacity:1; visibility:visible; transform:none; }
.oc-gnb li ul a{ display:block; padding:9px 12px; border-radius:10px; font-size:14px; color:#c9cfd9; white-space:nowrap; }
.oc-gnb li ul a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.oc-gnb__empty{ font-size:13px; color:var(--oc-mut); }
.oc-gnb__empty a{ text-decoration:underline; }
.oc-headcta{ display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:99px; background:var(--oc-grad); color:#0b0d11; font-size:14.5px; font-weight:700; white-space:nowrap; }
.oc-burger{ display:none; width:44px; height:44px; padding:0; border:1px solid var(--oc-dline); border-radius:50%; background:transparent; }
.oc-burger span{ display:block; width:18px; height:1.5px; margin:5px auto; background:#fff; }

/* 드로어 ---------------------------------------------------------------- */
.oc-drawer{ position:fixed; inset:0; z-index:80; background:rgba(11,13,17,.97); backdrop-filter:blur(10px); overflow-y:auto; }
.oc-drawer__panel{ min-height:100%; padding:0 var(--oc-gutter) 40px; }
.oc-drawer__top{ display:flex; justify-content:space-between; align-items:center; height:72px; border-bottom:1px solid var(--oc-dline); }
.oc-drawer__close{ width:44px; height:44px; border:1px solid var(--oc-dline); border-radius:50%; background:transparent; font-size:16px; }
.oc-drawer__panel>ul>li{ border-bottom:1px solid var(--oc-dline); }
.oc-drawer__panel>ul>li>a{ display:block; padding:18px 0; font-size:22px; font-weight:500; }
.oc-drawer__panel ul ul{ display:flex; flex-wrap:wrap; gap:4px 18px; padding:0 0 16px; }
.oc-drawer__panel ul ul a{ font-size:14.5px; color:var(--oc-mut); }
.oc-drawer__cta{ display:flex; justify-content:space-between; align-items:center; margin-top:28px; padding:16px 22px; border-radius:99px; background:var(--oc-grad); color:#0b0d11; font-weight:700; }
.oc-drawer__tel{ display:flex; align-items:center; gap:8px; margin-top:16px; color:var(--oc-mut); }

/* 서브 페이지 ----------------------------------------------------------- */
.oc-sbanner{ position:relative; padding:calc(var(--oc-fixedh) + 70px) 0 56px; overflow:hidden; background:var(--oc-ink2); border-bottom:1px solid var(--oc-dline); }
.oc-sbanner::after{ content:""; position:absolute; right:-120px; top:-80px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, transparent 54%, rgba(110,231,249,.18) 55%, transparent 56%, transparent 66%, rgba(139,124,246,.16) 67%, transparent 68%); }
.oc-sbanner p{ font-family:var(--oc-en); font-size:12px; letter-spacing:.28em; color:var(--oc-mut); }
.oc-sbanner h1{ position:relative; z-index:1; margin-top:8px; font-size:clamp(32px,4.2vw,52px); font-weight:500; }
.oc-sub{ padding:56px 0 110px; background:var(--oc-light); color:var(--oc-dark-text); }
/* 게시판 본문 · 내용관리 페이지의 표 · 소제목 — 제품 규격표처럼 */
.oc-sub #bo_v_con h3,.oc-sub #ctt_con h3{ margin:36px 0 12px; font-size:19px; font-weight:500; }
.oc-sub #bo_v_con table,.oc-sub #ctt_con table{ width:100%; max-width:760px; margin:0 0 10px; font-size:15px; border-top:1px solid var(--oc-dark-text); }
.oc-sub #bo_v_con th,.oc-sub #bo_v_con td,.oc-sub #ctt_con th,.oc-sub #ctt_con td{ padding:13px 14px; border-bottom:1px solid var(--oc-lline); text-align:left; vertical-align:top; }
.oc-sub #bo_v_con th,.oc-sub #ctt_con th{ width:32%; font-weight:400; color:var(--oc-dark-mut); white-space:nowrap; }
.oc-sub #bo_v_con ul,.oc-sub #ctt_con ul{ padding:0; }
.oc-sub #bo_v_con li,.oc-sub #ctt_con li{ position:relative; padding:7px 0 7px 20px; list-style:none; }
.oc-sub #bo_v_con li::before,.oc-sub #ctt_con li::before{ content:""; position:absolute; left:2px; top:17px; width:7px; height:7px; border-radius:50%; background:linear-gradient(100deg,#1aa6c4,#6a58e8); }

/* 1. 첫 화면 ------------------------------------------------------------ */
.oc-hero{ position:relative; display:flex; align-items:flex-end; min-height:max(640px,100vh); padding:calc(var(--oc-fixedh) + 40px) 0 72px; overflow:hidden; }
.oc-hero__bg{ position:absolute; inset:0; background:var(--oc-ink); }
.oc-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(11,13,17,.92) 0%,rgba(11,13,17,.55) 45%,rgba(11,13,17,.2) 100%), linear-gradient(0deg,rgba(11,13,17,.95) 0%,transparent 40%); }
.oc-hero__img,.oc-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.oc-hero__video{ opacity:0; transition:opacity 1.2s; }
.oc-hero__video.is-on{ opacity:1; }
.oc-hero__rings{ position:absolute; right:-8vw; top:50%; width:62vw; max-width:900px; aspect-ratio:1; transform:translateY(-50%); pointer-events:none; }
.oc-hero__rings i{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(110,231,249,.18); }
.oc-hero__rings i:nth-child(2){ inset:14%; border-color:rgba(139,124,246,.2); }
.oc-hero__rings i:nth-child(3){ inset:30%; border-color:rgba(255,255,255,.12); animation:oc-spin 60s linear infinite; border-style:dashed; }
@keyframes oc-spin{ to{ transform:rotate(360deg); } }
.oc-hero__in{ position:relative; width:100%; }
.oc-hero__en{ font-family:var(--oc-en); font-size:13px; letter-spacing:.36em; color:var(--oc-c1); }
.oc-hero__head{ margin-top:18px; font-size:clamp(44px,7vw,96px); font-weight:500; line-height:1.08; letter-spacing:-.045em; }
.oc-hero__desc{ margin-top:22px; max-width:480px; font-size:18px; color:#b9c0cc; }
.oc-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.oc-hero__facts{ display:flex; flex-wrap:wrap; gap:0; margin-top:64px; border-top:1px solid var(--oc-dline); }
.oc-hero__facts>div{ padding:20px 40px 0 0; margin-right:40px; }
.oc-hero__facts>div+div{ padding-left:40px; border-left:1px solid var(--oc-dline); }
.oc-hero__facts dt{ font-family:var(--oc-en); font-size:28px; font-weight:300; }
.oc-hero__facts dd{ font-size:13.5px; color:var(--oc-mut); }

/* 2. 제품 --------------------------------------------------------------- */
.oc-tabs{ display:inline-flex; gap:4px; padding:5px; margin-bottom:34px; border-radius:99px; background:var(--oc-light2); }
.oc-tabs button{ height:44px; padding:0 24px; border:0; border-radius:99px; background:transparent; font-size:15px; color:var(--oc-dark-mut); cursor:pointer; transition:.2s; }
.oc-tabs button.is-on{ background:var(--oc-dark-text); color:#fff; }
.oc-prod{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.oc-prod li[hidden]{ display:none; }
.oc-prod a{ position:relative; display:flex; flex-direction:column; height:100%; padding:28px 28px 26px; border-radius:28px; background:#fff; overflow:hidden; transition:transform .3s, box-shadow .3s; }
.oc-prod a:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(20,23,29,.1); }
.oc-prod__ph{ display:block; width:78%; aspect-ratio:1; margin:6px auto 26px; border-radius:50%; overflow:hidden; background:var(--oc-light2);
  box-shadow:0 0 0 10px #fff, 0 0 0 11px var(--oc-lline); }
.oc-prod__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.oc-prod a:hover .oc-prod__ph img{ transform:scale(1.08); }
.oc-prod__cate{ font-family:var(--oc-en); font-size:11.5px; letter-spacing:.22em; color:var(--oc-dark-mut); text-transform:uppercase; }
.oc-prod strong{ margin-top:4px; font-size:22px; font-weight:500; letter-spacing:-.03em; }
.oc-prod dl{ display:grid; grid-template-columns:1.5fr 1.2fr .8fr; gap:8px; margin:18px 0 20px; padding-top:16px; border-top:1px solid var(--oc-lline); }
.oc-prod dt{ font-size:11.5px; color:var(--oc-dark-mut); }
.oc-prod dd{ font-family:var(--oc-en); font-size:14px; }
.oc-prod__more{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; font-size:14px; font-weight:500; }
.oc-prod a:hover .oc-prod__more{ color:#6a58e8; }

/* 3. 배율 시뮬레이터 ---------------------------------------------------- */
.oc-mag{ background:radial-gradient(circle at 75% 50%, #1a1f2b 0%, var(--oc-ink) 60%); }
.oc-mag__in{ display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; }
.oc-mag__ctrl{ margin-top:36px; }
.oc-mag__ctrl input[type=range]{ width:100%; height:28px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; }
.oc-mag__ctrl input[type=range]::-webkit-slider-runnable-track{ height:2px; background:var(--oc-grad); border-radius:2px; }
.oc-mag__ctrl input[type=range]::-moz-range-track{ height:2px; background:var(--oc-grad); border-radius:2px; }
.oc-mag__ctrl input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; margin-top:-12px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(110,231,249,.22); }
.oc-mag__ctrl input[type=range]::-moz-range-thumb{ width:26px; height:26px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(110,231,249,.22); }
.oc-mag__ticks{ display:flex; justify-content:space-between; margin-top:6px; font-family:var(--oc-en); font-size:12px; color:var(--oc-mut); }
.oc-mag__ticks li{ width:0; display:flex; justify-content:center; white-space:nowrap; }
.oc-mag__data{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:34px; border-top:1px solid var(--oc-dline); border-bottom:1px solid var(--oc-dline); }
.oc-mag__data>div{ padding:18px 0; }
.oc-mag__data>div+div{ padding-left:22px; border-left:1px solid var(--oc-dline); }
.oc-mag__data dt{ font-size:12.5px; color:var(--oc-mut); }
.oc-mag__data dd{ font-family:var(--oc-en); font-size:34px; font-weight:300; line-height:1.2; }
.oc-mag__data dd small{ margin-left:3px; font-size:13px; color:var(--oc-mut); }
.oc-mag__hint{ margin-top:16px; font-size:15px; color:#cfd5de; min-height:1.7em; }
.oc-mag__view{ display:flex; justify-content:center; }
.oc-mag__stage{ --oc-mag:3; --oc-fov:.8; position:relative; width:min(100%,520px); aspect-ratio:1; border-radius:50%; overflow:hidden; background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 0 18px rgba(255,255,255,.03), 0 0 0 19px rgba(110,231,249,.18), 0 40px 80px rgba(0,0,0,.6); }
.oc-mag__stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(calc(.6 + var(--oc-mag) * .5));   /* 육안 1.1 ~ 6배 3.6 — 원을 늘 채우고 고배율에서 너무 뭉개지지 않게 */ transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .6s; }
/* 시야 링 — 배율이 높을수록 초점이 맞는 범위가 좁아지는 것을 가장자리 흐림으로 */
.oc-mag__ring{ position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, transparent calc(var(--oc-fov) * 48%), rgba(0,0,0,.55) calc(var(--oc-fov) * 48% + 12%), rgba(0,0,0,.92) 72%);
  transition:background .6s; }
.oc-mag__stage::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 60px rgba(0,0,0,.8); pointer-events:none; }

/* 4. 헤드라이트 --------------------------------------------------------- */
.oc-lamp__in{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
.oc-lamp__ph{ --oc-tint:transparent; position:relative; border-radius:32px; overflow:hidden; aspect-ratio:4/3; background:#222; }
.oc-lamp__ph img{ width:100%; height:100%; object-fit:cover; filter:brightness(.82); }
.oc-lamp__ph::after{ content:""; position:absolute; inset:0; background:var(--oc-tint); mix-blend-mode:color; transition:background .5s; }
.oc-lamp__beam{ position:absolute; left:50%; top:42%; width:70%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.28), transparent 62%); mix-blend-mode:screen; pointer-events:none; }
.oc-kelvin{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:34px; }
.oc-kelvin button{ display:flex; flex-direction:column; align-items:flex-start; padding:16px 18px; border:1px solid var(--oc-lline); border-radius:18px; background:#fff; cursor:pointer; text-align:left; transition:.2s; }
.oc-kelvin b{ font-family:var(--oc-en); font-size:20px; font-weight:600; }
.oc-kelvin span{ font-size:13px; color:var(--oc-dark-mut); }
.oc-kelvin button:nth-child(1) b{ color:#d9822b; }
.oc-kelvin button:nth-child(3) b{ color:#3b82f6; }
.oc-kelvin button.is-on{ border-color:var(--oc-dark-text); box-shadow:0 0 0 1px var(--oc-dark-text); }
.oc-lamp__desc{ margin-top:16px; font-size:15.5px; color:var(--oc-dark-mut); min-height:1.7em; }
.oc-spec{ display:grid; grid-template-columns:1fr 1fr; margin-top:28px; border-top:1px solid var(--oc-lline); }
.oc-spec>div{ padding:14px 0; border-bottom:1px solid var(--oc-lline); }
.oc-spec>div:nth-child(even){ padding-left:20px; border-left:1px solid var(--oc-lline); }
.oc-spec dt{ font-size:12.5px; color:var(--oc-dark-mut); }
.oc-spec dd{ font-size:16px; font-weight:500; }

/* 5. 맞춤 제작 ---------------------------------------------------------- */
.oc-bespoke__in{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.oc-bespoke__sticky{ position:sticky; top:calc(var(--oc-fixedh) + 30px); }
.oc-bespoke__video,.oc-bespoke__sticky>img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:260px 260px 32px 32px; background:var(--oc-ink3); }
.oc-bespoke__cap{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:14px; color:var(--oc-mut); }
.oc-bespoke__cap .oc-ico{ color:var(--oc-c1); }
.oc-steps{ margin-top:44px; counter-reset:s; }
.oc-steps li{ display:grid; grid-template-columns:64px 1fr; gap:10px; padding:26px 0; border-top:1px solid var(--oc-dline); }
.oc-steps li:last-child{ border-bottom:1px solid var(--oc-dline); }
.oc-steps li>span{ font-family:var(--oc-en); font-size:15px; background:var(--oc-grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-top:3px; }
.oc-steps h3{ font-size:20px; font-weight:500; }
.oc-steps p{ margin-top:6px; font-size:15px; color:var(--oc-mut); }

/* 6. 보증 --------------------------------------------------------------- */
.oc-support{ display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:start; }
.oc-warranty{ width:100%; margin-top:36px; font-size:15.5px; }
.oc-warranty thead th{ padding:10px 0; border-bottom:1px solid var(--oc-dark-text); text-align:left; font-size:12.5px; font-weight:400; color:var(--oc-dark-mut); }
.oc-warranty tbody th,.oc-warranty td{ padding:18px 0; border-bottom:1px solid var(--oc-lline); text-align:left; font-weight:400; }
.oc-warranty td{ font-family:var(--oc-en); font-size:22px; text-align:right; }
.oc-warranty thead th:last-child{ text-align:right; }
.oc-after{ padding:36px 34px; border-radius:32px; background:var(--oc-ink); color:var(--oc-text); }
.oc-after h3{ font-family:var(--oc-en); font-size:22px; font-weight:400; }
.oc-after ol{ position:relative; margin:26px 0 30px; }
.oc-after ol::before{ content:""; position:absolute; left:19px; top:20px; bottom:20px; width:1px; background:var(--oc-grad); }
.oc-after li{ position:relative; display:flex; align-items:center; gap:16px; padding:10px 0; font-size:16px; }
.oc-after li span{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--oc-ink3); border:1px solid var(--oc-dline); font-family:var(--oc-en); font-size:12px; color:var(--oc-c1); }
.oc-after .oc-btn--line{ color:#fff; height:48px; }
.oc-after .oc-btn--line:hover{ background:#fff; color:var(--oc-ink); border-color:#fff; }

/* 7. 전시회 · 인사이트 -------------------------------------------------- */
.oc-news{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.oc-news__hd h2{ font-size:clamp(24px,2.6vw,32px); }
.oc-events,.oc-insight{ margin-top:30px; border-top:1px solid var(--oc-dline); }
.oc-events li a{ display:grid; grid-template-columns:130px 1fr; gap:4px 18px; padding:20px 0; border-bottom:1px solid var(--oc-dline); }
.oc-events time{ grid-row:span 2; font-family:var(--oc-en); font-size:13.5px; color:var(--oc-c1); padding-top:2px; }
.oc-events strong{ font-size:17px; font-weight:500; }
.oc-events span{ font-size:13.5px; color:var(--oc-mut); }
.oc-events li a:hover strong,.oc-insight li a:hover strong{ color:var(--oc-c1); }
.oc-insight li a{ display:block; padding:20px 0; border-bottom:1px solid var(--oc-dline); }
.oc-insight span{ font-size:12px; color:var(--oc-c2); }
.oc-insight strong{ display:block; font-size:17px; font-weight:500; }
.oc-insight p{ margin-top:4px; font-size:14px; color:var(--oc-mut); }
.oc-more{ display:inline-flex; align-items:center; gap:6px; margin-top:20px; font-size:14px; color:var(--oc-mut); }
.oc-more:hover{ color:#fff; }

/* 8. FAQ ---------------------------------------------------------------- */
.oc-faq{ display:grid; grid-template-columns:1fr 2fr; gap:64px; }
.oc-faq__list{ border-top:1px solid var(--oc-dark-text); }
.oc-faq details{ border-bottom:1px solid var(--oc-lline); }
.oc-faq summary{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; cursor:pointer; list-style:none; }
.oc-faq summary::-webkit-details-marker{ display:none; }
.oc-faq summary h3{ font-size:18px; font-weight:500; }
.oc-faq summary .oc-ico{ width:22px; height:22px; transition:transform .25s; }
.oc-faq details[open] summary .oc-ico{ transform:rotate(45deg); }
.oc-faq details p{ padding:0 40px 24px 0; color:var(--oc-dark-mut); }

/* 9. 피팅 신청 ---------------------------------------------------------- */
.oc-fit{ position:relative; overflow:hidden; }
.oc-fit::before{ content:""; position:absolute; left:-220px; bottom:-220px; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,124,246,.16), transparent 65%); pointer-events:none; }
.oc-fit__in{ position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
.oc-fit__info{ margin-top:34px; }
.oc-fit__info li{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid var(--oc-dline); font-size:15px; color:#cfd5de; }
.oc-fit__info .oc-ico{ margin-top:5px; color:var(--oc-c1); }
.oc-fit__info a:hover{ color:#fff; text-decoration:underline; }

.oc-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; padding:36px; border-radius:32px; background:var(--oc-ink2); border:1px solid var(--oc-dline); }
.oc-form__done{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:16px; background:rgba(110,231,249,.1); color:var(--oc-c1); font-weight:500; }
.oc-form__row{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.oc-form__row.is-wide{ grid-column:1 / -1; }
.oc-form__row label,.oc-form__lb{ font-size:13px; color:var(--oc-mut); }
.oc-form__row label b,.oc-form__lb b{ color:var(--oc-c1); font-weight:400; }
.oc-form input[type=text],.oc-form input[type=tel],.oc-form input[type=email],.oc-form input[type=date],.oc-form select,.oc-form textarea{
  width:100%; padding:13px 16px; border:1px solid var(--oc-dline); border-radius:14px; background:var(--oc-ink3); color:var(--oc-text);
  font:inherit; font-size:15px; color-scheme:dark; }
.oc-form textarea{ resize:vertical; line-height:1.7; }
.oc-form input:focus,.oc-form select:focus,.oc-form textarea:focus{ outline:none; border-color:var(--oc-c1); box-shadow:0 0 0 3px rgba(110,231,249,.15); }
.oc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.oc-chips label{ position:relative; font-size:14.5px; color:var(--oc-text); }
.oc-chips input{ position:absolute; opacity:0; }
.oc-chips span{ display:block; padding:9px 16px; border:1px solid var(--oc-dline); border-radius:99px; cursor:pointer; transition:.15s; }
.oc-chips input:checked+span{ border-color:transparent; background:var(--oc-grad); color:#0b0d11; font-weight:700; }
.oc-chips input:focus-visible+span{ outline:2px solid var(--oc-c1); outline-offset:2px; }
.oc-form__captcha #captcha{ margin-top:2px; }
.oc-form__captcha #captcha input{ color:#000; }
.oc-form__agree{ grid-column:1 / -1; font-size:13.5px; color:var(--oc-mut); }
.oc-form__agree label{ display:inline-flex; align-items:center; gap:8px; color:var(--oc-text); }
.oc-form__agree>a{ margin-left:10px; text-decoration:underline; }
.oc-form__agree p{ margin-top:6px; font-size:12.5px; }
.oc-form input[type=checkbox]{ accent-color:#6ee7f9; width:16px; height:16px; }
.oc-form__err{ grid-column:1 / -1; margin:0; padding:12px 16px; border-radius:14px; background:rgba(248,113,113,.12); color:#fca5a5; font-size:14px; }
.oc-form__submit{ grid-column:1 / -1; height:60px; border:0; cursor:pointer; font-size:17px; }
.oc-form__submit:disabled{ opacity:.5; cursor:default; transform:none; }

/* 푸터 ------------------------------------------------------------------ */
.oc-footer{ padding:72px 0 40px; background:#07080b; border-top:1px solid var(--oc-dline); color:var(--oc-mut); font-size:14px; }
.oc-footer__top{ display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--oc-dline); }
.oc-footer__brand .oc-logo__txt{ color:#fff; font-size:22px; }
.oc-footer__brand p{ margin:10px 0 16px; }
.oc-footer__contact>div{ display:flex; gap:18px; padding:6px 0; }
.oc-footer__contact dt{ width:40px; font-family:var(--oc-en); font-size:12px; letter-spacing:.1em; padding-top:2px; }
.oc-footer__contact dd{ color:#cfd5de; }
.oc-footer__bottom{ padding-top:28px; }
.oc-footer__nav{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-bottom:12px; }
.oc-footer__nav b{ color:#e8ebf0; font-weight:500; }
.oc-footer__nav a:hover{ color:#fff; }
.oc-footer__co{ font-size:13px; line-height:1.85; }
.oc-footer__co a{ color:var(--oc-c1); text-decoration:underline; }
.oc-footer__copy{ margin-top:14px; font-family:var(--oc-en); font-size:11.5px; }

/* 모바일 하단 버튼 ------------------------------------------------------ */
.oc-dock{ display:none; position:fixed; left:14px; right:14px; bottom:14px; z-index:70; justify-content:center; align-items:center; gap:8px; height:54px;
  border-radius:99px; background:var(--oc-grad); color:#0b0d11; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.4);
  margin-bottom:env(safe-area-inset-bottom,0px); transition:transform .25s; }
.oc-dock.is-off{ transform:translateY(160%); }

/* 반응형 ---------------------------------------------------------------- */
@media (max-width:1100px){
  .oc-gnb>ul>li>a{ padding:10px 11px; font-size:14.5px; }
}
@media (max-width:1024px){
  .oc-sec{ padding:90px 0; }
  .oc-gnb,.oc-headcta{ display:none; }
  .oc-burger{ display:block; margin-left:auto; }
  .oc-dock{ display:flex; }
  body{ padding-bottom:82px; }
  .oc-prod{ grid-template-columns:1fr 1fr; }
  .oc-mag__in,.oc-lamp__in,.oc-bespoke__in,.oc-support,.oc-news,.oc-faq,.oc-fit__in{ grid-template-columns:1fr; gap:44px; }
  .oc-mag__view{ order:-1; }
  .oc-bespoke__sticky{ position:static; }
  .oc-bespoke__video,.oc-bespoke__sticky>img{ aspect-ratio:16/10; border-radius:32px; }
  .oc-footer__top{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  :root{ --oc-gutter:18px; }
  .oc-sec{ padding:72px 0; }
  .oc-hero{ min-height:640px; padding-bottom:48px; }
  .oc-hero__rings{ width:120vw; right:-50vw; }
  .oc-hero__desc{ font-size:16px; }
  .oc-hero__cta .oc-btn{ flex:1 1 100%; }
  .oc-hero__facts{ flex-wrap:nowrap; }
  .oc-hero__facts>div{ padding-right:12px; margin-right:12px; }
  .oc-hero__facts>div+div{ padding-left:12px; }
  .oc-hero__facts dt{ font-size:22px; }
  .oc-hero__facts dd{ font-size:12px; }
  .oc-tabs{ display:flex; overflow-x:auto; }
  .oc-tabs button{ flex:none; padding:0 18px; }
  .oc-prod{ grid-template-columns:1fr; }
  .oc-mag__data dd{ font-size:26px; }
  .oc-kelvin{ grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .oc-kelvin button{ padding:12px; }
  .oc-kelvin b{ font-size:16px; }
  .oc-kelvin span{ font-size:11.5px; }
  .oc-after{ padding:28px 22px; }
  .oc-events li a{ grid-template-columns:1fr; }
  .oc-events time{ grid-row:auto; }
  .oc-form{ grid-template-columns:1fr; padding:24px 18px; border-radius:24px; }
}
@media (prefers-reduced-motion:reduce){
  .oc-hero__video,.oc-bespoke__video{ display:none; }
  .oc-hero__rings i{ animation:none; }
  .oc-mag__stage img,.oc-prod a,.oc-prod__ph img{ transition:none; }
}