/* =====================================================================
   ioi-iooi · 첫 화면 전용 (home.css)
   공통 색·글꼴은 site.css 에 있어요. 이 파일은
   (A) 동화책 헤더   (B) 섹션별 모양 (01~06)  만 담고 있어요.
   ===================================================================== */

/* (A-0) 동화책 헤더가 쓰는 옛 값들 — 동화책만 사용 */
/* =========================================================
   DESIGN TOKENS  — 모든 값은 여기서만 바꾸세요
   ========================================================= */
:root{
  /* 글꼴: 위(동화책)=손글씨 / 아래(정보)=깔끔 */

  /* 글자 크기 */
  --s-display:clamp(2.75rem,6vw,5.5rem);
  --s-h1:clamp(2rem,4vw,3.25rem);
  --s-h2:clamp(1.4rem,2.4vw,1.75rem);
  --s-h3:1.25rem;
  --s-body:1.0625rem;
  --s-small:.875rem;
  --s-hand:1.5rem;
  --s-story:clamp(1.9rem,3.6vw,2.6rem);
  --lh-body:1.7;

  /* 간격 */
  --sp-4:4px;--sp-8:8px;--sp-16:16px;--sp-24:24px;--sp-40:40px;--sp-64:64px;--sp-96:96px;--sp-160:160px;

  /* 모서리 (손그림 느낌 포함) */
  --r-sm:8px;--r-md:16px;--r-lg:28px;--r-pill:999px;
  --r-wobble:255px 15px 225px 15px/15px 225px 15px 255px;
  --r-wobble-lg:245px 22px 260px 18px/18px 255px 20px 250px;
  --r-blob:54% 46% 51% 49%/48% 52% 48% 52%;

  /* 선 · 그림자 (검은 굵은 그림자 대신 옅고 말랑하게) */
  --bw:2px;
  /* 선·그림자는 블록 색(--ink)을 따라가야 해서 아래 [class*="theme-"]에 정의 */

  /* 모션 */
  --t-fast:160ms;--t-base:320ms;--t-slow:700ms;
  --e-soft:cubic-bezier(.22,1,.36,1);
  --e-clay:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 블록별 팔레트 (블록마다 다른 느낌) ---------- */
.theme-butter{--bg:#FBF6EC;--surface:#F3EADB;--paper:#FFFDF8;--ink:#3B3530;--muted:#776E66;--accent:#E8B94A;--accent-2:#D9826B;--on-accent:#3B3530;}
.theme-sage  {--bg:#EEF1E6;--surface:#E1E8D6;--paper:#FAFBF6;--ink:#2F3A33;--muted:#5F6B61;--accent:#8FAF8A;--accent-2:#E3BE5C;--on-accent:#2F3A33;}
.theme-dusk  {--bg:#F4EEE6;--surface:#E6DCCF;--paper:#FCF9F5;--ink:#2E2A33;--muted:#6E6670;--accent:#7C8DB5;--accent-2:#E8B94A;--on-accent:#2E2A33;}
.theme-night {--bg:#2E2A33;--surface:#3A3540;--paper:#433D4A;--ink:#F4EEE6;--muted:#BDB4C0;--accent:#E8B94A;--accent-2:#9AA8CC;--on-accent:#2E2A33;}
.theme-sun   {--bg:#E8B94A;--surface:#F1D07F;--paper:#FBF6EC;--ink:#3B3530;--muted:#5C5048;--accent:#3B3530;--accent-2:#D9826B;--on-accent:#FBF6EC;}
/* 동화책 SVG용 별칭 */
[class*="theme-"]{
  --line:var(--bw) solid var(--ink);
  --shadow-sketch:3px 4px 0 color-mix(in srgb,var(--ink) 16%,transparent);
  --shadow-clay:inset 0 -4px 0 rgba(0,0,0,.08),0 8px 20px color-mix(in srgb,var(--ink) 14%,transparent);
  --shadow-clay-pressed:inset 0 4px 8px rgba(0,0,0,.12),0 2px 4px color-mix(in srgb,var(--ink) 10%,transparent);
  --charcoal:var(--ink);--blonde:var(--accent);--red:var(--accent-2);--oatmeal:var(--surface);--sage-muted:#8FAF8A;}

.doodle-btn{cursor:pointer;user-select:none;transition:transform var(--t-base) var(--e-clay),box-shadow var(--t-base) var(--e-soft)}
.doodle-btn:hover{transform:translateY(-3px) rotate(-1deg)}

/* =========================================================
   HERO — 책장이 넘어가는 그림책 헤더 (StPageFlip)
   ========================================================= */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:80px var(--sp-24) var(--sp-24);
  position:relative;
  overflow:hidden;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);
  background-size:26px 26px;
  box-sizing:border-box;
}

/* 4. 책 주변에 아주 작은 종이 별, 음표, 꽃잎 (10개 이하, 책 뒤쪽 레이어) */
.book-ambient-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.ambient-item{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  opacity:.65;
}
.ambient-p1{top:16%;left:11%;color:var(--accent);font-size:18px;animation:floatParticle1 12s ease-in-out infinite alternate;}
.ambient-p2{top:24%;right:12%;color:var(--muted);font-size:16px;animation:floatParticle2 14s ease-in-out infinite alternate;}
.ambient-p3{top:70%;left:14%;color:#8FAF8A;font-size:18px;animation:floatParticle1 16s ease-in-out infinite alternate;}
.ambient-p4{top:66%;right:15%;color:#D9826B;font-size:17px;animation:floatParticle2 11s ease-in-out infinite alternate;}
.ambient-p5{top:15%;right:26%;color:var(--ink);font-size:15px;opacity:.45;animation:floatParticle1 13s ease-in-out infinite alternate;}
.ambient-p6{top:78%;left:30%;color:#E8B94A;font-size:16px;opacity:.55;animation:floatParticle2 15s ease-in-out infinite alternate;}
.ambient-p7{top:42%;left:8%;color:var(--ink);font-size:14px;opacity:.35;animation:floatParticle1 10s ease-in-out infinite alternate;}
.ambient-p8{top:48%;right:9%;color:#C9473F;font-size:16px;opacity:.55;animation:floatParticle2 17s ease-in-out infinite alternate;}

@keyframes floatParticle1{
  0%{transform:translate(0, 0) rotate(0deg);}
  50%{transform:translate(14px, -18px) rotate(12deg);}
  100%{transform:translate(-10px, 12px) rotate(-10deg);}
}
@keyframes floatParticle2{
  0%{transform:translate(0, 0) rotate(0deg);}
  50%{transform:translate(-16px, 15px) rotate(-14deg);}
  100%{transform:translate(12px, -14px) rotate(8deg);}
}

/* 1 & 2. 책 3D 무대 및 첫 진입 애니메이션 */
.book-stage-outer{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:960px;
}
.book-3d-wrapper{
  position:relative;
  perspective:1400px;
  transform-style:preserve-3d;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.book-3d-inner{
  position:relative;
  transform-style:preserve-3d;
  transform-origin:center center;
  transition:transform .12s ease-out;
  animation:bookFloatRise .9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes bookFloatRise{
  0%{opacity:0;transform:translateY(30px) scale(.97);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

/* 책 아래 부드러운 바닥 그림자 (마우스에 따라 이동) */
.book-floor-shadow{
  position:absolute;
  bottom:-22px;
  left:50%;
  width:88%;
  height:32px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(59,53,48,.26) 0%, rgba(59,53,48,.08) 55%, transparent 75%);
  border-radius:50%;
  pointer-events:none;
  filter:blur(6px);
  z-index:1;
  transition:transform .12s ease-out;
}

/* 책 컨테이너 (#bookFlip) */
#bookFlip{
  position:relative;
  z-index:2;
  margin:0 auto;
  /* 컴퓨터: 펼친 두 쪽 (가로 1.5 : 세로 1). 화면 높이에 맞춰 자동 조절 */
  height:clamp(380px, calc(100vh - 230px), 560px);
  width:calc(clamp(380px, calc(100vh - 230px), 560px) * 1.5);
  max-width:92vw;
  overflow:hidden;                 /* ① 책 영역 밖 페이지 숨김 */
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.stf__wrapper{
  position:relative;
  width:100%!important;
  height:100%!important;
  overflow:hidden;                 /* ① */
}
.stf__block{
  position:relative;
  width:100%!important;
  height:100%!important;
  overflow:hidden;                 /* ① */
}
@media (max-width:768px){
  .hero{
    padding:72px 14px 20px;
  }
  #bookFlip{
    /* 휴대폰(768px 이하): 한 쪽씩 세로 모드 (가로 0.75 : 세로 1) */
    /* 3:4 비율 고정 → 책 옆면이 쪽 크기와 딱 맞음 */
    width:min(76vw, calc(clamp(320px, calc(100vh - 240px), 460px) * 0.75));
    height:auto;
    aspect-ratio:3/4;
    max-width:76vw;
  }
}

/* StPageFlip 각 페이지 */
.book-page{
  position:relative;
  width:100%;
  height:100%;
  background-color:var(--paper);
  overflow:hidden;                 /* ① */
  box-shadow:inset 0 0 30px rgba(59,53,48,.08);
}
/* 책 모서리 둥글게: 바깥쪽 모서리만 (가운데 접히는 쪽은 각지게) */
:root{--book-radius:clamp(12px, 1.8vw, 22px);}
.book-page.--left{border-radius:var(--book-radius) 0 0 var(--book-radius);}
.book-page.--right{border-radius:0 var(--book-radius) var(--book-radius) 0;}
.stf__block.--portrait .book-page,
.--portrait .book-page{border-radius:var(--book-radius);}
/* 휴대폰(한 쪽 모드): 네 모서리 둥글게 + 책 옆면(종이 겹) */
#bookFlip.is-portrait .book-page{border-radius:var(--book-radius)!important}
.book-3d-inner.is-portrait::before{content:'';position:absolute;inset:0;border-radius:var(--book-radius);z-index:0;
  background:#F3EBDD;
  box-shadow:3px 3px 0 #EFE5D3,6px 6px 0 #E4D7C1,9px 9px 0 #D8C9B0,9px 9px 0 1px rgba(59,53,48,.25);
  transform:translate(0,0);pointer-events:none}
/* 책 안 버튼: 한글 손글씨 / 영어 Caveat */
.book-link,.book-back-link{font-family:var(--f-pen)!important;font-size:1.35rem!important;font-weight:400!important}
html[lang="en"] .book-link,html[lang="en"] .book-back-link{font-family:var(--f-hand-en)!important;font-size:1.3rem!important;font-weight:700!important}
.book-page-img{border-radius:inherit;}
.stf__outerShadow,.stf__innerShadow,.stf__hardShadow,.stf__hardInnerShadow{border-radius:var(--book-radius);}

.book-page-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* 표지(cover) */
.book-page--cover{
  background-color:#EFE6D5;
}
.book-cover-header{
  position:absolute;
  top:10%;
  left:4%;
  right:4%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  pointer-events:none;
  z-index:3;
}
.book-cover-title{
  font-family:var(--f-pen);
  font-size:clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight:700;
  color:#3B3530;
  line-height:1.15;
  text-shadow:0 1px 4px rgba(255,255,255,.9);
  margin:0;
}
html[lang="en"] .book-cover-title{
  font-family:var(--f-hand-en);
  font-size:clamp(2.6rem, 4.6vw, 3.8rem);
}
.book-cover-sub{
  font-family:var(--f-pen);
  font-size:clamp(1.25rem, 2vw, 1.6rem);
  font-weight:700;
  color:#4A4138;
  line-height:1.25;
  text-shadow:0 1px 3px rgba(255,255,255,.85);
  margin:0;
}
html[lang="en"] .book-cover-sub{
  font-family:var(--f-hand-en);
  font-size:clamp(1.35rem, 2.2vw, 1.75rem);
}

/* 표지 모서리 들썩임 힌트 */
.cover-corner-hint{
  position:absolute;
  bottom:16px;
  right:16px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  background:rgba(255,253,248,.92);
  border:1.5px dashed color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius:var(--r-wobble);
  font-family:var(--f-pen);
  font-size:1.3rem;
  font-weight:700;
  color:#3B3530;
  box-shadow:0 4px 10px rgba(59,53,48,.12);
  pointer-events:none;
  opacity:0;
  animation:hintFlutter 2.2s ease-in-out infinite;
  animation-delay:1s;
  animation-fill-mode:forwards;
}
html[lang="en"] .cover-corner-hint{
  font-family:var(--f-hand-en);
  font-size:1.35rem;
}
@keyframes hintFlutter{
  0%{opacity:0;transform:translateY(6px);}
  15%{opacity:1;transform:translateY(0);}
  35%{transform:translateY(-6px) rotate(1.5deg);}
  55%{transform:translateY(0) rotate(0deg);}
  100%{opacity:1;transform:translateY(0);}
}

/* 글 쪽 (paper.jpg 배경 — ③) */
.book-page--text{
  background-color:#F5EFE3;
  background-image:url('../images/book/paper.jpg');   /* ③ 원본 jpg */
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.book-text-wrap{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(16px, 4%, 40px) 12%;   /* ② 좌우 12% 여백 */
  box-sizing:border-box;
  overflow:hidden;                       /* ① 쪽 밖 넘침 방지 */
}
.book-sentence{
  font-family:var(--f-pen);
  font-size:clamp(1.4rem, 2.6vw, 2.2rem);   /* ② */
  font-weight:700;
  line-height:1.5;                           /* ② */
  color:#3B3530;
  display:block;                             /* ② inline-flex 제거 → 줄바꿈 정상 */
  width:100%;
  margin-bottom:22px;
  word-break:keep-all;                       /* ② */
  overflow-wrap:break-word;                  /* ② */
  white-space:pre-wrap;                      /* ② 공백·줄바꿈 보존 */
  text-align:center;
}
html[lang="en"] .book-sentence{
  font-family:var(--f-hand-en);
  font-size:clamp(1.4rem, 2.6vw, 2.2rem);
  line-height:1.45;
}
.book-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--f-body);
  font-size:.95rem;
  font-weight:700;
  color:#3B3530;
  text-decoration:none;
  padding:7px 18px;
  border-radius:var(--r-pill);
  border:1.5px solid color-mix(in srgb, #3B3530 35%, transparent);
  background:rgba(255,253,248,.8);
  box-shadow:0 2px 6px rgba(59,53,48,.08);
  opacity:0;
  transform:translateY(6px);
  transition:all var(--t-base) var(--e-clay);
}
.book-link.visible{
  opacity:1;
  transform:translateY(0);
}
.book-link:hover{
  background:#3B3530;
  color:#FBF6EC;
  transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(59,53,48,.18);
}

/* 뒤표지(back) */
.book-page--back{
  background-color:#343038;
}
.book-back-bottom{
  position:absolute;
  bottom:8%;
  left:8%;
  right:8%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  background:rgba(255,253,248,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:18px 20px;
  border-radius:var(--r-wobble);
  border:1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
  box-shadow:0 6px 18px rgba(59,53,48,.16);
}
.book-back-sentence{
  font-family:var(--f-pen);
  font-size:clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight:700;
  line-height:1.35;
  color:#3B3530;
}
html[lang="en"] .book-back-sentence{
  font-family:var(--f-hand-en);
  font-size:clamp(1.5rem, 2.4vw, 2.05rem);
}
.book-back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--f-body);
  font-size:.95rem;
  font-weight:700;
  color:var(--bg);
  background:var(--ink);
  text-decoration:none;
  padding:8px 22px;
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-clay);
  transition:all var(--t-base) var(--e-clay);
  opacity:0;
  transform:translateY(6px);
}
.book-back-link.visible{
  opacity:1;
  transform:translateY(0);
}
.book-back-link:hover{
  transform:translateY(-2px) scale(1.03);
}

/* 5. 넘김 컨트롤: 연필 SVG 화살표 */
.book-arrow-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  background:rgba(255,253,248,.9);
  border:1.5px solid var(--ink);
  border-radius:var(--r-blob);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10;
  box-shadow:var(--shadow-clay);
  transition:transform .25s var(--e-clay), opacity .25s ease, background .2s ease;
}
.book-arrow-btn.prev{left:-68px;}
.book-arrow-btn.next{right:-68px;}
.book-arrow-btn.prev:hover{transform:translateY(-50%) translateX(-6px);background:var(--paper);}
.book-arrow-btn.next:hover{transform:translateY(-50%) translateX(6px);background:var(--paper);}
.book-arrow-btn.disabled{opacity:.2;pointer-events:none;cursor:default;}
.pencil-arrow-svg{width:28px;height:28px;fill:none;}
.pencil-arrow-path{
  stroke:var(--ink);
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:60;
  stroke-dashoffset:0;
}
.book-arrow-btn:hover .pencil-arrow-path{
  animation:pencilRedraw .45s ease forwards;
}
@keyframes pencilRedraw{
  0%{stroke-dashoffset:60;}
  100%{stroke-dashoffset:0;}
}
@media (max-width:860px){
  .book-arrow-btn{width:40px;height:40px;}
  .book-arrow-btn.prev{left:-10px;}
  .book-arrow-btn.next{right:-10px;}
}
@media (max-width:640px){
  .book-thumbs-nav{
    gap:8px;
    margin-top:18px;
    height:46px;
  }
  .book-thumb-item{
    width:24px;
    height:24px;
  }
  .book-thumb-item.active{
    width:38px;
    height:38px;
  }
}

/* 5. 그림 단추 7개 */
.book-thumbs-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:26px;
  height:52px;
  z-index:5;
  position:relative;
}
.book-thumb-item{
  position:relative;
  width:28px;
  height:28px;
  border-radius:50%;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  outline:none;
  transition:width .35s var(--e-clay), height .35s var(--e-clay), transform .35s var(--e-clay);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.book-thumb-item img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 2px 6px rgba(59,53,48,.25);
  pointer-events:none;
  transition:transform .2s ease;
}
.book-thumb-item:hover img{
  transform:scale(1.1);
}
.book-thumb-item.active{
  width:44px;
  height:44px;
  border:2.6px solid #C9473F;
  border-radius:var(--r-blob);
  box-shadow:0 0 0 2px #FBF6EC, 0 6px 14px rgba(201, 71, 63, .35);
  animation:thumbPop .4s var(--e-clay);
}
@keyframes thumbPop{
  0%{transform:scale(.85);}
  50%{transform:scale(1.14);}
  100%{transform:scale(1);}
}

/* 손글씨 말풍선 */
.book-thumb-bubble{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--paper);
  color:#3B3530;
  font-family:var(--f-pen);
  font-size:1.15rem;
  font-weight:700;
  padding:3px 11px;
  border-radius:var(--r-wobble);
  border:1.5px solid #3B3530;
  box-shadow:2px 3px 0 rgba(59,53,48,.12);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s var(--e-clay);
  z-index:20;
}
html[lang="en"] .book-thumb-bubble{
  font-family:var(--f-hand-en);
  font-size:1.25rem;
}
.book-thumb-bubble::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border-width:5px 5px 0 5px;
  border-style:solid;
  border-color:#3B3530 transparent transparent transparent;
}
.book-thumb-item:hover .book-thumb-bubble,
.book-thumb-item:focus-visible .book-thumb-bubble{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* 6. 뒤표지까지 넘기면 나타나는 손글씨 */
.scroll-hint{
  margin-top:14px;
  font-family:var(--f-hand-en);
  font-size:1.6rem;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
  animation:float 2s ease-in-out infinite;
}
.scroll-hint.show{
  opacity:1;
  pointer-events:auto;
}


/* (A-1) 뒤표지: 글 상자를 없애고 그림 위에 글자만 — 달과 골목이 보이도록 */
.book-back-bottom{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important;box-shadow:none!important;
  left:0!important;right:0!important;bottom:0!important;padding:56px 9% 7%!important;border-radius:0!important;gap:8px!important;
  background:linear-gradient(to top,rgba(14,14,28,.78),rgba(14,14,28,.35) 60%,transparent)!important}
.book-back-sentence{color:#F6F0E2!important;font-size:clamp(1.15rem,1.8vw,1.5rem)!important;font-weight:400!important;text-shadow:0 1px 8px rgba(0,0,0,.45)}
html[lang="en"] .book-back-sentence{font-size:clamp(1.2rem,1.9vw,1.6rem)!important;font-weight:700!important}
.book-back-link{background:none!important;box-shadow:none!important;color:#F2D27A!important;padding:2px 0!important;border-radius:0!important;
  border-bottom:1.5px solid rgba(242,210,122,.6)!important}


/* =====================================================================
   (B) 섹션 — 동화책의 장(章)과 같은 이름
   01 붕어빵(보통의 하루) · 02 개울가(플레이리스트) · 03 한글(한국어)
   04 툇마루(Isabella) · 05 호이안(기록) · 06 소원달(인사)
   ===================================================================== */
.chapter .head{margin-bottom:var(--pad-6)}

/* 01 보통의 하루 — 세로 카드 6장, 가운데 줄은 살짝 아래로 (잡지처럼) */
.od-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px)}
.od-card{display:block;text-decoration:none;color:var(--ink)}
@media (min-width:760px){.od-card:nth-child(3n+2){margin-top:72px}}
.od-img{position:relative;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow-soft);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base)}
.od-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease-out)}
.od-img .num{position:absolute;left:12px;top:12px;font-size:var(--fs-tiny);font-weight:700;color:#fff;mix-blend-mode:difference}
.od-card:hover .od-img{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow-lift)}
.od-card:hover .od-img img{transform:scale(1.08)}
.od-card time{display:block;margin-top:14px;font-size:var(--fs-tiny);color:var(--muted)}
.od-card h3{font-size:.95rem;font-weight:500;line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:759px){.od-grid{grid-template-columns:repeat(2,1fr)}.od-card:nth-child(2n){margin-top:40px}}
.foot-link{margin-top:var(--pad-6)}

/* 02 플레이리스트 — 앨범 재킷에서 레코드가 빠져나오며 돌아감 */
.pl-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:var(--pad-4)}
.pl-arrows{display:flex;gap:10px}
.circle-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink);
  transition:transform var(--t-base) var(--ease-spring),opacity var(--t-fast)}
.circle-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.circle-btn:hover:not(:disabled){transform:scale(1.08)}
.circle-btn:disabled{opacity:.25;cursor:default}
.lp-row{display:flex;gap:clamp(90px,9vw,140px);overflow-x:auto;padding:12px 140px 40px 4px;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.lp-row::-webkit-scrollbar{display:none}
.lp-row.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.lp{flex:0 0 clamp(200px,22vw,260px);scroll-snap-align:start;text-decoration:none;color:var(--ink)}
.lp-art{position:relative;aspect-ratio:1}
.lp-jacket{position:absolute;inset:0;z-index:2;border-radius:4px;overflow:hidden;background:var(--paper-2);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 24px 40px -20px rgba(0,0,0,.7);transition:transform var(--t-base) var(--ease-out)}
.lp-jacket img{width:100%;height:100%;object-fit:cover}
.lp-jacket::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 35%),linear-gradient(to top,rgba(0,0,0,.45),transparent 45%)}
.lp-jacket span{position:absolute;left:14px;bottom:10px;z-index:2;color:#fff;font-size:1.35rem;line-height:1}
html[lang="ko"] .lp-jacket span{font-family:var(--f-hand-en);font-weight:700}
/* 레코드판: 결(홈) + 가운데 라벨 */
.lp-disc{position:absolute;top:4%;left:4%;width:92%;height:92%;z-index:1;border-radius:50%;
  background:radial-gradient(circle,transparent 30%,rgba(255,255,255,.05) 31%,transparent 33%),repeating-radial-gradient(circle,#161616 0 1.5px,#262626 1.5px 3px);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 14px 30px -12px rgba(0,0,0,.9);
  translate:0 0;transition:translate 1.1s var(--ease-out)}
.lp-disc::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 20%,rgba(255,255,255,.10) 25%,transparent 32% 70%,rgba(255,255,255,.07) 75%,transparent 82%)}
.lp-disc i{position:absolute;inset:34%;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 6px rgba(0,0,0,.12)}
.lp-disc i::after{content:'';position:absolute;inset:44%;border-radius:50%;background:#141414}
/* 등장: 재킷이 들어오고 → 레코드가 반쯤 나오며 천천히 회전 */
.lp.in .lp-disc{translate:46% 0;animation:spin 6s linear infinite;animation-delay:calc(1s + var(--i,0) * 90ms)}
.lp:hover .lp-disc{translate:64% 0;animation-duration:1.8s}
.lp:hover .lp-jacket{transform:translateX(-6%) rotate(-2deg)}
@keyframes spin{from{rotate:0deg}to{rotate:360deg}}
.lp time{display:block;margin-top:16px;font-size:var(--fs-tiny);color:var(--muted)}
.lp h3{font-size:.92rem;font-weight:500;line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 03 한국어 — 상자 없이 큰 글자 한 장 */
.ko-stage{text-align:center;position:relative}
.ko-word{font-family:var(--f-hand-ko);font-size:clamp(6rem,17vw,13rem);line-height:.9;color:var(--ink)}
.ko-word span{display:inline-block;opacity:0;transform:translateY(30px) rotate(-6deg);transition:opacity .6s var(--ease-out),transform .8s var(--ease-spring);transition-delay:calc(var(--i) * 140ms + .2s)}
.ko-stage.in .ko-word span{opacity:1;transform:none}
.ko-under{display:block;width:min(420px,70%);height:22px;margin:6px auto 0;color:var(--accent)}
.ko-under path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 1.4s var(--ease-out) .9s}
.ko-stage.in .ko-under path{stroke-dashoffset:0}
.ko-roman{font-size:var(--fs-tiny);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:var(--pad-3)}
.ko-meaning{font-size:1rem;margin-top:var(--pad-3)}
.ko-latest{display:inline-flex;gap:20px;align-items:center;text-decoration:none;text-align:left;color:var(--ink)}
.ko-latest img{width:120px;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--shadow-soft)}
.ko-latest h3{font-size:1.05rem;font-weight:500}
.ko-stage .foot-link{margin-top:var(--pad-5)}

/* 04 Isabella / 목소리 — 왼쪽 제목 고정, 오른쪽 카드 */
.porch{display:grid;gap:var(--pad-6)}
@media (min-width:960px){.porch{grid-template-columns:4fr 7fr;align-items:start}.porch .head{position:sticky;top:120px}}
.persona-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (min-width:640px){.persona-grid{grid-template-columns:repeat(3,1fr)}}
.flip{aspect-ratio:3/4;perspective:1000px;cursor:pointer}
.flip-in{position:relative;width:100%;height:100%;transition:transform 700ms var(--ease-out);transform-style:preserve-3d}
.flip.flipped .flip-in{transform:rotateY(180deg)}
.flip-f,.flip-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 14px}
.flip-f{background:var(--card);border:1px solid var(--line)}
.flip:hover .flip-f{border-color:var(--accent)}
.flip-b{background:var(--accent);color:#2B2622;transform:rotateY(180deg)}
.avatar{width:84px;height:84px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;overflow:hidden;margin-bottom:14px;
  font-family:var(--f-hand-en);font-size:2.2rem;font-weight:700;color:var(--accent)}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:top}
.p-name{font-size:1.02rem;font-weight:600}
.p-role{font-family:var(--f-hand-en);font-size:1.25rem;font-weight:700;color:var(--accent);margin-top:2px}
.flip-b .p-name{color:#2B2622}
.p-desc{font-size:.85rem;line-height:1.6;margin-top:8px}

/* 05 기록 — 줄이 그어지며 나타나는 목록 */
.log-list{list-style:none;border-top:1px solid var(--line)}
.log-list li{border-bottom:1px solid var(--line)}
.log-list a{display:grid;grid-template-columns:110px 90px 1fr 40px;align-items:center;gap:16px;padding:22px 4px;text-decoration:none;color:var(--ink);
  transition:padding var(--t-base) var(--ease-out),background var(--t-base)}
.log-list a:hover{padding-left:18px;background:color-mix(in srgb,var(--card) 55%,transparent)}
.log-list time{font-size:var(--fs-tiny);color:var(--muted)}
.log-cat{font-size:1.3rem;color:var(--accent);line-height:1}
.log-title{font-size:1.05rem;font-weight:500}
.log-list svg{width:34px;height:14px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base) var(--ease-spring)}
.log-list a:hover svg{transform:translateX(6px)}
@media (max-width:640px){.log-list a{grid-template-columns:auto 1fr;row-gap:4px}.log-title{grid-column:1/-1}.log-list svg{display:none}}

/* 06 인사 — 밤하늘, 별이 반짝 */
.moon-stage{text-align:center;position:relative}
.hello-title{font-size:clamp(3.6rem,10vw,8.4rem);line-height:.95}
html[lang="ko"] .hello-title{font-size:clamp(4rem,11vw,9.6rem)}
.hello-title em{font-style:normal;color:var(--accent)}
.moon-stage p{max-width:440px;margin:var(--pad-4) auto var(--pad-5);color:var(--muted);font-size:var(--fs-small)}
.stars{position:absolute;inset:0;pointer-events:none;z-index:0}
.stars b{position:absolute;width:3px;height:3px;border-radius:50%;background:#F6F0E2;opacity:.2;animation:twinkle 3.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes twinkle{50%{opacity:.9;transform:scale(1.6)}}
.ch-moon .site-foot,.site-foot.ch-moon{border-top-color:var(--line)}

/* 동화책 옆에 떠다니는 작은 그림 (따뜻한 색) */
.ambient-svg svg{width:100%;height:100%}
.ambient-s1{width:26px;height:26px;top:30%;left:20%;color:#B8612E;animation:floatParticle2 13s ease-in-out infinite alternate}   /* 커피 */
.ambient-s2{width:20px;height:20px;top:58%;right:20%;color:#E39A95;animation:floatParticle1 11s ease-in-out infinite alternate}  /* 벚꽃 */
.ambient-s3{width:22px;height:22px;top:12%;left:30%;color:#E0A93E;animation:floatParticle1 15s ease-in-out infinite alternate}  /* 초승달 */
.ambient-s4{width:20px;height:20px;top:84%;right:30%;color:#8A6E5A;animation:floatParticle2 12s ease-in-out infinite alternate}  /* 음표 */
.ambient-s5{width:20px;height:20px;top:38%;right:21%;color:#8FAF8A;animation:floatParticle1 14s ease-in-out infinite alternate}  /* 잎 */
.ambient-s6{width:16px;height:16px;top:88%;left:22%;color:#EBB3AE;animation:floatParticle2 16s ease-in-out infinite alternate}  /* 벚꽃 작은 */
.ambient-s7{width:16px;height:16px;top:20%;right:34%;color:#E9B44C;animation:floatParticle1 10s ease-in-out infinite alternate}  /* 별 */
@media (max-width:760px){.ambient-s1,.ambient-s5,.ambient-s7{display:none}}

/* 한글 섹션의 큰 글자 그림 */
.picto-text{font-size:clamp(5rem,12vw,10rem);line-height:1;width:auto;opacity:.16;color:var(--accent);white-space:nowrap}
html[lang="en"] .picto-text{font-family:var(--f-hand-ko);font-weight:400}
.lead.sub{margin-top:var(--pad-2);font-size:var(--fs-tiny);letter-spacing:.02em}

/* 목소리 카드 — 클레이 그림이 있으면 카드 전체가 그림 (images/voices/이름.webp, 3:4)
   그림이 없으면 지금처럼 머리글자 동그라미로 보여요 */
.flip-f{overflow:hidden}
.card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.flip:hover .card-art{transform:scale(1.05)}
.flip-f:has(.card-art){justify-content:flex-end;padding:0 16px 18px;border:0}
.flip-f:has(.card-art)::after{content:'';position:absolute;inset:45% 0 0 0;background:linear-gradient(to top,rgba(20,16,14,.78),transparent)}
.flip-f:has(.card-art) .avatar{display:none}
.flip-f:has(.card-art) .p-name,.flip-f:has(.card-art) .p-role{position:relative;z-index:2}
.flip-f:has(.card-art) .p-name{color:#fff}
@media (min-width:960px){.persona-grid{grid-template-columns:repeat(4,1fr)}}
.porch{grid-template-columns:1fr!important}
.porch .head{position:static!important}

/* 동화책 안 링크: 알약 버튼 대신 손글씨 + 그어지는 밑줄 */
.book-link,.book-back-link{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:2px 2px 6px!important;
  font-size:1.6rem!important;position:relative}
.book-link{color:#2B2622!important}
.book-link::after,.book-back-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#3352D6;transform:scaleX(.35);transform-origin:left;transition:transform .45s var(--ease-out)}
.book-link:hover::after,.book-back-link:hover::after{transform:scaleX(1)}
.book-link:hover,.book-back-link:hover{transform:none!important}
.book-back-link{border-bottom:0!important}
.book-back-link::after{background:#F2D27A}

/* 카드 뒷면: 진한 포인트색 바탕 + 밝은 글자 */
.flip-b{background:var(--accent)!important;color:#FFF8EC!important}
.flip-b .p-name{color:#FFF8EC!important;font-family:var(--f-hand-en);font-size:1.6rem;font-weight:700}
.flip-b .p-desc{color:rgba(255,248,236,.92)}