@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;600;700&display=swap');

:root { color-scheme: dark; --red:#ff2d39; --ice:#bfe2ff; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#030711; }
body { font-family:'Noto Sans KR',sans-serif; overflow:hidden; }
button, a { font:inherit; }
.entrance { position:relative; height:100svh; min-height:620px; overflow:hidden; isolation:isolate; background:#030711; }
.entrance::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg,rgba(2,6,14,.62) 0%,transparent 45%),linear-gradient(0deg,rgba(2,5,12,.45),transparent 35%); }
.scene { position:absolute; inset:0; z-index:1; transition:transform 1.25s cubic-bezier(.2,.75,.15,1),filter 1s ease; transform-origin:70% 45%; }
.frame { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; opacity:0; transition:opacity .2s ease; }
.frame.is-visible { opacity:1; }
.entrance.is-open .scene { transform:translateX(9%) scale(1.1); filter:saturate(.9) brightness(.72); }
.box-trigger { position:absolute; z-index:5; left:61%; top:5%; width:34%; height:47%; border:0; background:transparent; cursor:pointer; color:white; }
.trigger-ring { position:absolute; width:72px; height:72px; left:50%; top:52%; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.55); border-radius:50%; box-shadow:0 0 0 12px rgba(255,45,57,.08),0 0 35px rgba(255,45,57,.35); animation:pulse 2s ease-in-out infinite; }
.trigger-ring::before,.trigger-ring::after { content:""; position:absolute; background:white; left:50%; top:50%; transform:translate(-50%,-50%); }
.trigger-ring::before { width:22px; height:2px; }.trigger-ring::after{width:2px;height:22px}
.trigger-copy { position:absolute; left:50%; top:calc(52% + 54px); transform:translateX(-50%); white-space:nowrap; font-size:13px; font-weight:700; letter-spacing:.15em; text-shadow:0 2px 10px #000; }
.entrance.is-opening .box-trigger,.entrance.is-open .box-trigger { pointer-events:none; opacity:0; transition:opacity .25s; }
.hint { position:absolute; z-index:5; bottom:5.5%; left:50%; transform:translateX(-50%); margin:0; color:rgba(255,255,255,.72); font-size:13px; letter-spacing:.12em; transition:opacity .3s; }
.hint span { display:inline-block; width:26px; height:1px; margin:0 10px 4px 0; background:var(--red); }
.is-opening .hint,.is-open .hint { opacity:0; }
.menu-panel { position:absolute; z-index:4; left:clamp(28px,7vw,120px); top:50%; width:min(430px,40vw); transform:translateY(-44%); opacity:0; pointer-events:none; }
.is-open .menu-panel { opacity:1; pointer-events:auto; transition:opacity .8s .2s ease; }
.eyebrow { color:var(--red); font-size:12px; font-weight:700; letter-spacing:.32em; }
h1 { margin:12px 0 10px; font-family:'Black Han Sans','Noto Sans KR',sans-serif; font-size:clamp(48px,6vw,88px); font-weight:400; line-height:.94; letter-spacing:-.04em; }
h1 em { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.7); font-style:normal; }
.intro { color:rgba(255,255,255,.6); margin:0 0 30px; font-size:14px; }
.entrance-nav { border-top:1px solid rgba(255,255,255,.22); }
.entrance-nav button { display:grid; width:100%; grid-template-columns:40px 1fr auto; align-items:center; gap:10px; min-height:64px; padding:0; border:0; border-bottom:1px solid rgba(255,255,255,.16); color:#fff; background:transparent; text-align:left; font-weight:600; opacity:0; transform:translateX(-20px); cursor:pointer; transition:background .25s,padding .25s,color .25s; }
.is-open .entrance-nav button { animation:menuIn .55s calc(.34s + var(--i) * .1s) forwards; }
.entrance-nav button span { color:var(--red); font-size:11px; }.entrance-nav button b { font-size:18px; font-weight:400; }
.entrance-nav button:hover,.entrance-nav button:focus-visible { padding:0 14px; color:#fff; background:rgba(255,45,57,.14); outline:none; }
.replay { position:absolute; z-index:6; top:28px; right:32px; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:9px 14px; color:rgba(255,255,255,.75); background:rgba(3,7,17,.38); backdrop-filter:blur(8px); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .4s .8s; }
.is-open .replay { opacity:1; pointer-events:auto; }
@keyframes pulse { 50% { transform:translate(-50%,-50%) scale(1.1); box-shadow:0 0 0 22px rgba(255,45,57,0),0 0 48px rgba(255,45,57,.5); } }
@keyframes menuIn { to { opacity:1; transform:none; } }

@media (max-width:720px) {
  .entrance { min-height:540px; }
  .scene { inset:0 -43%; }
  .frame { object-fit:cover; object-position:66% center; }
  .entrance.is-open .scene { transform:translate(24%,-17%) scale(1.25); filter:saturate(.8) brightness(.42); }
  .box-trigger { left:48%; top:4%; width:50%; height:48%; }
  .menu-panel { left:24px; right:24px; top:auto; bottom:5%; width:auto; transform:none; }
  h1 { font-size:44px; margin:8px 0; }
  .intro { margin-bottom:18px; }
  .entrance-nav button { min-height:54px; }
  .hint { width:100%; text-align:center; bottom:4%; }
  .replay { top:18px; right:18px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-delay:0ms!important; transition-duration:.01ms!important; } }

/* Cafe-style main page */
.entrance { transition:transform .85s cubic-bezier(.7,0,.2,1),opacity .7s ease; }
.show-cafe .entrance { transform:translateY(-100%); opacity:0; pointer-events:none; }
.cafe { position:fixed; inset:0; z-index:10; overflow:auto; color:#17202a; background:#f4f3ef; opacity:0; transform:translateY(12%); pointer-events:none; transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .65s ease; }
.show-cafe .cafe { opacity:1; transform:none; pointer-events:auto; }
.cafe-header { position:sticky; top:0; z-index:5; height:84px; display:flex; align-items:center; gap:50px; padding:0 clamp(24px,6vw,100px); border-bottom:1px solid #dddcd6; background:rgba(244,243,239,.92); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:11px; padding:0; border:0; color:#151b22; background:none; cursor:pointer; text-align:left; }
.brand i { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#fff; background:var(--red); font-style:normal; font-size:21px; font-weight:800; }
.brand strong { font-size:12px; line-height:1.05; letter-spacing:.08em; }
.top-nav { display:flex; align-self:stretch; align-items:center; gap:35px; }
.top-nav a { position:relative; display:grid; place-items:center; height:100%; color:#73777b; text-decoration:none; font-size:14px; font-weight:700; }
.top-nav a.active,.top-nav a:hover { color:#171c22; }
.top-nav a.active::after { content:""; position:absolute; bottom:-1px; width:100%; height:3px; background:var(--red); }
.auth-actions { margin-left:auto; display:flex; gap:8px; }.login,.signup { padding:10px 18px; border:1px solid #c7c6c1; border-radius:999px; color:#24292e; background:transparent; cursor:pointer; }.signup { color:#fff; border-color:#17202a; background:#17202a; }
.profile-menu { position:relative; margin-left:auto; }.profile-toggle { display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border:1px solid #d0cfca; border-radius:999px; color:#24292e; background:#fff; cursor:pointer; }.profile-toggle span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#fff; background:var(--red); }.profile-toggle strong { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.profile-dropdown { position:absolute; right:0; top:48px; width:220px; padding:16px; border:1px solid #deddd8; background:#fff; box-shadow:0 15px 45px rgba(14,20,28,.15); }.profile-dropdown p { margin:0 0 12px; overflow:hidden; color:#777; text-overflow:ellipsis; font-size:12px; }.profile-dropdown button { width:100%; padding:9px; border:0; color:#fff; background:#17202a; cursor:pointer; }
.cafe-wrap { width:min(1180px,calc(100% - 48px)); margin:auto; padding:clamp(45px,8vh,90px) 0 70px; }
.welcome { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:50px; }
.welcome>div>p { margin:0 0 14px; color:var(--red); font-size:11px; font-weight:800; letter-spacing:.25em; }
.welcome h2 { margin:0; font-size:clamp(42px,5vw,70px); line-height:1.03; letter-spacing:-.06em; }
.welcome h2 em { color:transparent; -webkit-text-stroke:1px #6d7479; font-style:normal; }
.welcome-copy { margin:0 0 8px; color:#777a7c; font-size:14px; line-height:1.9; }
.cafe-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr); gap:24px; }
.board { padding:30px; border:1px solid #deddd8; background:#fff; }
.board-title { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:25px; }
.board-title small,.quick>p { color:var(--red); font-size:10px; font-weight:800; letter-spacing:.22em; }
.board-title h3 { margin:5px 0 0; font-size:24px; }.board-title>a { color:#777; text-decoration:none; font-size:12px; }
.post-list { padding:0; margin:0; list-style:none; border-top:2px solid #24292e; }
.post-list a { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; padding:21px 4px; border-bottom:1px solid #e8e7e3; color:#23282e; text-decoration:none; }
.post-list .tag { color:var(--red); font-size:11px; font-weight:700; }.post-list strong { font-size:14px; }.post-list time { color:#aaa; font-size:11px; }
.side-stack { display:grid; gap:24px; }.notice-line { display:flex; justify-content:space-between; gap:12px; padding-top:20px; border-top:2px solid #24292e; color:#282d32; text-decoration:none; font-size:13px; }
.notice-line span { color:#999; white-space:nowrap; }.quick { padding:28px 30px; color:#fff; background:#151c26; }
.quick>p { margin:0 0 20px; }.quick>div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick a { display:flex; flex-direction:column; gap:14px; min-height:105px; padding:17px; color:#fff; background:#202a37; text-decoration:none; font-size:12px; }
.quick b { color:var(--red); font-size:23px; }

/* Lumi launch video */
.video-modal { width:min(900px,calc(100% - 36px)); padding:0; border:1px solid rgba(255,255,255,.18); color:#fff; background:#080d16; box-shadow:0 30px 100px rgba(0,0,0,.7); }
.video-modal::backdrop { background:rgba(1,4,9,.86); backdrop-filter:blur(8px); }
.modal-close { position:absolute; z-index:2; top:16px; right:18px; width:40px; height:40px; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#fff; background:rgba(0,0,0,.35); font-size:25px; cursor:pointer; }
.video-heading { padding:28px 32px 22px; }.video-heading p { margin:0 0 4px; color:var(--red); font-size:10px; font-weight:800; letter-spacing:.25em; }.video-heading h2 { margin:0; font-size:25px; }
.video-stage { position:relative; display:grid; place-items:center; aspect-ratio:16/9; background:radial-gradient(circle at 50% 20%,#17273d,#05080e 66%); }
.video-stage video,.video-empty { grid-area:1/1; }.video-stage video { width:100%; height:100%; background:#000; }.video-empty { text-align:center; }.video-empty span { display:grid; place-items:center; width:65px; height:65px; margin:0 auto 18px; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:var(--red); }.video-empty strong { display:block; }.video-empty p { color:#8d96a3; font-size:13px; }

/* Account access */
.auth-modal,.onboarding-modal { width:min(480px,calc(100% - 28px)); max-height:calc(100svh - 28px); overflow:auto; padding:34px; border:1px solid rgba(255,255,255,.16); border-radius:4px; color:#eef2f6; background:#0b111b; box-shadow:0 30px 100px rgba(0,0,0,.72); }.auth-modal::backdrop,.onboarding-modal::backdrop { background:rgba(1,4,9,.82); backdrop-filter:blur(8px); }.auth-brand { display:flex; align-items:center; gap:13px; padding-right:38px; }.auth-brand i { display:grid; place-items:center; width:43px; height:43px; border-radius:50%; color:#fff; background:var(--red); font-style:normal; font-weight:800; }.auth-brand small { color:var(--red); font-size:9px; font-weight:800; letter-spacing:.2em; }.auth-brand h2 { margin:2px 0 0; font-size:25px; }.auth-copy { margin:18px 0 22px; color:#929cab; font-size:13px; line-height:1.7; }.auth-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:16px; border-bottom:1px solid #28313e; }.auth-tabs button { padding:11px; border:0; color:#7f8997; background:none; cursor:pointer; }.auth-tabs button.active { color:#fff; border-bottom:2px solid var(--red); }.google-auth,.auth-submit { width:100%; min-height:46px; border:0; border-radius:3px; font-weight:700; cursor:pointer; }.google-auth { color:#20252b; background:#fff; }.google-auth b { margin-right:8px; color:#4285f4; font-size:17px; }.auth-divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:#687383; font-size:11px; }.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:#293240; }.auth-form { display:grid; gap:14px; }.auth-form>label,.signup-fields>label { display:grid; gap:7px; color:#b8c0cb; font-size:12px; }.auth-form input[type=email],.auth-form input[type=password],.auth-form input[type=text],.signup-fields input,.onboarding-modal input:not([type=radio]) { width:100%; min-width:0; padding:12px 13px; border:1px solid #303a48; border-radius:3px; outline:none; color:#fff; background:#111a27; }.auth-form input:focus { border-color:var(--red); }.signup-fields { display:grid; gap:10px; }.signup-fields label>span { color:#687383; }.nickname-row { display:grid; grid-template-columns:1fr auto; gap:8px; }.nickname-row button { padding:0 12px; border:1px solid #566170; color:#d7dde5; background:#182230; cursor:pointer; }.field-note,.auth-message { min-height:18px; margin:0; color:#8d98a7; font-size:11px; }.field-note.ok,.auth-message.ok { color:#65d79d; }.field-note.error,.auth-message.error { color:#ff737b; }.auth-form fieldset { display:flex; gap:20px; margin:0; padding:10px 12px; border:1px solid #303a48; color:#b8c0cb; font-size:12px; }.auth-form fieldset legend { padding:0 5px; }.auth-submit { color:#fff; background:var(--red); }.auth-submit:disabled,.google-auth:disabled { opacity:.55; cursor:wait; }.text-button { justify-self:center; border:0; color:#8f99a7; background:none; font-size:12px; cursor:pointer; }.auth-close { top:18px; right:18px; }

@media (max-width:760px) {
  .cafe-header { height:68px; gap:13px; padding:0 14px; }.brand strong { display:none; }.top-nav { gap:16px; overflow:auto; }.top-nav a { white-space:nowrap; font-size:12px; }.top-nav a:nth-child(n+3) { display:none; }.auth-actions { gap:5px; }.login,.signup { padding:8px 10px; font-size:11px; }.profile-toggle strong { display:none; }.profile-dropdown { position:fixed; top:66px; right:12px; }.auth-modal,.onboarding-modal { padding:27px 20px; }
  .cafe-wrap { width:calc(100% - 30px); padding-top:38px; }.welcome { display:block; }.welcome-copy { margin-top:22px; }.cafe-grid { grid-template-columns:1fr; }.board { padding:23px 20px; }
  .post-list a { grid-template-columns:42px 1fr; }.post-list time { display:none; }.quick>div { grid-template-columns:1fr 1fr; }
}