:root{
  /* Green Flash — Pearl Mint (mint forward, white as highlight) */
  --bg: #CFF2E2;               /* mint base */
  --text: #121826;
  --muted: rgba(18,24,38,0.70);
  --line: rgba(18,24,38,0.14);

  --panel: rgba(255,255,255,0.68);
  --panel-strong: rgba(255,255,255,0.82);

  --shadow: 0 14px 38px rgba(2, 10, 20, 0.10);
  --shadow-soft: 0 10px 26px rgba(2, 10, 20, 0.08);

  /* mint rays */
  --mint: rgba(80, 220, 190, 0.62);
  --mint2: rgba(80, 220, 190, 0.34);

  /* purple as reflection */
  --pearl-purple: rgba(205, 190, 255, 0.20);

  /* white highlight */
  --pearl-white: rgba(255,255,255,0.42);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);

  background:
    radial-gradient(1200px 700px at 22% 6%, var(--mint), transparent 58%),
    radial-gradient(1000px 600px at 80% 14%, var(--mint2), transparent 60%),

    radial-gradient(1100px 650px at 18% 0%, var(--pearl-purple), transparent 62%),
    radial-gradient(900px 540px at 86% 10%, rgba(225,210,255,0.14), transparent 60%),

    radial-gradient(1200px 760px at 50% -14%, var(--pearl-white), transparent 66%),
    linear-gradient(180deg, #E9FBF4 0%, var(--bg) 42%, #CDEEE3 100%);

  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{
  max-width: 920px;
  margin: 28px auto 64px;
  padding: 0 18px;
}

/* =========================
   HEADER
========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 50;

  padding: 16px 18px;
  border-bottom: 1px solid var(--line);

  background: rgba(255,255,255,0.56);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-inner{
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.brand h1{
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.2px;
}

.brandlink{ color: inherit; text-decoration: none; }

.tagline{
  margin: 6px 0 2px;
  color: var(--muted);
}

.subtag{
  margin: 0;
  color: rgba(18,24,38,0.55);
  font-size: 13px;
}

/* =========================
   NAV
========================= */
.nav{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}

.nav a{
  color: var(--text);
  text-decoration: none;
  border: 0;
}

/* capsule */
.nav a.btn-space{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 9px 12px;
  border-radius: 999px;

  border: 1px solid rgba(18,24,38,0.14);
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow-soft);

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.nav a.btn-space:hover{
  transform: translateY(-1px);
  border-color: rgba(18,24,38,0.18);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,0.84);
}

.nav a.btn-space:active{ transform: translateY(0); }

/* orbit dot */
.nav a.btn-space .ico{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(18,24,38,0.65);
  box-shadow:
    0 0 0 4px rgba(143,230,211,0.18),
    0 0 0 7px rgba(210,200,255,0.10);
}

/* current page */
.nav a[aria-current="page"]{
  background: rgba(255,255,255,0.90);
  border-color: rgba(18,24,38,0.20);
}

/* =========================
   HERO
========================= */
.hero{
  width: min(1280px, calc(100vw - 36px));
  max-width: none;
  height: 760px;
  border-radius: 22px;
  overflow: hidden;
  margin: 26px auto 18px;
  position: relative;
  box-shadow: 0 22px 60px rgba(2,10,20,0.14);
  border: 1px solid rgba(18,24,38,0.10);
}

.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(900px 480px at 22% 18%, rgba(210,200,255,0.16), transparent 60%),
    radial-gradient(1000px 520px at 78% 22%, rgba(143,230,211,0.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 45%, rgba(18,24,38,0.06) 100%);
  mix-blend-mode: soft-light;
}

.hero-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================
   CARDS / CONTENT
========================= */
.card{
  border: 1px solid rgba(18,24,38,0.12);
  background: rgba(255,255,255,0.58);
  border-radius: 16px;
  padding: 18px;
  margin: 16px 0;
  box-shadow: var(--shadow-soft);
}

.card h2, .card h3{
  margin: 0 0 10px 0;
  letter-spacing: 0.2px;
}

.card p{
  margin: 0;
  color: rgba(18,24,38,0.74);
}

.card p + p{ margin-top: 10px; }

.card a{
  color: #0B2B3A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* home tiles */
.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.tile{
  display: block;
  border: 1px solid rgba(18,24,38,0.12);
  background: rgba(255,255,255,0.56);
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-soft);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.tile:hover{
  transform: translateY(-1px);
  border-color: rgba(18,24,38,0.16);
  background: rgba(255,255,255,0.78);
}

.tile h3{
  margin: 0 0 8px;
  font-size: 16px;
}

.tile p{
  margin: 0;
  color: rgba(18,24,38,0.70);
  font-size: 14px;
}

/* =========================
   BUTTON (shared)
========================= */
.btn-space{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 9px 12px;
  border-radius: 999px;

  color: var(--text);
  text-decoration: none;

  border: 1px solid rgba(18,24,38,0.14);
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow-soft);

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.btn-space:hover{
  transform: translateY(-1px);
  border-color: rgba(18,24,38,0.18);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,0.84);
}

.btn-space:active{ transform: translateY(0); }

.btn-space .ico{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(18,24,38,0.65);
  box-shadow:
    0 0 0 4px rgba(143,230,211,0.18),
    0 0 0 7px rgba(210,200,255,0.10);
}

/* misc */
.date{ color: rgba(18,24,38,0.55); font-size: 13px; margin: 0 0 10px; }
.signature{ margin-top: 16px; font-style: italic; color: rgba(18,24,38,0.82); }

.book-cover{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(18,24,38,0.10);
  box-shadow: 0 16px 40px rgba(2,10,20,0.10);
}

.book-kicker{
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(18,24,38,0.55);
  margin: 0 0 6px;
}

.book-meta{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(18,24,38,0.12);
}

.book-meta h4{
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.book-meta .meta-text{
  margin: 0 0 14px;
  color: rgba(18,24,38,0.72);
  font-size: 14px;
  line-height: 1.7;
}

/* =========================
   NOTICE (optional, future)
========================= */
.notice{ margin: 28px 0; }

.notice__inner{
  padding: 18px 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.notice__kicker{
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: .86rem;
}

.notice__title{ margin: 0 0 6px; font-size: 1.22rem; }
.notice__desc{ margin: 0 0 10px; color: var(--muted); line-height: 1.55; }

.notice__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
}

.notice__cta:hover{ transform: translateY(-1px); }

/* =========================
   FILM STRIP (fix: no clipping + stable hover)
========================= */
.film-strip{
  margin: 120px auto;
  padding: 80px 0 120px; /* ✅ 아래 여유를 크게 (wave 내려가도 안 잘림) */
  overflow-x: hidden;
  overflow-y: visible;   /* ✅ 세로 잘림 방지 */
}

.film-track{
  display: flex;
  justify-content: center;
  gap: 48px;
}

/* Film frame as a link-safe block */
.film-frame{
  width: 220px;
  height: 140px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;

  display: block;
  text-decoration: none;
  color: inherit;

  cursor: pointer;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,0.06);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.85),
      rgba(230,245,238,0.75)
    );

  /* ✅ 웨이브 오프셋을 변수로 관리 (hover가 덮어쓰지 않게) */
  --waveY: 0px;

  transition: transform .35s ease, box-shadow .35s ease;
  transform-style: preserve-3d;
}

/* Wave offset */
.film-frame:nth-child(1){ --waveY: 10px; }
.film-frame:nth-child(2){ --waveY: 55px; }
.film-frame:nth-child(3){ --waveY: -40px; }
.film-frame:nth-child(4){ --waveY: 30px; }

/* Apply wave */
.film-frame{
  transform: translateY(var(--waveY));
}

/* Perforation */
.film-frame::before,
.film-frame::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  height:10px;
  background:
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,0.35) 0 6px,
      transparent 6px 16px
    );
  opacity:0.45;
}

.film-frame::before{ top: 8px; }
.film-frame::after{ bottom: 8px; }

/* Inner */
.frame-inner{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 16px;
  z-index: 2;
}

.frame-no{
  font-size: 0.75rem;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 6px;
}

.frame-title{
  font-size: 0.95rem;
  font-weight: 600;
}

/* Hover – keep wave + lift */
.film-frame:hover{
  transform:
    translateY(calc(var(--waveY) - 12px))
    scale(1.04)
    rotateZ(-0.3deg);
  box-shadow: var(--shadow);
}

/* =====CONTACT ======= */
/* CONTACT / ABOUT shared blocks (scoped) */
.container.contact .contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;

  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(18,24,38,0.10);
}

.container.contact .contact-block h3{
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.container.contact .contact-item{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(18,24,38,0.10);
}

.container.contact .contact-item:first-of-type{
  border-top: 0;
  padding-top: 0;
}

.container.contact .contact-label{
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.container.contact .contact-value{
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
}

.container.contact .contact-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

@media (max-width: 860px){
  .container.contact .contact-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .container.contact .contact-item{
    grid-template-columns: 78px 1fr;
  }
}

/* =========================
   EDITOR NOTE
========================= */
.editor-note{
  max-width: 680px;
  margin: 0 auto;
}

.editor-note__title{
  margin: 0 0 32px;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
}

.editor-note__body p{
  margin: 0 0 22px;
  line-height: 1.7;
}

.editor-note__signature{
  margin-top: 40px;
  font-style: italic;
  color: var(--muted);
}

/* =========================
   FOOTER
========================= */
.site-footer{
  margin-top: 80px;
  padding: 24px 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid rgba(18,24,38,0.10);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 860px){
  .header-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .nav{ margin-top: 10px; }
}

@media (max-width: 760px){
  .grid{ grid-template-columns: 1fr; }

  .hero{
    height: 420px;
    margin: 18px auto 24px;
    border-radius: 18px;
  }

  .nav{ gap: 8px; }
  .nav a.btn-space{ padding: 8px 10px; }

  /* film strip on mobile */
  .film-track{
    gap: 18px;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 18px;
    scroll-snap-type: x mandatory;
  }

  .film-frame{
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
}
/* =========================
   OVERRIDE: Manifesto block on Home
   - fix: .card rules overriding .card-manifesto
   - position: right under hero, centered, no white panel
========================= */
.card.card-manifesto{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  max-width: 760px;
  margin: 18px auto 0;     /* ✅ 히어로 바로 아래로 붙임 */
  padding: 26px 18px 28px; /* ✅ 과한 여백 줄임 */
  text-align: center;      /* ✅ 전체 중앙 정렬 */
}

.card.card-manifesto .film-quote{
  margin: 0 0 16px;
}

.card.card-manifesto .lead{
  margin: 12px 0 0;
}

.manifesto-film{
  margin: 14px auto 10px;  /* ✅ 140px 같은 큰 간격 제거 */
  text-align: center;
}
/* =========================
   HOME MANIFESTO (Under Hero)
========================= */
.home-manifesto{
  max-width: 760px;
  margin: 22px auto 48px;   /* hero 바로 아래 */
  padding: 12px 18px 0;
  text-align: center;
}

.home-quote{
  margin: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(18,24,38,0.78);
}

.home-quote-source{
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: rgba(18,24,38,0.55);
}

.home-line{
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(18,24,38,0.80);
}

.home-line + .home-line{
  margin-top: 14px;
}

.home-line.strong{
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* =========================
   LOCKED MANIFESTO PANEL
   - stable center
   - not affected by other sections/cards
   - visually “special”
========================= */
#home-manifesto{
  width: min(860px, calc(100vw - 36px));
  margin: -36px auto 34px;     /* ✅ hero 아래에 살짝 겹쳐 “장치감” */
  position: relative;
  z-index: 5;
  text-align: center;
}

#home-manifesto .manifesto-panel{
  padding: 22px 18px 20px;
  border-radius: 20px;

  /* glass panel */
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(18,24,38,0.14);
  box-shadow: 0 18px 55px rgba(2,10,20,0.12);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* subtle mint/purple reflection */
  background-image:
    radial-gradient(700px 260px at 20% 0%, rgba(80,220,190,0.18), transparent 62%),
    radial-gradient(760px 280px at 86% 12%, rgba(205,190,255,0.14), transparent 66%);
}

#home-manifesto .manifesto-panel::before{
  content:"";
  display:block;
  width: 72px;
  height: 3px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(18,24,38,0.18);
}

/* quote */
#home-manifesto .manifesto-quote{
  margin: 0 0 14px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(18,24,38,0.78);
}

#home-manifesto .manifesto-source{
  display:block;
  margin-top: 6px;
  font-size: 0.86rem;
  color: rgba(18,24,38,0.55);
}

/* 핵심 선언(포스터처럼) */
#home-manifesto .manifesto-core{
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.72rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: rgba(18,24,38,0.92);
}

/* 형광펄 한 번만 */
#home-manifesto .manifesto-core{
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(80,220,190,0.18);
}

/* 서사 문단 */
#home-manifesto .manifesto-body{
  margin: 12px 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(18,24,38,0.74);
}

/* 모바일: 겹침 줄이기 */
@media (max-width: 760px){
  #home-manifesto{
    margin: -18px auto 26px;
  }
  #home-manifesto .manifesto-panel{
    padding: 18px 14px 16px;
    border-radius: 18px;
  }
}
/* =========================
   LOCKED MANIFESTO PANEL
   - stable center
   - not affected by other sections/cards
   - visually “special”
========================= */
#home-manifesto{
  width: min(860px, calc(100vw - 36px));
  margin: -36px auto 34px;     /* ✅ hero 아래에 살짝 겹쳐 “장치감” */
  position: relative;
  z-index: 5;
  text-align: center;
}

#home-manifesto .manifesto-panel{
  padding: 22px 18px 20px;
  border-radius: 20px;

  /* glass panel */
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(18,24,38,0.14);
  box-shadow: 0 18px 55px rgba(2,10,20,0.12);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* subtle mint/purple reflection */
  background-image:
    radial-gradient(700px 260px at 20% 0%, rgba(80,220,190,0.18), transparent 62%),
    radial-gradient(760px 280px at 86% 12%, rgba(205,190,255,0.14), transparent 66%);
}

#home-manifesto .manifesto-panel::before{
  content:"";
  display:block;
  width: 72px;
  height: 3px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(18,24,38,0.18);
}

/* quote */
#home-manifesto .manifesto-quote{
  margin: 0 0 14px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(18,24,38,0.78);
}

#home-manifesto .manifesto-source{
  display:block;
  margin-top: 6px;
  font-size: 0.86rem;
  color: rgba(18,24,38,0.55);
}

/* 핵심 선언(포스터처럼) */
#home-manifesto .manifesto-core{
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.72rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: rgba(18,24,38,0.92);
}

/* 형광펄 한 번만 */
#home-manifesto .manifesto-core{
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(80,220,190,0.18);
}

/* 서사 문단 */
#home-manifesto .manifesto-body{
  margin: 12px 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(18,24,38,0.74);
}

/* 모바일: 겹침 줄이기 */
@media (max-width: 760px){
  #home-manifesto{
    margin: -18px auto 26px;
  }
  #home-manifesto .manifesto-panel{
    padding: 18px 14px 16px;
    border-radius: 18px;
  }
}
/* =========================
   Option 3 + Sequence Motion (CSS only)
========================= */
/* =========================================================
   HOME MANIFESTO — CLEAN FINAL (only this block)
   - one line at a time (no overlap)
   - text never permanently disappears
   - green ray stays UNDER text
   - no transparent text / no clip tricks
========================================================= */

/* container */
#home-manifesto{
  width: min(860px, calc(100vw - 36px));
  margin: 18px auto 34px;
  position: relative;
  z-index: 5;
  text-align: center;
}

/* strip (투명 패널 버전 유지: 박스 없애고 싶다 했으니 기본은 투명) */
#home-manifesto .manifesto-strip{
  position: relative;
  padding: 12px 18px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* quote */
#home-manifesto .m-quote{
  margin: 0 0 10px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(18,24,38,0.70);
}
#home-manifesto .m-source{
  display:block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: rgba(18,24,38,0.52);
}

/* stage */
#home-manifesto .m-seq{
  position: relative;
  width: min(760px, calc(100vw - 48px));
  margin: 8px auto 0;

  /* 문장 영역 고정: 흔들림/겹침 방지 */
  min-height: 3.8em;
  padding-bottom: 26px; /* 아래 광선 자리 */
}

/* lines: 절대 투명 텍스트 금지 (clip/shimmer 전부 안 씀) */
#home-manifesto .m-line{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);

  width: 100%;
  display: block;
  text-align: center;
  white-space: normal;

  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.55;

  /* ✅ 항상 "색이 있는 글자" */
  color: rgba(56, 40, 92, 0.98);
-webkit-text-fill-color: rgba(56, 40, 92, 0.98);


  text-shadow:
  0 1px 0 rgba(0,0,0,0.22),
  0 0 6px rgba(80,220,190,0.22);


  /* 기본은 숨김(하지만 !important 금지: 영구 실종 원인) */
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  z-index: 2;
  pointer-events: none;
}

/* one-line-at-a-time: 12s cycle */
#home-manifesto .m1{ animation: mLine1 12s infinite; }
#home-manifesto .m2{ animation: mLine2 12s infinite; }
#home-manifesto .m3{ animation: mLine3 12s infinite; }

@keyframes mLine1{
  0%, 10%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  14%, 30%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  34%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}
@keyframes mLine2{
  0%, 42%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  46%, 62%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  66%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}
@keyframes mLine3{
  0%, 74%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  78%, 94%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100%      { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* green ray UNDER text (attached to m-seq) */
#home-manifesto .m-seq::before{
  content:"";
  position:absolute;
  left:50%;
  bottom: 2px;
  transform: translateX(-50%) scaleX(0.86);

  width: 260px;
  height: 3px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(80,220,190,0.00),
    rgba(80,220,190,0.95),
    rgba(210,255,245,1),
    rgba(80,220,190,0.95),
    rgba(80,220,190,0.00),
    transparent
  );

  opacity: 0;
  filter: blur(0.35px);
  z-index: 0;
  pointer-events: none;

  animation: greenRay6 12s infinite;
}

#home-manifesto .m-seq::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: -10px;
  transform: translateX(-50%) scaleX(0.9);

  width: 360px;
  height: 28px;
  border-radius: 999px;

  background: radial-gradient(
    ellipse at center,
    rgba(80,220,190,0.28),
    rgba(205,190,255,0.10),
    transparent 70%
  );

  opacity: 0;
  filter: blur(6px);
  mix-blend-mode: screen;
  z-index: 0;
  pointer-events: none;

  animation: greenRay6Glow 12s infinite;
}

/* same timing as lines: multiple flashes per cycle */
@keyframes greenRay6{
  0% { opacity:0; transform: translateX(-50%) scaleX(0.80); }

  6%  { opacity:0; }
  9%  { opacity:.98; transform: translateX(-50%) scaleX(1.05); }
  12% { opacity:.12; transform: translateX(-50%) scaleX(1.15); }
  14% { opacity:0;  transform: translateX(-50%) scaleX(.92); }

  32% { opacity:0; }
  35% { opacity:.92; transform: translateX(-50%) scaleX(1.05); }
  38% { opacity:.10; transform: translateX(-50%) scaleX(1.15); }
  40% { opacity:0;  transform: translateX(-50%) scaleX(.92); }

  41% { opacity:0; }
  44% { opacity:.98; transform: translateX(-50%) scaleX(1.05); }
  47% { opacity:.12; transform: translateX(-50%) scaleX(1.15); }
  49% { opacity:0;  transform: translateX(-50%) scaleX(.92); }

  66% { opacity:0; }
  69% { opacity:.92; transform: translateX(-50%) scaleX(1.05); }
  72% { opacity:.10; transform: translateX(-50%) scaleX(1.15); }
  74% { opacity:0;  transform: translateX(-50%) scaleX(.92); }

  75% { opacity:0; }
  78% { opacity:.98; transform: translateX(-50%) scaleX(1.05); }
  81% { opacity:.12; transform: translateX(-50%) scaleX(1.15); }
  83% { opacity:0;  transform: translateX(-50%) scaleX(.92); }

  92% { opacity:0; }
  95% { opacity:.92; transform: translateX(-50%) scaleX(1.05); }
  98% { opacity:.10; transform: translateX(-50%) scaleX(1.15); }
  100%{ opacity:0;  transform: translateX(-50%) scaleX(.92); }
}

@keyframes greenRay6Glow{
  0% { opacity:0; }

  9%  { opacity:.85; }
  16% { opacity:0; }

  35% { opacity:.75; }
  42% { opacity:0; }

  44% { opacity:.85; }
  52% { opacity:0; }

  69% { opacity:.75; }
  76% { opacity:0; }

  78% { opacity:.85; }
  86% { opacity:0; }

  95% { opacity:.75; }
  100%{ opacity:0; }
}

/* mobile */
@media (max-width: 760px){
  #home-manifesto{ margin: 14px auto 26px; }
  #home-manifesto .m-seq{ min-height: 4.2em; padding-bottom: 24px; }
  #home-manifesto .m-line{ font-size: 1.05rem; }
}
.accent{
  color: rgba(168, 64, 110, 0.95); /* 잉크 핑크 */
}
/* ========== HISTORY (Golden Footprints) ========== */
.history-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:24px;
  margin:64px auto 72px;
  padding:0 24px;
  max-width:1200px;
}

.history-card{
  display:block;
  transition:transform .25s ease, box-shadow .25s ease;
}

.history-card img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  display:block;
  border-radius:14px;
}

.history-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.15);
}

/* mobile spacing tweak */
@media (max-width: 520px){
  .history-grid{
    gap:16px;
    margin:48px auto 56px;
    padding:0 16px;
  }
  .history-card img{
    border-radius:12px;
  }
}
/* ===== History pages ===== */
.history-page { }

.history-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 18px 10px;
}

.history-header__inner{
  border-radius: 16px;
  padding: 16px 16px;
}

.history-back{
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  opacity: 0.8;
}

.history-title{
  margin: 10px 0 2px;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.history-subtitle{
  margin: 0;
  opacity: 0.7;
}

.history-main{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px 40px;
}
/* ===== History detail page layout ===== */
.history-detail{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 22px;
  border-radius: 18px;
  padding: 18px;
}

@media (max-width: 900px){
  .history-detail{ grid-template-columns: 1fr; }
}


.history-section-title{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.milestone-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.milestone-item{
  border-radius: 14px;
  padding: 12px 12px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
}

.milestone-meta{
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.milestone-year{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.milestone-tag{
  font-size: 12px;
  opacity: 0.75;
}

.milestone-title{
  margin: 0;
  font-weight: 700;
}

.milestone-note{
  margin: 2px 0 0;
  opacity: 0.85;
  line-height: 1.45;
}

.milestone-item--empty{
  opacity: 0.75;
}

.history-nav{
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.history-nav__btn{
  display: inline-block;
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.55);
}

@media (max-width: 900px){
  .history-card{ grid-template-columns: 1fr; }
}

body.history-page .history-detail { display: block; }
body.history-page .history-detail__media img { width: 100%; height: auto; display: block; }
.golden-strip { position: relative; z-index: 10; }
.golden-strip .golden-card { display: block; position: relative; z-index: 11; pointer-events: auto; }
.golden-strip .golden-img { display: block; width: 100%; height: auto; }

/* =========================
   HISTORY GRID (HOME) — BIG
========================= */
.history-grid{
  max-width: 1200px;
  margin: 64px auto 72px;
  padding: 0 24px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.history-grid .history-card{
  display: block;
  border-radius: 16px;
  overflow: hidden;
  max-width: none;          /* ✅ 170px 같은 제한 제거 */
  justify-self: stretch;
  transition: transform .25s ease, box-shadow .25s ease;
}

.history-grid .history-card img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.history-grid .history-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

@media (max-width: 520px){
  .history-grid{
    padding: 0 16px;
    gap: 16px;
  }
  .history-grid .history-card img{
    border-radius: 14px;
  }
}


h1, h2, h3{
  margin-top: 0;
}
h1{ margin-bottom: 0.6em; }
h2{ margin-bottom: 0.7em; }
h3{ margin-bottom: 0.8em; }
/* === GOLD TIMELINE === */

.timeline{
  position: relative;
}

.timeline::before{
  content:"";
  position:absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 99px;
  background-image:
    linear-gradient(180deg,
      rgba(255,232,150,0.92),
      rgba(210,160,60,0.92),
      rgba(255,232,150,0.82)
    ),
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.08) 0 2px,
      rgba(255,255,255,0.06) 2px 4px
    );
  background-blend-mode: multiply;
}

/* 연도 점 */
.timeline .dot{
  position: relative;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 30% 30%,
      rgba(255,245,200,0.95),
      rgba(210,160,60,0.95) 55%,
      rgba(120,80,20,0.95) 100%
    ),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.10) 0 1px,
      rgba(255,255,255,0.06) 1px 2px
    );
  background-blend-mode: multiply;
}
main > h2,
main > p{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.archive-intro{
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.02em;
   color: rgba(170, 140, 90, 0.85);
  margin-top: 12px;
  margin-bottom: 18px;
}
/* === PARISIEN JOURNAL BLOCK === */

.archive-section{
  max-width: 860px;
  margin: 0 auto 18px;
  padding: 0 0 0 56px; /* timeline과 동일 리듬 */
}

.archive-section__k{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: rgba(24,34,44,0.95);
}

.archive-section__f{
  margin: 4px 0 0;
  font-size: 14px;
  font-style: italic;
  color: rgba(24,34,44,0.68);
}

.archive-divider{
  max-width: 860px;
  margin: 26px auto 18px;
  height: 1px;
  background:
    linear-gradient(90deg,
      rgba(210,160,60,0.00),
      rgba(210,160,60,0.42),
      rgba(24,34,44,0.12),
      rgba(210,160,60,0.28),
      rgba(210,160,60,0.00)
    );
}

.journal-grid{
  max-width: 860px;
  margin: 0 auto 80px;
  padding-left: 56px;
  padding-right: 16px; /* 모바일 숨 쉴 공간 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}


.journal-card{
  border: 1px solid rgba(210,160,60,0.22);
  border-radius: 16px;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,0.52);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.journal-card__title{
  margin: 0;
  font-size: 16px;
  color: rgba(24,34,44,0.95);
}

.journal-card__sub{
  margin: 6px 0 0;
  font-size: 13px;
  font-style: italic;
  color: rgba(24,34,44,0.68);
}

.journal-card__desc{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(24,34,44,0.86);
}

.journal-card a{
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  font-size: 14px;
  color: rgba(24,34,44,0.95);
  border-bottom: 1px solid rgba(210,160,60,0.28);
  padding-bottom: 2px;
}

.journal-card a:hover{
  border-bottom-color: rgba(24,34,44,0.95);
}

@media (max-width: 720px){
  .journal-grid{
    grid-template-columns: 1fr;
  }
}
/* === JOURNAL COLOR (hero palette inspired) === */

.journal-avant{
  background: rgba(215, 232, 240, 0.88); /* washed space blue */
  border: 1px solid rgba(120, 160, 180, 0.35);
}

.journal-apres{
  background: rgba(250, 236, 214, 0.90); /* dusty ochre / paris stone */
  border: 1px solid rgba(200, 165, 110, 0.40);
}
/* === 1px editorial bar next to card titles === */

.journal-card__title{
  position: relative;
  padding-left: 10px; /* 바 자리 */
}

.journal-avant .journal-card__title::before,
.journal-apres .journal-card__title::before{
  content:"";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  border-radius: 99px;
  opacity: 0.95;
}

.journal-avant .journal-card__title::before{
  background: rgba(120, 160, 180, 0.95); /* blue cue */
}

.journal-apres .journal-card__title::before{
  background: rgba(200, 165, 110, 0.95); /* ochre cue */
}
/* === link underline tuned per journal palette === */

.journal-avant a{
  border-bottom-color: rgba(120, 160, 180, 0.35);
}

.journal-avant a:hover{
  border-bottom-color: rgba(120, 160, 180, 0.95);
}

.journal-apres a{
  border-bottom-color: rgba(200, 165, 110, 0.35);
}

.journal-apres a:hover{
  border-bottom-color: rgba(200, 165, 110, 0.95);
}
/* archive intro alignment fix */

.archive-intro{
  max-width: 860px;
  margin: 0 auto 24px;
  padding-left: 56px; /* timeline 기준선과 정렬 */
  padding-right: 16px;
}
@media (max-width: 720px){
  .journal-grid{
    grid-template-columns: 1fr;
    padding-left: 16px;
    padding-right: 16px;
  }

  .archive-intro{
    padding-left: 16px;
    padding-right: 16px;
  }
}
.archive-section__desc{
  margin: 6px 0 0;
  font-size: 14px;
  color: rgba(24,34,44,0.75);
}
/* Journal – Korean subtle translation */
.essay-ko{
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(24,34,44,0.45);
}
.essay-fr{
  margin-bottom: 28px;
}
/* ===== Cinema Film Strip: stronger frame look ===== */

.film-strip{
  margin: 28px 0 64px;
}

.film-track{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.film-frame{
  display: block;
  text-decoration: none;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  background: rgba(24,34,44,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}

.film-frame::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg,
    rgba(255,185,110,0.95),
    rgba(210,160,60,0.95),
    rgba(90,190,230,0.75)
  );
  opacity: 0.95;
}

.film-frame::after{
  content:"";
  position:absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  pointer-events: none;
}

.film-frame:hover{
  transform: translateY(-2px);
  transition: transform 160ms ease;
}

.frame-inner{
  padding: 18px 16px 16px 18px;
}

.frame-no{
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(210,160,60,0.9);
  margin-bottom: 6px;
}

.frame-title{
  display: block;
  font-size: 18px;
  line-height: 1.25;
  color: rgba(24,34,44,0.95);
  margin-bottom: 10px;
}

.frame-sub{
  display: block;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(24,34,44,0.72);
}

/* Mobile */
@media (max-width: 720px){
  .film-track{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .frame-title{
    font-size: 17px;
  }
}
/* ===== Film strip (real film look) ===== */

.film-strip{
  margin: 30px 0 70px;
}

.film-track{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.film-frame{
  display: block;
  text-decoration: none;
  border-radius: 16px;
  position: relative;
  overflow: hidden;

  /* film body */
  background: rgba(10,12,14,0.92);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.film-frame::after{
  content:"";
  position:absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  pointer-events: none;
}

/* perforations: top + bottom */
.film-frame::before{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  bottom: 10px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.32) 0 6px,
      rgba(255,255,255,0.00) 6px 16px
    ) top / 100% 2px no-repeat,
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.32) 0 6px,
      rgba(255,255,255,0.00) 6px 16px
    ) bottom / 100% 2px no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

.film-frame:hover{
  transform: translateY(-2px);
  transition: transform 160ms ease;
}

.frame-inner{
  padding: 22px 16px 18px 16px;
  text-align: center;
}

.frame-no{
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(210,160,60,0.92);
  margin-bottom: 10px;
}

.frame-title{
  display: block;
  font-size: 16px;
  line-height: 1.35;
  color: rgba(255,255,255,0.88);
}

/* mobile */
@media (max-width: 720px){
  .film-track{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .frame-inner{
    padding: 20px 16px 16px;
  }
}
/* =========================
   CINEMA BOX, FILM CUTS (soft premium)
   - sprocket top+bottom
   - center is "paper/glass" (not black)
   - copy is 2 lines only
   ========================= */

.cinema-box{
  width: min(980px, 92vw);
  margin: 56px auto 18px;
}

.cinema-strip{
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* 1) 전체 박스: 두 번째처럼 '연하고 고급' */
.film-cut{
  position: relative;
  display: inline-block;
  width: 220px;
  height: 140px;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;

  /* 둔탁한 박스감 줄이고, 지면에 얹힌 느낌 */
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(0,0,0,0.10);

  box-shadow:
    0 18px 30px rgba(0,0,0,0.10),
    0 2px 0 rgba(255,255,255,0.25) inset;

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  transform: translateZ(0);
}

/* 2) 중앙 면: '의도된 재질' (유리/종이 중간) */
/* 애매한 회색 제거: 민트가 아주 은은히 비치되, 화이트 쪽으로 정리 */
.film-body{
  position: absolute;
  left: 14px;
  right: 14px;
  top: 30px;
  bottom: 30px;

  border-radius: 8px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.92),
      rgba(255,255,255,0.80)
    );

  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 0 0 1px rgba(0,0,0,0.08) inset,
    0 10px 18px rgba(0,0,0,0.08);

  display: grid;
  place-content: center;
  text-align: center;
  padding: 10px;
}

/* 3) 상/하 스트립: 구멍은 위+아래 모두 (필름 문법) */
/* '검정 덩어리'로 보이지 않게: 아주 짙은 차콜 + 소프트 */
.film-cut::before,
.film-cut::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height: 22px;
  background: rgba(12,16,15,0.88);

  /* 구멍(스프로킷) */
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.85) 0 10px,
      rgba(255,255,255,0.00) 10px 20px
    );
  background-size: 20px 100%;
  background-position: 12px 0;

  /* 스트립을 기계적으로 딱딱하게 만들지 않기 */
  filter: blur(0.0px);
}

.film-cut::before{ top: 0; }
.film-cut::after{ bottom: 0; }

/* 4) 텍스트: 첫 번째의 '명확함'을 여기로 이식 */
.film-en{
  font-size: 0.86rem;
  letter-spacing: 0.07em;
  color: rgba(0,0,0,0.62);
  margin-bottom: 8px;
  font-weight: 600;
}

.film-ko{
  font-size: 1.14rem;
  font-weight: 750;
  color: rgba(0,0,0,0.86);
  line-height: 1.18;
}

/* 5) hover: 고급스럽게 아주 약하게 */
.film-cut:hover{
  box-shadow:
    0 22px 38px rgba(0,0,0,0.13),
    0 2px 0 rgba(255,255,255,0.28) inset;
  transform: translateY(-1px);
}

.film-cut:hover .film-body{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.94),
      rgba(255,255,255,0.84)
    );
}

/* 모바일 */
@media (max-width: 520px){
  .film-cut{
    width: 260px;
    height: 150px;
  }
  .film-body{
    left: 16px;
    right: 16px;
    top: 32px;
    bottom: 32px;
  }
}
/* =========================
   OVERRIDE: FILM-FRAME -> premium sprocket (top+bottom)
   put this at the VERY END of style.css
========================= */

.film-strip{ margin: 30px 0 70px; }

.film-track{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* outer: soft premium card */
.film-frame{
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;

  border-radius: 18px;
  overflow: hidden;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(0,0,0,0.10);

  box-shadow:
    0 18px 30px rgba(0,0,0,0.10),
    0 2px 0 rgba(255,255,255,0.25) inset;

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  /* wave 변수 유지(있으면 그대로 먹음) */
  transform: translateY(var(--waveY, 0px));
  transition: transform .35s ease, box-shadow .35s ease;
}

/* TOP sprocket strip */
.film-frame::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height: 22px;

  background: rgba(12,16,15,0.88);
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.85) 0 10px,
      rgba(255,255,255,0.00) 10px 20px
    );
  background-size: 20px 100%;
  background-position: 12px 0;

  opacity: 1;
  pointer-events: none;
}

/* BOTTOM sprocket strip (새로 만듦: 기존 after를 중앙 면으로 전환) */
.film-frame::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height: 22px;

  background: rgba(12,16,15,0.88);
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.85) 0 10px,
      rgba(255,255,255,0.00) 10px 20px
    );
  background-size: 20px 100%;
  background-position: 12px 0;

  pointer-events: none;
}

/* 중앙 면(밝은 종이/유리톤): frame-inner를 패널처럼 */
.film-frame .frame-inner{
  position: relative;
  margin: 30px 14px; /* 위/아래 스트립 피하기 */
  border-radius: 12px;
  padding: 18px 14px 16px;

  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0.92),
      rgba(255,255,255,0.80)
    );

  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 0 0 1px rgba(0,0,0,0.08) inset,
    0 10px 18px rgba(0,0,0,0.08);

  text-align: center;
  z-index: 2;
}

/* 카피: 영어(위) / 한글(아래) 딱 2줄 */
.film-frame .frame-no{
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.07em;
  color: rgba(0,0,0,0.62);
  margin: 0 0 8px;
  font-weight: 600;
}

.film-frame .frame-title{
  display: block;
  font-size: 1.14rem;
  font-weight: 750;
  color: rgba(0,0,0,0.86);
  line-height: 1.18;
  margin: 0;
}

/* hover: wave 유지 + 미세 상승 */
.film-frame:hover{
  transform: translateY(calc(var(--waveY, 0px) - 10px));
  box-shadow:
    0 22px 38px rgba(0,0,0,0.13),
    0 2px 0 rgba(255,255,255,0.28) inset;
}
/* =========================
   CINEMA ARTICLE (page)
========================= */
.cinema-article{
  width: min(860px, calc(100vw - 36px));
  margin: 26px auto 70px;
}

.cinema-back{
  display: inline-block;
  margin: 18px 0 14px;
  text-decoration: none;
  color: rgba(18,24,38,0.75);
  border-bottom: 1px solid rgba(18,24,38,0.18);
  padding-bottom: 2px;
}

.cinema-head{
  border: 1px solid rgba(18,24,38,0.12);
  background: rgba(255,255,255,0.58);
  border-radius: 18px;
  padding: 20px 18px 18px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cinema-kicker{
  margin: 0 0 6px;
  letter-spacing: .14em;
  font-size: 12px;
  color: rgba(18,24,38,0.55);
  text-transform: uppercase;
}

.cinema-title{
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: -0.02em;
}

.cinema-sub{
  margin: 0;
  color: rgba(18,24,38,0.72);
  line-height: 1.6;
}

.cinema-body{
  margin-top: 18px;
  border: 1px solid rgba(18,24,38,0.10);
  background: rgba(255,255,255,0.52);
  border-radius: 18px;
  padding: 22px 18px 20px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cinema-body p{
  margin: 0 0 18px;
  color: rgba(18,24,38,0.82);
  line-height: 1.85;
}

.cinema-quote{
  margin: 18px 0 20px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(80,220,190,0.28);
  background: rgba(80,220,190,0.10);
}

.cinema-quote p{
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(56, 40, 92, 0.96);
}

.cinema-next{
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 760px){
  .cinema-title{ font-size: 26px; }
  .cinema-body{ padding: 18px 14px 16px; }
  .cinema-body p{ line-height: 1.8; }
}
.cinema-insert{
  margin: 22px 0;
  padding-top: 6px;
}

.cinema-insert p{
  color: rgba(18,24,38,0.78);
}
/* ===== Dionysos Essay Gate ===== */

.dionysos-banner {
  background: transparent;
  color: inherit;
  text-align: center;
  padding: 4rem 2.5rem;
  margin-bottom: 4rem;
}

.dionysos-kicker {
  color: #f05a28; /* 오렌지 신호 */
}

.dionysos-title {
  color: inherit;
}

.dionysos-lede {
  color: inherit;
}

/* 기본 CTA: 중립 (페이지 공통) */
.dionysos-cta {
  background: transparent;
  border: 1.5px solid currentColor;
  color: inherit;
  padding: 0.6rem 1.4rem;
}

.dionysos-cta:hover {
  background: rgba(0,0,0,0.06);
}

/* Home 배너 전용 CTA – 오렌지 보색(딥 틸 블루) */
.dionysos-home-banner .dionysos-cta {
  background: #1f6f8b;
  border-color: #1f6f8b;
  color: #ffffff;
}
/* Home 전용: 오렌지 지구 톤 배너 (옅게) */
.dionysos-home-banner {
  background: linear-gradient(
    180deg,
    rgba(242,140,40,0.22),
    rgba(242,140,40,0.10)
  );
  border: 1px solid rgba(242,140,40,0.35);
}



/* 모바일 보정 */
@media (max-width: 640px) {
  .dionysos-banner {
    padding: 2.5rem 1.5rem;
  }

  .dionysos-title {
    font-size: 1.6rem;
  }
}

.dionysos-note {
  margin-top: 3rem;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Home 전용: 오렌지 지구 톤을 '옅게' 입히는 배너 */
.dionysos-home-banner {
  background: linear-gradient(
    180deg,
    rgba(242,140,40,0.22),
    rgba(242,140,40,0.10)
  );
  border: 1px solid rgba(242,140,40,0.35);
}

.dionysos-home-banner .dionysos-title { color: rgba(24,34,44,0.95); }
.dionysos-home-banner .dionysos-lede  { color: rgba(24,34,44,0.78); }
.dionysos-home-banner .dionysos-note  { color: rgba(24,34,44,0.62); opacity: 1; }
.dionysos-home-banner .dionysos-cta   { border-color: rgba(24,34,44,0.55); color: rgba(24,34,44,0.9); }
/* ===== Books Page (Contents / Books) ===== */
.books-page .wrap{
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

.books-header{ margin-bottom: 1.25rem; }

.books-title{
  font-size: 1.25rem;
  letter-spacing: .12em;
  margin: 0 0 .25rem;
}

/* Section */
.books-section{ margin: 2.75rem 0; }

.books-h2{
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 1.15rem;
  opacity: .9;
}

/* Featured grid */
.book-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Card base */
.book-card,
.book-row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.15rem;
  padding: 1.15rem;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.30);
  backdrop-filter: blur(10px);
}

.book-cover img{
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.book-title{ margin: 0; font-size: 1.05rem; }
.book-author{ margin: .25rem 0 1rem; opacity: .75; }

.book-spec{
  margin: 0 0 1rem;
  display: grid;
  gap: .35rem;
}
.book-spec > div{ line-height: 1.25; }
.book-spec dt{
  display: inline;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
  margin-right: .5rem;
}
.book-spec dd{
  display: inline;
  margin: 0;
}

/* Buttons */
.book-actions{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.btn{
  display: inline-block;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.25);
  text-decoration: none;
}

.btn-primary{
  border-color: rgba(0,0,0,.4);
}

.btn-ghost{
  background: transparent;
  opacity: .9;
}

/* Categories */
.book-cats{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.cat{
  display: inline-block;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.22);
  text-decoration: none;
  opacity: .85;
}

.cat.is-active{
  opacity: 1;
  border-color: rgba(0,0,0,.45);
}

/* All books list */
.book-list{
  display: grid;
  gap: 1rem;
}

/* Mobile */
@media (max-width: 820px){
  .book-grid{ grid-template-columns: 1fr; }
}
/* ===== Books folder (/books/) page patch ===== */
.books-page .books-title{
  margin: 0 0 .5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.books-page .books-note{
  margin: 0;
  opacity: .72;
}

.books-page .books-h2{
  margin: 0 0 .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.books-page .books-korhint{
  margin: .15rem 0 0;
  opacity: .65;
}

.books-catnav{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.book-format-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .85rem 0 0;
}

.books-empty{
  margin: 0;
  opacity: .65;
}
/* =========================================================
   BOOKS — Format/Store mini capsules (FINAL, single source)
   - brick 방지 (가로 캡슐 유지)
   - 메인 네비 버튼과 구분 (shadow 제거 + 톤 다운)
   - .books-page 유무 상관없이 동작
   Put this at the VERY END of style.css
========================================================= */

.book-format-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* 핵심: btn-space를 재사용하되, 여기선 mini로 강제 축소/가로 유지 */
.book-format-actions a.btn-space.btn-mini{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;

  padding: 6px 10px !important;
  border-radius: 999px !important;

  /* 메인 버튼과 차별 */
  box-shadow: none !important;
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(18,24,38,0.14) !important;

  font-size: 13px !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
}

.book-format-actions a.btn-space.btn-mini:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.78) !important;
}

.book-format-actions .star{
  font-size: 0.95em;
  opacity: 0.85;
}

/* 텍스트 컬러만 다르게(옵션 A 정신 유지) */
.book-format-actions a.fmt{ color: rgba(24,34,44,0.92); }
.book-format-actions a.store-kyobo  { color: #4b6b86; }
.book-format-actions a.store-yes24  { color: #c97a4a; }
.book-format-actions a.store-aladin { color: #5f7f6b; }

.book-format-actions a[aria-disabled="true"]{
  cursor: default;
  opacity: 0.78;
}
/* ===== Books page: kill brick buttons ===== */
.books-page .book-format-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.books-page .book-format-actions a{
  flex: 0 0 auto;          /* 🔴 이 한 줄이 핵심 */
  width: auto;
  min-width: 0;
  padding: 6px 10px;       /* 상단 메뉴 버튼과 동일 계열 */
  font-size: 13px;
  line-height: 1.1;

  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(18,24,38,0.14);
  box-shadow: none;        /* 메뉴 버튼과 구분 */
}
/* ===== Books: card rebuild (override old project-card layout) ===== */

.books-page .books-list{
  display: grid;
  gap: 18px;
}

.books-page .book-card{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px;
}

.books-page .book-cover{
  width: 120px;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.books-page .book-body{
  min-width: 0; /* 긴 텍스트 밀림 방지 */
}

.books-page .book-kicker{
  margin: 0 0 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
  font-size: 12px;
}

.books-page .book-title{
  margin: 0 0 10px;
}

.books-page .book-teaser,
.books-page .book-promise{
  margin: 0 0 10px;
  line-height: 1.8;
}

.books-page .book-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* 버튼이 '벽돌'처럼 커지는 원인: 기존 .btn-space / .btn-mini에 min-width/height가 있으면 이걸로 눌러버림 */
.books-page .btn-mini{
  padding: .45rem .75rem;
  border-radius: 999px;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: 1.2;
  font-size: 13px;
}

/* 모바일: 표지 위, 텍스트 아래 */
@media (max-width: 640px){
  .books-page .book-card{
    grid-template-columns: 1fr;
  }
  .books-page .book-cover{
    width: 140px;
  }
}
/* ===== Books: category pills (nav 버튼과 구분) ===== */
.books-page .books-catnav .cat-pill{
  /* 상단 메뉴보다 확실히 작게 */
  padding: .42rem .75rem;
  font-size: 12.5px;
  letter-spacing: .06em;
  border-radius: 999px;

  /* nav 버튼과 차별: 더 얇은 테두리 + 살짝 반투명 */
  border: 1px solid rgba(24,34,44,0.16);
  background: rgba(255,255,255,0.55);
  box-shadow: none;

  /* 작은 컬러 포인트(점)용 */
  position: relative;
  padding-left: 1.15rem;
}

.books-page .books-catnav .cat-pill::before{
  content:"";
  position:absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cat, rgba(24,34,44,0.35));
  box-shadow: 0 0 0 2px rgba(255,255,255,0.55);
}

.books-page .books-catnav .cat-pill:hover{
  border-color: rgba(24,34,44,0.28);
  background: rgba(255,255,255,0.72);
}

/* ===== Books: category pills (tinted background, no dots) ===== */
.books-page .books-catnav .cat-pill{
  padding: .45rem .85rem;
  font-size: 12.5px;
  letter-spacing: .04em;
  border-radius: 999px;

  /* 공통 */
  border: 1px solid rgba(24,34,44,0.18);
  background: var(--cat-bg, rgba(255,255,255,0.55));
  box-shadow: none;
}

/* hover는 살짝만 */
.books-page .books-catnav .cat-pill:hover{
  border-color: rgba(24,34,44,0.32);
  filter: brightness(0.98);
}

/* 장르별 '면적' 색 — 아주 연하게 */
.books-page .books-catnav .cat-featured{
  --cat-bg: rgba(240,90,40,0.22); /* 대표 도서 오렌지 */
}


.books-page .books-catnav .cat-humanities{
  --cat-bg: rgba(80,120,220,0.12);  /* 블루 */
}
.books-page .books-catnav .cat-literature{
  --cat-bg: rgba(160,90,180,0.12);  /* 퍼플 */
}
.books-page .books-catnav .cat-ya{
  --cat-bg: rgba(40,160,120,0.12);  /* 그린 */
}
.books-page .books-catnav .cat-children{
  --cat-bg: rgba(220,170,40,0.14);  /* 옐로 */
}
/* ===== Book meta (press-release style) ===== */
.books-page .book-meta{
  margin: .95rem 0 1.05rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(24,34,44,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
}

.books-page .book-meta__row{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: .6rem;
  padding: .35rem 0;
  border-top: 1px dashed rgba(24,34,44,0.12);
}

.books-page .book-meta__row:first-child{
  border-top: 0;
}

.books-page .book-meta dt{
  margin: 0;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
}

.books-page .book-meta dd{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
/* Aladin POD (단한권 인쇄소) — 강조 버튼 */
.books-page .btn-mini.store-pod{
  background: rgba(240, 90, 40, 0.14);
  border-color: rgba(240, 90, 40, 0.35);
  color: rgba(24,34,44,0.95);
  font-weight: 650;
}
.books-page .btn-mini.store-pod:hover{
  background: rgba(240, 90, 40, 0.20);
  border-color: rgba(240, 90, 40, 0.50);
}
/* ===== Cover Lightbox (CSS only) ===== */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(24,34,44,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20000; /* ✅ 헤더/네비보다 무조건 위로 */
}


.lightbox:target{
  display: flex;
}

.lightbox img{
  position: relative;
  z-index: 1;
  max-width: 50vw;   /* 화면 절반 */
  max-height: 50vh;  /* 화면 절반 */
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  display: block;
  margin: 0 auto;    /* 중앙 정렬 */
}

.lightbox-close{
  position: absolute;
  top: 1rem;       /* 화면 상단 위치 */
  right: 1rem;     /* 화면 우측 */
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 2rem;
  text-align: center;
  line-height: 2.5rem;
  z-index: 20001;   /* lightbox img보다 위 */
  cursor: pointer;
  text-decoration: none;
}


/* ===== Selected Books menu highlight (all pages) ===== */
.nav a[href$="selected.html"] {
  color: #f05a28;
  border-color: rgba(240,90,40,0.45);
}

.nav a[href$="selected.html"] .ico {
  opacity: 0.85;
}
/* ===== Color anchors (do not change visuals unless referenced) ===== */
:root {
  --accent-orange: #f05a28;
  --accent-blue: #1f4fd8;
}
/* ===== GAME STRIP (Platform Changes the Game) : single bar ===== */
.game-strip{
  background:#d11414;
  padding:1.4rem 1.25rem;
  margin:0 0 1.25rem;
  position:relative;
  overflow:hidden;
}

.game-strip__inner{
  max-width:980px;
  margin:0 auto;
  text-align:center; /* 문장/바를 붉은 박스 정중앙으로 */
}

.game-strip__word{
  position:relative;
  display:inline-block;
  padding:.4rem .9rem;

  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(1.3rem,2.3vw,2.2rem);
  line-height:1.1;

  isolation:isolate;
  z-index:0;
}

/* 글자만 아래로 내려서 ‘70% 걸침’ 만들기 */
.game-strip__text{
  display:inline-block;
  transform: translateY(0.14em);
}

.game-strip__word--single::before{
  content:"";
  position:absolute;
  left:-0.6rem;
  right:-0.6rem;

  height:1.10em;
  background:#000;

  top:22%;
  transform:translateY(-50%);

  z-index:-1;
  opacity:.97;
}
/* ===== BOOKS PAGE: cover thumbnail lock (fix giant covers) ===== */
.books-page img.book-cover{
  width: 120px !important;
  height: 160px !important;
  object-fit: cover !important;
  border-radius: 12px;
  display: block;
}

/* 모바일에서만 살짝 크게 */
@media (max-width: 640px){
  .books-page img.book-cover{
    width: 140px !important;
    height: 186px !important;
  }
}
/* ===== FIX 1: Dionysos Home banner — keep orange crisp (no muddy wash) ===== */
.dionysos-home-banner{
  background: transparent !important;
  border: 1px solid rgba(240,90,40,0.55) !important;
}

.dionysos-home-banner .dionysos-kicker{
  color: #f05a28 !important;
}

.dionysos-home-banner .dionysos-cta{
  border-color: #f05a28 !important;
  color: #f05a28 !important;
  background: rgba(255,255,255,0.62) !important;
}
.dionysos-home-banner .dionysos-cta:hover{
  background: rgba(240,90,40,0.10) !important;
}
/* ===== HOTFIX: Dionysos Home banner — solid clean orange ===== */
.dionysos-home-banner{
  background: linear-gradient(
    180deg,
    #f05a28 0%,
    #f26a3a 100%
  ) !important;

  border: none !important;
}

.dionysos-home-banner .dionysos-kicker,
.dionysos-home-banner .dionysos-title,
.dionysos-home-banner .dionysos-lede,
.dionysos-home-banner .dionysos-note{
  color: #ffffff !important;
}

.dionysos-home-banner .dionysos-cta{
  background: #ffffff !important;
  color: #f05a28 !important;
  border-color: #ffffff !important;
}

.dionysos-home-banner .dionysos-cta:hover{
  background: rgba(255,255,255,0.88) !important;
}
/* ===== HOTFIX: Dionysos banner orange lock (do not touch) ===== */
body .dionysos-banner.dionysos-home-banner{
  background: #F29200 !important;
  border-color: rgba(0,0,0,0.16) !important;
}
/* =========================================================
   HISTORY — Golden Footprints (FINAL SINGLE SOURCE)
   다른 섹션 영향 없음 / FILM·CINEMA 절대 미접촉
========================================================= */

.history-grid{
  max-width: 1200px;
  margin: 64px auto 72px;
  padding: 0 24px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.history-card,
.history-card-link{
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.history-card img,
.history-card-link img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

/* hover */
.history-card:hover,
.history-card-link:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

/* mobile */
@media (max-width: 520px){
  .history-grid{
    padding: 0 16px;
    gap: 16px;
  }
  .history-card img,
  .history-card-link img{
    border-radius: 14px;
  }
}
/* ===== Lightbox overlay ===== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(24,34,44,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20000; /* 헤더/네비보다 위 */
}

.lightbox:target {
  display: flex;
}

/* 이미지 크기 제한 */
.lightbox img {
  max-width: 50vw;   /* 화면의 절반 크기 */
  max-height: 50vh;  /* 화면의 절반 높이 */
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  position: relative;
  z-index: 1;
}

/* 닫기 버튼 */
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 2rem;
  text-align: center;
  line-height: 2.5rem;
  z-index: 20001;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
}

.lightbox-close:hover {
  background: rgba(0,0,0,0.75);
}
.card-notice-outline{
  border:1.5px solid #F29200;
}
/* =========================================================
   BOOKS: cover zoom icon on thumbnail (magnifier overlay)
   Put at VERY END of style.css
========================================================= */

/* 썸네일 링크를 기준 좌표로 */
.book-cover-link{
  position: relative;
  display: inline-block;
}

/* 돋보기: 표지 오른쪽 위에 붙는 서점 스타일 */
.book-cover-link .cover-zoom{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;

  background: rgba(24,34,44,0.62);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);

  z-index: 3;
  pointer-events: none; /* 클릭은 링크가 받게 */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 돋보기 렌즈 */
.book-cover-link .cover-zoom::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.95);
  transform: translate(-58%, -58%);
  opacity: 0.95;
}

/* 돋보기 손잡이 */
.book-cover-link .cover-zoom::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 2px;
  background: rgba(255,255,255,0.95);
  transform: translate(15%, 15%) rotate(45deg);
  transform-origin: left center;
  border-radius: 2px;
  opacity: 0.95;
}

/* 마우스 올리면 아이콘만 살짝 살아남 */
.book-cover-link:hover .cover-zoom{
  background: rgba(24,34,44,0.72);
  transform: translateY(-1px);
  transition: transform 160ms ease, background 160ms ease;
}

/* 모바일에서 터치 대비로 조금 크게 */
@media (max-width: 640px){
  .book-cover-link .cover-zoom{
    width: 38px;
    height: 38px;
    top: 10px;
    right: 10px;
  }
}

/* Aladin POD single-volume button */
.store-pod{
  background:#f05a28;
  border-color:#f05a28;
  color:#fff;
}
.store-pod:hover{
  background:#d94c1f;
  border-color:#d94c1f;
}

/* ===== Book teaser as copy ===== */
.book-teaser{
  font-family: "Inter", "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.45;
  margin: 0 0 1rem;
  color: rgba(18, 24, 38, 0.9);
}

/* ===== Notice: Contact (Purple Outline) ===== */
.card-contact-purple{
  border: 2px solid #5a189a;          /* 진한 보라 */
  background: rgba(90,24,154,.06);    /* 보라 기 배경 */
}

.card-contact-purple h2{
  margin: 0 0 .6rem;
  color: #3c096c;                     /* 제목용 진보라 */
  font-weight: 700;
}

.card-contact-purple .contact-line{
  margin: 0;
  line-height: 1.7;
  font-size: .95rem;
}

.card-contact-purple a{
  color: #3c096c;                     /* 링크도 동일 보라 */
  text-decoration: none;
  border-bottom: 1px dotted rgba(60,9,108,.5);
}

.card-contact-purple a:hover{
  border-bottom-style: solid;
}
/* BOOKS PAGE: disable home manifesto completely */
.books-page #home-manifesto{
  display: none !important;
}


/* MOBILE: hide magnifier overlay (touch devices) */
@media (hover: none) and (pointer: coarse){
  .book-cover-link .cover-zoom{
    display: none !important;
  }
}

/* =========================
   NOTICE OUTLINE SYSTEM
   ========================= */

/* 공통 아웃라인 구조 */
.card-notice-outline{
  border: 1.5px solid;
  border-radius: 14px;
}

/* 정기 / 안내 */
.notice-green{
  border-color: #1f8f5f;
}

/* 중요 / 선언 */
.notice-orange{
  border-color: #f29200;
}

/* 에디토리얼 / 인터뷰 */
.notice-purple{
  border-color: #6b5cff;
}

/* 기록 / 정보 */
.notice-blue{
  border-color: #2f6fd6;
}

/* 중립 / 시스템 */
.notice-gray{
  border-color: #9aa0a6;
}

/* 경고 / 변경 / 품절 */
.notice-red{
  border-color: #d94841;
}

/* =========================
   Selected Books (selected.html)
========================= */

.selected-cover{
  width: 220px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 14px;
}

.selected-book .book-author,
.selected-book .book-translator,
.selected-book .book-genre,
.selected-book .book-year{
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0;
}

.selected-meta{
  margin-top: 10px;
}

.selected-meta p{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.selected-note{
  margin-top: 40px;
  text-align: center;
}
.support-audio{
  color: #C85A17;   /* deep orange */
  font-weight: 600;
}
.ebook-selected{
  color: #7A4A2E;   /* warm brown */
  font-weight: 500;
}
/* =========================================
   E-BOOK SUPPORT — clean list panel
========================================= */
.ebook-panel{
  margin-top: 12px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(18,24,38,0.12);
}

.ebook-batch{
  margin: 0 0 10px;
  text-align: left;
}

.ebook-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.ebook-list li{
  padding: 12px 0;              /* 세로 리듬 정리 */
  border-top: 1px solid rgba(18,24,38,0.10);

  text-indent: 0;               /* 혹시 남아있는 들여쓰기 제거 */
}


.ebook-list li:first-child{
  border-top: 0;
  padding-top: 0;
}

.ebook-title{
  display: block;
  font-weight: 700;
  line-height: 1.35;
}

.ebook-meta{
  display: block;
  margin-top: 8px;        /* ✅ 제목-메타 간격 확보 */
  opacity: 0.82;
  font-size: 0.95rem;
  padding-left: 0;        /* ✅ 왼쪽 튀어나옴 방지 */
}


.ebook-selected.year-2021{
  color: #2F5F5B;
}
/* Honors nav accent (green) */
.nav a[href$="honors.html"]{
  border-bottom: 3px solid var(--accent-green);
}
/* ===== Honors menu highlight (green) ===== */
.nav a[href$="honors.html"]{
  color: #2DBE7A;
  border-color: rgba(45,190,122,0.45);
}

.nav a[href$="honors.html"] .ico{
  background: rgba(18,24,38,0.65);
  box-shadow:
    0 0 0 4px rgba(45,190,122,0.22),
    0 0 0 7px rgba(210,200,255,0.10);
}
/* Honors page: emphasize covers without breaking layout */
.honors-page .book-cover.selected-cover {
  transform: scale(1.15);
  transform-origin: center;
}
.honors-page .book-card.selected-book {
  overflow: hidden;
}
.book-meta .meta-sub{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,0.2);
  font-size: 0.9em;
  opacity: 0.85;
}
/* E-book archive header divider */
#ebooks-records .books-korhint {
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(122, 74, 46, 0.45);
}
.press-item.interview{
  background: rgba(122, 74, 46, 0.06);
  border-left: 4px solid rgba(122, 74, 46, 0.45);
}

.press-tag{
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: rgba(122, 74, 46, 0.9);
  margin-bottom: 6px;
}
.card.notice{
  border-top: 3px solid rgba(217, 125, 42, 0.8); /* 세피아 오렌지 */
}
.card.notice h2{
  font-size: 1.05rem;
}
.card.notice p{
  color: rgba(18,24,38,0.75);
}
/* =========================================================
   PRESS STRIP BANNER (2 essays) — Mediterranean Blue
   HTML:
   <section class="press-strip">
     <a class="press-strip__slot">...</a>
     <span class="press-strip__divider"></span>
     <a class="press-strip__slot">...</a>
   </section>
========================================================= */

.press-strip{
  position: relative;
  max-width: 860px;
  margin: 22px auto 22px;
  padding-left: 56px;
  padding-right: 16px;

  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
  gap: 0;

  border-radius: 18px;
  overflow: hidden;

  background: linear-gradient(
    180deg,
    rgba(30,110,140,0.22),
    rgba(30,110,140,0.14)
  );
  border: 1px solid rgba(30,110,140,0.34);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}

/* 상단 미세 광택 */
.press-strip::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: rgba(255,255,255,0.42);
  opacity: 0.9;
  pointer-events:none;
}

/* 중앙 분할선 */
.press-strip__divider{
  width: 1px;
  background: rgba(24,34,44,0.22);
  align-self: stretch;
}

/* 좌/우 슬롯 */
.press-strip__slot{
  display: grid;
  gap: 6px;

  padding: 16px 18px 14px;
  text-decoration: none;
  color: rgba(24,34,44,0.96);

  background: rgba(255,255,255,0.18);
}

.press-strip__slot:hover{
  background: rgba(255,255,255,0.28);
}

/* 텍스트 */
.press-strip__paper{
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(24,34,44,0.72);
}

.press-strip__title{
  margin: 0;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: rgba(24,34,44,0.96);
}

.press-strip__meta{
  font-size: 11.5px;
  color: rgba(24,34,44,0.60);
}


/* 모바일에서도 press-strip 2분할 유지 */
@media (max-width: 720px){
  .press-strip{
    padding-left: 16px;
    padding-right: 16px;
    grid-template-columns: 1fr auto 1fr;
  }

  .press-strip__divider{
    width: 1px;
    height: auto;
    background: rgba(24,34,44,0.22);
  }

  .press-strip__slot{
    padding: 16px 16px 14px;
  }
}

.archive-intro{
  margin-bottom: 32px;
}

.archive-intro{
  margin-top: 48px;
}

.press-note{
  margin-left: .4rem;
  font-weight: 600;
  color: #c26a2e; /* 톤 다운된 오렌지/브라운 */
  font-size: 0.9em;
}
/* =========================================================
   ABOUT — v4 (centered manifesto, editorial clean)
   requires: <body class="about-page"> and <main class="container about">
========================================================= */

:root{
  --brand-brown: #7A4A2E; /* 고동 브라운 포인트 */
}

/* 레이아웃 */
.about-page .container.about{
  max-width: 980px;
  margin: 0 auto;
  padding: 36px 16px 64px;
}

/* 카드: 장식 제거, 지면감만 */
.about-page .container.about .about-card{
  max-width: 860px;
  margin: 0 auto;

  /* 중앙 정렬 핵심 */
  min-height: 340px;                 /* "정중앙" 느낌 확보(필요시 조절) */
  display: flex;
  flex-direction: column;
  justify-content: center;           /* 세로 중앙 */
  align-items: center;               /* 가로 중앙 */
  text-align: center;

  padding: 40px 44px;
  border-radius: 12px;

  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(18,24,38,0.12);
  box-shadow: 0 16px 42px rgba(2,10,20,0.10);

  overflow: hidden;
}

/* 혹시 기존 장식이 남아있으면 강제로 제거 */
.about-page .container.about .about-card::before,
.about-page .container.about .about-card::after{
  content: none !important;
}

/* 헤더: 위계 정리 */
.about-page .about-head{
  width: 100%;
  max-width: 560px; /* 중앙에서 과도한 폭 방지 */
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
}

.about-page .about-kicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(18,24,38,0.56);
}

.about-page .about-title{
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: rgba(18,24,38,0.92);
}

/* 규칙선: 깔끔한 지면 장치 */
.about-page .about-rule{
  width: 56px;
  height: 1px;
  background: rgba(18,24,38,0.16);
  margin: 16px auto 22px;
}

/* 본문: 폭 제한 + 리듬 */
.about-page .about-body{
  width: 100%;
  max-width: 560px;  /* 중앙 선언문 느낌(중요) */
  display: grid;
  gap: 18px;
}

.about-page .about-paragraph{
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
}

/* 한글 선언부: 브라운 포인트 */
.about-page .about-paragraph--ko{
  color: var(--brand-brown);
}

/* 강조 문장: 더 진한 브라운으로 결론 무게 */
.about-page .about-paragraph--ko strong{
  color: rgba(62,36,20,0.98);
  font-weight: 800;
}

/* 영어는 톤 다운 (보조 레이어) */
.about-page .about-paragraph--en{
  color: rgba(18,24,38,0.72);
}

/* 리드(첫 줄) — pill/칩 금지, “글자”로만 정리 */
.about-page .about-lead{
  display: inline-block;
  margin-bottom: 8px;

  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 650;

  /* 한글/영문 모두 기본은 중립색 */
  color: rgba(18,24,38,0.62);
  padding: 0;
  border: 0;
  background: transparent;
}

/* KR 리드만 브라운 쪽으로 살짝 당기기(과하지 않게) */
.about-page .about-paragraph--ko .about-lead{
  color: rgba(122,74,46,0.78);
}

/* (선택) footer가 HTML에 남아있어도 ‘장식’ 안 보이게 최소화 */
.about-page .about-foot{
  display: none;
}

/* (선택) ribbon이 HTML에 남아있어도 안 보이게 처리 */
.about-page .about-ribbon{
  display: none;
}

/* 모바일 */
@media (max-width: 720px){
  .about-page .container.about{
    padding: 20px 14px 54px;
  }

  .about-page .container.about .about-card{
    min-height: 300px;
    padding: 28px 18px;
    border-radius: 12px;
  }

  .about-page .about-title{
    font-size: 20px;
  }

  .about-page .about-body{
    max-width: 520px;
  }
}

.milestone-subtitle.publications {
  margin-top: 1.2rem;
  margin-left: 0.2rem;

  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;

  color: rgba(122, 74, 46, 0.75); /* 브론즈 계열 */
  text-transform: uppercase;
}

.milestone-subtitle.publications::before {
  content: "— ";
  opacity: 0.5;
}

/* Honors: book-card without cover (fix narrow right column) */
.book-card.no-cover{
  display: grid;
  grid-template-columns: 1fr !important; /* cover 칸 제거 */
  column-gap: 0 !important;
}

.book-card.no-cover .book-body{
  grid-column: 1 / -1 !important; /* 본문을 1열로 */
  width: 100%;
  max-width: 100%;
  padding-left: 0 !important; /* cover 자리 보정 제거 */
  min-width: 0;               /* 긴 텍스트 줄바꿈 안정 */
}

.book-card.no-cover .milestone-publications li{
  word-break: keep-all;   /* 한국어 단어 단위 유지 */
  overflow-wrap: anywhere; /* 아주 긴 문자열만 예외적으로 끊기 */
}


/* History Prelude card (workspace era map) — FINAL COLOR TUNED */
.milestone-item.milestone-prologue{
  background: #fff;
  border: 2px solid #c96a2d; /* 밝은 오렌지 브라운 */
}

.milestone-item.milestone-prologue .milestone-year,
.milestone-item.milestone-prologue .milestone-tag{
  color: #c96a2d;
}


/* History – milestone year tone down (override safe) */
.milestone-meta .milestone-year{
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

/* Prelude era line: highlight place names only */
.milestone-era-line .era-place{
  color: #c96a2d;
  font-weight: 600;
  margin-right: 0.08em; /* 지명–괄호 간격 축소 */
}

.milestone-era-line .era-period{
  color: rgba(18,24,38,0.60);
  font-size: 0.85em;
  margin-left: 0; /* 혹시 남아 있을 기본 여백 제거 */
}


/* desktop: one-line flow */
.milestone-era-line{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

/* mobile: stack each era cleanly */
@media (max-width: 520px){
  .milestone-era-line{
    display: block;
  }

  /* hide arrows on mobile */
  .milestone-era-line .era-arrow{
    display: none;
  }

  /* line break after each period */
  .milestone-era-line .era-period::after{
    content: "";
    display: block;
    margin-bottom: 0.35rem;
  }
}

.milestone-era-line .era-pair{
  display: inline-flex;
  align-items: baseline;
  gap: 0; /* pair 내부는 gap 0 */
}

/* Prelude(Workspace eras) 헤더 3줄을 한 덩어리로, 본문(era-line)은 더 아래로 */

.milestone-item.milestone-prologue .milestone-meta{
  margin-bottom: 1px;   /* meta(Prelude/Workspace·Era) ↔ 한글제목 간격 줄이기 */
}

.milestone-item.milestone-prologue .milestone-title{
  margin-top: 0;        /* p 기본 상단 여백 제거(여기가 핵심) */
  margin-bottom: 18px;  /* 한글제목 ↔ 본문(era-line) 간격 늘리기 */
}

/* 혹시 다른 규칙에 의해 붙는 경우 대비(안전장치) */
.milestone-item.milestone-prologue .milestone-note.milestone-era-line{
  margin-top: 0;
}

/* KPIPA / K-BOOK external listing */
.kpipa-external__panel{
  margin-top: 12px;
  padding: 16px;
}

.kpipa-external__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.kpipa-external__shot{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}

.kpipa-external__shot img{
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 720px){
  .kpipa-external__grid{
    grid-template-columns: 1fr;
  }
}

/* === KPIPA Image Zoom === */

.kpipa-zoom {
  position: relative;
  display: block;
}

.zoom-icon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 20px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
}

/* Lightbox */
.kpipa-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.kpipa-lightbox img {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
}


.kpipa-lightbox:target {
  display: flex;
  cursor: zoom-out;
}

.kpipa-note {
  margin-top: 16px;
}

.kpipa-video__panel { margin-top: 8px; }

.kpipa-video__title { margin: 0 0 10px; }
.kpipa-video__desc { margin: 0 0 14px; }

.kpipa-video__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
}

.kpipa-video__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.kpipa-video__link { margin: 12px 0 0; }

/* ==============================
   GLOBAL INFRA SUPPORT (video)
============================== */
.kpipa-video .kpipa-video__panel { margin-top: 10px; }

.kpipa-video .books-h2 { margin-bottom: 10px; }
.kpipa-video .books-korhint { margin: 0 0 16px; }

.kpipa-video__title,
.kpipa-video__desc {
  line-height: 1.65;
}

.kpipa-video__title { margin: 0 0 8px; }
.kpipa-video__desc { margin: 0 0 14px; }

.kpipa-video__embed { margin: 12px 0 12px; }

.kpipa-video__link { margin: 10px 0 0; }

.kpipa-video .selected-note {
  margin-top: 12px;
  line-height: 1.6;
}

/* 제목이 밋밋하면, 아주 얇게 ‘선’만 추가 */
.kpipa-video .books-h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.kpipa-video__sub { margin: -6px 0 14px; opacity: .7; font-size: 0.95em; }

.selected-links { margin-top: 10px; }

/* NAV — Rights & Catalog (purple outline) */
.nav a[href$="rights.html"]{
  border-color: rgba(107, 92, 255, 0.45);
}

.nav a[href$="rights.html"]:hover{
  border-color: rgba(107, 92, 255, 0.65);
}

.nav a[href$="rights.html"] .ico{
  box-shadow:
    0 0 0 4px rgba(107, 92, 255, 0.22),
    0 0 0 7px rgba(210,200,255,0.10);
}

/* NAV — Rights & Catalog (purple outline + text) */
.nav a[href$="rights.html"]{
  color: #6b5cff;
  border-color: rgba(107, 92, 255, 0.45);
}

.nav a[href$="rights.html"]:hover{
  color: #6b5cff;
  border-color: rgba(107, 92, 255, 0.65);
}

.nav a[href$="rights.html"] .ico{
  background: rgba(18,24,38,0.65);
  box-shadow:
    0 0 0 4px rgba(107, 92, 255, 0.22),
    0 0 0 7px rgba(210,200,255,0.10);
}

/* Rights & Catalog — sample action buttons */
.rights-links{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.rights-links .btn-mini{
  display: inline-flex;
  align-items: center;

  padding: 5px 10px;
  border-radius: 999px;

  font-size: 12px;
  line-height: 1;
  text-decoration: none;

  border: 1px solid rgba(18,24,38,0.18);
  background: rgba(255,255,255,0.65);
  box-shadow: var(--shadow-soft);

  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.rights-links .btn-mini:hover{
  background: rgba(255,255,255,0.85);
  border-color: rgba(18,24,38,0.28);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}


.rights-links{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
}
/* =================================================
   BASE
================================================= */

.textbook-page{
  padding-top: 10px;
}

/* =================================================
   TEXTBOOK PAGE — TB (no dots)
   orange + purple borders
================================================= */

/* 전체 쉘 */
.tb-shell{
  width: min(1040px, 92vw);
  margin: 18px auto 86px;
  padding: 30px 30px 26px;

  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(18,24,38,0.14);
  box-shadow: 0 16px 34px rgba(18,24,38,0.10);
}

/* 상단 히어로 */
.tb-hero{
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(18,24,38,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
  margin-bottom: 18px;
}

.tb-kicker{
  margin: 0 0 10px 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.70;
}

.tb-title{
  margin: 0 0 12px 0;
  font-size: 28px;
  line-height: 1.18;
}

.tb-lede{
  margin: 0 0 14px 0;
  font-size: 15px;
  line-height: 1.85;
  opacity: 0.90;
}

/* 메타 칩 */
.tb-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tb-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  letter-spacing: 0.04em;

  border: 1px solid rgba(18,24,38,0.12);
  background: rgba(255,255,255,0.64);
  opacity: 0.92;
}

/* 2열 그리드 */
.tb-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

/* 카드 공통 */
.tb-card{
  border-radius: 16px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,0.62);
  border: 2px solid rgba(18,24,38,0.14);

  box-shadow:
    0 12px 24px rgba(18,24,38,0.08),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.tb-card__head{
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(18,24,38,0.10);
}

/* 왼쪽 카드: 오렌지 */
.tb-grid .tb-card:first-child{
  border-color: rgba(242,140,48,0.72);
}

/* 오른쪽 카드: 보라 */
.tb-grid .tb-card:last-child{
  border-color: rgba(118,82,186,0.72);
}

.tb-h3{
  margin: 0 0 6px 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.80;
}

.tb-sub{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.75;
}

/* 단계 */
.tb-steps{
  margin: 0;
  padding-left: 18px;
}

.tb-step{
  margin: 10px 0;
}

.tb-step__title{
  margin: 0 0 4px 0;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.92;
}

.tb-step__meta{
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  opacity: 0.78;
}

/* 본문 */
.tb-p{
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.9;
  opacity: 0.90;
}
.tb-p:last-of-type{ margin-bottom: 0; }

/* 콜아웃 */
.tb-callout{
  margin-top: 14px;
  padding: 14px 14px;

  border-radius: 16px;
  border: 2px solid rgba(118,82,186,0.55);
  background: rgba(230,222,242,0.55);
}

.tb-callout__k{
  margin: 0 0 8px 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

.tb-callout__t{
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  font-weight: 700;
  color: rgba(44,28,74,0.95);
}

/* 하단 노트 */
.tb-foot{
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.tb-note{
  margin: 0;
  padding: 14px 14px;

  border-radius: 16px;
  border: 1px solid rgba(18,24,38,0.10);
  background: rgba(255,255,255,0.56);

  font-size: 14px;
  line-height: 1.9;
  opacity: 0.90;
}

.tb-note--strong{
  border-width: 2px;
  border-color: rgba(242,140,48,0.55);
  background: rgba(255,255,255,0.62);
  font-weight: 700;
}

/* 모바일 */
@media (max-width: 840px){
  .tb-shell{
    padding: 20px 16px 16px;
  }
  .tb-title{
    font-size: 22px;
  }
  .tb-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =================================================
   TEXTBOOK STRIP BANNER (INDEX) — SINGLE SOURCE
================================================= */

.textbook-strip-link{
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.cinema-box .card.textbook-strip{
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;

  background: #e6def2;
  border: 1px solid rgba(78,54,128,0.18);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.55);

  transition:
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.cinema-box .card.textbook-strip:hover{
  background: #ddd3ee;
  transform: translateY(-1px);
  box-shadow:
    0 14px 26px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.60);
}

.textbook-strip__title{
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(44,28,74,0.94);
}

@media (max-width: 720px){
  .cinema-box .card.textbook-strip{ padding: 13px 14px; }
  .textbook-strip__title{ font-size: 0.88rem; }
}

/* =========================
   NAV — Desktop + Mobile Toggle (compact pills, left-aligned)
========================= */

/* nav shell */
.nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* link base */
.nav a{
  color: var(--text);
  text-decoration: none;
  border: 0;
}

/* =================================================
   MOBILE FIRST (default)
================================================= */

/* toggle button: visible on mobile (NOT full-width bar) */
.nav-toggle{
  display: inline-flex;
  width: auto;                 /* 100% 금지 */
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  border: 1px solid rgba(18,24,38,0.14);
  background: rgba(255,255,255,0.76);
  box-shadow: var(--shadow-soft);

  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.nav-toggle:active{ transform: translateY(1px); }

/* hamburger icon */
.nav-toggle__icon{
  width: 18px;
  height: 12px;
  position: relative;
  display: inline-block;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.nav-toggle__icon::before{ top: 0; }
.nav-toggle__icon::after{ bottom: 0; }
.nav-toggle__icon{
  background: linear-gradient(currentColor, currentColor)
    center / 100% 2px no-repeat;
}

/* links wrapper: mobile default = hidden (compact wrap layout) */
.nav-links{
  display: none;
  width: auto;                 /* 100% 금지 */
  margin-top: 10px;

  flex-direction: row;         /* column 금지 */
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start; /* 모바일 왼쪽 정렬 */
  gap: 10px;
}

/* opened state */
.nav-links.is-open{
  display: flex;
}

/* mobile buttons: keep compact pills */
.nav-links a.btn-space{
  width: auto;                 /* 100% 금지 */
  justify-content: center;
  padding: 9px 12px;
}

/* =================================================
   MOBILE TUNING (compact)
================================================= */
@media (max-width: 760px){

  /* Menu 버튼도 살짝 슬림 */
  .nav-toggle{
    padding: 8px 12px;
  }

  /* 메뉴 링크들 더 촘촘하게 */
  .nav-links{
    gap: 8px;
    margin-top: 8px;
  }

  /* 캡슐 두께/글자 줄이기 */
  .nav-links a.btn-space{
    padding: 7px 10px;
    font-size: 14px;
    gap: 8px;
  }

  /* 아이콘(●) 체급 살짝 다운 */
  .nav-links a.btn-space .ico{
    transform: scale(0.9);
  }
}

@media (min-width: 1025px){

  /* 데스크톱: 메뉴를 기존처럼 '자연스럽게' (오른쪽 고정 금지) */
  .nav{
    justify-content: flex-start; /* ← 핵심: 오른쪽으로 밀지 않음 */
  }

  .nav-toggle{
    display: none;
  }

  .nav-links{
    display: flex;
    width: auto;
    margin-top: 0;

    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start; /* ← 핵심: flex-end 제거 */
    gap: 10px;
  }

  .nav-links a.btn-space{
    width: auto;
    padding: 9px 12px;
    font-size: inherit;
  }
}

/* =========================
   NAV — Mobile force override (FINAL)
========================= */
@media (max-width: 760px){
  .nav-toggle{
    width: auto !important;
    padding: 8px 12px !important;
  }

  .nav-links{
    display: none;
    width: auto !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .nav-links.is-open{
    display: flex !important;
  }

  .nav-links a.btn-space{
    width: auto !important;
    padding: 7px 10px !important;
    font-size: 14px !important;
    gap: 8px !important;
  }

  .nav-links a.btn-space .ico{
    transform: scale(0.9) !important;
  }
}

@media (max-width: 760px){
  .nav{
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .nav-links{
    margin-top: 8px !important;
  }
}

/* =========================
   AUDIOBOOK GALLERY
========================= */

/* grid */
.ab-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 14px;
}

/* card */
.ab-card{
  display: flex;
  gap: 18px;
  align-items: flex-start;

  padding: 18px;
}

/* cover */
.ab-cover{
  flex: 0 0 140px;
}

.ab-cover img{
  width: 100%;
  height: auto;
  display: block;

  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

/* body */
.ab-body{
  flex: 1;
}

.ab-title{
  margin: 0 0 6px;
  font-size: 1.05rem;
  line-height: 1.35;
}

.ab-author,
.ab-narrator{
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* actions */
.ab-actions{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ab-actions .btn-space{
  padding: 7px 12px;
  font-size: 0.9rem;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 640px){
  .ab-card{
    flex-direction: column;
    align-items: stretch;
  }

  .ab-cover{
    width: 100%;
    max-width: 220px;
  }
}

/* =========================
   AUDIOBOOK — Headset motif
========================= */
.ab-headset{
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
}

.ab-headset-svg{
  width: 84px;
  height: auto;
  display: block;
}

/* IMPORTANT: make paths visible */
.ab-headset-svg path{
  stroke: var(--orange, #f26a2e);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* dotted/dashed motif */
  stroke-dasharray: 9 8;

  fill: none;
}

/* Audiobook intro copy — tighter */
.ab-guide{
  line-height: 1.45;
  margin-top: 8px;
  max-width: 72ch;
}

.ab-headset{
  margin-left: 10px;
  transform: translateY(2px);
}

.translation-note{
  margin-top: 18px;   /* ← 이게 ‘한 줄 띄움’ 역할 */
  font-size: 12px;
  line-height: 1.4;
}

.rights-meta-panel{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.55);
  border: 1px dashed rgba(18,24,38,0.12);
}

.rights-meta > summary {
  margin-bottom: 0.8em;
}

.author-name {
  margin-top: 22px;
  margin-bottom: 6px;
}

.author-name strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.author-name .author-role {
  display: block;
  font-size: 12px;
  opacity: 0.7;
}

.press-item.interview{
  background: rgba(240,236,248,0.92);
}

/* Press — Award highlight (most important record) */
.press-item:first-of-type{
  border-left: 4px solid #2f6f55;
}

/* =========================================================
   Editor Footer — Signature & Nav (global, stable)
   - Scope: .editor-footer only
   - Page-agnostic (editor-note / vision-note / others)
   - Fix: unify button tone (lilac) + avoid mint blend + no white hover flash
========================================================= */

.editor-footer{
  margin-top: 56px;
  padding-bottom: 48px;
}

.editor-footer .note-sign{
  display: block;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding-top: 18px;
  text-align: center;

  border-top: 1px solid rgba(118, 90, 155, 0.32);

  font-size: 13px;
  letter-spacing: .02em;
  opacity: .92;
}

.editor-footer .note-sign::before,
.editor-footer .note-sign::after{
  content: none !important;
  display: none !important;
}

.editor-footer .note-nav{
  width: 100%;
  max-width: 860px;
  margin: 14px auto 0;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;

  font-size: 13px;
  letter-spacing: .02em;
  opacity: .95;
}

/* =========================================================
   Editor Footer — Button (Light Violet Paper Tone)
   - Mint background safe
   - Desktop hover friendly
========================================================= */

.editor-footer .note-nav a{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;

  border: 1px solid rgba(118, 90, 155, 0.34);
  border-radius: 999px;
  text-decoration: none;

  /* 기본 상태: 옅은 보라 종이 톤 (민트에 안 섞임) */
  background: linear-gradient(
    180deg,
    rgba(246, 242, 252, 0.92),
    rgba(238, 226, 252, 0.88)
  );

  color: rgba(18, 24, 38, 0.92);
  opacity: 1;
}

.editor-footer .note-nav a:hover{
  /* hover: 같은 계열에서 한 단계만 진하게 */
  background: linear-gradient(
    180deg,
    rgba(238, 226, 252, 0.96),
    rgba(230, 214, 248, 0.90)
  );

  border-color: rgba(118, 90, 155, 0.38);
}

/* 모바일 탭 반응용 (hover 대체) */
.editor-footer .note-nav a:active{
  background: linear-gradient(
    180deg,
    rgba(238, 226, 252, 0.96),
    rgba(230, 214, 248, 0.90)
  );

  border-color: rgba(118, 90, 155, 0.42);
}