:root {
  --primary: #111111; --primary-active: #242424; --primary-disabled: #e5e7eb;
  --ink: #111111; --body: #374151; --muted: #6b7280; --muted-soft: #898989;
  --hairline: #e5e7eb; --hairline-soft: #f3f4f6; --canvas: #ffffff;
  --surface-soft: #f8f9fa; --surface-card: #f5f5f5; --surface-strong: #e5e7eb;
  --surface-dark: #101010; --surface-dark-elevated: #1a1a1a; --on-primary: #ffffff;
  --on-dark: #ffffff; --on-dark-soft: #a1a1aa; --brand-accent: #3b82f6;
  --success: #10b981; --warning: #f59e0b; --error: #ef4444;
  --badge-orange: #fb923c; --badge-pink: #ec4899; --badge-violet: #8b5cf6; --badge-emerald: #34d399;
  --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 96px;
  --radius-xs: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-full: 0px;
  --font-display: "Cal Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.05); --shadow-raised: 0 4px 12px rgba(0,0,0,.08);
}
/* 모든 UI는 직각 모서리를 사용하며 브라우저 기본 입력 요소도 예외가 없습니다. */
* { box-sizing: border-box; border-radius: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--body); font: 400 15px/1.5 var(--font-body); }
a { color: var(--ink); text-decoration: none; }
button, input, select, textarea { font: inherit; }
/* 기본 heading 크기도 상한을 적용해 미지정 제목에 브라우저의 큰 글꼴이 나오지 않게 합니다. */
h1, h2, h3, h4, h5, h6 { font-size: 15px; }
.container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.topNav { position: sticky; top: 0; z-index: 20; height: 64px; background: var(--canvas); border-bottom: 1px solid var(--hairline-soft); }
.navInner { height: 100%; display: flex; align-items: center; gap: var(--space-xl); }
.wordmark, .footerBrand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--ink); font: 600 15px/1 var(--font-display); letter-spacing: 0; white-space: nowrap; }
.brandMark { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font: 600 13px/1 var(--font-display); }
.desktopNav { display: flex; align-items: center; justify-content: center; gap: var(--space-xl); margin: 0 auto; }
.desktopNav a, .textButton { font-size: 14px; font-weight: 500; line-height: 1.4; }
.navActions { display: flex; align-items: center; gap: var(--space-md); }
.accountNameLink { min-height: 36px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--radius-full); background: var(--surface-card); color: var(--ink); font-size: 14px; font-weight: 600; }
.mobileMenu { display: none; margin-left: auto; position: relative; }
.mobileMenu summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; }
.mobileMenu summary::-webkit-details-marker { display: none; }
.mobileMenu nav { position: absolute; top: 42px; right: 0; width: 220px; padding: var(--space-md); display: grid; gap: var(--space-xs); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--canvas); box-shadow: var(--shadow-raised); }
.mobileMenu nav a { padding: var(--space-sm); border-radius: var(--radius-md); font-weight: 500; }

.buttonPrimary, .buttonSecondary, .authAction, .mockAction { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: var(--radius-md); border: 1px solid transparent; font: 600 14px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.buttonPrimary, .authAction, .mockAction { background: var(--primary); color: var(--on-primary); }
.buttonSecondary { background: var(--canvas); color: var(--ink); border-color: var(--hairline); }
.buttonPrimary:active, .authAction:active, .mockAction:active { background: var(--primary-active); }
.buttonPrimary:focus-visible, .buttonSecondary:focus-visible, .authAction:focus-visible, .mockAction:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.buttonRow { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.badge, .stateBadge, .liveBadge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 12px; border-radius: var(--radius-full); background: var(--surface-card); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.4; }
.liveBadge { color: var(--body); }
.stateBadge { background: var(--surface-soft); }

.heroBand { padding: var(--space-section) 0; background: var(--canvas); }
.heroGrid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-xxl); align-items: center; }
.heroCopy h1 { margin: var(--space-lg) 0; color: var(--ink); font: 600 15px/1.05 var(--font-display); letter-spacing: 0; }
.heroLead { max-width: 610px; margin: 0 0 var(--space-xl); color: var(--body); font-size: 15px; line-height: 1.4; }
.fineText { margin: var(--space-md) 0 0; color: var(--muted-soft); font-size: 13px; line-height: 1.4; }
.appMock { overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--canvas); box-shadow: var(--shadow-raised); }
.mockHeader { min-height: 72px; padding: var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--hairline-soft); }
.miniProfile { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.miniProfile strong, .miniProfile small { display: block; }
.miniProfile strong { color: var(--ink); font-size: 14px; }
.miniProfile small { color: var(--muted); font-size: 13px; }
.avatar { width: 36px; height: 36px; flex: 0 0 36px; display: inline-grid; place-items: center; border-radius: var(--radius-full); color: var(--ink); font-size: 13px; font-weight: 600; }
.avatarOrange { background: var(--badge-orange); }
.avatarPink { background: var(--badge-pink); }
.avatarViolet { background: var(--badge-violet); }
.avatarEmerald { background: var(--badge-emerald); }
.scheduleGrid { display: grid; grid-template-columns: .95fr 1.05fr; }
.calendarPanel, .sessionPanel { padding: var(--space-lg); min-width: 0; }
.calendarPanel { border-right: 1px solid var(--hairline-soft); }
.calendarTitle { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); color: var(--ink); font-size: 14px; }
.weekRow, .dateGrid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.weekRow { margin-bottom: var(--space-xs); color: var(--muted); font-size: 11px; }
.dateGrid { gap: var(--space-xxs); font-size: 12px; }
.dateGrid span { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-full); }
.dateGrid .mutedDate { color: var(--muted-soft); }
.dateGrid .selectedDate { background: var(--primary); color: var(--on-primary); }
.panelLabel { margin: 0 0 var(--space-md); color: var(--muted); font-size: 13px; font-weight: 500; }
.sessionItem { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: start; padding: var(--space-sm) 0; border-top: 1px solid var(--hairline-soft); }
.sessionItem time { color: var(--ink); font-size: 13px; font-weight: 600; }
.sessionItem strong, .sessionItem span { display: block; }
.sessionItem strong { color: var(--ink); font-size: 13px; }
.sessionItem div span { color: var(--muted); font-size: 12px; }
.statusDot { width: 8px; height: 8px; margin-top: var(--space-xxs); border-radius: var(--radius-full); background: var(--success); }
.mockAction { width: 100%; margin-top: var(--space-md); }

.bandSoft, .productBand, .ctaSection { padding: var(--space-section) 0; }
.bandSoft { background: var(--surface-soft); }
.productBand, .ctaSection { background: var(--canvas); }
.sectionHeader { max-width: 760px; margin: 0 auto var(--space-xxl); text-align: center; }
.sectionHeader .badge { margin: 0 auto; }
.sectionHeader h2, .productCopy h2, .ctaCard h2, .accountHero h1, .authIntro h1 { margin: var(--space-lg) 0 var(--space-md); color: var(--ink); font: 600 15px/1.1 var(--font-display); letter-spacing: 0; }
.sectionHeader p, .productCopy > p, .ctaCard > p, .accountHero > p, .authIntro > p { margin: 0; color: var(--body); }
.iconGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.featureCard { padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-card); }
.featureCard h3, .iconCard h3 { margin: 0 0 var(--space-xs); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.featureCard > p, .iconCard > p { margin: 0; color: var(--body); }
.cardLink { color: var(--ink); font-size: 14px; font-weight: 600; }
.filterField { display: grid; gap: var(--space-xs); color: var(--ink); font-size: 14px; font-weight: 500; }
.filterField input, .filterField select { width: 100%; height: 40px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--canvas); color: var(--ink); outline: 0; }
.filterField input:focus, .filterField select:focus { border-color: var(--ink); }
.thumbnailCaption { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .4px; }
.loadMoreRow { display: flex; justify-content: center; margin-top: var(--space-xl); }

.productSplit { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xxl); align-items: center; }
.productCopy h2 { font-size: 15px; }
.productCopy > p { margin-bottom: var(--space-xl); }
.productMock { padding: var(--space-lg); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--canvas); box-shadow: var(--shadow-soft); }
.navPill { width: fit-content; display: flex; flex-wrap: wrap; gap: var(--space-xxs); padding: 6px; margin-bottom: var(--space-lg); border-radius: var(--radius-full); background: var(--surface-soft); color: var(--muted); font-size: 14px; font-weight: 500; }
.navPill span { padding: 8px 14px; border-radius: var(--radius-md); }
.navPill .active { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-soft); }
.productList article { min-height: 76px; display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-md); align-items: center; padding: var(--space-md); border-top: 1px solid var(--hairline-soft); }
.productIcon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-lg); color: var(--ink); font-size: 11px; font-weight: 600; }
.productList strong, .productList small { display: block; }
.productList strong { color: var(--ink); font-size: 14px; }
.productList small, .productList article > span:last-child { color: var(--muted); font-size: 13px; }
.progressTrack { height: 4px; margin-top: var(--space-xs); border-radius: var(--radius-full); background: var(--surface-strong); }
.progressTrack span { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--brand-accent); }
.iconCard { padding: var(--space-lg); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--canvas); }
.featureIcon { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: var(--space-lg); border: 1px solid var(--hairline); border-radius: var(--radius-full); background: var(--canvas); color: var(--ink); font-size: 13px; font-weight: 600; }
.ctaCard { padding: var(--space-xxl); border-radius: var(--radius-lg); background: var(--surface-card); text-align: center; }
.ctaCard .badge { margin: 0 auto; background: var(--canvas); }
.ctaCard h2 { font-size: 15px; letter-spacing: 0; }
.ctaCard > p { margin-bottom: var(--space-lg); }

.siteFooter { padding: 64px 0; background: var(--surface-dark); color: var(--on-dark-soft); font-size: 14px; }
.footerGrid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-xl); }
.footerBrand { color: var(--on-dark); }
.siteFooter .brandMark { background: var(--on-dark); color: var(--surface-dark); }
.footerGrid p { color: var(--on-dark-soft); }
.footerGrid strong { display: block; margin-bottom: var(--space-md); color: var(--on-dark); font-size: 14px; }
.footerGrid > div > a:not(.footerBrand) { display: block; margin-bottom: var(--space-sm); color: var(--on-dark-soft); }
.legalRow { margin-top: var(--space-xxl); padding-top: var(--space-lg); display: flex; justify-content: space-between; gap: var(--space-lg); border-top: 1px solid var(--surface-dark-elevated); color: var(--on-dark-soft); font-size: 13px; }
.compactFooter .footerGrid { grid-template-columns: 2fr 1fr 1fr; }

.authPage, .accountPage { min-height: 100vh; background: var(--canvas); }
.authShell { width: min(1000px, calc(100% - 48px)); min-height: calc(100vh - 64px); margin: 0 auto; padding: var(--space-section) 0; display: grid; grid-template-columns: 1fr 440px; gap: var(--space-section); align-items: center; }
.authIntro h1 { font-size: 15px; }
.authBenefits { margin-top: var(--space-xl); display: grid; gap: var(--space-md); }
.authBenefits span { display: flex; align-items: center; gap: var(--space-sm); color: var(--body); font-size: 14px; }
.authBenefits b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--surface-card); color: var(--ink); font-size: 11px; }
.authCard, .accountCard { padding: var(--space-xl); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--canvas); box-shadow: var(--shadow-soft); }
.authCardHead { margin-bottom: var(--space-lg); }
.authCardHead h2, .accountCard h2 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.authCardHead p, .accountCardHead p { margin: var(--space-xs) 0 0; color: var(--muted); font-size: 14px; }
.authField { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); color: var(--ink); font-size: 14px; font-weight: 500; }
.authField input { width: 100%; height: 40px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--canvas); color: var(--ink); outline: 0; }
.authField input:focus { border-color: var(--ink); }
.authField input[aria-invalid="true"] { border-color: var(--error); }
.remember { min-height: 40px; display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-md); color: var(--body); font-size: 14px; }
.authAction { width: 100%; }
.authFine { margin: var(--space-md) 0 0; color: var(--muted-soft); font-size: 13px; text-align: center; }
.authSwitch { margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--hairline-soft); color: var(--muted); font-size: 14px; text-align: center; }
.authSwitch a { color: var(--ink); font-weight: 600; }
.registerShell { align-items: start; }
.formError { margin-bottom: var(--space-md); padding: var(--space-sm); border: 1px solid var(--error); border-radius: var(--radius-md); color: var(--error); background: var(--canvas); font-size: 14px; }
.formSuccess { margin-bottom: var(--space-md); padding: var(--space-sm); border: 1px solid var(--success); border-radius: var(--radius-md); color: var(--body); background: var(--canvas); font-size: 14px; }

.accountMain { padding-bottom: var(--space-section); }
.accountHero { padding-top: var(--space-section); padding-bottom: var(--space-xxl); text-align: center; }
.accountHero .badge { margin: 0 auto; }
.accountHero h1 { font-size: 15px; }
.accountGrid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-lg); }
.accountCardHead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.accountCardHead > div:first-child { display: flex; align-items: center; gap: var(--space-sm); }
.profileRow { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-md); padding: var(--space-sm) 0; border-top: 1px solid var(--hairline-soft); }
.profileRow dt { color: var(--muted); }
.profileRow dd { margin: 0; color: var(--ink); }
.cardTitleRow { display: flex; justify-content: space-between; align-items: end; gap: var(--space-md); margin-bottom: var(--space-lg); }
.cardTitleRow h2 { margin-top: var(--space-xs); }
.emptyState { padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--surface-card); text-align: center; }
.emptyState .featureIcon { margin: 0 auto var(--space-md); }
.emptyState h3 { margin: 0 0 var(--space-xs); color: var(--ink); font-size: 15px; }
.emptyState p { margin: 0 0 var(--space-md); color: var(--body); }
.profileSummary { align-self: start; }
.summaryAction { width: 100%; margin-top: var(--space-lg); }
.profileEditCard { padding: var(--space-xl); }
.profileFormGrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.fieldHelp { margin: calc(var(--space-sm) * -1) 0 var(--space-md); color: var(--muted-soft); font-size: 13px; }
.formDivider { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin: var(--space-lg) 0 var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--hairline); }
.formDivider span { color: var(--ink); font-size: 15px; font-weight: 600; }
.formDivider small { color: var(--muted); font-size: 13px; }

@media (max-width: 1024px) {
  .heroGrid, .productSplit { grid-template-columns: 1fr; }
  .heroCopy { max-width: 760px; }
  .appMock { max-width: 760px; }
  .iconGrid { grid-template-columns: repeat(2, 1fr); }
  .authShell { grid-template-columns: 1fr 420px; gap: var(--space-xxl); }
  .accountGrid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .container, .authShell { width: calc(100% - 32px); }
  .desktopNav, .navActions { display: none; }
  .mobileMenu { display: block; }
  .heroBand, .bandSoft, .productBand, .ctaSection, .authShell { padding: var(--space-xxl) 0; }
  .heroCopy h1 { font-size: 15px; line-height: 1.1; letter-spacing: 0; }
  .sectionHeader h2, .productCopy h2, .authIntro h1, .accountHero h1 { font-size: 15px; line-height: 1.15; letter-spacing: 0; }
  .sectionHeader { margin-bottom: var(--space-xl); }
  .scheduleGrid, .iconGrid, .profileFormGrid, .authShell, .footerGrid, .compactFooter .footerGrid { grid-template-columns: 1fr; }
  .calendarPanel { border-right: 0; border-bottom: 1px solid var(--hairline-soft); }
  .productList article { grid-template-columns: auto 1fr; }
  .productList article > span:last-child { grid-column: 2; }
  .ctaCard { padding: var(--space-xl); }
  .ctaCard h2 { font-size: 15px; }
  .accountHero { padding-top: var(--space-xxl); }
  .cardTitleRow { align-items: start; flex-direction: column; }
  .profileRow { grid-template-columns: 100px 1fr; }
  .formDivider { align-items: start; flex-direction: column; }
  .legalRow { flex-direction: column; }
}
@media (max-width: 419px) {
  .buttonRow { display: grid; }
  .buttonPrimary, .buttonSecondary { width: 100%; }
  .mockHeader { align-items: flex-start; }
  .heroLead { font-size: 15px; }
}