/* 홈페이지에 진입하기 전의 영상 층. JS가 없으면 hidden 상태라 본문을 가리지 않는다. */
@layer components {
html.has-intro, html.has-intro body { overflow:hidden; }
.home-intro { position:fixed;inset:0;z-index:200;display:grid;place-items:center;container-type:inline-size;background:#F6F8F6; }
.home-intro[hidden] { display:none; }
.home-intro-video { display:block;width:100%;height:100%;max-width:none;object-fit:contain; }
.home-intro-close { position:absolute;top:max(20px, env(safe-area-inset-top));right:max(20px, env(safe-area-inset-right));z-index:1;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #D1DED6;border-radius:50%;background:rgba(255,255,255,.94);color:#17221D;box-shadow:0 4px 20px -8px rgba(23,34,29,.18);cursor:pointer; }
.home-intro-close svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round; }
.home-intro-close:hover { background:#FFFFFF;border-color:#1C8D5E;color:#13744C; }
.home-intro-close:focus-visible { outline:3px solid #1C8D5E;outline-offset:4px; }
.home-intro-sound { position:absolute;right:max(20px, env(safe-area-inset-right));bottom:max(20px, env(safe-area-inset-bottom));z-index:1;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px;border:1px solid #D1DED6;border-radius:24px;background:rgba(255,255,255,.94);color:#17221D;box-shadow:0 4px 20px -8px rgba(23,34,29,.18);font:600 14px/1.4 var(--f-ui);cursor:pointer; }
.home-intro-sound svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.home-intro-sound:hover { background:#FFFFFF;border-color:#1C8D5E;color:#13744C; }
.home-intro-sound:focus-visible { outline:3px solid #1C8D5E;outline-offset:4px; }
.home-intro-sound[aria-pressed="true"] { color:#13744C; }
.home-intro-sound[aria-pressed="false"] .intro-sound-on, .home-intro-sound[aria-pressed="true"] .intro-sound-off { display:none; }
@container (max-width:480px) {
  .home-intro-close { top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right)); }
  .home-intro-sound { right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom)); }
}
}