@font-face {
  font-family: 'Ttobak Home'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('./assets/noto-sans-kr-regular-home.woff') format('woff');
}
@font-face {
  font-family: 'Ttobak Home'; font-style: normal; font-weight: 700 900;
  font-display: swap; src: url('./assets/noto-sans-kr-bold-home.woff') format('woff');
}
.ttobak-home { font-family: 'Ttobak Home', 'Noto Sans CJK KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: 1rem; color-scheme: light; }
.ttobak-home, .ttobak-home * { box-sizing: border-box; }
.ttobak-home button { font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ttobak-home button { cursor: pointer; }
.ttobak-home button:disabled { cursor: wait; }
.ttobak-home[hidden], .ttobak-home [hidden] { display: none !important; }
.ttobak-home :focus-visible { outline: 3px solid #17699a; outline-offset: 5px; }
/* The heading receives screen-reader focus on return; it is not a control. */
.ttobak-home #home-title:focus-visible { outline: none; }
.ttobak-home {
  --ink: #174d41; --button: #174d41; --button-ink: #fffdf1;
  --sky: #b7e5ee; --ground: #bfc6a2; --focal: 40%;
  position: relative; isolation: isolate; width: 100%; min-height: 600px; height: 100svh;
  overflow: hidden; color: var(--ink); background: var(--sky);
}
.ttobak-home[data-scene='gallery'] { --sky: #f8f5f0; --ground: #f8f5f0; --focal: 64%; }
.ttobak-home[data-scene='night'] {
  --ink: #fffbed; --button: #ffe278; --button-ink: #164437;
  --sky: #022441; --ground: #062638; --focal: 52%; color-scheme: dark;
}
.scene-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.scene-image, .scene-light {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;
}
.scene-light { opacity: 0; mix-blend-mode: screen; }
.scene-enter { animation: scene-arrive 360ms ease-out both; }
.ttobak-home[data-scene='garden'] .scene-light {
  /* Light only the existing sunlit leaves, never the reading area or mascot. */
  -webkit-mask-image: radial-gradient(ellipse at 9% 6%, #000 0%, transparent 49%);
  mask-image: radial-gradient(ellipse at 9% 6%, #000 0%, transparent 49%);
}
.ttobak-home[data-motion='on'][data-scene='garden'] .scene-light { animation: quiet-sunlight 7s ease-in-out infinite; }
/* Small crops of the approved night raster supply the stars. No canvas,
   timers, generated drawings, extra asset downloads or full-screen layers. */
.scene-twinkle {
  display: none; position: absolute; width: 28px; height: 28px;
  background-repeat: no-repeat; background-size: 1040.9px 740.6px;
  background-position: -879.2px -52.5px;
  mix-blend-mode: screen; filter: brightness(1.15) contrast(1.7); opacity: 0;
}
.ttobak-home[data-scene='night'] .scene-twinkle {
  background-image: url('./assets/ttobak-night-background.webp');
}
.ttobak-home[data-motion='on'][data-scene='night'] .scene-twinkle {
  display: block; animation: quiet-twinkle var(--twinkle-time, 5.6s) ease-in-out var(--twinkle-delay, 0s) infinite;
}
.scene-twinkle-1 { left: 34%; top: 12%; --twinkle-time: 4.8s; --twinkle-delay: -1.2s; }
.scene-twinkle-2 { left: 80%; top: 18%; --twinkle-time: 6.4s; --twinkle-delay: -3.8s; }
.scene-twinkle-3 { left: 66%; top: 28%; --twinkle-time: 5.6s; --twinkle-delay: -.4s; }
.scene-twinkle-4 { left: 17%; top: 30%; --twinkle-time: 6.8s; --twinkle-delay: -5.1s; }
.scene-twinkle-5 { left: 91%; top: 43%; --twinkle-time: 5.2s; --twinkle-delay: -2.3s; }
.scene-twinkle-6 { left: 48%; top: 8%; width: 20px; height: 20px; --twinkle-time: 7.2s; --twinkle-delay: -4.6s; }
.scene-twinkle-7 { left: 76%; top: 40%; width: 22px; height: 22px; --twinkle-time: 8.4s; --twinkle-delay: -6.8s; }
.scene-twinkle-8 { left: 5%; top: 43%; width: 18px; height: 18px; --twinkle-time: 6.6s; --twinkle-delay: -2.7s; }
.scene-twinkle-9 { left: 94%; top: 10%; width: 20px; height: 20px; --twinkle-time: 5.8s; --twinkle-delay: -1.9s; }
.ttobak-home[data-motion='off'] .scene-image { animation: none; }
.ttobak-home[data-motion='off'] .scene-light { animation: none; opacity: 0; }
.ttobak-home[data-motion='off'] .scene-twinkle { animation: none; display: none; }
.home-copy { position: absolute; z-index: 1; }
.home-copy h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 900; letter-spacing: -.065em; line-height: 1.25; margin: 0; }
.home-copy p { font-size: clamp(1rem, 1.6vw, 1.375rem); line-height: 1.55; letter-spacing: -.035em; font-weight: 700; margin: .6rem 0 0; }
[data-scene='garden'] .home-copy { inset-block-start: 11%; inset-inline-start: 50%; translate: -50% 0; text-align: center; }
[data-scene='gallery'] .home-copy { inset-block-end: 9%; inset-inline-start: 6%; }
[data-scene='night'] .home-copy { inset-block-start: 9%; inset-inline-start: 6%; }
.home-actions { position: absolute; z-index: 2; inset-block-end: max(6%, 1.5rem); inset-inline-end: 6%; display: flex; align-items: center; flex-wrap: wrap; gap: 1.1rem; }
.home-actions button { min-height: 58px; border: 0; font-size: 1.25rem; line-height: 1.5; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.start-button { min-width: 210px; padding: .75rem 2.5rem; color: var(--button-ink); background: var(--button); box-shadow: 0 4px 12px #102e2420; }
.continue-button { min-width: 116px; padding: .75rem 1.1rem; color: var(--ink); background: color-mix(in srgb, var(--sky), transparent 16%); }
.home-actions .continue-button:disabled { opacity: .5; cursor: default; }
.start-button:hover { filter: brightness(1.08); }
.ttobak-home .continue-button,
.ttobak-home .continue-button:hover { text-decoration: none; }
.home-actions button:active { box-shadow: inset 0 0 0 3px #ffffff60; }
.home-actions button:disabled { opacity: .65; }
.home-status { position: absolute; z-index: 4; inset-inline: 1rem; inset-block-end: .35rem; text-align: center; font-size: .875rem; line-height: 1.6; color: #174d41; background: #fffdf7; border-radius: 8px; padding: .5rem .75rem; margin: 0 auto; width: fit-content; max-width: calc(100% - 2rem); box-shadow: 0 2px 10px #00000020; }
@keyframes scene-arrive { from { opacity: .65; } to { opacity: 1; } }
@keyframes quiet-sunlight { 0%, 100% { opacity: .02; } 50% { opacity: .22; } }
@keyframes quiet-twinkle { 0%, 100% { opacity: var(--twinkle-low, .12); } 50% { opacity: var(--twinkle-high, .95); } }

/* Portrait: retain the entire character and expand the scene's own sky/ground.
   Only outer scenery is cropped; no separate panel or card is added. */
@media (max-aspect-ratio: 6/5) {
  .ttobak-home { min-height: max(600px, 38rem); background: linear-gradient(var(--sky) 50%, var(--ground)); }
  .scene-image, .scene-light {
    inset: auto auto max(100px, 7rem) 50%; width: 145%; height: auto; max-width: none;
    transform: translateX(calc(-1 * var(--focal)));
    mask-image: linear-gradient(transparent 0%, black 5%, black 96%, transparent 100%);
  }
  .home-copy, [data-scene='garden'] .home-copy, [data-scene='gallery'] .home-copy, [data-scene='night'] .home-copy {
    inset-block-start: max(12%, 4.5rem); inset-block-end: auto; inset-inline: 1rem; translate: none; text-align: center;
  }
  .home-copy h1 { font-size: clamp(2.5rem, 5.6vw, 3.75rem); }
  .home-copy p { font-size: clamp(1rem, 2.4vw, 1.25rem); }
  .home-actions { inset-inline: 1rem; inset-block-end: max(2rem, env(safe-area-inset-bottom)); justify-content: center; }
  .scene-twinkle-1 { left: 16%; top: 31%; }
  .scene-twinkle-2 { left: 79%; top: 35%; }
  .scene-twinkle-3 { left: 65%; top: 45%; }
  .scene-twinkle-4 { left: 8%; top: 43%; }
  .scene-twinkle-5 { left: 88%; top: 26%; }
  .scene-twinkle-6 { left: 38%; top: 29%; }
  .scene-twinkle-7 { left: 80%; top: 51%; }
  .scene-twinkle-8 { left: 5%; top: 55%; }
  .scene-twinkle-9 { left: 93%; top: 37%; }
}
@media (max-width: 600px) and (max-aspect-ratio: 6/5) {
  .scene-image, .scene-light { width: 180%; bottom: max(104px, 7rem); }
  .home-copy h1 { font-size: 2.5rem; }
  .home-copy p { font-size: 1.0625rem; }
  .home-actions { gap: .6rem; }
  .home-actions button { min-height: 56px; font-size: 1.125rem; }
  .start-button { min-width: 168px; padding-inline: 1.5rem; }
  .continue-button { min-width: 106px; padding-inline: .8rem; }
}
/* Portrait tablets have a shorter gap above the gallery mascot. Keep its raster
   scale/focus intact and put the copy in the scene's empty foreground instead. */
@media (min-width: 601px) and (max-aspect-ratio: 6/5) {
  .ttobak-home[data-scene='gallery'] .home-copy { inset-block-start:auto; inset-block-end:20%; }
}
@media (max-height: 620px) and (min-aspect-ratio: 6/5) {
  .ttobak-home { min-height: 360px; background: linear-gradient(var(--sky) 40%, var(--ground)); }
  .scene-image, .scene-light {
    inset: 0 0 0 auto; width: auto; height: 100%; object-fit: contain;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 100%);
  }
  .home-copy, [data-scene='garden'] .home-copy, [data-scene='gallery'] .home-copy, [data-scene='night'] .home-copy {
    inset-block-start: 14%; inset-block-end: auto; inset-inline-start: 6%; translate: none; text-align: left;
  }
  .home-copy h1 { font-size: 2.5rem; }
  .home-copy p { font-size: 1rem; }
  .home-actions { inset-inline-start: 6%; inset-inline-end: auto; gap: .6rem; }
  .home-actions button { font-size: 1rem; min-height: 48px; }
  .start-button { min-width: 160px; padding-inline: 1.25rem; }
  .continue-button { min-width: 96px; }
}
@media (max-width: 360px) and (max-aspect-ratio: 6/5) {
  .home-copy, [data-scene='garden'] .home-copy, [data-scene='gallery'] .home-copy, [data-scene='night'] .home-copy { inset-block-start: max(9%, 5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-image, .scene-light, .scene-twinkle { animation: none !important; transition: none !important; }
  .scene-light { opacity: 0 !important; }
  .scene-twinkle { display: none !important; }
}
@media (forced-colors: active) {
  .home-copy, .home-actions button { background: Canvas; color: CanvasText; }
  .home-actions button { border: 2px solid ButtonText; }
}

/* Keep the selected full-bleed scale. Per-scene focus protects the mascot
   on the user's wide viewport without introducing side panels or new layout. */
.ttobak-home[data-scene='garden'] .scene-image, .ttobak-home[data-scene='garden'] .scene-light { object-position: 50% 76%; }
.ttobak-home[data-scene='gallery'] .scene-image, .ttobak-home[data-scene='gallery'] .scene-light { object-position: 50% 30%; }
.ttobak-home[data-scene='night'] .scene-image, .ttobak-home[data-scene='night'] .scene-light { object-position: 50% 50%; }
/* Feather the raster accent edges so only the star glow reads, not a square crop. */
.scene-twinkle{-webkit-mask-image:radial-gradient(circle,#000 34%,transparent 70%);mask-image:radial-gradient(circle,#000 34%,transparent 70%)}

/* Ambient light stays in a small outer scene area. The approved raster,
   character, title and controls remain stationary. No timer or extra asset. */
.scene-art::after {
  content: ''; display: none; position: absolute; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
}
.ttobak-home[data-motion='on'][data-scene='garden'] .scene-art::after {
  display: block; left: 4%; top: 30%; width: 24%; height: 32%;
  background:
    radial-gradient(circle at 12% 24%, #fff8dcb3 0 .7px, transparent 1.8px),
    radial-gradient(circle at 56% 38%, #fff9e4a6 0 .5px, transparent 1.5px),
    radial-gradient(circle at 82% 16%, #fff8dcc2 0 .8px, transparent 2px),
    radial-gradient(circle at 24% 80%, #fff9e494 0 .5px, transparent 1.5px),
    radial-gradient(circle at 73% 66%, #fff8dcb3 0 .7px, transparent 1.8px),
    radial-gradient(circle at 43% 55%, #fff9e494 0 .5px, transparent 1.5px);
  animation: sunlit-dust 12s ease-in-out infinite;
}
.ttobak-home[data-motion='on'][data-scene='gallery'] .scene-art::after {
  display: block; left: 4%; top: 18%; width: 26%; height: 34%;
  background: linear-gradient(112deg, transparent 20%, #fff6d98c 46%, #fffef5a6 50%, transparent 70%);
  animation: gallery-light-pass 18s ease-in-out infinite;
}
/* Keep the same nine raster accents and their positions, sizes and periods.
   Dimmer distant stars add depth without increasing peak brightness. */
.scene-twinkle-1, .scene-twinkle-3, .scene-twinkle-5 { --twinkle-low: .14; --twinkle-high: .95; }
.scene-twinkle-2, .scene-twinkle-4, .scene-twinkle-7 { --twinkle-low: .10; --twinkle-high: .72; }
.scene-twinkle-6, .scene-twinkle-8, .scene-twinkle-9 { --twinkle-low: .06; --twinkle-high: .48; }
@keyframes sunlit-dust {
  0%, 100% { opacity: .14; transform: translate3d(0, 5px, 0); }
  50% { opacity: .62; transform: translate3d(5px, -7px, 0); }
}
@keyframes gallery-light-pass {
  0%, 18%, 82%, 100% { opacity: 0; transform: translate3d(-8px, 0, 0); }
  48% { opacity: .24; transform: translate3d(22px, -5px, 0); }
}
@media (max-aspect-ratio: 6/5) {
  .ttobak-home[data-motion='on'][data-scene='garden'] .scene-art::after { top: 32%; width: 24%; height: 25%; }
  .ttobak-home[data-motion='on'][data-scene='gallery'] .scene-art::after { top: 32%; width: 24%; height: 25%; }
}
@media (max-height: 620px) and (min-aspect-ratio: 6/5) {
  .ttobak-home[data-motion='on'][data-scene='garden'] .scene-art::after { top: 48%; height: 25%; }
  .ttobak-home[data-motion='on'][data-scene='gallery'] .scene-art::after { top: 44%; height: 28%; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .scene-art::after { display: none !important; animation: none !important; }
}
/* Native is the default. JavaScript must first position the desktop home cursor. */
.ttobak-light-cursor { display: none; position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 1000; pointer-events: none; }
.ttobak-light-cursor[hidden] { display: none !important; }
.ttobak-light-cursor > span {
  position: absolute; top: 0; left: 0; pointer-events: none; border-radius: 50%;
  transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0) translate(-50%, -50%);
}
.ttobak-light-cursor__dot {
  width: 6px; height: 6px; box-sizing: border-box; background: #fffbdc;
  border: 1px solid #b89144; box-shadow: 0 0 5px #ffe39c70; transition: none;
}
.ttobak-light-cursor__halo {
  width: 26px; height: 26px; box-sizing: border-box; border: 1px solid #edc87770;
  background: radial-gradient(circle, #fff8d633 25%, #ffe3a625 50%, transparent 72%);
  box-shadow: 0 0 12px #fff0a52b;
  transition: transform 140ms ease-out, width 120ms ease-out, height 120ms ease-out;
}
.ttobak-light-cursor[data-over-button='true'] .ttobak-light-cursor__halo { width: 34px; height: 34px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ttobak-light-cursor { display: block; }
  .ttobak-home[data-light-cursor='active'], .ttobak-home[data-light-cursor='active'] * { cursor: none !important; }
  /* Defensive exceptions preserve native controls/text even before JS responds. */
  .ttobak-home[data-light-cursor='active'] :is(form, form *, input, textarea, select, option, [contenteditable], [contenteditable] *, [data-native-cursor], [data-native-cursor] *, .home-copy, .home-copy *, .home-status, .home-status *) { cursor: auto !important; }
}

/* Small, bounded accents accompany the existing pointer/mascot without covering
   its hit point. The layer cannot intercept selection, clicks, focus or dragging. */
.ttobak-cursor-effects {
  display: none; position: fixed; inset: 0; overflow: hidden; z-index: 999;
  pointer-events: none; contain: strict;
}
.ttobak-cursor-effects > span {
  position: absolute; left: var(--effect-x); top: var(--effect-y);
  pointer-events: none; box-sizing: border-box;
}
.ttobak-cursor-effects__sparkle {
  width: 11px; height: 11px; background: #c98c24;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  animation: ttobak-cursor-sparkle 520ms ease-out both;
}
.ttobak-cursor-effects__pop {
  width: 30px; height: 30px; border: 2px solid #6c9254; border-radius: 50%;
  background: transparent; animation: ttobak-cursor-pop 440ms ease-out both;
}
@keyframes ttobak-cursor-sparkle {
  from { opacity: .95; transform: translate(-50%, -50%) scale(1); }
  20% { opacity: .9; }
  to { opacity: 0; transform: translate(-50%, 5px) scale(.25) rotate(35deg); }
}
@keyframes ttobak-cursor-pop {
  from { opacity: .85; transform: translate(-50%, -50%) scale(.55); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .ttobak-cursor-effects { display: block; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .ttobak-cursor-effects { display: none !important; }
  .ttobak-cursor-effects > span { animation: none !important; }
}

/* Independent introduction link; the original scene and start controls stay put. */
.ttobak-home .home-about-link{position:absolute;z-index:5;top:12px;right:16px;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid #d1ddca;border-radius:14px;background:#fffdf0e8;color:#254c42;text-decoration:none;font:500 14px/1.4 'Ttobak Home',sans-serif}
.ttobak-home .home-about-link:focus-visible{outline:3px solid #197c99;outline-offset:3px}