/* P8 design-d 2026-10-21 — SeatPing. Loaded last. Tokens: SeatPing/DESIGN_TOKENS.md (refero "DICE" structure: black/white zine bands,
   8px posters, 400/700 type; accent = the auth screen's SeatPing blue). Scoped to the app shell and public shell only:
   the login/signup ticket screens (.auth, design-b) keep their own tokens. Radius 4 controls / 8 posters+panels / full for tags. */
.app,.pub-top,.pub-main,.pub-foot,.overlay,.toasts{
  --ink:#000000;          /* DICE Pitch Black */
  --slate:#595959;        /* DICE Slate: secondary text (7:1) */
  --muted:#808080;        /* DICE Stone: disabled, input borders (3.9:1) */
  --paper:#ffffff;        /* DICE Paper White */
  --card:#ffffff;
  --line:#d9d9d9;         /* DICE Concrete */
  --line-2:#eeeeee;       /* DICE Ash Gray */
  --brand:#245da6; --brand-ink:#173f73; --brand-bg:#eeeeee; /* auth-screen blue; wash → Ash Gray (no pastel blue) */
  --r-ctl:4px; --r-panel:8px; --r-cell:4px;
  --focus:0 0 0 3px rgba(36,93,166,.45);
}
.app,.pub-main{background:#fff;color:#000}
.app h1,.app h2,.pub-main h1,.pub-main h2{font-weight:700;letter-spacing:-.02em}

/* ---------- Buttons: primary (blue) / secondary (black outline) / text (blue) × hover · focus · active · disabled · loading ---------- */
:is(.app,.pub-top,.pub-main,.overlay) .btn{min-height:40px;border-color:#000;border-radius:4px;font-weight:700;transition:background-color .15s,border-color .15s,color .15s}
:is(.app,.pub-top,.pub-main,.overlay) .btn:hover:not(:disabled){background:#eeeeee;border-color:#000}
:is(.app,.pub-top,.pub-main,.overlay) .btn:active:not(:disabled){background:#d9d9d9}
:is(.app,.pub-top,.pub-main,.overlay) .btn.primary{background:#245da6;border-color:#245da6;color:#fff}
:is(.app,.pub-top,.pub-main,.overlay) .btn.primary:hover:not(:disabled){background:#173f73;border-color:#173f73}
:is(.app,.pub-top,.pub-main,.overlay) .btn.primary:active:not(:disabled){background:#10305a;border-color:#10305a;transform:translateY(1px)}
:is(.app,.pub-top,.pub-main,.overlay) .btn.ghost{border-color:transparent;background:transparent;color:#245da6}
:is(.app,.pub-top,.pub-main,.overlay) .btn.ghost:hover:not(:disabled){background:transparent;text-decoration:underline;text-underline-offset:4px}
:is(.app,.pub-top,.pub-main,.overlay) .btn.danger{border-color:#d9d9d9;color:#b42318}
:is(.app,.pub-top,.pub-main,.overlay) .btn.danger:hover:not(:disabled){border-color:#b42318;background:#fff}
:is(.app,.pub-top,.pub-main,.overlay) .btn[disabled]{opacity:1;background:#fff;border-color:#d9d9d9;color:#808080}
:is(.app,.pub-top,.pub-main,.overlay) .btn.primary[disabled]{background:#d9d9d9;border-color:#d9d9d9;color:#595959}
:is(.app,.pub-top,.pub-main,.overlay) .btn.is-busy,:is(.app,.pub-top,.pub-main,.overlay) .btn[aria-busy=true]{opacity:1;pointer-events:none}
:is(.app,.pub-top,.pub-main,.overlay) .btn.sm{min-height:36px}

/* ---------- Forms + inline errors ---------- */
:is(.app,.pub-main,.overlay) .field{border-color:#808080;border-radius:4px}
:is(.app,.pub-main,.overlay) .field:hover:not(:disabled){border-color:#000}
:is(.app,.pub-main,.overlay) .field[aria-invalid="true"],:is(.app,.pub-main,.overlay) [aria-invalid=true]{border-color:#b42318;box-shadow:0 0 0 1px #b42318}
:is(.app,.pub-main,.overlay) .err:not([hidden]),.p8-field-error{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;color:#b42318;font-size:14px;font-weight:700;line-height:1.5}
:is(.app,.pub-main,.overlay) .err:not([hidden])::before,.p8-field-error::before{content:'오류';flex:none;padding:0 6px;border:1px solid currentColor;border-radius:4px;font-size:13px;line-height:20px}
:is(.app,.pub-main,.overlay) .check input{accent-color:#000}
:is(.app,.pub-main,.overlay) .chip{border-color:#d9d9d9;border-radius:999px;font-weight:400}
:is(.app,.pub-main,.overlay) .chip:hover{border-color:#000}
:is(.app,.pub-main,.overlay) .chip[aria-pressed="true"],:is(.app,.pub-main,.overlay) .chip.on{background:#000;border-color:#000;color:#fff}
:is(.app,.pub-main,.overlay) .switch{background:#808080}
:is(.app,.pub-main,.overlay) .switch[aria-checked="true"]{background:#245da6}

/* ---------- Status vocabulary: tags are full pills with a dot (shape + text, not colour alone) ---------- */
:is(.app,.pub-main) .badge{border-radius:999px;font-weight:700;background:#fff;box-shadow:inset 0 0 0 1px currentColor}
:is(.app,.pub-main) .badge.brand{color:#173f73;background:#fff}
:is(.app,.pub-main) .badge.plain{color:#000}
:is(.app,.pub-main) .level{border-radius:4px;border-color:#d9d9d9;color:#000}
:is(.app,.pub-main) .notice{border-radius:4px;background:#eeeeee;color:#000;border-left:3px solid #000}
:is(.app,.pub-main) .notice.warn{background:#fff;border:1px solid #d9d9d9;border-left:3px solid #94580a;color:#000}
:is(.app,.pub-main) .notice.stop{background:#fff;border:1px solid #d9d9d9;border-left:3px solid #b42318;color:#000}
:is(.app,.pub-main) .notice.ok{background:#fff;border:1px solid #d9d9d9;border-left:3px solid #0a7d55;color:#000}

/* ---------- App shell ---------- */
.app .rail{border-right:1px solid #d9d9d9}
.app .rail a.nav{color:#595959;font-weight:400;border-radius:4px}
.app .rail a.nav:hover{background:#eeeeee;color:#000}
.app .rail a.nav[aria-current="page"]{background:#000;color:#fff;font-weight:700}
.app .rail .rail-plan{border-color:#d9d9d9;border-radius:8px;background:#eeeeee}
.app .meter{background:#d9d9d9;border-radius:0}
.app .meter i{background:#000}
.app .meter.full i{background:#b42318}
.app .topbar{background:#fff;border-bottom-color:#d9d9d9}
.app .acct-btn{border-radius:4px;border-color:#d9d9d9}
.app .avatar{background:#000;color:#fff;font-weight:700}
.app .menu{border-radius:8px;box-shadow:none;border-color:#000}
.app .menu a:hover,.app .menu button:hover{background:#eeeeee}
.app .content{max-width:1240px}
.app .page-head{margin-bottom:24px}
.app .page-head h1{font-size:28px;line-height:1.15}
.app .page-head p{color:#595959}
.app .panel{border-color:#d9d9d9;border-radius:8px}
.app .panel h2{font-size:17px;font-weight:700}

/* Reading order: the tally is the ticket-board headline — one full-width black band (DICE zine section). */
.app .tally{background:#000;border:0;border-radius:8px;color:#fff}
.app .tally a{color:#fff;border-right-color:#333333}
.app .tally a:hover{background:#333333}
.app .tally b{font-weight:700;font-size:36px;color:#fff}
.app .tally span{color:#d9d9d9}
.app .tally .open b{color:#35d08f}   /* support-dot green, AA on black */
.app .tally .wait b{color:#f2b544}   /* support-dot amber, AA on black */
.app .tally a:focus-visible{box-shadow:inset 0 0 0 3px #fff;border-radius:0}

/* Watch list: poster rows */
.app .wlist,.app .note-list{border-color:#d9d9d9;border-radius:8px}
.app .wrow:hover,.app .note-list a:hover{background:#eeeeee}
.app .wrow .title{font-weight:700}
.app .wrow .edge{background:#d9d9d9}
.app .note-list .unread-dot{background:#245da6}
.app .board td,.app .day{background:#eeeeee;border-radius:4px}
.app .board td.zero b{color:#808080}
.app .board th.rowh{font-weight:700}
.app .board td b,.app .day .d{font-weight:700}
.app .legend i{background:#eeeeee;border-radius:2px}
.app .status-line{border-radius:8px;border-color:#d9d9d9;background:#fff}
.app .detail-head img,.app .source-card img{border-radius:8px;border-color:#d9d9d9;background:#eeeeee}
.app .source-card{border-color:#d9d9d9;border-radius:8px}
.app .tabs{border-bottom-color:#d9d9d9}
.app .tabs a{color:#595959}
.app .tabs a[aria-selected="true"]{color:#000;border-bottom-color:#245da6;font-weight:700}
.app .steps li{border-radius:4px;border-color:#d9d9d9}
.app .steps li[aria-current="step"]{border-color:#000}
.app .steps li b{border-radius:4px}
.app .cat-pick button,.app .sess-pick button{border-color:#d9d9d9;border-radius:4px}
.app .cat-pick button:hover,.app .sess-pick button:hover{border-color:#000}
.app .table th{color:#595959;font-size:13px;font-weight:700;letter-spacing:.06em;border-bottom:1px solid #000}

/* First use: what is missing + one next action, left-aligned on an Ash Gray poster panel. */
.app .empty{padding:32px;text-align:left;background:#eeeeee;border-radius:8px}
.app .empty h2{font-size:22px;font-weight:700}
.app .empty p{margin:0 0 20px}
/* Dashboard first use (head without actions): the empty panel becomes the black poster band, the screen's one headline. */
.app .page-head:not(:has(.actions))+.empty{background:#000;color:#fff;padding:48px 40px}
.app .page-head:not(:has(.actions))+.empty h2{color:#fff;font-size:28px;line-height:1.2}
.app .page-head:not(:has(.actions))+.empty p{color:#d9d9d9;margin-left:0}
.app .page-head:not(:has(.actions))+.empty .btn.primary{min-height:48px;padding:0 24px}
.app .page-head:not(:has(.actions))+.empty .btn.primary:focus-visible{box-shadow:0 0 0 3px #fff}
/* One primary per screen: while the list is empty, the empty panel carries the add action, so the header copy steps down. */
.app .content:has(.empty) .page-head .btn.primary{background:#fff;border-color:#000;color:#000}

/* Overlays */
.overlay{background:rgba(0,0,0,.6)}
.overlay .modal{border-radius:8px;box-shadow:none}
.overlay .modal h2{font-weight:700}
.toasts .toast{border-radius:4px;box-shadow:none;background:#000}
.toasts .toast.error{background:#b42318}

/* ---------- Public shell: white / black zine bands ---------- */
.pub-top{border-bottom-color:#000}
.pub-top .pub-nav a{color:#000;font-weight:400;border-radius:4px}
.pub-top .pub-nav a:hover,.pub-top .pub-nav a[aria-current="page"]{background:transparent;color:#000;box-shadow:inset 0 -2px 0 #245da6}
/* The page body owns the primary action; the header copy is a secondary outline. */
.pub-top .pub-actions .btn.primary{background:#fff;border-color:#000;color:#000}
.pub-top .pub-actions .btn.primary:hover{background:#eeeeee}
.pub-main .hero h1,.pub-main .page-title h1{font-weight:700;letter-spacing:-.03em;line-height:1.1}
.pub-main .paste,.pub-main .support-board,.pub-main .cat-cols{border-color:#000;border-radius:8px}
.pub-main .sb-table th{background:#eeeeee;color:#000;font-size:13px;letter-spacing:.06em}
.pub-main .section{border-top-color:#000}
.pub-main .flow li{border-top-color:#000}
.pub-main .flow li::before{color:#000}
/* Pricing: one primary — the free plan starts the account; paid plans step down to secondary (public page only; in the app the upgrade stays primary). */
:is(.app,.pub-main) .plans{border-color:#000;border-radius:8px}
:is(.app,.pub-main) .plan{border-right-color:#d9d9d9}
:is(.app,.pub-main) .plan .price{font-weight:700}
.pub-main .plan:not(:first-child) .btn.primary{background:#fff;border-color:#000;color:#000}
.pub-main .plan:not(:first-child) .btn.primary:hover:not(:disabled){background:#eeeeee}
:is(.app,.pub-main) .plan.current{box-shadow:inset 0 4px 0 #000}
:is(.app,.pub-main) .pf-table{border-color:#000;border-radius:8px}
:is(.app,.pub-main) .pf-table th{background:#eeeeee;color:#000;letter-spacing:.06em}
:is(.app,.pub-main) .pf-table .pf-name{font-weight:700}
.pub-main .faq{border-top-color:#000}
.pub-main .faq-q{font-weight:700;min-height:56px}
.pub-main .legal article{border-color:#d9d9d9;border-radius:8px}
.pub-foot{background:#000;border-top:0}
.pub-foot .pub-foot-in,.pub-foot a{color:#d9d9d9}
.pub-foot a:hover{color:#fff}

/* ---------- Touch: 44px targets on small screens ---------- */
@media (max-width:860px){
  :is(.app,.pub-top,.pub-main,.overlay) .btn,:is(.app,.pub-main) .chip,.app .tabs a,.app .acct-btn,.app .tabbar a,.pub-top .pub-nav a,.pub-foot a,.app .app-foot a,.overlay .x{min-height:44px;display:inline-flex;align-items:center}
  .overlay .x{width:44px;justify-content:center}
  :is(.app,.pub-top,.pub-main,.overlay) .btn.sm,.pub-top .pub-mnav a,.pub-top .wordmark,.app .m-brand{min-height:44px;display:inline-flex;align-items:center}
  .app .panel-head a,.pub-main .support-board a{min-height:44px;display:inline-flex;align-items:center}
  .pub-top .pub-mnav a{color:#000}
  .pub-top .pub-mnav a[aria-current="page"]{background:#000;color:#fff}
  .app .tally b{font-size:28px}
  .app .empty{padding:24px}
}