:root {
  --story-blue-1: #0088C7;
  --story-blue-2: #00AEEF;
  --story-green: #9ACA3C;
  --story-red: #EF4023;
  --story-orange: #F78E1E;
  --story-yellow: #FFC20D;
  --story-ink: #172025;
  --story-paper: #F4F3EF;
  --story-line: rgba(23, 32, 37, .18);
}

body[data-story-store-project='true'] .story-store-copy-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-story-store-project='true'] .story-store-copy-card {
  background: #F1F1EF;
  color: var(--story-ink);
  min-height: 232px;
  padding: clamp(22px, 3.2vw, 50px);
}

body[data-story-store-project='true'] .story-store-copy-card h2,
body[data-story-store-project='true'] .story-store-info-card h2 {
  font-size: clamp(17px, 1.55vw, 25px);
  font-weight: 560;
  letter-spacing: -.035em;
  line-height: 1.14;
  margin: 0;
  word-break: keep-all;
}

body[data-story-store-project='true'] .story-store-copy-card p {
  font-size: clamp(12px, .93vw, 15px);
  line-height: 1.62;
  margin: clamp(20px, 2.6vw, 38px) 0 0;
  max-width: 46em;
  word-break: keep-all;
}

.story-store-scene {
  background: var(--story-paper);
  color: var(--story-ink);
  font-family: Arial, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.story-store-scene *,
.story-store-copy-row * {
  box-sizing: border-box;
}

.story-store-scene img {
  display: block;
  max-width: 100%;
}

.story-store-scene h1,
.story-store-scene h2,
.story-store-scene p,
.story-store-scene figure {
  margin: 0;
}

.story-store-scene-head,
.story-store-hero-copy {
  left: 5.2%;
  position: absolute;
  top: 7%;
  z-index: 8;
}

.story-store-scene-head > span,
.story-store-hero-copy > span,
.story-store-closing > span {
  display: block;
  font-size: clamp(11px, .7vw,12px);
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 16px;
}

.story-store-scene-head h2 {
  font-size: clamp(25px, 3.15vw, 53px);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: 1.02;
  word-break: keep-all;
}

.story-store-note {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.25;
  position: absolute;
  white-space: nowrap;
  z-index: 5;
}

/* Hero */
.story-store-hero {
  background: #ECECE8;
}

.story-store-hero::before {
  background: var(--story-blue-1);
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  right: 50%;
  top: 0;
}

.story-store-hero::after {
  background: var(--story-red);
  content: "";
  height: 6px;
  left: 50%;
  position: absolute;
  right: 0;
  top: 0;
}

.story-store-hero-copy {
  top: 10.5%;
  width: 45%;
}

.story-store-hero-copy h1 {
  font-size: clamp(31px, 4vw, 68px);
  font-weight: 520;
  letter-spacing: -.065em;
  line-height: 1.01;
  word-break: keep-all;
}

.story-store-hero-copy p {
  font-size: clamp(11px, 1vw, 16px);
  line-height: 1.55;
  margin-top: 28px;
  word-break: keep-all;
}

.story-store-hero-stage {
  background: #FFFFFF;
  border: 1px solid rgba(23, 32, 37, .08);
  bottom: 7%;
  display: grid;
  gap: 2px;
  grid-template-rows: repeat(2, 1fr);
  overflow: hidden;
  position: absolute;
  right: 4.2%;
  top: 7%;
  width: 44%;
  z-index: 4;
}

.story-store-hero-panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 6%;
  position: relative;
}

.story-store-hero-panel.pharmacy {
  background: #EAF5F8;
}

.story-store-hero-panel.convenience {
  background: #FFF0E7;
}

.story-store-hero-panel > span {
  font-size: 11px;
  font-weight: 700;
  left: 5%;
  letter-spacing: .12em;
  position: absolute;
  top: 8%;
}

.story-store-hero-panel img {
  height: auto;
  width: 72%;
}

.story-store-hero-axis {
  align-items: center;
  bottom: 8%;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 12px;
  left: 5.2%;
  letter-spacing: .14em;
  position: absolute;
  z-index: 7;
}

.story-store-hero-axis i {
  background: currentColor;
  height: 1px;
  opacity: .35;
  width: 42px;
}

/* Structure */
.story-store-structure {
  background: #FFFFFF;
}

.story-store-structure-stage {
  bottom: 7%;
  left: 7%;
  position: absolute;
  right: 7%;
  top: 31%;
}

.story-store-structure-grid,
.story-store-grid-paper {
  background-image:
    linear-gradient(rgba(23, 32, 37, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 32, 37, .08) 1px, transparent 1px);
  background-size: 34px 34px;
  inset: 0;
  position: absolute;
}

.story-store-structure-stage > img {
  left: 50%;
  position: absolute;
  top: 48%;
  transform: translate(-50%, -50%);
  width: 76%;
  z-index: 3;
}

.story-store-centerline {
  background: linear-gradient(180deg, transparent, var(--story-line) 16%, var(--story-line) 84%, transparent);
  bottom: 0;
  left: 50%;
  position: absolute;
  top: 0;
  width: 1px;
  z-index: 2;
}

.story-store-structure-stage .note-story {
  bottom: 11%;
  color: var(--story-blue-1);
  left: 10%;
}

.story-store-structure-stage .note-center {
  color: var(--story-green);
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
}

.story-store-structure-stage .note-store {
  bottom: 11%;
  color: var(--story-blue-1);
  right: 10%;
}

.story-store-structure-caption {
  bottom: 2.9%;
  font-size: clamp(11px, .67vw, 11px);
  font-weight: 700;
  left: 50%;
  letter-spacing: .16em;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Process */
.story-store-process {
  background: #E7E7E3;
}

.story-store-process-grid {
  bottom: 5%;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  left: 4.2%;
  position: absolute;
  right: 4.2%;
  top: 31%;
}

.story-store-process-grid article {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(14px, 1.7vw, 26px);
}

.story-store-process-grid article.approved {
  background: var(--story-ink);
  color: #FFFFFF;
}

.story-store-candidate-art {
  align-items: center;
  background: #F7F7F5;
  display: flex;
  height: 57%;
  justify-content: center;
  margin-bottom: auto;
  min-height: 0;
  overflow: hidden;
  padding: 9%;
}

.story-store-candidate-art img {
  height: auto;
  max-height: 100%;
  object-fit: contain;
  width: 100%;
}

.story-store-process-grid article.approved .story-store-candidate-art img {
  width: 50%;
}

.story-store-process-grid article > span {
  display: block;
  font-size: clamp(12px, 1.2vw, 19px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.12;
  margin-top: 18px;
  word-break: keep-all;
}

.story-store-process-grid article > p {
  font-size: clamp(11px, .75vw, 12px);
  line-height: 1.48;
  margin-top: 11px;
  opacity: .72;
  word-break: keep-all;
}

/* Möbius */
.story-store-moebius {
  background: #10272D;
  color: #FFFFFF;
}

.story-store-moebius .story-store-scene-head {
  width: 37%;
}

.story-store-moebius-stage {
  bottom: 7%;
  position: absolute;
  right: 5%;
  top: 7%;
  width: 58%;
}

.story-store-symbol-disc {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  height: auto;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 51%;
  transform: translate(-50%, -50%);
  width: min(58%, 390px);
}

.story-store-symbol-disc img {
  height: 66%;
  width: 66%;
}

.story-store-moebius-stage .note-turn {
  left: 3%;
  top: 12%;
}

.story-store-moebius-stage .note-link {
  right: 3%;
  top: 20%;
}

.story-store-moebius-stage .note-plus {
  bottom: 10%;
  left: 2%;
}

.story-store-moebius-stage .note-pattern {
  bottom: 8%;
  right: 2%;
}

.story-store-moebius-stage .story-store-note::after {
  background: currentColor;
  content: "";
  height: 1px;
  opacity: .55;
  position: absolute;
  top: .65em;
  width: 54px;
}

.story-store-moebius-stage .note-turn::after,
.story-store-moebius-stage .note-plus::after {
  left: calc(100% + 12px);
}

.story-store-moebius-stage .note-link::after,
.story-store-moebius-stage .note-pattern::after {
  right: calc(100% + 12px);
}

/* Motion slots */
.story-store-motion-slot {
  align-items: center;
  display: flex;
  justify-content: center;
}

.story-store-motion-slot-one {
  background: #E7F3F6;
}

.story-store-motion-slot-two {
  background: #FFF0E7;
}

.story-store-motion-slot-three {
  background: #EDEDEA;
}

.story-store-motion-frame {
  align-items: center;
  background: #FFFFFF;
  border: 1px solid rgba(23, 32, 37, .11);
  display: flex;
  height: 67%;
  justify-content: center;
  position: relative;
  width: 78%;
}

.story-store-motion-frame::before,
.story-store-motion-frame::after {
  border-color: rgba(23, 32, 37, .28);
  border-style: solid;
  content: "";
  height: 20px;
  position: absolute;
  width: 20px;
}

.story-store-motion-frame::before {
  border-width: 1px 0 0 1px;
  left: 18px;
  top: 18px;
}

.story-store-motion-frame::after {
  border-width: 0 1px 1px 0;
  bottom: 18px;
  right: 18px;
}

.story-store-motion-frame > img {
  width: 56%;
}

.story-store-motion-frame-pair {
  gap: 5%;
}

.story-store-motion-frame-pair > img {
  width: 38%;
}

.story-store-motion-frame-pair > i {
  background: rgba(23, 32, 37, .18);
  height: 38%;
  width: 1px;
}

.story-store-motion-frame-live {
  border: 0;
  height: auto;
  overflow: hidden;
  width: 78%;
}

.story-store-motion-frame-live::before,
.story-store-motion-frame-live::after {
  display: none;
}

.story-store-motion-frame-live > iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  height: auto;
  width: 100%;
}

/* Dual color system */
.story-store-dual-system {
  background: #FFFFFF;
}

.story-store-dual-panels {
  bottom: 5%;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  left: 4.2%;
  position: absolute;
  right: 4.2%;
  top: 31%;
}

.story-store-system-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(20px, 3vw, 48px);
  position: relative;
}

.story-store-system-panel.pharmacy {
  background: #E9F4F7;
}

.story-store-system-panel.convenience {
  background: #FFF0E7;
}

.story-store-system-panel > span {
  font-size: 11px;
  font-weight: 700;
  left: 6%;
  letter-spacing: .13em;
  position: absolute;
  top: 7%;
}

.story-store-system-panel > img {
  align-self: center;
  width: 76%;
}

.story-store-swatches {
  bottom: 14%;
  display: flex;
  gap: 8px;
  left: 6%;
  position: absolute;
}

.story-store-swatches i {
  background: var(--swatch);
  display: block;
  height: 20px;
  width: 46px;
}

.story-store-system-panel > p {
  bottom: 6%;
  font-size: clamp(8px, .68vw, 11px);
  font-weight: 700;
  letter-spacing: .09em;
  position: absolute;
  right: 6%;
}

/* 07 색상규정 지면 — 화면에 실은 인쇄값의 근거 */
.story-store-spec-plate {
  margin: clamp(18px, 2.4vw, 34px) auto 0;
  /* ⚠ 560px 로 잡았더니 2560 창에서 표시 560px · 원본 1600px = **2.86배** 였다.
     인쇄값을 읽으라고 실은 지면인데 작았다. 넓혀서 읽히게 하고 화소 낭비도 없앤다. */
  max-width: min(1080px, 100%);
}

/* ⚠ 셸의 `.case__study__media img{width:100%}` 와 특이도가 같다.
   본문 속성으로 감싸 케이스 쪽이 이기게 한다. */
body[data-story-store-project='true'] .story-store-spec-plate img {
  aspect-ratio: 1600 / 2263;   /* 자리를 미리 잡아 두어 굴릴 때 밀리지 않게 */
  border: 1px solid rgba(23, 32, 37, .12);
  display: block;
  height: auto;
  width: 100%;
}

.story-store-spec-plate figcaption {
  border-top: 1px solid rgba(23, 32, 37, .14);
  font-size: clamp(11px, .72vw, 12px);
  font-weight: 700;
  letter-spacing: .04em;
  margin-top: 12px;
  padding-top: 12px;
  text-align: center;
  word-break: keep-all;
}

/* Grid */
.story-store-grid-scene {
  background: #F7F7F4;
}

.story-store-grid-stage {
  bottom: 6%;
  left: 7%;
  overflow: hidden;
  position: absolute;
  right: 7%;
  top: 31%;
}

.story-store-grid-stage > img {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  z-index: 4;
}

.story-store-measure {
  position: absolute;
  z-index: 5;
}

.story-store-measure::before,
.story-store-measure::after {
  background: var(--story-ink);
  content: "";
  position: absolute;
}

.story-store-measure.horizontal {
  border-top: 1px solid var(--story-ink);
  left: 15%;
  right: 15%;
  top: 28%;
}

.story-store-measure.horizontal::before,
.story-store-measure.horizontal::after {
  height: 9px;
  top: -5px;
  width: 1px;
}

.story-store-measure.horizontal::before {
  left: 0;
}

.story-store-measure.horizontal::after {
  right: 0;
}

.story-store-measure.vertical {
  border-left: 1px solid var(--story-ink);
  bottom: 36%;
  right: 10%;
  top: 36%;
}

.story-store-measure.vertical::before,
.story-store-measure.vertical::after {
  height: 1px;
  left: -5px;
  width: 9px;
}

.story-store-measure.vertical::before {
  top: 0;
}

.story-store-measure.vertical::after {
  bottom: 0;
}

.story-store-grid-stage .measure-x,
.story-store-grid-stage .measure-y,
.story-store-grid-stage .grid-center {
  font-size: clamp(8px, .66vw, 11px);
  font-weight: 700;
  letter-spacing: .12em;
  position: absolute;
  z-index: 6;
}

.story-store-grid-stage .measure-x {
  left: 50%;
  top: 21%;
  transform: translateX(-50%);
}

.story-store-grid-stage .measure-y {
  right: 5%;
  top: 48%;
}

.story-store-grid-stage .grid-center {
  bottom: 8%;
  color: var(--story-green);
  left: 50%;
  transform: translateX(-50%);
}

/* Pattern and cards */
.story-store-applications {
  background: #111C20;
  color: #FFFFFF;
}

.story-store-card-stage {
  bottom: 7%;
  height: 61%;
  left: 6%;
  position: absolute;
  right: 6%;
}

.story-store-application-card {
  background: #FFFFFF;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .22);
  height: 68%;
  overflow: hidden;
  position: absolute;
  width: 56%;
}

.story-store-application-card img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.story-store-application-card.pharmacy {
  left: 3%;
  top: 3%;
}

.story-store-application-card.convenience {
  bottom: 1%;
  right: 3%;
}

.story-store-pattern-key {
  bottom: 3%;
  display: flex;
  gap: 10px;
  left: 5.2%;
  position: absolute;
}

.story-store-pattern-key img {
  height: 26px;
  width: 29px;
}

/* Signage */
.story-store-signage {
  background: #DEDDD7;
}

.story-store-facade {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .2)),
    #C9C8C2;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 27%;
}

.story-store-facade-column {
  background: rgba(255, 255, 255, .58);
  bottom: 0;
  position: absolute;
  top: 0;
  width: 4.5%;
  z-index: 4;
}

.story-store-facade-column.left {
  left: 8%;
}

.story-store-facade-column.right {
  right: 8%;
}

.story-store-sign {
  align-items: center;
  background: #FFFFFF;
  border-bottom: 6px solid;
  border-top: 6px solid;
  display: flex;
  height: 25%;
  justify-content: center;
  left: 15%;
  position: absolute;
  right: 15%;
  z-index: 6;
}

.story-store-sign.pharmacy {
  border-color: var(--story-blue-1);
  top: 10%;
}

.story-store-sign.convenience {
  border-color: var(--story-orange);
  top: 42%;
}

.story-store-sign img {
  width: 52%;
}

.story-store-glass {
  bottom: 0;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, 1fr);
  left: 14%;
  position: absolute;
  right: 14%;
  top: 72%;
}

.story-store-glass i {
  background: linear-gradient(135deg, rgba(19, 48, 58, .58), rgba(94, 126, 136, .24));
}

/* Characters */
.story-store-characters {
  background: #F2EFE8;
}

.story-store-character-stage {
  bottom: 4%;
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  left: 4.2%;
  position: absolute;
  right: 4.2%;
  top: 25%;
}

.story-store-character-stage figure {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(14px, 1.8vw, 28px);
}

.story-store-character-art {
  flex: 1;
  min-height: 0;
  position: relative;
}

.story-store-character-art .character {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.story-store-character-art .mark {
  position: absolute;
  z-index: 3;
}

.story-store-character-art.loop .mark {
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
  width: 24%;
}

.story-store-character-art.person .mark {
  left: 50%;
  top: 54%;
  transform: translateX(-50%);
  width: 10%;
}

.story-store-character-stage figcaption {
  border-top: 1px solid rgba(23, 32, 37, .14);
  font-size: clamp(11px, .72vw,12px);
  font-weight: 700;
  letter-spacing: .04em;
  padding-top: 12px;
  text-align: center;
  word-break: keep-all;
}

/* Closing */
.story-store-closing {
  align-items: center;
  background: #111C20;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.story-store-closing > span {
  left: 5.2%;
  margin: 0;
  position: absolute;
  top: 7%;
}

.story-store-closing-symbols {
  display: flex;
  gap: 18px;
  justify-content: center;
}

.story-store-closing-symbols img {
  height: 68px;
  width: 76px;
}

.story-store-closing h2 {
  font-size: clamp(26px, 3.3vw, 56px);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: 1.03;
  margin-top: 5%;
  word-break: keep-all;
}

.story-store-closing-logos {
  align-items: center;
  background: #FFFFFF;
  bottom: 7%;
  display: flex;
  gap: 6%;
  justify-content: center;
  left: 15%;
  padding: 2.2% 4%;
  position: absolute;
  right: 15%;
}

.story-store-closing-logos img {
  width: 40%;
}

/* Information */
body[data-story-store-project='true'] .story-store-info-card {
  background: #F1F1EF;
  color: var(--story-ink);
}

body[data-story-store-project='true'] .story-store-info-card p {
  line-height: 1.55;
  word-break: keep-all;
}

@media (max-width: 1024px) {
  .story-store-scene-head h2 {
    font-size: clamp(24px, 4.4vw, 44px);
  }

  .story-store-hero-copy h1 {
    font-size: clamp(30px, 5.3vw, 55px);
  }

  .story-store-process-grid article > p {
    font-size: 11px;
  }

  .story-store-symbol-disc {
    height: auto;
    width: 54%;
  }
}

@media (max-width: 656px) {
  body[data-story-store-project='true'] .story-store-copy-row {
    grid-template-columns: 1fr;
  }

  body[data-story-store-project='true'] .story-store-copy-card {
    min-height: 190px;
    padding: 24px 22px;
  }

  body[data-story-store-project='true'] .story-store-copy-card h2 {
    font-size: 18px;
  }

  body[data-story-store-project='true'] .story-store-copy-card p {
    font-size: 12px;
    margin-top: 18px;
  }

  .story-store-scene {
    aspect-ratio: auto !important;
  }

  .story-store-scene-head,
  .story-store-hero-copy {
    left: 7%;
    right: 7%;
    top: 7%;
    width: auto;
  }

  .story-store-scene-head > span,
  .story-store-hero-copy > span,
  .story-store-closing > span {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .story-store-scene-head h2 {
    font-size: 25px;
    max-width: 13em;
  }

  .story-store-hero {
    min-height: 620px;
  }

  .story-store-hero-copy {
    top: 7.5%;
  }

  .story-store-hero-copy h1 {
    font-size: 34px;
    max-width: 10.5em;
  }

  .story-store-hero-copy p {
    font-size: 11px;
    line-height: 1.52;
    margin-top: 18px;
  }

  .story-store-hero-stage {
    bottom: 7%;
    left: 5%;
    right: 5%;
    top: 47%;
    width: auto;
  }

  .story-store-hero-panel {
    padding: 7%;
  }

  .story-store-hero-panel > span {
    font-size: 11px;
  }

  .story-store-hero-panel img {
    width: 80%;
  }

  .story-store-hero-axis {
    bottom: 2.3%;
    font-size: 11px;
    left: 7%;
  }

  .story-store-structure {
    min-height: 570px;
  }

  .story-store-structure-stage {
    bottom: 10%;
    left: 5%;
    right: 5%;
    top: 34%;
  }

  .story-store-structure-stage > img {
    width: 92%;
  }

  .story-store-structure-stage .note-story,
  .story-store-structure-stage .note-store {
    bottom: 7%;
    font-size: 11px;
  }

  .story-store-structure-stage .note-story {
    left: 2%;
  }

  .story-store-structure-stage .note-store {
    right: 2%;
  }

  .story-store-structure-stage .note-center {
    font-size: 11px;
  }

  .story-store-structure-caption {
    bottom: 3%;
    font-size: 11px;
  }

  .story-store-process {
    min-height: 920px;
  }

  .story-store-process-grid {
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    left: 4%;
    right: 4%;
    top: 28%;
  }

  .story-store-process-grid article {
    padding: 11px;
  }

  .story-store-candidate-art {
    height: 55%;
    padding: 8%;
  }

  .story-store-process-grid article > span {
    font-size: 13px;
    margin-top: 11px;
  }

  .story-store-process-grid article > p {
    font-size: 11px;
    line-height: 1.4;
    margin-top: 7px;
  }

  .story-store-moebius {
    min-height: 660px;
  }

  .story-store-moebius .story-store-scene-head {
    width: auto;
  }

  .story-store-moebius-stage {
    bottom: 8%;
    left: 5%;
    right: 5%;
    top: 34%;
    width: auto;
  }

  .story-store-symbol-disc {
    height: auto;
    width: 57%;
  }

  .story-store-moebius-stage .story-store-note {
    font-size: 11px;
    white-space: normal;
    width: 28%;
  }

  .story-store-moebius-stage .story-store-note::after {
    width: 24px;
  }

  .story-store-moebius-stage .note-turn {
    left: 0;
  }

  .story-store-moebius-stage .note-link {
    right: 0;
    text-align: right;
  }

  .story-store-moebius-stage .note-plus {
    bottom: 3%;
    left: 0;
  }

  .story-store-moebius-stage .note-pattern {
    bottom: 3%;
    right: 0;
    text-align: right;
  }

  .story-store-motion-slot {
    min-height: 380px;
  }

  .story-store-motion-frame {
    height: clamp(190px, 58vw, 220px);
    width: 88%;
  }

  .story-store-motion-frame-live {
    height: auto;
  }

  .story-store-motion-frame > img {
    width: 78%;
  }

  .story-store-motion-frame-pair {
    flex-direction: column;
    gap: 16%;
  }

  .story-store-motion-frame-pair > img {
    width: 72%;
  }

  .story-store-motion-frame-pair > i {
    height: 1px;
    width: 50%;
  }

  .story-store-dual-system {
    min-height: 720px;
  }

  .story-store-dual-panels {
    grid-template-columns: 1fr;
    top: 29%;
  }

  .story-store-system-panel {
    min-height: 0;
    padding: 26px 20px;
  }

  .story-store-system-panel > span {
    font-size: 11px;
  }

  .story-store-system-panel > img {
    width: 75%;
  }

  .story-store-swatches {
    bottom: 11%;
  }

  .story-store-swatches i {
    height: 15px;
    width: 36px;
  }

  .story-store-system-panel > p {
    bottom: 5%;
    font-size: 11px;
  }

  .story-store-grid-scene {
    min-height: 560px;
  }

  .story-store-grid-stage {
    bottom: 8%;
    left: 5%;
    right: 5%;
    top: 34%;
  }

  .story-store-grid-stage > img {
    width: 92%;
  }

  .story-store-measure.horizontal {
    left: 5%;
    right: 5%;
    top: 31%;
  }

  .story-store-measure.vertical {
    bottom: 39%;
    right: 2%;
    top: 39%;
  }

  .story-store-grid-stage .measure-x {
    font-size: 11px;
    top: 23%;
  }

  .story-store-grid-stage .measure-y {
    font-size: 11px;
    right: 0;
  }

  .story-store-grid-stage .grid-center {
    bottom: 4%;
    font-size: 11px;
  }

  .story-store-applications {
    min-height: 720px;
  }

  .story-store-card-stage {
    bottom: 10%;
    height: 55%;
    left: 4%;
    right: 4%;
  }

  .story-store-application-card {
    height: 55%;
    width: 86%;
  }

  .story-store-application-card.pharmacy {
    left: 0;
    top: 0;
  }

  .story-store-application-card.convenience {
    bottom: 0;
    right: 0;
  }

  .story-store-pattern-key {
    bottom: 3%;
    left: 7%;
  }

  .story-store-pattern-key img {
    height: 20px;
    width: 23px;
  }

  .story-store-signage {
    min-height: 600px;
  }

  .story-store-facade {
    top: 29%;
  }

  .story-store-sign {
    height: 24%;
    left: 8%;
    right: 8%;
  }

  .story-store-sign img {
    width: 76%;
  }

  .story-store-sign.pharmacy {
    top: 10%;
  }

  .story-store-sign.convenience {
    top: 42%;
  }

  .story-store-glass {
    left: 7%;
    right: 7%;
  }

  .story-store-characters {
    min-height: 800px;
  }

  .story-store-character-stage {
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    left: 3%;
    right: 3%;
    top: 25%;
  }

  .story-store-character-stage figure {
    padding: 10px 8px;
  }

  .story-store-character-art.loop .mark {
    top: 3%;
    width: 30%;
  }

  .story-store-character-art.person .mark {
    top: 54%;
    width: 14%;
  }

  .story-store-character-stage figcaption {
    font-size: 11px;
    line-height: 1.35;
    padding-top: 8px;
  }

  .story-store-closing {
    min-height: 520px;
  }

  .story-store-closing > span {
    left: 7%;
    top: 7%;
  }

  .story-store-closing-symbols img {
    height: 58px;
    width: 65px;
  }

  .story-store-closing h2 {
    font-size: 28px;
    max-width: 11em;
  }

  .story-store-closing-logos {
    bottom: 7%;
    flex-direction: column;
    gap: 18px;
    left: 7%;
    padding: 20px;
    right: 7%;
  }

  .story-store-closing-logos img {
    width: 78%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-store-scene *,
  .story-store-copy-row * {
    scroll-behavior: auto !important;
  }
}

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/story-store-logo-pharmacy.svg"],
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/story-store-logo-convenience.svg"] { aspect-ratio: 75/11; }
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/story-store-symbol-pharmacy.svg"],
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/story-store-symbol-convenience.svg"] { aspect-ratio: 83/75; }
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/application-card-pharmacy-r2.webp"],
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/application-card-convenience-r2.webp"] { aspect-ratio: 2106/1267; }
img[src$="/leaderin-case-assets-v2/symbol-final.svg"] { aspect-ratio: 37/24; }
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/candidate-direction.webp"] { aspect-ratio: 956/287; }
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/candidate-object.webp"] { aspect-ratio: 919/110; }
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/candidate-balance.webp"] { aspect-ratio: 140/17; }
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/character-lovely-loop-r2.webp"] { aspect-ratio: 1060/1654; }
img[src$="https://kangdesign-portfolio.pages.dev/story-store/assets/character-lovely-person.webp"] { aspect-ratio: 583/859; }

/* ⭐ 승인 마크는 **어느 자리에서도 비례를 바꾸지 않는다**(대표님 절대 규정).
   상자를 정사각·전체높이로 박아 둔 자리가 있어 마크가 늘어나 있었다
   (실측: 화면 비 ↔ 원본 비가 10% 어긋남).
   `object-fit: contain` 이면 상자가 어떻든 마크는 제 비례로 들어간다.
   ⚠ 셸 규칙과 특이도가 엉키므로 !important 로 못 박는다. */
img[src$="story-store-symbol-pharmacy.svg"],
img[src$="story-store-symbol-convenience.svg"] { object-fit: contain !important; }