@charset "utf-8";
/* ==========================================================================
   728 PRODUCTION Design System — 02. Base
   Reset · Element defaults · Typography / Utility classes
   ========================================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: -.005em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, pre { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
}

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { padding: 0; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }

table { border-collapse: collapse; border-spacing: 0; }
address { font-style: normal; }
hr { margin: 0; border: 0; border-top: var(--bw-2) solid var(--c-line); }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

::selection { background: var(--c-selection); color: var(--ink-900); }

/* data-theme 영역은 자체 배경/전경색을 가진다 */
[data-theme] { background-color: var(--c-bg); color: var(--c-fg); }

/* ---------- Accessibility ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--sp-4);
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-accent);
  color: var(--ink-900);
  border: var(--bw-2) solid var(--ink-900);
  font-weight: var(--fw-bold);
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Typography utilities
   ========================================================================== */
.t-display-xl,
.t-display-l,
.t-display-m,
.t-display-s {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-synthesis: none;
  line-height: var(--lh-display);
  letter-spacing: -.01em;
}
.t-display-xl { font-size: var(--fs-display-xl); }
.t-display-l { font-size: var(--fs-display-l); }
.t-display-m { font-size: var(--fs-display-m); }
.t-display-s { font-size: var(--fs-display-s); }

.t-h1, .t-h2, .t-h3, .t-h4 { font-weight: var(--fw-black); letter-spacing: var(--ls-tight); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); }

.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.t-jp {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-synthesis: none;
  letter-spacing: .08em;
}

.t-mono { font-family: var(--font-mono); }
.t-outline { color: transparent; -webkit-text-stroke: var(--stroke, 2px) var(--stroke-color, var(--c-fg)); }
.t-pop { text-shadow: .06em .06em 0 var(--pop, var(--c-primary)); }
.t-vertical { writing-mode: vertical-rl; text-orientation: mixed; }

.t-muted { color: var(--c-fg-muted); }
.t-subtle { color: var(--c-fg-subtle); }
.t-primary { color: var(--c-primary-strong); }
.t-center { text-align: center; }
.t-nowrap { white-space: nowrap; }

.t-clamp-1, .t-clamp-2, .t-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.t-clamp-1 { -webkit-line-clamp: 1; }
.t-clamp-2 { -webkit-line-clamp: 2; }
.t-clamp-3 { -webkit-line-clamp: 3; }

/* ==========================================================================
   Background patterns (일본 만화/애니 톤의 장식 레이어)
   ※ 욱일기를 연상시킬 수 있는 방사형 집중선(선버스트)은 사용하지 않습니다.
   ========================================================================== */
.bg-halftone {
  background-image: radial-gradient(var(--dot-color, var(--c-dot)) 1.5px, transparent 1.9px);
  background-size: var(--dot-size, 14px) var(--dot-size, 14px);
}

.bg-grid {
  background-image:
    linear-gradient(var(--grid-color, rgb(21 16 31 / .06)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color, rgb(21 16 31 / .06)) 1px, transparent 1px);
  background-size: var(--grid-size, 32px) var(--grid-size, 32px);
}

/* 이치마츠(市松) 체크 */
.bg-check {
  background-image: conic-gradient(
    var(--check-color, rgb(21 16 31 / .05)) 25%, transparent 0 50%,
    var(--check-color, rgb(21 16 31 / .05)) 0 75%, transparent 0
  );
  background-size: var(--check-size, 32px) var(--check-size, 32px);
}

/* 비눗방울 · 보케 */
.bg-bubble {
  background-image:
    radial-gradient(circle at 20% 30%, var(--bubble-color, rgb(255 46 139 / .12)) 0 18px, transparent 19px),
    radial-gradient(circle at 70% 70%, transparent 0 22px, var(--bubble-color, rgb(255 46 139 / .12)) 23px 26px, transparent 27px),
    radial-gradient(circle at 85% 20%, var(--bubble-color, rgb(255 46 139 / .12)) 0 8px, transparent 9px);
  background-size: 180px 180px;
}

.bg-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--stripe-color, rgb(21 16 31 / .08)) 0 10px,
    transparent 10px 20px
  );
}

/* ==========================================================================
   Spacing / display utilities (최소한만 제공)
   ========================================================================== */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-4 { margin-top: var(--sp-4) !important; }
.u-mt-8 { margin-top: var(--sp-8) !important; }
.u-mt-12 { margin-top: var(--sp-12) !important; }
.u-mt-16 { margin-top: var(--sp-16) !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-relative { position: relative; }
.u-w-full { width: 100%; }

@media (max-width: 767px) { .u-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .u-hide-desktop { display: none !important; } }