/* 체험 페이지(index.html · index.ja.html) 공용 스타일.
원래 index.html 안에 인라인으로 있던 것을 그대로 꺼냈다. 한국어판과 일본어판이
같은 화면이므로 스타일은 한 벌만 둔다 - 두 벌이면 디자인이 갈라진다.
맨 아래 "언어" 절만 새로 더한 것이다. 그 위는 시안 그대로다. */
:root{
--red:#E23A44; --red-dark:#A32D2D; --red-tint:#FCEBEB;
--ink:#16192B; --ink-2:#3D4152; --gray:#6B7280; --mute:#9AA1AC;
--line:#E8EAED; --line-2:#D6D9DE; --soft:#F6F7F8;
--wrap:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);
font-family:"NanumSquareNeo","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
background:var(--red);color:#fff;border:0;border-radius:9px;padding:12px 20px;
font-size:15px;font-weight:700;transition:background .15s}
.btn:hover{background:#C82F39}
.btn-line{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.btn-line:hover{background:var(--soft)}
.btn-sm{padding:9px 14px;font-size:13.5px;width:100%}
.btn .sub{font-weight:400;color:#fff;opacity:.9;font-size:.95em}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:6px;font-size:19px;font-weight:800;letter-spacing:-.015em}
.logo b{color:var(--red);font-weight:800}
.menu{display:flex;align-items:center;gap:4px}
.menu>li{position:relative;list-style:none}
.menu a.top{display:block;padding:8px 13px;font-size:14.5px;color:var(--ink-2);border-radius:8px;line-height:1.25}
.menu a.top em{display:block;font-style:normal;font-size:11px;color:var(--mute);margin-top:2px}
.menu li:hover>a.top em{color:var(--gray)}
.menu li:hover>a.top{background:var(--soft);color:var(--ink)}
.tag{font-size:11.5px;color:var(--mute)}
.tag.live{color:var(--red);font-weight:700}
.navcta{padding:10px 18px;font-size:14px}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:8px;padding:8px 10px}
.hero{padding:52px 0 8px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--red-tint);
color:var(--red-dark);font-size:13px;font-weight:700;padding:6px 14px;border-radius:30px}
.eyebrow .dotpulse{width:7px;height:7px;border-radius:50%;background:var(--red)}
h1{margin:10px 0 0;font-size:clamp(28px,4.2vw,46px);line-height:1.28;
font-weight:800;letter-spacing:-.028em}
.lede{margin:8px auto 0;max-width:620px;font-size:17px;color:var(--gray)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);
gap:22px;padding:36px 0 64px;align-items:stretch}
.upload{border:1.5px dashed var(--line-2);border-radius:16px;padding:30px 26px;
display:flex;flex-direction:column;justify-content:center;text-align:center;
transition:border-color .15s,background .15s}
.upload:hover{border-color:var(--red);background:#FFFBFB}
.upl-ico{width:52px;height:52px;border-radius:14px;background:var(--red-tint);
display:grid;place-items:center;margin:0 auto 14px}
.upl-ico svg{width:22px;height:22px;stroke:var(--red);fill:none;stroke-width:1.8}
.upload h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.upload p{margin:9px 0 20px;font-size:14.5px;color:var(--gray);line-height:1.6}
.limits{margin-top:14px;font-size:12.5px;color:var(--mute);line-height:1.7}
.player{background:var(--ink);border-radius:16px;aspect-ratio:16/9;
position:relative;display:grid;place-items:center;overflow:hidden}
.play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.16);
display:grid;place-items:center;transition:.15s}
.player:hover .play{background:rgba(255,255,255,.26);transform:scale(1.05)}
.play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.chip{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:6px;
background:rgba(255,255,255,.15);color:#fff;font-size:12px;padding:5px 11px;border-radius:30px}
.chip svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2}
.meta{position:absolute;bottom:14px;right:16px;color:rgba(255,255,255,.62);font-size:12px}
.dl{display:flex;gap:10px;margin-top:12px}
.dl a{flex:1;text-align:center;padding:11px;border-radius:9px;font-size:14px;
border:1px solid var(--line-2);transition:.15s}
.dl a:hover{background:var(--soft)}
.dl a.ghost{border-color:var(--line);color:var(--gray)}
.hint{margin:10px 2px 0;font-size:12.5px;color:var(--mute)}
.shell{background:var(--ink);color:#fff;padding:64px 0}
.shell .badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px}
.shell .badge span:first-child{background:var(--red);padding:4px 11px;border-radius:30px}
.shell .badge span:last-child{color:rgba(255,255,255,.5)}
.shell h2{margin:14px 0 10px;font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em}
.shell p{margin:0 0 26px;max-width:560px;color:rgba(255,255,255,.62);font-size:15.5px}
.screens{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.screen{background:rgba(255,255,255,.07);border-radius:12px;aspect-ratio:16/9;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
color:rgba(255,255,255,.55);font-size:13.5px}
.screen svg{width:24px;height:24px;stroke:rgba(255,255,255,.7);fill:none;stroke-width:1.6}
.appwin{border-radius:12px;overflow:hidden;background:#0F1120;border:1px solid rgba(255,255,255,.12);margin-bottom:26px}
.appbar{display:flex;align-items:center;gap:10px;padding:9px 13px;background:rgba(255,255,255,.06)}
.dots{display:flex;gap:5px}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.apptitle{font-size:12px;color:rgba(255,255,255,.55)}
.appview{position:relative;aspect-ratio:16/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#000}
.appcap{font-size:13px;color:rgba(255,255,255,.45)}
.shell .row{display:flex;gap:12px;flex-wrap:wrap}
.btn-dark{background:transparent;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.3)}
.btn-dark:hover{background:rgba(255,255,255,.08)}
section.block{padding:64px 0}
.h2{font-size:clamp(21px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;margin:0}
.sub{margin:8px 0 0;color:var(--gray);font-size:15.5px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:26px}
.step{background:var(--soft);border-radius:14px;padding:22px}
.step .k{font-size:12.5px;color:var(--red-dark);font-weight:700;letter-spacing:.02em}
.step h4{margin:8px 0 6px;font-size:17px;font-weight:700}
.step p{margin:0;font-size:14px;color:var(--gray);line-height:1.65}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:26px}
.card{border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;
transition:.15s}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card .ico{width:40px;height:40px;border-radius:11px;background:var(--red-tint);display:grid;place-items:center;margin-bottom:14px}
.card .ico svg{width:19px;height:19px;stroke:var(--red);fill:none;stroke-width:1.7}
.card h4{margin:0 0 6px;font-size:17px;font-weight:700}
.card h4 .en{font-size:12.5px;font-weight:400;color:var(--mute);letter-spacing:.01em}
.card p{margin:0 0 18px;font-size:14px;color:var(--gray);line-height:1.65;flex:1}
.map{background:var(--soft);padding:64px 0}
.mapbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px;margin-top:24px;overflow-x:auto}
.mapbox svg{display:block;min-width:900px;width:100%;height:auto}
.legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--gray)}
.legend i{display:inline-block;width:26px;height:0;border-top:2px solid var(--red);vertical-align:4px;margin-right:8px}
.legend i.dash{border-top:2px dashed var(--mute)}
.fbox{fill:#fff;stroke:var(--line-2);stroke-width:1}
.fbox.key{fill:var(--red-tint);stroke:#F3C4C7}
.fsub{font-size:11.5px;fill:var(--mute)}
.flabel{font-size:14.5px;font-weight:700;fill:var(--ink)}
.flane{font-size:12.5px;fill:var(--mute);letter-spacing:.04em}
.fline{stroke:var(--red);stroke-width:2;fill:none}
.fdash{stroke:var(--mute);stroke-width:1.6;fill:none;stroke-dasharray:5 5}
.prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:30px}
.prod{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.prod h4{margin:0 0 4px;font-size:16px;font-weight:700}
.prod .en{font-size:12px;color:var(--mute);letter-spacing:.01em}
.prod ul{margin:12px 0 0;padding-left:16px}
.prod li{font-size:13.5px;color:var(--gray);line-height:1.75}
.cta{padding:76px 0;text-align:center}
.cta h2{margin:0 0 10px;font-size:clamp(23px,2.8vw,32px);font-weight:800;letter-spacing:-.02em}
.cta p{margin:0 0 26px;color:var(--gray);font-size:16px}
footer{border-top:1px solid var(--line);padding:30px 0 46px;color:var(--mute);font-size:13px}
.fnav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px;color:var(--ink-2);font-size:13.5px}
@media (max-width:900px){
.menu,.divider{display:none}
.burger{display:block}
.split{grid-template-columns:1fr}
.screens{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
/* ===== 체험 기능용 스타일 (백업본에서 이식) ===== */
/* 파일명은 대기,인코딩 단계에서 보여 준다. 전송 중에는 크기만 남긴다. */
.upl-name,.upl-pick-name,.upl-doing{font-size:13.5px;font-weight:500;
color:var(--ink-2);line-height:1.5}
.upl-name{margin-bottom:9px}
.upl-pick-name{margin-bottom:2px;word-break:break-all}
.upl-doing{word-break:break-all}
.upl-pick{font-size:12.5px;color:var(--gray);margin-bottom:9px;line-height:1.5}
.upl-bar{height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.upl-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--red);
transition:width .18s linear}
.upl-stat{display:flex;justify-content:space-between;gap:10px;
margin-top:8px;font-size:12.5px;color:var(--gray);font-variant-numeric:tabular-nums}
.upl-acts{display:flex;gap:8px;margin-top:14px;justify-content:center}
.upl-acts .btn{padding:9px 12px;font-size:13.5px}
/* 누구로 인증했는지. 인증 전에는 숨는다. */
.upl-who{margin:12px 0 0;font-size:12.5px;color:var(--gray);line-height:1.6}
.upl-who button{background:none;border:0;padding:0;margin-left:6px;font-size:12.5px;
color:var(--red-dark);text-decoration:underline;cursor:pointer}
.upl-msg{margin:14px 0 0;font-size:13.5px;line-height:1.6}
.upl-msg.err{color:var(--red-dark)}
.upl-msg.ok{color:#22794A}
.upl-msg code{font-size:12px;color:var(--gray);word-break:break-all}
.upl-note{margin:12px 0 0;font-size:12.5px;color:var(--red-dark);line-height:1.6}
/* 인코딩 진행 표시 - 기다림(기본) , 완료(done) , 지연(warn) 세 상태 */
.upl-enc{margin:14px 0 0;padding:12px 14px;text-align:left;
border:1px solid var(--line);border-radius:12px;background:var(--soft);
transition:background .2s ease,border-color .2s ease}
.upl-enc-head{display:flex;align-items:center;gap:9px;
font-size:13.5px;font-weight:600;color:var(--ink-2)}
.upl-enc-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--red);
animation:upl-pulse 1.25s ease-in-out infinite}
.upl-enc-sub{margin-top:6px;font-size:12.5px;color:var(--gray);line-height:1.65}
.upl-enc-sub code{font-size:11.5px;word-break:break-all}
.upl-enc-sub b{font-weight:600;color:var(--ink-2)}
.upl-enc.done{background:#F1F8F3;border-color:#CFE7D8}
.upl-enc.done .upl-enc-head{color:#22794A}
.upl-enc.done .upl-enc-dot{background:#2E9E5B;animation:none}
.upl-enc.warn{background:#FFF9F0;border-color:#EFDFC4}
.upl-enc.warn .upl-enc-head{color:#8A5D14}
.upl-enc.warn .upl-enc-dot{background:#C08A22;animation:none}
.upl-enc-again{margin-left:4px;font-size:12.5px;color:var(--red-dark);
background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
@keyframes upl-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.upl-enc-dot{animation:none}}
/* == 영상 업로드 CSS - 끝 ============================================== */
/* == DRM 재생 CSS - 시작 (UPLOAD-CHUNK-PLAN.md 5단계) ================= */
/* .player 는 커버(정지 화면)와 무대(StarPlyr)를 겹쳐 놓은 상자다.
재생이 시작되면 .playing 이 붙어 커버가 빠지고 무대가 드러난다. */
.pl-video{position:absolute;inset:0;background:#000;visibility:hidden}
.player.playing .pl-video{visibility:visible}
.pl-video video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
/* plyr 은 자기 높이를 정하지 않는다 - 16:9 상자를 그대로 물려준다. */
.pl-video .plyr{width:100%;height:100%}
.pl-video .plyr__video-wrapper{height:100%}
.pl-cover{position:absolute;inset:0;display:grid;place-content:center;
justify-items:center;gap:12px;cursor:pointer}
.player.playing .pl-cover{display:none}
/* 한국어는 어절 단위로 끊어야 읽힌다 - keep-all 이 없으면 문장 한가운데서 접힌다 */
/* 토큰 발급 ~ 매니페스트 로딩 사이 - 재생 버튼 자리에서 돌린다 */
.player.loading .play{cursor:progress}
.player.loading .play svg{display:none}
.player.loading .play::after{content:"";width:22px;height:22px;border-radius:50%;
border:2px solid rgba(255,255,255,.28);border-top-color:#fff;
animation:pl-spin .8s linear infinite}
@keyframes pl-spin{to{transform:rotate(1turn)}}
/* 올릴 영상이 아직 없는 무대 - 누를 것이 없다는 것을 눈으로 알린다 */
.player.empty .pl-cover{cursor:default}
.player.empty .play{opacity:.3}
.player.empty:hover .play{background:rgba(255,255,255,.16);transform:none}
/* 올린 영상이 걸리면 칩에 불을 켠다 */
.player:not(.empty) .chip{background:var(--red)}
.pl-msg{margin:10px 2px 0;min-height:1.6em;font-size:13px;line-height:1.6;color:var(--gray)}
.pl-msg.err{color:var(--red-dark)}
@media (prefers-reduced-motion:reduce){.player.loading .play::after{animation:none}}
/* == DRM 재생 CSS - 끝 =============================================== */
/* == 이메일 인증 팝업 CSS - 시작 ======================================= */
.vmodal[hidden]{display:none}
.vmodal{position:fixed;inset:0;z-index:100;padding:24px;
display:flex;align-items:center;justify-content:center;
overflow-y:auto;overscroll-behavior:contain}
.vmodal .dim{position:fixed;inset:0;background:rgba(22,25,43,.52);
backdrop-filter:blur(4px) saturate(85%);animation:v-fade .18s ease-out}
.vbox{position:relative;margin:auto;width:100%;max-width:424px;background:#fff;border-radius:18px;
padding:32px 30px 24px;box-shadow:0 24px 64px rgba(22,25,43,.30);
animation:v-rise .22s cubic-bezier(.2,.7,.3,1)}
/* 닫힐 때 - 아래로 가라앉으며 사라짐 */
.vmodal.closing .dim{animation:v-fade-out .18s ease-in forwards}
.vmodal.closing .vbox{animation:v-sink .18s cubic-bezier(.4,0,.8,.4) forwards}
@keyframes v-fade{from{opacity:0}to{opacity:1}}
@keyframes v-rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes v-fade-out{from{opacity:1}to{opacity:0}}
@keyframes v-sink{from{opacity:1;transform:none}to{opacity:0;transform:translateY(12px) scale(.985)}}
.vclose{position:absolute;top:13px;right:13px;width:32px;height:32px;border:0;border-radius:9px;
background:none;color:var(--mute);font-size:16px;line-height:1;display:grid;place-items:center;
transition:background .15s,color .15s}
.vclose:hover{background:var(--soft);color:var(--ink-2)}
.vico{width:46px;height:46px;border-radius:13px;background:var(--red-tint);
display:grid;place-items:center;margin-bottom:16px}
.vico svg{width:21px;height:21px;stroke:var(--red);fill:none;stroke-width:1.7}
.vico.ok{background:#E9F5EE}
.vico.ok svg{stroke:#2E9E5B}
.vbox h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em}
.vlede{margin:9px 0 0;font-size:14.5px;color:var(--gray);line-height:1.65}
.vlabel{display:block;margin:20px 2px 7px;font-size:13px;font-weight:500;color:var(--ink-2)}
.vinput{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;
font:inherit;font-size:15px;color:var(--ink);background:#fff;
transition:border-color .15s,box-shadow .15s}
.vinput::placeholder{color:var(--mute)}
.vinput:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,58,68,.13)}
.vinput.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,58,68,.13)}
.verr{margin:8px 2px 0;font-size:12.5px;color:var(--red-dark)}
.vbox .btn{width:100%;margin-top:16px;padding:13px}
.vfoot{margin:16px 0 0;font-size:12px;color:var(--mute);line-height:1.75;text-align:center}
.vfoot a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.vdone{text-align:center}
.vdone .vico{margin-left:auto;margin-right:auto}
.vdone-mail{color:var(--ink);font-weight:600}
@media (max-width:480px){
.vmodal{padding:16px}
.vbox{padding:26px 22px 20px}
}
@media (prefers-reduced-motion:reduce){
.vmodal .dim,.vbox,
.vmodal.closing .dim,.vmodal.closing .vbox{animation:none}
}
/* == 이메일 인증 팝업 CSS - 끝 ======================================== */
/* == 아래는 기능 이식(2026-09-04)으로 더한 것. 시안의 기존 규칙은 건드리지 않았다 ==
새 시안의 내려받기는 라 disabled 속성이 없다. aria-disabled 로 표시한다. */
/* ⚠️ hidden 속성보다 display 규칙이 세다. 업로드 버튼(.btn)은 display:inline-flex 라
hidden 을 걸어도 그대로 보였다 - 업로드,인코딩 중에도 버튼이 남아 있던 원인이다. */
[hidden]{display:none!important}
.dl a[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}
/* 새 시안의 플레이어에는 커버 래퍼(.pl-cover)가 없다 - chip/play/meta 가 직접 자식이다.
그래서 "재생 중이면 커버를 감춘다" 를 그 셋에 직접 건다. 마크업은 건드리지 않는다. */
.player.playing>.chip,
.player.playing>.play,
.player.playing>.meta{display:none}
/* 올린 영상이 없을 때는 누를 것이 없다는 뜻을 눈으로 알린다. */
.player.empty>.play{opacity:.3}
.player.empty:hover>.play{background:rgba(255,255,255,.16);transform:none}
.player:not(.empty)>.play{cursor:pointer}
.player.loading>.play{cursor:progress}
.player.loading>.play svg{display:none}
.player.loading>.play::after{content:"";width:22px;height:22px;border-radius:50%;
border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:pl-spin .8s linear infinite}
.upload .btn[aria-busy="true"]{opacity:.6;pointer-events:none}
/* == 언어 =================================================================
.menu 바깥에 둔다 - 900px 아래에서 .menu 는 숨지만 언어는 그때도 보여야 한다. */
.lang{display:flex;align-items:center;gap:2px;margin-right:4px;
border:1px solid var(--line-2);border-radius:9px;padding:2px;background:#fff}
.lang a{display:block;padding:5px 10px;border-radius:7px;line-height:1.2;
font-size:12.5px;font-weight:700;color:var(--gray);white-space:nowrap;
transition:background .15s,color .15s}
.lang a:hover{background:var(--soft);color:var(--ink)}
.lang a.on{background:var(--red-tint);color:var(--red-dark)}
/* 한국어 화면에서도 "日本語" 세 글자는 일본어 글꼴로 그려야 모양이 산다. */
.lang a[lang="ja"]{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif}
/* 일본어판 글꼴. NanumSquareNeo 에는 가나,한자가 없어 그대로 두면
글자마다 다른 글꼴로 떨어져 줄이 들쭉날쭉해진다. */
html[lang="ja"] body{
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic",
"Noto Sans JP","Meiryo","MS PGothic",sans-serif;
letter-spacing:0;
}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] h4{letter-spacing:-.01em}
/* 일본어는 글자 사이 어디서나 줄바꿈된다. 헤더의 좁은 칸에서는 그대로 두면
낱말 한가운데가 잘려 두 줄이 된다 - 이 셋만 붙잡아 둔다. */
.navcta{white-space:nowrap}
html[lang="ja"] .menu a.top{padding:8px 10px}
html[lang="ja"] .menu a.top em{white-space:nowrap;font-size:10.5px}