#kok-features {
  --feature-height: 100svh;
  position: relative;
  isolation: isolate;
  background: #f5f8ff;
  color: #22252b;
  font-family: Pretendard, sans-serif;
}
.kok-character-stage {
  position: sticky;
  top: 0;
  height: var(--feature-height);
  width: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: clip;
  background: #f5f8ff;
}
.kok-mascot-place {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  pointer-events: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y pinch-zoom;
  transition: none;
}
.kok-mascot-place:focus-visible {outline: 3px solid #0b50cc;outline-offset: 1px;}
.kok-mascot-motion, .kok-mascot-surface {display: block;width: 100%;height: 100%;}
.kok-mascot-motion {animation: none;}
.kok-mascot-surface {position: relative;opacity: 1;transition: opacity .15s ease;}
.kok-mascot-place.is-changing .kok-mascot-surface {opacity: 0;}
.kok-mascot-surface canvas {position: absolute;inset: 0;display: block;width: 100%;height: 100%;opacity: 0;pointer-events: none;}
.kok-mascot-image {display: block;position: absolute;inset: 5%;width: 90%;height: 90%;object-fit: contain;max-width: none;pointer-events: none;}
.kok-mascot-surface.is-ready canvas {opacity: 1;}
.kok-mascot-surface.is-ready .kok-mascot-image {opacity: 0;}
.kok-feature-panels {position: relative;margin-top: calc(-1 * var(--feature-height));}
.kok-feature-panel {
  width: min(100%, 1560px);
  height: var(--feature-height);
  min-height: 620px;
  margin: 0 auto;
  padding: 104px clamp(32px, 5.5vw, 100px) 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 80px);
  align-items: center;
  scroll-margin-top: 0;
  box-sizing: border-box;
}
.kok-feature-copy {grid-column: 2;grid-row: 1;min-width: 0;position: relative;z-index: 3;}
.kok-mascot-slot {grid-column: 1;grid-row: 1;width: 100%;height: 100%;min-height: 0;pointer-events: none;}
.kok-feature-panel:nth-child(even) .kok-feature-copy {grid-column: 2;}
.kok-feature-panel:nth-child(even) .kok-mascot-slot {grid-column: 1;}
.kok-feature-copy h2 {
  margin: 0 0 clamp(18px, 2.5vh, 30px);
  font-size: clamp(32px, 3.1vw, 56px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.055em;
  word-break: keep-all;
}
.kok-feature-copy p {margin: 0 0 clamp(24px, 3vh, 38px);color: #616b7b;font-size: clamp(16px, 1.2vw, 19px);line-height: 1.8;word-break: keep-all;}
.kok-feature-links {display: flex;gap: 10px;flex-wrap: wrap;}
.kok-feature-links a {display: inline-flex;align-items: center;justify-content: center;gap: 22px;padding: 16px 24px;border-radius: 40px;background: #0b50cc;color: #fff;font-size: 16px;font-weight: 700;text-decoration: none;line-height: 1.3;}
.kok-feature-links a:hover {background: #083fa2;}
.kok-feature-links a:focus-visible {outline: 3px solid #22252b;outline-offset: 4px;}
@keyframes kok-mascot-float {0%,100% {transform: translateY(3px);}50% {transform: translateY(-5px);}}
@media (max-width: 1023px) {
  .kok-feature-panel {
    min-height: 680px;
    padding: 72px max(22px, 5vw) calc(88px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(210px, 1fr) max-content;
    row-gap: 12px;
    column-gap: 0;
    align-items: stretch;
  }
  .kok-feature-panel .kok-feature-copy, .kok-feature-panel:nth-child(even) .kok-feature-copy {grid-column: 1;grid-row: 2;max-width: 620px;width: 100%;justify-self: center;}
  .kok-feature-panel .kok-mascot-slot, .kok-feature-panel:nth-child(even) .kok-mascot-slot {grid-column: 1;grid-row: 1;max-width: 620px;justify-self: center;}
  .kok-feature-copy h2 {font-size: clamp(27px, 3.8vw, 36px);line-height: 1.23;margin-bottom: 13px;}
  .kok-feature-copy p {font-size: 15px;line-height: 1.65;margin-bottom: 20px;}
  .kok-feature-links a {font-size: 14px;padding: 13px 20px;gap: 20px;}
  .kok-mascot-place {transition-duration: .4s;}
}
@media (max-width: 750px) {
  .kok-feature-panel {padding-top: 60px;min-height: 650px;}
  .kok-feature-copy h2 {font-size: clamp(25px, 6.6vw, 31px);}
}
@media (max-width: 380px) {
  .kok-feature-panel {padding-inline: 20px;min-height: 670px;grid-template-rows: minmax(195px, 1fr) max-content;}
  .kok-feature-copy p {font-size: 14px;}
}
@media (prefers-reduced-motion: reduce) {
  .kok-mascot-motion {animation: none;}
  .kok-mascot-place, .kok-mascot-surface {transition: none;}
}

#kok-features.is-resizing .kok-mascot-place{transition:none}
@media(max-width:850px){
  .kok-special-copy{top:var(--kok-header-offset,63px);transition:top .28s ease;}
  .kok-special-card{scroll-margin-top:calc(var(--kok-header-offset,63px) + 153px);}
}
@media(prefers-reduced-motion:reduce){.kok-special-copy{transition:none;}}