/* LUEKY 1.2.2 website look "Midnight taegeuk" (design B).
   Dark night sky, soft red and blue glows from the taegeuk, glass cards, gradient buttons.
   Loaded after site.css when Website > Logo and colors > Look is Midnight. Brand colours still work:
   every tint is mixed from --blue and --red. Screen only, so print stays light. */
@media screen{
:root{
  --bg:#060E1C;--bg2:#081426;--panel:#0B1830;--panel2:#0F203D;
  --glass:rgba(255,255,255,.045);--glass2:rgba(255,255,255,.075);
  --ink:#EAF0FA;--ink2:#C3CEE0;--mut:#93A1B8;--line:rgba(255,255,255,.14);--line2:rgba(255,255,255,.08);--alt:#081426;
  --hb:color-mix(in srgb,var(--blue) 35%,#a8ccff);--hr:color-mix(in srgb,var(--red) 45%,#ffb0b6);
  --tb:color-mix(in srgb,var(--blue) 22%,transparent);--tr:color-mix(in srgb,var(--red) 20%,transparent);
  --ok:#7FD3A0;--ok-sf:rgba(47,160,100,.16);--warn:#FFC27A;--warn-sf:rgba(255,160,60,.14);
  --grad:linear-gradient(95deg,var(--red),color-mix(in srgb,var(--red) 45%,var(--blue)) 55%,var(--blue));
  --r:16px;
  color-scheme:dark}
html{background:var(--bg)}
body{color:var(--ink);background:
  radial-gradient(900px 520px at 8% -6%,color-mix(in srgb,var(--red) 22%,transparent),transparent 70%),
  radial-gradient(1000px 640px at 96% 4%,color-mix(in srgb,var(--blue) 30%,transparent),transparent 70%),
  var(--bg) no-repeat}
::selection{background:color-mix(in srgb,var(--blue) 60%,transparent);color:#fff}
a{color:var(--hb)}a:hover{color:#fff}
h1,h2,h3{letter-spacing:-.02em}
h1{font-size:clamp(34px,5.4vw,60px);letter-spacing:-.03em}
:focus-visible{outline-color:var(--hb)}
.skip{background:#fff;color:#000}
.k{color:var(--hr);letter-spacing:.16em}
.k-inv{color:var(--hr)}
.lede{color:var(--ink2);line-height:1.7}
.mut,.crumb,.crumbs ol{color:var(--mut)}
/* buttons */
.btn{background:var(--grad);color:#fff;border-radius:999px;box-shadow:0 10px 28px -12px color-mix(in srgb,var(--red) 70%,transparent);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{background:var(--grad);color:#fff;filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 14px 34px -12px color-mix(in srgb,var(--red) 80%,transparent)}
.btn2,.btn-inv{background:var(--glass2);color:var(--ink);border:1px solid rgba(255,255,255,.22);border-radius:999px}
.btn2:hover,.btn-inv:hover{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.4)}
.btn:disabled{filter:grayscale(.6);opacity:.55;transform:none}
/* header: frosted night bar with a thin red and blue line */
.nav{background:linear-gradient(90deg,var(--red) 0 50%,var(--blue) 50% 100%) left bottom/100% 1px no-repeat,rgba(6,14,28,.72);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.logo,.logo-inv{color:#fff;letter-spacing:.2em}
.menu>summary{color:var(--ink)}
.menu-panel{background:var(--panel);border-bottom-color:var(--line);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.menu-panel a{color:var(--ink);border-bottom-color:var(--line2)}
.menu-panel a.on{color:var(--hb)}
.langs a,.f4-mlangs a{color:var(--mut)}.langs a.on,.f4-mlangs a.on{color:#fff}
.nav-login{color:var(--ink2)}.nav-login:hover{color:#fff}
/* hero: two glows, gradient words, the logo in a glowing orb */
.hero,.hero-dark{background:transparent;color:var(--ink);border-bottom:0;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;z-index:-1;pointer-events:none}
.hero::before{width:520px;height:520px;left:-160px;top:-200px;background:var(--red)}
.hero::after{width:620px;height:620px;right:-180px;top:40px;background:var(--blue)}
.hero h1,.hero .hero-h{font-size:clamp(36px,5.6vw,66px);line-height:1.04;letter-spacing:-.035em}
.hero h1 em,.hero .hero-h em,.grad-t{background:linear-gradient(90deg,var(--hr),var(--hb));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .k{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--glass2);border:1px solid var(--line);color:#D5DEEC;letter-spacing:.08em;font-size:11.5px}
.hero .k::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(var(--red) 50%,var(--blue) 50%);transform:rotate(33.7deg)}
.hero-dark .lede,.hero-dark .ko-line,.hero-dark .proof,.ko-line,.proof{color:var(--mut)}
.hero-dark .k{color:#D5DEEC}
.hero-dark .btn2{background:var(--glass2);border-color:rgba(255,255,255,.22)}
.stars .off{color:rgba(255,255,255,.18)}
.hero-art,.hero-dark .hero-art,.hero-plain .hero-art{position:relative;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--blue) 45%,#0A1730),#0A1730 72%);border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 90px -40px color-mix(in srgb,var(--blue) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.08);padding:22%}
.hero-art::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px dashed rgba(255,255,255,.2)}
.hero-art img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.hero-pic img,.about-pic img{border-radius:24px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}
.tg-hero{box-shadow:0 0 0 8px var(--bg),0 0 40px color-mix(in srgb,var(--blue) 60%,transparent)}
.gwae{color:rgba(255,255,255,.16)}
/* stats: a glass band */
.stats{background:transparent;box-shadow:none;color:var(--ink)}
.stats-in{background:var(--glass);border:1px solid rgba(255,255,255,.12);border-radius:20px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:0;gap:0;margin-top:8px;margin-bottom:8px}
.stats-in>div{padding:22px 24px}
.stats-in>div+div{border-left:1px solid rgba(255,255,255,.09)}
.stats-in>div:nth-child(3){border-left-width:0}
.stats b{font-size:32px;letter-spacing:-.02em}.stats span{color:var(--mut)}
.stats{padding:12px 20px}
.stats-in{max-width:1120px}
/* sections and cards */
.alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.025) 18%,rgba(255,255,255,.025) 82%,transparent)}
.ph,.invite-band{border-color:var(--line2)}
.card,.alt-card,.f4-app,.chat-list a,.dz-cur,.opt,.face,.code-box,.reply,.bank,.motto{background:var(--glass);border-color:rgba(255,255,255,.12);color:var(--ink)}
.card{border-radius:var(--r);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
a.card{transition:border-color .15s,transform .15s,background .15s}
a.card:hover,.f4-app:hover,.chat-list a:hover{border-color:rgba(255,255,255,.3);background:var(--glass2);color:var(--ink)}
a.card:hover{transform:translateY(-2px)}
.ok-card{background:var(--ok-sf);border-color:rgba(127,211,160,.35)}
.warn-card{background:var(--warn-sf);border-color:rgba(255,194,122,.35)}
.date-card{border-left:3px solid var(--blue)}
.date-card.ev{border-left-color:var(--red)}
.done-card{border-top:3px solid transparent;border-image:var(--grad) 1}
.wait-card,.app-card.best,.chat-list li.best a{border-color:color-mix(in srgb,var(--blue) 70%,#fff 10%)}
.chip,.lg{background:rgba(255,255,255,.08);color:var(--ink2)}
a.chip:hover{background:rgba(255,255,255,.15);color:#fff}
.chip-b,.lg.course{background:var(--tb);color:var(--hb)}
.chip-r,.lg.event{background:var(--tr);color:var(--hr)}
.chip-g,.lg.free{background:var(--ok-sf);color:var(--ok)}
.chip-o,.lg.trip{background:var(--warn-sf);color:var(--warn)}
.lg.busy{background:transparent;border-color:rgba(255,255,255,.3)}
.chip[aria-current]{background:var(--grad);color:#fff}
.ph-img,.blue .ph-img{background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 30%,#0B1830),#0B1830 60%,color-mix(in srgb,var(--red) 18%,#0B1830))}
.cc-img img,.ev-img img,.post-img img,.f4-pic img,.dokdo-pic img{border-radius:12px}
.price,.price-big{color:#fff}
.ticks li::before,.visit-card .ic{color:var(--hb)}
/* blue band becomes a deep gradient band */
.blue{background:linear-gradient(120deg,color-mix(in srgb,var(--blue) 70%,#060E1C),color-mix(in srgb,var(--blue) 35%,#060E1C) 55%,color-mix(in srgb,var(--red) 35%,#060E1C));color:#fff}
.blue p,.blue .prose,.blue .f4-body,.inv-mut{color:#D5DEEC!important}
/* page header with a soft glow and a light trigram */
.ph{background:radial-gradient(600px 260px at 85% 50%,color-mix(in srgb,var(--blue) 28%,transparent),transparent 70%)}
.ph::after{background:linear-gradient(rgba(255,255,255,.16) 0 0) 0 0/100% 13px no-repeat,linear-gradient(rgba(255,255,255,.16) 0 0) 0 23px/100% 13px no-repeat,linear-gradient(rgba(255,255,255,.16) 0 0) 0 46px/100% 13px no-repeat}
/* map */
.map{background:var(--panel);border-color:var(--line)}
.map .grat line{stroke:rgba(255,255,255,.07)}
.map .coast{stroke:color-mix(in srgb,var(--blue) 50%,#9fb3cc)}
.map .pin circle{stroke:var(--panel)}
.map .pin text{fill:#fff;stroke:var(--panel)}
/* faq, prose, tables */
.faq-a,.prose,.facts{color:var(--ink2)}.prose h2{color:#fff}
.tbl th{color:var(--mut);border-bottom-color:rgba(255,255,255,.3)}
.tbl td{border-bottom-color:var(--line2)}
.tour-tbl tr.private td{background:rgba(255,255,255,.04)}
/* forms */
.fld-l,.field,.leg-sm{color:#B9C5D8}
.fld-i,.in,select.in{background-color:var(--panel);border-color:rgba(255,255,255,.18);color:var(--ink);border-radius:10px}
.fld-i:hover,.in:hover{border-color:rgba(255,255,255,.3)}
.fld-i:focus,.in:focus{border-color:var(--hb);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 40%,transparent)}
.fld-i::placeholder,.in::placeholder{color:#6F7E96}
select.in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23C3CEE0' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
select option{background:var(--panel);color:var(--ink)}
.fld-cv{color:var(--ink2)}
.fld-tel .fld-cc .fld-i{background-color:var(--panel2);border-radius:10px 0 0 10px}
.fld-tel>.fld-i{border-radius:0 10px 10px 0}
.fld-e{color:var(--hr)}
.opt{border-radius:12px}
.opt:has(input:checked){border-color:var(--hb);background:var(--tb)}
.tgl-s{background:rgba(255,255,255,.18)}
.tgl-i:checked+.tgl-s{background:var(--grad)}
.steps li::before,.checklist .box{border-color:rgba(255,255,255,.3)}
.steps li.on::before{background:var(--grad);border-color:transparent}
.dz{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.25);color:var(--hb)}
.dz:hover,.dz.over,.dz:focus-within{background:var(--tb);border-color:var(--hb)}
.dz-btn{background:var(--glass2);color:var(--ink);border-color:rgba(255,255,255,.3);border-radius:999px}
.alert{background:var(--tb);color:#D7E5FF;border:1px solid color-mix(in srgb,var(--blue) 50%,transparent)}
.alert-err{background:var(--tr);color:#FFD5D9;border-color:color-mix(in srgb,var(--red) 50%,transparent)}
.alert-ok{background:var(--ok-sf);color:#C9F0D8;border-color:rgba(127,211,160,.35)}
.rate legend{color:var(--ink)}
.face:hover,.face:focus-visible{background:var(--tb);border-color:var(--hb)}
/* calendar */
.cd{background:rgba(255,255,255,.035);border-color:var(--line2);color:var(--ink);border-radius:10px}
.cd small{color:var(--ink2)}
.cd.k-free{background:var(--ok-sf);border-color:rgba(127,211,160,.35)}
.cd.k-course{background:var(--tb);border-color:color-mix(in srgb,var(--blue) 60%,transparent)}
.cd.k-event{background:var(--tr);border-color:color-mix(in srgb,var(--red) 55%,transparent)}
.cd.k-trip{background:var(--warn-sf);border-color:rgba(255,194,122,.35)}
.cd.k-full{background:rgba(255,255,255,.06)}
.cd.k-travel,.cd.k-busy{border-color:rgba(255,255,255,.3)}
.cd.past{background:transparent;opacity:.55}.cd.past,.cd.past b{color:var(--mut)}
.cd.sel{outline-color:#fff}.cd:hover{border-color:rgba(255,255,255,.45)}
progress,progress::-webkit-progress-bar{background:rgba(255,255,255,.1)}
progress::-webkit-progress-value{background:var(--grad)}progress::-moz-progress-bar{background:var(--grad)}
/* booking summary card */
.sum-card{background:linear-gradient(160deg,color-mix(in srgb,var(--blue) 30%,#0B1830),#0B1830 55%,color-mix(in srgb,var(--red) 18%,#0B1830));border-color:rgba(255,255,255,.14)}
.sum-card .k{color:var(--hr)}.sum-card .mut{color:var(--mut)}
.sum-card .btn{background:var(--grad)}.sum-card .btn:hover{background:var(--grad)}
.big-tick{background:var(--ok-sf);color:var(--ok)}
/* chat button and panel */
.fab,.f4-chat .fab{background:var(--grad);color:#fff;box-shadow:0 14px 34px -10px color-mix(in srgb,var(--red) 60%,transparent)}
.f4-chat .fab:hover{background:var(--grad);filter:brightness(1.1)}
.f4-stack .bi{border-color:#1a2340;background:#fff}
.chat-panel{background:var(--panel);border-color:var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);border-radius:18px}
.chat-list small,.chat-list .go{color:var(--hb)}
.bookbar{background:rgba(6,14,28,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top-color:var(--line)}
/* student area */
.avatar{background:var(--grad)}
.tabs{border-bottom-color:var(--line)}
.tabs a{color:var(--ink2);border-color:var(--line);border-radius:999px}
.tabs a.on{background:var(--grad);border-color:transparent;color:#fff}
.checklist li.done{color:var(--ok)}
/* about */
.motto{border-left-color:var(--red)}
.timeline{border-left-color:rgba(255,255,255,.2)}
.timeline li::before{background:var(--bg);border-color:var(--hb)}
.timeline li.big::before{background:var(--red);border-color:var(--red);box-shadow:0 0 16px var(--red)}
.chart .gl{stroke:rgba(255,255,255,.08)}.chart .ln{stroke:var(--hb)}.chart .dt{fill:var(--hb)}
.big404{background:linear-gradient(90deg,var(--hr),var(--hb));-webkit-background-clip:text;background-clip:text;color:transparent}
/* footer */
.foot{background:linear-gradient(180deg,transparent,rgba(0,0,0,.35)),#040A15;color:var(--mut);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--red) 30%,var(--blue) 70%,transparent)}
.foot a{color:var(--ink2)}.foot a:hover{color:#fff}
.foot-small{color:#6F7E96;border-top:1px solid var(--line2);padding-top:18px}
.foot-h{color:#fff}
.f4-qrs-h{color:#fff}
.f4-social a:hover{outline-color:var(--hb)}
/* language offer bar */
.lang-offer{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 35%,#0B1830),#0B1830 50%,color-mix(in srgb,var(--blue) 45%,#0B1830))}
.lang-offer a b{color:#fff}
/* editor preview marks stay visible */
.f4-preview .f4-s:hover{outline-color:rgba(141,182,255,.6)}
.f4-preview .f4-s.f4-sel{outline-color:#8DB6FF}
@media (min-width:640px){
  .stats-in>div:nth-child(3){border-left-width:1px}
}
@media (min-width:900px){
  .stats{padding:12px 40px}
  .menu-panel,.menu[open]>summary+.menu-panel{background:none;box-shadow:none}
  .menu-panel a{color:#AAB7CC}
  .menu-panel a:hover{color:#fff}
  .menu-panel a.on{color:#fff;box-shadow:inset 0 -2px 0 var(--red)}
  .stats-in{padding:0}
  .stats-in>div{padding:26px 30px}
  .stats b{font-size:38px}
  .hero-in{padding:104px 40px 88px}
}
@media (max-width:639px){
  .stats-in>div:nth-child(odd){border-left-width:0}
  .stats-in>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
  .hero::before{width:300px;height:300px;left:-120px;top:-100px}
  .hero::after{width:340px;height:340px;right:-160px;top:200px}
}
}