/* 첫 화면: 어두운 무대 위 실제 테이프 데크, 따뜻한 스포트라이트, 큰 헤드라인 + 언어, 글꼴 */
:root {
  --f-ko: "Geist", "Pretendard Variable", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --f-disp: "Geist", "Pretendard Variable", sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;
  --amber: #ffb04a; --amber-2: #f0861c; --cream: #f3eee6;
}
html.ko { --f-ko: "Pretendard Variable", "Geist", -apple-system, "Apple SD Gothic Neo", sans-serif; --f-disp: "Geist", "Pretendard Variable", sans-serif; }
html:not(.ko) .t-ko, html.ko .t-en { display: none !important; }
body { letter-spacing: -.011em; }
html.ko body { letter-spacing: -.02em; }

/* 언어 */
.lang { display: flex; align-items: center; gap: 2px; height: 38px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #1b1d21; border: 1px solid #2d3036; flex: none; }
.lang .ico svg { width: 16px; height: 16px; color: #8a9099; display: block; margin-right: 4px; }
.lang button { border: 0; background: none; color: #a9afb7; height: 30px; padding: 0 11px; border-radius: 999px; cursor: pointer; font: 600 12.5px var(--f-ko); }
html:not(.ko) .lang [data-lang="en"], html.ko .lang [data-lang="ko"] { background: #f3f4f6; color: #101216; }
@media (max-width: 560px) { .lang .ico { display: none; } .lang { padding: 3px; } .lang button { padding: 0 9px; } }

/* 헤더·공지 정리 */
.promo-bar { background: #15120e; color: #e9dcc6; font: 500 13px var(--f-ko); border-bottom: 1px solid #2a241c; }
.promo-bar b { color: var(--amber); font-weight: 700; margin-right: 6px; }
.main-nav { font: 500 14.5px var(--f-ko); }
.btn { font-family: var(--f-ko); font-weight: 600; letter-spacing: -.01em; }
.btn.amber { background: linear-gradient(180deg, var(--amber), var(--amber-2)); color: #1c1003; box-shadow: 0 10px 30px -8px rgba(255, 150, 40, .65), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.amber:hover { filter: brightness(1.06); }
.btn .pi svg { width: 15px; height: 15px; display: block; }

/* ---------- 무대 ---------- */
.stage-hero { position: relative; overflow: hidden; background: #0a0908; color: var(--cream); padding-block: clamp(36px, 6vh, 80px) 34px; isolation: isolate; }
.sh-light { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 60% at 70% 32%, rgba(255, 168, 72, .34), transparent 70%), radial-gradient(30% 40% at 72% 30%, rgba(255, 214, 160, .18), transparent 70%),
              radial-gradient(40% 50% at 8% 100%, rgba(90, 120, 200, .10), transparent 70%); animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .75; transform: scale(1.04); } }
.sh-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: -1; background: linear-gradient(180deg, transparent, rgba(255, 190, 120, .05) 40%, rgba(0, 0, 0, .6)); pointer-events: none; }
.stage-hero .grain { z-index: 0; opacity: .14; }
.sh-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(20px, 3vw, 56px); align-items: center; min-height: min(620px, 66vh); }
.sh-eyebrow { font: 500 12.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #b9a98f; margin: 0 0 22px; animation: rise 1s .05s var(--ease) both; }
html.ko .sh-eyebrow { font-family: var(--f-ko); letter-spacing: .04em; font-weight: 600; }
.sh-title { font: 600 clamp(58px, 7.8vw, 132px)/.9 var(--f-ko); letter-spacing: -.055em; margin: 0; color: var(--cream); }
.sh-title .w { display: inline-block; animation: rise 1.1s var(--ease) both; }
.sh-title .w:nth-child(2) { animation-delay: .12s; } .sh-title .w:nth-child(3) { animation-delay: .24s; }
.sh-title em { font: italic 400 1.1em/.9 var(--f-serif); letter-spacing: -.02em; padding-right: .06em;
  background: linear-gradient(100deg, #ffe2b8 0%, var(--amber) 45%, #e8631f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ko .sh-title { font-size: clamp(44px, 5.4vw, 88px); line-height: 1.06; letter-spacing: -.05em; font-weight: 800; }
html.ko .sh-title em { font: inherit; font-style: normal; letter-spacing: inherit; }
.sh-sub { font: 400 clamp(16.5px, 1.35vw, 20px)/1.6 var(--f-ko); color: #b8afa3; max-width: 30em; margin: 26px 0 0; animation: rise 1.1s .3s var(--ease) both; }
.sh-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; animation: rise 1.1s .42s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.sh-deck { position: relative; perspective: 1800px; animation: deckin 1.6s .15s var(--ease) both; }
@keyframes deckin { from { opacity: 0; transform: translateX(80px) translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.deck-tilt { position: relative; transform: rotateY(-13deg) rotateX(5deg); transform-style: preserve-3d; transition: transform 1.2s var(--ease);
  -webkit-box-reflect: below 6px linear-gradient(transparent 72%, rgba(255, 255, 255, .1)); }
.deck-tilt .deck { border-radius: 10px; box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px -40px rgba(255, 160, 60, .45); }
.sheen { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) no-repeat; background-size: 300% 100%; animation: sweep 7s 1.6s ease-in-out infinite; }
@keyframes sweep { 0% { background-position: 120% 0; } 45%, 100% { background-position: -40% 0; } }
.sh-deck .hint-bubble { animation-delay: 2s; }

/* 라인업 줄 */
.lineup { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(26px, 4vh, 48px); }
.lu { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px); transition: transform .35s var(--ease), background .3s, border-color .3s; animation: rise 1s calc(.6s + var(--d, 0s)) var(--ease) both; min-width: 0; }
.lu:nth-child(2) { --d: .07s; } .lu:nth-child(3) { --d: .14s; } .lu:nth-child(4) { --d: .21s; } .lu:nth-child(5) { --d: .28s; }
.lu:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.lu-img { flex: none; width: 58px; height: 58px; border-radius: 11px; background: var(--bg); display: grid; place-items: center; padding: 6px; }
.lu-img img { max-height: 46px; max-width: 46px; width: auto; height: auto; object-fit: contain; border-radius: 3px; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.lu-t { min-width: 0; display: flex; flex-direction: column; }
.lu-t b { font: 600 15px var(--f-disp); color: #fff; letter-spacing: -.01em; }
.lu-t small { font: 400 12px var(--f-ko); color: #9b9488; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-new { position: absolute; top: 8px; right: 8px; font: 600 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #1c1003; background: var(--amber); padding: 2px 7px; border-radius: 999px; }

@media (max-width: 960px) {
  .sh-in { grid-template-columns: 1fr; min-height: 0; gap: 34px; }
  .sh-title { font-size: clamp(52px, 13vw, 96px); }
  html.ko .sh-title { font-size: clamp(40px, 10vw, 72px); }
  .deck-tilt { transform: rotateY(-8deg) rotateX(4deg); }
  .lineup { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .lineup::-webkit-scrollbar { display: none; }
  .lu { flex: 0 0 230px; }
}

/* ---------- 신제품 배너 ---------- */
.newrel { position: relative; overflow: hidden; background: var(--bg); color: #fff; padding-block: clamp(70px, 9vw, 120px); isolation: isolate; }
.newrel .grain { z-index: 0; }
.newrel-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.newrel-shot { justify-self: center; perspective: 1400px; }
.newrel-shot img { height: clamp(360px, 46vw, 620px); width: auto; border-radius: 12px; transform: rotateY(12deg) rotateZ(-2deg); box-shadow: -40px 60px 100px -30px rgba(0, 0, 0, .7); transition: transform 1s var(--ease); }
.newrel:hover .newrel-shot img { transform: rotateY(6deg) rotateZ(-1deg); }
.newrel-name { font: 600 clamp(56px, 7vw, 112px)/.95 var(--f-disp); letter-spacing: -.05em; margin: 0; }
.newrel-line { font: italic 400 clamp(28px, 3.2vw, 46px)/1.1 var(--f-serif); margin: 14px 0 0; color: #ffe3c4; }
html.ko .newrel-line { font: 700 clamp(22px, 2.4vw, 32px)/1.3 var(--f-ko); letter-spacing: -.04em; }
.newrel-desc { color: rgba(255, 255, 255, .78); font-size: 17px; max-width: 32em; margin: 18px 0 0; }
.newrel .sh-ctas { animation: none; }
@media (max-width: 860px) { .newrel-in { grid-template-columns: 1fr; } .newrel-shot img { height: 380px; transform: none; } }

/* ---------- 나머지 글꼴 정리 ---------- */
.kicker { font: 500 12px var(--f-mono); letter-spacing: .16em; }
html.ko .kicker { font-family: var(--f-ko); letter-spacing: .06em; font-weight: 700; }
.sec-title, .sec-h, .feature-title { font-family: var(--f-ko); font-weight: 600; letter-spacing: -.045em; }
html.ko .sec-title, html.ko .sec-h { font-weight: 800; letter-spacing: -.04em; }
.sec-title em { font: italic 400 1.08em var(--f-serif); color: var(--amber); letter-spacing: -.01em; }
html.ko .sec-title em { font: inherit; color: var(--amber); }
.pcard h3, .pdp-name, .bundle-list li, .dl-row b, .lu-t b { font-family: var(--f-disp); font-stretch: 100%; text-transform: none; }
.pcard h3 { font-weight: 600; font-size: 22px; letter-spacing: -.03em; }
.pdp-name { font-weight: 600; letter-spacing: -.05em; font-size: clamp(48px, 5.8vw, 82px); }
.pdp-line { font: italic 400 clamp(24px, 2.4vw, 32px)/1.15 var(--f-serif); letter-spacing: -.01em; }
html.ko .pdp-line { font: 700 clamp(19px, 1.8vw, 23px)/1.35 var(--f-ko); letter-spacing: -.035em; }
.stat .n { font-family: var(--f-disp); font-weight: 600; font-stretch: 100%; letter-spacing: -.04em; color: var(--amber); }
.mono, .formats li { font-family: var(--f-mono); }
.price { font-weight: 600; }
.lab-card .read, .lab-card .kn output { font-family: var(--f-mono); }
.hdr { background: rgba(12, 11, 10, .9); border-bottom-color: #221f1b; }
.search { background: #1a1816; border-color: #2c2824; }
.lang { background: #1a1816; border-color: #2c2824; }
.sh-in { min-height: min(560px, 60vh); }
.stage-hero { padding-block: clamp(28px, 5vh, 64px) 28px; }
@media (max-width: 560px) { .search { display: none; } .hdr-in { justify-content: space-between; } .lang { margin-left: auto; } }
.news > * { min-width: 0; } @media (max-width: 760px) { .news { grid-template-columns: minmax(0, 1fr); } }

/* 돌릴 수 있는 곳 안내 */
.knobstage { position: relative; display: inline-block; max-width: 100%; }
.knobstage img.base { max-height: clamp(240px, 34vw, 460px); width: auto; max-width: 100%; border-radius: 8px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.stage .knobstage img { box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.rot-crop.pulse, .kn .face.pulse { animation: ring 1.6s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255, 176, 74, .75); } 100% { box-shadow: 0 0 0 14px rgba(255, 176, 74, 0); } }
.kn { position: relative; }
.kn > .hint-bubble { top: -10px; }
.hint-bubble { font-family: var(--f-ko); font-weight: 600; letter-spacing: -.01em; z-index: 5; }