/* A printed album page keeps the action and its caption together at any text size. */
.growth-story-page, .growth-hero {
  min-width: 0;
  background: #fffcf5;
  color: #243c36;
  border: 1px solid #d6cdb8;
  border-radius: 20px;
  overflow: hidden;
}
.growth-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  box-shadow: 0 4px 0 #d6cdb8;
}
.growth-hero-copy { padding: clamp(12px, 2vw, 24px); }
.growth-hero-copy h2 { margin: 5px 0; font-size: 1.32rem; }
.growth-hero-copy p { margin: 0 0 12px; }
.growth-hero-copy small { display:block; color:#455b50; line-height:1.45; }
.growth-hero-copy progress { display:block; margin:5px 0; width:100%; }
.growth-hero-art svg, .growth-picture svg { display:block; width:100%; height:auto; }
.growth-hero-art { min-width:0; }
.growth-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:18px; }
.growth-story-page { padding:clamp(14px,2vw,24px); margin:0; }
.growth-story-page[aria-label="저장된 오늘의 장면"] { max-width:760px; margin:1rem auto; }
.growth-page-info { font-size:.84rem; color:#536254; }
.growth-story-page h2,.growth-story-page h3 { margin:.2em 0 .55em; }
.growth-figure { margin:0; }
.growth-picture { border-radius:12px; overflow:hidden; }
.growth-figure figcaption { margin:.5em 0; line-height:1.55; }
.growth-filters,.growth-actions { display:flex; flex-wrap:wrap; gap:8px; margin:.65rem 0; align-items:center; }
.growth-filters [aria-pressed="true"],.growth-actions [aria-pressed="true"] { background:#e4efe9; border-color:#28725a; color:#174a37; }
.growth-story-page details { margin:.5em 0; }
.learning-moment .growth-figure { display:grid; grid-template-columns:minmax(80px,132px) minmax(0,1fr); align-items:center; gap:12px; }
.learning-moment { margin:0 0 12px; }
@media (min-width:961px) {
 .r4-today-hero .growth-hero { grid-template-columns:1fr; }
 .r4-today-hero .growth-hero-art { width:min(100%,360px); margin:auto; }
}
@media (max-width:600px) {
 .growth-hero { grid-template-columns:minmax(0, .92fr) minmax(0,1.08fr); }
 .growth-hero-copy { padding:12px; }
 .growth-hero-copy h2 { font-size:1.1rem; }
 .growth-hero-copy p { font-size:.88rem; line-height:1.45; }
}
html[data-size="2"] .growth-hero { grid-template-columns:1fr; }
html[data-size="2"] .growth-hero-art { width:min(100%,320px); margin:auto; }
.scene-motion-control[hidden] { display:none; }
.learning-moment .scene-motion-control { grid-column:2; justify-self:start; font-size:.8rem; }
@media(max-width:380px){.learning-moment .growth-figure {grid-template-columns:90px minmax(0,1fr);}}

@media (max-width:600px) {
 .learning-moment .growth-figure {grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;}
 .learning-moment .growth-picture {grid-column:1/-1;width:min(100%,300px);justify-self:center;}
 .learning-moment .scene-motion-control {font-size:.77rem;padding:6px 8px;}
}
html[data-size="2"] .learning-moment .growth-figure {display:block;}
.naming-portrait.scene-portrait {width:min(100%,360px);margin:0 auto 12px;}
.naming-portrait.scene-portrait svg {width:100%;height:auto;display:block;border-radius:16px;}

.growth-last-visit {
  display: block;
  padding: .35rem .5rem;
  text-align: center;
  color: #514837;
  background: #f6ebd8;
  font-size: .8rem;
}
.growth-preview {
  border-top: 1px solid #d6cdb8;
  margin-top: 1rem;
  padding-top: .45rem;
}
.growth-preview summary {
  min-height: 56px;
  padding: .65rem .25rem;
  box-sizing: border-box;
  cursor: pointer;
  color: #245545;
  font-weight: 700;
}
.growth-preview figure { width: min(100%, 340px); margin: .3rem auto; }
.growth-preview svg { display: block; width: 100%; height: auto; border-radius: 15px; }
.growth-preview figcaption, .growth-preview p { text-align: center; margin: .3rem 0; }
.answer-moment .growth-figure { grid-template-columns: minmax(100px,145px) minmax(0,1fr); gap: 5px 14px; }
.answer-moment .growth-picture { grid-row: 1/3; grid-column: 1; width: 100%; }
.answer-moment .growth-figure figcaption { grid-column: 2; margin: 0; }
.answer-moment .scene-motion-control { grid-column: 2; min-height: 56px; }
@media(max-width:420px) {
  .answer-moment .growth-figure { grid-template-columns: minmax(80px,112px) minmax(0,1fr); gap: 4px 8px; }
}
html[data-size="2"] .answer-moment .growth-figure { display: block; }
html[data-size="2"] .answer-moment .growth-picture { width: min(100%,160px); margin: 0 auto .35rem; }
.growth-pair { border-top:1px solid #d6cdb8; padding-top:.35rem; }
.growth-pair summary { display:list-item; min-height:56px; padding:.7rem .2rem; box-sizing:border-box; color:#22543e; font-weight:700; cursor:pointer; }
.growth-pair > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.growth-pair figure { min-width:0; margin:0; }
.growth-pair figure svg { width:100%; height:auto; display:block; border-radius:12px; }
.growth-pair figcaption { margin:.4rem 0; line-height:1.55; overflow-wrap:anywhere; }
.growth-revisit { min-height:56px; margin-top:.4rem; }
@media(max-width:400px) { .growth-pair > div { grid-template-columns:1fr; } }
html[data-size="2"] .growth-pair > div { grid-template-columns:1fr; }
.growth-picture:has(.album-seal) { position:relative; }
.growth-picture .album-seal { position:absolute; right:2%; bottom:2%; width:clamp(32px,12%,58px); height:auto; transform:rotate(-7deg); }
@media (prefers-reduced-motion:no-preference) {
  html[data-motion="true"] .scene-playing .album-seal { animation:album-seal-arrive 960ms ease-out var(--scene-offset,0ms) 1 both; }
}
@keyframes album-seal-arrive {
  0%,22% { transform:translateY(-9px) rotate(7deg) scale(1.17); opacity:0; }
  60% { transform:translateY(1px) rotate(-9deg) scale(.92); opacity:1; }
  82% { transform:rotate(-6deg) scale(1.03); }
  100% { transform:rotate(-7deg) scale(1); opacity:1; }
}
.naming-panel h1 { margin:0 0 .55em; font-size:clamp(1.25rem,4.6vw,1.65rem); }
.naming-panel .scene-portrait { width:min(100%,14rem); margin:0 auto .5rem; position:relative; }
.naming-panel .scene-motion-control { position:absolute; bottom:.35rem; right:.35rem; min-height:44px; padding:.2rem .55rem; background:#fffdf8; border:1px solid #aaa58d; border-radius:1rem; color:#33473d; font-size:.75rem; }
.naming-panel .suggested-name { margin:.15em 0; line-height:1.25; }
.naming-panel .suggested-name small { display:block; color:#516254; font-size:.85rem; font-weight:500; }
.naming-panel .naming-hint { margin:.4em 0; }
.naming-options { display:flex; justify-content:center; flex-wrap:wrap; gap:.3rem .75rem; }
.naming-panel #name-error:empty { margin:0; }
.lesson-result .result-continue { margin:.55rem 0 .8rem; }
.lesson-result .result-more { margin-top:1rem; }