/* ============================================================
   Hue 제안 콘셉트 — 제품 상세 페이지 공유 디자인 시스템
   (philipshue.html과 같은 DNA: 터너식 대기 배경 + 마우스 빛 필드 +
    @property 씬 테마 + 반투명 유리. JS는 assets/js/philipshue.js 재사용)
   ============================================================ */
@property --th-a{syntax:"<color>";inherits:true;initial-value:#ffc07a}
@property --th-b{syntax:"<color>";inherits:true;initial-value:#e0359b}
@property --th-c{syntax:"<color>";inherits:true;initial-value:#7b3ff2}
@property --th-d{syntax:"<color>";inherits:true;initial-value:#2f6bff}

:root{
  --bg:#08080c; --panel:rgba(18,18,28,.5); --panel-2:rgba(22,22,31,.38);
  --ink:#f4f3fb; --ink-2:#c4c2d4; --muted:#8d8aa3; --line:rgba(255,255,255,.08);
  --vio:#7b3ff2; --mag:#e0359b; --blu:#2f6bff; --teal:#15c8c0; --amber:#ffb23f; --rose:#ff5d8f; --indigo:#5b4bff;
  --th-a:#ffc07a; --th-b:#e0359b; --th-c:#7b3ff2; --th-d:#2f6bff;
  --radius:22px; --radius-sm:14px; --maxw:1180px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.8);
  --ease:cubic-bezier(.22,.61,.36,1);
  --lx:50vw; --ly:32vh;
  --ff:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo',system-ui,sans-serif;
}
/* 제품별 기본 무드 (html[data-scene]) — 페이지 전체가 그 색으로 물든다 */
html[data-scene="relax"]{--th-a:#ffd28c;--th-b:#ff8a4c;--th-c:#ff5d8f;--th-d:#ffb23f}
html[data-scene="focus"]{--th-a:#a6e4ff;--th-b:#23c8d8;--th-c:#3a7bff;--th-d:#8fd3ff}
html[data-scene="party"]{--th-a:#ff4db0;--th-b:#7b3ff2;--th-c:#15c8c0;--th-d:#2f6bff}
html[data-scene="movie"]{--th-a:#7a5bff;--th-b:#3a6bff;--th-c:#4a3aa0;--th-d:#5573ff}
html{transition:--th-a .9s var(--ease),--th-b .9s var(--ease),--th-c .9s var(--ease),--th-d .9s var(--ease)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:where(html){word-break:keep-all}
/* 균형 줄바꿈: 헤드라인 줄 고르게(고아줄 방지), 본문 끝줄 외톨이 방지 */
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li,figcaption,blockquote,dd){text-wrap:pretty}
/* 리드/가운데 짧은 단락은 balance (끝줄 외톨이 방지) */
.lead,.sec-head p,.eyebrow{text-wrap:balance}
body{font-family:var(--ff);background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.14;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.3rem,6vw,4.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.04}
h2{font-size:clamp(1.8rem,4vw,2.9rem)}
h3{font-size:1.2rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.lead{color:var(--ink-2);font-size:clamp(1rem,2.2vw,1.18rem);max-width:62ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#000;padding:10px 16px;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blu);outline-offset:3px;border-radius:4px}

/* ---------- 터너식 대기 배경 + 마우스 빛 필드 (테마 변수로 색이 물든다) ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-5;pointer-events:none;
  background:
    radial-gradient(52% 44% at 22% 22%, color-mix(in srgb,var(--th-a) 38%,transparent), color-mix(in srgb,var(--th-a) 15%,transparent) 44%, transparent 72%),
    radial-gradient(40% 32% at 84% 16%, color-mix(in srgb,var(--th-b) 24%,transparent), transparent 66%),
    radial-gradient(46% 36% at 80% 58%, color-mix(in srgb,var(--th-d) 22%,transparent), transparent 68%),
    radial-gradient(42% 34% at 14% 66%, color-mix(in srgb,var(--th-c) 20%,transparent), transparent 68%);
  filter:blur(58px) saturate(1.06);opacity:.9}
body::after{content:"";position:fixed;inset:0;z-index:-5;pointer-events:none;
  background:
    radial-gradient(58% 46% at 64% 82%, color-mix(in srgb,var(--th-d) 26%,transparent), transparent 72%),
    radial-gradient(34% 28% at 30% 88%, color-mix(in srgb,var(--th-b) 16%,transparent), transparent 66%);
  filter:blur(66px);opacity:.8}
html::after{content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;
  background:radial-gradient(122% 96% at 50% 40%, transparent 34%, rgba(4,3,7,.42) 72%, rgba(3,2,5,.62) 100%)}
.ptr-light{position:fixed;top:0;left:0;width:78vmax;height:78vmax;margin:-39vmax 0 0 -39vmax;
  z-index:-3;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--th-a) 30%,transparent),
    color-mix(in srgb,var(--th-b) 19%,transparent) 38%,
    color-mix(in srgb,var(--th-c) 14%,transparent) 62%,
    color-mix(in srgb,var(--th-d) 9%,transparent) 80%, transparent 100%);
  filter:blur(46px);will-change:transform;transform:translate3d(var(--lx),var(--ly),0)}
html::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- top notice ---------- */
.notice{background:linear-gradient(90deg,rgba(123,63,242,.16),rgba(224,53,155,.12));
  border-bottom:1px solid var(--line);font-size:.78rem;color:var(--ink-2);text-align:center;padding:7px 16px}
.notice b{color:var(--ink);font-weight:600}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:100;background:rgba(8,8,12,.72);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.05rem}
.brand .dot{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--vio) 55%,var(--mag));
  box-shadow:0 0 14px rgba(224,53,155,.8),0 0 26px rgba(123,63,242,.5)}
.brand .sub{font-size:.62rem;letter-spacing:.16em;color:var(--muted);font-weight:600;text-transform:uppercase}
.nav-links{display:flex;gap:28px;align-items:center;list-style:none}
.nav-links a{color:var(--ink-2);font-size:.92rem;font-weight:500;transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.95rem;
  border-radius:999px;padding:13px 26px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.btn-primary{color:#fff;background:linear-gradient(120deg,var(--th-c),var(--th-b) 55%,var(--th-d));
  box-shadow:0 10px 30px -8px color-mix(in srgb,var(--th-b) 55%,transparent),0 0 0 1px rgba(255,255,255,.06) inset}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:rgba(255,255,255,.03)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}
.nav .btn{padding:10px 20px}
.menu-toggle{display:none}
.burger{display:none;cursor:pointer;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;
  align-items:center;justify-content:center;background:rgba(255,255,255,.03)}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--ink);position:relative;content:""}
.burger span::before{position:absolute;left:0;top:-6px}.burger span::after{position:absolute;left:0;top:6px}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:22px;flex-wrap:wrap}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}

/* ---------- hero ---------- */
.p-hero{padding:clamp(40px,7vw,80px) 0 clamp(40px,6vw,72px)}
.p-hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,64px);align-items:center}
.p-hero h1{margin:14px 0 0}
.p-hero .lead{margin:22px 0 30px}
.spec-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.spec-chips span{font-size:.78rem;font-weight:600;color:var(--ink-2);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.03);display:inline-flex;align-items:center;gap:7px}
.spec-chips .d{width:7px;height:7px;border-radius:50%;background:var(--th-b);box-shadow:0 0 8px var(--th-b)}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.hero-min{font-size:.9rem;font-weight:600;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:.2s}
.hero-min:hover{color:var(--ink);border-color:var(--ink-2)}
.spec-chips.sub{margin:18px 0 0}
.p-stage{position:relative;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;
  aspect-ratio:4/3.4;background:linear-gradient(180deg,rgba(10,10,18,.45),rgba(7,7,9,.4));
  /* 앰비라이트: 스테이지 빛이 위·아래로 새어나와 주변을 물들인다(TV 뒤 바이어스 라이트). overflow에 안 잘림. 페이지 시그니처색(--th)으로 */
  box-shadow:
    0 -22px 72px -26px color-mix(in srgb,var(--th-b) 58%,transparent),
    0  26px 80px -24px color-mix(in srgb,var(--th-d) 58%,transparent),
    0   0   48px -18px color-mix(in srgb,var(--th-a) 44%,transparent)}
.p-stage::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(40% 55% at 32% 32%, color-mix(in srgb,var(--th-a) 75%,transparent), transparent 58%),
    radial-gradient(38% 52% at 72% 70%, color-mix(in srgb,var(--th-b) 62%,transparent), transparent 58%),
    radial-gradient(34% 48% at 80% 26%, color-mix(in srgb,var(--th-d) 55%,transparent), transparent 60%);
  animation:breathe 9s var(--ease) infinite alternate}
.p-stage .bulb{position:absolute;top:50%;left:50%;width:42%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #fff, color-mix(in srgb,var(--th-a) 90%,#fff) 40%, color-mix(in srgb,var(--th-b) 85%,transparent) 78%, transparent);
  filter:blur(2px);box-shadow:0 0 80px -10px color-mix(in srgb,var(--th-a) 70%,transparent)}
.p-stage .plabel{position:absolute;left:18px;bottom:16px;font-size:.74rem;color:var(--ink-2);
  background:rgba(0,0,0,.4);border:1px solid var(--line);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,9vw,110px) 0;position:relative}
.sec-head{max-width:680px;margin:0 auto clamp(36px,5vw,56px);text-align:center}
.sec-head .lead{margin:16px auto 0;text-align:center}
.glass{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--radius);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}

/* feature grid */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;
  transition:transform .35s var(--ease),border-color .35s var(--ease)}
.feat:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.18)}
.feat .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--th-a) 70%,transparent),color-mix(in srgb,var(--th-b) 70%,transparent));
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--th-b) 60%,transparent)}
.feat h3{margin-top:4px}
.feat p{color:var(--ink-2);font-size:.96rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{padding:26px 24px;position:relative}
.step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;font-weight:800;font-size:.95rem;color:#fff;margin-bottom:14px;
  background:linear-gradient(135deg,var(--th-c),var(--th-b))}
.step h3{font-size:1.06rem;margin-bottom:6px}
.step p{color:var(--ink-2);font-size:.94rem}

/* spec table */
.spec{max-width:760px;margin:0 auto;overflow:hidden}
.spec dl{display:grid;grid-template-columns:minmax(120px,30%) 1fr}
.spec dt,.spec dd{padding:15px 22px;border-top:1px solid var(--line);font-size:.96rem}
.spec dt{color:var(--muted);font-weight:600}
.spec dd{color:var(--ink-2)}
.spec dl>dt:first-of-type,.spec dl>dt:first-of-type+dd{border-top:0}

/* related */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel a{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .35s var(--ease)}
.rel a:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.18)}
.rel .rv{height:120px;position:relative}
.rel .rv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.4))}
.rel .rb{padding:16px 18px 20px}
.rel .rb b{font-size:1rem;font-weight:700}
.rel .rb span{display:block;color:var(--muted);font-size:.85rem;margin-top:3px}
.rv-bulb{background:radial-gradient(60% 70% at 50% 35%,rgba(255,178,63,.85),transparent 60%),rgba(12,12,20,.5)}
.rv-strip{background:linear-gradient(100deg,var(--vio),var(--mag) 40%,var(--blu) 75%,var(--teal)),rgba(12,12,20,.5)}
.rv-outdoor{background:radial-gradient(55% 65% at 40% 60%,rgba(47,107,255,.75),transparent 60%),radial-gradient(45% 55% at 80% 40%,rgba(21,200,192,.6),transparent 60%),rgba(10,10,18,.5)}
.rv-access{background:radial-gradient(50% 60% at 50% 45%,rgba(91,75,255,.7),transparent 60%),radial-gradient(40% 50% at 75% 75%,rgba(255,93,143,.5),transparent 60%),rgba(12,12,20,.5)}

/* cta band */
.cta-band{border-radius:var(--radius);overflow:hidden;position:relative;text-align:center;
  padding:clamp(50px,8vw,92px) clamp(26px,5vw,64px);border:1px solid var(--line)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(40% 70% at 18% 30%, color-mix(in srgb,var(--th-c) 50%,transparent),transparent 60%),
    radial-gradient(38% 65% at 82% 40%, color-mix(in srgb,var(--th-b) 45%,transparent),transparent 60%),
    radial-gradient(40% 70% at 55% 95%, color-mix(in srgb,var(--th-d) 40%,transparent),transparent 60%);
  animation:breathe 11s var(--ease) infinite alternate}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{margin-bottom:16px}
.cta-band .lead{margin:0 auto 30px;text-align:center}
.cta-band .hero-cta{justify-content:center}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .25s var(--ease)}
.faq details[open]{border-color:rgba(255,255,255,.18)}
.faq summary{cursor:pointer;padding:20px 22px;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--muted);font-weight:400;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 22px;color:var(--ink-2)}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 48px;background:rgba(13,13,20,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin-top:20px}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:34px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{color:var(--ink-2);font-size:.92rem}
.foot-links a:hover{color:var(--ink)}
.foot-note{font-size:.8rem;color:var(--muted);max-width:60ch;line-height:1.7}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;font-size:.8rem;color:var(--muted)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@keyframes breathe{from{opacity:.82}to{opacity:1;transform:scale(1.03)}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .p-hero .grid{grid-template-columns:1fr;gap:30px}
  .p-stage{order:-1}
  .feats,.steps,.rel{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:fixed;inset:66px 0 auto 0;flex-direction:column;gap:0;
    background:rgba(8,8,12,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:10px 24px 24px}
  .nav-links.open li{width:100%;border-top:1px solid var(--line)}
  .nav-links.open a{display:block;padding:15px 0}
  .menu-toggle:checked ~ .nav-links{display:flex;position:fixed;inset:66px 0 auto 0;flex-direction:column;
    background:rgba(8,8,12,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:10px 24px 24px}
  .menu-toggle:checked ~ .nav-links li{width:100%;border-top:1px solid var(--line)}
  .menu-toggle:checked ~ .nav-links a{display:block;padding:15px 0}
  .burger{display:flex}
  body::before{opacity:.6;filter:blur(36px)}
}
@media (max-width:560px){ .feats,.steps,.rel{grid-template-columns:1fr} .spec dl{grid-template-columns:1fr} .spec dt{padding-bottom:0;border-top:1px solid var(--line)} .spec dd{padding-top:4px;border-top:0} }

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ptr-light{display:none}
  .reveal{opacity:1;transform:none}
}