/* ===== 3안 · 리퀴드 글래스 (2026-10-12 앰비가 고름) =====
   일정 앱·정산 앱에만 씀 (<html class="glass">). 고객 화면·거래처 포털은 그대로.
   흐림 효과(backdrop-filter)는 화면 위에 떠 있는 것(위 메뉴·날짜 줄·+ 버튼·상세 창·고르기 목록)에만 —
   목록·카드는 반투명 흰 판으로만 만들어 휴대폰이 버벅이지 않게 */
html.glass {
  --bg: #e9eef5;
  --card: rgba(255, 255, 255, .64);
  --field: rgba(255, 255, 255, .72);
  --ink: #142033;
  --muted: #5b6b82;
  --line: rgba(20, 32, 51, .09);
  --brand: #2563eb;
  --brand-deep: #1d4ed8;
  --brand-ink: #ffffff;
  --brand-soft: rgba(37, 99, 235, .10);
  --accent: #e8892b;
  --ok: #2f7a52;
  --ok-soft: rgba(47, 122, 82, .12);
  --warn: #9a4a0b;
  --warn-soft: rgba(232, 137, 43, .13);
  --danger: #c62828;
  /* 유리 */
  --g-fill: linear-gradient(140deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .40));
  --g-fill-strong: linear-gradient(140deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .62));
  --g-edge: inset 1.5px 1.5px 1px rgba(255, 255, 255, .95), inset -1.5px -1.5px 2px rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .6);
  --g-drop: 0 12px 30px rgba(20, 40, 80, .11);
  --g-blur: blur(16px) saturate(170%);
  /* 고른 것: 볼록한 유리 알약 */
  --pill-fill: linear-gradient(165deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .30) 48%, rgba(255, 255, 255, .16) 62%, rgba(255, 255, 255, .55));
  --pill-sh: 0 3px 10px rgba(15, 30, 60, .13), inset 2.5px 2.5px 1.5px #fff, inset -2px -2px 3px rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 -6px 12px rgba(37, 99, 235, .08);
  --blob1: rgba(37, 99, 235, .26);
  --blob2: rgba(232, 137, 43, .18);
  --blob3: rgba(120, 150, 255, .22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html.glass {
    --bg: #0b1424;
    --card: rgba(255, 255, 255, .07);
    --field: rgba(255, 255, 255, .08);
    --ink: #e6ecf5;
    --muted: #93a3ba;
    --line: rgba(255, 255, 255, .10);
    --brand: #60a5fa;
    --brand-deep: #3b82f6;
    --brand-ink: #0b1424;
    --brand-soft: rgba(96, 165, 250, .16);
    --accent: #ff8a3d;
    --ok: #7cc79a;
    --ok-soft: rgba(124, 199, 154, .14);
    --warn: #f2a65a;
    --warn-soft: rgba(242, 166, 90, .14);
    --danger: #ff8a80;
    --g-fill: linear-gradient(140deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
    --g-fill-strong: linear-gradient(140deg, rgba(30, 44, 70, .86), rgba(18, 30, 52, .80));
    --g-edge: inset 1.5px 1.5px 1px rgba(255, 255, 255, .26), inset -1px -1px 2px rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .11);
    --g-drop: 0 14px 34px rgba(0, 0, 0, .38);
    --pill-fill: linear-gradient(165deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, .04) 62%, rgba(255, 255, 255, .15));
    --pill-sh: 0 3px 10px rgba(0, 0, 0, .3), inset 2px 2px 1.5px rgba(255, 255, 255, .42), inset -1.5px -1.5px 2px rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -6px 12px rgba(96, 165, 250, .12);
    --blob1: rgba(37, 99, 235, .40);
    --blob2: rgba(232, 137, 43, .14);
    --blob3: rgba(80, 110, 230, .30);
    color-scheme: dark;
  }
}

/* 바탕: 은은한 파랑·오렌지 빛 번짐 (움직이지 않게 고정) */
html.glass body { background: var(--bg); }
html.glass body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 38% at 8% 10%, var(--blob1), transparent 70%),
    radial-gradient(55% 34% at 96% 58%, var(--blob2), transparent 70%),
    radial-gradient(50% 30% at 28% 96%, var(--blob3), transparent 70%);
}

/* 떠 있는 유리판 */
html.glass .top,
html.glass .dhead,
html.glass .board-head,
html.glass .fab,
html.glass .sg-list {
  background: var(--g-fill);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-drop), var(--g-edge);
  border: 0;
}
/* 반투명 판 (흐림 없음) */
html.glass .card,
html.glass .agenda,
html.glass .wk-strip,
html.glass .ntc,
html.glass .wk-wait,
html.glass .pushbar,
html.glass .seg,
html.glass .btn:not(.primary):not(.link):not(.ghost),
html.glass .today-btn {
  background: var(--g-fill);
  box-shadow: 0 6px 18px rgba(20, 40, 80, .06), var(--g-edge);
  border-color: transparent;
}
@media (prefers-color-scheme: dark) {
  html.glass .card, html.glass .agenda, html.glass .wk-strip, html.glass .ntc, html.glass .wk-wait, html.glass .pushbar, html.glass .seg,
  html.glass .btn:not(.primary):not(.link):not(.ghost), html.glass .today-btn { box-shadow: var(--g-edge); }
}

/* 위 메뉴: 화면 위에 뜬 둥근 유리 막대 */
html.glass .top {
  position: sticky; top: max(10px, env(safe-area-inset-top)); z-index: 20;
  margin: max(10px, env(safe-area-inset-top)) 12px 0; max-width: 1176px;
  padding: 8px 10px 8px 18px; border-radius: 26px; min-height: 54px;
}
@media (min-width: 1200px) { html.glass .top { margin-left: auto; margin-right: auto; } }
html.glass .brand.small .wordmark { filter: none; text-shadow: none; }
html.glass .brand.small .wordmark .dot { color: var(--accent); -webkit-text-fill-color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 65%, transparent); }

/* 탭: 고른 탭은 유리 알약 */
html.glass .tabs { padding: 10px 14px 8px; gap: 2px; scroll-padding-inline: 14px; }
html.glass .tab { border-radius: 999px; border-bottom: 0; padding: 8px 15px; }
html.glass .tab[aria-selected="true"] { background: var(--pill-fill); box-shadow: var(--pill-sh); color: var(--brand); font-weight: 650; }

/* 날짜 줄 (위에 붙어 있을 때도 유리) */
html.glass .dhead { top: calc(max(10px, env(safe-area-inset-top)) + 62px); border-radius: 22px; padding: 4px 8px; margin: 0 -6px; z-index: 15; }
html.glass .board-head { top: calc(max(10px, env(safe-area-inset-top)) + 62px); border-radius: 18px; padding: 6px 10px; }
html.glass .today-btn { white-space: nowrap; flex: none; }
html.glass .icon-btn:hover { background: var(--brand-soft); }

/* 주간 띠 */
html.glass .wk-strip { border-radius: 24px; padding: 6px 4px; }
html.glass .wk-day.today .wk-num { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent); }
html.glass .wk-day.on .wk-num { background: var(--pill-fill); box-shadow: var(--pill-sh); color: var(--brand) !important; }
html.glass .wk-wait, html.glass .ntc.warn { color: var(--warn); }
html.glass .wk-wait { border-radius: 999px; }
html.glass .wk-n .wait::before, html.glass .wk-wait .dot { box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent); }
html.glass .ntc { border-radius: 999px; box-shadow: var(--g-edge); }
html.glass .notices { padding: 4px 2px; margin: -4px -2px; }

/* 일정 목록 */
html.glass .agenda { border: 0; border-radius: 26px; padding: 4px; }
html.glass .ag-row { border-radius: 20px; }
html.glass .ag-row { position: relative; }
html.glass .ag-row + .ag-row { border-top: 0; }
html.glass .ag-row + .ag-row::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--line); }
html.glass .ag-row:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
html.glass .ag-row:hover::before, html.glass .ag-row:hover + .ag-row::before { opacity: 0; }
html.glass .ag-who.off { background: var(--line); }

/* 보기 바꾸기 */
html.glass .seg { border: 0; padding: 3px; gap: 2px; }
html.glass .seg button { background: none; border-radius: 999px; }
html.glass .seg button.on { background: var(--pill-fill); box-shadow: var(--pill-sh); color: var(--brand); }

/* 버튼 */
html.glass .btn.primary { background: linear-gradient(180deg, var(--brand), var(--brand-deep)); border-color: transparent; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent), inset 0 1.5px 1px rgba(255, 255, 255, .4); }
html.glass input, html.glass select, html.glass textarea { background: var(--field); border-color: var(--line); }
html.glass .chip { background: var(--brand-soft); }

/* + 버튼: 유리 동그라미 + 파란 십자 */
html.glass .fab { color: var(--brand); font-weight: 400; width: 58px; height: 58px; }

/* 상세 창: 아래에서 올라오는 두꺼운 유리 */
html.glass .sheet-back.show { background: rgba(14, 26, 48, .22); }
html.glass .sheet {
  background: var(--g-fill-strong);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 -10px 40px rgba(20, 40, 80, .18), var(--g-edge);
  border-radius: 32px 32px 0 0;
}
@media (min-width: 700px) { html.glass .sheet { border-radius: 32px; } }
html.glass .sheet .card,
html.glass .sheet .agenda,
html.glass .sheet .memo,
html.glass .custpanel,
html.glass .cq-box,
html.glass .donepanel,
html.glass .cmt { background: color-mix(in srgb, var(--card) 70%, transparent); box-shadow: var(--g-edge); border-color: transparent; border-radius: 20px; }
html.glass .cq-box { box-shadow: var(--g-edge), inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
html.glass .cq-list li { background: var(--field); border-color: transparent; }

/* 고르기 목록·알림 */
html.glass .sg-list { border-radius: 18px; background: var(--g-fill-strong); }
html.glass .sg-list button:hover, html.glass .sg-list button.on { background: var(--brand-soft); }
html.glass #toast { border-radius: 999px; }

/* 투명도 줄이기를 켠 휴대폰: 거의 불투명하게 */
@media (prefers-reduced-transparency: reduce) {
  html.glass { --g-fill: var(--g-fill-strong); }
  html.glass .top, html.glass .dhead, html.glass .fab, html.glass .sheet, html.glass .sg-list { -webkit-backdrop-filter: none; backdrop-filter: none; }
}