/* ============================================================
   GILPOS — 들어오는 문(gate) 모양.  시안 1 「카운터」 (2026-08-24 확정)

   ★ 전부 #gate 안쪽으로만 걸었습니다. 다른 화면 여섯 장에는 닿지 않습니다.
   ★ 이 파일은 screens.css 다음에 읽힙니다. 그래야 옛 .gate 규칙을 덮습니다.
   ★ 옛 이름(.gate__box · .gate__brand · .gate__sub · .gate__foot · .gate__small)은
     이제 쓰지 않습니다. 그 규칙들은 짝이 없어 그냥 안 걸립니다.
     다만 .tabs .tab 과 .input .btn 은 그대로 쓰므로 여기서 눌러 덮습니다.

   왜 이 모양인가 —
     쓰는 자리가 매장 카운터입니다. 가로 화면이고 빛이 들어옵니다.
     그래서 폼 쪽은 흰 바탕으로 두고, 왼쪽에 이 프로그램이 무엇인지 한 줄로 세웠습니다.
     강조색은 포스 본체와 같은 파랑(#378ADD)입니다 (2026-09-07 — 그 전엔 주황이었는데 본체와 안 맞았다).
   ============================================================ */

#gate {
  --gt-ink:      #13171d;   /* 왼쪽 판 바탕 */
  --gt-orange:   #378ADD;   /* 강조 — 이름은 orange 지만 파랑이다. 이름을 갈면 아래 40줄을 다 손대야 해서 둔다 */
  --gt-orange-d: #2E7AC8;   /* 눌렀을 때 */
  --gt-text:     #14181e;
  --gt-dim:      #79828f;
  --gt-line:     #dfe2e7;

  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: #fff;
  overflow: auto;
  padding: 0;
  place-items: stretch;              /* 옛 규칙이 가운데로 몰아두었을 수 있어 되돌립니다 */
}
#gate[hidden] { display: none; }

/* ── 왼쪽 — 이름과 한 줄 ── */
#gate .gt-left {
  position: relative;
  background: var(--gt-ink);
  color: #fff;
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
/* 타이어 트레드 무늬 — 무늬일 뿐이라 화면 읽개에는 안 보입니다 */
#gate .gt-tread {
  position: absolute;
  right: -30px; top: 0; bottom: 0;
  width: 190px;
  opacity: .5;
  background: repeating-linear-gradient(160deg, #1d232c 0 14px, var(--gt-ink) 14px 30px);
}
#gate .gt-left > *:not(.gt-tread) { position: relative; }

/* ── 수정2·3 로고 6번 + G 마크 F (2026-09-12 · 현관 3차) ──
     다섯 화면이 같은 규칙이다. 여기만 주황이었다. */
#gate .gt-mark {
  font-size: 22px; font-weight: 900; letter-spacing: -.04em;
  text-transform: none; color: #000; opacity: 1;
  display: inline-flex; align-items: center; gap: 10px;
}
#gate .gt-mark b {
  font-weight: 900;
  background: linear-gradient(90deg,#5EC8F2,#8F7FFF 50%,#F27FC0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#gate .gt-mark svg { flex: none; }
#gate .gt-say {
  margin-top: 22px;
  font-size: 38px; font-weight: 800;
  line-height: 1.28; letter-spacing: -1.4px;
}
#gate .gt-say em { font-style: normal; color: var(--gt-orange); }
#gate .gt-sub {
  margin-top: 16px; max-width: 29ch;
  font-size: 15px; line-height: 1.7; color: #98a2b0;
}
#gate .gt-facts {
  display: flex; gap: 26px;
  padding-top: 20px; border-top: 1px solid #242a33;
  font-size: 13px; color: #7c8797;
}
#gate .gt-facts b {
  display: block; margin-bottom: 3px;
  font-size: 15px; font-weight: 700; color: #e7eaee;
}

/* ── 오른쪽 — 폼 ── */
#gate .gt-right {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px;
}
#gate .gt-form { width: 100%; max-width: 376px; }

#gate .gt-h  { font-size: 26px; font-weight: 800; letter-spacing: -.8px; color: var(--gt-text); }
#gate .gt-hs { margin-top: 7px; font-size: 14px; color: var(--gt-dim); }

/* 탭 — 로그인 · 초대 코드 · 새로 시작을 같은 크기로 둡니다.
   ★ 초대 코드는 점장님이 들어오는 유일한 길입니다. 작은 글씨 링크로 두면 안 됩니다. */
#gate .gt-tabs {
  display: flex; gap: 4px;
  margin: 26px 0 22px; padding: 4px;
  background: #f2f3f5; border-radius: 11px;
  border: 0;                                  /* 옛 .tabs 밑줄을 지웁니다 */
}
#gate .gt-tabs .tab {
  flex: 1; padding: 10px 0; margin: 0;
  border: 0; border-radius: 8px;
  background: none; box-shadow: none;
  font-size: 14px; font-weight: 700; color: #6d7580;
  cursor: pointer;
  transition: background .12s, color .12s;
}
#gate .gt-tabs .tab.is-active {
  background: #fff; color: var(--gt-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* 알림 — 무엇이 잘못됐고 어떻게 하면 되는지 여기 나옵니다 */
#gate .gt-msg {
  margin: -6px 0 16px; padding: 11px 14px;
  background: #fdeeea; border: 1px solid #f6cabc; border-radius: 10px;
  color: #b4331a; font-size: 13.5px; font-weight: 600; line-height: 1.55;
}
/* ★ 나쁜 소식이 아닐 때 — 「들어가는 중…」·「메일을 보냈어요」.
     붉게 두면 잘된 일도 사고처럼 읽힌다. 이 판에 이미 있는 회색만 쓴다 (새 색을 만들지 않는다) */
#gate .gt-msg--ok {
  background: #f2f3f5; border-color: var(--gt-line); color: #4a525e;
}
#gate .gt-msg[hidden] { display: none; }

#gate .gt-f { margin-bottom: 15px; }
#gate .gt-f label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 700; color: #4a525e;
}
#gate .gt-f .input {
  width: 100%; height: 52px;
  padding: 0 15px;
  border: 1.5px solid var(--gt-line); border-radius: 11px;
  background: #fff; font-size: 16px;          /* 16px 아래로 내리면 아이폰이 화면을 확대합니다 */
  transition: border-color .12s, box-shadow .12s;
}
#gate .gt-f .input::placeholder { color: #b3b9c2; }
#gate .gt-f .input:focus {
  border-color: var(--gt-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(55,138,221,.15);
}
#gate .gt-help { margin-top: 7px; font-size: 12.5px; color: #8b939e; line-height: 1.55; }

#gate .gt-go {
  width: 100%; height: 54px; margin-top: 8px;
  border: 0; border-radius: 11px;
  background: var(--gt-orange); color: #fff;
  font-size: 16.5px; font-weight: 800; letter-spacing: -.3px;
  cursor: pointer; transition: background .12s;
}
#gate .gt-go:hover  { background: var(--gt-orange-d); }
#gate .gt-go:active { transform: translateY(1px); }

#gate .gt-small { margin-top: 16px; font-size: 13px; color: var(--gt-dim); line-height: 1.7; }
#gate .gt-small .linkish {
  font-size: 13px; font-weight: 700; color: var(--gt-text);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

#gate .gt-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid #eceef1; }
#gate .gt-ghost {
  width: 100%; height: 48px;
  border: 1.5px solid var(--gt-line); border-radius: 11px;
  background: #fff; font-size: 15px; font-weight: 700; color: #4a525e;
  cursor: pointer; transition: background .12s;
}
#gate .gt-ghost:hover { background: #f7f8f9; }

#gate :focus-visible { outline: 2px solid var(--gt-orange); outline-offset: 2px; }

/* ── 좁은 화면 — 왼쪽 판을 머리로 눕힙니다 ── */
@media (max-width: 900px) {
  #gate { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #gate .gt-left  { padding: 30px 24px 26px; }
  #gate .gt-say   { margin-top: 14px; font-size: 26px; }
  #gate .gt-sub,
  #gate .gt-facts { display: none; }
  #gate .gt-tread { width: 120px; }
  #gate .gt-right { padding: 28px 22px 44px; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  #gate * { transition: none !important; }
}

/* ── 이 기기는 어느 매장 (2026-09-10 · 인수인계서 수정5) ──
   ★ 창(모달)이 아니다. 같은 카드 안에서 단계만 갈아 낀다. */
.gt-shops { display: grid; gap: 8px; margin-top: 6px; }
.gt-shop {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--line, #e3e7ec); background: #fff;
  font-size: 15px; font-weight: 600; color: var(--ink, #1b2530);
}
.gt-shop:hover { border-color: #9fb6cd; }
.gt-shop.is-on { border-color: #378ADD; box-shadow: inset 0 0 0 1px #378ADD; }
.gt-shop.is-on::after { content: " ✓"; color: #378ADD; }