/* 대문 — 담당자(/operation/)와 사장님(/public/) 화면으로 갈라지는 입구 한 장.
   색·글꼴 토큰은 루트 DESIGN.md(공단 CI)를 따르고, 헤더 그라데이션·카드 규칙은 사장님 화면
   (frontend/styles.css)과 같게 둔다 — 대문에서 어느 쪽으로 들어가도 톤이 이어져야 한다.
   글꼴 파일은 세 화면이 /font/ 하나를 함께 쓴다(원본 frontend/font/). */
@font-face { font-family: "NanumSquareNeo"; font-weight: 400; font-display: swap; src: url("/font/NanumSquareNeo-Regular.woff") format("woff"); }
@font-face { font-family: "NanumSquareNeo"; font-weight: 700; font-display: swap; src: url("/font/NanumSquareNeo-Bold.woff") format("woff"); }
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url("/font/Pretendard-Regular.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-display: swap; src: url("/font/Pretendard-Bold.woff2") format("woff2"); }

:root {
  --ink: #3A3A3A;
  --slate: #4A4A4A;
  --muted: #767676;
  --head: #2D2E5D;
  --line: #E8E8E8;
  --bg: #FAFAFA;
  --panel: #FFFFFF;
  --brand: #5A5DBA;
  --brand-2: #4A4C99;
  --brand-100: #CACBE9;
  --brand-tint: #F2F2F9;
  --surface-1: #F7FAFF;
  --accent-text: #915300;
  --accent-050: #FEF3E6;
  --accent-100: #FCE5C7;
  --font-head: "NanumSquareNeo", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(45, 46, 93, 0.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--font-body); background: var(--bg); color: var(--slate);
  -webkit-font-smoothing: antialiased; word-break: keep-all;
  font-size: 17px; line-height: 1.7;
}
h1, h2, .hero-eyebrow, .entrance-role, .entrance-cta, .topbar-tag { font-family: var(--font-head); }

/* 로고를 얹는 영역은 흰 배경 — 로고(파랑·주황)와 보라 면이 부딪히지 않게 한다(DESIGN.md). */
.topbar { background: var(--panel); border-bottom: 1px solid var(--line); }
.topbar-inner {
  max-width: 960px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.org-logo { display: block; height: 30px; width: auto; }
.topbar-tag {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--brand);
  border: 1px solid var(--brand-100); background: var(--brand-tint);
  padding: 3px 11px; border-radius: 100px;
}

.hero {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff; padding: 48px 24px 84px; text-align: center;
}
.hero-inner { max-width: 760px; margin: 0 auto; }
.hero-eyebrow {
  display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  background: #fff; color: var(--brand); padding: 5px 14px; border-radius: 100px; margin-bottom: 16px;
}
.hero-title { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; color: #fff; }
.hero-sub { font-size: 17.5px; color: rgba(255, 255, 255, 0.92); margin: 0; }

.page { flex: 1; max-width: 960px; width: 100%; margin: -48px auto 40px; padding: 0 20px; }

/* 두 입구를 나란히. 왼콽 담당자, 오른쪽 사장님(DOM 순서와 같다). */
.entrances { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.entrance {
  display: flex; flex-direction: column; min-height: 100%;
  background: var(--panel); border: 1px solid var(--brand-100); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px 26px 24px;
  color: inherit; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.entrance:hover, .entrance:focus-visible {
  transform: translateY(-2px); border-color: var(--brand);
  box-shadow: 0 10px 30px rgba(45, 46, 93, 0.14); outline: none;
}
.entrance:focus-visible { box-shadow: 0 0 0 3px var(--brand-100), 0 10px 30px rgba(45, 46, 93, 0.14); }
.entrance-role {
  align-self: flex-start; font-size: 13.5px; font-weight: 800; letter-spacing: 0.04em;
  padding: 4px 12px; border-radius: 100px; margin-bottom: 14px;
}
/* 역할 표시만 다르게: 담당자는 보라 틴트, 사장님은 주황 틴트(공단 강조색 — 글자는 대비값). */
.entrance-operation .entrance-role { background: var(--brand-tint); color: var(--brand-2); border: 1px solid var(--brand-100); }
.entrance-public .entrance-role { background: var(--accent-050); color: var(--accent-text); border: 1px solid var(--accent-100); }
.entrance-title { font-size: 22px; font-weight: 800; color: var(--head); margin: 0 0 10px; letter-spacing: -0.01em; }
.entrance-desc { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--slate); }
.entrance-list { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.entrance-list li {
  font-size: 14px; color: var(--head); background: var(--surface-1);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px;
}
.entrance-note { margin-top: auto; font-size: 14px; color: var(--muted); line-height: 1.6; }
.entrance-cta {
  display: block; margin-top: 14px; text-align: center;
  background: var(--brand); color: #fff; font-size: 16.5px; font-weight: 700;
  padding: 15px 22px; border-radius: 100px; min-height: 54px;
}
.entrance:hover .entrance-cta { background: var(--brand-2); }

.footer { max-width: 960px; margin: 0 auto; padding: 0 20px 44px; font-size: 14px; color: var(--muted); line-height: 1.75; }

@media (max-width: 720px) {
  .hero { padding: 32px 18px 68px; }
  .hero-title { font-size: 27px; }
  .hero-sub { font-size: 16px; }
  .page { margin-top: -40px; padding: 0 12px; }
  .entrances { grid-template-columns: 1fr; gap: 14px; }
  .entrance { padding: 22px 18px 20px; }
  .entrance-title { font-size: 20px; }
  .footer { padding: 0 14px 36px; }
}