/* =========================================================================
   Atelier Story Archive — 레트로 도서 스타일 스타일시트
   컨셉: 낡은 가죽 장정 고서(古書). 명조체 위주, 클릭식 "책장 넘기기" 내비게이션.
   ========================================================================= */

:root{
  --ink:            #2b2117;
  --ink-soft:       #4a3c2c;
  --ink-faint:      #7a6a54;
  --paper:          #f3e8d0;
  --paper-deep:     #ead9b7;
  --paper-shadow:   #d8c49c;
  --gold:           #8a6a2f;
  --gold-bright:    #b98a34;
  --gold-lighter:   #d8ad57;
  --wine:           #6b2632;
  --wine-deep:      #4a1a22;
  --forest:         #2f4a3c;
  --rule:           #b8a06c;
  --leather-dark:   #26140c;
  --leather-mid:    #3c2013;

  --serif-kr: 'Noto Serif KR', 'Nanum Myeongjo', 'Batang', serif;
  --serif-en: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --display-en: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;

  --fs-base: 13px;   /* 작은 글씨 기준 */
  --fs-small: 11.5px;
  --fs-tiny: 10px;

  --spine-w: 46px;
  --nav-h: 54px;
  --controls-h: 64px;
  --page-turn-duration: 0.62s;

  /* 모바일 주소창 표시/숨김에 따라 vh 단위가 부정확해지는 문제를 막기 위한 변수.
     JS(main.js)에서 실제 window.innerHeight 기준으로 매 프레임 값을 채워 넣는다.
     JS가 아직 실행되지 않은 최초 순간에는 기본값(1vh)으로 동작해 기존과 동일하다. */
  --app-vh: 1vh;
}

*{ box-sizing: border-box; }

/* 모든 스크롤바를 시각적으로 숨김 (스크롤 기능 자체는 그대로 유지) */
*{
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 구형 Edge, IE11 */
}
*::-webkit-scrollbar{
  width: 0;
  height: 0;
  background: transparent;    /* Chrome, Safari, 최신 Edge */
}

html{
  scroll-behavior: smooth;
}

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body{
  margin: 0;
  font-family: var(--serif-kr);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.10), transparent 62%),
    linear-gradient(180deg, rgba(20,13,8,0.35), rgba(20,13,8,0.55)),
    url('../images/leather_texture.jpg');
  background-size: cover, cover, cover;
  background-position: center;
  background-attachment: fixed;
  letter-spacing: 0.01em;
  height: 100vh;
  height: calc(var(--app-vh, 1vh) * 100);
  height: 100dvh;
  overflow: hidden;
}

/* 전체를 덮는 미세한 종이 얼룩 오버레이 */
.grain-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0px, rgba(0,0,0,0.015) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.vignette-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow: inset 0 0 160px rgba(0,0,0,0.55), inset 0 0 40px rgba(0,0,0,0.4);
}

/* =========================================================================
   전체 레이아웃 — 책 형태 래퍼
   ========================================================================= */
.book-wrap{
  position: relative;
  height: 100vh;
  height: calc(var(--app-vh, 1vh) * 100);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  margin-left: var(--spine-w);
}

/* 좌측 책등(스파인) 장식 */
.book-spine{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--spine-w);
  z-index: 60;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.5), transparent 30%),
    url('../images/leather_texture.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: 4px 0 16px rgba(0,0,0,0.5), inset -2px 0 6px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.spine-title{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--display-en);
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--gold-lighter);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  opacity: 0.9;
}
.spine-band{
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(180deg, rgba(185,138,52,0.55), rgba(122,90,30,0.55));
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 -1px 2px rgba(0,0,0,0.5);
}
.spine-band-top{ top: 14%; }
.spine-band-bottom{ bottom: 14%; }

/* =========================================================================
   상단 리본 내비게이션
   ========================================================================= */
.ribbon-nav{
  position: relative;
  z-index: 50;
  flex: 0 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(36,26,18,0.96) 0%, rgba(26,19,13,0.98) 100%),
    url('../images/leather_texture.jpg');
  background-blend-mode: multiply;
  background-size: auto, cover;
  border-bottom: 3px double var(--gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

.ribbon-clasp{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold-lighter);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: radial-gradient(circle at 35% 30%, rgba(185,138,52,0.25), transparent 70%);
  opacity: 0.85;
}

.ribbon-tab{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  font-family: var(--serif-kr);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: #d8c49c;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  position: relative;
  z-index: 2;
}

.ribbon-tab i{ font-size: 11px; opacity: 0.85; }

.ribbon-tab:hover{
  color: #f3e8d0;
}

.ribbon-tab.active{
  color: #f0d98c;
}

/* 활성 탭 아래로 미끄러지는 골드 리본 표시자 */
.ribbon-tab-glow{
  position: absolute;
  height: 2px;
  bottom: 7px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 8px rgba(185,138,52,0.8);
  transition: left var(--page-turn-duration) cubic-bezier(0.65,0,0.35,1), width var(--page-turn-duration) cubic-bezier(0.65,0,0.35,1);
  z-index: 1;
  pointer-events: none;
}

/* =========================================================================
   페이지 뷰포트 — 클릭식 "책장 넘기기" 전환 영역
   ========================================================================= */
.page-viewport{
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.page{
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 34px 24px 46px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transition:
    transform var(--page-turn-duration) cubic-bezier(0.65, 0, 0.35, 1),
    opacity var(--page-turn-duration) cubic-bezier(0.65, 0, 0.35, 1),
    filter var(--page-turn-duration) ease;
  will-change: transform, opacity;
}

.page.pos-active{
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  filter: brightness(1);
}
.page.pos-right{
  transform: translateX(6%) scale(0.985);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  filter: brightness(0.9);
}
.page.pos-left{
  transform: translateX(-6%) scale(0.985);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  filter: brightness(0.9);
}

.page-frame{
  width: 100%;
  max-width: 720px;
  background:
    linear-gradient(180deg, rgba(255,250,235,0.68), rgba(255,250,235,0.4)),
    url('../images/paper_texture.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid var(--rule);
  outline: 1px solid rgba(139,109,49,0.25);
  outline-offset: -6px;
  padding: 56px 44px 66px;
  position: relative;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    0 22px 50px rgba(0,0,0,0.45),
    inset 0 0 70px rgba(139,109,49,0.08);
  min-height: calc(100% - 8px);
}

.page-watermark{
  position: absolute;
  right: 6%;
  top: 8%;
  font-size: 140px;
  color: var(--gold);
  opacity: 0.05;
  pointer-events: none;
  transform: rotate(8deg);
}

.corner{
  position: absolute;
  font-family: var(--display-en);
  font-size: 20px;
  color: var(--gold);
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
}
.corner-tl{ top: 8px; left: 12px; }
.corner-tr{ top: 8px; right: 12px; transform: scaleX(-1); }
.corner-bl{ bottom: 8px; left: 12px; transform: scaleY(-1); }
.corner-br{ bottom: 8px; right: 12px; transform: scale(-1,-1); }

.divider{
  text-align: center;
  color: var(--gold);
  font-size: 16px;
  margin: 26px 0;
  position: relative;
}
.divider::before, .divider::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule));
}
.divider::before{ left: 0; }
.divider::after{ right: 0; background: linear-gradient(270deg, transparent, var(--rule)); }
.divider-small{ margin: 18px 0; font-size: 12px; }

.section-note{
  text-align: center;
  font-family: var(--serif-en);
  font-style: italic;
  color: var(--ink-faint);
  font-size: var(--fs-small);
  margin: 0 0 28px;
}

.chapter-label{
  text-align: center;
  font-family: var(--display-en);
  letter-spacing: 0.35em;
  font-size: var(--fs-tiny);
  color: var(--gold);
  margin: 0 0 6px;
}

.chapter-title{
  text-align: center;
  font-family: var(--serif-kr);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.12em;
  margin: 0;
  color: var(--ink);
}

/* =========================================================================
   왁스 실링 장식
   ========================================================================= */
.wax-seal{
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4));
}
.wax-seal-cover{
  width: 58px;
  top: -18px;
  right: 8%;
  transform: rotate(12deg);
  opacity: 0.94;
}
.wax-seal-modal{
  width: 44px;
  top: -18px;
  left: 24px;
  transform: rotate(-8deg);
  opacity: 0.95;
}

/* 캐릭터 팝업 전용 — 실링왁스 대신 쓰는 꽃 장식. index.html에서 이 이미지는
   .modal-card의 자식이 아니라 .character-modal-frame(래퍼)의 형제로 두었다.
   .parchment-card는 overflow-y:auto인데, CSS 스펙상 한쪽 축만 auto로 주면
   반대 축(overflow-x)도 auto로 계산되어 카드 밖으로 튀어나온 장식은
   카드의 자식일 경우 잘릴 수 있다. 카드 바깥의 래퍼 기준으로 배치하면
   그 클리핑과 무관해지고, z-index로 카드보다 위 레이어에 확실히 띄울 수
   있다. 좌상단 모서리보다 살짝 안쪽(left)에서 시작해, 위쪽으로는 카드
   경계 밖으로 살짝 튀어나오게(top이 음수) 배치. */
.character-modal-frame{
  position: relative;
}
.char-modal-flower{
  position: absolute;
  top: -20px;
  left: 20px;
  width: 62px;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35));
}

/* =========================================================================
   CH.0 표지
   ========================================================================= */
.cover-page .page-frame{
  text-align: center;
}

.eyebrow{
  font-family: var(--display-en);
  font-size: var(--fs-small);
  letter-spacing: 0.32em;
  color: var(--gold);
  margin: 0 0 20px;
}

.cover-emblem{
  margin: 0 auto 10px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--rule), 0 6px 16px rgba(0,0,0,0.25);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), transparent 60%),
    var(--paper-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.emblem-watch{
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.cover-title{
  font-family: var(--serif-kr);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 10px 0 14px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}

.cover-subtitle{
  font-family: var(--serif-kr);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.9;
  margin: 0 0 4px;
}

/* =========================================================================
   표지 장식 엠블럼 — "조각난 태초의 불이 내려앉은 자리 / 틈새로 떨어진
   소녀에게 불어넣는 숨"을 텍스트 없이 도상으로 표현한 SVG 장식.
   토끼·회중시계 삽화 대신, 다섯으로 갈라진 빛의 파편 · 균열 · 숨결의
   소용돌이로 구성한다.
   ========================================================================= */
.ember-ornament{
  display: flex;
  justify-content: center;
  margin: 22px auto 4px;
}
.ember-svg{
  width: 100%;
  max-width: 240px;
  height: auto;
  overflow: visible;
}

.ember-glow{
  fill: url(#emberGlow);
  animation: emberPulse 5s ease-in-out infinite;
  transform-origin: 150px 150px;
}

.ember-ring{
  fill: none;
  stroke: var(--gold);
}
.ember-ring-outer{
  stroke-width: 1;
  opacity: 0.32;
}
.ember-ring-inner{
  stroke-width: 0.6;
  stroke-dasharray: 1 5;
  opacity: 0.38;
}

.ember-rays{
  opacity: 0.35;
  stroke-dasharray: 2 4;
  animation: emberRaySpin 40s linear infinite;
  transform-origin: 150px 150px;
}

.ember-shards path{
  stroke: var(--gold-lighter);
  stroke-width: 0.4;
  stroke-opacity: 0.55;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(216,173,87,0.7));
}
.ember-shards{
  animation: emberSpinSlow 48s linear infinite;
  transform-origin: 150px 150px;
}
.ember-shards .shard-2{ animation: shardDrift 5.5s ease-in-out infinite 0.3s; }
.ember-shards .shard-3{ animation: shardDrift 5.5s ease-in-out infinite 0.6s; }
.ember-shards .shard-4{ animation: shardDrift 6.5s ease-in-out infinite 0.9s; }
.ember-shards .shard-5{ animation: shardDrift 6.5s ease-in-out infinite 1.2s; }

@keyframes shardDrift{
  0%, 100%{ opacity: 0.9; }
  50%{ opacity: 1; }
}

.ember-star{
  filter: drop-shadow(0 0 8px rgba(185,138,52,0.55));
  animation: starTwinkle 3.4s ease-in-out infinite;
  transform-origin: 150px 150px;
}

.ember-breath-orbit{
  fill: none;
  stroke: var(--gold-lighter);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 48 232;
  filter: drop-shadow(0 0 3px rgba(216,173,87,0.6));
  animation: emberOrbit 16s linear infinite;
  transform-origin: 150px 150px;
}

@keyframes emberPulse{
  0%, 100%{ opacity: 0.7; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.06); }
}

@keyframes emberRaySpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes emberSpinSlow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes starTwinkle{
  0%, 100%{ transform: scale(1) rotate(0deg); opacity: 0.92; }
  50%{ transform: scale(1.12) rotate(6deg); opacity: 1; }
}

@keyframes emberOrbit{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -842; }
}

@media (prefers-reduced-motion: reduce){
  .ember-glow, .ember-rays, .ember-shards, .ember-star, .ember-breath-orbit{
    animation: none !important;
  }
}

.toc{
  margin: 36px auto 0;
  max-width: 380px;
  text-align: left;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 4px;
}

.toc-title{
  text-align: center;
  font-family: var(--serif-kr);
  font-size: var(--fs-small);
  letter-spacing: 0.5em;
  color: var(--gold);
  margin: 0 0 16px;
}

.toc-item{
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  padding: 7px 4px;
  font-family: var(--serif-kr);
  font-size: var(--fs-small);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.toc-item:hover{ color: var(--wine); padding-left: 6px; }

.toc-num{
  font-family: var(--display-en);
  font-size: 13px;
  color: var(--gold);
  width: 18px;
}
.toc-name{ white-space: nowrap; }
.toc-leader{
  flex: 1;
  border-bottom: 1px dotted var(--ink-faint);
  transform: translateY(-3px);
}
.toc-page{
  font-family: var(--serif-en);
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
}

.cover-footnote{
  margin: 30px 0 0;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}

/* =========================================================================
   CH.1 세계관
   ========================================================================= */
.origin-block{
  max-width: 560px;
  margin: 0 auto;
}
.origin-tag{
  text-align: center;
  font-family: var(--display-en);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--wine);
  margin: 0 0 14px;
}
.origin-text{
  font-size: var(--fs-small);
  line-height: 2.15;
  color: var(--ink-soft);
  text-indent: 1em;
  margin: 0 0 14px;
  text-align: justify;
}
.origin-text:first-of-type::first-letter{
  font-family: var(--display-en);
  font-size: 34px;
  font-weight: 700;
  color: var(--wine);
  float: left;
  line-height: 0.8;
  padding: 4px 6px 0 0;
}

.nation-index{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.nation-item{
  border-bottom: 1px solid var(--rule);
}

.nation-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 15px 6px;
  font-family: var(--serif-kr);
  color: var(--ink);
  text-align: left;
  transition: background 0.2s ease, padding-left 0.2s ease;
}
.nation-trigger:hover{
  background: rgba(139,109,49,0.08);
  padding-left: 12px;
}

.nation-glyph{
  flex: 0 0 auto;
  width: 26px;
  text-align: center;
  font-family: var(--display-en);
  font-size: 15px;
  color: var(--gold);
}

.nation-names{
  flex: 1;
  min-width: 0;
}
.nation-name-kr{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.nation-name-en{
  display: block;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.nation-hint{
  flex: 0 0 auto;
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
  font-family: var(--serif-en);
}
.nation-hint i{ margin-left: 4px; }

/* =========================================================================
   CH.2 인물록 — 카드 그리드
   ========================================================================= */
.character-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px;
}

.character-card{
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(255,250,235,0.6), rgba(234,217,183,0.55));
  padding: 16px 10px 14px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.character-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(43,33,23,0.18);
}

.character-card::before{
  content: attr(data-suit);
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: var(--display-en);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.character-card::after{
  content: attr(data-suit);
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-family: var(--display-en);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.1em;
  transform: rotate(180deg);
}

.card-portrait{
  width: 96px;
  height: 96px;
  margin: 6px auto 14px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-deep);
  color: var(--gold);
  font-size: 32px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(43,33,23,0.2), 0 0 0 4px rgba(139,109,49,0.08);
}
.card-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 초상화가 배경 톤(가죽·금·와인)과 어우러지도록 살짝 얹는 색 오버레이.
   원본 색감을 지우지 않도록 soft-light로 은은하게만 얹는다. */
.card-portrait::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(216,173,87,0.62), rgba(138,106,47,0.45) 55%, rgba(74,26,34,0.36));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.card-name{
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 4px;
}

.card-role{
  font-family: var(--serif-en);
  font-style: italic;
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
  margin: 0;
}

/* =========================================================================
   하단 페이지 넘김 컨트롤 바
   ========================================================================= */
.page-turn-controls{
  flex: 0 0 auto;
  height: calc(var(--controls-h) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(0deg, rgba(26,19,13,0.98) 0%, rgba(36,26,18,0.9) 100%),
    url('../images/leather_texture.jpg');
  background-blend-mode: multiply;
  background-size: auto, cover;
  border-top: 3px double var(--gold);
  box-shadow: 0 -4px 14px rgba(0,0,0,0.4);
  position: relative;
  z-index: 50;
}

.turn-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(185,138,52,0.08);
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: #e8d9ae;
  font-family: var(--serif-kr);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.turn-btn:hover:not(:disabled){
  background: rgba(185,138,52,0.22);
  color: #fff3d6;
  box-shadow: 0 0 12px rgba(185,138,52,0.4);
}
.turn-btn:disabled{
  opacity: 0.3;
  cursor: default;
}
.turn-btn i{ font-size: 12px; }

.page-progress{
  display: flex;
  align-items: center;
  gap: 10px;
}
.progress-dot{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(216,196,156,0.5);
  background: transparent;
  color: rgba(216,196,156,0.6);
  font-family: var(--display-en);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.progress-dot.active{
  border-color: var(--gold-bright);
  color: #f0d98c;
  background: rgba(185,138,52,0.18);
  box-shadow: 0 0 10px rgba(185,138,52,0.5);
  transform: scale(1.12);
}
.progress-dot:hover{ border-color: var(--gold-bright); color: #f0d98c; }

/* =========================================================================
   모달(팝업)
   ========================================================================= */
.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20,14,8,0.7);
  padding: 24px;
}
.modal-overlay.open{
  display: flex;
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.parchment-card{
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  max-height: calc(var(--app-vh, 1vh) * 82);
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255,250,235,0.97), rgba(240,225,195,0.97)),
    url('../images/paper_texture.jpg');
  background-size: cover;
  border: 1px solid var(--gold);
  outline: 1px solid rgba(139,109,49,0.35);
  outline-offset: -6px;
  padding: 34px 30px 30px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: popIn 0.3s ease;
}

/* 캐릭터 상세 모달은 스탠딩 아트를 위해 폭을 넓게, 2단 구성으로 사용
   내용 길이와 무관하게 팝업 크기 자체는 고정하고, 넘치는 내용만 카드
   내부에서 스크롤되도록 한다. scrollbar-gutter로 스크롤바가 나타나도
   폭이 밀리지 않도록 미리 자리를 확보해 둔다. */
.character-card-detail{
  max-width: 660px;
  position: relative;
  height: 465px;
  height: min(465px, calc(var(--app-vh, 1vh) * 71));
}

/* 우측 하단에 은은하게 깔리는 회중시계 워터마크. 실제 콘텐츠보다 뒤에 오도록
   z-index를 낮게 두고, char-detail-scroll 쪽에 z-index:1을 줘서 항상 그 위로
   뜨게 한다. 박스 자체를 카드 전체(inset:0)로 잡고 background-position을
   살짝 밀어서, 밀려난 만큼은 카드 경계에서 자연스럽게 잘려 보이게 한다
   (배경 이미지는 원래 자기 박스 밖으로는 그려지지 않으므로 별도
   overflow:hidden 없이도 깔끔하게 클리핑된다 — 카드 전체에 overflow:hidden을
   걸면 위로 살짝 걸쳐 있는 왁스 실(wax-seal) 장식까지 잘리기 때문에 이 방식을 씀). */
.character-card-detail::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/pocket_watch_bg.png');
  background-size: 35% auto;
  background-repeat: no-repeat;
  background-position: calc(120%) calc(135%);
  opacity: 0.14;
  filter: saturate(2.5) sepia(0.6);
  pointer-events: none;
  z-index: 0;
}
/* 채도 보정은 공개 기록 한정 — 비공개 기록에서는 원래 채도로 되돌림 */
.character-card-detail.secret-mode::after{
  filter: none;
}

.char-detail-scroll{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@keyframes popIn{
  from{ opacity: 0; transform: translateY(14px) scale(0.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close{
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s ease;
  z-index: 3;
}
.modal-close:hover{
  background: var(--wine);
  color: #f3e8d0;
  border-color: var(--wine);
}

.modal-kicker{
  font-family: var(--display-en);
  font-size: var(--fs-tiny);
  letter-spacing: 0.28em;
  color: var(--gold);
  margin: 0 0 8px;
}

.modal-title{
  font-family: var(--serif-kr);
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.03em;
}

.modal-rule{
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent 80%);
  margin: 16px 0 18px;
}

.modal-body{
  font-size: var(--fs-small);
  line-height: 2.05;
  color: var(--ink-soft);
  text-align: justify;
  margin: 0;
}

/* 캐릭터 상세 모달 전용
   ------------------------------------------------------------------
   레이아웃: 좌측(텍스트 정보) + 우측(투명 배경 스탠딩 아트 자리).
   스탠딩 아트 자리는 title / char-detail-title 오른쪽의 여백을 채우도록
   카드 우측에 세로로 길게 배치되며, 그림자 + 은은한 부유 애니메이션을 넣어
   추후 실제 PNG 삽화로 교체했을 때 자연스럽게 녹아들도록 준비해 둔다. */
.char-detail-content{
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.char-standing-slot{
  order: 2;
  flex: 0 0 168px;
  align-self: stretch;
  min-height: 260px;
  position: relative;
  overflow: visible;
}

.standing-placeholder{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gold);
  animation: standingFloat 4.5s ease-in-out infinite;
}
.standing-placeholder i{
  font-size: 46px;
  opacity: 0.55;
  filter: drop-shadow(0 10px 14px rgba(43,33,23,0.35));
}
.standing-placeholder span{
  font-family: var(--display-en);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  opacity: 0.75;
}

@keyframes standingFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* 실제 스탠딩 이미지가 삽입될 때 사용할 클래스 (JS/컨텐츠 준비 시 img에 적용)
   박스/테두리/배경 없이 이미지 자체만 보이도록 하고, 여백을 두어 살짝 작게 표시한다.
   배경 톤과 어우러지도록 하는 색조는 별도 오버레이 div 대신 filter로 이미지
   자체에 직접 건다 — mask-image로 캐릭터 실루엣에만 오버레이를 씌우는 이전
   방식은 file:// 로 열었을 때(CORS로 마스크 이미지 로드가 막힘) 조용히
   깨지는 문제가 있었다. filter는 이미 로드된 이미지 픽셀에 바로 적용되므로
   추가 리소스 요청이 없어 그런 문제가 없다. */
.char-standing-slot img{
  position: absolute;
  left: 8%;
  right: 8%;
  top: 4%;
  bottom: 4%;
  width: 84%;
  height: 92%;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 14px 18px rgba(43,33,23,0.4)) sepia(0.36) saturate(1.2) hue-rotate(-5deg) brightness(0.98);
  transition: filter 0.4s ease;
  animation: standingFloat 4.5s ease-in-out infinite;
}
/* 비밀 프로필일 때는 같은 필터 목록을 유지한 채(부드러운 전환을 위해) 값만
   바꿔서 톤을 낮춘다 (기존 대비 30% 정도의 세기). */
.character-card-detail.secret-mode .char-standing-slot img{
  filter: drop-shadow(0 14px 18px rgba(43,33,23,0.4)) sepia(0.38) saturate(1) hue-rotate(-6deg) brightness(0.72);
}

.char-detail-head{
  display: flex;
  gap: 16px;
  align-items: center;
}

.char-detail-portrait{
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--paper-deep);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(43,33,23,0.2), 0 0 0 4px rgba(139,109,49,0.08);
}
.char-detail-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.char-detail-portrait::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(216,173,87,0.62), rgba(138,106,47,0.45) 55%, rgba(74,26,34,0.36));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* 비밀 프로필일 때 아이콘 위에 얹는 검은 오버레이. 기존 금빛 톤(::after)보다
   위에 오도록 z-index를 명시적으로 높여준다. */
.char-detail-portrait::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.character-card-detail.secret-mode .char-detail-portrait::before{
  opacity: 1;
}
/* 비밀 프로필일 때 아이콘 테두리(프레임)도 더 어둡게 */
.character-card-detail.secret-mode .char-detail-portrait{
  border-color: #3a2c18;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(0,0,0,0.2);
}

.char-detail-heading{ min-width: 0; }

.char-detail-title{
  font-family: var(--serif-en);
  font-style: italic;
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
  margin: 4px 0 0;
}

.char-detail-facts{
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fact-row{
  display: flex;
  gap: 10px;
  font-size: var(--fs-tiny);
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 6px;
}
.fact-row dt{
  flex: 0 0 44px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.fact-row dd{
  margin: 0;
  color: var(--ink-soft);
}

/* 외관 상세 설명 토글 (명대사 영역 대체)
   불투명한 배경으로 채워서 뒤편 시계 워터마크가 이 박스 안쪽까지
   비쳐 보이지 않도록 한다 (배경 워터마크는 이 박스보다 아래 z-index). */
.char-appearance-toggle{
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
}
.char-appearance-toggle summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--serif-kr);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.03em;
}
.char-appearance-toggle summary::-webkit-details-marker{ display: none; }
.appearance-toggle-icon{
  color: var(--gold);
  font-size: 11px;
  transition: transform 0.25s ease;
}
.char-appearance-toggle[open] .appearance-toggle-icon{
  transform: rotate(180deg);
}
.appearance-toggle-body{
  margin: 0;
  padding: 0 14px 14px;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--ink-soft);
  border-top: 1px dotted var(--rule);
  padding-top: 10px;
}

/* =========================================================================
   키보드 안내 토스트(최초 1회)
   ========================================================================= */
.nav-hint{
  position: fixed;
  left: 50%;
  bottom: calc(var(--controls-h) + 14px);
  transform: translateX(-50%) translateY(8px);
  background: rgba(26,19,13,0.92);
  border: 1px solid var(--gold);
  color: #e8d9ae;
  font-family: var(--serif-kr);
  font-size: var(--fs-tiny);
  letter-spacing: 0.05em;
  padding: 8px 16px;
  border-radius: 3px;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
}
.nav-hint.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================================
   반응형
   ========================================================================= */
@media (max-width: 860px){
  :root{ --spine-w: 0px; }
  .book-spine{ display: none; }
  .book-wrap{ margin-left: 0; }
}

@media (max-width: 720px){
  .character-card-detail{
    max-width: 420px;
  }
  .char-detail-scroll{
    flex-direction: column;
  }
  .char-standing-slot{
    order: -1;
    flex: 0 0 180px;
    width: 100%;
    min-height: 180px;
  }
  .char-detail-content{ order: 2; }

  /* 모바일에서는 카드 폭이 좁고 세로로 긴 비율이라 데스크톱 값(120%/135%)
     그대로 쓰면 시계 워터마크가 거의 다 밀려나가 보인다. 왼쪽+위로 더
     끌어와 전체의 약 40% 정도만 보이도록 조정. */
  .character-card-detail::after{
    background-position: calc(112%) calc(122%);
  }
}

@media (max-width: 640px){
  :root{
    --fs-base: 12.5px;
    --nav-h: 50px;
    --controls-h: 60px;
  }
  .page{ padding: 20px 10px 30px; }
  .page-frame{ padding: 40px 20px 54px; }
  .cover-title{ font-size: 30px; }
  .eyebrow{ font-size: 7px;} 
  .ribbon-tab span{ display: none; }
  .ribbon-tab{ padding: 8px 12px; }
  .ribbon-tab i{ font-size: 14px; }
  .ribbon-clasp{ display: none; }
  .character-grid{ grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 16px; }
  .char-detail-head{ flex-direction: column; text-align: center; }
  .secret-reveal-note{ width: 150px; }
  .secret-reveal-tag{ width: 76px; right: -30px; bottom: -16px; }
  .fact-row{ flex-direction: column; gap: 2px; }
  .fact-row dt{ flex: none; }
  .turn-btn span{ display: none; }
  .turn-btn{ padding: 10px 14px; }
  .page-turn-controls{ gap: 14px; }
  .wax-seal-cover{ width: 44px; right: 6%; top: -14px; }
  .ember-svg{ max-width: 190px; }
  .modal-overlay{ padding: 14px; }
  .parchment-card{
    max-height: 92vh;
    max-height: calc(var(--app-vh, 1vh) * 92);
    padding: 30px 20px 24px;
  }
  .character-card-detail{
    height: 531px;
    height: min(531px, calc(var(--app-vh, 1vh) * 76));
    background-size: 50% auto;
    background-position: calc(80%) calc(90%);
  }
}
/* =========================================================================
   STEP 2 — 비공개 기록 스타일
   ------------------------------------------------------------------------
   style.css 맨 끝에 이 블록을 그대로 추가하면 됩니다.
   ========================================================================= */

/* -------------------------------------------------------------------------
   다크모드 팔레트 — .character-card-detail.secret-mode가 붙는 순간
   기존에 var(--ink), var(--gold) 등을 쓰던 모든 하위 요소가 자동으로
   이 값들로 갈아입습니다. (개별 요소마다 색을 새로 지정할 필요 없음)
   ------------------------------------------------------------------------- */
.character-card-detail{
  position: relative;
  /* 다크모드 전환을 배경색 자체의 트랜지션으로 처리한다 (아래 참고).
     background-color는 평소엔 완전 투명이라 기존 모습 그대로이고,
     secret-mode가 붙는 순간에만 blend-mode가 함께 켜지며 어두운 색으로
     트랜지션된다. element 자신의 background이므로 scrollbar-gutter로
     예약된 영역까지 포함해 항상 박스 전체를 덮는다 (이전에 쓰던 ::before
     오버레이는 그 예약된 영역은 못 덮어서 오른쪽에 밝은 띠가 남는 문제가 있었음). */
  background-color: rgba(6,4,3,0);
  transition: background-color 0.5s ease;
}
.character-card-detail.secret-mode{
  --paper:         #17110c;
  --paper-deep:    #0e0a07;
  --paper-shadow:  #000000;
  --ink:           #ece1c8;
  --ink-soft:      #cdbfa0;
  --ink-faint:     #9c8b6c;
  --gold:          #caa051;
  --gold-bright:   #e0b563;
  --gold-lighter:  #f0cf8e;
  --rule:          rgba(202,160,81,0.35);
  --wine:          #d9576b;
  --wine-deep:     #a6394a;
  border-color: var(--gold);
  outline-color: rgba(202,160,81,0.35);
  background-color: rgba(6,4,3,0.94);
  background-blend-mode: multiply;
}

/* 색상 전환에 은은한 트랜지션 — 이 모달 안 텍스트/테두리 색이 바뀔 때
   딱 끊기지 않고 부드럽게 넘어가도록 함 */
.character-card-detail,
.character-card-detail *{
  transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}

/* -------------------------------------------------------------------------
   이름 클릭 트리거 — 비공개 기록이 있는 인물만 js/main.js가
   .char-name-trigger 클래스 + role="button"/tabindex를 부여해 클릭(및
   키보드 Enter/Space) 가능하게 만든다. 비공개 기록이 없는 인물은 평범한
   제목 텍스트 그대로 유지된다.
   ------------------------------------------------------------------------- */
.char-name-trigger{
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: color 0.2s ease;
}
.char-name-trigger::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  border-bottom: 1px dotted var(--rule);
}
.char-name-trigger:hover,
.char-name-trigger:focus-visible{
  color: var(--gold-bright, var(--gold));
}
.char-name-trigger:focus-visible{
  outline: 1px dashed var(--gold);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   비공개 기록 연출 — 이름을 클릭하면 카드 전체를 덮는 오버레이 위에 쪽지
   가 펼쳐지듯 나타나고, 잠시 후 우측 하단에 열기 태그가 매달리듯 등장해
   천천히 좌우로 흔들린다. 오버레이 자체는
   pointer-events:none이라 태그가 나타나기 전까지는 뒤의 콘텐츠(닫기 버튼
   포함)를 그대로 클릭할 수 있다. char-detail-scroll 바깥에 위치하므로
   (index.html 참고) 내용이 스크롤되어도 항상 카드 전체를 덮는다.
   ------------------------------------------------------------------------- */
.secret-reveal{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.secret-reveal[hidden]{ display: none !important; }

.secret-reveal-inner{
  position: relative;
}

.secret-reveal-note{
  display: block;
  width: 190px;
  max-width: 46vw;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.5));
  opacity: 0;
  transform: perspective(500px) rotateY(90deg) rotate(-10deg);
  transform-origin: 50% 45%;
}

/* 이름 클릭 시 JS가 .secret-reveal에 .is-open을 붙이면 쪽지가 펼쳐진다.
   animate.css의 flipInY 방식 그대로: Y축 회전(뒤집힘)만으로 연출하고
   scale 팽창/오버슈트는 넣지 않아야 "통통 튐"이 아니라 "뒤집힘"으로
   읽힌다. 주의: perspective는 "속성"으로 이 요소 자신에게 주면 아무
   효과가 없다(부모 요소에 줘야 하는 값) — 그래서 transform 함수
   perspective(500px)를 매 keyframe의 transform 맨 앞에 넣어 이 요소
   자신을 기준으로 원근감을 만든다. */
.secret-reveal.is-open .secret-reveal-note{
  animation: secretNoteUnfold 0.75s ease-in-out forwards;
}
@keyframes secretNoteUnfold{
  0%{
    opacity: 0;
    transform: perspective(500px) rotateY(90deg) rotate(-12deg);
  }
  40%{
    opacity: 1;
    transform: perspective(500px) rotateY(-20deg) rotate(3deg);
  }
  60%{
    transform: perspective(500px) rotateY(10deg) rotate(-3deg);
  }
  80%{
    transform: perspective(500px) rotateY(-5deg) rotate(0deg);
  }
  100%{
    opacity: 1;
    transform: perspective(500px) rotateY(0deg) rotate(-2deg);
  }
}

/* 쪽지 우측 하단에 매달리는 열기 태그. JS가 약간의 지연 후 hidden을
   떼고 .is-visible을 붙여 등장시키며, 등장 직후 곧바로 무한 반복되는
   느린 흔들림(.is-swaying)으로 이어진다. */
.secret-reveal-tag{
  position: absolute;
  right: -64px;
  bottom: -24px;
  width: 100px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 0%;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.45));
}
.secret-reveal-tag[hidden]{ display: none !important; }
.secret-reveal-tag img{ display: block; width: 100%; height: auto; }

/* animate.css의 fadeIn + rubberBand를 합친 버전. 최종적으로 흔들림
   애니메이션(.is-swaying)의 시작 각도(rotate(22deg))와 맞춰 끝나도록
   회전값을 고정해 두어, 고무줄 효과가 끝나고 흔들림으로 넘어갈 때
   각도가 툭 튀어 보이지 않게 함. */
/* animate.css의 fadeIn + rubberBand를 "동시에" 겹쳐 재생. 페이드가 먼저
   끝나고 나서 고무줄 효과가 뒤이어 시작되지 않도록, opacity가 고무줄
   스케일 변형과 같은 구간(0~55%)에 걸쳐 함께 진행되도록 함. 최종적으로
   흔들림 애니메이션(.is-swaying)의 시작 각도(rotate(22deg))와 맞춰
   끝나게 회전값을 고정해 두어, 넘어갈 때 각도가 툭 튀지 않게 함. */
.secret-reveal-tag.is-visible{
  opacity: 1;
  pointer-events: auto;
  animation: secretTagAppear 0.9s ease-out forwards;
}
@keyframes secretTagAppear{
  0%{
    opacity: 0;
    transform: translateY(-10px) rotate(0deg) scale(1, 1);
  }
  25%{
    opacity: 0.55;
    transform: translateY(-4px) rotate(12deg) scaleX(1.25) scaleY(0.75);
  }
  40%{
    opacity: 0.85;
    transform: translateY(0) rotate(18deg) scaleX(0.75) scaleY(1.25);
  }
  55%{
    opacity: 1;
    transform: translateY(0) rotate(22deg) scaleX(1.15) scaleY(0.85);
  }
  70%{ transform: translateY(0) rotate(22deg) scaleX(0.95) scaleY(1.05); }
  85%{ transform: translateY(0) rotate(22deg) scaleX(1.05) scaleY(0.95); }
  100%{
    opacity: 1;
    transform: translateY(0) rotate(22deg) scale(1, 1);
  }
}

/* 오른쪽으로 살짝 기운 채로 좌우로 흔들리도록 흔들림 범위 자체를 오른쪽으로 치우치게 함 */
.secret-reveal-tag.is-swaying{
  animation: secretTagSway 3.4s ease-in-out infinite;
}
@keyframes secretTagSway{
  0%, 100%{ transform: translateY(0) rotate(22deg); }
  50%{ transform: translateY(1px) rotate(10deg); }
}
.secret-reveal-tag:hover img,
.secret-reveal-tag:focus-visible img{
  filter: brightness(1.15);
}
.secret-reveal-tag:focus-visible{
  outline: 1px dashed var(--gold-bright, var(--gold));
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   잠금 해제 연출 — 정답을 맞히는 순간 카드 중앙에서 은은하게 한 번 번쩍이는
   금빛 플래시. JS가 이 요소를 잠깐 만들었다 애니메이션 끝나면 제거함
   (표지의 ember 문양과 같은 톤을 재사용해 브랜드 일관성 유지)
   ------------------------------------------------------------------------- */
@keyframes secretFlash{
  0%{ opacity: 0; }
  35%{ opacity: 0.85; }
  100%{ opacity: 0; }
}
.character-card-detail .secret-flash{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(224,181,99,0.6), transparent 62%);
  animation: secretFlash 0.7s ease;
}

/* 봉인 해제 순간 카드가 살짝 오그라들었다 펴지는 "책장 넘김" 느낌의 트랜지션.
   JS가 전환 시작 시 .secret-transitioning을 잠깐 붙임 */
.character-card-detail.secret-transitioning{
  transform: scale(0.97);
  filter: brightness(0.85);
}
.character-card-detail{
  transition:
    color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease,
    transform 0.35s cubic-bezier(0.65,0,0.35,1),
    filter 0.35s ease;
}

/* 유틸리티: JS에서 페어 행 등을 완전히 숨길 때 사용 */
.is-hidden{ display: none !important; }

/* secret-reveal 계열 요소는 flex/inline-block 같은 값을 직접 지정해뒀기
   때문에, 순정 hidden 속성(브라우저 기본값 display:none)과 동일한
   우선순위에서 충돌해 hidden이 무시되는 문제가 있었다. 명시적으로
   승리시켜준다. (개별 규칙은 위 secret-reveal 섹션에서도 이미 선언했지만
   셀렉터 우선순위 이슈를 확실히 피하기 위해 여기서 한 번 더 명시) */
.secret-reveal[hidden],
.secret-reveal-tag[hidden]{
  display: none !important;
}