/* 사이트 보충 스타일 — 공통 스타일 파일에 없는 것만 둔다. 값은 공통 변수만 쓴다. */

/* ── 언어 선택 ─────────────────────────────────────────────────────────── */
.lang-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.lang-list a{color:var(--color-text-secondary)}
.lang-list a:hover,.lang-list a[aria-current]{color:var(--color-text-primary)}
.lang-list a[aria-current]{font-weight:600}
.util-link{display:inline-flex;align-items:center;padding-block:var(--space-2)}
.footer .lang-list{font-size:var(--text-sm-size);line-height:var(--text-sm-line)}
.footer .lang-list a{display:inline-flex;align-items:center;min-height:var(--space-12)}

/* ── 메뉴 접힘 버튼 (좁은 화면 전용, 넓은 화면에서는 숨김) ──────────────── */
.gnb-toggle,.gnb-toggle-btn{display:none}
.gnb-toggle-btn{cursor:pointer}
.gnb-toggle-btn svg{width:var(--space-3);height:var(--space-3);stroke:currentColor;fill:none;
                    stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease-out}
.gnb-toggle:checked + .gnb-toggle-btn svg{transform:rotate(180deg)}
.gnb-toggle:focus-visible + .gnb-toggle-btn,
.faq-item summary:focus-visible{
  outline:calc(var(--space-1) / 2) solid var(--color-brand-primary);
  outline-offset:calc(var(--space-1) / 2);
}

/* ── 섹션 보조 ─────────────────────────────────────────────────────────── */
.section-alt{background:var(--color-bg-canvas);border-block:1px solid var(--color-border)}
.section-foot{margin-top:var(--space-6)}
.card-grid.grid-3{grid-template-columns:repeat(3,1fr)}
ol.card-grid{margin:0;padding:0;list-style:none}
.card-grid.feature-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}

/* ── 화면 이미지 자리 ──────────────────────────────────────────────────── */
.shot{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:100%;aspect-ratio:16/9;
  padding:var(--space-4);
  background:var(--color-bg-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);text-align:center;
}
.shot-hero{
  max-width:calc(var(--layout-content-max) * .75);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.shot-img{display:block;width:100%;height:auto;border:1px solid var(--color-border)}

/* ── 기능 블록 ─────────────────────────────────────────────────────────── */
.feature-body{display:flex;flex-direction:column;gap:var(--space-3);flex:1 1 auto;min-width:0}
.feature-title{font-size:var(--text-lg-size);line-height:var(--text-lg-line);font-weight:600}
.more-link{
  display:inline-flex;align-items:center;align-self:flex-start;gap:var(--space-1);
  margin-top:auto;
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);font-weight:600;
  color:var(--color-text-link);
}
.more-link:hover{color:var(--color-text-link-hover)}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:var(--space-2)}
.faq-item{
  background:var(--color-bg-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}
.faq-item summary{
  min-height:var(--space-12);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);
  font-weight:600;line-height:var(--text-base-line);cursor:pointer;
}
.faq-item p{
  padding:0 var(--space-4) var(--space-4);
  line-height:var(--text-base-line);color:var(--color-text-secondary);
}

/* ── 마지막 안내 줄 (항상 어두운 구역) ─────────────────────────────────── */
.cta-band{background:var(--ink-bg);color:var(--ink-text);text-align:center}
.cta-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.cta-band h2{font-size:var(--text-xl-size);line-height:var(--text-xl-line);font-weight:600}
.cta-band p{line-height:var(--text-base-line);color:var(--ink-text-muted)}
.cta-band .hero-actions{margin-top:var(--space-2)}

/* ── 미리보기 띠 ───────────────────────────────────────────────────────── */
.previewbar{
  padding-block:var(--space-1);padding-inline:var(--space-3);
  background:var(--color-bg-surface-2);
  border-block-end:1px solid var(--color-border);
  color:var(--color-text-secondary);
  font-size:var(--text-xs-size);line-height:var(--text-xs-line);
  text-align:center;overflow-wrap:anywhere;
}
.previewbar code,.sitemap code{font-family:var(--font-mono)}

/* ── 언어 버튼과 목록 ──────────────────────────────────────────────────── */
.site .utilbar-inner{position:relative}
.lang-menu > summary{list-style:none;cursor:pointer}
.lang-menu > summary::-webkit-details-marker{display:none}
.lang-menu > summary svg{transition:transform .15s ease-out}
.lang-menu[open] > summary svg{transform:rotate(180deg)}
summary:focus-visible{
  outline:calc(var(--space-1) / 2) solid var(--color-brand-primary);
  outline-offset:calc(var(--space-1) / 2);
}
.lang-panel{
  position:absolute;inset-block-start:100%;inset-inline-end:0;z-index:90;
  inline-size:min(calc(var(--layout-sidebar-width) * 3),100%);
  max-block-size:calc(var(--space-12) * 8);overflow-y:auto;
  padding:var(--space-2);
  background:var(--color-bg-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}
.lang-grid{
  display:grid;gap:var(--space-1);
  grid-template-columns:repeat(auto-fill,minmax(calc(var(--space-12) * 3),1fr));
}
.lang-grid a{
  display:flex;align-items:center;min-block-size:var(--space-8);
  padding-inline:var(--space-3);border-radius:var(--radius-sm);
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);
  color:var(--color-text-primary);
}
.lang-grid a:hover{background:var(--color-bg-surface-2)}
.footer .lang-panel{
  position:static;inline-size:100%;margin-block-start:var(--space-2);box-shadow:none;
}

/* ── 빈 페이지 공통 ────────────────────────────────────────────────────── */
.page{display:flex;flex-direction:column;gap:var(--space-3);min-inline-size:0}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);
  color:var(--color-text-secondary);
}
.crumbs a{display:inline-flex;align-items:center;color:var(--color-text-link)}
.crumbs a:hover{color:var(--color-text-link-hover)}
.page-title{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);
  font-size:var(--text-xl-size);line-height:var(--text-xl-line);font-weight:600;
}
.page-tag{
  font-size:var(--text-xs-size);line-height:var(--text-xs-line);font-weight:400;
  color:var(--color-text-secondary);
}
.page-purpose,.page-note{line-height:var(--text-base-line);color:var(--color-text-secondary)}
.prose{
  display:flex;flex-direction:column;gap:var(--space-3);
  max-inline-size:calc(var(--layout-sidebar-width) * 3);
  line-height:var(--text-base-line);
}
.page-closing{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);
  margin-block-start:var(--space-8);
}

/* ── 소개 페이지: 글 묶음·2열·이미지 자리 설명·구조 그림 ───────────────── */
.prose-title{font-size:var(--text-xl-size);line-height:var(--text-xl-line);font-weight:600}
.prose .eyebrow{align-self:flex-start}
.block-gap{margin-block-start:var(--space-8)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:start}
.slot-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.shot-slot{flex-direction:column;gap:var(--space-2);border-style:dashed;border-color:var(--color-border-strong)}
.shot-wide{max-inline-size:calc(var(--layout-content-max) * .75)}
.shot-slot strong{font-weight:600;color:var(--color-text-primary)}
.shot-slot code{font-family:var(--font-mono);font-size:var(--text-xs-size);overflow-wrap:anywhere}
.hero .crumbs{align-self:stretch}
.diagram{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2)}
.diagram-node{
  display:flex;flex-direction:column;gap:var(--space-1);
  padding:var(--space-3) var(--space-4);
  background:var(--color-bg-surface);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);text-align:center;
}
.diagram-node strong{font-size:var(--text-base-size);line-height:var(--text-base-line);font-weight:600}
.diagram-node span{color:var(--color-text-secondary)}
.diagram-box{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-4);
  background:var(--color-brand-tint);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
}
.diagram-cap{font-size:var(--text-sm-size);line-height:var(--text-sm-line);font-weight:600;text-align:center}
.diagram-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.diagram-link{
  font-size:var(--text-xs-size);line-height:var(--text-xs-line);font-weight:500;
  color:var(--color-text-secondary);text-align:center;
}
.fact-list{display:flex;flex-direction:column;gap:var(--space-4);margin:0}
.fact-list dt{font-weight:600;line-height:var(--text-base-line)}
.fact-list dd{margin:0;line-height:var(--text-base-line);color:var(--color-text-secondary)}
.todo{
  display:inline-block;padding-inline:var(--space-2);border-radius:var(--radius-sm);
  background:var(--color-warning-bg);color:var(--color-warning);
  font-size:var(--text-xs-size);line-height:var(--text-lg-line);
}

/* ── 설치 가이드 ───────────────────────────────────────────────────────── */
.guide{
  display:grid;grid-template-columns:var(--layout-sidebar-width) minmax(0,1fr);
  gap:var(--space-8);align-items:start;margin-block-start:var(--space-3);
}
.step-list{display:flex;flex-direction:column;gap:var(--space-1);margin:0;padding:0;list-style:none}
.step-list a{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  min-block-size:var(--space-10);padding-inline:var(--space-3);
  border:1px solid transparent;border-radius:var(--radius-sm);
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);
}
.step-list a:hover{background:var(--color-bg-surface-2)}
.step-list a[aria-current]{
  background:var(--color-brand-tint);border-color:var(--color-border);font-weight:600;
}
.step-nav{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-block-start:var(--space-6)}

/* ── 팀원 카드 자리 ────────────────────────────────────────────────────── */
.team-lead{grid-column:1 / -1}
.team-slots{display:flex;flex-direction:column;gap:var(--space-3)}
.team-lead .team-slots{display:grid;grid-template-columns:var(--layout-sidebar-width) minmax(0,1fr)}
.slot{
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-4);
  border:1px dashed var(--color-border-strong);border-radius:var(--radius-sm);
  color:var(--color-text-secondary);
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);text-align:center;
}
.slot-photo{aspect-ratio:4/3}
.slot-text{min-block-size:calc(var(--space-12) * 2)}
.card-meta{font-size:var(--text-xs-size);line-height:var(--text-xs-line);color:var(--color-text-secondary)}

/* ── 확인용 사이트맵 ───────────────────────────────────────────────────── */
.sitemap{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);margin-block:var(--space-3)}
.sitemap-group{display:flex;flex-direction:column;gap:var(--space-2);min-inline-size:0}
.sitemap-group h2{font-size:var(--text-lg-size);line-height:var(--text-lg-line);font-weight:600}
.sitemap-group ul{display:flex;flex-direction:column;gap:var(--space-1)}
.sitemap-group a{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  min-block-size:var(--space-8);color:var(--color-text-link);
}
.sitemap-group a:hover{color:var(--color-text-link-hover)}
.sitemap code{font-size:var(--text-xs-size);color:var(--color-text-secondary);overflow-wrap:anywhere}

/* ── 1024 이하 ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .sitemap{grid-template-columns:repeat(2,1fr)}
  .card-grid.feature-grid{grid-template-columns:1fr}
  .feature{flex-direction:row;align-items:center;gap:var(--space-6)}
  .feature .shot{flex:1 1 0;min-width:0}
  .feature-body{flex:1 1 0}
  .feature .more-link{margin-top:0}

  /* 메뉴 항목이 두 줄로 꺾이지 않게 간격을 줄인다 */
  .gnb-fold .gnb-left{gap:var(--space-6)}
  .gnb-fold .gnb-menu{gap:var(--space-4)}
  .gnb-fold .gnb-trigger,.gnb-fold .gnb-link{white-space:nowrap}
}

/* ── 768 이하 ──────────────────────────────────────────────────────────── */
@media (max-width:768px){
  /* 맨 위 줄: 누르기 쉬운 높이로 */
  .site .utilbar{height:auto}
  .site .util-link{min-height:var(--space-12);padding-block:0}

  /* 메인 메뉴: 버튼 하나로 접는다 */
  .gnb-fold .gnb-inner{flex-direction:row;flex-wrap:wrap;align-items:center;position:relative}
  .gnb-fold .gnb-left{display:contents}
  .gnb-fold .brand{order:1;margin-inline-end:auto;min-height:var(--space-12)}
  .gnb-fold .gnb-right{order:2;width:auto}
  .gnb-fold .gnb-toggle{display:block}
  .gnb-fold .gnb-toggle-btn{order:3;display:inline-flex}
  .gnb-fold .gnb-menu{
    order:4;display:none;flex:0 0 100%;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:var(--space-4);
    padding-top:var(--space-3);border-top:1px solid var(--color-border);
  }
  .gnb-fold .gnb-toggle:checked ~ .gnb-menu{display:flex}
  .gnb-fold .gnb-item{flex-direction:column;align-items:stretch}
  .gnb-fold .gnb-trigger{
    justify-content:flex-start;pointer-events:none;border-bottom:0;
    font-size:var(--text-sm-size);color:var(--color-text-secondary);
  }
  .gnb-fold .gnb-trigger svg{display:none}
  .gnb-fold .submenu{
    display:flex;flex-direction:column;gap:var(--space-2);
    min-width:0;margin-top:0;padding:0;border:0;
  }
  .gnb-fold .submenu a,
  .gnb-fold .gnb-link{
    min-height:var(--space-12);padding:var(--space-2) var(--space-4);
    background:var(--color-bg-canvas);
    border:1px solid var(--color-border);border-radius:var(--radius-sm);
    font-size:var(--text-base-size);white-space:normal;
  }

  /* 본문 글자 크기와 누르는 요소 높이 */
  .site .section-head p,
  .site .card-desc{font-size:var(--text-base-size);line-height:var(--text-base-line)}
  .site .more-link{min-height:var(--space-12);font-size:var(--text-base-size)}
  .site .hero-actions{width:100%;flex-direction:column}
  .site .hero-actions .btn{width:100%}
  .site .hero .lead{font-size:var(--text-base-size);line-height:var(--text-base-line)}

  /* 기능 블록 1열 */
  .feature{flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .feature .shot,.feature-body{flex:none}
  .card-grid.grid-3{grid-template-columns:1fr}

  /* 언어 목록·빈 페이지·설치 가이드·팀원 카드·사이트맵 */
  .split{grid-template-columns:minmax(0,1fr)}
  .diagram-row{grid-template-columns:minmax(0,1fr)}
  .lang-menu > summary{min-block-size:var(--space-12)}
  .lang-grid{gap:var(--space-2)}
  .lang-grid a,.crumbs a,.sitemap-group a,.step-list a{min-block-size:var(--space-12)}
  .guide{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .step-list,.sitemap-group ul{gap:var(--space-2)}
  .team-lead .team-slots{grid-template-columns:minmax(0,1fr)}
  .page-closing{align-items:stretch}
  .sitemap{grid-template-columns:minmax(0,1fr)}

  /* 푸터 */
  .site .footer-cols{display:grid;grid-template-columns:repeat(2,1fr);
                     gap:var(--space-8) var(--space-6);width:100%}
  .site .footer-col{gap:var(--space-2)}
  .site .footer-col a{display:flex;align-items:center;min-height:var(--space-12)}
}

/* ── 히어로 화면 → 데모 영상 링크 ─────────────────────────────────────── */
.hero-demo{
  position:relative;display:block;width:100%;
  max-width:calc(var(--layout-content-max) * .75);
  border-radius:var(--radius-lg);
}
.hero-demo-play{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  display:flex;align-items:center;justify-content:center;
  width:calc(var(--space-12) * 2);height:calc(var(--space-12) * 2);
  transform:translate(-50%,-50%);
  border-radius:var(--radius-pill);
  background:var(--color-brand-primary);color:var(--ink-text);
  box-shadow:var(--shadow-lg);
  transition:background .15s ease,transform .15s ease;
}
.hero-demo-play svg{width:var(--space-8);height:var(--space-8);margin-inline-start:var(--space-1);fill:currentColor}
.hero-demo:hover .hero-demo-play,
.hero-demo:focus-visible .hero-demo-play{background:var(--color-brand-primary-hover);transform:translate(-50%,-50%) scale(1.08)}
.hero-demo-label{
  position:absolute;inset-inline-start:50%;inset-block-end:var(--space-4);
  transform:translateX(-50%);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  background:var(--ink-bg);color:var(--ink-text);
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);font-weight:600;white-space:nowrap;
}
@media (max-width:768px){
  .hero-demo-play{width:var(--space-12);height:var(--space-12)}
  .hero-demo-play svg{width:var(--space-6);height:var(--space-6)}
  .hero-demo-label{display:none}
}

/* ── 언어 입력창 ───────────────────────────────────────────────────────── */
.lang-box{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.lang-input{
  min-block-size:var(--space-8);inline-size:calc(var(--space-12) * 4);max-inline-size:100%;
  padding-inline:var(--space-3);
  background:var(--color-bg-surface);color:var(--color-text-primary);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);
  font:inherit;font-size:var(--text-sm-size);line-height:var(--text-sm-line);
}
.lang-input:focus-visible{
  outline:calc(var(--space-1) / 2) solid var(--color-brand-primary);
  outline-offset:calc(var(--space-1) / 2);
}
.lang-msg{
  font-size:var(--text-xs-size);line-height:var(--text-xs-line);
  color:var(--color-text-secondary);
}
.lang-msg:empty{display:none}
@media (max-width:768px){
  .lang-input{min-block-size:var(--space-12);inline-size:100%;font-size:var(--text-base-size)}
  .lang-box{inline-size:100%}
}

/* ── 히어로 세 가지 힘 · 안내 한 줄 ────────────────────────────────────── */
.hero-points{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);
  inline-size:100%;max-inline-size:calc(var(--layout-content-max) * .75);
  margin:0;padding:0;list-style:none;
}
.hero-points li{
  display:flex;flex-direction:column;gap:var(--space-1);
  padding:var(--space-3) var(--space-4);
  background:var(--color-bg-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  text-align:center;
}
.hero-points strong{font-size:var(--text-base-size);line-height:var(--text-base-line);font-weight:600}
.hero-points span{
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);
  color:var(--color-text-secondary);
}
.hero-note{
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);
  color:var(--color-text-secondary);text-align:center;
}
@media (max-width:768px){
  .hero-points{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
}

/* ── 파람스 로고 이미지 ────────────────────────────────────────────────── */
.brand-logo{display:block;block-size:var(--space-10);inline-size:auto;max-inline-size:100%}

/* ── 히어로 배경: 은은한 색 번짐과 옅은 격자 (색은 공통 변수만, 라이트 고정) ───── */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--color-brand-tint) 90%,transparent) 0%,transparent 62%),
    radial-gradient(ellipse at 88% 78%,color-mix(in srgb,var(--color-brand-tint) 55%,transparent) 0%,transparent 45%),
    linear-gradient(to bottom,var(--color-bg-canvas),var(--color-bg-surface));
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--color-border) 45%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--color-border) 45%,transparent) 1px,transparent 1px);
  background-size:var(--space-12) var(--space-12);
  background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse at 50% 28%,var(--color-text-primary) 0%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 28%,var(--color-text-primary) 0%,transparent 72%);
}

/* ── CI 소개: 로고 공식 그림과 브랜드 색 견본 ───────────────────────────── */
.ci-formula{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4);
  padding:var(--space-8);
  background:var(--color-brand-tint);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
}
.ci-tile{
  display:flex;align-items:center;justify-content:center;
  min-inline-size:calc(var(--space-12) * 2);min-block-size:calc(var(--space-12) * 2);
  padding:var(--space-3) var(--space-5);
  background:var(--color-bg-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  font-size:var(--text-2xl-size);line-height:var(--text-2xl-line);font-weight:700;
}
.ci-op{font-size:var(--text-xl-size);line-height:var(--text-xl-line);color:var(--color-text-secondary)}
.ci-swatches{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3);
  margin:0;padding:0;list-style:none;
}
.ci-swatch{
  display:flex;flex-direction:column;gap:var(--space-1);
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);
}
.ci-swatch span:last-child{font-family:var(--font-mono);color:var(--color-text-secondary)}
.ci-chip{
  display:block;block-size:calc(var(--space-12) * 2);margin-block-end:var(--space-1);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
}
@media (max-width:768px){
  .ci-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ci-formula{padding:var(--space-4)}
}

/* ── 첫 화면 하단: AI 모델 선택 안내 문구 ─────────────────────────────── */
.hero-fineprint{
  max-inline-size:60ch;
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);
  color:var(--color-text-secondary);text-align:center;
}

/* ── 본문 글 묶음: 화면 가운데에 두고 글자는 왼쪽 맞춤 ─────────────────── */
.page > .prose,
.page > .shot-wide{
  inline-size:100%;
  margin-inline:auto;
}

/* ── 이름에 담은 뜻: 토끼와 거북이 그림 ────────────────────────────────── */
.page > .fable{
  inline-size:100%;max-inline-size:calc(var(--layout-content-max) * .6);
  margin-inline:auto;margin-block-start:var(--space-6);
}
.fable svg{
  display:block;inline-size:100%;block-size:auto;
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
}
.fable figcaption{
  margin-block-start:var(--space-3);text-align:center;
  font-size:var(--text-sm-size);line-height:var(--text-sm-line);
  color:var(--color-text-secondary);
}
.fb-sky{fill:var(--color-brand-tint)}
.fb-sun{fill:var(--amber-3);stroke:var(--amber-9);stroke-width:3}
.fb-cloud{fill:var(--color-bg-surface)}
.fb-ground{fill:var(--green-3)}
.fb-track{stroke:var(--color-border-strong);stroke-width:3;stroke-dasharray:8 12;stroke-linecap:round}
.fb-dash{stroke:var(--color-border-strong);stroke-width:4;stroke-linecap:round}
.fb-hare{fill:var(--color-bg-surface);stroke:var(--color-border-strong);stroke-width:3}
.fb-line{fill:none;stroke:var(--color-text-primary);stroke-width:3;stroke-linecap:round}
.fb-nose{fill:var(--red-3);stroke:var(--red-9);stroke-width:2}
.fb-z{fill:var(--color-text-secondary);font-weight:700;font-family:var(--font-sans)}
.fb-shadow{fill:var(--green-9);opacity:.2}
.fb-pole{stroke:var(--color-text-secondary);stroke-width:4;stroke-linecap:round}
.fb-flag{fill:var(--color-brand-primary)}

/* ── 토끼와 거북이 애니메이션 (18초 한 바퀴: 토끼가 달리다 잠들고 거북이가 먼저 도착) ── */
.fb-pink{fill:color-mix(in srgb,var(--red-9) 38%,var(--color-bg-surface))}
.fb-blush{fill:color-mix(in srgb,var(--red-9) 38%,var(--color-bg-surface));opacity:.7}
.fb-eye{fill:var(--color-text-primary)}
/* 기본값은 끝 장면(토끼는 잠든 채, 거북이는 결승 앞). 움직임이 꺼진 환경에서도 이 그림이 보인다 */
.fb-hare-move{transform:translateX(380px)}
.fb-turtle-move{transform:translateX(800px)}
.fb-hare-run{opacity:0}
.fb-hare-sleep{opacity:1}
.fb-z{opacity:1}
.fb-breathe,.fb-rock{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .fb-actors{animation:fb-fade 18s linear infinite}
  .fb-hare-move{animation:fb-hare-x 18s linear infinite}
  .fb-hop{animation:fb-hop 18s linear infinite}
  .fb-hare-run{animation:fb-run-show 18s step-end infinite}
  .fb-hare-sleep{animation:fb-sleep-show 18s step-end infinite}
  .fb-turtle-move{animation:fb-turtle-x 18s linear infinite}
  .fb-rock{animation:fb-rock 1.2s ease-in-out infinite}
  .fb-breathe{animation:fb-breathe 2.4s ease-in-out infinite}
  .fb-z{animation:fb-z 2.4s ease-in-out infinite}
  .fb-z2{animation-delay:.4s}
  .fb-z3{animation-delay:.8s}
  .fb-wave{transform-box:fill-box;transform-origin:0 50%;animation:fb-wave 1.6s ease-in-out infinite}
}
@keyframes fb-fade{0%{opacity:0}3%{opacity:1}94%{opacity:1}100%{opacity:0}}
@keyframes fb-hare-x{
  0%{transform:translateX(80px);animation-timing-function:ease-out}
  20%{transform:translateX(380px)}
  100%{transform:translateX(380px)}
}
@keyframes fb-turtle-x{
  0%{transform:translateX(60px)}
  88%{transform:translateX(800px)}
  100%{transform:translateX(800px)}
}
@keyframes fb-hop{
  0%,2.2%,4.4%,6.6%,8.8%,11%,13.2%,15.4%,17.6%,19.8%,100%{transform:translateY(0)}
  1.1%,3.3%,5.5%,7.7%,9.9%,12.1%,14.3%,16.5%,18.7%{transform:translateY(-14px)}
}
@keyframes fb-run-show{0%{opacity:1}21%{opacity:0}}
@keyframes fb-sleep-show{0%{opacity:0}21%{opacity:1}}
@keyframes fb-rock{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes fb-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.06)}}
@keyframes fb-z{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes fb-wave{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.88)}}

/* Compact two-language selector; legacy grids remain unchanged. */
[data-language-selector] .lang-panel{inline-size:max-content;max-inline-size:calc(100vw - 2rem);padding:var(--space-1)}
[data-language-selector] .lang-grid{grid-template-columns:1fr;gap:0;margin:0;padding:0;list-style:none}
[data-language-selector] .lang-grid a{inline-size:100%;box-sizing:border-box;white-space:nowrap}