/* Generated by scripts/route-styles.mjs. Edit the original styles. */
:root {
  --ink: var(--gray-900);
  --muted: var(--gray-600);
  --surface-subtle: var(--gray-100);
  --green: var(--blue-500);
  --blue: var(--blue-500);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  margin: 0;
  font-family:
    Inter,
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  line-height: 1.65;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: wait;
  opacity: 0.55;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
  border: 0;
  background: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.35;
  letter-spacing: -0.045em;
}
a,
button,
input,
select,
summary {
  outline-offset: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--green);
}
button svg,
a svg {
  flex-shrink: 0;
}
label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea {
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius:8px;
  padding: 11px 12px;
  color: var(--ink);
  font-weight: 400;
  min-height: 44px;
}
input::placeholder {
  color: var(--muted);
}
input[type="color"] {
  height: 38px;
  width: 80px;
  border: 0;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--green);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
form > p {
  color: var(--muted);
}
.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition:
    background 0.15s,
    transform 0.15s;
  white-space: nowrap;}
.primary {
  background: var(--green);
  color: white;
  border: 1px solid var(--green);
}
.primary:active,
.secondary:active {
  transform: translateY(1px);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 25px;
  letter-spacing: -1.3px;
  font-weight: 750;
}
.landing {
  overflow: hidden;
  background: var(--surface-subtle);
}
.landing-nav {
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  margin: auto;
  padding: 0 35px;
  border-bottom: 1px solid var(--line);
}
.landing-nav nav {
  display: flex;
  gap: 32px;
  font-size: 12px;
  color: var(--ink);
}
.nav-login {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  padding: 9px 13px;
  font-size: 12px;
}
.faq-section {
  max-width: 1100px;
  margin: auto;
  padding: 110px 0;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 55px;
}
.faq-section h2 {
  font-size: 32px;
  font-weight: 550;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
  font-weight: 550;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary > span {
  font-size: 17px;
  color: var(--muted);
}
.faq-list details[open] summary > span {
  transform: rotate(45deg);
}
.faq-list details p {
  font-size: 12px;
  line-height: 1.9;
  padding: 0 15px 23px 0;
}
.landing-footer {
  border-top: 1px solid var(--line);
  max-width: 1170px;
  padding: 28px 0;
  display: flex;
  align-items: center;
  gap: 26px;
  margin: auto;
  font-size: 12px;
  color: var(--muted);
}
.landing-footer > .brand {
  color: var(--ink);
  font-size: 20px;
}
.landing-footer > span {
  flex: 1;
}
.status-badge {
  display: inline-flex;
  border-radius:4px;
  padding: 4px 7px;
  font-size: 9px !important;
  white-space: nowrap;
  background: var(--surface-subtle);
  color: var(--muted) !important;
}
.status-badge.ready {
  background: var(--surface-subtle);
  color: var(--muted) !important;
}
.status-badge.error {
  background: #fff0e9;
  color: #b56d49 !important;
}
.tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  gap: 25px;
  margin-bottom: 22px;
}
.tabs button {
  font-size: 13px;
  color: var(--muted);
  padding: 12px 3px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs button.active {
  color: var(--green);
  border-color: var(--green);
  font-weight: 650;
}
.question-card {
  margin: 0;
  padding: 24px 30px 29px;
  border: 1px solid var(--line);
  border-radius:12px;
  background: #fff;
  min-width: 0;
}
.question-card legend {
  padding: 0 8px;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--muted);
}
.question-card h3 {
  font-size: 18px;
  font-weight: 550;
  margin-bottom: 23px;
}
.answer-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.answer-options > label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  padding: 13px 17px;
  border: 1px solid var(--surface-subtle);
  border-radius:8px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}
.answer-options > label.selected {
  background: var(--surface-subtle);
  border-color: var(--line);
}
.answer-options label > span {
  font-size: 12px;
  color: var(--muted);
}
.feedback-card {
  padding: 27px;
  border: 1px solid var(--line);
  border-radius:8px;
  background: #fff;
}
.feedback-card.correct {
  border-left-color: var(--muted);
}
.feedback-card > div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin-bottom: 13px;
}
.feedback-card h3 {
  font-size: 17px;
  font-weight: 550;
  margin-bottom: 17px;
}
.feedback-card > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.9;
  margin-bottom: 11px;
}
.feedback-card .selected-answer {
  color: #aa8c6c;
  font-size: 12px;
}
.feedback-card .correct-answer {
  color: var(--muted);
  font-size: 12px;
}
.feedback-card blockquote {
  margin: 15px 0 18px;
  background: var(--surface-subtle);
  padding: 14px 17px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
label > small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.media-stage {
  background: var(--ink);
  border-radius:8px;
  overflow: hidden;
}
.media-stage video {
  display: block;
  width: 100%;
  max-height: 420px;
  aspect-ratio: 16/9;
}
.media-stage audio {
  width: calc(100% - 30px);
  display: block;
  margin: 0 15px 20px;
}
.study-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius:8px;
  padding: 0 22px 22px;
  min-width: 0;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.study-panel > .tabs {
  margin-bottom: 18px;
}
.transcript-scroll {
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 3px;
}
.transcript-segment {
  display: flex;
  gap: 15px;
  text-align: left;
  padding: 14px 5px;
  border-bottom: 1px solid var(--surface-subtle);
  width: 100%;
  font-size: 12px;
  line-height: 1.9;
}
.transcript-segment time {
  font-size: 12px;
  color: var(--muted);
  min-width: 35px;
}
.transcript-segment.current {
  background: var(--surface-subtle);
  color: var(--muted);
}
progress {
  width: 100%;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius:24px;
  background: var(--surface-subtle);
  overflow: hidden;
}
progress::-webkit-progress-bar {
  background: var(--surface-subtle);
}
progress::-webkit-progress-value {
  background: var(--muted);
  border-radius:24px;
}
progress::-moz-progress-bar {
  background: var(--muted);
}
@media (max-width: 1200px) {
  .faq-section {
    margin-left: 35px;
    margin-right: 35px;
  }
  .landing-footer {
    margin-left: 35px;
    margin-right: 35px;
  }
}
@media (max-width: 900px) {
  .landing-nav nav {
    gap: 18px;
    font-size: 12px;
  }
  .faq-section {
    grid-template-columns: 1fr 1.6fr;
    gap: 30px;
  }
  .study-panel {
    position: static;
    max-height: none;
  }
}
@media (max-width: 680px) {
  .landing-nav {
    height: 75px;
    padding: 0 22px;
  }
  .landing-nav .brand {
    font-size: 24px;
  }
  .landing-nav nav {
    display: none;
  }
  .nav-login {
    font-size: 12px;
    padding: 8px 10px;
  }
  .faq-section {
    grid-template-columns: 1fr;
    padding: 65px 0;
    margin: 0 25px;
    gap: 22px;
  }
  .faq-section h2 {
    font-size: 29px;
  }
  .faq-list summary {
    font-size: 12px;
    gap: 10px;
    padding: 20px 0;
  }
  .landing-footer {
    margin: 0 25px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 25px 0;
  }
  .landing-footer > span {
    flex-basis: 65%;
    text-align: right;
    font-size: 12px;
  }
  .landing-footer > a:not(.brand) {
    font-size: 12px;
  }
  .question-card {
    padding: 19px 16px 23px;
  }
  .question-card h3 {
    font-size: 16px;
  }
  .answer-options > label {
    font-size: 12px;
    padding: 12px;
    gap: 9px;
  }
  .feedback-card {
    padding: 21px 17px;
  }
  .feedback-card h3 {
    font-size: 16px;
  }
  .feedback-card > p {
    font-size: 12px;
  }
  .feedback-card blockquote {
    font-size: 12px;
  }
  .study-panel {
    padding: 0 17px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}
.faq-list details p {
  color: var(--muted);
}
.landing-nav nav {
  font-size: 13px;
}
.faq-list details p {
  font-size: 14px;
}
.transcript-segment {
  font-size: 14px;
}

:root {
  --brand-ink: var(--gray-900);
  --brand-blue: var(--blue-500);
  --brand-highlight: #f5d75e;
  --brand-highlight-soft: #fff4b8;
  --ink: var(--brand-ink);
  --muted: var(--gray-700);
  --line: var(--gray-200);
  --paper: var(--gray-50);
  --green: var(--brand-blue);
  --accent: var(--blue-50);
  --blue: var(--brand-blue);
  --radius: 16px;
  --elevation: var(--shadow-2);
}
body {
  font-size: 15px;
  color: var(--ink);
  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: var(--paper);
}
::selection {
  background: var(--brand-highlight-soft);
  color: var(--ink);
}
* {
  scrollbar-color: var(--gray-400) transparent;
  scrollbar-width: thin;
}
input,
textarea {
  caret-color: var(--blue);
}
h1,
h2,
h3 {
  letter-spacing: -0.03em;
  text-wrap: balance;
}
p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
button {
  font-weight: 600;
}
button:disabled {
  cursor: not-allowed;
}
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.primary,
.secondary {
  transition:
    background 0.18s ease,
    transform 0.18s ease;}
.primary {
  background: var(--blue);
  border-color: var(--blue);
}
.secondary:hover {
  background: var(--gray-200);
}
.text-link {
  font-size: 14px;
  color: var(--blue);
  min-height: 44px;
}
.brand {
  letter-spacing: -0.035em;
  color: var(--gray-900);
  font-size: 26px;
}
.ikhi-wordmark {
  width: 72px;
  height: 43px;
  display: block;
  flex: none;
  overflow: visible;
  color: var(--brand-ink);
}
.brand:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 6px;
  border-radius:4px;
}
.context-label {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 10px;
  letter-spacing: 0;
  font-weight: 500;
}
label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  gap: 9px;
}
label small {
  font-size: 13px;
  color: var(--gray-600);
  font-weight: 400;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea {
  background: var(--gray-100);
  border: 1px solid transparent;
  border-radius:12px;
  min-height: 52px;
  padding: 13px 15px;
  font-size: 16px;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}
input::placeholder,
textarea::placeholder {
  color: var(--gray-600);
}
input:focus,
textarea:focus,
select:focus {
  background: #fff;
  border-color: var(--blue-500);
}
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
}
input:disabled {
  color: var(--gray-600);
  opacity: 1;
}
form {
  gap: 24px;
}
.landing-v2 {
  background: #fff;
}
.landing-v2 .landing-nav {
  max-width: 1200px;
  height: 86px;
  padding: 0 32px;
  border: 0;
}
.landing-nav nav {
  gap: 30px;
  color: var(--gray-700);
  font-weight: 500;
}
.nav-login {
  background: var(--gray-100);
  color: var(--gray-800);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 10px 16px;
}
.landing-v2 .faq-section {
  display: block;
  max-width: 850px;
  padding: 100px 32px;
  margin: auto;
}
.landing-v2 .faq-section h2 {
  font-size: 34px;
  margin-bottom: 32px;
}
.faq-list details {
  border-color: var(--gray-200);
}
.faq-list summary {
  font-size: 17px;
  padding: 22px 0;
  gap: 24px;
}
.faq-list summary svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-list details[open] summary svg {
  transform: rotate(180deg);
}
.faq-list details p {
  font-size: 15px;
  color: var(--gray-700);
  padding-bottom: 26px;
}
.landing-v2 .landing-footer {
  max-width: 1200px;
  padding: 38px 32px;
  margin: auto;
  border: 0;
  color: var(--gray-600);
  font-size: 13px;
}
.tabs {
  border-bottom: 1px solid var(--gray-200);
  margin: 4px 0 28px;
}
.tabs button {
  font-size: 16px;
  padding: 16px 12px;
  color: var(--gray-600);
}
.tabs button.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
.status-badge.ready {
  background: var(--gray-100);
  color: #087f5b;
}
.status-badge.error {
  background: var(--red-50);
  color: var(--red-600);
}
.question-card,
.feedback-card {
  border: 0;
  border-radius:16px;
  background: #fff;
  padding: 28px;
}
.question-card h3,
.feedback-card h3 {
  font-size: 20px;
  line-height: 1.55;
}
.question-card label {
  border-color: var(--gray-200);
  border-radius:12px;
  padding: 17px;
  font-size: 16px;
}
.question-card label:has(input:checked) {
  background: var(--blue-50);
  border-color: var(--blue-500);
}
.feedback-card blockquote {
  border-left: 0;
  border-radius:12px;
  background: var(--gray-100);
  padding: 18px;
  font-size: 14px;
  color: var(--gray-700);
}
.transcript-segment:hover {
  background: var(--blue-50);
}
.import-course-list { animation: ikhi-content-in var(--motion-enter) var(--motion-ease); }
@keyframes preview-enter {
  from {
    opacity: 0.6;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 800px) {
  .landing-v2 .landing-nav {
    height: 74px;
    padding: 0 22px;
  }
  .landing-nav nav {
    display: none;
  }
}
@media (max-width: 480px) {
  .landing-v2 .faq-section {
    padding: 65px 24px;
  }
  .landing-v2 .faq-section h2 {
    font-size: 28px;
  }
  .faq-list summary {
    font-size: 16px;
  }
  .landing-v2 .landing-footer {
    padding: 30px 24px;
    gap: 18px;
    flex-wrap: wrap;
  }
  .landing-footer > span {
    width: 100%;
    order: 4;
  }
  .question-card,
.feedback-card {
    padding: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

.study-panel {
  border: 0;
  border-radius:16px;
  padding: 0 24px 24px;
}
.media-stage {
  background: var(--gray-900);
  border-radius:16px;
}
.transcript-segment {
  border-radius:8px;
}
.transcript-segment.current {
  background: var(--blue-50);
}
.transcript-segment time {
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}.status-badge{font-size:12px!important}

:root {--action-blue:var(--blue-600);}
.primary {background:var(--action-blue);border-color:var(--action-blue);}
.primary:hover:not(:disabled) {background:var(--blue-700);border-color:var(--blue-700);}

.transcript-tools {display:flex; align-items:center; gap:8px; min-height:56px;}
.transcript-tools > span {font-size:12px; color:var(--gray-500); margin-right:auto; cursor:help;}
.transcript-tools button {display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-size:12px; font-weight:500; color:var(--gray-600); border-radius:8px; padding:8px;}
.transcript-tools button:hover {background:var(--gray-100);}
.import-course-list {list-style:none;padding:0;margin:12px 0 0;}
.import-course-list li {display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:13px;}
.import-course-list li strong {font-weight:500;}
.import-course-list li small {color:var(--gray-600);text-align:right;}
@media(max-width:520px){.import-course-list li{display:block}.import-course-list li small{display:block;text-align:left;margin-top:3px}}
[data-slot="dialog-overlay"] {background:var(--scrim); backdrop-filter:blur(var(--scrim-blur));}
[data-slot="dropdown-menu-content"] {max-width:calc(100vw - 24px); padding:5px; border:1px solid var(--gray-200); border-radius:8px; background:#fff; color:var(--gray-800); box-shadow:var(--shadow-2);}
[data-slot="dropdown-menu-content"][tabindex]:focus-visible {outline:none!important; box-shadow:var(--shadow-2)!important;}
[data-slot="dropdown-menu-content"] [role^="menuitem"] {min-height:44px; font-size:13px; border-radius:4px; overflow-wrap:anywhere;}
[data-slot="dropdown-menu-content"] [data-highlighted] {background:var(--gray-100); color:var(--gray-900);}
[data-slot="dropdown-menu-content"] [role="separator"] {margin:5px 0; background:var(--gray-200);}
@keyframes tt-next-fill {from {transform:scaleX(0);} to {transform:scaleX(1);}}



:root {
  --motion-press: 120ms;
  --motion-fast: 160ms;
  --motion-enter: 220ms;
  --motion-exit: 160ms;
  --motion-layout: 260ms;
  --motion-page: 300ms;
  --motion-page-shift: 24px;
  --motion-push: 380ms;
  --motion-shift: 12px;
  --motion-ease: cubic-bezier(.23, 1, .32, 1);
  --motion-drawer: cubic-bezier(.32, .72, 0, 1);
  --motion-settle: cubic-bezier(.3, 1.25, .5, 1);
  --motion-fog: 640ms;
  --motion-fog-step: 60ms;
  --motion-fog-blur: 8px;
}
@keyframes ikhi-fog { from { opacity: 0; filter: blur(var(--motion-fog-blur)); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: no-preference) {
  :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])[data-state="open"] {
    animation: ikhi-dialog-in var(--motion-enter) var(--motion-ease) both;
  }
}
:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])[data-state="closed"] {
  animation: ikhi-dialog-out var(--motion-exit) var(--motion-ease) both;
  pointer-events: none;
}
:is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"], [data-slot="sheet-overlay"])[data-state="open"] {
  animation: ikhi-fade-in var(--motion-enter) var(--motion-ease) both;
}
:is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"], [data-slot="sheet-overlay"])[data-state="closed"] {
  animation: ikhi-fade-out var(--motion-exit) var(--motion-ease) both;
}
:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="sheet-content"]) {
  overscroll-behavior: contain;
  scroll-padding-block: 24px;
}
:is([data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="select-content"], [data-slot="popover-content"], [data-slot="hover-card-content"], [data-slot="tooltip-content"]) {
  animation-duration: var(--motion-fast);
  animation-timing-function: var(--motion-ease);
}
:is([data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="select-content"], [data-slot="popover-content"], [data-slot="hover-card-content"], [data-slot="tooltip-content"])[data-state="closed"] {
  animation-duration: var(--motion-press);
}
[data-slot="sheet-content"] { animation-timing-function: var(--motion-drawer); }
[data-slot="tooltip-content"][data-state="instant-open"],
[data-motion="instant"],
body:has([data-motion="instant"]) [data-slot="dialog-overlay"] { animation: none !important; }

:is(button, [data-slot="button"], a.primary, a.secondary) {
  -webkit-tap-highlight-color: transparent;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
    opacity var(--motion-fast) ease, scale var(--motion-press) var(--motion-ease);
}
:is(button, [data-slot="button"], a.primary, a.secondary):not(:disabled):not([aria-disabled="true"]):active {
  scale: .98;
}
:is(button, [data-slot="button"]):is(:disabled, [aria-disabled="true"]) { scale: 1; }
:is(button, input, select, textarea)[aria-busy="true"] { cursor: progress; }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-blue, var(--blue-500));
  outline-offset: 3px;
}
:is(input, textarea, select) {
  scroll-margin-block: 24px;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}
:is(input, textarea, select)[aria-invalid="true"] { border-color: var(--red-600) !important; }
:is(input, textarea, select):disabled { cursor: not-allowed; }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--brand-blue, var(--blue-500)); }

[data-slot="dialog-close"] {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius:8px;
}
@media (hover: hover) and (pointer: fine) {
  [data-slot="dialog-close"]:hover { background-color: #1c1b190a; }
}
.transcript-segment,
.question-card label { transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease; }
[data-slot="progress-indicator"] { transition: transform var(--motion-enter) var(--motion-ease); }
@keyframes ikhi-dialog-in { from { opacity: 0; translate: -50% calc(-50% + 8px); } to { opacity: 1; translate: -50% -50%; } }
@keyframes ikhi-sheet-up { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
@keyframes ikhi-sheet-down { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 100%; } }
@keyframes ikhi-dialog-out { from { opacity: 1; scale: 1; } to { opacity: 0; scale: .98; } }
@keyframes ikhi-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ikhi-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ikhi-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ikhi-notice-in { from { opacity: 0; translate: 0 -12px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes ikhi-notice-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -4px; } }
@keyframes ikhi-content-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes ikhi-content-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 2px; } }
@keyframes ikhi-pop-in { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes ikhi-panel-up { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

@media (pointer: coarse) {
  [data-slot="dialog-close"] { min-width: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after,
*::details-content {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :is(button, [data-slot="button"], a.primary, a.secondary):active { scale: 1; }
}
input[type="checkbox"],
input[type="radio"] { transition: scale var(--motion-press) var(--motion-settle); }
input:is([type="checkbox"], [type="radio"]):not(:disabled):active { scale: .88; }

/* Landing-only visual language: paper, blue, generous space, purposeful motion. */
/* Clip decorative overflow without creating a scroll container for sticky scenes.
   The compound selector must outrank .landing in the generated route stylesheet. */
.landing.landing-v2 { --landing-ease: cubic-bezier(.23,1,.32,1); overflow: clip; }
.landing-v2 .landing-nav { position: relative; z-index: 2; }
.landing-v2 .new-hero { padding-top: 100px; padding-bottom: 120px; }
.landing-v2 .new-hero h1 { letter-spacing: -.045em; }
.landing-v2 .primary, .landing-v2 .nav-login, .landing-v2 button { transition: transform 160ms var(--landing-ease), background-color 180ms ease, box-shadow 180ms ease; }
.landing-v2 .primary { background: var(--blue); box-shadow: none; }
.landing-v2 .primary svg { transition: transform 200ms var(--landing-ease); }
.landing-v2 button:active, .landing-v2 .primary:active, .landing-v2 .nav-login:active { transform: scale(.97); }
.landing-v2 :is(button,a,summary):focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.scene-caption { display: block; text-align: center; margin-top: 15px; font-size: 11px; color: var(--gray-600); }
.landing-v2 .landing-import { background: var(--blue-50); padding: 110px 24px 85px; }
.timetable-demo { display: grid; grid-template-columns: 1.15fr 60px 1fr; max-width: 820px; align-items: center; margin: 52px auto 42px; text-align: left; gap: 10px; }
.timetable-sheet { background: var(--surface); padding: 25px; border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
.import-connector { display: grid; place-items: center; color: var(--gray-400); }
.import-receipt { background: var(--surface); border-radius: var(--radius-l); padding: 26px; box-shadow: var(--shadow-2); }
.import-receipt h3 { font-size: 20px; letter-spacing: -.03em; }
.landing-v2 .import-receipt p { font-size: 12px; margin: 8px 0 21px; }
.landing-v2 .faq-section { max-width: 1060px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding-top: 130px; padding-bottom: 130px; }
.landing-v2 .faq-section h2 { font-size: 30px; margin-bottom: 13px; letter-spacing: -.04em; }
.faq-heading > p { font-size: 15px; color: var(--gray-600); }
.landing-v2 .faq-list summary { font-size: 16px; }
.landing-v2 .faq-list details[open] p { animation: landing-answer 200ms var(--landing-ease); }
@keyframes wave-settle { from { transform: scaleY(.35); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
@keyframes landing-answer { from { opacity: .3; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (hover:hover) and (pointer:fine) {
  .landing-v2 .primary:hover { background: var(--blue-700); box-shadow: none; }
  .landing-v2 .primary:hover svg { transform: translateX(3px); }
  .landing-v2 .faq-list summary:hover { color: var(--blue); }
}
@media (max-width:900px) {
  .landing-v2 .faq-section { gap: 35px; }
}
@media (max-width:700px) {
  .landing-v2 .new-hero { padding: 60px 20px 70px; }
  .landing-v2 .new-hero h1 { font-size: clamp(33px,7.5vw,49px); }
  .landing-v2 .new-hero > p { font-size: 16px; }
  .landing-v2 .landing-import { padding: 70px 24px; }
  .landing-v2 .landing-import > p { font-size: 15px; }
  .timetable-demo { grid-template-columns: 1fr; max-width: 390px; gap: 20px; margin-top: 35px; }
  .timetable-sheet { margin: 0 10px; }
  .import-connector { transform: rotate(90deg); }
  .import-receipt { margin: 0 4px; }
  .landing-v2 .faq-section { display: block; padding: 75px 24px; }
  .faq-heading { margin-bottom: 28px; }
}
@media (prefers-reduced-motion:reduce) {
  .landing-v2 *, .landing-v2 *::before, .landing-v2 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.landing-v2 :focus-visible, .landing-v2 .timetable-demo:has(:focus-visible) *, .landing-v2 details:has(:focus-visible) * { animation: none; transition: none; }

.landing-v2 :is(.landing-import h2,.faq-section h2) { font-weight: 730; }
.landing-v2 .import-receipt h3 { font-weight: 650; }

/* Company details use the same quiet hierarchy as the rest of the landing. */
.landing-v2 .business-footer { display: block; padding: 45px 32px 38px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-bottom: 30px; border-bottom: 1px solid var(--gray-100); }
.footer-brand { display: flex; align-items: center; gap: 22px; }
.footer-brand > span { font-size: 13px; color: var(--gray-600); }
.footer-top nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 13px; }
.footer-top nav a[href="/privacy"] { color: var(--gray-700); font-weight: 650; }
.footer-business { padding-top: 27px; color: var(--gray-600); }
.footer-business > strong { display: block; font-size: 14px; font-weight: 650; color: var(--gray-700); margin-bottom: 14px; }
.footer-business dl { display: flex; flex-wrap: wrap; gap: 6px 24px; max-width: 880px; font-size: 12px; line-height: 1.8; }
.footer-business dl > div { display: flex; gap: 7px; }
.footer-business dt { flex-shrink: 0; }
.footer-business dd { margin: 0; overflow-wrap: anywhere; }
.footer-business .footer-address { flex-basis: 100%; }
.footer-business > small { display: block; font-size: 11px; margin-top: 20px; }
@media (hover:hover) and (pointer:fine) { .business-footer a:hover { color: var(--blue); } }
@media (max-width:700px) {
  .landing-v2 .business-footer { padding: 32px 24px; }
  .footer-top { align-items: flex-start; flex-direction: column; gap: 24px; }
  .footer-brand { align-items: flex-start; flex-direction: column; gap: 14px; }
  .footer-top nav { gap: 18px; }
  .footer-business dl { flex-direction: column; gap: 7px; }
  .footer-business .footer-address { flex-basis: auto; }
}

/* Two short scroll-driven scenes. Native scrolling remains uninterrupted. */
.timetable-demo .timetable-sheet, .timetable-demo .import-receipt { transform: none; transition: none; }
.timetable-track { max-width: 820px; margin: 52px auto 42px; }
.timetable-track .timetable-demo { margin: 0; }
@media (max-width:700px) {
  .timetable-track { margin: 35px auto 38px; max-width: 390px; }
}
/* Product previews share the live reader and feedback components. */
.product-window { position: relative; margin: 64px auto 0; max-width: 1080px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-2); }
.product-window-caption { display: flex; justify-content: space-between; padding: 16px 22px; background: var(--gray-50); color: var(--gray-600); font-size: 12px; border-bottom: 1px solid var(--line); }
.product-workspace { display: grid; grid-template-columns: 145px 1fr; }
.product-main { padding: 26px; min-width: 0; background: var(--gray-50); }
.product-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-600); margin-bottom: 12px; }
.product-main > h3 { font-size: 23px; font-weight: 650; margin-bottom: 24px; }
.product-lecture-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; align-items: start; }
.product-reading.study-panel { position: relative; top: auto; max-height: none; overflow: visible; min-height: 355px; text-align: left; }
.product-reading .tabs { display: flex; gap: 22px; }
.product-reading .tabs button { font-size: 13px; padding: 18px 0; }
.product-reading .transcript-tools { display: flex; align-items: center; justify-content: space-between; font-size: 11px; margin-bottom: 13px; color: var(--gray-600); }
.product-reading .transcript-tools small { font-size: 10px; }
.product-reading .transcript-scroll { max-height: none; overflow: visible; }
.product-reading .transcript-segment { font-size: 13px; }
.product-reading .summary-text { font-size: 13px; line-height: 1.85; padding: 0; }
.everytime-preview.timetable-sheet { padding: 22px 18px 16px; border-radius:12px; }
.everytime-title { display: flex; justify-content: space-between; color: var(--red-600); font-size: 17px; font-weight: 750; }
.everytime-title > span { color: var(--gray-700); font-size: 12px; font-weight: 500; }
.everytime-semester { color: var(--gray-600); font-size: 11px; margin-top: 23px; }
.everytime-preview h3 { font-size: 23px; font-weight: 700; margin: 5px 0 20px; }
.everytime-grid { display: grid; grid-template-columns: 22px repeat(5,minmax(0,1fr)); grid-template-rows: 27px 280px; border: 1px solid var(--gray-300); }
.everytime-grid > span { text-align: center; font-size: 10px; line-height: 27px; color: var(--gray-500); border-left: 1px solid var(--gray-200); }
.everytime-axis { display: flex; flex-direction: column; font-size: 9px; color: var(--gray-500); border-top: 1px solid var(--gray-200); }
.everytime-axis span { height: 40px; text-align: right; padding: 3px; }
.everytime-day { position: relative; border-left: 1px solid var(--gray-200); border-top: 1px solid var(--gray-200); background: repeating-linear-gradient(to bottom, transparent 0 39px, var(--gray-100) 39px 40px); }
.everytime-event { position: absolute; left: 0; right: 0; padding: 5px 3px; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; min-height: 50px; color: var(--gray-800); background: var(--gray-100); border-radius: 4px; }
.everytime-event b { font-weight: 650; }.everytime-event small { display: block; font-size: 8px; margin-top: 3px; }
.event-0 { top: 0; height: 50px; }.event-1 { top: 60px; height: 50px; }.event-2 { top: 180px; height: 50px; }.event-3 { top: 120px; height: 50px; }
.timetable-track { max-width: 950px; }.timetable-track .timetable-demo { max-width: none; grid-template-columns: 1fr 50px 1fr; }
.timetable-track .import-receipt { padding: 22px; }
@media(max-width:800px) { .product-workspace { grid-template-columns: 1fr; }.product-main { padding: 20px; }.product-lecture-grid { grid-template-columns: 1fr; }.product-window { margin-top: 40px; }.product-reading.study-panel { min-height: 335px; }.timetable-track { min-height: 0; }.timetable-track .timetable-demo { grid-template-columns: 1fr; max-width: 390px; margin: auto; } }
.product-lecture-grid { grid-template-columns: 1.2fr 1fr; }
.product-video { min-width: 0; }
.product-video .lp-screen { min-height: 290px; }
.product-video .lp-screen video { aspect-ratio: 16/10; }
.product-video-label { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 11px; color: var(--gray-600); }
.product-video-label small { margin-left: auto; font-size: 10px; }
@media(max-width:800px) { .product-lecture-grid { grid-template-columns: 1fr; }.product-video .lp-screen { min-height: 280px; }.product-video .lp-screen video { aspect-ratio: 16/10; } }
/* The file rows themselves travel into their final product UI positions. */
.product-reading .tabs { position: relative; gap: 22px; }
.product-reading .tabs > button { flex: 1; border-bottom-color: transparent; text-align: center; }
.product-reading .tabs::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: calc((100% - 22px)/2); background: var(--blue); transform: translateX(0); transition: transform 240ms var(--landing-ease); }
.product-reading[data-panel=summary] .tabs::after { transform: translateX(calc(100% + 22px)); }
.product-reading .transcript-segment { position: relative; transition: background-color 180ms ease, color 180ms ease; }
.product-reading .transcript-segment.current { box-shadow: inset 2px 0 0 var(--blue); }
.product-reading .summary-text { animation: landing-answer 240ms var(--landing-ease); }
@media (hover:hover) and (pointer:fine) {
  .product-reading .transcript-segment:hover { background: var(--blue-50); }
  .product-reading .transcript-segment:hover time { color: var(--blue); }
}
.product-reading:has(:focus-visible) .tabs::after { transition: none; }

/* Landing explanation and the original player experience. */
.landing-renewal .journey-section { padding: 96px 32px 64px; background: var(--gray-50); }
.landing-renewal .journey-intro h2 { font-weight: 680; }
.journey-intro > p { word-break: keep-all; }
.journey-footnote { max-width: 1080px; margin: 24px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.7; color: var(--gray-600); text-align: left; }
.journey-footnote > a { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-700); }
.landing-renewal .player-experience { padding: 96px 32px 88px; background: var(--surface); }
.landing-renewal .journey-window { margin-top: 44px; }
.journey-window .product-main { padding: 30px 26px; }
.landing-renewal .landing-import { background: var(--surface); }
.landing-renewal .landing-import .import-availability { display: block; margin-top: 20px; font-size: 11px; color: var(--gray-600); line-height: 1.7; }

/* Intrinsic content sizing: no fixed-height frame and no clipping mask. */
.story-accessible { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* A recognizable school LMS surrounds the original lecture. */

/* The recording travels between two distinct products, into the same lesson. */
@media (max-width: 700px) {
  .landing-renewal .journey-section, .landing-renewal .player-experience { padding: 72px 18px 56px; }
  .journey-intro > p { max-width: 330px; margin: 20px auto 0; }
  .journey-intro > p br { display: none; }
  .journey-footnote { flex-direction: column; align-items: flex-start; gap: 9px; margin: 24px 0 0; font-size: 11px; }
  .journey-window .product-window-caption { align-items: flex-start; flex-direction: column; gap: 5px; padding: 16px 18px; }
  .journey-window .trial-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px; }
  .journey-window .trial-steps button { min-height: 44px; padding: 11px 3px; font-size: 11px; }
  .journey-window .product-main { padding: 20px 16px; }
  .journey-window .product-main > h3 { font-size: 20px; margin-bottom: 16px; }
  .journey-window .trial-instruction { font-size: 13px; line-height: 1.7; word-break: keep-all; }
  .journey-window .product-video .lp-screen { min-height: 0; }
  .journey-window .product-video .lp-screen video { aspect-ratio: 16 / 10; }
  .journey-window .product-video-label { flex-wrap: wrap; gap: 6px; }
  .journey-window .product-video-label small { flex-basis: 100%; margin-left: 20px; }
}

/* A quiet, expansive landing system. Scoped to protect the study workspace. */
.landing-renewal { --blue: var(--blue-500); --ink: var(--gray-900); --landing-header-height: 88px; color: var(--ink); }
.landing-renewal .landing-nav { position: sticky; top: 0; z-index: 20; max-width: 1240px; height: var(--landing-header-height); padding: 0 40px; background: transparent; isolation: isolate; }
.landing-renewal .landing-nav::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; left: 50%; width: 100vw; height: calc(100% + 32px); transform: translateX(-50%); background: var(--surface); }
.landing-renewal .landing-nav nav { font-size: 14px; gap: 34px; }
.landing-renewal .nav-login { background: var(--gray-100);}
.landing-renewal .landing-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }
.landing-renewal .landing-nav-actions .nav-pricing { background: transparent; }
/* 요금제 sits in the menu (2026-10-02); the copy beside 로그인 is only for phones, where the menu is hidden (≤800px). */
@media (min-width: 801px) { .landing-renewal .landing-nav-actions .nav-pricing { display: none; } }
@media (hover: hover) { .landing-renewal .landing-nav-actions .nav-pricing:hover { background: var(--gray-100); } }
.landing-renewal .new-hero { position: relative; display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 0; max-width: 1320px; min-height: calc(100vh - var(--landing-header-height)); min-height: calc(100svh - var(--landing-header-height)); padding: 40px 60px 72px; text-align: left; }
.landing-renewal .hero-copy { position: relative; z-index: 1; }
.landing-renewal .new-hero h1 { margin: 0; font-size: clamp(42px,4.4vw,60px); line-height: 1.38; letter-spacing: -.035em; font-weight: 650; white-space: nowrap; }
.landing-renewal .new-hero h1 em { color: var(--blue-500); background: none; }
.hero-copy > p { color: var(--gray-600); font-size: 18px; line-height: 1.85; margin: 27px 0 33px; letter-spacing: -.025em; }
.hero-actions { display: flex; align-items: center; gap: 23px; }
.landing-renewal .hero-copy .hero-actions { margin-top: 36px; }
.landing-renewal .primary { box-shadow: none;}
.hero-secondary { display: inline-flex; align-items: center; gap: 7px; color: var(--gray-700); font-size: 14px; font-weight: 550; }
/* Blend the illustration's white canvas into the page without an opaque backdrop. */
.landing-renewal section[id] { scroll-margin-top: calc(var(--landing-header-height) + 24px); }
.landing-product-section { padding: 112px 32px 72px; background: var(--gray-50); text-align: center; }
.landing-renewal .product-intro h2 { font-size: clamp(34px,3.7vw,48px); line-height: 1.38; letter-spacing: -.045em; font-weight: 730; }
.product-intro > p { margin-top: 23px; color: var(--gray-600); font-size: 17px; line-height: 1.85; }
.landing-renewal .product-window { margin-top: 52px; border: 1px solid var(--gray-200); border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
.landing-renewal .product-window-caption { background: var(--surface); padding: 18px 24px; }
.landing-renewal .product-main { background: var(--blue-50); }
.landing-renewal .landing-import { padding: 110px 32px 90px; background: var(--blue-50); }
.landing-renewal .landing-import h2 { font-size: clamp(34px,3.7vw,48px); line-height: 1.4; letter-spacing: -.045em; }
.landing-renewal .landing-import > p { color: var(--gray-600); font-size: 16px; }
.landing-renewal .timetable-track { max-width: 880px; }
.landing-renewal .faq-section { max-width: 1100px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 90px; padding: 120px 40px; }
.landing-renewal .faq-section h2 { font-size: 30px; letter-spacing: -.04em; line-height: 1.5; }
.landing-renewal .faq-list summary { font-size: 16px; padding: 25px 0; }
.landing-renewal .faq-list details p { font-size: 14px; line-height: 1.9; }
.landing-renewal .business-footer { padding-top: 20px; padding-bottom: 50px; }
@media (hover:hover) { .hero-secondary:hover { color: var(--blue-500); } }
@media (max-width:1000px) {
  .landing-renewal .new-hero { padding-left: 36px; padding-right: 36px; }
  .landing-renewal .new-hero h1 { font-size: 45px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { gap: 15px; flex-wrap: wrap; }
  .landing-renewal .faq-section { gap: 45px; }
}
@media (max-width:700px) {
  .landing-renewal { --landing-header-height: 72px; }
  .landing-renewal .landing-nav { padding: 0 24px; }
  .landing-renewal .new-hero { display: flex; flex-direction: column; justify-content: center; padding: 32px 24px 56px; text-align: center; }
  .landing-renewal .new-hero h1 { font-size: clamp(29px,8vw,50px); letter-spacing: -.035em; line-height: 1.4; }
  .landing-renewal .hero-copy .hero-actions { margin-top: 28px; }
  .hero-copy > p { font-size: 14px; line-height: 1.85; margin: 23px 0 26px; }
  .hero-actions { justify-content: center; gap: 17px; }
  .hero-secondary { font-size: 12px; gap: 4px; }
  .landing-product-section { padding: 72px 18px 40px; }
  .landing-renewal .product-intro h2 { font-size: 31px; }
  .product-intro > p { font-size: 14px; line-height: 1.85; }
  .landing-renewal .product-window { margin-top: 32px; border-radius:16px; }
  .landing-renewal .product-window-caption { padding: 14px; font-size: 10px; }
  .landing-renewal .landing-import { padding: 75px 24px; }
  .landing-renewal .landing-import h2 { font-size: 31px; }
  .landing-renewal .landing-import > p { font-size: 14px; }
  .landing-renewal .faq-section { display: block; padding: 75px 24px; }
  .landing-renewal .faq-section h2 { font-size: 28px; }
  .landing-renewal .faq-list summary { font-size: 14px; padding: 22px 0; }
}

/* Korean hierarchy through the complete landing journey. */
.landing-renewal .new-hero h1 {font-weight:750;word-break:keep-all;}
.landing-renewal .hero-secondary {min-height:44px;display:inline-flex;align-items:center;font-size:15px;}
.landing-renewal .nav-login {border:0;background:var(--gray-100);}
.landing-renewal .faq-list summary {font-size:18px;line-height:1.6;gap:20px;}
.landing-renewal .faq-list details p {font-size:16px;}
@media(max-width:700px){.landing-renewal .hero-actions{flex-direction:column;gap:8px;}.landing-renewal .hero-secondary{font-size:14px;}.landing-renewal .new-hero h1{font-size:clamp(32px,8.5vw,50px);}.landing-renewal .faq-list summary{font-size:17px;}}

.landing-renewal .hero-cta {background:var(--action-blue);border-color:var(--action-blue);}

/* Finishing system: a white opening, quiet blue chapters, and paper-like demos.
   Keep the live learning components and their interaction geometry intact. */
.landing-renewal {
  --landing-muted: var(--gray-700);
  --landing-line: var(--gray-200);
  --landing-paper-shadow: var(--shadow-2);
}
.landing-renewal .landing-nav::before {
  height: 100%; background: var(--surface); border-bottom: 1px solid var(--line);
}
.landing-renewal .landing-nav nav a {
  position: relative; padding-block: 14px;
  transition: color var(--motion-fast) var(--motion-ease);
}
.landing-renewal .landing-nav nav a::after {
  content: ""; position: absolute; inset: auto 0 7px; height: 2px;
  background: var(--action-blue); transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.landing-renewal .primary {
  background: var(--action-blue); border-color: var(--action-blue);
  box-shadow: none; }
.landing-renewal :is(h2,h3,p,summary) { word-break: keep-all; overflow-wrap: break-word; }
.landing-renewal :is(.product-intro,.landing-import) h2 {
  font-weight: 740; line-height: 1.4; letter-spacing: -.045em; text-wrap: balance;
}
.landing-renewal .product-intro > p, .landing-renewal .landing-import > p { color: var(--landing-muted); line-height: 1.85; }
.landing-renewal .journey-section {
  padding-top: 112px; padding-bottom: 64px;
  background: var(--gray-50); border-top: 1px solid var(--gray-100);
}
.landing-renewal .product-window { border-color: var(--landing-line); box-shadow: var(--landing-paper-shadow); }
.landing-renewal .journey-footnote { color: var(--landing-muted); padding-top: 8px; }
.landing-renewal .player-experience { padding-top: 120px; padding-bottom: 112px; }
.landing-renewal .product-window-caption { padding: 18px 24px; color: var(--gray-700); }
.landing-renewal .product-window-caption > span { font-weight: 650; }
.landing-renewal .product-window-caption > small { font-size: 12px; }
.landing-renewal .landing-import {
  background: var(--gray-50); padding-top: 112px; padding-bottom: 100px;
  border-block: 1px solid var(--gray-100);
}
.landing-renewal .landing-import .import-availability { font-size: 12px; }
.landing-renewal .timetable-demo .timetable-sheet, .landing-renewal .timetable-demo .import-receipt { box-shadow: var(--landing-paper-shadow); }
.landing-renewal .faq-section { max-width: 1180px; padding-top: 96px; padding-bottom: 112px; gap: 80px; border-top: 1px solid var(--landing-line); }
.landing-renewal .faq-heading h2 { margin: 0; font-size: 32px; font-weight: 730; }
.landing-renewal .faq-list details { border-color: var(--landing-line); }
.landing-renewal .faq-list summary { padding: 25px 4px; font-size: 17px; font-weight: 550; transition: color var(--motion-fast) var(--motion-ease); }
.landing-renewal .faq-list summary svg { color: var(--gray-500); transition: transform var(--motion-enter) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
.landing-renewal .faq-list details[open] summary { color: var(--action-blue); }
.landing-renewal .faq-list details[open] summary svg { color: var(--action-blue); }
.landing-renewal .faq-list details p { padding: 0 32px 26px 4px; margin: 0; font-size: 15px; line-height: 1.9; color: var(--landing-muted); }
@supports (interpolate-size: allow-keywords) {
  .landing-renewal .faq-list details { interpolate-size: allow-keywords; }
  .landing-renewal .faq-list details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size var(--motion-enter) var(--motion-ease), content-visibility var(--motion-enter) allow-discrete;
  }
  .landing-renewal .faq-list details[open]::details-content { block-size: auto; }
}
.landing-renewal .business-footer { max-width: 1200px; padding: 24px 40px 48px; }
.landing-renewal .footer-top { padding-bottom: 32px; }
.landing-renewal .business-footer nav a { transition: color var(--motion-fast) var(--motion-ease); }
@media (hover:hover) {
  .landing-renewal .landing-nav nav a:hover, .landing-renewal .business-footer nav a:hover, .landing-renewal .faq-list summary:hover { color: var(--action-blue); }
  .landing-renewal .landing-nav nav a:hover::after { transform: scaleX(1); }
  .landing-renewal .primary:hover { background: var(--blue-700); box-shadow: none; }
}
@media (max-width: 700px) {
  .landing-renewal .landing-nav { padding-inline: 20px; }
  .landing-renewal :is(.journey-section,.player-experience,.landing-import) { padding: 76px 20px; }
  .landing-renewal .product-intro h2, .landing-renewal .landing-import h2 { font-size: 31px; }
  .landing-renewal .product-intro > p, .landing-renewal .landing-import > p { font-size: 15px; }
  .landing-renewal .product-window-caption { padding: 16px; align-items: flex-start; gap: 6px; flex-direction: column; font-size: 12px; }
  .landing-renewal .product-window-caption > small { font-size: 11px; }
  .landing-renewal .faq-section { margin-inline: 24px; padding: 64px 0 72px; }
  .landing-renewal .faq-heading h2 { font-size: 28px; margin-bottom: 24px; }
  .landing-renewal .faq-list summary { font-size: 16px; padding-block: 22px; gap: 16px; }
  .landing-renewal .faq-list details p { padding-right: 8px; font-size: 15px; }
  .landing-renewal .business-footer { padding: 20px 24px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-renewal .landing-nav nav a::after, .landing-renewal .faq-list details::details-content, .landing-renewal .faq-list summary, .landing-renewal .faq-list summary svg { transition: none; }
}

/* Recording and hands-on lesson: one quiet frame and a clear current step. */
.landing-renewal .journey-window { max-width: 1000px; border-radius: var(--radius-l); }
.landing-renewal .journey-window .product-workspace { display: block; }
.landing-renewal .journey-window .product-main { background: var(--surface); padding: 32px; }
.landing-renewal .journey-window .product-window-caption { background: var(--gray-50); border-bottom: 0; }
.landing-renewal .journey-window .trial-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding: 0 24px; border-bottom: 1px solid var(--gray-200); }
.landing-renewal .journey-window .trial-steps button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 64px; padding: 14px 8px; border-radius:0; border-bottom: 2px solid transparent; background: transparent; color: var(--gray-600); font-size: 14px; font-weight: 550; }
.landing-renewal .journey-window .trial-steps button[aria-pressed=true] { color: var(--blue-600); border-bottom-color: var(--blue-600); font-weight: 700; }
.trial-step-number { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius:50%; background: var(--gray-100); color: var(--gray-600); font-size: 12px; font-variant-numeric: tabular-nums; transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
[aria-pressed=true] > .trial-step-number { background: var(--blue-600); color: white; }
.landing-renewal .journey-window .product-main > h3 { margin-bottom: 10px; font-size: 25px; letter-spacing: -.04em; }
.landing-renewal .journey-window .trial-instruction { margin-bottom: 24px; font-size: 14px; }
.landing-renewal .journey-window .product-lecture-grid { grid-template-columns: 1.12fr 1fr; gap: 28px; }
.landing-renewal .journey-window .product-reading { padding: 0; border: 0; border-radius:0; box-shadow: none; background: var(--surface); min-height: 0; }
.landing-renewal .journey-window .product-reading .tabs { margin: 0 0 16px; }
.landing-renewal .journey-window .product-reading .tabs button { padding: 10px 0 14px; }
.landing-renewal .journey-window .product-reading .transcript-segment { padding: 13px 12px; font-size: 14px; font-weight: 450; line-height: 1.7; border: 0; border-radius:8px; }
.landing-renewal .journey-window .product-reading .transcript-segment.current { background: var(--blue-50); box-shadow: inset 2px 0 0 var(--blue-600); }
.landing-renewal .journey-window .trial-next { display: flex; margin: 28px 0 0 auto; }
.landing-renewal .journey-window .question-card { padding: 0; border: 0; border-radius:0; background: transparent; }
.landing-renewal .journey-window .question-card legend { margin-bottom: 16px; color: var(--gray-600); font-size: 13px; }
.landing-renewal .journey-window .question-card h3 { max-width: 600px; font-size: 24px; line-height: 1.45; margin-bottom: 24px; letter-spacing: -.025em; }
.landing-renewal .journey-window .answer-options { display: grid; gap: 10px; }
.landing-renewal .journey-window .answer-options label { min-height: 56px; border: 1px solid var(--gray-200); border-radius:12px; padding: 14px 18px; font-size: 15px; }
.landing-renewal .journey-window .answer-options label.selected { background: var(--blue-50); border-color: var(--blue-600); }
.landing-renewal .journey-window .review-explanation { padding: 24px; border-radius:16px; }
@media (hover:hover) { .landing-renewal .journey-window .trial-steps button:hover { background: var(--gray-50); } }
@media (max-width:800px) {
  .landing-renewal .journey-window .product-lecture-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .landing-renewal .journey-window .product-main { padding: 24px 18px; }
  .landing-renewal .journey-window .product-main > h3 { font-size: 22px; }
  .landing-renewal .journey-window .product-reading .transcript-tools { margin-bottom: 8px; }
  .landing-renewal .journey-window .product-reading .tabs { margin-bottom: 14px; }
  .landing-renewal .journey-window .product-video-label { gap: 6px; font-size: 11px; }
  .landing-renewal .journey-window .product-video-label > small { flex-basis: auto; margin-left: auto; }
  .landing-renewal .journey-window .product-video-label > span { display: none; }
  .landing-renewal .journey-window .trial-steps { padding-inline: 8px; }
  .landing-renewal .journey-window .trial-steps button { font-size: 12px; gap: 6px; min-height: 56px; padding-inline: 3px; }
  .landing-renewal .journey-window .trial-next { width: 100%; justify-content: center; }
  .landing-renewal .journey-window .question-card h3 { font-size: 21px; }
  .landing-renewal .journey-window .review-explanation { padding: 20px 16px; }
  .landing-renewal .journey-window .trial-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .landing-renewal .journey-window .trial-actions :is(a,button) { margin: 0; font-size: 13px; padding: 12px; }
  .landing-renewal .journey-window .trial-actions .primary { grid-column: 1/-1; justify-content: center; }
}
/* Inline demo controls sit below the picture; fullscreen keeps the live player. */
.landing-renewal .lecture-player:not(:fullscreen) .lp-controls {
  position: relative; padding: 0 12px 6px; background: var(--gray-900); opacity: 1; pointer-events: auto;
}
.landing-renewal .lecture-player:not(:fullscreen) .lp-caption { bottom: 12px; font-size: 13px; line-height: 1.6; }
.landing-renewal .lecture-player:not(:fullscreen) .lp-transport { inset: 0 0 48px; gap: 18px; }
.landing-renewal .lecture-player:not(:fullscreen) .lp-transport button { background: color-mix(in srgb, var(--ink) 65%, transparent); width: 44px; height: 44px; }
.landing-renewal .lecture-player:not(:fullscreen) .lp-transport .lp-mobile-play { width: 52px; height: 52px; }
.landing-renewal .lecture-player:not(:fullscreen) .lp-transport .lp-skip small { top: 16px; }
.landing-renewal .journey-window .product-reading .transcript-tools { min-height: 24px; padding: 0; margin-bottom: 8px; }
.landing-renewal .journey-window .product-video-label > svg { display: none; }
.landing-renewal .journey-window .review-explanation > h3 { font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 10px; }
.landing-renewal .journey-window .review-explanation > p { font-size: 14px; line-height: 1.85; }
@media (prefers-reduced-motion: reduce) { .trial-step-number { transition: none; } }
/* 랜딩 버튼: 공통 체계(M 44 · L 48 · 알약)를 여기서만 압축 재현. buttons.css는 초기 CSS 예산 때문에 랜딩 번들에 넣지 않는다. */
.landing-renewal .primary, .landing-renewal .secondary, .landing-renewal .nav-login{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border-radius:var(--radius-pill);font-size:15px;font-weight:600;line-height:1.25}
.landing-renewal .hero-actions .primary, .landing-renewal .trial-actions .primary{min-height:48px;padding:0 24px;font-size:15px}
.landing-renewal .primary, .landing-renewal .primary:hover{box-shadow:var(--btn-shadow)}
.landing-renewal .secondary{background:var(--surface);color:var(--ink);border:0;box-shadow:0 0 0 1px var(--gray-300)}
@media(max-width:800px){.landing-renewal .hero-actions .primary{min-height:52px;width:100%;font-size:16px}}

/* 체험(2026-09-30): 창 틀 없이 흰 면 위의 실제 플레이어·원문·문제. 단계 전환은 View Transitions로 잇는다(ProductPreview `morph`). */
.landing-renewal .journey-window.product-window { max-width: 1080px; margin-top: 48px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.landing-renewal .journey-window .product-window-caption { justify-content: space-between; padding: 0 0 14px; background: none; border: 0; color: var(--muted); font-size: 13px; }
.landing-renewal .journey-window .product-window-caption > span { color: var(--ink); font-weight: 650; }
.landing-renewal .journey-window .trial-steps { padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.landing-renewal .journey-window .trial-steps button { position: relative; border-bottom-color: transparent; }
.landing-renewal .journey-window .trial-steps button[aria-pressed=true] { border-bottom-color: transparent; }
.trial-tab-line { position: absolute; inset: auto 0 -1px; height: 2px; background: var(--blue-600); view-transition-name: trial-tab-line; }
.landing-renewal .journey-window .product-main { padding: 32px 0 0; background: transparent; }
.landing-renewal .journey-window .product-video { view-transition-name: trial-video; }
.landing-renewal .journey-window .product-reading { view-transition-name: trial-reading; }
.landing-renewal .journey-window .trial-question { view-transition-name: trial-question; }
::view-transition-group(trial-tab-line), ::view-transition-group(trial-video), ::view-transition-group(trial-reading), ::view-transition-group(trial-question) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
@media (max-width: 700px) {
  .landing-renewal .journey-window.product-window { margin-top: 32px; }
  .landing-renewal .journey-window .product-main { padding-top: 24px; }
}

/* FAQ: 읽는 한 열. 제목 위, 질문은 크게, 답은 본문 크기로. */
.landing-renewal .faq-section { display: block; max-width: 880px; margin: 0 auto; padding: 120px 40px 128px; border: 0; }
.landing-renewal .faq-heading h2 { margin: 0 0 28px; font-size: clamp(32px, 3.4vw, 44px); font-weight: 740; letter-spacing: -.045em; }
.landing-renewal .faq-list { border-top: 1px solid var(--ink); }
.landing-renewal .faq-list details { border-bottom: 1px solid var(--line); }
.landing-renewal .faq-list summary { padding: 26px 4px; color: var(--ink); font-size: 20px; font-weight: 620; letter-spacing: -.03em; line-height: 1.5; }
.landing-renewal .faq-list details p { max-width: 64ch; padding: 0 40px 28px 4px; color: var(--gray-700); font-size: 17px; line-height: 1.85; }
@media (max-width: 700px) {
  .landing-renewal .faq-section { margin: 0; padding: 80px 20px 88px; }
  .landing-renewal .faq-heading h2 { margin-bottom: 20px; font-size: 30px; }
  .landing-renewal .faq-list summary { padding: 22px 2px; font-size: 17px; }
  .landing-renewal .faq-list details p { padding: 0 8px 22px 2px; font-size: 15px; }
}

/* 푸터: 앱 배지는 워드마크 아래(떠 있지 않게), 메뉴는 오른쪽. */
.landing-renewal .footer-top { align-items: flex-start; }
.footer-lead { display: grid; gap: 20px; }
.landing-renewal .footer-lead .store-links { --badge-height: 36px; justify-content: flex-start; gap: 10px; margin: 0; }
.landing-renewal .footer-top nav { padding-top: 10px; }


/* Landing story (2026-09-30): one sticky stage where 3D 익히 speaks through five beats — 연동 → 개념 → 성취도 → 복습 → 결과 —
   between a hero and a closing beat that share the same bubble-over-character layout. Scroll position sets data-beat/data-sub. */
/* The story starts under the sticky header so the stage fills the first screen exactly, before and after it sticks. */
html:has(.landing-story) { scroll-padding-top: 0; }
/* The approved wordmark's underline opens the two ink panels into the first scene. */
.ls-loader { position: fixed; inset: 0; z-index: 100; min-height: 100dvh; overflow: hidden; isolation: isolate; color: var(--surface); --loader-ease: cubic-bezier(.76, 0, .24, 1); }
.ls-loader::before, .ls-loader::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; background: var(--gray-900); }
.ls-loader::before { top: 0; bottom: 44%; }
.ls-loader::after { top: 56%; bottom: 0; }
body:has(.ls-loader) .analytics-consent { visibility: hidden; }
.ls-loader-wordmark { position: absolute; left: 50%; top: 56%; width: clamp(160px, 22vw, 280px); transform: translate(-50%, -94.275%); }
.ls-loader .ikhi-wordmark { display: block; width: 100%; height: auto; overflow: visible; color: inherit; }
.ls-loader-symbol { animation: ls-loader-enter 1s cubic-bezier(.16, 1, .3, 1) both; }
.ls-loader .ikhi-wordmark > path { stroke: var(--yellow-500); stroke-dasharray: 171; stroke-dashoffset: 0; animation: ls-loader-underline 2.8s cubic-bezier(.65, 0, .35, 1) infinite; }
.ls-loader-label { position: absolute; left: 24px; bottom: max(32px, env(safe-area-inset-bottom)); color: var(--gray-300); font-size: 13px; font-weight: 500; letter-spacing: -.02em; line-height: 1.5; }
.ls-loader-seam { position: absolute; left: 0; right: 0; top: 56%; height: 2px; margin-top: -1px; background: var(--yellow-500); opacity: 0; transform: scaleX(0); }
.ls-loader[data-ready="true"] { pointer-events: none; }
.ls-loader[data-ready="true"]::before { animation: ls-loader-open-top .7s var(--loader-ease) .15s both; }
.ls-loader[data-ready="true"]::after { animation: ls-loader-open-bottom .7s var(--loader-ease) .15s both; }
.ls-loader-wordmark { transition: opacity .2s ease-in; }
.ls-loader[data-ready="true"] .ls-loader-wordmark { opacity: 0; }
.ls-loader[data-ready="true"] .ls-loader-label { animation: ls-loader-leave .15s ease-in both; }
.ls-loader[data-ready="true"] .ls-loader-seam { animation: ls-loader-seam .45s var(--loader-ease) both; }
.ls-loader[data-ready="true"] .ikhi-wordmark > path { animation-play-state: paused; }
.landing-story .ls-stage[inert][data-beat] :is(.ls-say-hero, .ls-say-dock, .ls-replies) { visibility: hidden; }
.landing-story .ls-stage[inert][data-beat] :is(.ls-replies, .ls-bubble > *) { opacity: 0; }
@keyframes ls-loader-enter { from { opacity: 0; transform: translateY(24px); clip-path: inset(100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes ls-loader-underline { 0%, 15%, 100% { stroke-dashoffset: 0; } 45% { stroke-dashoffset: -171; } 45.01% { stroke-dashoffset: 171; } 80% { stroke-dashoffset: 0; } }
@keyframes ls-loader-leave { to { opacity: 0; transform: translateY(-12px); } }
@keyframes ls-loader-seam { 0% { opacity: 1; transform: scaleX(0); } 55% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes ls-loader-open-top { to { transform: translateY(-100%); } }
@keyframes ls-loader-open-bottom { to { transform: translateY(100%); } }
@media (min-width: 768px) { .ls-loader-label { left: 48px; bottom: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .ls-loader *, .ls-loader::before, .ls-loader::after { animation: none !important; }
  .ls-loader[data-ready="true"] { visibility: hidden; }
}
.landing-story { --head: var(--landing-header-height, 88px); --ls-bubble: var(--gray-100); --ls-ease: cubic-bezier(.16, 1, .3, 1); --ls-step-size: clamp(180px, 25vh, 220px); --ls-step-size: clamp(180px, 25svh, 220px); position: relative; height: calc((var(--steps) - 1) * var(--ls-step-size) + 100vh); height: calc((var(--steps) - 1) * var(--ls-step-size) + 100svh); margin-top: calc(-1 * var(--head)); }
.landing:has(.landing-story) ::selection { background: var(--yellow-500); color: var(--gray-900); }
.landing:has(.landing-story) :is(a, summary):focus-visible { outline: 3px solid var(--blue-600); outline-offset: 5px; }
.landing:has(.landing-story) .landing-nav::before { height: calc(100% + 40px); border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 62%, transparent), transparent); backdrop-filter: blur(16px); mask-image: linear-gradient(180deg, var(--gray-900) 45%, transparent); }
.landing:has(.landing-story) .faq-list summary { transition: color .2s, padding-left .35s var(--motion-ease), background-color .2s; }
@media (hover: hover) { .landing:has(.landing-story) .faq-list summary:hover { background: var(--gray-50); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .landing:has(.landing-story) .faq-list summary:hover { padding-left: 12px; } }
@media (prefers-reduced-motion: reduce) { .landing:has(.landing-story) .faq-list summary { transition: none; } }
/* The page sits on a soft grain gradient (2026-10-02 user reference): four large pastel lights that overlap across almost
   the whole page (2026-10-02 user request, so the glass bubbles always have color behind them), in two layers drifting at different speeds and directions. The grain is a noise mask on the
   lights themselves, so it exists only where there is color and drifts with it; white stays clean. Both layers sit
   below the content (z-index -1, tree order), so cards, bubbles and text stay clean. Transform-only drift runs on the
   compositor next to the 3D render loop. */
body:has(.landing-story) { background: var(--surface); }
.landing:has(.landing-story) { background: transparent; }
.landing:has(.landing-story)::before, .landing:has(.landing-story) > main::before { content: ""; position: fixed; z-index: -1; inset: -10vmax; pointer-events: none; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 0 0 0 1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); mask-size: 180px 180px; }
.landing:has(.landing-story)::before { background: radial-gradient(46% 52% at 24% 30%, color-mix(in srgb, var(--glow-cyan) 92%, transparent), transparent), radial-gradient(44% 46% at 34% 80%, color-mix(in srgb, var(--glow-pink) 88%, transparent), transparent); animation: ls-mesh-a 38s ease-in-out infinite alternate; }
.landing:has(.landing-story) > main::before { background: radial-gradient(46% 52% at 78% 28%, color-mix(in srgb, var(--glow-sky) 92%, transparent), transparent), radial-gradient(44% 48% at 68% 78%, color-mix(in srgb, var(--glow-lilac) 92%, transparent), transparent); animation: ls-mesh-b 29s ease-in-out infinite alternate; }
@keyframes ls-mesh-a { 50% { transform: translate3d(4vmax, 3vmax, 0) scale(1.06); } 100% { transform: translate3d(-3vmax, -2vmax, 0) scale(.97); } }
@keyframes ls-mesh-b { 50% { transform: translate3d(-5vmax, 2vmax, 0) scale(1.08); } 100% { transform: translate3d(2vmax, -4vmax, 0) scale(1.02); } }
/* Full strength behind the hero; from the first beat on it steps back to 70% — enough colour for the glass scenes to refract, quiet enough that they read first. */
.landing:has(.landing-story)::before, .landing:has(.landing-story) > main::before { transition: opacity .9s var(--motion-ease); }
.landing:has(.ls-stage:not([data-beat="0"]))::before, .landing:has(.ls-stage:not([data-beat="0"])) > main::before { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .landing:has(.landing-story)::before, .landing:has(.landing-story) > main::before { animation: none; transition: none; } }
/* Secondary text that sits straight on the light needs gray-700 to keep 4.5:1 on the strongest color. */
.landing:has(.landing-story) :is(.landing-footer, .footer-business, .footer-brand > span, .faq-list summary svg) { color: var(--gray-700); }
/* Empty snap targets preserve the one-stage composition and existing header anchors. */
.landing-story .ls-step { position: absolute; left: 0; right: 0; top: calc(var(--step) * var(--ls-step-size)); height: 1px; pointer-events: none; }
.landing-story .ls-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --p: min(calc(100vw / 1440), calc((100svh - var(--head)) / 712)); --fy: max(0px, calc((100svh - var(--head) - 712 * var(--p)) / 2)); }
.landing-story .ls-gl { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .8s; }
.landing-story .ls-stage[data-gl="on"] .ls-gl { opacity: 1; }
.landing-story .ls-still { position: absolute; z-index: 5; left: 50%; top: var(--hc-top, 50vh); width: min(74vw, calc(var(--hc-height, 680px) * 1.2)); height: auto; pointer-events: none; transform: translateX(-50%); transition: opacity .6s, width 1s var(--ls-ease), left 1s var(--ls-ease), top 1s var(--ls-ease); }
.landing-story .ls-stage[data-gl="on"] .ls-still { opacity: 0; }
/* .ls-spot is where 익히 stands: a square as tall as the model, its top at the head. The 3D stage reads it; per-step values set further down. */
.landing-story .ls-spot { position: absolute; visibility: hidden; pointer-events: none; left: calc(50% + (var(--sx, 720) - 720 - var(--sh, 400) / 2) * var(--p)); top: calc(var(--head) + var(--fy) + var(--st, 200) * var(--p)); width: calc(var(--sh, 400) * var(--p)); height: calc(var(--sh, 400) * var(--p)); }
.landing-story .ls-stage:is([data-beat="0"], [data-beat="6"]) .ls-spot { left: calc(50% - var(--hc-height, 680px) / 2); top: var(--hc-top, 50vh); width: var(--hc-height, 680px); height: var(--hc-height, 680px); }
.landing-story .ls-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.landing-story .ls-num { font-variant-numeric: tabular-nums; }
.landing-story .ls-fine { margin: 0; font-size: 13px; color: var(--gray-700); font-weight: 600; }
.landing-story .ls-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); }
.landing-story .ls-dot[data-s="solve"] { background: var(--green-500); }
.landing-story .ls-dot[data-s="check"] { background: var(--orange-500); }
.landing-story .ls-dot[data-s="new"] { background: transparent; box-shadow: inset 0 0 0 1.6px var(--gray-400); }
.landing-story .ls-mk { background: linear-gradient(var(--yellow-500), var(--yellow-500)) no-repeat 0 72% / var(--mk, 100%) 46%; padding: 0 .08em; margin: 0 -.08em; transition: background-size .9s var(--ls-ease) var(--mkd, 0s); }

/* 익히 speaks: a big bubble over the hero character, a docked bubble beside it through the story. */
.landing-story .ls-bubble { position: absolute; z-index: 7; color: var(--gray-900); border-radius: 24px; visibility: hidden; transition: transform .85s var(--ls-ease), visibility 0s .45s; }
/* Glass (2026-10-02 user request, references: Comeau "Next-level frosted glass", Apple Liquid Glass recipes).
   A bubble is glass → edge, over the page light. The glass layer grows by --ls-pad on every side so its blur pulls in color from
   around the bubble, then the measured path (shapeBubble) cuts body and tail out of it as one piece. The edge SVG
   draws that same path: an outside-only shadow, a blurred inner rim for thickness, and a rim lit from the top left.
   Bubbles fade their children, never themselves: a fading or filtered parent switches the children's blur off. */
.landing-story .ls-bubble { --ls-pad: 64px; }
/* Dark and light grain shared by the bubbles and the glass scenes. */
.landing-renewal { --ls-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .106 0 0 0 0 .098 .8 0 0 0 -.5'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 1.5 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"); }
.landing-story .ls-bubble > * { opacity: 0; transition: opacity .35s var(--ls-ease); }
.landing-story .ls-bubble > :is(.ls-m, .ls-s) { position: relative; }
.landing-story .ls-glass, .landing-story .ls-edge { position: absolute; pointer-events: none; }
.landing-story .ls-glass { inset: calc(-1 * var(--ls-pad)); clip-path: inset(var(--ls-pad) round 24px); background: var(--ls-grain) 0 0 / 170px 170px, linear-gradient(150deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface) 60%, transparent) 55%, color-mix(in srgb, var(--surface) 70%, transparent)); -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.12); backdrop-filter: blur(20px) saturate(1.6) brightness(1.12); }
.landing-story .ls-edge { left: calc(-1 * var(--ls-pad)); top: calc(-1 * var(--ls-pad)); width: calc(100% + 2 * var(--ls-pad)); height: calc(100% + 2 * var(--ls-pad)); overflow: visible; }
.landing-story .ls-edge path { fill: none; }
.landing-story .ls-edge .ls-edge-shadow { fill: var(--gray-900); fill-opacity: .17; }
.landing-story .ls-edge .ls-edge-glow { stroke: var(--surface); stroke-width: 16px; stroke-opacity: .75; }
.landing-story .ls-edge .ls-edge-rim { stroke-width: 1.5px; }
.landing-story .ls-edge .ls-rim-a { stop-color: var(--surface); stop-opacity: 1; }
.landing-story .ls-edge .ls-rim-b { stop-color: var(--surface); stop-opacity: .3; }
.landing-story .ls-edge .ls-rim-c { stop-color: var(--surface); stop-opacity: .12; }
.landing-story .ls-edge .ls-rim-d { stop-color: var(--surface); stop-opacity: .7; }
@media (prefers-reduced-transparency: reduce) {
  .landing-story .ls-glass { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.landing-story .ls-bubble :is(h1, p) { margin: 0; }
.landing-story .ls-em { font-weight: 800; color: var(--gray-900); }
.landing-story .ls-m { font-size: clamp(28px, 3.6vw, 54px); line-height: 1.2; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; word-break: keep-all; }
.landing-story .ls-bubble .ls-s { text-wrap: balance; margin-top: 14px; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.6; color: var(--gray-800); font-weight: 500; text-wrap: pretty; word-break: keep-all; }
.landing-story .ls-s:empty { display: none; }
.landing-story .ls-word { display: inline-block; white-space: nowrap; }
.landing-story .ls-ch { position: relative; opacity: 0; transition: opacity .08s; }
.landing-story .ls-ch.ls-on { opacity: 1; }
.landing-story .ls-ch.ls-cur::after { content: ""; position: absolute; right: -.1em; top: .12em; width: .06em; height: .9em; border-radius: 4px; background: currentColor; opacity: .75; animation: ls-caret .8s steps(1) infinite; }
@keyframes ls-caret { 50% { opacity: 0; } }
.landing-story .ls-bubble .ls-mk { --mk: 0%; }
.landing-story .ls-bubble.ls-done .ls-mk { --mk: 100%; --mkd: .1s; }
.landing-story .ls-say-hero { left: 50%; top: calc(var(--head) + 3vh); width: max-content; max-width: min(1120px, calc(100vw - 64px)); padding: 30px 64px 36px; text-align: center; transform: translate(-50%, 18px) scale(.98); transform-origin: 50% 100%; }
.landing-story .ls-say-hero .ls-m { font-size: clamp(34px, 5.2vw, 76px); line-height: 1.15; letter-spacing: -.045em; }
.landing-story .ls-say-hero .ls-s { margin: 0 0 12px; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.45; color: var(--gray-700); }
.landing-story .ls-say-hero { --ls-tail: bottom 50%; --ls-tail-size: 1.25; }
/* The closing line settles one step below the hero answer (2026-10-02 user request: two heavy lines read as shouting). */
.landing-story .ls-stage[data-beat="6"] .ls-say-hero .ls-m { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.25; font-weight: 700; letter-spacing: -.035em; }
.landing-story .ls-stage:is([data-beat="0"], [data-beat="6"]) .ls-say-hero { visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: .1s, 0s; }
.landing-story .ls-stage:is([data-beat="0"], [data-beat="6"]) .ls-say-hero > *, .landing-story .ls-stage:is([data-beat="1"], [data-beat="2"], [data-beat="3"], [data-beat="4"], [data-beat="5"]) .ls-say-dock > * { opacity: 1; transition-delay: .1s; }
.landing-story .ls-say-dock { left: 64px; top: calc(var(--head) + 6vh); width: min(37vw, 540px); padding: 26px 30px 28px; transform: translateY(14px); }
.landing-story .ls-say-dock .ls-m { font-size: clamp(24px, 2.5vw, 38px); }
.landing-story .ls-say-dock .ls-s { margin-top: 10px; }
.landing-story .ls-say-dock { --ls-tail: bottom 30%; }
.landing-story .ls-stage:is([data-beat="1"], [data-beat="2"], [data-beat="3"], [data-beat="4"], [data-beat="5"]) .ls-say-dock { visibility: visible; transform: none; transition-delay: .1s, 0s; }

/* Quick replies appear once 익히 has finished its line. */
.landing-story .ls-replies { position: absolute; z-index: 7; left: 50%; top: calc(var(--head) + 3vh + var(--bh, 260px) + 42px); display: flex; gap: 12px; opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .45s var(--ls-ease), transform .7s var(--ls-ease), visibility 0s .5s; }
.landing-story .ls-stage.ls-said:is([data-beat="0"], [data-beat="6"]) .ls-replies { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .05s, .05s, 0s; }
.landing-story .ls-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 28px; border-radius: 999px; font-size: 16px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; text-decoration: none; transition: transform .35s var(--ls-ease), background-color .2s, box-shadow .35s var(--ls-ease); }
.landing-story .ls-primary { background: var(--blue-600); color: var(--surface); box-shadow: 0 8px 20px -10px rgba(28,27,25,.45), inset 0 1px 0 rgba(255,255,255,.2); }
.landing-story .ls-quiet { background: var(--surface); color: var(--gray-900); box-shadow: inset 0 0 0 1px var(--gray-300); }
.landing-story .ls-btn svg { transition: transform .35s var(--ls-ease); }
.landing-story .ls-btn:active { transform: translateY(1px) scale(.96); }
@media (hover: hover) {
  .landing-story .ls-btn:hover { transform: translateY(-3px); }
  .landing-story .ls-primary:hover { background: var(--blue-700); box-shadow: 0 14px 24px -12px rgba(28,27,25,.5), inset 0 1px 0 rgba(255,255,255,.2); }
  .landing-story .ls-primary:hover svg { transform: translateX(3px); }
  .landing-story .ls-quiet:hover { background: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-400); }
  .landing-story .ls-btn:hover:active { transform: translateY(1px) scale(.96); }
}

/* Where the visitor is in the five beats (2026-10-02): a glass capsule under the scenes that is also the way around —
   each beat is a link to its first step, a white plate slides to the current beat and its line fills with the steps seen.
   Hidden on narrow screens, where the story is a plain vertical scroll. */
.landing-story .ls-rail { position: absolute; z-index: 6; left: 50%; bottom: calc(18 * var(--p)); display: flex; gap: calc(4 * var(--p)); padding: calc(5 * var(--p)); border-radius: 999px; opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .5s var(--ls-ease), transform .7s var(--ls-ease), visibility 0s .5s; }
.landing-story .ls-stage:is([data-beat="1"], [data-beat="2"], [data-beat="3"], [data-beat="4"], [data-beat="5"]) .ls-rail { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.landing-story .ls-rail a { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 6px; width: max(76px, calc(86 * var(--p))); height: max(42px, calc(48 * var(--p))); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--gray-600); text-decoration: none; transition: color .35s, background-color .25s, transform .3s var(--ls-ease); }
.landing-story .ls-rail a::before, .landing-story .ls-rail a::after { content: ""; width: 28px; height: 3px; border-radius: 4px; background: color-mix(in srgb, var(--gray-900) 12%, transparent); grid-row: 2; grid-column: 1; transition: background-color .35s; }
.landing-story .ls-rail a::after { background: var(--blue-600); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ls-ease); }
.landing-story .ls-rail a[aria-current] { color: var(--gray-900); font-weight: 800; }
.landing-story .ls-rail a[aria-current]::after { transform: scaleX(var(--beat-progress, 0)); }
.landing-story .ls-stage[data-beat="2"] .ls-rail a[data-beat="1"], .landing-story .ls-stage[data-beat="3"] .ls-rail a:is([data-beat="1"], [data-beat="2"]), .landing-story .ls-stage[data-beat="4"] .ls-rail a:is([data-beat="1"], [data-beat="2"], [data-beat="3"]), .landing-story .ls-stage[data-beat="5"] .ls-rail a:not([data-beat="5"]) { color: var(--gray-800); }
.landing-story .ls-stage[data-beat="2"] .ls-rail a[data-beat="1"]::before, .landing-story .ls-stage[data-beat="3"] .ls-rail a:is([data-beat="1"], [data-beat="2"])::before, .landing-story .ls-stage[data-beat="4"] .ls-rail a:is([data-beat="1"], [data-beat="2"], [data-beat="3"])::before, .landing-story .ls-stage[data-beat="5"] .ls-rail a:not([data-beat="5"])::before { background: var(--gray-800); }
.landing-story .ls-rail-now { position: absolute; z-index: 0; left: calc(5 * var(--p)); top: calc(5 * var(--p)); width: max(76px, calc(86 * var(--p))); height: max(42px, calc(48 * var(--p))); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--gray-900) 35%, transparent), inset 0 0 0 1px var(--surface); transform: translateX(calc(var(--bi, 0) * (max(76px, calc(86 * var(--p))) + 4 * var(--p)))); transition: transform .6s var(--ls-ease); }
.landing-story .ls-stage[data-beat="2"] { --bi: 1; }
.landing-story .ls-stage[data-beat="3"] { --bi: 2; }
.landing-story .ls-stage[data-beat="4"] { --bi: 3; }
.landing-story .ls-stage[data-beat="5"] { --bi: 4; }
@media (hover: hover) {
  .landing-story .ls-rail a:not([aria-current]):hover { color: var(--gray-900); background: color-mix(in srgb, var(--gray-900) 5%, transparent); }
}
.landing-story .ls-rail a:active { transform: scale(.96); }
.landing-story .ls-rail a:focus-visible { outline-offset: -2px; }

/* Glass (2026-10-02 user request: the scenes as frosted mockups, colour kept quiet). Frames of things — the browser,
   phones, the film tray, cards and chips — are glass over the page light; what is read sits on solid plates inside,
   so text keeps full contrast. Each object fades itself: a fading parent would switch its blur off. */
.landing-story :is(.ls-pane, .ls-pill, .ls-rail) { background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--surface) 40%, transparent) 55%, color-mix(in srgb, var(--surface) 56%, transparent)); -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.06); backdrop-filter: blur(20px) saturate(1.6) brightness(1.06); box-shadow: inset 0 1px 0 var(--surface), inset 0 0 0 1px color-mix(in srgb, var(--surface) 50%, transparent), 0 calc(36 * var(--p)) calc(64 * var(--p)) calc(-30 * var(--p)) color-mix(in srgb, var(--gray-900) 30%, transparent), 0 calc(8 * var(--p)) calc(20 * var(--p)) calc(-10 * var(--p)) color-mix(in srgb, var(--gray-900) 18%, transparent); }
.landing-story .ls-pane::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ls-grain) 0 0 / 170px 170px; opacity: .55; pointer-events: none; }
.landing-story .ls-pane::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 20%, transparent) 38%, transparent 62%, color-mix(in srgb, var(--surface) 70%, transparent)); -webkit-mask: linear-gradient(var(--gray-900) 0 0) content-box, linear-gradient(var(--gray-900) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--gray-900) 0 0) content-box exclude, linear-gradient(var(--gray-900) 0 0); pointer-events: none; }
.landing-story .ls-plate { position: absolute; z-index: 1; overflow: hidden; background: var(--surface); }
.landing-story .ls-pill { display: inline-flex; align-items: center; gap: .5em; width: auto; padding: 0 1em; border-radius: 999px; font-weight: 700; color: var(--gray-900); white-space: nowrap; }
@media (prefers-reduced-transparency: reduce) {
  .landing-story :is(.ls-pane, .ls-pill, .ls-rail) { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Scenes: one design frame (1440×712 under the header, 358×470 on narrow screens). Every object sits at --x/--y in
   design pixels, scaled by --s and shown by --o; a step only changes those numbers, so objects travel instead of swapping.
   Text inside objects is sized in em from --fs, so a whole object scales like an illustration. */
.landing-story .ls-area { position: absolute; z-index: 3; left: 50%; top: calc(var(--head) + var(--fy)); width: calc(1440 * var(--p)); height: calc(712 * var(--p)); margin-left: calc(-720 * var(--p)); pointer-events: none; }
.landing-story .ls-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.landing-story .ls-obj { position: absolute; left: 0; top: 0; margin: 0; width: calc(var(--w) * var(--p)); height: calc(var(--h) * var(--p)); font-size: max(9px, calc(var(--fs, 13) * var(--p))); transform-origin: 0 0; transform: translate(calc(var(--x, 0) * var(--p)), calc(var(--y, 0) * var(--p))) rotate(calc(var(--r, 0) * 1deg)) scale(var(--s, 1), calc(var(--s, 1) * var(--sy, 1))); opacity: var(--o, 0); transition: transform .95s var(--ls-ease) var(--d, 0s), opacity .5s var(--ls-ease) var(--d, 0s); }
.landing-story .ls-obj :is(h4, h5, h6, p) { margin: 0; }
.landing-story .ls-slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* 연동: the school's lecture page (익히 recording) → the 익히 phone, Everytime → courses. */
.landing-story .ls-browser { --w: 640; --h: 430; --x: 540; --y: 70; z-index: 1; border-radius: calc(16 * var(--p)); }
.landing-story .ls-chrome { position: relative; z-index: 1; display: flex; align-items: center; gap: .55em; height: 2.9em; padding: 0 1em; font-size: .96em; font-weight: 700; color: var(--gray-700); }
.landing-story .ls-chrome i { width: .72em; height: .72em; border-radius: 50%; background: color-mix(in srgb, var(--gray-900) 16%, transparent); }
.landing-story .ls-chrome b { margin-left: .5em; color: var(--gray-900); }
.landing-story .ls-rec { margin-left: auto; display: inline-flex; align-items: center; gap: .5em; height: 2.1em; padding: 0 .85em; border-radius: 999px; background: var(--gray-900); color: var(--gray-50); font-size: .94em; font-weight: 700; }
.landing-story .ls-rec::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--red-500); animation: ls-blink 1.4s ease-in-out infinite; }
@keyframes ls-blink { 50% { opacity: .25; } }
.landing-story .ls-lms { left: .46em; right: .46em; top: 2.9em; bottom: .46em; display: grid; grid-template-columns: 9.2em 1fr; border-radius: calc(11 * var(--p)); }
.landing-story .ls-lms::after { content: ""; position: absolute; inset: 0; background: var(--surface); opacity: 0; transition: opacity .6s var(--ls-ease); }
.landing-story .ls-stage[data-beat="1"][data-sub="2"] .ls-lms::after { opacity: .5; }
.landing-story .ls-lms-nav { padding: .9em .7em; display: grid; align-content: start; gap: .3em; border-right: 1px solid var(--gray-200); font-size: .96em; font-weight: 600; color: var(--gray-600); }
.landing-story .ls-lms-nav span { padding: .55em .7em; border-radius: calc(8 * var(--p)); }
.landing-story .ls-lms-nav .ls-on { background: var(--gray-100); color: var(--gray-900); }
.landing-story .ls-lms-main { min-width: 0; padding: 1.08em; display: grid; align-content: start; gap: .77em; }
.landing-story .ls-lms-main h4 { font-size: 1.08em; font-weight: 700; color: var(--gray-900); }
.landing-story .ls-player { position: relative; aspect-ratio: 16 / 9; border-radius: calc(8 * var(--p)); overflow: hidden; background: var(--gray-900); container-type: size; }
.landing-story .ls-player .ls-o2 { animation: ls-o2 5.6s linear infinite; }
.landing-story .ls-player .ls-na { animation: ls-na 1.8s ease-in-out infinite alternate; }
@keyframes ls-o2 { 0% { transform: translateY(0); opacity: 0; } 8%, 86% { opacity: 1; } 100% { transform: translateY(470px); opacity: 0; } }
@keyframes ls-na { to { transform: translateY(-34px); } }
.landing-story .ls-ctrl { position: absolute; left: 0; right: 0; bottom: 0; height: max(18px, 11cqh); padding: 0 3cqw; display: flex; align-items: center; gap: 2cqw; color: var(--surface); font-size: max(8px, 2.1cqw); background: linear-gradient(transparent, color-mix(in srgb, var(--gray-900) 60%, transparent)); }
.landing-story .ls-ctrl svg { flex: none; width: 1.1em; height: 1.1em; }
.landing-story .ls-bar { position: relative; flex: 1; height: 3px; border-radius: 4px; background: color-mix(in srgb, var(--surface) 30%, transparent); }
.landing-story .ls-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 17%; border-radius: 4px; background: var(--surface); }
.landing-story .ls-clip .ls-bar i { width: 30%; }
.landing-story .ls-stage[data-beat="1"] .ls-browser .ls-bar i { animation: ls-play 9s linear infinite; }
@keyframes ls-play { from { width: 14%; } to { width: 32%; } }
.landing-story .ls-file { display: flex; align-items: center; gap: .77em; height: 3.1em; padding: 0 .9em; border-radius: calc(8 * var(--p)); border: 1px solid var(--gray-200); font-weight: 600; color: var(--gray-900); }
.landing-story .ls-file small { margin-left: auto; color: var(--gray-600); font-weight: 600; }
.landing-story .ls-pdf { display: grid; place-items: end center; flex: none; width: 2.8em; height: 3.3em; padding-bottom: .3em; border-radius: calc(4 * var(--p)); background: var(--red-500); color: var(--surface); font-size: .65em; font-weight: 800; }
.landing-story .ls-note { --w: 500; --h: 22; --x: 680; --y: 500; font-weight: 600; color: var(--gray-700); }
.landing-story .ls-tt { --w: 380; --h: 250; --x: 610; --y: 210; --r: -5; z-index: 2; border-radius: calc(16 * var(--p)); }
.landing-story .ls-tt .ls-plate { inset: .46em; padding: .9em 1em 1em; display: grid; grid-template-rows: auto auto 1fr; gap: .5em; border-radius: calc(11 * var(--p)); }
.landing-story .ls-tt h5 { display: flex; justify-content: space-between; align-items: baseline; font-size: 1em; font-weight: 800; color: var(--gray-900); }
.landing-story .ls-tt h5 small { font-size: .9em; font-weight: 600; color: var(--gray-600); }
.landing-story .ls-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25em; font-size: .82em; font-weight: 700; color: var(--gray-600); text-align: center; }
.landing-story .ls-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: .25em; min-height: 0; }
.landing-story .ls-grid5 i { border-radius: calc(4 * var(--p)); background: var(--gray-50); }
.landing-story .ls-grid5 b { display: flex; padding: .4em .45em; overflow: hidden; border-radius: calc(6 * var(--p)); background: color-mix(in srgb, var(--c) 20%, var(--surface)); color: color-mix(in srgb, var(--c) 55%, var(--gray-900)); font-size: .76em; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.landing-story .ls-phone { border-radius: 3.3em; }
.landing-story .ls-screen { position: absolute; z-index: 1; inset: .62em; padding: 3.2em .95em 4.6em; display: grid; align-content: start; gap: .7em; overflow: hidden; border-radius: 2.7em; background: var(--surface); }
.landing-story .ls-island { position: absolute; left: 50%; top: .85em; width: 6em; height: 1.75em; margin-left: -3em; border-radius: 999px; background: var(--gray-900); }
.landing-story .ls-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 4.4em; padding: .55em .6em 1em; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--gray-200); background: var(--surface); }
.landing-story .ls-tabs span { display: grid; justify-items: center; align-content: center; gap: .25em; font-size: .74em; font-weight: 700; color: var(--gray-600); white-space: nowrap; }
.landing-story .ls-tabs svg { width: 1.75em; height: 1.75em; }
.landing-story .ls-tabs .ls-on { color: var(--gray-900); }
.landing-story .ls-phone header { display: flex; align-items: baseline; gap: .55em; }
.landing-story .ls-phone header b { font-size: 1.2em; font-weight: 800; letter-spacing: -.03em; color: var(--gray-900); }
.landing-story .ls-phone header small { margin-left: auto; font-size: .86em; font-weight: 700; color: var(--gray-600); white-space: nowrap; }
.landing-story .ls-wm { font-size: 1.1em; font-weight: 800; letter-spacing: -.06em; box-shadow: inset 0 -.22em var(--yellow-500); }
.landing-story .ls-mine { --w: 256; --h: 480; --x: 1100; --y: 140; z-index: 3; }
.landing-story .ls-courses { display: flex; flex-wrap: wrap; gap: .4em; max-height: 0; overflow: hidden; transition: max-height .6s var(--ls-ease); }
.landing-story .ls-stage[data-beat="1"][data-sub="2"] .ls-courses { max-height: 6em; }
.landing-story .ls-chip { display: inline-flex; align-items: center; gap: .45em; height: 2.1em; padding: 0 .7em; border-radius: calc(8 * var(--p)); background: var(--gray-100); font-size: .9em; font-weight: 700; color: var(--gray-800); }
.landing-story .ls-chip i { width: .62em; height: .62em; border-radius: 50%; background: var(--c); }
.landing-story .ls-courses .ls-chip { opacity: 0; transform: translateY(.5em); transition: opacity .4s, transform .6s var(--ls-ease); transition-delay: calc(var(--k) * .12s + .6s); }
.landing-story .ls-stage[data-beat="1"][data-sub="2"] .ls-courses .ls-chip { opacity: 1; transform: none; }
.landing-story .ls-weeks { display: grid; gap: .6em; }
.landing-story .ls-wrow { display: grid; grid-template-columns: 3.2em 1fr; gap: .5em; align-items: start; }
.landing-story .ls-wrow > b { padding-top: .65em; font-size: .96em; font-weight: 800; color: var(--gray-800); }
.landing-story .ls-wrow > div { display: grid; gap: .35em; }
.landing-story .ls-it { display: flex; align-items: center; gap: .55em; height: 2.6em; padding: 0 .7em; border-radius: calc(10 * var(--p)); background: var(--gray-50); font-size: .96em; font-weight: 600; color: var(--gray-800); white-space: nowrap; }
.landing-story .ls-it small { margin-left: auto; color: var(--gray-600); font-weight: 600; font-variant-numeric: tabular-nums; }
.landing-story .ls-ok { display: grid; place-items: center; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--green-500); color: var(--surface); }
.landing-story .ls-ok svg { width: .8em; height: .8em; }
.landing-story .ls-now .ls-it { opacity: 0; transform: translateX(-.7em); transition: opacity .4s, transform .7s var(--ls-ease); }
.landing-story .ls-stage[data-beat="1"]:is([data-sub="1"], [data-sub="2"]) .ls-now .ls-it { opacity: 1; transform: none; transition-delay: 1s; }
.landing-story .ls-stage[data-beat="1"]:is([data-sub="1"], [data-sub="2"]) .ls-now .ls-it:nth-child(2) { transition-delay: 1.25s; }
.landing-story .ls-fly { --h: 36; z-index: 4; }
.landing-story .ls-fly svg { width: 1em; height: 1em; }
.landing-story .ls-fly .ls-pdf { width: 2.4em; height: 2.9em; }
.landing-story .ls-fly-v { --x: 845; --y: 238; --tx: 1150; --ty: 300; }
.landing-story .ls-fly-p { --x: 845; --y: 403; --tx: 1150; --ty: 340; --fd: .3s; }
.landing-story .ls-stage[data-beat="1"]:is([data-sub="1"], [data-sub="2"]) .ls-fly { animation: ls-fly 1.3s var(--ls-ease) var(--fd, .1s) both; }
@keyframes ls-fly {
  from { opacity: 0; transform: translate(calc(var(--x) * var(--p)), calc(var(--y) * var(--p))) scale(.9); }
  16% { opacity: 1; transform: translate(calc(var(--x) * var(--p)), calc(var(--y) * var(--p))); }
  78% { opacity: 1; transform: translate(calc(var(--tx) * var(--p)), calc(var(--ty) * var(--p))) scale(.92); }
  to { opacity: 0; transform: translate(calc(var(--tx) * var(--p)), calc(var(--ty) * var(--p))) scale(.86); }
}

/* 개념: the lecture as a film of scenes → cut → nine concept cards in three sections, and the flow between them. */
.landing-story .ls-film-title { --w: 1000; --h: 24; --fs: 14; --x: 56; --y: 300; display: flex; align-items: baseline; gap: .7em; font-weight: 800; color: var(--gray-900); }
.landing-story .ls-film-title .ls-num { font-weight: 700; color: var(--gray-700); }
/* The lecture as one film. 2-0: a read line sweeps 0:00 → 1:15:00, lighting each scene and marking its cut as it passes.
   2-1: the film splits at the cuts; scenes without a concept dim under their name, the nine concept scenes get a dot
   and a line pulls each concept out into a row of tags in lecture order. 2-2: the tags settle into the three sections
   and the film is tinted by section from left to right, so the flow and where it sits in the lecture read at once. */
.landing-story .ls-film { --w: 1024; --h: 100; --x: 56; --y: 340; --fw: 1008; display: flex; padding: calc(8 * var(--p)); gap: 0; border-radius: calc(16 * var(--p)); transition: transform .95s var(--ls-ease) var(--d, 0s), opacity .5s var(--ls-ease) var(--d, 0s), gap .7s var(--ls-ease) .1s; }
.landing-story .ls-frame { position: relative; z-index: 1; flex: var(--m) 1 0; min-width: 0; overflow: hidden; background: var(--gray-50); opacity: .45; transition: border-radius .6s var(--ls-ease), opacity .45s var(--ls-ease); }
.landing-story .ls-frame:first-child { border-radius: calc(10 * var(--p)) 0 0 calc(10 * var(--p)); }
.landing-story .ls-frame:nth-last-child(2) { border-radius: 0 calc(10 * var(--p)) calc(10 * var(--p)) 0; }
.landing-story .ls-frame .ls-slide { transition: opacity .5s var(--ls-ease); }
.landing-story .ls-frame + .ls-frame::before { content: ""; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 2px; background: var(--blue-600); opacity: 0; transition: opacity .25s; }
.landing-story .ls-tint { position: absolute; inset: 0; z-index: 1; background: var(--c); opacity: 0; transition: opacity .6s var(--ls-ease); }
.landing-story .ls-frame::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: calc(7 * var(--p)); background: color-mix(in srgb, var(--c) 60%, var(--surface)); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ls-ease); }
.landing-story .ls-scene-label { position: absolute; z-index: 3; left: 50%; top: 50%; padding: .25em .6em; border-radius: 999px; background: var(--surface); font-size: .84em; font-weight: 800; color: var(--gray-700); white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .35s var(--ls-ease), transform .5s var(--ls-ease); }
.landing-story .ls-mark { position: absolute; z-index: 3; left: 50%; bottom: calc(6 * var(--p)); width: calc(10 * var(--p)); height: calc(10 * var(--p)); margin-left: calc(-5 * var(--p)); border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 calc(3 * var(--p)) var(--surface); transform: scale(0); transition: transform .45s cubic-bezier(.22, 1.5, .36, 1); }
.landing-story .ls-scan { position: absolute; z-index: 4; left: calc(8 * var(--p)); top: calc(3 * var(--p)); bottom: calc(3 * var(--p)); width: 3px; margin-left: -1.5px; border-radius: 4px; background: var(--blue-600); box-shadow: 0 0 calc(16 * var(--p)) color-mix(in srgb, var(--blue-500) 60%, transparent); opacity: 0; pointer-events: none; }
@keyframes ls-scan { from { opacity: 0; transform: none; } 5%, 93% { opacity: 1; } to { opacity: 0; transform: translateX(calc(var(--fw) * var(--p))); } }
.landing-story .ls-stage[data-beat="2"][data-sub="0"] .ls-scan { animation: ls-scan 1.9s cubic-bezier(.45, 0, .3, 1) .35s both; }
.landing-story .ls-stage[data-beat="2"][data-sub="0"] .ls-frame { opacity: 1; transition-delay: calc(.4s + var(--at) * 1.75s); }
.landing-story .ls-stage[data-beat="2"][data-sub="0"] .ls-frame + .ls-frame::before { opacity: .85; transition-delay: calc(.4s + var(--at) * 1.75s); }
.landing-story .ls-stage[data-beat="2"]:is([data-sub="1"], [data-sub="2"]) .ls-film { gap: calc(6 * var(--p)); }
.landing-story .ls-stage[data-beat="2"]:is([data-sub="1"], [data-sub="2"]) .ls-frame { opacity: 1; border-radius: calc(8 * var(--p)); }
.landing-story .ls-stage[data-beat="2"]:is([data-sub="1"], [data-sub="2"]) .ls-frame[data-concept="false"] .ls-slide { opacity: .22; }
.landing-story .ls-stage[data-beat="2"]:is([data-sub="1"], [data-sub="2"]) .ls-scene-label { opacity: 1; transform: translate(-50%, -50%); transition-delay: .35s; }
.landing-story .ls-stage[data-beat="2"][data-sub="1"] .ls-mark { transform: none; transition-delay: calc(.3s + var(--at) * .6s); }
.landing-story .ls-stage[data-beat="2"][data-sub="2"] .ls-tint { opacity: .14; transition-delay: calc(.2s + var(--at) * 1.1s); }
.landing-story .ls-stage[data-beat="2"][data-sub="2"] .ls-frame::after { transform: none; transition-delay: calc(.2s + var(--at) * 1.1s); }
.landing-story .ls-ruler { --w: 1024; --h: 18; --fs: 12; --x: 56; --y: 470; display: flex; justify-content: space-between; padding: 0 calc(8 * var(--p)); font-weight: 700; color: var(--gray-700); }
.landing-story .ls-sec { --w: 236; --h: 22; display: flex; align-items: center; gap: .55em; font-weight: 800; color: var(--gray-700); white-space: nowrap; }
.landing-story .ls-sec i { flex: none; width: .7em; height: .7em; border-radius: 50%; background: var(--c); }
.landing-story .ls-node { --w: 133.3; --h: 48; --x: var(--hx); --y: 240; --s: .3; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-content: center; align-items: center; gap: .15em .6em; padding: 0 1.1em; border-radius: calc(14 * var(--p)); background: var(--surface); box-shadow: 0 calc(14 * var(--p)) calc(26 * var(--p)) calc(-18 * var(--p)) color-mix(in srgb, var(--gray-900) 32%, transparent), inset 0 0 0 1.5px var(--gray-200); transition: transform .95s var(--ls-ease), opacity .5s var(--ls-ease), width .95s var(--ls-ease), height .95s var(--ls-ease), background-color .5s, box-shadow .5s, outline-color .5s; transition-delay: calc(var(--n) * 45ms); outline: 1.5px dashed transparent; outline-offset: -1.5px; }
.landing-story .ls-node b { min-width: 0; font-size: 1.15em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gray-900); }
.landing-story .ls-node small { display: none; grid-column: 1; font-size: .92em; font-weight: 600; color: var(--gray-600); font-variant-numeric: tabular-nums; }
.landing-story .ls-node .ls-dot { grid-row: 1 / 3; grid-column: 2; width: .95em; height: .95em; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .55s cubic-bezier(.22, 1.5, .36, 1); transition-delay: calc(var(--n) * 90ms + .2s); }
.landing-story .ls-stage[data-beat="3"]:is([data-sub="1"], [data-sub="2"]) .ls-node .ls-dot, .landing-story .ls-stage[data-beat="4"] .ls-node .ls-dot { opacity: 1; transform: none; }
.landing-story .ls-stage[data-beat="3"]:is([data-sub="1"], [data-sub="2"]) .ls-node[data-s="solve"], .landing-story .ls-stage[data-beat="4"] .ls-node[data-s="solve"] { background: color-mix(in srgb, var(--green-500) 13%, var(--surface)); box-shadow: 0 calc(14 * var(--p)) calc(26 * var(--p)) calc(-18 * var(--p)) color-mix(in srgb, var(--gray-900) 32%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--green-500) 38%, var(--surface)); }
.landing-story .ls-stage[data-beat="3"]:is([data-sub="1"], [data-sub="2"]) .ls-node[data-s="check"], .landing-story .ls-stage[data-beat="4"] .ls-node[data-s="check"] { background: color-mix(in srgb, var(--orange-500) 13%, var(--surface)); box-shadow: 0 calc(14 * var(--p)) calc(26 * var(--p)) calc(-18 * var(--p)) color-mix(in srgb, var(--gray-900) 32%, transparent), inset 0 0 0 1.5px var(--orange-200); }
.landing-story .ls-stage[data-beat="3"]:is([data-sub="1"], [data-sub="2"]) .ls-node[data-s="new"], .landing-story .ls-stage[data-beat="4"] .ls-node[data-s="new"] { box-shadow: 0 calc(14 * var(--p)) calc(26 * var(--p)) calc(-18 * var(--p)) color-mix(in srgb, var(--gray-900) 24%, transparent); outline-color: var(--gray-400); }
.landing-story .ls-links { --w: 1440; --h: 712; --o: 1; z-index: 0; overflow: visible; }
.landing-story .ls-links path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.landing-story .ls-flow { stroke: var(--gray-500); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ls-ease); }
.landing-story .ls-stage[data-beat="2"][data-sub="2"] .ls-flow { stroke-dashoffset: 0; transition-delay: .9s; }
.landing-story .ls-pull { stroke: var(--blue-600); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .6; transition: stroke-dashoffset .55s var(--ls-ease); }
.landing-story .ls-stage[data-beat="2"][data-sub="1"] .ls-pull { stroke-dashoffset: 0; transition-delay: calc(.45s + var(--ti) * 80ms); }
.landing-story .ls-link { stroke: var(--gray-500); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0; transition: opacity .4s; }
.landing-story .ls-stage[data-beat="4"][data-sub="1"] .ls-link { opacity: 1; transition-delay: .7s; }
/* The card the question is about lifts out of the compact map while the question is open. */
.landing-story .ls-stage[data-beat="3"][data-sub="0"] .ls-node[data-quiz] { box-shadow: 0 calc(16 * var(--p)) calc(30 * var(--p)) calc(-14 * var(--p)) color-mix(in srgb, var(--gray-900) 34%, transparent), inset 0 0 0 2px var(--blue-600); }

/* 성취도: one question per concept → marks on the cards → the week's spread built from the same marks. */
.landing-story .ls-quiz { --w: 360; --h: 250; --x: 660; --y: 220; z-index: 2; border-radius: calc(18 * var(--p)); }
.landing-story :is(.ls-quiz, .ls-sum, .ls-clip) .ls-plate { inset: .55em; border-radius: calc(13 * var(--p)); }
.landing-story .ls-quiz .ls-plate { padding: 1.2em 1.25em; display: grid; align-content: start; gap: .75em; }
.landing-story .ls-q-hd { display: flex; align-items: center; gap: .6em; font-size: .92em; font-weight: 700; color: var(--gray-600); }
.landing-story .ls-q-hd b { color: var(--gray-900); }
.landing-story .ls-quiz p { margin: .1em 0 .2em; font-size: 1.3em; font-weight: 700; line-height: 1.38; color: var(--gray-900); }
.landing-story .ls-a { display: flex; align-items: center; min-height: 3.1em; padding: 0 .9em; border-radius: calc(10 * var(--p)); font-size: .98em; font-weight: 600; color: var(--gray-900); box-shadow: inset 0 0 0 1.5px var(--gray-200); }
.landing-story .ls-a.ls-pick { background: var(--red-50); box-shadow: inset 0 0 0 1.5px var(--red-500); }
.landing-story .ls-a.ls-right { background: var(--green-50); box-shadow: inset 0 0 0 1.5px var(--green-500); }
.landing-story .ls-res { display: flex; align-items: center; gap: .5em; font-weight: 800; color: var(--orange-700); }
.landing-story .ls-sum { --w: 708; --h: 118; --x: 56; --y: 50; z-index: 2; border-radius: calc(18 * var(--p)); }
.landing-story .ls-sum .ls-plate { padding: 1em 1.2em; display: grid; align-content: center; gap: .7em; }
.landing-story .ls-sum h5 { font-size: 1.08em; font-weight: 800; color: var(--gray-900); }
.landing-story .ls-segs { display: flex; gap: .35em; height: 3.2em; }
.landing-story .ls-segs span { display: flex; align-items: center; gap: .45em; min-width: 0; padding: 0 .85em; border-radius: calc(10 * var(--p)); font-size: .98em; font-weight: 700; white-space: nowrap; opacity: 0; transform: scaleX(.4); transform-origin: left; transition: transform .8s var(--ls-ease), opacity .4s; transition-delay: calc(.35s + var(--k) * .12s); }
.landing-story .ls-segs b { margin-left: auto; font-weight: 800; }
.landing-story .ls-segs [data-s="solve"] { background: color-mix(in srgb, var(--green-500) 16%, var(--surface)); color: var(--green-700); }
.landing-story .ls-segs [data-s="check"] { background: color-mix(in srgb, var(--orange-500) 17%, var(--surface)); color: var(--orange-700); }
.landing-story .ls-segs [data-s="new"] { color: var(--gray-700); outline: 1.5px dashed var(--gray-400); outline-offset: -1.5px; }
.landing-story .ls-stage[data-beat="3"][data-sub="2"] .ls-segs span { opacity: 1; transform: none; }

/* 복습: solved cards fold away, the rest move into today's review on the phone, each row opening its lecture scene. */
.landing-story .ls-fold { --h: 44; --fs: 14; --x: 56; --y: 96; z-index: 2; }
.landing-story .ls-rv { --w: 262; --h: 568; --x: 1060; --y: 56; z-index: 3; }
.landing-story .ls-rows { display: grid; gap: .45em; }
.landing-story .ls-rrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7em; height: 3.7em; padding: 0 .8em; border-radius: calc(12 * var(--p)); box-shadow: inset 0 0 0 1px var(--gray-200); opacity: 0; transform: translateY(.6em); transition: opacity .4s, transform .6s var(--ls-ease), box-shadow .4s; transition-delay: calc(var(--k) * .09s + .45s); }
.landing-story .ls-stage[data-beat="4"]:is([data-sub="1"], [data-sub="2"]) .ls-rrow { opacity: 1; transform: none; }
.landing-story .ls-stage[data-beat="4"][data-sub="1"] .ls-rrow:first-child .ls-go { box-shadow: inset 0 0 0 1.5px var(--blue-600); }
.landing-story .ls-rrow b { display: block; font-weight: 800; line-height: 1.25; color: var(--gray-900); }
.landing-story .ls-rrow small { font-size: .85em; font-weight: 600; color: var(--gray-600); }
.landing-story .ls-go { display: inline-flex; align-items: center; gap: .35em; height: 2.2em; padding: 0 .7em; border-radius: calc(8 * var(--p)); background: var(--blue-50); color: var(--blue-600); font-size: .88em; font-weight: 800; transition: box-shadow .4s; }
.landing-story .ls-go svg { width: .9em; height: .9em; }
.landing-story .ls-retest { display: grid; gap: .5em; padding: .9em 1em; border-radius: calc(12 * var(--p)); background: var(--gray-50); opacity: 0; transform: translateY(.8em); transition: opacity .5s var(--ls-ease), transform .7s var(--ls-ease); }
.landing-story .ls-stage[data-beat="4"][data-sub="2"] .ls-retest { opacity: 1; transform: none; transition-delay: .3s; }
.landing-story .ls-day { display: flex; align-items: center; gap: .6em; font-size: .92em; font-weight: 800; color: var(--gray-800); }
.landing-story .ls-day span { display: inline-flex; align-items: center; height: 1.9em; padding: 0 .6em; border-radius: calc(8 * var(--p)); background: var(--gray-900); color: var(--gray-50); }
.landing-story .ls-ok-line { display: flex; align-items: center; gap: .55em; font-weight: 800; color: var(--green-700); }
.landing-story .ls-steps { display: inline-flex; gap: .3em; margin-left: auto; }
.landing-story .ls-steps i { width: 1.7em; height: .45em; border-radius: 4px; background: var(--gray-300); }
.landing-story .ls-steps i:first-child { background: var(--green-500); }
.landing-story .ls-retest p { font-size: .86em; font-weight: 600; color: var(--gray-700); }
.landing-story .ls-clip { --w: 340; --h: 236; --x: 590; --y: 320; z-index: 2; border-radius: calc(18 * var(--p)); }
.landing-story .ls-clip .ls-plate { padding: .55em; display: grid; align-content: start; gap: .55em; }
.landing-story .ls-clip p { margin: 0 .3em; font-size: .92em; font-weight: 700; color: var(--gray-800); }

/* 결과: the whole-lecture time and the weak-concept time; the yellow bar shrinks to its share while 익히 stands in the time saved. */
.landing-story .ls-result { --w: 1328; --h: 500; --fs: 14; --x: 56; --y: 190; display: grid; align-content: start; justify-items: start; }
.landing-story .ls-result small { font-weight: 700; color: var(--gray-700); }
.landing-story .ls-result strong { margin: .1em 0 .35em; line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
.landing-story .ls-long { font-size: 3.1em; color: var(--gray-600); }
.landing-story .ls-short { font-size: 6.6em; color: var(--gray-900); }
.landing-story .ls-short .ls-mk { --mk: 0%; }
.landing-story .ls-stage[data-beat="5"] .ls-short .ls-mk { --mk: 100%; --mkd: 2.1s; }
.landing-story .ls-blocks { display: flex; gap: .3em; width: 100%; height: 1.6em; margin-bottom: 3.1em; }
.landing-story .ls-blocks i { flex: 1; border-radius: calc(5 * var(--p)); background: color-mix(in srgb, var(--gray-900) 15%, transparent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ls-ease) calc(.2s + var(--k) * 40ms); }
.landing-story .ls-stage[data-beat="5"] .ls-blocks i { transform: none; }
.landing-story .ls-shrink { width: 100%; height: 1.6em; margin: .2em 0 2.2em; }
.landing-story .ls-shrink i { display: block; height: 100%; border-radius: calc(5 * var(--p)); background: var(--yellow-500); clip-path: inset(0 0 0 0 round calc(5 * var(--p))); transition: clip-path 1.3s var(--ls-ease) 1s; }
.landing-story .ls-stage[data-beat="5"] .ls-shrink i { clip-path: inset(0 90.95% 0 0 round calc(5 * var(--p))); }
.landing-story .ls-exam { display: flex; flex-wrap: wrap; gap: .55em; }
.landing-story .ls-exam .ls-chip { display: inline-block; height: auto; padding: .55em .85em; line-height: 1.3; background: var(--surface); box-shadow: inset 0 0 0 1px var(--gray-200); font-size: .93em; }
.landing-story .ls-exam b { font-weight: 800; }
.landing-story .ls-result .ls-fine { margin-top: .9em; font-size: .93em; }

@media (min-width: 1001px) {
  /* Per step: where 익히 stands (--sx centre, --st head top, --sh height, --turn yaw) and where its bubble sits (--bx, --bw, --tail). */
  .landing-story .ls-stage[data-beat="1"] { --sx: 350; --st: 250; --sh: 300; --turn: .32; --bx: 56; --bw: 470; --tail: bottom 63%; }
  .landing-story .ls-stage[data-beat="2"] { --sx: 1235; --st: 150; --sh: 250; --turn: -.38; --bx: 520; --bw: 540; --tail: right 80%; }
  .landing-story .ls-stage:is([data-beat="3"], [data-beat="4"][data-sub="0"]) { --sx: 1180; --st: 260; --sh: 340; --turn: -.32; --bx: 820; --bw: 540; --tail: bottom 67%; }
  .landing-story .ls-stage[data-beat="4"][data-sub="1"] { --sx: 280; --st: 270; --sh: 300; --turn: .3; --bx: 56; --bw: 500; --tail: bottom 45%; }
  .landing-story .ls-stage[data-beat="4"][data-sub="2"] { --sx: 640; --st: 260; --sh: 320; --turn: .12; --bx: 300; --bw: 500; --tail: bottom 68%; }
  .landing-story .ls-stage[data-beat="5"] { --sx: 1030; --st: 300; --sh: 300; --turn: -.2; --bx: 700; --bw: 540; --tail: bottom 61%; }
  .landing-story .ls-stage:is([data-beat="1"], [data-beat="2"], [data-beat="3"], [data-beat="4"], [data-beat="5"]) .ls-still { left: calc(50% + (var(--sx) - 720) * var(--p)); top: calc(var(--head) + var(--fy) + var(--st) * var(--p)); width: calc(var(--sh) * 1.1 * var(--p)); }
  .landing-story .ls-say-dock { left: calc(50% + (var(--bx, 56) - 720) * var(--p)); top: calc(var(--head) + var(--fy) + 24 * var(--p)); width: calc(var(--bw, 470) * var(--p)); padding: calc(24 * var(--p)) calc(28 * var(--p)) calc(26 * var(--p)); --ls-tail: var(--tail, bottom 30%); transition: transform .85s var(--ls-ease), left .9s var(--ls-ease), top .9s var(--ls-ease), visibility 0s .45s; }
  .landing-story .ls-say-dock .ls-m { font-size: max(22px, calc(34 * var(--p))); }
  .landing-story .ls-say-dock .ls-s { margin-top: calc(10 * var(--p)); font-size: max(15px, calc(17.5 * var(--p))); }
  .landing-story .ls-stage:is([data-beat="1"], [data-beat="2"], [data-beat="3"], [data-beat="4"], [data-beat="5"]) .ls-say-dock { transition-delay: .1s, 0s, 0s, 0s; }

  .landing-story .ls-stage[data-beat="1"]:not([data-sub="2"]) .ls-browser { --x: 540; --y: 40; --o: 1; }
  .landing-story .ls-stage[data-beat="1"][data-sub="2"] .ls-browser { --x: 560; --y: 80; --s: .94; --o: 1; }
  .landing-story .ls-stage[data-beat="1"]:not([data-sub="2"]) .ls-note { --y: 482; --o: 1; --d: .3s; }
  .landing-story .ls-stage[data-beat="1"] .ls-mine { --y: 110; --o: 1; --d: .15s; }
  .landing-story .ls-stage[data-beat="1"][data-sub="2"] .ls-tt { --x: 630; --y: 250; --r: -2; --o: 1; --d: .15s; }
  .landing-story .ls-stage[data-beat="2"][data-sub="0"] .ls-film { --y: 350; --o: 1; --d: .1s; }
  .landing-story .ls-stage[data-beat="2"]:is([data-sub="1"], [data-sub="2"]) .ls-film { --y: 196; --o: 1; }
  .landing-story .ls-stage[data-beat="2"][data-sub="0"] .ls-film-title { --y: 318; --o: 1; --d: .2s; }
  .landing-story .ls-stage[data-beat="2"][data-sub="0"] .ls-ruler { --y: 458; --o: 1; --d: .3s; }
  .landing-story .ls-stage[data-beat="2"]:is([data-sub="1"], [data-sub="2"]) .ls-film-title { --y: 164; --o: 1; }
  .landing-story .ls-stage[data-beat="2"][data-sub="2"] .ls-sec { --x: calc(202 + var(--col) * 276); --y: 362; --o: 1; --d: .5s; }
  .landing-story .ls-stage[data-beat="3"][data-sub="0"] .ls-sec { --x: calc(56 + var(--col) * 188); --y: 242; --o: 1; }
  .landing-story .ls-stage:is([data-beat="3"]:not([data-sub="0"]), [data-beat="4"][data-sub="0"]) .ls-sec { --x: calc(56 + var(--col) * 244); --y: 166; --o: 1; }
  .landing-story .ls-stage[data-beat="2"][data-sub="1"] .ls-node { --x: var(--tx); --y: 460; --s: .8; --o: 1; transition-delay: calc(.8s + var(--ti) * 80ms); }
  .landing-story .ls-stage[data-beat="2"][data-sub="2"] .ls-node { --x: calc(202 + var(--col) * 276); --y: calc(388 + var(--row) * 74); --s: .82; --o: 1; transition-delay: calc(.1s + var(--n) * 50ms); box-shadow: 0 calc(14 * var(--p)) calc(26 * var(--p)) calc(-18 * var(--p)) color-mix(in srgb, var(--gray-900) 32%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, var(--surface)); }
  .landing-story .ls-stage:is([data-beat="2"][data-sub="2"], [data-beat="3"], [data-beat="4"]) .ls-node { --w: 220; --h: 72; }
  .landing-story .ls-stage:is([data-beat="2"][data-sub="2"], [data-beat="3"], [data-beat="4"]) .ls-node small { display: block; }
  .landing-story .ls-stage[data-beat="2"] .ls-node .ls-dot { display: none; }
  .landing-story .ls-stage[data-beat="3"][data-sub="0"] .ls-node { --x: calc(56 + var(--col) * 188); --y: calc(270 + var(--row) * 70); --s: .8; --o: 1; }
  .landing-story .ls-stage:is([data-beat="3"]:not([data-sub="0"]), [data-beat="4"]) .ls-node { --x: calc(56 + var(--col) * 244); --y: calc(196 + var(--row) * 86); --s: 1; --o: 1; }
  .landing-story .ls-stage[data-beat="4"][data-sub="0"] .ls-node:not([data-s="solve"]) { --y: calc(196 + var(--r4) * 86); }
  .landing-story .ls-stage[data-beat="4"] .ls-node[data-s="solve"] { --sy: .06; --o: 0; }
  .landing-story .ls-stage[data-beat="4"]:is([data-sub="1"], [data-sub="2"]) .ls-node:not([data-s="solve"]) { --x: 1020; --y: calc(162 + var(--k) * 54); --s: .72; --o: 0; }
  .landing-story .ls-stage[data-beat="3"][data-sub="0"] .ls-quiz { --x: 640; --y: 214; --o: 1; --d: .25s; }
  .landing-story .ls-stage[data-beat="3"][data-sub="1"] .ls-quiz { --x: 300; --y: 282; --s: .2; }
  .landing-story .ls-stage[data-beat="3"][data-sub="2"] .ls-sum { --y: 24; --o: 1; --d: .2s; }
  .landing-story .ls-stage[data-beat="4"][data-sub="0"] .ls-fold { --y: 70; --o: 1; --d: .45s; }
  .landing-story .ls-stage[data-beat="4"]:is([data-sub="1"], [data-sub="2"]) .ls-rv { --x: 1000; --o: 1; }
  .landing-story .ls-stage[data-beat="4"][data-sub="1"] .ls-clip { --x: 560; --y: 300; --o: 1; --d: .7s; }
  .landing-story .ls-stage[data-beat="5"] .ls-result { --y: 160; --o: 1; --d: .1s; }
}

@media (max-width: 1000px) {
  .landing-story .ls-rail { display: none; }
  .landing-story .ls-fine { font-size: 12px; }
  .landing-story .ls-say-hero { top: calc(var(--head) + 2svh); width: calc(100vw - 32px); padding: 26px 22px; }
  .landing-story .ls-say-hero .ls-m { font-size: clamp(26px, 7.4vw, 44px); line-height: 1.22; }
  .landing-story .ls-say-hero .ls-s { font-size: 16.5px; margin: 0 0 8px; }
  .landing-story .ls-replies { top: calc(var(--head) + 2svh + var(--bh, 220px) + 42px); width: calc(100vw - 32px); justify-content: center; }
  .landing-story .ls-btn { height: 48px; padding: 0 18px; font-size: 15px; }
  .landing-story .ls-say-dock { left: 112px; right: 16px; width: auto; top: calc(var(--head) + 10px); padding: 14px 16px 16px; border-radius: 16px; transform: translateY(14px); }
  .landing-story .ls-say-dock { --ls-tail: left 37px; --ls-tail-size: .7; }
  .landing-story .ls-say-dock .ls-m { font-size: 18px; }
  .landing-story .ls-say-dock .ls-s { font-size: 13.5px; margin-top: 6px; }
  .landing-story .ls-still { width: min(92vw, calc(var(--hc-height, 600px) * 1.2)); }
  .landing-story .ls-stage:is([data-beat="1"], [data-beat="2"], [data-beat="3"], [data-beat="4"], [data-beat="5"]) .ls-still { width: 88px; left: 56px; top: calc(var(--head) + 22px); }
  .landing-story .ls-stage:not([data-beat="0"], [data-beat="6"]) .ls-spot { left: 23px; top: calc(var(--head) + 22px); width: 66px; height: 66px; }
  /* The scenes stack under the bubble on a 358×470 frame; objects keep their roles with narrow sizes. */
  .landing-story .ls-stage { --p: min(calc((100vw - 32px) / 358), calc((100svh - var(--head) - 270px) / 470)); --fy: 0px; }
  .landing-story .ls-area { top: calc(var(--head) + 214px); width: calc(358 * var(--p)); height: calc(470 * var(--p)); margin-left: calc(-179 * var(--p)); }
  .landing-story :is(.ls-links, .ls-clip, .ls-lms-nav, .ls-file, .ls-ruler) { display: none; }
  .landing-story .ls-lms { grid-template-columns: 1fr; }
  .landing-story .ls-browser { --w: 290; --h: 214; --fs: 10; --x: 0; --y: 20; }
  .landing-story .ls-note { --w: 186; --h: 34; --fs: 10.5; --x: 0; --y: 436; line-height: 1.4; }
  .landing-story .ls-tt { --w: 214; --h: 158; --fs: 9.5; --x: 4; --y: 170; }
  .landing-story .ls-mine { --w: 164; --h: 310; --fs: 9.5; --x: 194; --y: 180; }
  .landing-story .ls-fly { --fs: 10; }
  .landing-story .ls-fly-v { --x: 70; --y: 100; --tx: 226; --ty: 282; }
  .landing-story .ls-fly-p { --x: 70; --y: 140; --tx: 226; --ty: 312; }
  .landing-story .ls-film-title { --w: 358; --h: 18; --fs: 11; --x: 0; --y: 150; }
  .landing-story .ls-film { --w: 358; --h: 64; --x: 0; --y: 190; --fw: 348; padding: 5px; }
  .landing-story .ls-scene-label { display: none; }
  .landing-story .ls-sec { --w: 112; --h: 18; --fs: 10; }
  .landing-story .ls-node { --w: 112; --h: 40; --fs: 11; --x: var(--mhx); --y: 176; padding: 0 .75em; }
  .landing-story .ls-node small { display: none; }
  .landing-story .ls-node b { font-size: 1.05em; }
  .landing-story .ls-node .ls-dot { position: absolute; right: .6em; top: .6em; width: .7em; height: .7em; }
  .landing-story .ls-quiz { --w: 358; --h: 196; --fs: 10.5; --x: 0; --y: 300; }
  .landing-story .ls-quiz .ls-plate { gap: .55em; padding: 1em; }
  .landing-story .ls-sum { --w: 358; --h: 84; --fs: 10; --x: 0; --y: 20; }
  .landing-story .ls-fold { --fs: 11; --h: 34; --x: 0; --y: 60; }
  .landing-story .ls-rv { --w: 220; --h: 456; --fs: 10.5; --x: 110; --y: 8; }
  .landing-story .ls-result { --w: 358; --h: 460; --fs: 11; --x: 0; --y: 30; }
  .landing-story .ls-long { font-size: 2.4em; }
  .landing-story .ls-short { font-size: 4.2em; }
  .landing-story .ls-blocks { margin-bottom: 2.2em; }

  .landing-story .ls-stage[data-beat="1"]:not([data-sub="2"]) .ls-browser { --y: 0; --o: 1; }
  .landing-story .ls-stage[data-beat="1"][data-sub="2"] .ls-browser { --y: 8; --s: .94; --o: 1; }
  .landing-story .ls-stage[data-beat="1"]:not([data-sub="2"]) .ls-note { --y: 424; --o: 1; --d: .3s; }
  .landing-story .ls-stage[data-beat="1"] .ls-mine { --y: 150; --o: 1; --d: .15s; }
  .landing-story .ls-stage[data-beat="1"][data-sub="2"] .ls-tt { --y: 196; --r: -2; --o: 1; --d: .15s; }
  .landing-story .ls-stage[data-beat="2"][data-sub="0"] .ls-film { --y: 150; --o: 1; --d: .1s; }
  .landing-story .ls-stage[data-beat="2"]:is([data-sub="1"], [data-sub="2"]) .ls-film { --y: 0; --o: 1; }
  .landing-story .ls-stage[data-beat="2"][data-sub="0"] .ls-film-title { --y: 124; --o: 1; --d: .2s; }
  .landing-story .ls-stage:is([data-beat="2"][data-sub="2"], [data-beat="3"]:not([data-sub="2"])) .ls-sec { --x: calc(var(--col) * 123); --y: 78; --o: 1; }
  .landing-story .ls-stage:is([data-beat="3"][data-sub="2"], [data-beat="4"][data-sub="0"]) .ls-sec { --x: calc(var(--col) * 123); --y: 106; --o: 1; }
  .landing-story .ls-stage:is([data-beat="2"]:not([data-sub="0"]), [data-beat="3"]:not([data-sub="2"])) .ls-node { --x: calc(var(--col) * 123); --y: calc(100 + var(--row) * 48); --s: 1; --o: 1; }
  .landing-story .ls-stage:is([data-beat="3"][data-sub="2"], [data-beat="4"]) .ls-node { --x: calc(var(--col) * 123); --y: calc(128 + var(--row) * 48); --s: 1; --o: 1; }
  .landing-story .ls-stage[data-beat="4"][data-sub="0"] .ls-node:not([data-s="solve"]) { --y: calc(128 + var(--r4) * 48); }
  .landing-story .ls-stage[data-beat="4"] .ls-node[data-s="solve"] { --sy: .06; --o: 0; }
  .landing-story .ls-stage[data-beat="4"]:is([data-sub="1"], [data-sub="2"]) .ls-node:not([data-s="solve"]) { --x: 124; --y: calc(90 + var(--k) * 45); --s: .9; --o: 0; }
  .landing-story .ls-stage[data-beat="3"][data-sub="0"] .ls-quiz { --y: 260; --o: 1; --d: .25s; }
  .landing-story .ls-stage[data-beat="3"][data-sub="1"] .ls-quiz { --x: 123; --y: 148; --s: .3; }
  .landing-story .ls-stage[data-beat="3"][data-sub="2"] .ls-sum { --y: 0; --o: 1; --d: .2s; }
  .landing-story .ls-stage[data-beat="4"][data-sub="0"] .ls-fold { --y: 40; --o: 1; --d: .45s; }
  .landing-story .ls-stage[data-beat="4"]:is([data-sub="1"], [data-sub="2"]) .ls-rv { --x: 69; --o: 1; }
  .landing-story .ls-stage[data-beat="5"] .ls-result { --y: 0; --o: 1; --d: .1s; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .landing-story .ls-say-hero { max-width: 750px; padding: 32px; }
  .landing-story .ls-say-dock { max-width: 620px; }
}
@media (max-width: 380px) {
  .landing-story .ls-replies { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0 20px; }
  .landing-story .ls-btn { height: 44px; }
  .landing-story .ls-say-hero { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.landing-story) { scroll-behavior: auto; }
  .landing-story *, .landing-story *::before, .landing-story *::after { transition: none !important; animation: none !important; }
  .landing-story .ls-btn:is(:hover, :active), .landing-story .ls-btn:hover svg { transform: none; }
}