:root { color-scheme: light; --header-height: 92px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; color: #392d52; background: #fff8fc; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-height); background: #fffdf9f5; border-bottom: 1px solid #eadff0; backdrop-filter: blur(12px); }
.header-inner { width: min(100%, 1120px); height: 100%; margin: auto; padding: 10px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; }
.site-brand { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 21px; font-weight: 900; white-space: nowrap; letter-spacing: -.8px; color: #4a334d; }
.site-brand-symbol { display: block; flex: 0 0 62px; width: 62px; height: 56px; object-fit: contain; border-radius: 12px; }
.service-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 404px; }
.service-tab { --tab-accent: #765582; --tab-border: #e4dbe7; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 70px; padding: 7px 16px; border: 1px solid var(--tab-border); border-radius: 18px; text-decoration: none; color: #665673; background: linear-gradient(145deg, #ede7e9, #f8f3ec); box-shadow: 0 3px 10px #54365806; transition: border-color .18s, box-shadow .18s, background .18s; }
.service-tab--talisman { --tab-accent: #a26731; --tab-border: #ecddc7; color: #875128; background: linear-gradient(145deg, #fff7e9, #fffdf8); }
.service-tab-name { font-size: 17px; line-height: 1.4; font-weight: 800; word-break: keep-all; }
.service-tab-art { flex: 0 0 46px; width: 46px; height: 54px; object-fit: contain; }
.service-tab[aria-current="page"] { border-color: var(--tab-accent); box-shadow: inset 0 -3px 0 var(--tab-accent), 0 4px 12px #5436580a; background: linear-gradient(145deg, #eae0f0, #f8f3ec); }
.service-tab--talisman[aria-current="page"] { background: linear-gradient(145deg, #ffedce, #fff9ed); }
.service-tab:focus-visible { outline: 3px solid #9463c7; outline-offset: 3px; }
@media (hover: hover) { .service-tab:hover { border-color: var(--tab-accent); box-shadow: 0 4px 12px #54365812; } }
#service-panels { position: fixed; inset: var(--header-height) 0 0; }
.service-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff8fc; }
.service-frame[hidden] { display: none; }
.site-loading { text-align: center; padding: 60px 20px; color: #796689; }
@media (max-width: 880px) {
  :root { --header-height: 142px; }
  .header-inner { padding: 7px 14px 11px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px 1fr; gap: 8px; justify-items: center; }
  .site-brand { justify-self: center; font-size: 20px; }
  .site-brand-symbol { flex-basis: 53px; width: 53px; height: 48px; }
  .service-tabs { width: min(100%, 404px); gap: 10px; }
  .service-tab { min-height: 64px; padding: 5px 12px; gap: 8px; border-radius: 16px; }
  .service-tab-name { font-size: 16px; }
  .service-tab-art { flex-basis: 40px; width: 40px; height: 50px; }
}
@media (max-width: 360px) {
  .header-inner { padding-inline: 10px; }
  .service-tabs { gap: 8px; }
  .service-tab { padding-inline: 9px; gap: 6px; }
  .service-tab-art { flex-basis: 34px; width: 34px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .service-tab { transition: none; } }