/* 꼬꼬비즈 - 랜딩 (2026-10-06b 리디자인)
   뼈대: 사용자 제공 시안(상단바 → 연한 블루 히어로 + 예시 화면 → 3단계 → 운영 연결 → 도입 문의 → 마지막 CTA)
   규칙: Open Design craft(anti-ai-slop · typography · color · laws-of-ux · animation · a11y)
         + design-systems/stripe 의 절제(흰 바탕 · 헤어라인 · 작은 라운드 · 푸른 기운의 낮은 그림자)
   브랜드 토큰(--ink · --brand · --accent · Pretendard)은 styles.css 그대로 사용한다. */

:root{
  --l-bg:var(--panel);
  --l-head:var(--ink);
  --l-rule:var(--line);
  --l-tint:#F1F5FF;                 /* 히어로 연한 블루 */
  --l-r:10px;
  --l-r-lg:16px;
  --l-ease:cubic-bezier(.2,0,0,1);
  --l-shadow:0 1px 2px rgba(14,27,51,.05), 0 20px 44px -24px rgba(14,27,51,.28);
}
html[data-theme="dark"]{ --l-head:var(--tx); --l-tint:#0F1626; }

body{ background:var(--l-bg); min-height:100vh; font-size:16px; line-height:1.6; }
main#main{ max-width:none; margin:0; padding:0; }   /* styles.css 의 운영화면용 main 여백 해제 */
.wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }

.skip{ position:absolute; left:16px; top:-60px; z-index:80; background:var(--ink); color:var(--ink-tx); padding:10px 14px; border-radius:8px; font-weight:600; }
.skip:focus{ top:12px; }

/* ── 상단바 ── */
.lnav{ position:sticky; top:0; z-index:40; background:var(--l-bg); border-bottom:1px solid var(--l-rule); }
.lnav-in{ display:flex; align-items:center; gap:8px; height:68px; }
.lnav .kb-logo .kb-word{ font-size:18px; }
.lnav-links{ display:flex; gap:4px; margin-left:40px; }
.lnav-links a{ display:inline-flex; align-items:center; height:44px; padding:0 12px; border-radius:8px; color:var(--tx); font-size:15px; font-weight:500; }
.lnav-links a:hover{ background:var(--panel2); text-decoration:none; }
.lnav .sp{ flex:1; }
.lnav .me{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--tx2); }
.lnav .me a{ font-weight:600; }
.langbtn, .navlogin{
  display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 12px; border:none; border-radius:8px;
  background:none; color:var(--tx2); font:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:background .15s, color .15s;
}
.langbtn:hover, .navlogin:hover{ background:var(--panel2); color:var(--tx); }
.inqbtn{
  display:inline-flex; align-items:center; height:44px; padding:0 18px; margin-left:6px; border-radius:var(--l-r);
  border:1px solid var(--brand); color:var(--brand); font-size:15px; font-weight:600; white-space:nowrap; transition:background .15s;
}
.navlogin .lg-short{ display:none; }
.inqbtn:hover{ background:var(--brand-s); text-decoration:none; }

/* ── 히어로 ── */
.hero{ background:var(--l-tint); border-bottom:1px solid var(--l-rule); }
.hero{ background:var(--l-tint) url("hero-bg.jpg?v=2") center/cover no-repeat; background-image:image-set(url("hero-bg.webp?v=2") type("image/webp"), url("hero-bg.jpg?v=2") type("image/jpeg")); }
html[data-theme="dark"] .hero{ background-image:none; }
.hero-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; padding-top:64px; padding-bottom:72px; }
.welcome{ display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; font-size:15px; }
.welcome .wrole{ font-size:13px; font-weight:600; color:var(--tx2); background:var(--panel); border:1px solid var(--l-rule); border-radius:6px; padding:1px 8px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 24px; padding:6px 14px;
  background:var(--panel); border:1px solid var(--l-rule); border-radius:999px; font-size:14px; color:var(--tx2);
}
.eyebrow i{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
.eyebrow b{ color:var(--tx); font-weight:600; }
.hero h1{ margin:0; color:var(--l-head); font-size:clamp(36px,4.6vw,58px); font-weight:700; line-height:1.18; letter-spacing:-.03em; }
.hero h1 .hl{ color:var(--brand); }
.hero .lead{ margin:22px 0 0; max-width:30em; font-size:clamp(17px,1.6vw,19px); line-height:1.65; color:var(--tx2); }

.quick{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.hbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:0 24px;
  border:1px solid var(--brand); border-radius:var(--l-r); background:var(--panel); color:var(--brand);
  font-size:16px; font-weight:600; text-decoration:none !important; transition:background .15s, border-color .15s;
}
.hbtn:hover{ background:var(--brand-s); }
.hbtn.main{ background:var(--brand); color:#fff; }
.hbtn.main:hover{ background:var(--brand-h); border-color:var(--brand-h); }
.hbtn .ic{ transition:transform .15s var(--l-ease); }
.hbtn:hover .ic{ transform:translateX(2px); }
.trust{ margin:18px 0 0; font-size:15px; color:var(--tx2); }
.sidelinks{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 20px; }
.sidelinks .lnk{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:16px; }
.sidelinks .lnk.sub{ color:var(--tx2); font-weight:500; }

/* 히어로 오른쪽: AI 아바타 영상 + 예시 화면 */
.preview{ position:relative; display:grid; grid-template-columns:168px minmax(0,1fr); gap:18px; align-items:end; }
.avatar{ margin:0 0 28px; position:relative; }
.avatar video{
  display:block; width:100%; aspect-ratio:832/1060; object-fit:cover; background:var(--panel2);
  border-radius:var(--l-r-lg); border:1px solid var(--l-rule); box-shadow:var(--l-shadow);
}
.avatar .vtag{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; }
.avatar .vtag .dot{ width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--accent); flex:none; }
.avatar .vtag b{ display:block; font-size:14px; font-weight:600; color:var(--tx); }
.avatar .vtag small{ display:block; font-size:13px; word-break:keep-all; line-height:1.45; color:var(--tx2); }
.vbtn{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border:none; border-radius:8px; cursor:pointer;
  display:grid; place-items:center; background:rgba(14,27,51,.55); color:#fff; transition:background .15s;
}
.vbtn:hover{ background:rgba(14,27,51,.78); }
.vbtn .i-play, .vbtn.paused .i-pause{ display:none; }
.vbtn.paused .i-play{ display:block; }

.device{ position:relative; background:var(--panel); border:1px solid var(--l-rule); border-radius:var(--l-r-lg); box-shadow:var(--l-shadow); min-width:0; margin-bottom:28px; }
.device .dhead, .table .thead{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line2); font-size:15px; }
.device .dhead .ic{ color:var(--brand); }
.exm{ margin-left:auto; font-size:12px; font-weight:600; color:var(--tx2); background:var(--panel2); border:1px solid var(--l-rule); border-radius:999px; padding:2px 10px; white-space:nowrap; }
.device .dbody{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:10px; }
.msg{ display:flex; align-items:flex-start; gap:10px; animation:kb-in .3s var(--l-ease) both; }
.msg.bot{ animation-delay:.25s; }
.msg .who{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--brand-s); color:var(--brand); }
.msg .who.k{ background:none; }
.msg .bub{ padding:9px 13px; border-radius:12px; background:var(--panel2); font-size:14px; line-height:1.5; }
.mc{ margin-top:4px; border:1px solid var(--l-rule); border-radius:12px; padding:14px; animation:kb-in .3s .5s var(--l-ease) both; }
.mc .mtop{ display:flex; gap:12px; align-items:center; }
.mc .thumb{ flex:none; width:56px; height:56px; }
.mc .thumb svg{ display:block; width:100%; height:100%; }
.mc .mi{ min-width:0; }
.mc .t{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mc .co{ font-weight:700; font-size:16px; color:var(--l-head); }
.mc .bo, .mc .cat{ font-size:12px; font-weight:600; color:var(--tx2); background:var(--panel2); border-radius:5px; padding:1px 7px; }
.mc .tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.mc .tags span{ font-size:12.5px; font-weight:600; color:var(--ok); background:var(--ok-s); border-radius:999px; padding:2px 9px; }
.mc .sl{ display:flex; align-items:center; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line2); font-size:13px; font-weight:600; color:var(--tx2); }
.mc .slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.mc .slots span{ text-align:center; border:1px solid var(--l-rule); border-radius:8px; padding:7px 0; font-size:14px; font-weight:600; color:var(--tx); font-variant-numeric:tabular-nums; }
.mc .slots span.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.mc .book{ margin-top:10px; text-align:center; padding:10px; border-radius:8px; background:var(--brand); color:#fff; font-size:14px; font-weight:600; }
.toast{
  position:absolute; right:-16px; bottom:-22px; display:flex; align-items:center; gap:10px; padding:11px 16px 11px 12px;
  background:var(--panel); border:1px solid var(--l-rule); border-radius:12px; box-shadow:var(--l-shadow);
  animation:kb-in .3s .9s var(--l-ease) both;
}
.toast .ck{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--ok); color:#fff; flex:none; }
.toast b{ display:block; font-size:14px; }
.toast small{ display:block; font-size:13px; color:var(--tx2); font-variant-numeric:tabular-nums; }
@keyframes kb-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ── 섹션 공통 ── */
.sec{ padding:88px 0; }
.kicker{ margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); }
.sec h2, .endcta h2{ margin:0; color:var(--l-head); font-size:clamp(26px,2.8vw,36px); font-weight:700; line-height:1.25; letter-spacing:-.02em; }

/* 이용 방법 */
.steps{ list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr); align-items:start; gap:0; }
.step{ display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:12px; align-items:start; }
.step .n{ display:grid; place-items:center; width:36px; height:36px; margin-top:10px; border-radius:50%; background:var(--brand-s); color:var(--brand); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.step .si{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--panel2); border:1px solid var(--l-rule); color:var(--l-head); }
.step h3{ margin:6px 0 4px; font-size:18px; font-weight:700; color:var(--l-head); letter-spacing:-.01em; }
.step p{ margin:0; font-size:15px; line-height:1.6; color:var(--tx2); }
.steps .arr{ display:grid; place-items:center; height:56px; color:var(--tx3); }

/* 운영 연결 */
.ops{ background:var(--panel2); border-top:1px solid var(--l-rule); }
.ops-in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center; margin-top:40px; }
.table{ background:var(--panel); border:1px solid var(--l-rule); border-radius:var(--l-r-lg); box-shadow:var(--l-shadow); overflow:hidden; }
.table .thead .ic{ color:var(--brand); }
.booths{ display:flex; gap:6px; flex-wrap:wrap; padding:12px 18px 0; }
.booths > span{ display:inline-flex; align-items:center; gap:0; padding:5px 11px; border-radius:999px; border:1px solid var(--l-rule); font-size:13px; font-weight:600; color:var(--tx2); }
.booths svg{ margin-right:6px; }
.booths > span.on{ border-color:var(--l-head); color:var(--l-head); }
.table ul{ list-style:none; margin:0; padding:10px 10px 12px; }
.table li{ display:grid; grid-template-columns:52px minmax(0,1.5fr) minmax(0,1fr) 72px 18px; align-items:center; gap:10px; padding:12px 10px; border-radius:10px; font-size:14px; }
.table li + li{ border-top:1px solid var(--line2); }
.table li.on{ background:var(--brand-s); border-top-color:transparent; }
.table li.on + li{ border-top-color:transparent; }
.table li.hd{ padding-top:6px; padding-bottom:8px; font-size:12px; font-weight:600; color:var(--tx3); }
.table .tm{ font-weight:600; font-variant-numeric:tabular-nums; }
.table .co{ font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.table .co small{ display:block; font-size:12px; font-weight:500; color:var(--tx3); }
.table .ct{ color:var(--tx2); }
.table li:not(.hd) .st{ justify-self:start; font-size:12.5px; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.st.s-in{ background:var(--ok-s); color:var(--ok); }
.st.s-bk{ background:var(--brand); color:#fff; }
.st.s-dn{ background:var(--panel2); color:var(--tx2); border:1px solid var(--l-rule); }
.table .cv{ color:var(--tx3); transform:rotate(-90deg); }

.who2{ display:flex; flex-direction:column; gap:32px; }
.oi{ display:flex; gap:18px; align-items:flex-start; }
.oic{ flex:none; display:grid; place-items:center; width:56px; height:56px; border-radius:14px; background:var(--brand-s); color:var(--brand); }
.oi h3{ margin:4px 0 6px; font-size:20px; font-weight:700; color:var(--l-head); letter-spacing:-.01em; }
.oi p{ margin:0; font-size:16px; line-height:1.65; color:var(--tx2); }
.olinks{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:6px; color:var(--tx3); }
.olinks .lnk{ min-height:44px; font-size:15px; }

/* 도입 문의 띠 */
.band{ background:var(--ink); color:var(--ink-tx); }
.band-in{ display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; padding-top:48px; padding-bottom:48px; }
.band h2{ margin:0; font-size:clamp(22px,2.4vw,30px); font-weight:700; line-height:1.3; letter-spacing:-.02em; }
.band p{ margin:8px 0 0; font-size:16px; opacity:.8; }
.band .borg{ margin:0; font-size:15px; opacity:.85; }
.bbtn{
  display:inline-flex; align-items:center; gap:8px; min-height:54px; padding:0 24px; border-radius:var(--l-r);
  background:var(--ink-tx); color:var(--ink); font-size:16px; font-weight:600; text-decoration:none !important; transition:opacity .15s;
}
.bbtn:hover{ opacity:.9; color:var(--ink); }
html[data-theme="dark"] .band{ background:var(--panel2); color:var(--tx); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
html[data-theme="dark"] .bbtn{ background:var(--brand); color:#fff; }

/* 마지막 행동 */
.endcta{ padding:80px 0; text-align:center; }
.endcta .hbtn{ margin-top:28px; }
.endvid{ max-width:960px; margin:48px auto 0; }
.endvid video{ display:block; width:100%; aspect-ratio:16/9; border:1px solid var(--l-rule); border-radius:var(--l-r); background:#000; }

/* 푸터 */
.foot{ border-top:1px solid var(--l-rule); }
.foot-in{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding-top:28px; padding-bottom:40px; font-size:13px; line-height:1.6; color:var(--tx3); }
.foot .kb-logo{ color:var(--tx2); }
.foot .kb-logo .kb-word{ font-size:14px; }
.foot .note{ flex-basis:100%; }

/* ── 모달 ── */
.mwrap{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(8,12,24,.5); }
.mwrap[hidden]{ display:none; }
.modal{
  width:min(440px,100%); max-height:92vh; overflow-y:auto; padding:28px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--l-r-lg); box-shadow:0 30px 70px -28px rgba(14,27,51,.45);
  animation:kb-pop .2s var(--l-ease);
}
@keyframes kb-pop{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.modal h3{ display:flex; align-items:center; gap:9px; margin:0 0 4px; font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--l-head); }
.modal h3 .tag{ font-size:12px; font-weight:600; color:var(--tx2); background:var(--panel2); border-radius:6px; padding:3px 8px; }
.modal .x{ float:right; display:grid; place-items:center; width:44px; height:44px; margin:-12px -14px 0 0; border:none; border-radius:8px; background:none; color:var(--tx3); cursor:pointer; }
.modal .x:hover{ background:var(--panel2); color:var(--tx); }
.modal .mhint{ margin:12px 0 0; font-size:14px; line-height:1.55; color:var(--tx2); }
.modal label.f{ display:block; margin:16px 0 6px; font-size:14px; font-weight:600; color:var(--tx); }
.modal input{ height:48px; padding:0 14px; font-size:16px; }
.modal .req{ color:var(--bad); }
.modal .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.modal .btn-main{ width:100%; height:52px; margin-top:24px; border:none; border-radius:var(--l-r); background:var(--brand); color:#fff; font:inherit; font-size:16px; font-weight:700; cursor:pointer; transition:background .15s; }
.modal .btn-main:hover{ background:var(--brand-h); }
.modal .swap{ margin-top:16px; text-align:center; font-size:14px; color:var(--tx2); }
.modal .err{ margin-top:14px; padding:10px 12px; border-radius:8px; background:var(--bad-s); color:var(--bad); font-size:14px; font-weight:600; text-align:center; }
.modal .err[hidden]{ display:none; }

.rtabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:16px 0 0; padding:4px; border-radius:var(--l-r); background:var(--panel2); border:1px solid var(--line); }
.rtabs button{ min-height:44px; border:none; border-radius:7px; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--tx2); cursor:pointer; }
.rtabs button.on{ background:var(--panel); color:var(--tx); box-shadow:0 1px 3px rgba(14,27,51,.14); }
.guestgo{ display:flex; align-items:center; gap:8px; margin:12px 0 0; padding:12px 14px; border-radius:var(--l-r); background:var(--brand-s); font-size:14px; font-weight:600; }
.guestgo[hidden]{ display:none; }
.pwbox{ position:relative; }
.pwbox input{ padding-right:76px; }
.pweye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); height:36px; padding:0 12px; border:none; border-radius:7px; background:var(--panel2); font:inherit; font-size:14px; font-weight:600; color:var(--tx2); cursor:pointer; }

.lnk{ border:none; background:none; padding:0; font:inherit; font-weight:600; color:var(--brand); cursor:pointer; }
.lnk:hover{ text-decoration:underline; text-underline-offset:3px; }

/* 포커스 표시 */
:is(a,button,.langbtn,.navlogin,.lnk,.btn,.hbtn,.bbtn,.rtabs button,.pweye,.vbtn):focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }
.band :is(a,button):focus-visible{ outline-color:var(--ink-tx); }

/* 모바일 하단 고정 바 */
.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; gap:8px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--panel); border-top:1px solid var(--line); }
.mbar .btn{ height:50px; border-radius:var(--l-r); font-size:16px; justify-content:center; padding:0 18px; }
.mbar .btn.primary{ flex:1; }

/* ── 반응형 ── */
@media (max-width:1100px){
  .lnav-links{ margin-left:16px; }
  .hero-in{ gap:40px; }
  .preview{ grid-template-columns:140px minmax(0,1fr); gap:14px; }
  .steps{ grid-template-columns:1fr; gap:24px; }
  .steps .arr{ display:none; }
  .step{ grid-template-columns:auto auto minmax(0,1fr); max-width:560px; }
}
@media (max-width:960px){
  main#main{ padding:0; }
  .wrap{ padding:0 24px; }
  .lnav-links{ display:none; }
  .hero-in{ grid-template-columns:1fr; padding-top:44px; padding-bottom:64px; }
  .preview{ grid-template-columns:168px minmax(0,440px); }
  .sec{ padding:64px 0; }
  .ops-in{ grid-template-columns:1fr; gap:40px; }
  .mbar:not([hidden]){ display:flex; }
  body{ padding-bottom:76px; }
}
@media (max-width:640px){
  .wrap{ padding:0 16px; }
  .lnav-in{ height:60px; gap:2px; }
  .lnav .kb-logo .kb-word{ font-size:17px; }
  .lg-full{ display:none; }
  .navlogin .lg-short{ display:inline; }
  .navlogin{ padding:0 10px; color:var(--tx); font-weight:600; }
  .inqbtn{ display:none; }
  .langbtn{ padding:0 10px; }
  .hero-in{ padding-top:28px; padding-bottom:56px; gap:36px; }
  .hero h1{ font-size:34px; line-height:1.22; }
  .hero .lead{ font-size:17px; }
  .hero .lead br{ display:none; }
  .quick{ flex-direction:column; }
  .hbtn{ width:100%; }
  .sidelinks{ flex-direction:column; }
  /* 아바타는 가로 줄로: 영상 + 설명 */
  .preview{ grid-template-columns:1fr; gap:16px; }
  .avatar{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center; margin:0; }
  .avatar .vtag{ margin:0; }
  .vbtn{ top:6px; right:auto; left:66px; width:26px; height:26px; }
  .device{ margin-bottom:24px; }
  .toast{ right:8px; bottom:-20px; }
  .step{ grid-template-columns:auto minmax(0,1fr); }
  .step .si{ display:none; }
  .step .n{ margin-top:0; }
  .step h3{ margin-top:4px; }
  .table li{ grid-template-columns:44px minmax(0,1fr) 64px; row-gap:2px; }
  .table li .ct{ grid-column:2; grid-row:2; font-size:13px; }
  .table li .st{ grid-column:3; grid-row:1 / span 2; }
  .table li .cv, .table li .cvs{ display:none; }
  .table li.hd .ct{ display:none; }
  .oi{ gap:14px; }
  .oic{ width:48px; height:48px; }
  .band-in{ padding-top:40px; padding-bottom:40px; }
  .bbtn{ width:100%; justify-content:center; }
  .endcta{ padding:64px 0; }
  .endcta .hbtn{ width:100%; }
  .modal{ padding:24px 20px; }
  .modal .grid2{ grid-template-columns:1fr; }
  .lnav .me > span, .lnav .me > a{ display:none; }
}
@media (max-width:360px){
  .langbtn span{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .msg, .mc, .toast, .modal{ animation:none; }
  .hbtn .ic, .hbtn:hover .ic{ transition:none; transform:none; }
}