/* ============================================================
   CLARITY LAB — landing
   Palette: deep-teal → cyan-green → cobalt on soft mint-white
   ============================================================ */

:root{
  --bg:        #EAF2F1;   /* page + content column (same on PC) */
  --surface:   #FFFFFF;
  --surface-2: #F4FAF8;
  --ink:       #0B2B2E;
  --ink-2:     #3A5C5C;
  --ink-3:     #728C8B;
  --line:      #D8E7E3;

  --primary:   #0E9E97;
  --primary-d: #0A7C77;
  --cyan:      #22C7B8;
  --blue:      #1E63D6;
  --deep:      #063A3D;
  --deep-2:    #0A5155;

  --grad: linear-gradient(135deg, #063A3D 0%, #0E9E97 55%, #22C7B8 100%);
  --grad-soft: linear-gradient(135deg, #0E9E97, #1E63D6);

  --shell: 480px;
  --radius: 22px;
  --shadow: 0 18px 44px -22px rgba(6,58,61,.42);
  --shadow-sm: 0 8px 22px -14px rgba(6,58,61,.4);

  --ff: "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --ff-mono: "Space Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: 96px;               /* room for fixed CTA */
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* H5 column, centered — same bg fills the PC gutter */
.shell{
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--ff-mono);
  font-size: 11px; font-weight:700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--primary-d);
  padding: 6px 12px;
  border:1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.eyebrow i{ font-size:11px; }
.eyebrow-light{ color:#CFFBF3; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }

.section-title{
  font-size: 27px; font-weight: 900; line-height: 1.28;
  letter-spacing: -.03em;
  margin: 14px 0 22px;
  color: var(--ink);
}
.section-title.light{ color:#F3FFFC; }

.section{ padding: 46px 22px; position:relative; }

/* ---------- buttons ---------- */
.btn{
  position: relative; overflow: hidden; isolation: isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  font-family: var(--ff);
  font-size: 16px; font-weight: 700;
  padding: 16px 22px;
  border: none; border-radius: 15px;
  cursor: pointer;
  letter-spacing: -.01em;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn > *{ position:relative; z-index:2; }
.btn .cta-ico{ width:22px; height:22px; border-radius:6px; flex:0 0 auto; }
.btn .go{ font-size:13px; opacity:.85; margin-left:2px; }
.btn:active{ transform: translateY(1px) scale(.995); }

/* sweeping shine */
.btn::before{
  content:""; position:absolute; z-index:1; top:-20%; left:-70%;
  width:48%; height:140%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: shine 4s ease-in-out infinite;
}
.btn-light::before{
  background: linear-gradient(100deg, transparent 0%, rgba(14,158,151,.28) 50%, transparent 100%);
}

.btn-primary{
  background: var(--grad);
  color:#fff;
  box-shadow: 0 14px 30px -12px rgba(14,158,151,.7);
}
.btn-primary:hover{ filter:brightness(1.06); box-shadow:0 0 0 1px rgba(143,247,231,.6), 0 20px 40px -12px rgba(14,158,151,.9); }

.btn-light{
  background:#fff; color: var(--deep);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.45);
}
.btn-light:hover{ filter:brightness(.99); box-shadow:0 0 0 1px rgba(14,158,151,.35), 0 18px 38px -14px rgba(0,0,0,.5); }

.btn:focus-visible{ outline:3px solid #7FE7DA; outline-offset:3px; }

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 22px 6px;
}
.brand{ display:flex; align-items:center; gap:9px; }
.brand-mark{ width:30px; height:30px; object-fit:contain; }
.brand-name{ font-size:16px; font-weight:400; letter-spacing:.14em; color:var(--ink); }
.brand-name b{ font-weight:900; }
.brand-tag{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em;
  color:var(--ink-3); text-transform:uppercase;
}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding: 30px 22px 40px;
  overflow:hidden;
}
.hero-glow{
  position:absolute; inset:-10% -30% auto -30%; height:70%;
  background:
    radial-gradient(50% 60% at 25% 20%, rgba(34,199,184,.30), transparent 70%),
    radial-gradient(45% 55% at 85% 10%, rgba(30,99,214,.22), transparent 70%);
  filter: blur(6px);
  pointer-events:none; z-index:0;
}
.hero > *{ position:relative; z-index:1; }

.hero-title{
  font-size: 38px; font-weight:900; line-height:1.18;
  letter-spacing:-.045em;
  margin: 16px 0 14px;
}
.hero-title em{
  font-style:normal;
  background: var(--grad-soft);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.hero-sub{
  font-size:15px; color:var(--ink-2); line-height:1.7;
  max-width: 34ch; margin: 0 0 26px;
}

/* video */
.hero-media{ position:relative; margin: 6px 0 30px; }
.hero-ring{
  position:absolute; inset:-16px;
  border-radius: 34px;
  background: conic-gradient(from 0deg, #22C7B8, #1E63D6, #063A3D, #22C7B8);
  filter: blur(16px); opacity:.45;
  z-index:0;
  animation: spin 14s linear infinite;
}
.video-frame{
  position:relative; z-index:1;
  border-radius: 26px;
  padding: 3px;
  background: linear-gradient(150deg, rgba(34,199,184,.9), rgba(30,99,214,.55), rgba(6,58,61,.7));
  box-shadow: var(--shadow);
}
.hero-video{
  width:100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 23px;
  display:block;
  background:#063A3D;
}
.video-veil{
  position:absolute; inset:3px; border-radius:23px; pointer-events:none;
  background: linear-gradient(180deg, transparent 55%, rgba(6,58,61,.34));
}

/* sound toggle over the video */
.sound-toggle{
  position:absolute; z-index:3; right:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border:none; border-radius:999px; cursor:pointer;
  background: rgba(6,58,61,.72); color:#EAFBF7;
  backdrop-filter: blur(6px);
  font-family:var(--ff); font-size:12.5px; font-weight:700;
  box-shadow: var(--shadow-sm);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.sound-toggle i{ color:var(--cyan); font-size:14px; }
.sound-toggle:hover{ background: rgba(6,58,61,.92); }
.sound-toggle:active{ transform: scale(.95); }
.sound-toggle.is-on{ background: var(--grad-soft); box-shadow:0 0 0 3px rgba(34,199,184,.28), var(--shadow-sm); }
.sound-toggle.is-on i{ color:#fff; }
.sound-toggle:focus-visible{ outline:3px solid #7FE7DA; outline-offset:2px; }

/* floating chips (subtle data cues) */
.chip{
  position:absolute; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding: 8px 12px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.9);
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
  font-size:12.5px; font-weight:700; color:var(--deep);
  animation: float 5s ease-in-out infinite;
}
.chip i{ color:var(--primary); }
.chip .spark{ width:32px; height:16px; }
.chip .spark polyline{ fill:none; stroke:var(--primary); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.chip-a{ top:14px; left:-6px; animation-delay:0s; }
.chip-b{ top:44%; right:-8px; animation-delay:1.1s; }
.chip-c{ bottom:16px; left:12px; animation-delay:.6s; }

.hero-cta{ margin-top: 4px; }

/* ticker */
.ticker{
  margin-top:24px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:11px 0; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track{
  display:inline-flex; align-items:center; gap:14px;
  white-space:nowrap;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em;
  color:var(--ink-2);
  animation: marquee 22s linear infinite;
}
.ticker-track i{ color:var(--cyan); font-style:normal; }

/* ============ MENTOR ============ */
.mentor-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.mentor-photo{ position:relative; }
.mentor-photo img{
  width:100%; aspect-ratio: 4/3; object-fit:cover; object-position:center 22%;
}
.photo-badge{
  position:absolute; left:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  background: rgba(6,58,61,.68); color:#EAFBF7;
  backdrop-filter: blur(6px);
  font-size:12px; font-weight:700;
}
.photo-badge i{ color:var(--cyan); }
.mentor-body{ padding: 20px 20px 22px; }
.mentor-name{ font-size:22px; font-weight:900; margin:0; letter-spacing:-.02em; }
.mentor-role{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em;
  color:var(--primary-d); margin:4px 0 12px;
}
.mentor-desc{ font-size:14px; color:var(--ink-2); line-height:1.75; margin:0; }

.stat-row{
  display:flex; gap:10px; margin-top:16px;
}
.stat{
  flex:1; text-align:center;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius: 15px;
  padding: 15px 6px;
}
.stat b{
  display:block; font-family:var(--ff-mono); font-size:23px; font-weight:700;
  color:var(--deep); letter-spacing:-.02em;
}
.stat b i{ font-size:12px; font-style:normal; color:var(--primary); }
.stat span{ font-size:11.5px; color:var(--ink-3); }

/* ============ CURRICULUM ============ */
.step-list{ display:flex; flex-direction:column; gap:12px; }
.step{
  position:relative;
  display:flex; align-items:center; gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius: 17px;
  padding: 16px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease;
}
.step:hover{ transform: translateY(-3px); border-color: #B7DED8; }
.step-no{
  font-family:var(--ff-mono); font-size:12px; font-weight:700;
  color:var(--cyan); width:20px; flex:0 0 auto;
}
.step-ico{
  width:46px; height:46px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius: 13px;
  background: var(--grad);
  color:#fff; font-size:18px;
  box-shadow: 0 10px 20px -12px rgba(14,158,151,.9);
}
.step-txt{ flex:1; }
.step-txt h3{ margin:0 0 3px; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.step-txt p{ margin:0; font-size:13px; color:var(--ink-3); line-height:1.5; }
.step-tag{
  font-size:11px; font-weight:700; color:var(--primary-d);
  background: #E1F4F0; border-radius:999px; padding:5px 10px; flex:0 0 auto;
}

.art-band{
  margin: 22px 0 0;
  border-radius: 18px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.art-band img{ width:100%; display:block; }

/* ============ JOIN ============ */
.join{
  margin: 18px 14px;
  border-radius: 26px;
  background: var(--grad);
  overflow:hidden;
  box-shadow: 0 26px 50px -24px rgba(6,58,61,.7);
}
.join-glow{
  position:absolute; inset:auto -20% -40% -20%; height:60%;
  background: radial-gradient(50% 60% at 70% 100%, rgba(255,255,255,.28), transparent 70%);
  pointer-events:none;
}
.join > *{ position:relative; z-index:1; }
.benefit-list{ list-style:none; margin:0 0 22px; padding:0; }
.benefit-list li{
  display:flex; align-items:flex-start; gap:11px;
  padding: 11px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:14.5px; color:#EAFFFB;
}
.benefit-list li:last-child{ border-bottom:none; }
.benefit-list i{ color:#8FF7E7; font-size:17px; margin-top:2px; }
.benefit-list b{ color:#fff; font-weight:700; }

.price-tag{
  display:flex; align-items:center; gap:14px;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px; padding:14px 18px; margin-bottom:20px;
}
.price-free{
  font-family:var(--ff-mono); font-size:30px; font-weight:700;
  color:#fff; letter-spacing:-.02em;
}
.price-note{ font-size:12.5px; color:#CFF6EF; line-height:1.5; }

/* ============ FOOTER ============ */
.footer{ padding: 40px 24px 34px; text-align:center; }
.footer-mark{ width:40px; height:40px; margin:0 auto 10px; object-fit:contain; opacity:.9; }
.footer-brand{ font-size:15px; letter-spacing:.16em; margin:0 0 16px; color:var(--ink); }
.footer-brand b{ font-weight:900; }
.disclaimer{
  font-size:11.5px; color:var(--ink-3); line-height:1.7;
  max-width:38ch; margin:0 auto 20px;
}
.op-info{ margin-bottom:20px; }
.op-info p{ margin:3px 0; font-size:12px; color:var(--ink-2); }
.op-info span{ color:var(--ink-3); margin-right:6px; }
.legal-links{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin-bottom:14px;
}
.legal-links button{
  background:none; border:none; cursor:pointer;
  font-family:var(--ff); font-size:12.5px; font-weight:500;
  color:var(--ink); padding:2px 0;
}
.legal-links button:hover{ color:var(--primary-d); text-decoration:underline; }
.legal-links i{ color:var(--line); font-style:normal; }
.copyright{ font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.05em; }

/* ============ FIXED CTA ============ */
.fixed-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; justify-content:center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(234,242,241,0), rgba(234,242,241,.92) 42%, var(--bg));
  pointer-events:none;
}
.fixed-cta .btn{
  max-width: calc(var(--shell) - 32px);
  pointer-events:auto;
  animation: ctaPulse 2.8s ease-in-out infinite;
}

/* ============ MODALS ============ */
.modal-root{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
}
.modal-root[aria-hidden="true"]{ display:none; }
.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(6,30,31,.5);
  backdrop-filter: blur(3px);
  animation: fade .2s ease;
}
.modal{
  position:relative;
  width:100%; max-width: 440px; max-height: 82vh;
  display:none; flex-direction:column;
  background:var(--surface);
  border-radius: 20px;
  overflow:hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  animation: pop .24s cubic-bezier(.2,.8,.2,1);
}
.modal.is-open{ display:flex; }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 20px; border-bottom:1px solid var(--line);
}
.modal-head h3{ margin:0; font-size:17px; font-weight:900; letter-spacing:-.01em; }
.modal-x{
  background:var(--surface-2); border:1px solid var(--line);
  width:34px; height:34px; border-radius:10px; cursor:pointer;
  color:var(--ink-2); font-size:15px;
}
.modal-x:hover{ color:var(--ink); }
.modal-body{ padding: 18px 20px 24px; overflow-y:auto; }
.modal-body h4{ margin:16px 0 5px; font-size:13.5px; font-weight:700; color:var(--primary-d); }
.modal-body p{ margin:0 0 6px; font-size:13px; color:var(--ink-2); line-height:1.7; }
.modal-body b{ color:var(--ink); }

/* ============ animations ============ */
@keyframes shine{ 0%{ left:-70%; } 22%{ left:150%; } 100%{ left:150%; } }
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 18px 40px -12px rgba(6,58,61,.6); } 50%{ box-shadow:0 18px 46px -10px rgba(14,158,151,.85), 0 0 0 1px rgba(143,247,231,.45); } }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pop{ from{ opacity:0; transform: translateY(12px) scale(.97); } to{ opacity:1; transform:none; } }

/* wider viewports: keep the H5 column, gutter stays the same bg */
@media (min-width: 481px){
  .join{ margin: 18px; }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .hero-ring, .chip, .ticker-track, .btn::before, .fixed-cta .btn{ animation: none !important; }
  .btn, .step{ transition: none; }
}