/* half-and-half.com — 하이비트 픽셀 파노라마.
   레이아웃: 픽셀 바(헤더) → 광교 호수공원 파노라마(홈은 큰 히어로, 하위는 띠) → 공원 땅빛 바탕 위 대화창(win) 패널.
   시간대(html[data-time] = day·dusk·night, KST)에 따라 땅빛·창·강조색이 바뀐다. JS 가 없으면 해질녘으로 본다.
   글꼴: UI 전부 Galmuri11(픽셀), 개인정보처리방침·이용약관 본문만 Pretendard. 경계는 3px 선 + 픽셀 그림자 하나로. */
@font-face { font-family: "WGalmuri"; src: url("fonts/galmuri11-sub.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "WGalmuri"; src: url("fonts/galmuri11-bold-sub.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --px: "WGalmuri", "Galmuri11", ui-monospace, monospace;
  --body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
  --u: 3px;
  --w: 1080px;
  /* 해질녘(기본) */
  --ground: #15241a;
  --ground-2: #1b2e21;
  --bar: #0b1220;
  --bar-ink: #e9eef8;
  --panel: #ece6f0;
  --panel-hi: #ffffff;
  --panel-lo: #c9bfd3;
  --ink: #1a1424;
  --ink-2: #5a4e68;
  --edge: #0c0912;
  --accent: #ffb35c;
  --accent-lo: #c97a2c;
  --accent-ink: #1e1207;
  --link: #8a3b6e;
  --sky-fallback: linear-gradient(#2a2c66, #a24f86 55%, #ffb36a);
}
html[data-time="day"] {
  --ground: #1d3a1f;
  --ground-2: #24472a;
  --panel: #e9f1ea;
  --panel-hi: #ffffff;
  --panel-lo: #b9cdbd;
  --ink: #0f1f16;
  --ink-2: #48604f;
  --edge: #0a160e;
  --accent: #ffcf4a;
  --accent-lo: #c99a1c;
  --accent-ink: #1d1604;
  --link: #1a5a9e;
  --sky-fallback: linear-gradient(#3f7fd6, #d9eefc);
}
html[data-time="night"] {
  --ground: #08110d;
  --ground-2: #0d1a14;
  --bar: #050a14;
  --panel: #101b2e;
  --panel-hi: #2b3d63;
  --panel-lo: #070d1a;
  --ink: #e6edf9;
  --ink-2: #9fb0cf;
  --edge: #c9d6ee;
  --accent: #ffd27a;
  --accent-lo: #b98b32;
  --accent-ink: #1b1406;
  --link: #9fd3ff;
  --sky-fallback: linear-gradient(#050816, #24386c);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--px);
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: none;
}
/* 땅 질감: 3px 체크 디더 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: conic-gradient(var(--ground-2) 25%, transparent 0 50%, var(--ground-2) 0 75%, transparent 0);
  background-size: 6px 6px; opacity: .35;
}
a { color: var(--link); }
:focus-visible { outline: var(--u) solid var(--accent); outline-offset: 2px; }
.in { max-width: var(--w); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 820px; }
.nw { white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 10px; background: var(--panel); color: var(--ink); padding: 6px 10px; z-index: 20; }
h1, h2, h3 { font-family: var(--px); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: 0; }
p { margin: 0; }

/* ── 픽셀 바(헤더) ───────────────────────────────── */
.hd { background: var(--bar); color: var(--bar-ink); border-bottom: var(--u) solid #000; position: relative; z-index: 5; }
.hd .in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-height: 56px; }
.mark { width: 32px; height: 32px; flex: none; }
.wm { font-weight: 700; font-size: 18px; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.nav a { color: var(--bar-ink); text-decoration: none; font-size: 15px; padding: 6px 10px; }
.nav a:hover { background: #ffffff1a; }
.nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"]::before { content: "▶"; font-size: 10px; margin-right: 4px; vertical-align: 2px; }
.nav .lang { margin-left: 6px; border: 2px solid var(--bar-ink); padding: 3px 9px; font-size: 13px; }

/* ── 파노라마 ────────────────────────────────────── */
.hero, .strip { position: relative; overflow: hidden; background: var(--sky-fallback); }
.pano-cv { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.hero { min-height: clamp(480px, 78vh, 780px); display: flex; align-items: flex-start; border-bottom: var(--u) solid #000; }
.hero-in { position: relative; z-index: 2; width: 100%; padding-top: clamp(40px, 9vh, 96px); padding-bottom: 32px; }
.hero h1 {
  color: #fff; font-size: 48px; line-height: 1.3;
  text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 6px 6px 0 #0006;
}
.hero .lead {
  margin-top: 18px; max-width: 30em; color: #fff; font-size: 18px; line-height: 1.7;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}
.where {
  position: absolute; right: max(12px, env(safe-area-inset-right, 0px)); bottom: 10px; z-index: 2;
  font-size: 12px; color: #fff; background: #000a; padding: 2px 8px;
}
.strip { height: 168px; border-bottom: var(--u) solid #000; }

/* ── 버튼 ────────────────────────────────────────── */
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px;
  font-family: var(--px); font-weight: 700; font-size: 17px; text-decoration: none;
  background: var(--accent); color: var(--accent-ink);
  border: var(--u) solid #000;
  box-shadow: inset -4px -4px 0 var(--accent-lo), inset 4px 4px 0 #ffffff80, 4px 4px 0 #0008;
  transition: transform .09s steps(2), box-shadow .09s steps(2);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: inset -4px -4px 0 var(--accent-lo), inset 4px 4px 0 #ffffff80, 6px 6px 0 #0008; }
.btn:active { transform: translate(3px, 3px); box-shadow: inset 4px 4px 0 var(--accent-lo), 1px 1px 0 #0008; }
.btn.ghost { background: #e9eef8; color: #10141f; box-shadow: inset -4px -4px 0 #a7b0c4, inset 4px 4px 0 #fff, 4px 4px 0 #0008; }
.btn.ghost:active { box-shadow: inset 4px 4px 0 #a7b0c4, 1px 1px 0 #0008; }

/* 픽셀 아이콘(메일) — 11×8 격자 */
.ico { display: inline-block; width: 22px; height: 16px; flex: none; background: currentColor; }
.ico-mail {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h11v8H0zM1 1v1h1v1h1v1h1v1h3V4h1V3h1V2h1V1zm0 2v4h9V3H9v1H8v1H7v1H4V5H3V4H2V3z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h11v8H0zM1 1v1h1v1h1v1h1v1h3V4h1V3h1V2h1V1zm0 2v4h9V3H9v1H8v1H7v1H4V5H3V4H2V3z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 대화창 패널 ─────────────────────────────────── */
.sec { padding: 22px 0; }
.sec.first { padding-top: 40px; }
.sec.last { padding-bottom: 64px; }
.win {
  position: relative; background: var(--panel); color: var(--ink);
  border: var(--u) solid var(--edge);
  box-shadow: inset 3px 3px 0 var(--panel-hi), inset -3px -3px 0 var(--panel-lo), 6px 6px 0 #0009;
  padding: 26px 24px 24px;
}
.win-t {
  position: absolute; top: -15px; left: 16px; font-size: 14px; line-height: 1;
  background: var(--accent); color: var(--accent-ink); border: var(--u) solid #000; padding: 6px 10px 5px;
}
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px; align-items: start; }
.stat { margin: 0; }
.stat > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 2px dashed var(--panel-lo); font-size: 15px; }
.stat > div:first-child { border-top: 0; }
.stat dt { color: var(--ink-2); }
.stat dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.stat a { color: var(--link); text-decoration: none; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { padding: 12px 0 12px 22px; border-top: 2px dashed var(--panel-lo); position: relative; }
.rows li:first-child { border-top: 0; padding-top: 2px; }
.rows li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 9px; height: 9px; background: var(--accent); border: 2px solid #000; }
.rows li:first-child::before { top: 10px; }
.rows h3 { font-size: 17px; }
.rows p { margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.nlist { list-style: none; margin: 0; padding: 0; }
.nlist a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px 0; text-decoration: none; color: var(--ink); border-bottom: 2px dashed var(--panel-lo); }
.nlist a:hover .t { color: var(--link); }
.nlist .d { color: var(--ink-2); font-size: 15px; }
.more { display: inline-block; margin-top: 14px; font-size: 15px; color: var(--link); text-decoration: none; }
.more::after { content: " ▶"; font-size: 11px; }
.sign h2 { font-size: 24px; }
.sign p { margin-top: 8px; color: var(--ink-2); }
.sign .mail { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 26px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 4px solid var(--accent); }
.sign .mail:hover { color: var(--link); }

/* ── 하위 페이지 ─────────────────────────────────── */
.ph { padding: 34px 0 8px; color: #fff; }
.ph h1 { font-size: 36px; text-shadow: 3px 3px 0 #000; }
.ph .lead { margin-top: 10px; max-width: 40em; font-size: 16px; color: #e8efe9; text-shadow: 2px 2px 0 #000; }
.sec .win { margin-top: 18px; }
table { border-collapse: collapse; width: 100%; }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 12px 0; border-top: 2px dashed var(--panel-lo); font-size: 15px; }
.kv tr:first-child th, .kv tr:first-child td { border-top: 0; }
.kv th { width: 170px; font-weight: 400; color: var(--ink-2); padding-right: 16px; }
.kv td { font-weight: 700; }
.kv a { color: var(--link); text-decoration: none; }
.board th { text-align: left; font-size: 13px; font-weight: 400; color: var(--ink-2); padding: 0 12px 8px 0; border-bottom: var(--u) solid var(--edge); }
.board td { padding: 14px 12px 14px 0; border-bottom: 2px dashed var(--panel-lo); font-size: 15px; vertical-align: top; }
.board .no, .board .dt { white-space: nowrap; color: var(--ink-2); }
.board .ttl a { color: var(--ink); font-weight: 700; text-decoration: none; }
.board .ttl a:hover { color: var(--link); }
.board .empty { color: var(--ink-2); }
.mail.big { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 26px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 4px solid var(--accent); }

/* ── 문서(공고 본문·약관·방침) ───────────────────── */
.doc { padding: 34px 0 64px; }
.doc > .in { background: var(--panel); color: var(--ink); border: var(--u) solid var(--edge); box-shadow: inset 3px 3px 0 var(--panel-hi), inset -3px -3px 0 var(--panel-lo), 6px 6px 0 #0009; padding-top: 28px; padding-bottom: 36px; }
.doc h1 { font-size: 30px; line-height: 1.35; margin-bottom: 20px; }
.doc h2 { font-size: 17px; margin: 36px 0 10px; padding-left: 16px; position: relative; }
.doc h2::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: var(--accent); border: 2px solid #000; }
.doc p, .doc li { font-size: 15px; line-height: 1.8; }
.doc p + p { margin-top: 12px; }
.doc ul { margin: 8px 0 0; padding-left: 1.2em; list-style: square; }
.doc li + li { margin-top: 4px; }
.doc .meta { color: var(--ink-2); font-size: 14px; margin: 14px 0 8px; }
.doc .note { background: var(--panel-lo); padding: 10px 14px; font-size: 14px; margin: 0 0 20px; }
.doc .note a, .doc p a { color: var(--link); }
.doc .sig { margin-top: 30px; font-weight: 700; }
.back { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.back::before { content: "◀ "; font-size: 11px; }
.back:hover { color: var(--ink); }
.tw { overflow-x: auto; margin: 14px 0; }
.grid { min-width: 520px; }
.grid th { text-align: left; font-size: 13px; color: var(--ink-2); padding: 6px 12px 6px 0; border-bottom: var(--u) solid var(--edge); white-space: nowrap; font-weight: 400; }
.grid td { font-size: 14px; padding: 9px 12px 9px 0; border-bottom: 2px dashed var(--panel-lo); vertical-align: top; }
.doc .kv th { width: 110px; }
/* 약관·방침 본문만 일반 글꼴 */
.pg-privacy .doc p, .pg-privacy .doc li, .pg-privacy .doc td,
.pg-terms .doc p, .pg-terms .doc li, .pg-terms .doc td { font-family: var(--body); -webkit-font-smoothing: auto; }
.pg-privacy .doc .meta, .pg-terms .doc .meta { font-family: var(--px); }

/* ── 푸터 ────────────────────────────────────────── */
.ft { background: var(--bar); color: #aab4c8; border-top: var(--u) solid #000; padding: 26px 0 36px; font-size: 13px; line-height: 1.8; }
.ft-links { display: block; }
.ft-links a { color: #aab4c8; text-decoration: none; }
.ft-links a:hover { color: #fff; }
.ft-links b { color: #fff; font-weight: 700; }
.biz { margin-top: 12px; display: flex; flex-wrap: wrap; column-gap: 14px; }
.copy { margin-top: 8px; }

/* ── 폰 ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero { min-height: clamp(520px, 82vh, 760px); }
  .hero h1 { font-size: 30px; }
  .hero .lead { font-size: 15px; }
  .duo { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .win { padding: 24px 16px 18px; }
  .ph h1 { font-size: 28px; }
  .strip { height: 132px; }
  .doc > .in { border-left-width: 0; border-right-width: 0; box-shadow: inset 0 3px 0 var(--panel-hi), inset 0 -3px 0 var(--panel-lo); }
  .doc h1 { font-size: 24px; }
  .kv th { width: 104px; font-size: 14px; }
  .kv td { font-size: 14px; }
  .board thead { display: none; }
  .board tr { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 12px 0; border-bottom: 2px dashed var(--panel-lo); }
  .board td { border: 0; padding: 0; font-size: 14px; }
  .board .ttl { grid-column: 1 / -1; order: -1; font-size: 15px; margin-bottom: 4px; }
  .board .empty { grid-column: 1 / -1; }
  .sign h2 { font-size: 20px; }
  .sign .mail, .mail.big { font-size: 19px; }
  .nav a { padding: 6px 7px; font-size: 14px; }
  .nav .lang { margin-left: 2px; }
  .brand + .nav { flex: 1 1 auto; justify-content: flex-end; padding-bottom: 6px; }
  .wm { font-size: 16px; }
  .nlist a { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }