/**
 * [한글 유지보수 안내]
 * Anime.js가 썸네일·아이콘·반사면을 움직이고, 이 파일은 그려질 재질만 정의합니다.
 * 목록 카드/버튼의 외곽 transform은 바꾸지 않습니다. 클릭 경계가 움직이면 호버 진입/이탈이
 * 반복되어 UI가 떨리기 때문입니다. 입력 값은 움직이지 않으며 제목의 한 번뿐인 4px 읽기 모션은 JS에서 관리합니다.
 */
.motion-ready .motion-running{will-change:transform,opacity}
.motion-ready :is(.faith-department,.faith-card,.sheet-card,.grid>.card,.featured-preview,.family-guide-steps>li){position:relative;isolation:isolate;transition:background-color .2s cubic-bezier(.16,1,.3,1),border-color .2s cubic-bezier(.16,1,.3,1),box-shadow .24s cubic-bezier(.16,1,.3,1)}
/* 포인터를 따라 움직이는 얇은 유리 반사입니다. z-index와 pointer-events로 읽기/클릭을 방해하지 않습니다. */
.motion-ready :is(.faith-department,.faith-card,.sheet-card,.grid>.card,.featured-preview)::before{
 content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;
 background:radial-gradient(240px circle at var(--hover-x,50%) var(--hover-y,0%),#ffffff94,transparent 72%);
 transition:opacity .18s cubic-bezier(.16,1,.3,1);
}
.motion-ready :is(.faith-department-preview,.faith-card-image,.preview-paper,.card-top,.thumbnail){overflow:hidden}
/* 이미지의 여백과 고유 비율은 원래 컴포넌트가 결정합니다. 움직이는 면만 3D 원근으로 그립니다. */
.motion-ready :is(.faith-department-preview,.faith-card-image,.preview-paper,.card-top,.thumbnail) img{transform-origin:center 65%;backface-visibility:hidden}
.motion-ready :is(.ui-icon,.dashicons){transform-origin:50% 60%;backface-visibility:hidden}
.motion-control-ready{position:relative;isolation:isolate}
.motion-control-glint{
 position:absolute;inset:1px;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;
 background:linear-gradient(145deg,#ffffffa8,#ffffff12 60%,transparent);
 box-shadow:inset 0 1px 0 #fff,0 7px 16px -11px color-mix(in srgb,var(--ink) 24%,transparent);
 transform-origin:center;
}
.motion-ready :is(.faith-department,.faith-card,.sheet-card,.grid>.card):focus-within{
 border-color:var(--dept-accent,var(--action-accent,#526653));
 box-shadow:inset 0 1px 0 #ffffffed,0 12px 26px -18px color-mix(in srgb,var(--ink) 22%,transparent);
}
@media(hover:hover) and (pointer:fine){
 .motion-ready :is(.faith-department,.faith-card,.sheet-card,.grid>.card):is(:hover,.motion-hovered){
  border-color:var(--dept-accent,var(--action-accent,#526653));
  background-color:var(--surface-hover,#fffaf2d9);
  box-shadow:inset 0 1px 0 #fff,0 14px 28px -20px color-mix(in srgb,var(--ink) 28%,transparent);
 }
 .motion-ready :is(.faith-department,.faith-card,.sheet-card,.grid>.card,.featured-preview):is(:hover,.motion-hovered)::before{opacity:.55}
 .motion-ready .faith-preview-strip a{transition:border-color .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1)}
 .motion-ready .faith-preview-strip a:hover{border-color:var(--dept,var(--blue-hour));box-shadow:0 7px 15px -10px color-mix(in srgb,var(--ink) 24%,transparent)}
}
/* 터치에는 지속 호버/포인터 광택을 남기지 않습니다. 클릭 피드백은 JS에서 한 번만 재생합니다. */
@media(hover:none),(pointer:coarse){
 .motion-ready :is(.faith-department,.faith-card,.sheet-card,.grid>.card,.featured-preview)::before{display:none}
}
@media(prefers-reduced-motion:reduce){
 .motion-ready .motion-running{will-change:auto}
 :is(.faith-department,.faith-card,.sheet-card,.grid>.card,.featured-preview,.department-icon,.family-guide-step-icon,.faith-department-preview img,.faith-card-image img,.preview-paper img,.card-top img,.thumbnail img,.faith-preview-strip a,.btn,.button,.faith-filter,.filters button,.reader-tabs button,.reader-tabs a,.ui-icon){transition:none!important;animation:none!important;transform:none!important}
 .motion-control-glint,:is(.faith-department,.faith-card,.sheet-card,.grid>.card,.featured-preview)::before{display:none}
}
@media(prefers-reduced-transparency:reduce){
 .motion-control-glint,:is(.faith-department,.faith-card,.sheet-card,.grid>.card,.featured-preview)::before{display:none}
}
@media print{
 .motion-ready .motion-running{opacity:1!important;transform:none!important;will-change:auto}
 .motion-control-glint,:is(.faith-department,.faith-card,.sheet-card,.grid>.card,.featured-preview)::before{display:none}
 .motion-ready :is(.faith-department,.faith-card,.sheet-card,.grid>.card,.featured-preview){transform:none!important;box-shadow:none!important}
}

/* 비동기 공통 상태: 상자의 크기를 바꾸지 않는 진행 표시입니다.
 * data-action-pending은 site.js/reader.js가 요청 생명주기에 맞춰 제거합니다. */
[data-action-pending]{position:relative;cursor:progress!important}
[data-action-pending]>.ui-icon,[data-action-pending]>.dashicons{opacity:.18!important;transform:none!important}
[data-action-pending]:not(input)::after{
 content:"";position:absolute;inset:auto;left:calc(50% - 8px);top:calc(50% - 8px);width:16px;height:16px;
 border:2px solid currentColor;border-right-color:transparent;border-radius:50%;pointer-events:none;
 animation:action-pending-turn .7s linear infinite;
}
/* native input에는 가상 요소가 보장되지 않습니다. 값은 유지한 채 표면 밝기만 바꿉니다. */
input[data-action-pending]{opacity:.68;cursor:progress}
.archive-results{position:relative}
.archive-skeleton{
 position:absolute;inset:0;z-index:2;display:grid;align-content:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
 padding-top:40px;overflow:hidden;background:var(--page);pointer-events:none;isolation:isolate;
}
.archive-skeleton-card{display:block;min-height:146px;border-radius:var(--radius-card,18px);background:color-mix(in srgb,var(--muted) 10%,var(--paper));position:relative;overflow:hidden}
.archive-skeleton-card::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,#ffffff75 50%,transparent 75%);transform:translateX(-100%);animation:archive-loading-sweep 1.3s cubic-bezier(.16,1,.3,1) infinite}
.async-error{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;margin-bottom:20px;border:1px solid var(--line);border-radius:var(--radius-card,18px);color:var(--ink);background:var(--surface-field,#fffaf2)}
.async-error p{margin:0;line-height:1.6}
.async-error .button{flex-shrink:0;min-height:44px}
/* 캐러셀은 이미지를 기다리는 동안에도 같은 읽기 창 크기를 유지합니다. */
.is-carousel [data-faith-slide]{position:relative}
.is-carousel [data-faith-slide].is-image-loading::after{content:"";position:absolute;inset:12px;border-radius:var(--radius-control,12px);background:linear-gradient(100deg,transparent 25%,#ffffff65 50%,transparent 75%),color-mix(in srgb,var(--muted) 9%,var(--paper));background-size:200% 100%;animation:carousel-loading-sweep 1.3s cubic-bezier(.16,1,.3,1) infinite;pointer-events:none}
.carousel-image-status{max-width:36ch;align-self:center;margin:auto;padding:20px;text-align:center;line-height:1.6;color:var(--ink)}
.carousel-image-status[hidden]{display:none}
.is-carousel [data-faith-slide].is-image-error>img{visibility:hidden;position:absolute}
@keyframes action-pending-turn{to{transform:rotate(360deg)}}
@keyframes archive-loading-sweep{to{transform:translateX(100%)}}
@keyframes carousel-loading-sweep{from{background-position:150% 0}to{background-position:-50% 0}}
@media(max-width:600px){.async-error{align-items:flex-start;flex-direction:column}.archive-skeleton{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){
 [data-action-pending]:not(input)::after{animation:none;border-style:dotted;border-right-color:currentColor}
 .archive-skeleton-card::before{display:none}
 .is-carousel [data-faith-slide].is-image-loading::after{animation:none;background:color-mix(in srgb,var(--muted) 9%,var(--paper))}
 .motion-ready :is(.page-intro h1,.page-intro>p,.detail-header h1){transform:none!important;opacity:1!important}
}
@media(prefers-reduced-transparency:reduce){.archive-skeleton{background:var(--paper)}}
@media print{.archive-skeleton,.async-error,.carousel-image-status,[data-action-pending]::after{display:none!important}}

/* 글자가 있는 메뉴/필터는 글자 위에 spinner를 놓지 않고 하단의 짧은 진행선을 사용합니다. */
[data-action-pending]:is(.faith-filter,.kokonut-link-tabs a,.async-error .button)::after{inset:auto 10px 4px;width:auto;height:2px;border:0;border-radius:999px;background:currentColor;transform-origin:left;animation:action-pending-line .8s cubic-bezier(.16,1,.3,1) infinite}
body.login #loginform{position:relative}
body.login #loginform:has(input[data-action-pending])::after{content:"";position:absolute;bottom:0;left:12px;right:12px;height:2px;background:var(--action-accent);transform-origin:left;animation:action-pending-line .8s cubic-bezier(.16,1,.3,1) infinite;pointer-events:none}
@keyframes action-pending-line{0%,100%{transform:scaleX(.2);opacity:.45}55%{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){[data-action-pending]:is(.faith-filter,.kokonut-link-tabs a,.async-error .button)::after,body.login #loginform:has(input[data-action-pending])::after{animation:none;transform:none;opacity:1}}