/* 멍글 — 보호자 화면 틀(헤더·메뉴·푸터·아래 탭 바) + 견본 화면(홈·예약 신청·알림장·로그인). 공유 파일.
   담당 화면 CSS 는 info.css · pet.css · book.css · pass.css 에 접두어 클래스(.info- · .pet- · .book- · .pass-)로. 휴대폰 먼저. */

/* ── 헤더 ─────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--glass); backdrop-filter: saturate(1.4) blur(.75rem); border-bottom: .0625rem solid var(--line); transition: box-shadow var(--t-mid) var(--ease); }
.site-header.is-scrolled { box-shadow: var(--shadow); }
.util-bar { background: var(--paper); font-size: var(--fs-xs); color: var(--ink-2); }
.util-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 2.25rem; }
.util-hi { display: inline-flex; align-items: center; gap: .375rem; }
.util-links { display: flex; align-items: center; gap: .125rem; margin-left: auto; }
.util-links a, .util-links button { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .5rem; font-weight: 600; color: var(--ink-2); border-radius: var(--r-sm); }
.util-links a:hover, .util-links button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .1875rem; }
.util-links a[aria-current="page"] { color: var(--accent-ink); }
.util-name { font-weight: 700; color: var(--ink); padding: 0 .5rem; }
.head-row { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }
.gnb { flex: 1 1 auto; min-width: 0; }
.gnb-list { display: flex; align-items: center; gap: .125rem; }
.gnb-item { position: relative; }
.gnb-btn { display: inline-flex; align-items: center; gap: .25rem; min-height: var(--tap); padding: 0 .75rem; border-radius: var(--r-pill); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.gnb-btn:hover { background: var(--surface-2); color: var(--ink); }
.gnb-btn[aria-current="page"], .gnb-item.is-on > .gnb-btn { color: var(--accent-ink); background: var(--accent-soft); }
.gnb-btn[aria-expanded="true"] .dd-chev { transform: rotate(180deg); }
.dd-chev { transition: transform var(--t-short) var(--ease); }
.gnb-dd { position: absolute; top: calc(100% + .375rem); left: 0; z-index: 45; min-width: 14rem; padding: .375rem; background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.gnb-dd a { display: flex; align-items: center; gap: .625rem; min-height: var(--tap); padding: 0 .75rem; border-radius: var(--r-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.gnb-dd a .ic { color: var(--accent-ink); }
.gnb-dd a:hover { background: var(--surface-2); color: var(--ink); }
.gnb-dd a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.header-actions { display: flex; align-items: center; gap: .375rem; margin-left: auto; }
.menu-btn { display: none; }
.site-menu { border-top: .0625rem solid var(--line); background: var(--surface); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.site-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sp-4); padding: var(--sp-4) 0; }
.sm-title { font-size: var(--fs-sm); font-weight: 800; color: var(--ink-3); margin-bottom: .25rem; }
.sm-group a { display: flex; align-items: center; gap: .625rem; min-height: var(--tap); padding: 0 .5rem; border-radius: var(--r-sm); font-weight: 650; }
.sm-group a .ic { color: var(--accent-ink); }
.sm-group a:hover, .sm-group a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.site-menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding-bottom: var(--sp-4); }
.show-m { display: none !important; }
@media (max-width: 1080px) {
  .gnb { display: none; }
  .menu-btn { display: inline-grid; }
}
@media (max-width: 760px) {
  .hide-m { display: none !important; }
  .show-m { display: inline-grid !important; }
  .util-links { margin-left: auto; }
}

/* ── 본문 · 푸터 ───────────────────── */
.main { display: block; min-height: 60vh; }
.site-footer { background: var(--night); color: var(--on-night-2); margin-top: var(--sp-8); padding: var(--sp-7) 0 var(--sp-6); font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--on-night); text-decoration: underline; }
.f-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: .0625rem solid var(--night-line); }
.f-brand .logo { margin-bottom: var(--sp-3); }
.f-promise { max-width: 22rem; line-height: 1.7; }
.f-title { color: var(--on-night); font-weight: 750; margin-bottom: var(--sp-2); }
.f-links { display: flex; flex-direction: column; }
.f-links a, .f-contact a { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.25rem; }
.f-contact p { margin-bottom: .25rem; }
.f-tel { color: var(--on-night); font-weight: 750; font-size: var(--fs-lg); }
.f-biz { padding-top: var(--sp-5); line-height: 1.8; font-size: var(--fs-xs); }
.f-demo { color: var(--accent-on-night); }
@media (max-width: 900px) { .f-top { grid-template-columns: 1fr 1fr; } .f-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .f-top { grid-template-columns: 1fr; } }

/* ── 모바일 아래 탭 바 ─────────────── */
.tabbar { display: none; }
@media (max-width: 760px) {
  .has-tabbar { --tabbar-h: 4rem; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: .0625rem solid var(--line); box-shadow: var(--shadow-up); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; font-size: .75rem; font-weight: 700; color: var(--ink-3); }
  .tabbar a .ic { width: 1.375rem; height: 1.375rem; }
  .tabbar a[aria-current="page"] { color: var(--accent-ink); }
  .site-footer { margin-top: var(--sp-7); }
}

/* ── 공용 보호자 레이아웃 ─────────── */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-5); align-items: start; }
.two-col > aside { position: sticky; top: calc(var(--header-h) + 3rem); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 960px) { .two-col { grid-template-columns: minmax(0, 1fr); } .two-col > aside { position: static; } }
.box { background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.box-title { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-lg); font-weight: 800; margin-bottom: var(--sp-3); }
.box-title .ic { color: var(--accent); }
@media (max-width: 760px) { .box { padding: var(--sp-4); border-radius: var(--r); } }

/* ── 홈 ─────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--paper); isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-shade); }
.hero-inner { min-height: 34rem; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-7) 0; max-width: 36rem; }
.hero h1 { font-size: var(--fs-h1); font-weight: 850; letter-spacing: -0.04em; line-height: 1.18; }
.hero h1 em { font-style: normal; color: var(--accent-ink); }
.hero-lead { margin-top: var(--sp-4); font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.75; }
.hero .btn-row { margin-top: var(--sp-5); }
.hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-5); }
.hero-badges span { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: var(--r-pill); background: var(--surface); border: .0625rem solid var(--line); font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); }
.hero-badges .ic { color: var(--accent); width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: hero-drift 18s var(--ease) infinite alternate; transform-origin: 70% 50%; }
}
@keyframes hero-drift { from { transform: scale(1.02); } to { transform: scale(1.09) translateX(-1%); } }
@media (max-width: 760px) {
  .hero { background: var(--bg); }
  .hero-photo { position: relative; height: 15rem; }
  .hero::after { background: var(--hero-shade-m); top: 7rem; height: 8rem; bottom: auto; }
  .hero-inner { min-height: 0; padding: var(--sp-4) 0 var(--sp-6); }
}
.home-sec { padding: var(--sp-7) 0 0; }
.home-me { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.me-card { display: flex; flex-direction: column; gap: .5rem; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: .0625rem solid var(--line); min-width: 0; }
.me-card .k { display: flex; align-items: center; gap: .5rem; font-weight: 750; color: var(--ink-2); }
.me-card .k .ic { color: var(--accent); }
.me-card .v { font-size: 1.5rem; font-weight: 850; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.me-card .v small { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); margin-left: .125rem; }
.me-card .d { font-size: var(--fs-sm); color: var(--ink-3); }
.me-card .link { margin-top: auto; font-size: var(--fs-sm); }
@media (max-width: 900px) { .home-me { grid-template-columns: minmax(0, 1fr); } }
.feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.feat { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: .0625rem solid var(--line); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
.feat:hover { transform: translateY(-.1875rem); box-shadow: var(--shadow); border-color: var(--accent-line); }
.feat .ico-box { width: 3rem; height: 3rem; border-radius: var(--r); }
.feat h3 { font-size: var(--fs-lg); margin-top: .25rem; }
.feat h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.feat h3 a:focus-visible { box-shadow: none; }
.feat h3 a:focus-visible::after { box-shadow: var(--focus); }
.feat p { color: var(--ink-3); font-size: var(--fs-sm); }
.feat .more { margin-top: auto; display: inline-flex; align-items: center; gap: .25rem; font-weight: 750; color: var(--accent-ink); font-size: var(--fs-sm); }
@media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: minmax(0, 1fr); } .feat { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--sp-4); } .feat h3 { margin: 0; } .feat p { flex-basis: 100%; } }
.home-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-5); }
@media (max-width: 960px) { .home-split { grid-template-columns: minmax(0, 1fr); } }
.notice-list li { border-bottom: .0625rem solid var(--line); }
.notice-list li:last-child { border-bottom: 0; }
.notice-list a { display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .5rem .25rem; }
.notice-list a:hover .t { text-decoration: underline; }
.notice-list .t { flex: 1 1 auto; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-list .dt { color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .notice-list a { flex-wrap: wrap; gap: .25rem .5rem; } .notice-list .t { flex-basis: calc(100% - 4rem); white-space: normal; } .notice-list .dt { flex-basis: 100%; } }
.banner { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-4); align-items: center; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--accent-soft); }
.banner img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.banner h3 { font-size: var(--fs-lg); }
.banner p { color: var(--ink-2); font-size: var(--fs-sm); margin: .25rem 0 .5rem; }
@media (max-width: 560px) { .banner { grid-template-columns: 6.5rem minmax(0, 1fr); } }
.info-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.info-card { display: flex; gap: .75rem; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: .0625rem solid var(--line); }
.info-card h3 { font-size: var(--fs-md); margin-bottom: .25rem; }
.info-card p { color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 900px) { .info-cards { grid-template-columns: minmax(0, 1fr); } }
.home-photos { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-3); }
.home-photos figure { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; }
.home-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-photos figcaption { position: absolute; left: .75rem; bottom: .75rem; padding: .25rem .625rem; border-radius: var(--r-pill); background: var(--glass); font-size: var(--fs-sm); font-weight: 700; }
@media (max-width: 760px) { .home-photos { grid-template-columns: 1fr 1fr; } .home-photos figure:first-child { grid-column: 1 / -1; } }
.guest-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-6); border-radius: var(--r-lg); background: var(--night); color: var(--on-night); }
.guest-cta h2 { font-size: var(--fs-h3); }
.guest-cta p { color: var(--on-night-2); margin-top: .25rem; }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); counter-reset: f; }
.flow li { position: relative; padding: var(--sp-4); border-radius: var(--r); background: var(--surface); border: .0625rem solid var(--line); font-weight: 700; }
.flow li small { display: block; font-weight: 500; color: var(--ink-3); font-size: var(--fs-sm); margin-top: .25rem; }
.flow li::before { counter-increment: f; content: counter(f); display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: var(--fs-sm); margin-bottom: .5rem; }
@media (max-width: 760px) { .flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── 예약 신청서(견본) ───────────── */
.ap-form .field + .field { margin-top: 0; }
.ap-kind .seg-opt span { min-height: 3.5rem; flex-direction: column; gap: 0; }
.ap-kind .seg-opt small { font-weight: 500; font-size: var(--fs-xs); opacity: .85; }
.ap-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
@media (max-width: 560px) { .ap-row { grid-template-columns: minmax(0, 1fr); } }
.ap-check li { display: flex; align-items: flex-start; gap: .625rem; padding: .625rem 0; border-bottom: .0625rem solid var(--line); }
.ap-check li:last-child { border-bottom: 0; }
.ap-check .ic-st { width: 1.25rem; height: 1.25rem; margin-top: .125rem; flex: none; }
.ap-check .is-ok .ic-st { color: var(--ok); }
.ap-check .is-warn .ic-st { color: var(--warn); }
.ap-check .is-bad .ic-st { color: var(--danger); }
.ap-check strong { display: block; font-size: var(--fs-sm); color: var(--ink-3); font-weight: 650; }
.ap-check span.v { font-weight: 700; }
.ap-check small { display: block; color: var(--ink-3); font-size: var(--fs-xs); margin-top: .125rem; }
.ap-done { text-align: center; padding: var(--sp-6) var(--sp-4) var(--sp-4); }
.ap-done .ico-box { margin: 0 auto var(--sp-3); }
.ap-done h1 { font-size: var(--fs-h2); }
.ap-no { display: inline-block; margin-top: var(--sp-3); padding: .375rem .875rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── 알림장(견본) ──────────────── */
.rp-filter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: end; }
.rp-filter .field > label { font-size: var(--fs-sm); }
@media (max-width: 900px) { .rp-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rp-filter .btn { grid-column: 1 / -1; } }
.rp-filter-box > summary { list-style: none; display: none; }
@media (max-width: 760px) {
  .rp-filter-box > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); font-weight: 750; cursor: pointer; }
  .rp-filter-box > summary::-webkit-details-marker { display: none; }
  .rp-filter-box[open] > summary { margin-bottom: var(--sp-3); }
}
.rp-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-5) 0 var(--sp-3); }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-4); }
.rp-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: .0625rem solid var(--line); overflow: hidden; transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.rp-card:hover { transform: translateY(-.1875rem); box-shadow: var(--shadow); }
.rp-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.rp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rp-thumb .badge { position: absolute; top: .625rem; left: .625rem; }
.rp-thumb .rp-cnt { position: absolute; right: .625rem; bottom: .625rem; display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: var(--r-pill); background: var(--glass); font-size: var(--fs-xs); font-weight: 750; }
.rp-thumb .rp-cnt .ic { width: .875rem; height: .875rem; }
.rp-thumb.is-draft { display: grid; place-items: center; color: var(--ink-3); background: repeating-linear-gradient(135deg, var(--surface-2) 0 .75rem, var(--surface-3) .75rem 1.5rem); }
.rp-body { display: flex; flex-direction: column; gap: .5rem; padding: var(--sp-4); flex: 1; }
.rp-body h3 { font-size: var(--fs-lg); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rp-body h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.rp-body h3 a:focus-visible { box-shadow: none; }
.rp-body h3 a:focus-visible::after { box-shadow: var(--focus); }
.rp-body .dt { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; }
.rp-body .more { margin-top: auto; display: inline-flex; align-items: center; gap: .25rem; color: var(--accent-ink); font-weight: 750; font-size: var(--fs-sm); }
.rp-draft-btn { margin-top: auto; text-align: left; color: var(--ink-3); font-weight: 650; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: .25rem; min-height: var(--tap); }
.rp-draft-btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.rp-draft-btn:focus-visible { box-shadow: none; }
.rp-draft-btn:focus-visible::after { box-shadow: var(--focus); }
@media (max-width: 560px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .rp-card { flex-direction: row; }
  .rp-thumb { width: 7.5rem; flex: none; aspect-ratio: auto; }
  .rp-body { padding: .75rem; gap: .375rem; }
  .rp-body h3 { font-size: var(--fs-md); }
  .rp-card .rep-chips { grid-template-columns: minmax(0, 1fr); font-size: var(--fs-xs); }
}
/* 알림장 상세 */
.rd-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rd-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--ink-3); font-size: var(--fs-sm); margin-top: .375rem; }
.rd-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.rd-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.rd-rec { display: flex; gap: .75rem; padding: var(--sp-4); border-radius: var(--r); background: var(--surface-3); border: .0625rem solid var(--line); }
.rd-rec .ico-box { width: 2.5rem; height: 2.5rem; }
.rd-rec dt { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 650; }
.rd-rec dd { font-weight: 750; }
.rd-rec dd small { display: block; font-weight: 500; color: var(--ink-2); font-size: var(--fs-sm); margin-top: .125rem; }
@media (max-width: 560px) { .rd-records { grid-template-columns: minmax(0, 1fr); } }
.rd-comment { display: flex; gap: .875rem; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--accent-soft); }
.rd-comment .who { font-weight: 800; color: var(--accent-ink); font-size: var(--fs-sm); }
.rd-comment p { margin-top: .25rem; line-height: 1.75; }
.rd-past a { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .25rem; border-bottom: .0625rem solid var(--line); min-height: var(--tap); }
.rd-past li:last-child a { border-bottom: 0; }
.rd-past a:hover .t { text-decoration: underline; }
.rd-past .t { font-weight: 700; }
.rd-past .dt { font-size: var(--fs-xs); color: var(--ink-3); }
.dog-card { display: flex; align-items: center; gap: .875rem; }
.dog-card .nm { font-weight: 800; font-size: var(--fs-lg); }
.dog-card .sub { color: var(--ink-3); font-size: var(--fs-sm); }

/* ── 로그인(동작 견본 — info 가 다듬음) ─── */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.auth-card { background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); }
.auth-card h1 { font-size: var(--fs-h2); }
.auth-card .lead { color: var(--ink-3); margin-top: .25rem; font-size: var(--fs-md); }
.auth-links { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); font-size: var(--fs-sm); }
.auth-links a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 .3rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: .1875rem; }
.auth-links > span { display: inline-flex; align-items: center; color: var(--ink-3); }
.auth-links > span[aria-hidden="true"] { color: var(--line-strong); } /* 구분 점만 흐리게 */
.auth-side { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.auth-side img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.auth-points { display: flex; flex-direction: column; gap: .75rem; padding: var(--sp-5); }
.auth-points li { display: flex; gap: .625rem; align-items: flex-start; }
.auth-points .ic { color: var(--accent); margin-top: .1875rem; }
.auth-points strong { display: block; }
.demo-box { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin-top: 1.25rem; padding: .85rem 1rem; border-radius: var(--r); background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-2); }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: minmax(0, 1fr); } .auth-side { display: none; } .auth-card { padding: var(--sp-5) var(--sp-4); } }
.err-logo { margin-bottom: var(--sp-4); }