/* 콜아이 화면 정본 스타일시트 (PHONEAI-0806-1530-01)
   정본 = 「어두운 색상 금지, 흰색 배경 기조에서 최대한의 디자인 완성」(주인 지시 2026-08-06).
   판(page·header·pane·table·입력칸)의 바탕은 흰색 기조만 쓴다. 강조색은 글자·테두리·
   버튼/배지 같은 점(accent)에만 쓰고 판을 덮지 않는다.
   가맹점 관문(partner.php)·가맹점 관리자(admin.php)·본사 관리자(hq.php) 세 화면이 이 한 벌을
   같이 쓴다 — 세 곳에 같은 규칙을 세 벌 두면 다음 라운드에 한 곳만 고쳐져 갈라진다. */

:root{
  /* 판 — 전부 흰색 기조 */
  --bg:#f7f8fa; --surface:#fff; --surface-2:#fbfcfd;
  --line:#e4e7ec; --line-2:#f0f2f5;
  /* 글자 */
  --ink:#15181d; --sub:#5b6572; --mute:#98a2b3;
  /* 강조(점) */
  --pt:#2f6f4f; --pt-dark:#255b40; --pt-soft:#eef5f0;
  --warn:#b42318; --warn-soft:#fef3f2;
  --amber:#8a5a00; --amber-soft:#fffaeb;
  /* 형태 */
  --r:12px; --r-sm:8px;
  --sh:0 1px 2px rgba(16,24,40,.05); --sh-2:0 4px 14px rgba(16,24,40,.07);
}
*{ box-sizing:border-box; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 "Malgun Gothic","맑은 고딕",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;
}
html[lang="ja"] body{ font-family:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Noto Sans JP","Meiryo",system-ui,sans-serif; }
html[lang="en"] body{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a{ color:var(--pt); }
code{ font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--line-2); padding:1px 6px; border-radius:5px; }

/* ── 머리 ──────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 24px; background:var(--surface); border-bottom:1px solid var(--line);
}
header .brand{ font-size:17px; font-weight:700; letter-spacing:-.2px; text-decoration:none; color:var(--ink); }
header .brand span{ color:var(--pt); }
header h1{ margin:0; flex:1; font-size:15px; font-weight:600; color:var(--sub); letter-spacing:-.1px; }
header h1::before{ content:""; display:inline-block; width:1px; height:14px; margin:0 12px -2px 0; background:var(--line); }
header a{ color:var(--sub); font-size:13px; text-decoration:none; }
header a:hover{ color:var(--ink); }
.langs{ display:flex; gap:4px; font-size:13px; }
.langs a{ padding:4px 10px; border-radius:99px; color:var(--sub); text-decoration:none; }
.langs a:hover{ background:var(--line-2); }
.langs a.on{ background:var(--pt-soft); color:var(--pt); font-weight:700; }

/* 본사 탭 — 접힌 종이 대신 알약형으로 (판을 덮지 않는다) */
nav.tabs{ display:flex; gap:4px; flex-wrap:wrap; padding:14px 24px 0; }
nav.tabs a{
  padding:8px 15px; border-radius:99px; background:transparent; border:1px solid transparent;
  color:var(--sub); text-decoration:none; font-size:14px; font-weight:600;
}
nav.tabs a:hover{ background:var(--line-2); color:var(--ink); }
nav.tabs a.on{ background:var(--pt-soft); border-color:#d6e5dc; color:var(--pt); }

/* ── 판 ────────────────────────────────────────────── */
.wrap{ max-width:1320px; margin:0 auto; padding:20px 24px 32px; }
/* 가맹점 관리자는 좌(설정)·우(예약표) 두 칸 — 설정이 길어도 예약표는 눈에 붙어 있게 */
.wrap.split{ display:grid; grid-template-columns:minmax(340px,430px) 1fr; gap:20px; align-items:start; }
@media (min-width:901px){ .wrap.split > *:last-child{ position:sticky; top:74px; } }
.pane{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px; box-shadow:var(--sh); overflow-x:auto;
}
.pane + .pane{ margin-top:20px; }
.pane h2{ margin:0 0 18px; font-size:17px; font-weight:700; letter-spacing:-.2px; }
.pane h2.sub{
  margin:28px 0 14px; padding-top:20px; border-top:1px solid var(--line-2);
  font-size:13px; font-weight:700; color:var(--mute); letter-spacing:.4px;
}
.foot,footer{ padding:18px 24px 28px; color:var(--mute); font-size:12px; text-align:center; }

/* ── 입력 ──────────────────────────────────────────── */
.f{ margin-bottom:16px; }
.f label{ display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--sub); }
.f .hint,.hint{ margin-top:6px; font-size:12px; line-height:1.55; color:var(--mute); }
input,select,textarea{
  width:100%; padding:10px 12px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm); font:inherit;
  transition:border-color .12s,box-shadow .12s;
}
input:hover:not(:disabled),select:hover,textarea:hover{ border-color:#cfd4dc; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--pt); box-shadow:0 0 0 3px rgba(47,111,79,.14);
}
input:disabled{ background:var(--surface-2); color:var(--sub); }
input::placeholder,textarea::placeholder{ color:var(--mute); }
textarea{ resize:vertical; min-height:76px; }
/* 체크칸은 글줄 안에 눕힌다 — 각 화면이 style="width:auto" 로 따로 눌러 쓰던 자리 */
.f label input[type=checkbox]{ width:auto; margin-right:8px; accent-color:var(--pt); vertical-align:-2px; }

/* ── 단추 ──────────────────────────────────────────── */
button{
  padding:10px 18px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font:inherit; font-weight:600;
  cursor:pointer; transition:background .12s,border-color .12s,box-shadow .12s;
}
button:hover{ background:var(--surface-2); border-color:#cfd4dc; }
button:active{ transform:translateY(1px); }
button:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(47,111,79,.22); }
button.primary{ background:var(--pt); border-color:var(--pt); color:#fff; }
button.primary:hover{ background:var(--pt-dark); border-color:var(--pt-dark); }
button.mini{ padding:3px 9px; font-size:12px; font-weight:600; border-radius:6px; }
button.danger{ color:var(--warn); border-color:#f1c9c4; background:var(--surface); }
button.danger:hover{ background:var(--warn-soft); border-color:#e5a49c; }
form.inline{ display:inline; }

/* ── 알림 줄 ───────────────────────────────────────── */
.msg{
  margin-bottom:16px; padding:11px 14px; border-radius:var(--r-sm);
  font-size:14px; border:1px solid transparent;
}
.msg.ok{ background:var(--pt-soft); border-color:#d6e5dc; color:var(--pt); }
.msg.err{ background:var(--warn-soft); border-color:#f1c9c4; color:var(--warn); }

/* ── 표 ────────────────────────────────────────────── */
table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px 12px; font-size:13px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line-2); }
th{ background:var(--surface-2); font-weight:700; color:var(--sub); white-space:nowrap; }
tbody tr:last-child td,tr:last-child td{ border-bottom:0; }
td.n,th.n{ text-align:right; font-variant-numeric:tabular-nums; }
td.c,th.c{ text-align:center; }
tr.off td{ color:var(--mute); background:var(--surface-2); }

/* 예약표 — 칸이 격자로 읽혀야 해서 세로선을 살려 둔다 */
table.board{ table-layout:fixed; min-width:460px; }
table.board th,table.board td{ border:1px solid var(--line); padding:7px 6px; text-align:center; vertical-align:top; }
table.board th{ background:var(--surface-2); }
table.board td.free{ color:var(--mute); background:var(--surface); }
table.board td.taken{ background:var(--pt-soft); color:var(--pt); font-weight:700; }
table.board td.taken.hold{ background:var(--amber-soft); color:var(--amber); }   /* 가예약 — 입금 대기 */
table.board td .menu{ display:block; font-weight:400; font-size:12px; color:var(--sub); }
table.board td form.inline{ display:inline-block; margin-top:4px; }

/* ── 배지 ──────────────────────────────────────────── */
.tag{ display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:600; border:1px solid transparent; white-space:nowrap; }
.tag.on{ background:var(--pt-soft); border-color:#d6e5dc; color:var(--pt); }
.tag.off{ background:var(--warn-soft); border-color:#f1c9c4; color:var(--warn); }
.tag.new{ background:var(--amber-soft); border-color:#f3e0b8; color:var(--amber); }

/* ── 숫자 타일 ─────────────────────────────────────── */
.sum{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:20px; }
.sum div{ padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); }
.sum b{ display:block; font-size:24px; font-weight:700; line-height:1.25; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.sum span{ font-size:12px; color:var(--sub); }

/* 기간 고르개 — 통계 제목 옆 (본사) */
.seg{ display:inline-block; margin-left:6px; padding:4px 11px; border-radius:99px; font-size:13px; font-weight:600; color:var(--sub); text-decoration:none; }
.seg:hover{ background:var(--line-2); color:var(--ink); }
.seg.on{ background:var(--pt-soft); color:var(--pt); }
.mute{ color:var(--mute); }

/* ── 두 칸 폼 ──────────────────────────────────────── */
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; align-items:start; }

/* ── 알림 목록 ─────────────────────────────────────── */
ul.alerts{ list-style:none; margin:0; padding:0; max-height:300px; overflow-y:auto; }
ul.alerts li{ padding:9px 2px; border-bottom:1px solid var(--line-2); font-size:13px; word-break:break-word; }
ul.alerts li:last-child{ border-bottom:0; }
ul.alerts time{ margin-right:8px; color:var(--mute); font-variant-numeric:tabular-nums; }

/* ── 로그인 ────────────────────────────────────────── */
.login{ max-width:400px; margin:56px auto; padding:28px; box-shadow:var(--sh-2); }
.login h1,.login h2{ margin:0 0 6px; font-size:19px; font-weight:700; letter-spacing:-.2px; }
.login p.lead{ margin:0 0 20px; font-size:14px; color:var(--sub); }
.login button.primary{ width:100%; padding:12px; }

/* ── 좁은 화면 ─────────────────────────────────────── */
@media (max-width:900px){
  .wrap.split{ grid-template-columns:1fr; }
  /* 폰에서는 사장님이 제일 자주 보는 예약표를 긴 설정 폼 위로 올린다 */
  .wrap.split > *:last-child{ order:-1; }
  .cols{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:640px){
  header{ padding:10px 16px; gap:10px; }
  header h1{ flex-basis:100%; font-size:14px; }
  header h1::before{ display:none; }
  nav.tabs{ padding:12px 16px 0; overflow-x:auto; flex-wrap:nowrap; }
  nav.tabs a{ white-space:nowrap; }
  .wrap{ padding:16px 16px 28px; }
  .pane{ padding:18px 16px; border-radius:10px; }
  .login{ margin:24px 16px; padding:22px 18px; }
  button{ min-height:42px; }              /* 손가락으로 눌리는 크기 */
  button.mini{ min-height:0; }
  .sum{ grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:10px; }
  .sum b{ font-size:21px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  button:active{ transform:none; }
}