@import url('/theme.css');

/* 사주보는 수달 브랜드 웹툰. 그림은 몇 장만 쓰고, 나머지는 디자인된 글자와 말풍선이
   끌고 간다. 섹션 배경은 그림 가장자리 색과 맞춰 번지듯 이어진다. */

.webtoon-page {
  margin: 0;
  background: var(--bg-outer);
  color: var(--ink);

  --paper: #F4E9DA;
  --paper-2: #FDF6E8;
  --night: #0F1B34;
  --night-2: #0E1931;
  --gold-2: #F0CD7A;
  --seal: #A93F2B;
  --f-display: 'Black Han Sans', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --f-hand: 'Nanum Pen Script', 'Pretendard', cursive;
  --f-hanja: 'Noto Serif KR', 'Nanum Myeongjo', serif;
}

.story {
  position: relative;
  width: min(480px, 100%);
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* theme.css가 모든 main/section에 좌우 여백을 넣는다. 그림이 화면 끝까지 닿아야
   배경과 이어지므로 이 페이지에서는 걷어낸다. */
.story main { padding: 0; }
.story section { padding-left: 0; padding-right: 0; padding-bottom: 0; }

.story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--paper);
}

.story-header img { display: block; width: 116px; height: auto; }

.story-header-link {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* ── 공통 글자 ─────────────────────────────────────── */

.headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
  font-weight: 400;
}

.headline .lead {
  margin-bottom: 8px;
  color: rgba(23, 36, 61, .72);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.headline .big {
  font-family: var(--f-display);
  font-size: clamp(33px, 10vw, 46px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
  word-break: keep-all;
}

.stamp {
  display: inline-block;
  margin: 4px .06em 4px 0;
  padding: .04em .18em .08em;
  color: #FFF9EF;
  background: var(--ink);
  box-shadow: 4px 4px 0 var(--gold);
  transform: rotate(-2deg);
}

.stamp.gold {
  color: var(--ink);
  background: var(--gold);
  box-shadow: 4px 4px 0 var(--ink);
}

.on-dark .lead { color: rgba(255, 249, 239, .76); }
.on-dark .big { color: #FFF9EF; }

.on-dark em {
  font-style: normal;
  color: var(--gold-2);
  text-shadow: 0 0 22px rgba(240, 205, 122, .45);
}

.hand {
  font-family: var(--f-hand);
  font-weight: 400;
}

/* 형광펜 밑줄: 글자 아래쪽 절반만 칠해 손으로 그은 느낌을 낸다.
   스크립트가 켜지면(hl-armed) 화면에 들어올 때 왼쪽부터 그어진다. */
.hl {
  padding: 0 .08em;
  background-image: linear-gradient(180deg,
    transparent 54%,
    rgba(255, 216, 77, .92) 54%,
    rgba(255, 216, 77, .92) 90%,
    transparent 90%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .9s cubic-bezier(.2, .7, .2, 1);
}

.hl-armed .hl:not(.is-drawn) { background-size: 0% 100%; }

/* 만화 자막 상자: 굵은 테두리 + 겹친 그림자 */
.caption {
  margin: 0;
  padding: 10px 16px 11px;
  color: var(--ink);
  background: #FFFFFF;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.45;
  white-space: nowrap;
}

.sfx {
  position: absolute;
  z-index: 3;
  font-family: var(--f-hand);
  line-height: 1;
  pointer-events: none;
}

.art {
  position: relative;
  margin: 0;
}

.art img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 1. 문제 ───────────────────────────────────────── */

.s-problem {
  padding-top: 24px;
  background: var(--paper);
}

.hanja-cloud {
  position: relative;
  z-index: 2;
  height: 76px;
  margin: 14px 0 0;
}

.hj {
  position: absolute;
  color: var(--ink);
  font-family: var(--f-hanja);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.hj.h1 { left: 7%; top: 12%; font-size: 32px; opacity: .88; transform: rotate(-7deg); }
.hj.h2 { left: 39%; top: 18%; font-size: 22px; opacity: .5; transform: rotate(5deg); }
.hj.h3 { right: 5%; top: 12%; font-size: 25px; transform: rotate(9deg); }
.hj.h4 { left: 31%; top: 41%; font-size: 21px; opacity: .42; transform: rotate(-3deg); }
.hj.h5 { left: 5%; top: 63%; font-size: 18px; opacity: .4; transform: rotate(4deg); }
.hj.h6 { left: 43%; top: 71%; font-size: 24px; opacity: .6; transform: rotate(-8deg); }
.hj.h7 { left: 50%; top: 13%; font-size: 66px; opacity: .08; }
.hj.h8 { left: 75%; top: 73%; font-size: 19px; transform: rotate(-12deg); }

/* 도장처럼 찍힌 한자 */
.hj.seal {
  padding: 6px 7px 5px;
  color: var(--seal);
  border: 3px solid var(--seal);
  border-radius: 6px;
  background: rgba(169, 63, 43, .05);
  opacity: .82;
}

.hanja-cloud .q1 {
  position: absolute;
  left: 21%;
  top: 30%;
  color: rgba(23, 36, 61, .55);
  font-size: 34px;
  transform: rotate(-8deg);
}

.art-confused img {
  height: 290px;
  object-fit: cover;
  object-position: 50% 70%;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

/* 첫 속마음은 그림 위에 얹지 않아 얼굴 표정이 또렷하게 보이도록 한다. */
.reader-thought {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  min-height: 58px;
  margin: 0 16px 8px;
  padding-left: 2%;
}

.reader-thought .thought {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: rotate(-2deg);
}

/* 속마음 말풍선: 손글씨 + 둥근 구름 + 방울 꼬리 */
.thought {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 9px 16px 10px;
  color: var(--ink);
  background: #FFFDF8;
  border: 2.5px solid var(--ink);
  border-radius: 30px;
  box-shadow: 3px 4px 0 rgba(23, 36, 61, .14);
  font-family: var(--f-hand);
  font-size: 23px;
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
}

.thought::before,
.thought::after {
  content: '';
  position: absolute;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: #FFFDF8;
}

.thought::before { width: 13px; height: 13px; }
.thought::after { width: 8px; height: 8px; }

.thought.t1::before { right: 26%; bottom: -19px; }
.thought.t1::after { right: 20%; bottom: -32px; }

.thought.t2 { right: 3%; top: 64%; transform: rotate(2deg); }
.thought.t2::before { left: 20%; bottom: -19px; }
.thought.t2::after { left: 13%; bottom: -32px; }

.thought.t3 { right: 2%; top: 43%; transform: rotate(-1deg); }
.thought.t3::before { left: -19px; top: 58%; }
.thought.t3::after { left: -32px; top: 74%; }

.sfx-sigh {
  left: 3%;
  top: 37%;
  color: rgba(23, 36, 61, .55);
  font-size: 30px;
  transform: rotate(-10deg);
}

.beats {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 24px 24px;
}

.beat-line {
  width: 2px;
  height: 34px;
  margin: 12px 0;
  background: var(--ink);
  opacity: .45;
}

.beats .aside {
  margin: 22px 0 0;
  color: rgba(23, 36, 61, .6);
  font-size: 27px;
  transform: rotate(-3deg);
}

/* ── 2. 전환 ───────────────────────────────────────── */

.s-turn {
  padding-top: 76px;
  background: linear-gradient(180deg,
    var(--paper) 0,
    #9A8E80 18px,
    #2D3753 48px,
    var(--night) 76px,
    var(--night) 100%);
}

.chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 26px auto 0;
}

.chevrons i {
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  animation: chevron 1.8s ease-in-out infinite;
}

.chevrons i:nth-child(2) { animation-delay: .2s; }
.chevrons i:nth-child(3) { animation-delay: .4s; }

@keyframes chevron {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}

.brand-intro {
  display: grid;
  grid-template-columns: 1fr 124px;
  align-items: center;
  padding: 12px 20px 8px;
}

.art-hero { margin: 0; }
.art-hero img { height: 142px; object-fit: cover; object-position: center 65%; }
.s-turn .big { font-size: clamp(30px, 8.4vw, 40px); }

/* 밤하늘 그림의 위아래 경계가 섹션 배경에 녹아들게 한다. */
.art-hero img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
}

.brand-lockup {
  text-align: left;
}

.brand-name {
  display: inline-block;
  margin: 0;
  font-family: var(--f-hanja);
  font-size: clamp(23px, 6.3vw, 30px);
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #FFF1C9 0%, #F0CD7A 45%, #C9923A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(240, 205, 122, .38));
}

.brand-sub {
  margin: 10px 0 0;
  color: rgba(255, 249, 239, .82);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.name-tag {
  position: absolute;
  left: 9%;
  top: 37%;
  color: #FFF9EF;
  font-family: var(--f-hand);
  font-size: 25px;
  transform: rotate(-6deg);
}

.name-tag::after {
  content: '';
  position: absolute;
  right: -22px;
  top: 70%;
  width: 18px;
  height: 14px;
  border-right: 2px solid rgba(255, 249, 239, .8);
  border-bottom: 2px solid rgba(255, 249, 239, .8);
  border-bottom-right-radius: 14px;
}

.sfx-twinkle {
  right: 11%;
  top: 44%;
  color: var(--gold-2);
  font-size: 30px;
  transform: rotate(10deg);
  text-shadow: 0 0 14px rgba(240, 205, 122, .6);
}

/* ── 3. 서비스 소개 ───────────────────────────────── */

.s-service {
  padding-top: 64px;
  background: linear-gradient(180deg,
    var(--night) 0,
    #3A4460 20px,
    #BDB4A6 44px,
    var(--paper-2) 64px,
    var(--paper-2) 100%);
}

.ask {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

/* 점선 타원 말풍선 */
.cloud-bubble {
  margin: 0;
  padding: 16px 28px;
  color: var(--ink);
  background: #FFFDF8;
  border: 2.5px dashed var(--ink);
  border-radius: 50%;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.45;
  text-align: center;
}

.sfx-whisper {
  color: rgba(23, 36, 61, .55);
  font-size: 23px;
}

.sfx-whisper.w1 { left: 11%; top: -16px; transform: rotate(-12deg); }
.sfx-whisper.w2 { right: 11%; bottom: -14px; transform: rotate(10deg); }

.art-explain { margin-top: 12px; }

.art-explain .cap-top {
  position: absolute;
  z-index: 2;
  top: 7%;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
}

.art-explain .cap-bottom {
  position: relative;
  z-index: 2;
  display: table;
  margin: -16px auto 0;
  transform: rotate(1deg);
}

.translate {
  padding: 58px 18px 0;
  text-align: center;
}

.translate-title {
  margin: 0;
  font-size: 31px;
  text-decoration: underline wavy var(--gold) 2px;
  text-underline-offset: 7px;
}

.translate-list {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.translate-list li {
  display: grid;
  grid-template-columns: 92px 34px 1fr;
  align-items: center;
}

.term {
  padding: 12px 6px 10px;
  color: #FFF9EF;
  background: var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--gold);
  text-align: center;
}

.term b {
  display: block;
  font-family: var(--f-hanja);
  font-size: clamp(21px, 6vw, 25px);
  font-weight: 900;
  line-height: 1.1;
}

.term small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  opacity: .72;
}

.arrow {
  position: relative;
  justify-self: center;
  width: 18px;
  height: 2px;
  background: var(--gold);
}

.arrow::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: rotate(45deg);
}

.plain {
  padding: 11px 14px;
  background: #FFFFFF;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}

.plain b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.plain small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.product {
  padding: 48px 20px 0;
  text-align: center;
}

.product .big { font-size: clamp(29px, 8.6vw, 40px); }

/* ── 리포트 장점 4가지 ─────────────────────────────── */

.perks {
  padding: 8px 20px 0;
  text-align: center;
}

.perk { padding-top: 46px; }
.perk:first-of-type { padding-top: 24px; }

.perk-num {
  margin: 0;
  color: #8A6412;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

.perk-title {
  margin: 8px 0 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(25px, 7.4vw, 32px);
  font-weight: 400;
  line-height: 1.3;
  word-break: keep-all;
}

.perk-desc {
  margin: 10px 0 0;
  color: rgba(23, 36, 61, .72);
  font-size: 15px;
  line-height: 1.65;
  word-break: keep-all;
}

.perk-note {
  margin: 16px 0 0;
  color: rgba(23, 36, 61, .8);
  font-size: 24px;
}

/* 손으로 두른 동그라미 — 증거 캡처에서 봐야 할 곳을 짚는다 */
.ring {
  position: absolute;
  z-index: 2;
  border: 3px solid #FFD84D;
  border-top-color: rgba(255, 216, 77, .6);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 216, 77, .35);
  pointer-events: none;
}

.ring-3line {
  left: 15%;
  right: 15%;
  top: 42%;
  bottom: -2%;
  border-radius: 18px;
  transform: rotate(1.5deg);
}

.ring-hl { left: 46%; top: 30%; width: 23%; height: 54%; transform: rotate(-6deg); }
.ring-terms { left: 19%; top: 36%; width: 60%; height: 36%; transform: rotate(-2deg); }

/* 리포트 본문 확대 카드: 카드 배경을 리포트 배경색과 맞추고 좌우 끝을 흐린다 */
.proof {
  position: relative;
  margin: 34px -6px 0;
  background: #0F1420;
  border-radius: 14px;
  box-shadow: 0 0 0 5px #FFFFFF, 0 16px 34px rgba(23, 36, 61, .28);
}

.proof img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.proof-tag {
  position: absolute;
  z-index: 3;
  top: -15px;
  left: 16px;
  padding: 3px 10px 4px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* 3초 요약 카드를 담은 휴대폰 */
.phone {
  position: relative;
  width: 50%;
  margin: 34px auto 0;
  background: #0F1420;
  border: 6px solid var(--ink);
  border-radius: 26px;
  box-shadow: 0 18px 36px rgba(23, 36, 61, .3);
  transform: rotate(3deg);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.phone-note {
  position: absolute;
  left: -60%;
  top: 34%;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.1;
  text-align: center;
  transform: rotate(-9deg);
}

.phone-note::after {
  content: '→';
  display: block;
  font-size: 28px;
}

.report {
  position: relative;
  margin: 24px 0 0;
  padding: 22px 20px;
  color: #FFF9EF;
  background: #0F1420;
  border: 2px solid var(--ink);
  border-radius: 4px 14px 6px 12px;
  box-shadow: 5px 5px 0 var(--gold);
  text-align: left;
}

.excerpt-label { color: var(--gold-2); font-weight: 800; font-size: 14px; }
.excerpt-label span { float: right; color: #C4BCA7; font-size: 12px; font-weight: 500; }
.report-excerpt { margin: 16px 0 0; }
.report-excerpt p { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin: 14px 0 0; font-size: 16px; font-weight: 650; line-height: 1.65; word-break: keep-all; }
.excerpt-index { color: var(--gold-2); font-size: 12px; line-height: 2.2; }
.evidence-origin { margin: 16px 0 0; color: #625C50; font-size: 12px; line-height: 1.65; text-align: center; word-break: keep-all; }
.evidence-origin a, .sample-link { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.sample-original { margin-top: 10px; text-align: left; font-size: 13px; }
.sample-original summary { width: fit-content; margin: auto; padding: 10px; cursor: pointer; }
.sample-original img { display: block; width: 100%; height: auto; margin-top: 10px; }
.proof-excerpt { padding: 28px 20px 22px; border-radius: 4px 14px 6px 12px; text-align: left; }
.proof-excerpt blockquote { margin: 0; color: #EEE8D4; font-size: 17px; line-height: 1.8; word-break: keep-all; }
.proof-excerpt mark { padding: 0 .08em; color: inherit; background: linear-gradient(transparent 52%, #9A7837 52%, #9A7837 91%, transparent 91%); }
.term-transcript { margin: 18px 0 0; padding: 12px 0; font-size: 16px; line-height: 1.6; border-bottom: 2px dashed #D5A542; }
.term-transcript span { display: block; }
.reading-guide { display: grid; grid-template-columns: 128px 1fr; align-items: center; margin: 48px 20px 0; text-align: center; }
.reading-guide .art-explain { margin: 0; }
.reading-guide .art-explain img { height: 180px; object-fit: cover; object-position: 50% 65%; mask-image: linear-gradient(#000 82%, transparent); }
.reading-guide .cloud-bubble { padding: 16px 8px; font-size: 16px; }
.reading-title { margin: 12px 0 0; font-size: 26px; }
.reading-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; }
.reading-path li { padding: 14px 4px; border-top: 3px solid var(--ink); }
.reading-path b { display: block; font-size: 16px; }
.reading-path span { display: block; margin-top: 6px; font-size: 12px; color: #625C50; }
.reading-guide > .perk-desc { grid-column: 1 / -1; }
.sample-link { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700; }

.report img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 0 6px #FFFFFF, 0 20px 40px rgba(23, 36, 61, .3);
}

/* 사진을 붙인 마스킹테이프 */
.report::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -12px;
  left: 50%;
  width: 84px;
  height: 26px;
  background: rgba(213, 165, 66, .6);
  transform: translateX(-50%) rotate(3deg);
}

.report-note {
  position: absolute;
  left: -3%;
  top: -46px;
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  transform: rotate(-4deg);
}

.report-note::after { content: ' ↘'; }

.spec {
  display: grid;
  gap: 11px;
  width: fit-content;
  margin: 46px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.spec li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  letter-spacing: -.02em;
}

.spec li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 4px var(--paper-2), 0 0 0 1.5px var(--gold);
}

.spec b { font-weight: 800; }

/* 티켓 모양 가격표: 양옆 반원 홈 + 안쪽 점선 */
.ticket {
  position: relative;
  width: 78%;
  margin: 32px auto 0;
  padding: 22px 20px 20px;
  color: #FFF9EF;
  background:
    radial-gradient(circle at 0 50%, var(--paper-2) 12px, transparent 12.5px),
    radial-gradient(circle at 100% 50%, var(--paper-2) 12px, transparent 12.5px),
    var(--ink);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(23, 36, 61, .25);
  text-align: center;
}

.ticket::before {
  content: '';
  position: absolute;
  inset: 8px 18px;
  border: 1.5px dashed rgba(240, 205, 122, .55);
  border-radius: 10px;
  pointer-events: none;
}

.ticket-label {
  display: block;
  color: rgba(255, 249, 239, .72);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
}

.ticket-price {
  display: block;
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: 54px;
  font-weight: 400;
  line-height: 1.05;
  background: linear-gradient(180deg, #FFF1C9 0%, #F0CD7A 50%, #D5A542 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ticket-price small { margin-left: 4px; font-size: 24px; }

.free {
  padding: 44px 20px 0;
  text-align: center;
}

.free-title {
  margin: 0;
  font-size: 30px;
}

.free-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 360px;
  margin: 16px auto 0;
  padding: 0;
  list-style: none;
}

.free-chips li {
  padding: 8px 14px;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.free-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ── 4. 마무리 ─────────────────────────────────────── */

.s-close {
  position: relative;
  padding-top: 100px;
  text-align: center;
  background: linear-gradient(180deg,
    var(--paper-2) 0,
    #BDB4A6 30px,
    #3A4460 64px,
    var(--night-2) 100px,
    var(--night-2) 100%);
}
.story .s-close { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }

/* 작은 별 몇 개 */
.s-close::before {
  content: '';
  position: absolute;
  inset: 100px 0 0;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, #FFF1C9, transparent),
    radial-gradient(1.2px 1.2px at 28% 62%, #FFFFFF, transparent),
    radial-gradient(2px 2px at 46% 12%, #F0CD7A, transparent),
    radial-gradient(1.2px 1.2px at 64% 48%, #FFFFFF, transparent),
    radial-gradient(1.8px 1.8px at 82% 22%, #FFF1C9, transparent),
    radial-gradient(1.2px 1.2px at 90% 70%, #FFFFFF, transparent),
    radial-gradient(1.6px 1.6px at 8% 82%, #F0CD7A, transparent);
  pointer-events: none;
}

.close-line {
  position: relative;
  margin: 0;
  color: #FFF9EF;
  font-family: var(--f-hanja);
  font-size: clamp(22px, 6.4vw, 27px);
  font-weight: 700;
  line-height: 1.55;
  word-break: keep-all;
}

/* ── 하단 고정 구매 버튼 ──────────────────────────── */

.cta-bar {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 0;
  width: min(480px, 100%);
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  box-sizing: border-box;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink), 0 12px 26px rgba(14, 25, 49, .3);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}

.cta-price {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
}

a:focus-visible {
  outline: 3px solid #8A6412;
  outline-offset: 4px;
}

@media (max-width: 360px) {
  .thought { padding: 8px 12px; font-size: 20px; }
  .translate-list li { grid-template-columns: 80px 26px 1fr; }
  .caption { font-size: 14.5px; white-space: normal; }
  .ticket-price { font-size: 46px; }
  .brand-intro { grid-template-columns: 1fr 106px; padding-left: 16px; padding-right: 16px; }
  .cta { font-size: 14px; }
  .cta-price { font-size: 18px; }
  .report { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .chevrons i { animation: none; opacity: .8; }
}