/* 앱 틀: 실제 Apple Store 앱(iOS 26)을 따라요. 연한 회색 바탕, 큼직한 흰 카드, 굵은 제목, 위쪽 유리 버튼 */

:root {
  --bar-h: 76px;
  --dock-side: 25px;
  --side-col: 84px;
  --dock-bottom: max(calc(env(safe-area-inset-bottom, 0px) - 8px), 16px);
  --dock-clearance: calc(var(--bar-h) + var(--dock-bottom) + 32px);
  --safe-top: env(safe-area-inset-top, 0px);
  --nav-h: 56px;
  --top-h: calc(var(--nav-h) + var(--safe-top));
  --bar-rgb: 242, 242, 247;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-theme="dark"] { --bar-rgb: 0, 0, 0; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; position: fixed; inset: 0; width: 100%; overflow: hidden; }
body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  word-break: keep-all;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: inherit; }

.app {
  position: relative;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  overflow: clip; /* 입력칸에 초점이 가도 앱 틀이 밀려 올라가지 않게 */
  background: var(--bg-canvas);
}

/* ---------- 위쪽 바: 스크롤하면 유리가 되고 가운데에 작은 제목이 나타나요. 유리 버튼은 늘 떠 있어요 ---------- */
.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  height: calc(var(--top-h) + 10px);
  padding-top: var(--safe-top);
  display: grid;
  place-items: center;
  --p: 0;
  background: rgba(var(--bar-rgb), calc(0.8 * var(--p)));
  -webkit-backdrop-filter: blur(calc(24px * var(--p))) saturate(calc(100% + 80% * var(--p)));
  backdrop-filter: blur(calc(24px * var(--p))) saturate(calc(100% + 80% * var(--p)));
  pointer-events: none;
}
.topbar::after { content: ""; position: absolute; inset: auto 0 0 0; height: 0.5px; background: var(--hairline); opacity: var(--p); }
.topbar-title { margin-top: 4px; font-size: 17px; line-height: 22px; font-weight: 600; opacity: 0; }
.nav-set .js-edit-profile { margin-left: auto; }
.nav-set { position: absolute; inset: calc(var(--safe-top) + 6px) 16px auto 16px; display: none; justify-content: space-between; align-items: center; }
.app[data-screen="messages"] .nav-set[data-for="messages"],
.app[data-screen="account"] .nav-set[data-for="account"] { display: flex; }
.glass-btn {
  pointer-events: auto;
  display: grid;
  place-items: center;
  height: 48px;
  min-width: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.08);
  color: var(--apple-blue);
  font-size: 17px;
  font-weight: 600;
  transition: transform 0.28s var(--ease);
}
.glass-btn:active { transform: scale(0.94); }
.glass-btn.primary { background: var(--apple-blue); color: #fff; box-shadow: 0 6px 20px rgba(10, 124, 255, 0.35); }
.glass-btn svg { width: 22px; height: 22px; }
html[data-theme="dark"] .glass-btn:not(.primary) { background: rgba(60, 60, 67, 0.6); }

/* ---------- 화면 ---------- */
.screens { position: absolute; inset: 0; }
.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* 화면 안의 내용은 튕기고, 바깥 틀(핫바)은 움직이지 않아요 */
  padding: calc(var(--top-h) + 14px) 0 var(--dock-clearance);
  scrollbar-width: none;
  visibility: hidden;
  /* 탭을 옮기면 앞 화면은 흐려지고 새 화면은 진해지면서 살짝 올라와요 */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.32s ease, transform 0.4s var(--ease), visibility 0s 0.32s;
}
.screen::-webkit-scrollbar { display: none; }
.screen.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity 0.32s ease, transform 0.4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .screen, .screen.is-active { transition: none; transform: none; } }

.large-title { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter) 22px; }
.large-title h1 { margin: 0; font-size: 36px; line-height: 42px; font-weight: 800; letter-spacing: -0.026em; transform-origin: left bottom; will-change: transform, opacity; }
.section-title { display: flex; align-items: center; gap: 6px; margin: 36px var(--gutter) 16px; font-size: 26px; line-height: 31px; font-weight: 800; letter-spacing: -0.02em; }
.section-title:first-of-type { margin-top: 12px; }
.section-title svg { width: 12px; height: 20px; color: var(--text-secondary); }
.lead { margin: 0 var(--gutter) 22px; font-size: 26px; line-height: 31px; font-weight: 800; letter-spacing: -0.02em; }

/* 인스타그램 기본 프로필처럼 회색 판 위의 흰 사람 모양. 크기는 width/height로 정해요 */
.avatar-default { position: relative; display: block; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: linear-gradient(#d9d9de, #b4b4ba); }
.avatar-default::before, .avatar-default::after { content: ""; position: absolute; background: #fff; }
.avatar-default::before { width: 36%; height: 36%; left: 32%; top: 19%; border-radius: 50%; }
.avatar-default::after { width: 78%; height: 52%; left: 11%; top: 62%; border-radius: 50% 50% 0 0 / 70% 70% 0 0; }
.avatar { display: grid; place-items: center; flex: none; border-radius: 50%; color: #fff; font-weight: 700; }
.me-btn { border-radius: 50%; }

/* ---------- 카드 ---------- */
.card { margin: 0 var(--gutter) 16px; border-radius: var(--radius-card); background: var(--bg-card); overflow: hidden; }
.card.dark { background: #000; color: #f5f5f7; }
.pad { padding: 26px; }
.eyebrow { margin: 0 0 6px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--violator-orange); }
.card-title { margin: 0; font-size: 28px; line-height: 33px; font-weight: 800; letter-spacing: -0.022em; }
.card-body { margin: 8px 0 0; font-size: 17px; line-height: 24px; font-weight: 500; color: var(--text-secondary); }
.dark .card-body { color: #a1a1a6; }
.meta { font-size: 15px; line-height: 20px; color: var(--text-tertiary); }
.link { color: var(--apple-blue); font-size: 17px; font-weight: 500; }
.price { font-size: 19px; font-weight: 700; }

/* 그림 자리: 실제 사진 대신 색이 번지는 면이에요 */
.art { position: relative; height: 230px; overflow: hidden; }
.art::before, .art::after { content: ""; position: absolute; border-radius: 50%; }
.art.warm { background: linear-gradient(135deg, #f7d9c4, #e9a9b8 55%, #9db4e8); }
.art.warm::before { width: 190px; height: 190px; left: -30px; top: 40px; background: rgba(255, 255, 255, 0.45); }
.art.warm::after { width: 120px; height: 120px; right: 24px; top: -30px; background: rgba(255, 255, 255, 0.35); }
.art.cool { background: linear-gradient(135deg, #bfe3ff, #8aa8ff 60%, #b99cff); }
.art.cool::before { width: 200px; height: 200px; right: -40px; bottom: -70px; background: rgba(255, 255, 255, 0.4); }
.art.cool::after { width: 90px; height: 90px; left: 40px; top: 36px; background: rgba(255, 255, 255, 0.5); }
.art.night { background: radial-gradient(circle at 30% 20%, #3a5bd9, #0b0b2a 70%); }
.art.night::before { width: 220px; height: 220px; left: 30%; top: 30%; background: radial-gradient(circle, rgba(120, 200, 255, 0.6), transparent 70%); }
.art.mint { background: linear-gradient(135deg, #d4f5e4, #8ee0c0 60%, #6fb8f0); }
.art.mint::before { width: 180px; height: 180px; left: 20%; top: 50px; background: rgba(255, 255, 255, 0.45); }
.art-text { padding: 26px; background: linear-gradient(135deg, rgba(247, 217, 196, 0.5), rgba(157, 180, 232, 0.45)), var(--bg-card); }

/* 가로로 넘기는 카드 줄 */
.rail { display: flex; gap: 14px; padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.cat-card { flex: none; width: 120px; height: 150px; padding: 16px 8px 14px; display: grid; justify-items: center; align-content: space-between; border-radius: var(--radius-card); background: var(--bg-card); scroll-snap-align: start; font-size: 17px; font-weight: 700; text-align: center; }
.cat-card .ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; font-size: 32px; }
.pills { display: flex; gap: 12px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill-chip { flex: none; height: 52px; padding: 0 28px; border-radius: 999px; background: var(--bg-card); font-size: 17px; font-weight: 700; transition: transform 0.28s var(--ease), background-color 0.2s, color 0.2s; }
.pill-chip:active { transform: scale(0.96); }
.pill-chip[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-card); }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 var(--gutter) 16px; }
.mini { min-height: 300px; padding: 18px; border-radius: var(--radius-card); background: var(--bg-card); display: flex; flex-direction: column; }
.mini .tag { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.mini .tag i { width: 14px; height: 18px; border-radius: 4px; background: #6e5cf0; }
.mini .tag i.eye { width: 18px; height: 18px; border-radius: 50%; background: none; border: 3px solid #3cc8b4; }
.mini .pic { flex: 1; margin: 14px 0; border-radius: 18px; }
.mini b { font-size: 19px; line-height: 24px; font-weight: 800; }

.rows { margin: 0; padding: 0; list-style: none; }
.row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 20px 12px 24px; }
.row + .row::before, li + li > .row::before { content: ""; position: absolute; top: 0; left: 24px; right: 0; height: 0.5px; background: var(--hairline); }
.row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.row-main b { font-size: 17px; line-height: 22px; font-weight: 700; }
.row-main span { font-size: 15px; line-height: 20px; color: var(--text-secondary); }
.row-value { flex: none; font-size: 17px; font-weight: 700; }
.chev { flex: none; width: 8px; height: 14px; color: var(--text-tertiary); }
.big-amount { margin: 14px 0 0; font-size: 44px; line-height: 50px; font-weight: 800; letter-spacing: -0.03em; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; margin-top: 20px; }
.bars i { flex: 1; border-radius: 6px; background: linear-gradient(#5aa8ff, #3a5bd9); }

.skeleton-row { display: flex; align-items: center; gap: 14px; height: 76px; padding: 0 24px; }
.skeleton-row i { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-card-subtle); }
.skeleton-row:nth-child(4n + 1) i { background: #d6e8ff; }
.skeleton-row:nth-child(4n + 2) i { background: #ffd9d9; }
.skeleton-row:nth-child(4n + 3) i { background: #fff0c2; }
.skeleton-row:nth-child(4n) i { background: #d9f5e3; }
.skeleton-row span { flex: 1 1 auto; display: grid; gap: 8px; }
.skeleton-row b { display: block; height: 14px; border-radius: 4px; background: var(--bg-card-subtle); }
.skeleton-row b + b { width: 56%; height: 12px; }
.empty { padding: 40px 20px; text-align: center; color: var(--text-tertiary); font-size: 17px; }

/* ---------- 메시지: iOS 26 메시지 앱처럼 흰 바탕에 고정한 사람 동그라미와 납작한 목록 ---------- */
.screen[data-screen="messages"] { background: var(--bg-canvas-elevated); padding-top: calc(var(--top-h) + 4px); }
.nav-right { display: flex; gap: 10px; }
.glass-btn.round { padding: 0; width: 48px; }
.glass-btn[aria-pressed="true"] { background: var(--apple-blue); color: #fff; }
.pinned { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px 20px 22px; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pin { position: relative; display: grid; justify-items: center; gap: 8px; font-size: 15px; color: var(--text-secondary); }
.pin .avatar { width: 80px; height: 80px; font-size: 30px; box-shadow: 0 10px 24px rgba(125, 127, 208, 0.25); }
.pin .dot { position: absolute; left: 6px; top: 28px; }
.pin.is-unread { color: var(--text-primary); font-weight: 600; }
.searchfield { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 20px 6px; padding: 0 16px; border-radius: 999px; background: var(--bg-card-subtle); color: var(--text-tertiary); }
.searchfield svg { width: 18px; height: 18px; flex: none; }
.searchfield input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 17px; color: var(--text-primary); }
.chat-list { margin: 0; padding: 0; list-style: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.chat-row { position: relative; display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 18px 14px 24px; cursor: pointer; }
.chat-row .avatar { width: 56px; height: 56px; font-size: 22px; margin-top: 2px; }
.chat-row::after { content: ""; position: absolute; left: 94px; right: 0; bottom: 0; height: 0.5px; background: var(--hairline); }
.chat-row .dot { position: absolute; left: 7px; top: 34px; }
.chat-main { flex: 1; min-width: 0; }
.chat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-top b { font-size: 17px; line-height: 22px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-top .meta { flex: none; display: flex; align-items: center; gap: 6px; font-size: 16px; }
.chat-top .meta svg { width: 8px; height: 14px; }
.chat-prev { margin: 1px 0 0; font-size: 16px; line-height: 21px; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.avatar.contact { background: linear-gradient(#a6b6e2, #7b7fd0); }
.del { flex: none; display: none; align-self: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--status-red); color: #fff; font-size: 15px; font-weight: 600; }
.editing .del { display: block; }
.editing .chat-top .meta { display: none; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--apple-blue); }
.empty { padding: 40px 20px; text-align: center; color: var(--text-tertiary); font-size: 17px; }

/* 대화: 배경은 처음에 흰색이고 바꿀 수 있어요. 받은 말풍선은 회색 리퀴드 글라스예요 */
[data-wall="white"] { --wall: var(--bg-canvas-elevated); }
[data-wall="sunset"] { --wall: linear-gradient(180deg, #b793c9 0%, #9db6d3 28%, #f0a99a 62%, #d98aa3 100%); --glow: radial-gradient(circle at 80% 70%, rgba(255, 190, 170, 0.5), transparent 55%), radial-gradient(circle at 10% 20%, rgba(190, 150, 230, 0.4), transparent 50%); }
[data-wall="aurora"] { --wall: linear-gradient(165deg, #0d2238 0%, #17606a 32%, #3fbf9a 50%, #6f5fd6 76%, #1a1040 100%); --glow: radial-gradient(ellipse at 30% 35%, rgba(120, 255, 200, 0.35), transparent 55%), radial-gradient(ellipse at 75% 60%, rgba(150, 110, 255, 0.35), transparent 55%); }
[data-wall="night"] { --wall: linear-gradient(180deg, #0b1026 0%, #1b2a5c 60%, #3a3f8f 100%); --glow: radial-gradient(circle at 70% 20%, rgba(180, 200, 255, 0.25), transparent 40%); }
[data-wall="mint"] { --wall: linear-gradient(180deg, #d9f6e8 0%, #a6e4cd 55%, #9ccaf2 100%); }

.thread {
  --t-fg: #fff; --t-sub: rgba(255, 255, 255, 0.9);
  --t-glass: rgba(255, 255, 255, 0.16); --t-rim: rgba(255, 255, 255, 0.45);
  --b-bg: rgba(70, 76, 90, 0.42); --b-fg: #fff; --b-rim: rgba(255, 255, 255, 0.22);
  position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--wall, var(--bg-canvas-elevated)); color: var(--t-fg);
  transform: translateX(100%); visibility: hidden; transition: transform 0.42s var(--ease), visibility 0s 0.42s;
}
.thread[data-wall="white"], .thread[data-wall="mint"] {
  --t-fg: #1c1c1e; --t-sub: #6e6e73;
  --t-glass: rgba(228, 228, 234, 0.7); --t-rim: rgba(255, 255, 255, 0.9);
  --b-bg: rgba(226, 226, 232, 0.78); --b-fg: #000; --b-rim: rgba(255, 255, 255, 0.95);
}
html[data-theme="dark"] .thread[data-wall="white"] {
  --t-fg: #fff; --t-sub: #a1a1a6; --t-glass: rgba(80, 80, 88, 0.55); --t-rim: rgba(255, 255, 255, 0.25);
  --b-bg: rgba(72, 72, 78, 0.7); --b-fg: #fff; --b-rim: rgba(255, 255, 255, 0.22);
}
.thread::before { content: ""; position: absolute; inset: 0; background: var(--glow, none); pointer-events: none; }
.thread.is-open { transform: none; visibility: visible; transition: transform 0.42s var(--ease); }
.thread-head { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: calc(var(--safe-top) + 6px) 16px 0; }
.t-glass { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 999px; color: var(--t-fg); background: var(--t-glass); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 0 0 0.7px var(--t-rim), inset 0 1.5px 1px rgba(255, 255, 255, 0.5), 0 6px 20px rgba(0, 0, 0, 0.08); font-size: 17px; font-weight: 700; justify-self: start; transition: transform 0.28s var(--ease); }
.t-glass:active { transform: scale(0.95); }
.t-glass svg { width: 14px; height: 22px; }
.t-glass .badge { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 15px; background: #fff; color: #4b4b52; font-size: 15px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.t-glass.round { padding: 0; width: 54px; justify-content: center; justify-self: end; }
.t-glass.round svg { width: 28px; height: 22px; }
.t-center { display: grid; justify-items: center; gap: 6px; }
.t-center .avatar { width: 80px; height: 80px; font-size: 32px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); }
.t-name { height: 38px; max-width: 220px; padding: 0 14px; font-size: 16px; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; justify-self: center; }
.t-name svg { width: 8px; height: 14px; opacity: 0.8; }
.bubbles { position: relative; z-index: 1; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 18px 20px 16px; scrollbar-width: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.bubbles::-webkit-scrollbar { display: none; }
.stamp { align-self: center; margin: 12px 0 6px; font-size: 14px; font-weight: 600; color: var(--t-sub); }
.sender { margin: 10px 0 0 46px; font-size: 14px; color: var(--t-sub); }
.line { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.line.me { justify-content: flex-end; }
.line .avatar { width: 38px; height: 38px; font-size: 14px; }
.bubble { position: relative; max-width: 76%; padding: 10px 18px; border-radius: 24px; font-size: 19px; line-height: 25px; font-weight: 500; color: var(--b-fg); background: var(--b-bg); box-shadow: inset 0 1.5px 1px var(--b-rim), inset 0 0 0 0.6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.06); white-space: pre-wrap; }
.bubble.fresh { animation: pop 0.34s var(--ease); }
.bubble.me { background: #4a9ff9; color: #fff; box-shadow: none; }
/* 같은 사람의 마지막 말풍선은 아래쪽 모서리만 뾰족하게 */
.bubble.last:not(.me) { border-bottom-left-radius: 7px; }
.bubble.me.last { border-bottom-right-radius: 7px; }
.read { align-self: flex-end; margin: 2px 6px 0 0; font-size: 14px; color: var(--t-sub); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
.composer { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 14px); }
.plus { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--t-fg); background: var(--t-glass); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 0 0 0.7px var(--t-rim), inset 0 1.5px 1px rgba(255, 255, 255, 0.5); }
.plus svg { width: 26px; height: 26px; }
.field-glass { flex: 1; min-width: 0; display: flex; align-items: center; height: 58px; padding: 0 8px 0 22px; border-radius: 999px; background: var(--t-glass); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 0 0 0.7px var(--t-rim), inset 0 1.5px 1px rgba(255, 255, 255, 0.5); }
.field-glass input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 19px; color: var(--t-fg); }
.field-glass input::placeholder { color: var(--t-sub); }
.send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--t-sub); transition: background-color 0.2s, color 0.2s; }
.send svg { width: 22px; height: 22px; }
.send.ready { background: #4a9ff9; color: #fff; }
.app.in-thread .dock { transform: translateY(140%); opacity: 0; }
.dock { transition: transform 0.42s var(--ease), opacity 0.3s; }

/* 꾹 눌렀을 때 나오는 메뉴: 대화는 미리보기 카드와 큰 메뉴, 말풍선은 작은 메뉴 */
.ctx-preview { --t-fg: #fff; --t-sub: rgba(255, 255, 255, 0.9); --b-bg: rgba(70, 76, 90, 0.42); --b-fg: #fff; --b-rim: rgba(255, 255, 255, 0.22); background: var(--wall, var(--bg-canvas-elevated)); color: var(--t-fg); }
.ctx-preview[data-wall="white"], .ctx-preview[data-wall="mint"] { --t-fg: #1c1c1e; --t-sub: #6e6e73; --b-bg: rgba(226, 226, 232, 0.78); --b-fg: #000; --b-rim: rgba(255, 255, 255, 0.95); }
html[data-theme="dark"] .ctx-preview[data-wall="white"] { --t-fg: #fff; --t-sub: #a1a1a6; --b-bg: rgba(72, 72, 78, 0.7); --b-fg: #fff; --b-rim: rgba(255, 255, 255, 0.22); }
.ctx-preview::before { content: ""; position: absolute; inset: 0; background: var(--glow, none); }
.ctx-preview .pv { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; height: 100%; padding: 18px 20px; overflow: hidden; }
.ctx-back.mode-stack { background: rgba(200, 200, 206, 0.55); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
html[data-theme="dark"] .ctx-back.mode-stack { background: rgba(0, 0, 0, 0.5); }
.ctx-back.mode-stack #ctx-menu, .ctx-back:not(.mode-stack) .ctx-stack { display: none; }
.ctx-stack { position: absolute; left: 20px; right: 20px; top: calc(var(--safe-top) + 76px); bottom: 24px; display: flex; flex-direction: column; gap: 14px; }
.ctx-preview { position: relative; flex: 1; min-height: 0; border-radius: 40px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); animation: menuIn 0.34s var(--ease); transform-origin: 50% 100%; }
.ctx-menu.big { position: relative; align-self: flex-start; width: 78%; padding: 8px; border-radius: 40px; transform-origin: 20% 0; }
.ctx-menu.big button { display: flex; align-items: center; gap: 18px; padding: 16px 20px; font-size: 20px; border-radius: 30px; }
.ctx-menu button svg { flex: none; width: 24px; height: 24px; }
.ctx-menu:not(.big) button { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.mute-ico { width: 14px; height: 14px; }

.ctx-back { position: absolute; inset: 0; z-index: 130; display: none; }
.ctx-back.is-open { display: block; }
.ctx-menu { position: absolute; min-width: 210px; padding: 6px; border-radius: 22px; background: rgba(250, 250, 252, 0.78); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: inset 0 0 0 0.7px rgba(255, 255, 255, 0.9), 0 14px 40px rgba(0, 0, 0, 0.2); color: #000; transform-origin: var(--ox, 50%) var(--oy, 0); animation: menuIn 0.3s var(--ease); }
html[data-theme="dark"] .ctx-menu { background: rgba(50, 50, 56, 0.78); color: #fff; box-shadow: inset 0 0 0 0.7px rgba(255, 255, 255, 0.2), 0 14px 40px rgba(0, 0, 0, 0.5); }
.ctx-menu button { display: block; width: 100%; padding: 13px 16px; border-radius: 16px; font-size: 17px; text-align: left; }
.ctx-menu button:active { background: rgba(120, 120, 128, 0.2); }
.ctx-menu button.danger { color: var(--status-red); }
@keyframes menuIn { from { opacity: 0; transform: scale(0.85); } }
.walls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; padding: 4px 0 8px; }
.wall-opt { display: grid; justify-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.wall-opt i { display: block; width: 78px; height: 112px; border-radius: 18px; background: var(--wall); border: 3px solid transparent; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); transition: border-color 0.2s; }
.wall-opt[aria-pressed="true"] i { border-color: var(--apple-blue); }

/* ---------- 계정 ---------- */
.profile-top { display: flex; align-items: center; gap: 22px; }
.profile-top .avatar-default, .profile-top .avatar { width: 92px; height: 92px; }
.profile-top .avatar { font-size: 36px; background: linear-gradient(135deg, #7b8de8, #a6a0ee); }
.stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stats b { display: block; font-size: 20px; line-height: 24px; font-weight: 800; }
.stats span { font-size: 14px; color: var(--text-secondary); }
.profile .name { margin: 16px 0 0; font-size: 20px; line-height: 25px; font-weight: 800; }
.profile .bio { margin: 2px 0 0; font-size: 17px; line-height: 24px; color: var(--text-secondary); white-space: pre-line; }
.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.btn { display: grid; place-items: center; height: 46px; border-radius: 999px; background: var(--bg-card-subtle); font-size: 17px; font-weight: 700; transition: transform 0.28s var(--ease); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--apple-blue); color: #fff; }
.segment { display: grid; grid-template-columns: 1fr 1fr; border-top: 0.5px solid var(--hairline); }
.segment button { height: 52px; display: grid; place-items: center; color: var(--text-tertiary); border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
.segment button svg { width: 24px; height: 24px; }
.segment button[aria-selected="true"] { color: var(--text-primary); border-color: var(--text-primary); }
.empty-posts { padding: 40px 24px 44px; text-align: center; }
.empty-posts i { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; border: 2px solid var(--text-primary); font-style: normal; font-size: 30px; }
.toggle { flex: none; width: 51px; height: 31px; border-radius: 16px; background: var(--option-border-idle); position: relative; transition: background-color 0.24s; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.28s var(--ease); }
.toggle[aria-checked="true"] { background: var(--status-green); }
.toggle[aria-checked="true"]::after { transform: translateX(20px); }

/* ---------- 로그인: 번지는 색 위에 떠 있는 리퀴드 글라스 ---------- */
.login { color: #fff; position: absolute; inset: 0; z-index: 110; display: flex; flex-direction: column; background: var(--bg-canvas); overflow: hidden; transform: translateY(100%); visibility: hidden; transition: transform 0.5s var(--ease), visibility 0s 0.5s; }
.login[hidden] { display: flex; }
.login.is-open { transform: none; visibility: visible; transition: transform 0.5s var(--ease); }
.slides, .scrim { position: absolute; inset: 0; }
.slides i { will-change: opacity; position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.15); opacity: 0; transform: scale(1.08); transition: opacity 1.8s ease; }
.slides i.on { opacity: 1; }
.scrim { background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.12) 35%, rgba(0, 0, 0, 0.5) 100%); }
.art.photo { background: url(../assets/login/1.jpg) center/cover; height: 190px; }
.art.photo::before, .art.photo::after { display: none; }
.login .glass-btn.lg { position: absolute; left: 16px; top: calc(var(--safe-top) + 10px); z-index: 2; color: #fff; background: rgba(255, 255, 255, 0.18); }
.login-body { position: relative; z-index: 1; margin-top: calc(var(--safe-top) + 84px); padding: 0 var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.login-title { margin: 0; font-size: 38px; line-height: 44px; font-weight: 800; letter-spacing: -0.026em; }
.login-sub { margin: 0 0 6px; font-size: 17px; line-height: 24px; color: var(--text-secondary); font-weight: 500; }
.lg-card, .lg-btn { background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.7), inset 0 2px 1.5px rgba(255, 255, 255, 0.8), inset 0 -2px 3px rgba(255, 255, 255, 0.15), 0 14px 34px rgba(60, 70, 140, 0.16); }
html[data-theme="dark"] .lg-card, html[data-theme="dark"] .lg-btn { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.28), inset 0 2px 1.5px rgba(255, 255, 255, 0.25), 0 14px 34px rgba(0, 0, 0, 0.4); }
.lg-card { margin: 0; border-radius: 30px; overflow: hidden; }
.lg-card label { display: grid; gap: 4px; padding: 14px 22px; }
.lg-card label + label { border-top: 0.5px solid rgba(120, 120, 128, 0.3); }
.lg-card span { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.lg-card input { border: 0; outline: 0; background: none; padding: 0; font-size: 19px; color: var(--text-primary); }
.lg-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; border-radius: 999px; font-size: 18px; font-weight: 700; transition: transform 0.28s var(--ease), opacity 0.2s; }
.lg-btn:active { transform: scale(0.97); }
.lg-btn { -webkit-tap-highlight-color: transparent; }
.lg-btn.busy, .lg-btn.primary.busy { pointer-events: none; color: transparent; position: relative; }
.lg-btn.busy::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: lg-spin 0.8s linear infinite; }
@keyframes lg-spin { to { transform: rotate(360deg); } }
.lg-btn svg { width: 22px; height: 22px; }
.lg-btn.primary { background: rgba(10, 124, 255, 0.9); color: #fff; box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.5), inset 0 2px 1.5px rgba(255, 255, 255, 0.6), 0 12px 28px rgba(10, 124, 255, 0.35); }
.login-error { min-height: 20px; margin: 0; font-size: 15px; font-weight: 600; color: var(--status-red); text-align: center; }
.login-switch { margin-top: 4px; font-size: 16px; color: var(--text-secondary); text-align: center; }
.login-switch b { color: var(--apple-blue); }

/* ---------- 시트 ---------- */
.dim { position: absolute; inset: 0; z-index: 95; background: rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.dim.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.sheet { position: absolute; inset: auto 0 0 0; z-index: 100; padding: 8px 24px calc(env(safe-area-inset-bottom, 0px) + 24px); border-radius: 32px 32px 0 0; background: var(--bg-canvas); transform: translateY(105%); visibility: hidden; transition: transform 0.42s var(--ease), visibility 0s 0.42s; }
.sheet.is-open { transform: none; visibility: visible; transition: transform 0.42s var(--ease); }
.grabber { width: 36px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: var(--option-border-idle); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sheet-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.field input, .field textarea { width: 100%; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--bg-card); font: inherit; font-size: 17px; font-weight: 400; color: var(--text-primary); outline: 0; resize: none; }

/* ---------- 하단 탭 바 ----------
   막대 유리·아이콘·글자·선택 알약·렌즈는 모두 캔버스(app/tabbar.js)가 그려요.
   뒤 화면 사진이 아직 없거나 WebGL을 못 쓸 때만 CSS 유리 판(.platter)과 알약(.pill)이 대신해요.
   버튼은 눌림과 접근성을 위해 그대로 두고 글자만 투명하게 해요. */

.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--dock-bottom);
  z-index: 50;
  padding: 0 var(--dock-side);
  pointer-events: none;
}

.tabbar {
  /* 색은 캔버스가 읽어 가요. 밝은 테마 기준이에요 */
  --tab-ink: #000000;
  --tab-accent: var(--apple-blue);
  --tab-pill: rgba(0, 0, 0, 0.075);
  --tab-tint: rgba(255, 255, 255, 0.3);
  --tab-edge: rgba(80, 64, 66, 0.28);
  --tab-shadow: 0.08;
  --tab-platter: rgba(255, 255, 255, 0.58);
  --tab-platter-ring: rgba(0, 0, 0, 0.1);
  /* 막대 유리(캔버스)가 읽어 가는 값 */
  --tab-glass-base: #fcfcfe;
  --tab-glass-keep: 0.34;
  --tab-glass-desat: 0.22;
  --tab-line: rgba(70, 66, 72, 0.3);
  --tab-plat-shadow: 0.09;
  --tab-plat-rim: 0.75;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) var(--side-col);
  height: var(--bar-h);
  padding: 4px;
  pointer-events: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

html[data-theme="dark"] .tabbar {
  --tab-ink: #ffffff;
  --tab-pill: rgba(255, 255, 255, 0.15);
  --tab-tint: rgba(255, 255, 255, 0.05);
  --tab-edge: rgba(255, 255, 255, 0.3);
  --tab-shadow: 0.5;
  --tab-platter: rgba(36, 36, 42, 0.5);
  --tab-platter-ring: rgba(255, 255, 255, 0.14);
  --tab-glass-base: #35353d;
  --tab-glass-keep: 0.42;
  --tab-glass-desat: 0.5;
  --tab-line: rgba(255, 255, 255, 0.22);
  --tab-plat-shadow: 0.45;
  --tab-plat-rim: 0.3;
}

.platter {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -3;
  border-radius: 999px;
  background: var(--tab-platter);
  -webkit-backdrop-filter: blur(22px) saturate(1.9);
  backdrop-filter: blur(22px) saturate(1.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 0.5px var(--tab-platter-ring),
    0 8px 28px rgba(0, 0, 0, 0.14);
  transition: scale 0.24s cubic-bezier(0.25, 0.9, 0.3, 1);
}
html[data-theme="dark"] .platter {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 0.5px var(--tab-platter-ring),
    0 10px 30px rgba(0, 0, 0, 0.45);
}
.platter-main { left: 0; right: var(--side-col); }
.platter-side { right: 0; width: var(--bar-h); }

/* 뒤 화면 사진이 준비되면 캔버스가 막대 유리를 직접 그려요. 캔버스 유리가 다 나타난 뒤(0.28초)에 CSS 판을 걷어요.
   사진이 없어지면 이 클래스도 빠지면서 CSS 판이 바로 돌아와요. */
.tabbar.has-glass .platter {
  opacity: 0;
  transition: opacity 0s linear 0.3s;
  scale: 1 !important;
}

/* CSS 판일 때는 눌린 쪽 판만 살짝 부풀어요 */
.tabbar.is-pressed[data-press="main"] .platter-main,
.tabbar.is-pressed[data-press="side"] .platter-side { scale: 1.02; }

.tabbar-canvas {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.tab {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  row-gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--tab-ink);
  font-family: var(--font-sans);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.tab[aria-current] { color: var(--tab-accent); }
.tab-account { margin-left: 16px; }
.tab:focus-visible { outline: 2px solid var(--tab-accent); outline-offset: -2px; }

.tab-icon {
  display: block;
  width: 28px;
  height: 28px;
}
.tab-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tab-label {
  font-size: 11px;
  line-height: 13px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

/* 캔버스가 그릴 때는 DOM 아이콘과 글자를 숨겨요 (스크린 리더와 눌림은 그대로) */
.tabbar.is-gl .tab { color: transparent; }
.tabbar.is-gl .tab-icon svg { visibility: hidden; }

/* WebGL을 못 쓰는 기기: 알약과 색만 CSS로 */
.pill {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  border-radius: 999px;
  background: var(--tab-pill);
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.25, 0.9, 0.3, 1), width 0.28s cubic-bezier(0.25, 0.9, 0.3, 1);
}
.tabbar.is-gl .pill { display: none; }

@media (prefers-reduced-motion: reduce) {
  .platter,
  .pill { transition: none; }
}
html[data-theme="dark"] .lg-btn.primary { background: rgba(10, 132, 255, 0.9); }

/* 꾹 눌러도 글자가 선택되거나 복사·공유 메뉴가 뜨지 않게 (입력칸은 글을 쓸 수 있어야 해서 예외) */
html, body, .app, .app * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.app input, .app textarea {
  -webkit-user-select: text;
  user-select: text;
}
img, svg { -webkit-user-drag: none; }

/* 폭이 좁은 화면(작은 폰이나 확대해서 보는 경우): 바 양옆 여백과 계정 버튼 칸을 줄여서 탭 간격이 답답하지 않게 */
@media (max-width: 380px) {
  :root { --dock-side: 14px; --side-col: 66px; --bar-h: 64px; }
  .tab-account { margin-left: 10px; }
}

/* 로그인은 사진 위에 떠 있어서 밝은 모드에서도 글자는 흰색, 유리는 어둡게 비쳐요 */
.login .login-sub, .login .lg-card span { color: rgba(255, 255, 255, 0.82); }
.login .login-title { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.login .lg-card, .login .lg-btn { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.4), inset 0 2px 1.5px rgba(255, 255, 255, 0.45), 0 14px 34px rgba(0, 0, 0, 0.3); }
.login .lg-btn.primary { background: rgba(10, 132, 255, 0.92); }
.login .lg-card input { color: #fff; }
.login .lg-card input::placeholder { color: rgba(255, 255, 255, 0.55); }
.login .login-switch { color: rgba(255, 255, 255, 0.85); }
.login .login-error { color: #ff8a80; }

/* 로그인하지 않았을 때 계정 탭: "로그인 하세요"와 버튼만 */
.screen[data-screen="account"]:not(.guest):not(.member) > *:not(.large-title) { visibility: hidden; }
.screen[data-screen="account"].guest > *:not(#auth-card), .screen[data-screen="account"].guest .large-title { display: none; }
.app.guest-account .nav-set[data-for="account"] { display: none; }
.screen[data-screen="account"].guest { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 0; padding-bottom: var(--dock-clearance); }
.screen[data-screen="account"].guest #auth-card { display: grid; justify-items: center; gap: 22px; text-align: center; }
.guest-title { margin: 0; font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.026em; }
#auth-card .btn { width: 220px; height: 52px; }

/* 낮은 해상도 사진은 일부러 크게 흐려요. 입력 카드는 더 투명하게 */
.login .lg-card { background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.32), inset 0 2px 1.5px rgba(255, 255, 255, 0.3), 0 14px 34px rgba(0, 0, 0, 0.18); }
.login .lg-card label + label, .login .lg-card .extra label { border-top: 0.5px solid rgba(255, 255, 255, 0.22); }

/* 로그인 ↔ 가입 전환: 글자는 흐려지며 바뀌고, 비밀번호 확인 칸은 펼쳐져요 */
.swap, .login-switch, #login-submit { transition: opacity 0.2s ease, transform 0.3s var(--ease), filter 0.2s ease; }
.swapping .swap, .swapping .login-switch, .swapping #login-submit { opacity: 0; transform: translateY(8px); filter: blur(4px); }
.lg-card .extra { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.5s var(--ease), opacity 0.35s ease; }
.lg-card .extra > div { overflow: hidden; min-height: 0; }
.lg-card .extra label { border-top: 0.5px solid rgba(120, 120, 128, 0.3); }
.signup .lg-card .extra { grid-template-rows: 1fr; opacity: 1; }

/* 계정: 자본 디자인 */
.profile.center { display: grid; justify-items: center; text-align: center; padding-top: 32px; }
.profile.center #profile-avatar { width: 108px; height: 108px; }
.profile.center #profile-avatar.avatar { font-size: 42px; background: linear-gradient(135deg, #7b8de8, #a6a0ee); }
.profile-name { margin: 16px 0 0; font-size: 28px; line-height: 33px; font-weight: 800; letter-spacing: -0.022em; }
.profile-id { margin: 2px 0 0; font-size: 17px; color: var(--text-tertiary); font-weight: 500; }
.profile-id:empty { display: none; }
.profile.center .bio { margin: 8px 0 0; }
.stat { display: grid; align-content: center; justify-items: center; gap: 4px; min-height: 120px; border-radius: var(--radius-card); background: var(--bg-card); }
.stat b { font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.03em; }
.stat span { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.ico-sq { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; color: #fff; font-size: 17px; font-weight: 700; }
.row.logout { justify-content: center; color: var(--status-red); }
.row.logout b { color: var(--status-red); font-size: 17px; }

/* 실명 안내 알림창 (자본 디자인: 유리 카드) */
.alert { position: absolute; inset: 0; z-index: 140; display: grid; place-items: center; padding: 28px; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
.alert[hidden] { display: grid; }
.alert.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s; }
.alert-card { width: 100%; max-width: 330px; padding: 26px 22px 18px; border-radius: 34px; background: rgba(250, 250, 252, 0.88); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.9), 0 24px 60px rgba(0, 0, 0, 0.3); color: #000; text-align: center; transform: scale(0.92); transition: transform 0.4s var(--ease); }
html[data-theme="dark"] .alert-card { background: rgba(44, 44, 48, 0.88); color: #fff; box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.2), 0 24px 60px rgba(0, 0, 0, 0.6); }
.alert.is-open .alert-card { transform: none; }
.alert-card h3 { margin: 0; font-size: 21px; line-height: 27px; font-weight: 800; letter-spacing: -0.02em; }
.alert-card p { margin: 10px 0 0; font-size: 16px; line-height: 23px; color: var(--text-secondary); font-weight: 500; }
.alert-actions { display: flex; gap: 10px; margin-top: 20px; }
.alert-btn { flex: 1; height: 50px; border-radius: 999px; background: rgba(120, 120, 128, 0.16); font-size: 17px; font-weight: 700; transition: transform 0.28s var(--ease); }
.alert-btn:active { transform: scale(0.96); }
.alert-btn.ok { background: var(--apple-blue); color: #fff; }
#name-row label { border-top: 0 !important; border-bottom: 0.5px solid rgba(255, 255, 255, 0.22); }

/* 돈 탭: 토스 홈 화면과 똑같이 */
.toss { --t-blue: #3182f6; --t-ink: #191f28; --t-mid: #333d4b; --t-gray: #6b7684; --t-lgray: #8b95a1; padding-top: calc(var(--safe-top) + 14px); }
html[data-theme="dark"] .toss { --t-ink: #f2f4f6; --t-mid: #e5e8eb; --t-gray: #a3a9b3; --t-lgray: #8b95a1; }
.toss-top { display: flex; justify-content: flex-end; align-items: center; gap: 22px; padding: 6px 28px 18px; color: var(--t-mid); }
.t-pay { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; padding: 0 6px; position: relative; }
.t-pay::before, .t-pay::after { content: ""; position: absolute; width: 8px; height: 8px; border: 2.5px solid currentColor; }
.t-pay::before { left: -4px; top: -2px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; box-shadow: 0 30px 0 -0.5px transparent; }
.t-pay::after { right: -4px; bottom: -2px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.t-bell { position: relative; display: grid; place-items: center; }
.t-bell svg { width: 30px; height: 30px; }
.t-bell i { position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: #f04452; }
.t-card { margin: 0 20px 14px; border-radius: 30px; background: var(--bg-card); color: var(--t-ink); overflow: hidden; }
.t-pad { padding: 30px 28px 26px; }
.t-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.03em; color: var(--t-mid); justify-content: space-between; }
.t-title .tchev { width: 10px; height: 17px; color: var(--t-lgray); }
.tchev { width: 9px; height: 15px; flex: none; color: var(--t-ink); }
.t-acct { margin: 8px 0 0; font-size: 17px; color: var(--t-gray); font-weight: 500; }
.t-bal { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.t-bal b { font-size: 31px; line-height: 38px; font-weight: 700; letter-spacing: -0.035em; color: var(--t-ink); }
.t-bal .t-btn { margin-left: auto; }
.t-btn { flex: none; height: 42px; padding: 0 18px; border-radius: 14px; background: var(--t-blue); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; transition: transform 0.2s var(--ease), opacity 0.2s; }
.t-btn:active { transform: scale(0.95); opacity: 0.85; }
.t-btn.grey { background: rgba(120, 130, 150, 0.14); color: var(--t-mid); }
.t-line { display: flex; align-items: center; gap: 16px; padding: 18px 28px 22px; border-top: 1px solid rgba(120, 130, 150, 0.14); }
.t-line { white-space: nowrap; }
.t-line .ts-name { flex: none; }
.t-ico.cardico { flex: none; min-width: 34px; }
.ts-name { font-size: 20px; font-weight: 600; color: var(--t-mid); letter-spacing: -0.02em; }
.t-right { margin-left: auto; font-size: 17px; color: var(--t-gray); font-weight: 500; }
.t-ico { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; font-size: 28px; }
.t-ico.sm { width: 48px; height: 48px; font-size: 23px; }
.t-ico.cardico { width: 34px; height: 34px; border-radius: 0; background: none; font-size: 0; }
.t-rows { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.t-row { display: flex; align-items: center; gap: 18px; }
.t-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
.t-label { font-size: 16px; color: var(--t-gray); font-weight: 500; }
.t-value { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--t-ink); }
.t-sub.blue { white-space: nowrap; font-size: 16px; font-weight: 600; color: var(--t-blue); }
.t-meter { height: 10px; margin: 22px 0 10px; border-radius: 5px; background: rgba(120, 130, 150, 0.16); overflow: hidden; }
.t-meter span { display: block; height: 100%; border-radius: 5px; background: #20c997; }
.t-note { margin: 0; font-size: 16px; color: var(--t-gray); font-weight: 500; }
.t-date { margin: 22px 0 -4px; font-size: 15px; color: var(--t-lgray); font-weight: 600; }
.t-row.tx .ts-name { font-size: 18px; }
.t-amt { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--t-ink); }
.t-amt.plus { color: var(--t-blue); }

/* 돈 탭: 이모지 없이 검은 윤곽선 아이콘만 */
.t-ico { background: var(--c, rgba(120, 130, 150, 0.12)) !important; color: #191f28; }
.t-ico svg { width: 26px; height: 26px; }
.t-ico.cardico { background: none !important; }
.t-ico.cardico svg { width: 34px; height: 34px; }
.t-title.plain { justify-content: flex-start; }
.t-big { display: block; margin-top: 18px; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.035em; color: var(--t-ink); }
.t-tap { display: block; width: calc(100% - 40px); text-align: left; transition: transform 0.25s var(--ease); }
.t-tap:active { transform: scale(0.985); }
.t-row.tx { width: 100%; }
.t-row.tx .t-main { flex: 1 1 auto; min-width: 0; }
.ts-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-amt { flex: none; white-space: nowrap; font-size: 17px; }
.t-ico.sm { width: 44px; height: 44px; }
.sheet.tall { max-height: 88%; display: flex; flex-direction: column; }
.sheet-scroll { overflow-y: auto; margin: 0 -24px; padding: 0 24px 8px; scrollbar-width: none; }
.sheet.tall .t-row.tx .ts-name { color: var(--t-ink); }
.chart-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px; background: rgba(120, 120, 128, 0.14); }
.chart-seg button { height: 38px; border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--text-secondary); transition: background-color 0.3s var(--ease), color 0.3s, box-shadow 0.3s; }
.chart-seg button[aria-selected="true"] { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.chart-sum { display: grid; gap: 4px; margin: 22px 0 6px; }
.chart-sum span { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.chart-sum b { font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.chart-box { position: relative; height: 210px; margin-top: 6px; touch-action: pan-y; }
.chart-box svg { width: 100%; height: 100%; overflow: visible; }
.chart-axis { position: relative; height: 22px; margin-bottom: 10px; }
.chart-axis span { position: absolute; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
.c-line { fill: none; stroke: #3182f6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.c-area { opacity: 0; }
.c-dot { fill: #fff; stroke: #3182f6; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; }
.c-guide { stroke: rgba(120, 130, 150, 0.5); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.go .c-line { animation: draw 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) forwards; }
.go .c-area { animation: fadeIn 0.9s 0.6s ease forwards; }
.go .c-dot { animation: dotIn 0.35s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes dotIn { from { opacity: 0; } to { opacity: 1; } }
.chart-tip { position: absolute; top: -4px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--text-primary); color: var(--bg-card); font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; }

/* 확대 막기, 칸 밖으로 안 나가게 */
html, body { touch-action: manipulation; }
.t-line { flex-wrap: wrap; row-gap: 4px; }
.t-right { font-size: 16px; text-align: right; white-space: nowrap; }
.t-amt { color: var(--t-ink); }
.t-amt i { font-style: normal; }
.t-amt .pos { color: #f04452; }
.t-amt .neg { color: #3182f6; }
.t-amt.plus { color: var(--t-ink); }
.chart-seg button { display: grid; place-items: center; text-align: center; padding: 0; }
.movable { touch-action: pan-y; position: relative; }
.movable.lifting { z-index: 6; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); }
.bank-bal { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.t-row.prod { align-items: center; }
.t-btn.small { height: 34px; padding: 0 16px; font-size: 15px; }
.t-btn:disabled { opacity: 0.6; }
#bank-list { margin: 0; gap: 18px; padding-top: 4px; }

:root { --t-blue: #3182f6; --t-ink: #191f28; --t-mid: #333d4b; --t-gray: #6b7684; --t-lgray: #8b95a1; }
html[data-theme="dark"] { --t-ink: #f2f4f6; --t-mid: #e5e8eb; --t-gray: #a3a9b3; }
.t-row.prod { gap: 12px; }
.t-row.prod .t-main { min-width: 0; }
.t-row.prod .ts-name { overflow: visible; text-overflow: clip; font-size: 18px; }
.t-row.prod .t-label { font-size: 14px; white-space: nowrap; }

/* ===== 돈 탭: 애플 캐시 모양 ===== */
.toss { padding-top: calc(var(--safe-top) + 8px); }
.ac-top { display: flex; justify-content: flex-end; gap: 6px; padding: 4px 18px 10px; }
.ac-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--text-primary); }
.ac-ic svg { width: 28px; height: 28px; }
.ac-card { position: relative; aspect-ratio: 1291 / 801; margin: 0 20px 14px; border-radius: 16px; background: #000; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); }
.ac-word { position: absolute; left: 19px; top: 14px; z-index: 1; font-size: 38px; line-height: 44px; font-weight: 500; letter-spacing: -0.035em; color: #fff; }
.ac-art { position: absolute; inset: 0; width: 100%; height: 100%; animation: artIn 1.2s var(--ease) both; }
@keyframes artIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
.ac-bal { margin: 0 20px 6px; border-radius: 16px; background: var(--bg-card); overflow: hidden; }
.ac-bal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 12px 18px; }
.ac-bal-row > div { min-width: 0; }
.ac-more-box { margin-top: 12px; }
.ac-more-box .ac-note { padding-top: 14px; }
.ac-bl { display: block; font-size: 15px; line-height: 19px; font-weight: 500; color: var(--text-primary); }
#bal-num { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.035em; color: var(--text-primary); white-space: nowrap; }
#bal-num small { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
#bal-num .coin { flex: none; width: 30px; height: 27px; color: var(--text-primary); }
.ac-fine { display: flex; align-items: center; gap: 12px; margin: 14px 24px 0; color: var(--text-secondary); }
.ac-fine-l { flex: none; font-size: 11px; line-height: 13px; font-weight: 700; color: var(--text-primary); }
.ac-fine i { flex: none; width: 1px; height: 30px; background: var(--hairline); }
.ac-fine b { flex: none; font-size: 21px; line-height: 24px; font-weight: 800; letter-spacing: -0.02em; color: #1d4fa3; }
.ac-pill { flex: none; height: 38px; padding: 0 16px; border-radius: 19px; background: var(--text-primary); color: var(--bg-card); font-size: 15px; font-weight: 600; transition: transform 0.25s var(--ease); }
.ac-pill:active { transform: scale(0.95); }
.ac-note { display: block; width: 100%; padding: 0 22px 14px; text-align: left; font-size: 14px; line-height: 19px; color: var(--text-secondary); font-weight: 500; }
.ac-bal .t-line { border-top: 0.5px solid var(--hairline); }
.ac-h { display: flex; align-items: center; justify-content: space-between; margin: 28px 24px 12px; font-size: 26px; line-height: 31px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); }
.ac-h .tchev { width: 9px; height: 15px; color: var(--text-tertiary); }
.mv { display: block; width: 100%; cursor: pointer; }
.ac-box { margin: 0 20px; padding: 20px 22px; border-radius: 16px; background: var(--bg-card); }
.mv #tx-top { margin: -6px 0; }
.mv .t-rows { margin: 0; gap: 0; }
.t-row.tx { padding: 14px 0; gap: 16px; align-items: center; }
.t-row.tx + .t-row.tx { border-top: 0.5px solid var(--hairline); }
.t-row.tx .t-ico { width: 56px; height: 56px; }
.t-row.tx .t-main { gap: 0; }
.t-row.tx .ts-name { font-size: 18px; line-height: 24px; color: var(--text-primary); }
.t-row.tx .t-label { font-size: 15px; line-height: 21px; color: var(--text-secondary); }
.t-row.tx .t-amt { font-size: 17px; align-self: flex-start; margin-top: 2px; }
.tchev.gr { flex: none; width: 8px; height: 14px; color: var(--text-tertiary); align-self: flex-start; margin-top: 7px; margin-left: -6px; }
.movable.lifting { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.22)); box-shadow: none; }
.t-btn { background: var(--text-primary); color: var(--bg-card); }
.t-btn.grey { background: rgba(120, 120, 128, 0.16); color: var(--text-secondary); }
.t-line { padding: 16px 22px; }

/* ===== 사진 프로필 ===== */
.avatar.photo, .avatar-default.has-photo, .avatar.has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; font-size: 0; }
.avatar-default.has-photo::before, .avatar-default.has-photo::after { display: none; }
#profile-avatar { cursor: pointer; }
.photo-edit { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 16px; padding: 14px 16px; border-radius: 18px; background: var(--bg-card); color: var(--apple-blue); font-size: 17px; font-weight: 600; }
.photo-edit svg { width: 24px; height: 24px; }
.res-list { margin: 0; padding: 0; list-style: none; }
.res-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 4px; text-align: left; }
.res-row .avatar { width: 52px; height: 52px; font-size: 20px; }
.res-main { display: grid; }
.res-main b { font-size: 18px; font-weight: 700; }
.res-main span { font-size: 15px; color: var(--text-secondary); }
.sheet-search { margin: 0 0 6px; }
.plus { cursor: pointer; }

/* ===== + 메뉴 ===== */
.attach-back { position: absolute; inset: 0; z-index: 125; display: none; background: rgba(0, 0, 0, 0.08); }
.attach-back.is-open { display: block; }
.attach { position: absolute; left: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); width: min(78%, 300px); padding: 8px; border-radius: 34px; background: rgba(250, 250, 252, 0.8); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: inset 0 0 0 0.7px rgba(255, 255, 255, 0.9), 0 16px 44px rgba(0, 0, 0, 0.22); color: #000; transform-origin: 10% 100%; animation: menuIn 0.34s var(--ease); }
html[data-theme="dark"] .attach { background: rgba(50, 50, 56, 0.8); color: #fff; box-shadow: inset 0 0 0 0.7px rgba(255, 255, 255, 0.2), 0 16px 44px rgba(0, 0, 0, 0.5); }
.attach button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 14px; border-radius: 26px; font-size: 19px; font-weight: 600; text-align: left; transition: background-color 0.2s; }
.attach button:active { background: rgba(120, 120, 128, 0.2); }
.a-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(120, 120, 128, 0.14); }
.a-ico svg { width: 24px; height: 24px; }

/* ===== 대화 속 카드 ===== */
.media { display: block; max-width: 68%; padding: 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.media img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.media.drawn img { object-fit: contain; background: #fff; }
.cash { width: 232px; padding: 18px 18px 16px; border-radius: 26px; background: linear-gradient(150deg, rgba(176, 181, 194, 0.92), rgba(120, 125, 139, 0.9)); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.5), inset 0 2px 1.5px rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(255, 255, 255, 0.15), 0 8px 22px rgba(60, 66, 90, 0.2); color: #fff; display: grid; gap: 8px; }
.cash-tag { margin: 0; font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
.cash-amt { display: flex; align-items: baseline; gap: 6px; }
.cash-amt b { font-size: 46px; line-height: 52px; font-weight: 800; letter-spacing: -0.04em; color: #fff; text-shadow: 0 2px 10px rgba(40, 44, 60, 0.3); }
.cash-amt span { font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.cash-btn { height: 46px; border-radius: 23px; background: rgba(255, 255, 255, 0.95); color: #1c1c1e; font-size: 18px; font-weight: 600; }
.cash-state { display: grid; place-items: center; height: 46px; border-radius: 23px; background: rgba(255, 255, 255, 0.22); font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.poll { width: 258px; padding: 16px; border-radius: 24px; background: var(--bg-card); color: var(--text-primary); display: grid; gap: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.poll-q { margin: 0 0 2px; font-size: 18px; line-height: 24px; font-weight: 800; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px 6px 6px; border-radius: 16px; background: rgba(120, 120, 128, 0.12); overflow: hidden; text-align: left; }
.poll-opt.on { box-shadow: inset 0 0 0 2px var(--apple-blue); }
.po-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(10, 124, 255, 0.2); transition: width 0.6s var(--ease); }
.poll-opt img { position: relative; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.po-t { position: relative; flex: 1; min-width: 0; font-size: 16px; font-weight: 600; padding-left: 6px; }
.po-n { position: relative; font-size: 15px; font-weight: 700; color: var(--text-secondary); }
.poll-meta { margin: 2px 0 0; font-size: 13px; color: var(--text-tertiary); font-weight: 500; }

/* ===== 토큰 보내기 (회색 리퀴드 글라스 시트) ===== */
.sheet.dark { background: rgba(112, 117, 130, 0.52); -webkit-backdrop-filter: blur(38px) saturate(180%); backdrop-filter: blur(38px) saturate(180%); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.38), inset 0 2px 1.5px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(255, 255, 255, 0.12); color: #fff; border-radius: 40px 40px 0 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }
.sheet.dark .grabber { background: rgba(255, 255, 255, 0.5); }
.gift-to { margin: 6px 0 0; text-align: center; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
.gift-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 6px; }
.gbtn { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 0.7px rgba(255, 255, 255, 0.45), inset 0 1.5px 1px rgba(255, 255, 255, 0.5); color: #fff; transition: transform 0.2s var(--ease), background-color 0.2s; }
.gbtn:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.34); }
.gbtn svg { width: 24px; height: 24px; }
.gamt { position: relative; min-width: 150px; text-align: center; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.gnum-ghost { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-shadow: 0 2px 10px rgba(40, 44, 60, 0.35); pointer-events: none; will-change: transform, opacity, filter; }
#g-num { will-change: transform, opacity, filter; }
.gift-big { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 4px; }
.gbig { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 25px; background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 0.7px rgba(255, 255, 255, 0.45), inset 0 1.5px 1px rgba(255, 255, 255, 0.5); color: #fff; font-size: 19px; transition: transform 0.2s var(--ease), background-color 0.2s; }
.gbig svg { width: 22px; height: 22px; }
.gbig b { font-weight: 700; font-variant-numeric: tabular-nums; }
.gbig:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.34); }
.gamt span { display: inline-block; color: #fff; text-shadow: 0 2px 10px rgba(40, 44, 60, 0.35); }
.gkeys-toggle { display: block; margin: 10px auto 12px; font-size: 16px; color: rgba(255, 255, 255, 0.78); font-weight: 500; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 12px; animation: pop 0.3s var(--ease); }
.keypad[hidden] { display: none; }
.keypad button { height: 54px; border-radius: 27px; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 0.7px rgba(255, 255, 255, 0.4), inset 0 1.5px 1px rgba(255, 255, 255, 0.45); font-size: 24px; font-weight: 600; color: #fff; display: grid; place-items: center; transition: background-color 0.15s, transform 0.15s; }
.keypad button:active { background: rgba(255, 255, 255, 0.36); transform: scale(0.96); }
.keypad svg { width: 26px; height: 26px; }
.gift-bal { margin: 0 0 12px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.72); font-weight: 500; }
.gift-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gact { height: 58px; border-radius: 29px; background: rgba(255, 255, 255, 0.26); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.5), inset 0 2px 1.5px rgba(255, 255, 255, 0.55); color: #fff; font-size: 19px; font-weight: 600; transition: transform 0.25s var(--ease); }
.gact:active { transform: scale(0.96); }

/* ===== 투표 만들기 ===== */
.poll-edit { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.poll-photo { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--bg-card); color: var(--text-tertiary); background-size: cover; background-position: center; }
.poll-photo svg { width: 22px; height: 22px; }
.poll-edit input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; border: 0; border-radius: 16px; outline: 0; background: var(--bg-card); font-size: 17px; color: var(--text-primary); }
#poll-add { margin: 4px 0 8px; }

/* ===== 그리기 ===== */
.draw { position: absolute; inset: 0; z-index: 135; background: #fff; transform: translateY(100%); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0s 0.4s; }
.draw[hidden] { display: block; }
.draw.is-open { transform: none; visibility: visible; transition: transform 0.4s var(--ease); }
html[data-theme="dark"] .draw { background: #fff; }
#draw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.draw-top { position: absolute; left: 16px; right: 16px; top: calc(var(--safe-top) + 10px); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.draw-top > * { pointer-events: auto; }
.draw .glass-btn { color: #111; background: rgba(255, 255, 255, 0.8); }
.draw .glass-btn.primary { color: #fff; background: var(--apple-blue); }
.draw-undo { display: flex; margin-left: auto; margin-right: 12px; height: 48px; padding: 0 6px; border-radius: 24px; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.08); }
.draw-undo button { display: grid; place-items: center; width: 56px; height: 48px; color: #111; }
.draw-undo svg { width: 24px; height: 24px; }
.draw-tools { position: absolute; left: 22px; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); display: flex; align-items: center; gap: 12px; }
.pen-btn { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.12); color: #111; }
.pen-btn svg { width: 34px; height: 34px; }
.palette { display: flex; gap: 10px; padding: 10px 14px; border-radius: 30px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); animation: pop 0.25s var(--ease); }
.palette[hidden] { display: none; }
.palette button { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.12); }

/* ===== 사진 크게 보기, 알림 말풍선 ===== */
.viewer { position: absolute; inset: 0; z-index: 138; display: grid; place-items: center; background: rgba(0, 0, 0, 0.92); opacity: 0; transition: opacity 0.25s; }
.viewer[hidden] { display: none; }
.viewer.is-open { opacity: 1; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.toast { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 110px); z-index: 150; transform: translate(-50%, 20px); max-width: 86%; padding: 12px 20px; border-radius: 999px; background: rgba(28, 28, 30, 0.92); color: #fff; font-size: 15px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.35s var(--ease); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.gact, .cash-btn { display: grid; place-items: center; }
.ac-pill { display: grid; place-items: center; }

/* 돈 탭도 로그인해야 보여요 */
#money-guest { display: none; }
.screen[data-screen="money"].guest { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 0; padding-bottom: var(--dock-clearance); }
.screen[data-screen="money"].guest #money-guest { display: grid; justify-items: center; gap: 22px; text-align: center; }
.screen[data-screen="money"].guest #money-root { display: none; }
.screen[data-screen="money"].guest.is-active { visibility: visible; }
#money-guest .btn { width: 220px; height: 52px; }
.more { display: block; margin: 4px auto 10px; padding: 8px 16px; border-radius: 999px; background: var(--t-glass, rgba(120,120,128,0.16)); color: var(--t-fg, inherit); font-size: 14px; font-weight: 600; }
.mrow { display: contents; }
.topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
.topbar.on { -webkit-backdrop-filter: blur(calc(24px * var(--p))) saturate(calc(100% + 80% * var(--p))); backdrop-filter: blur(calc(24px * var(--p))) saturate(calc(100% + 80% * var(--p))); }

/* 좁은 폰에서도 잔액이 버튼에 가려지지 않게 해요 */
.ac-bal-row > div { flex: 1 1 auto; overflow: hidden; }
@media (max-width: 370px) {
  #bal-num { font-size: 20px; line-height: 26px; }
  #bal-num small { display: none; }
  #bal-num .coin { width: 26px; height: 23px; }
  .ac-pill { padding: 0 12px; font-size: 14px; }
}
@media (max-width: 430px) { #bal-num small { display: none; } }


/* ===== 랭킹 탭: 하얀 카드 시상대 (자본 디자인) ===== */
.rk-sub { margin: -10px var(--gutter) 22px; font-size: 17px; line-height: 23px; font-weight: 500; color: var(--text-secondary); }
.rk-sub small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-tertiary); }
.rk-podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 10px; margin: 28px 16px 20px; }
.rk-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 6px 16px; min-width: 0; border-radius: 24px; background: var(--bg-card); text-align: center; }
.rk-col.g1 { height: 232px; }
.rk-col.g2 { height: 192px; }
.rk-col.g3 { height: 170px; }
.rk-crown { position: absolute; top: -22px; left: 50%; width: 30px; height: 24px; margin-left: -15px; }
.rk-col.g1 .rk-crown { top: -30px; width: 40px; height: 32px; margin-left: -20px; color: #e8a400; }
.rk-col.g2 .rk-crown { color: #9aa0ac; }
.rk-col.g3 .rk-crown { color: #c9803f; }
.rk-n { position: absolute; top: 12px; left: 0; right: 0; font-size: 26px; line-height: 30px; font-weight: 800; color: var(--text-primary); }
.rk-col.g1 .rk-n { top: 14px; font-size: 32px; line-height: 36px; color: #e8a400; }
.rk-col .avatar { width: 52px; height: 52px; font-size: 18px; margin-bottom: 4px; }
.rk-col.g1 .avatar { width: 64px; height: 64px; font-size: 22px; }
.rk-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 22px; font-weight: 700; color: var(--text-primary); }
.rk-val { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rk-col.empty { opacity: 0.5; }
.rk-list { list-style: none; margin: 0 16px; padding: 4px 18px; border-radius: 24px; background: var(--bg-card); }
.rk-list:empty { display: none; }
.rk-row { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.rk-row + .rk-row { border-top: 0.5px solid var(--hairline); }
.rk-rn { flex: none; width: 26px; font-size: 17px; font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.rk-row .avatar, .rk-me .avatar { flex: none; width: 38px; height: 38px; font-size: 14px; }
.rk-rname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.rk-rval { flex: none; font-size: 16px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rk-row.me .rk-rname { color: var(--apple-blue); }
.rk-empty { margin: 22px 24px; text-align: center; font-size: 16px; color: var(--text-secondary); }
.rk-me { position: sticky; bottom: -18px; display: flex; align-items: center; gap: 14px; margin: 16px 16px 0; padding: 12px 18px; border-radius: 24px; background: var(--bg-card); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1), 0 0 0 0.5px var(--hairline); }
.rk-me[hidden] { display: none; }
.rk-mn { flex: none; min-width: 30px; font-size: 18px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rk-me b { flex: 1; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.rk-mval { flex: none; font-size: 16px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
#rank-guest { display: none; }
.screen[data-screen="ranking"].guest { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 0; padding-bottom: var(--dock-clearance); }
.screen[data-screen="ranking"].guest #rank-guest { display: grid; justify-items: center; gap: 22px; text-align: center; }
.screen[data-screen="ranking"].guest #rank-root { display: none; }

/* 서버 데이터베이스가 꺼져 있을 때 알림 */
.cloud-down { position: absolute; left: 12px; right: 12px; top: calc(var(--safe-top) + 58px); z-index: 120; display: grid; gap: 2px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 59, 48, 0.94); color: #fff; text-align: left; box-shadow: 0 10px 28px rgba(255, 59, 48, 0.3); }
.cloud-down[hidden] { display: none; }
.cloud-down b { font-size: 16px; font-weight: 700; }
.cloud-down span { font-size: 13px; line-height: 18px; opacity: 0.92; }


/* ===== 상태: 떠 있는 동그란 버튼. 누르면 돌면서 세 개가 튀어나와요 (선택된 탭 알약처럼 빛나는 유리) ===== */
.status-fab { position: absolute; z-index: 70; width: 46px; height: 46px; }
.fab-tiles { position: absolute; left: 23px; top: 23px; width: 0; height: 0; }
.status-bubble, .fab-tile { color: #fff; background: linear-gradient(150deg, rgba(190, 196, 212, 0.5), rgba(100, 106, 124, 0.5)); -webkit-backdrop-filter: blur(16px) saturate(190%); backdrop-filter: blur(16px) saturate(190%); box-shadow: inset 0 0 0 0.9px rgba(255, 255, 255, 0.75), inset 2px 3px 5px rgba(255, 255, 255, 0.5), inset -2px -3px 6px rgba(150, 200, 255, 0.35), inset 0 0 14px rgba(255, 255, 255, 0.18), 0 8px 20px rgba(30, 34, 50, 0.25); }
.status-bubble { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; touch-action: none; -webkit-tap-highlight-color: transparent; }
.status-bubble svg { grid-area: 1 / 1; width: 24px; height: 24px; transition: transform 0.45s var(--ease), opacity 0.3s; }
.status-bubble .fab-x { opacity: 0; transform: rotate(-180deg) scale(0.6); }
.status-bubble.is-open .fab-i { opacity: 0; transform: rotate(180deg) scale(0.6); }
.status-bubble.is-open .fab-x { opacity: 1; transform: none; }
.fab-tile { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 56px; height: 62px; border-radius: 20px; opacity: 0; }
.fab-tile svg { width: 24px; height: 24px; }
.fab-tile b { font-size: 15px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(3px); transition: opacity 0.35s, transform 0.35s var(--ease); }
.fab-tile.show b { opacity: 1; transform: none; }
/* 사업 탭 */
.card.biz { display: grid; justify-items: start; gap: 12px; padding: 28px 24px 24px; }
.biz-tower { width: 64px; height: 64px; color: var(--text-primary); }
.card.biz .card-title { margin: 4px 0 0; }
.card.biz .card-body { margin: 0; }
.card.biz .btn { justify-self: stretch; margin-top: 8px; }


/* ===== 사업 ===== */
#biz-guest { display: none; }
.screen[data-screen="business"].guest { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 0; padding-bottom: var(--dock-clearance); }
.screen[data-screen="business"].guest #biz-guest { display: grid; justify-items: center; gap: 22px; text-align: center; }
.screen[data-screen="business"].guest #biz-root { display: none; }
.biz-loading { margin: 24px var(--gutter); font-size: 16px; color: var(--text-secondary); }
.biz-logo { flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; overflow: hidden; }
.biz-logo .avatar { width: 48px; height: 48px; font-size: 17px; }
.biz-logo[hidden], .card[hidden], #biz-dash[hidden], .biz-loading[hidden] { display: none; }
.biz-hero { display: flex; align-items: center; gap: 16px; padding: 22px; }
.biz-hero h2 { margin: 0; font-size: 26px; line-height: 31px; font-weight: 800; letter-spacing: -0.03em; word-break: keep-all; }
.biz-hero p { margin: 3px 0 0; font-size: 15px; color: var(--text-secondary); font-weight: 500; }
.biz-mark .avatar { width: 68px; height: 68px; font-size: 24px; }
.card.biz-prod { display: grid; gap: 14px; padding: 20px; }
.biz-empty { margin: 0; font-size: 16px; color: var(--text-secondary); }
.biz-empty[hidden] { display: none; }
.biz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.biz-list:empty { display: none; }
.found-sub { margin: 0 0 18px; text-align: center; font-size: 17px; font-weight: 600; color: var(--text-secondary); }
.found-logo { position: relative; display: grid; place-items: center; width: 104px; height: 104px; margin: 0 auto 22px; border-radius: 50%; overflow: hidden; color: var(--text-secondary); background: rgba(120, 120, 128, 0.16); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.6), inset 0 2px 1.5px rgba(255, 255, 255, 0.7); }
.found-logo svg { position: relative; width: 34px; height: 34px; }
.found-logo-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.found-logo.has-img svg { opacity: 0; }
.found-cost { margin: 0 0 6px; text-align: center; font-size: 15px; color: var(--text-secondary); font-weight: 500; }
.found-go { width: 100%; height: 54px; margin-top: 8px; }
.found-go.busy { opacity: 0.6; pointer-events: none; }

/* ===== 상태가 낮을 때 화면 가장자리 ===== */
.vignette { position: absolute; inset: -6%; z-index: 118; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 52%, rgba(190, 10, 10, 0.55) 100%); transition: opacity 0.9s; }
.vignette.v20 { opacity: 0.6; }
.vignette.v10 { opacity: 0.9; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 38%, rgba(190, 10, 10, 0.62) 100%); animation: vsway 3.4s ease-in-out infinite; }
.vignette.v5 { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 28%, rgba(220, 0, 0, 0.75) 100%); animation: vbeat 1.15s ease-out infinite; }
@keyframes vsway { 0%, 100% { opacity: 0.7; transform: scale(1); } 35% { opacity: 1; transform: scale(1.07); } 70% { opacity: 0.82; transform: scale(0.97); } }
@keyframes vbeat { 0% { opacity: 0.25; } 12% { opacity: 1; } 24% { opacity: 0.4; } 38% { opacity: 0.95; } 60%, 100% { opacity: 0.22; } }
@media (prefers-reduced-motion: reduce) { .vignette.v10, .vignette.v5 { animation: none; opacity: 0.9; } }
.lock { position: absolute; inset: 0; z-index: 300; display: grid; place-items: center; padding: 28px; background: rgba(8, 8, 14, 0.82); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); color: #fff; text-align: center; }
.lock[hidden] { display: none; }
.lock-card { display: grid; gap: 10px; max-width: 320px; }
.lock-card h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.lock-n { margin: 0; font-size: 17px; color: rgba(255, 255, 255, 0.7); font-weight: 500; }
.lock-t { margin: 8px 0; font-size: 26px; line-height: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lock-sub { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); }
.status-fab[hidden] { display: none; }

/* ===== 팔 상품 정하기: 전체 화면, 리퀴드 글라스 (늘 밝은 화면이라 검은 아이콘이 잘 보여요) ===== */
.pk { position: absolute; inset: 0; z-index: 190; display: flex; flex-direction: column; overflow: hidden; color-scheme: light; background: #ffffff; color: #000; }
.pk[hidden] { display: none; }

.pk-top { position: relative; z-index: 3; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; padding: calc(var(--safe-top) + 10px) 14px 6px; }
.pk-title { min-width: 0; text-align: center; }
.pk-title b { display: block; font-size: 19px; line-height: 24px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-title span { display: block; margin-top: 1px; font-size: 13px; line-height: 17px; color: rgba(60, 60, 67, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-title span:empty { display: none; }
.pk-glass { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #000; background: linear-gradient(165deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0.45)); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: inset 0 0 0 0.9px rgba(255, 255, 255, 0.95), inset 0 2px 1.5px rgba(255, 255, 255, 0.95), inset 0 -3px 5px rgba(255, 255, 255, 0.2), 0 10px 24px rgba(30, 40, 90, 0.14); transition: transform 0.35s var(--ease); }
.pk-glass:active { transform: scale(0.9); }
.pk-glass svg { width: 22px; height: 22px; }
.pk-spacer { width: 46px; }

/* 위쪽 그림 칸 */
.pk-prev { position: relative; z-index: 2; height: 0; overflow: hidden; transition: height 0.5s var(--ease); }
.pk-prev.on { height: 226px; }
.pk-prev.pk-big.on { height: 300px; }
.pk-pvbox { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; }
.pkv { position: relative; flex: none; height: 100%; width: auto; aspect-ratio: 120 / 200; filter: drop-shadow(0 16px 20px rgba(20, 24, 60, 0.22)); }
.pkv svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pkv-line { fill: none; stroke: rgba(0, 0, 0, 0.18); stroke-width: 1.4; stroke-linecap: round; }
.pkv-logo { position: absolute; left: 50%; transform: translate(-50%, -50%); aspect-ratio: 1; box-sizing: border-box; padding: 5%; border-radius: 50%; background: #fff; display: grid; place-items: center; container-type: inline-size; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06); overflow: hidden; }
.pkv-logo i { display: block; width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; }
.pkv-logo.init { background: linear-gradient(160deg, #a6b6e2, #7b7fd0); }
.pkv-logo b { font-size: 40cqw; line-height: 1; font-weight: 800; color: #fff; }
.pkv.pkv-sm { width: 40px; height: 66px; aspect-ratio: auto; filter: none; }
.pkv.pkv-sm svg { width: 40px; height: 66px; }

/* 고르는 화면 */
.pk-stage { position: relative; z-index: 1; flex: 1; min-height: 0; }
.pk-view { position: absolute; inset: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 30px); scrollbar-width: none; will-change: transform, opacity; }
.pk-view::-webkit-scrollbar { display: none; }
.pk-root { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; align-items: start; gap: 8px; padding: 46px 6px 0; }
.pk-orbwrap { display: grid; justify-items: center; gap: 12px; min-width: 0; }
/* 식품·컴퓨터·인공지능 메뉴: 둥근 사각형 회색 리퀴드 글라스 (돈 보내기 시트와 같은 재질) */
.pk-orb { position: relative; display: grid; place-items: center; width: min(108px, 28vw); height: auto; aspect-ratio: 1; border-radius: 32px; color: #000; background: rgba(112, 117, 130, 0.52); -webkit-backdrop-filter: blur(38px) saturate(180%); backdrop-filter: blur(38px) saturate(180%); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.38), inset 0 2px 1.5px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(255, 255, 255, 0.12), 0 14px 30px rgba(40, 60, 120, 0.14); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.pk-orb:active { transform: scale(0.93); }
.pk-orb svg { position: relative; width: 44px; height: 44px; }
.pk-orb-l { font-size: 16px; font-weight: 700; }

.pk-list { display: grid; gap: 12px; }
.pk-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 16px 13px 13px; border-radius: 28px; color: #000; text-align: left; background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.46)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0 0 0.9px rgba(255, 255, 255, 0.95), inset 0 2px 1.5px rgba(255, 255, 255, 0.95), 0 8px 22px rgba(40, 50, 100, 0.1); animation: pkIn 0.55s var(--ease) backwards; animation-delay: calc(var(--i) * 60ms); transition: transform 0.25s var(--ease), box-shadow 0.35s; }
.pk-row:active { transform: scale(0.98); }
.pk-row.is-on { box-shadow: inset 0 0 0 1.5px rgba(10, 124, 255, 0.9), 0 0 0 3px rgba(10, 124, 255, 0.2), 0 10px 24px rgba(10, 124, 255, 0.25); }
.pk-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; color: #000; background: var(--gg); box-shadow: var(--gg-rim); }
.pk-ic svg { width: 24px; height: 24px; }
.pk-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pk-main b { font-size: 19px; font-weight: 700; }
.pk-main span { font-size: 14px; color: rgba(60, 60, 67, 0.7); }
.pk-chev { display: grid; flex: none; }
.pk-chev svg { width: 9px; height: 15px; color: rgba(60, 60, 67, 0.4); }
@keyframes pkIn { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.97); } to { opacity: 1; transform: none; } }

.pk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pk-tile { min-width: 0; display: grid; place-items: center; aspect-ratio: 0.7; padding: 10px 6px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.95), 0 4px 12px rgba(40, 50, 100, 0.07); animation: pkTile 0.5s var(--ease) backwards; animation-delay: calc(var(--i) * 10ms); transition: transform 0.3s var(--ease), box-shadow 0.35s; }
.pk-tile svg { width: 100%; height: 100%; }
.pk-tile.is-on { transform: scale(1.04); box-shadow: inset 0 0 0 1.5px rgba(10, 124, 255, 0.95), inset 0 3px 8px rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(10, 124, 255, 0.22), 0 10px 22px rgba(10, 124, 255, 0.28); }
.pk-tile:active { transform: scale(0.94); }
.th-on { fill: #c9ced8; }
.th-neck { fill: #e4e7ee; }
.th-line { fill: none; stroke: rgba(0, 0, 0, 0.22); stroke-width: 1.6; stroke-linecap: round; }
@keyframes pkTile { from { opacity: 0; transform: scale(0.6) translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.pk-sw { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.7), inset 0 -8px 12px rgba(0, 0, 0, 0.12), inset 0 4px 7px rgba(255, 255, 255, 0.5), 0 4px 12px rgba(0, 0, 0, 0.1); animation: pkTile 0.5s var(--ease) backwards; animation-delay: calc(var(--i) * 10ms); transition: transform 0.3s var(--ease), box-shadow 0.35s; }
.pk-sw.is-on { transform: scale(1.08); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0a7cff, 0 10px 22px rgba(10, 124, 255, 0.35); }
.pk-sw:active { transform: scale(0.9); }

.pk-soon { display: grid; justify-items: center; gap: 10px; padding-top: 70px; text-align: center; animation: pkIn 0.55s var(--ease) backwards; }
.pk-soon-orb { display: grid; place-items: center; width: min(108px, 28vw); height: auto; aspect-ratio: 1; border-radius: 32px; color: #000; background: rgba(112, 117, 130, 0.52); -webkit-backdrop-filter: blur(38px) saturate(180%); backdrop-filter: blur(38px) saturate(180%); box-shadow: inset 0 0 0 0.8px rgba(255, 255, 255, 0.38), inset 0 2px 1.5px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(255, 255, 255, 0.12), 0 14px 30px rgba(40, 60, 120, 0.14); }
.pk-soon-orb svg { width: 44px; height: 44px; }
.pk-soon-t { margin: 8px 0 0; font-size: 22px; font-weight: 800; }
.pk-soon-s { margin: 0; font-size: 15px; color: rgba(60, 60, 67, 0.7); }

/* 원가와 가격 */
.pk-sum { display: grid; gap: 14px; }
.pk-sum-name { margin: 2px 0 0; text-align: center; font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -0.03em; }
.pk-sum-sub { margin: -8px 0 4px; text-align: center; font-size: 15px; color: rgba(60, 60, 67, 0.7); }
.pk-card { padding: 18px 20px; border-radius: 30px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.5)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0 0 0.9px rgba(255, 255, 255, 0.95), inset 0 2px 1.5px rgba(255, 255, 255, 0.95), 0 8px 22px rgba(40, 50, 100, 0.1); }
.pk-lab { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: rgba(60, 60, 67, 0.7); }
.pk-cost-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 16px; color: rgba(60, 60, 67, 0.9); }
.pk-cost-row b { font-weight: 600; font-variant-numeric: tabular-nums; color: #000; }
.pk-cost-total { margin-top: 6px; padding-top: 12px; border-top: 0.5px solid rgba(60, 60, 67, 0.2); font-size: 18px; font-weight: 800; color: #000; }
.pk-cost-total b { font-weight: 800; }
.pk-input { display: block; width: 100%; padding: 4px 0; border: 0; outline: 0; background: transparent; text-align: center; font: inherit; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #000; }
.pk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.pk-step { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 21px; background: rgba(120, 120, 128, 0.14); font-size: 16px; font-weight: 700; color: #000; text-align: center; transition: transform 0.2s var(--ease), background-color 0.2s; }
.pk-step:active { transform: scale(0.92); background: rgba(120, 120, 128, 0.26); }
.pk-chip { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0 16px; border-radius: 20px; background: rgba(10, 124, 255, 0.12); color: #0a7cff; font-size: 15px; font-weight: 600; text-align: center; }
.pk-profit { margin: 10px 0 0; min-height: 20px; text-align: center; font-size: 15px; font-weight: 600; color: #0a7cff; }
.pk-profit.loss { color: #ff3b30; }
.pk-err { min-height: 20px; margin: 0; text-align: center; font-size: 15px; font-weight: 600; color: #ff3b30; }
.pk-sell { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; border-radius: 30px; color: #fff; font-size: 19px; font-weight: 700; text-align: center; background: linear-gradient(#3b93ff, #0a7cff); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.5), 0 14px 30px rgba(10, 124, 255, 0.35); transition: transform 0.25s var(--ease), opacity 0.2s; }
.pk-sell:active { transform: scale(0.97); }
.pk-sell.busy { opacity: 0.6; pointer-events: none; }
/* 칸을 고르면 아래 확인 버튼으로 넘어가요. 윤곽선 없이 밝은 바탕 위에 둬요 */
.pk button:focus, .pk input:focus, .bz-dim button:focus, .bz-sheet button:focus, .bz-card button:focus, .bz-card input:focus { outline: 0; }
.pk-name { display: block; width: 100%; padding: 4px 0; border: 0; outline: 0; background: transparent; text-align: center; font: inherit; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #000; }
.pk-foot { position: relative; z-index: 3; padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 14px); background: #ffffff; }
.pk-foot[hidden] { display: none; }
.pk-ok { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 28px; color: #fff; font-size: 18px; font-weight: 700; text-align: center; background: linear-gradient(#3b93ff, #0a7cff); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.5), 0 12px 26px rgba(10, 124, 255, 0.3); transition: transform 0.25s var(--ease), opacity 0.2s, background-color 0.2s, box-shadow 0.2s; }
.pk-ok:active { transform: scale(0.97); }
.pk-ok:disabled { background: rgba(120, 120, 128, 0.22); color: rgba(60, 60, 67, 0.5); box-shadow: none; transform: none; }

/* 팔기 완료 */
.pk-done { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(242, 242, 247, 0.5); pointer-events: none; }
.pk-done i { display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; color: #000; background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), 0 18px 40px rgba(20, 60, 40, 0.25); }
.pk-done svg { width: 54px; height: 54px; }

/* 사업 탭의 판매 목록 */
.biz-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 22px; background: var(--bg-card-subtle); animation: bizIn 0.45s var(--ease) backwards; animation-delay: calc(var(--i) * 50ms); transition: opacity 0.24s, transform 0.24s var(--ease); }
.biz-item.out { opacity: 0; transform: translateX(-14px) scale(0.97); }
.biz-thumb { flex: none; display: block; width: 40px; height: 66px; }
.biz-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.biz-main b { font-size: 17px; font-weight: 700; line-height: 22px; overflow-wrap: anywhere; }
.biz-main span { font-size: 13px; color: var(--text-secondary); }
/* 더보기(⋯): 이름 바꾸기, 판매 멈추기, 판매 종료하기 목록을 열어요 */
.biz-more { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #000; background: rgba(120, 120, 128, 0.14); transition: transform 0.2s var(--ease); }
.biz-more:active { transform: scale(0.92); }
.biz-more svg { width: 20px; height: 20px; }
.biz-tag { justify-self: start; margin-top: 2px; padding: 2px 9px; border-radius: 10px; font-style: normal; font-size: 12px; font-weight: 700; color: rgba(60, 60, 67, 0.9); background: rgba(120, 120, 128, 0.16); }

/* 아래에서 올라오는 목록(액션 시트)과 가운데 이름 카드 */
.bz-dim { position: absolute; inset: 0; z-index: 160; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s; }
.bz-dim.on { opacity: 1; }
.bz-sheet { position: absolute; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); z-index: 161; display: grid; gap: 8px; transform: translate3d(0, calc(100% + 24px), 0); transition: transform 0.42s var(--ease); }
.bz-sheet.on { transform: none; }
.bz-sheet-t, .bz-sheet-g, .bz-cancel { overflow: hidden; border-radius: 20px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 10px 28px rgba(30, 40, 80, 0.16); }
.bz-sheet-t { margin: 0; padding: 14px 16px; text-align: center; font-size: 14px; line-height: 19px; font-weight: 600; color: rgba(60, 60, 67, 0.7); }
.bz-sheet-g { display: grid; }
.bz-act { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; padding: 0 16px; font-size: 19px; font-weight: 600; color: #0a7cff; text-align: center; }
.bz-sheet-g .bz-act + .bz-act { border-top: 0.5px solid rgba(60, 60, 67, 0.18); }
.bz-act.danger { color: #ff3b30; }
.bz-cancel { font-weight: 700; }
.bz-card { position: absolute; left: 50%; top: 50%; z-index: 161; display: grid; gap: 12px; width: min(300px, calc(100% - 56px)); padding: 22px 18px 16px; border-radius: 26px; background: #ffffff; box-shadow: 0 18px 44px rgba(20, 30, 70, 0.24); opacity: 0; transform: translate(-50%, -50%) scale(0.94); transition: transform 0.42s var(--ease), opacity 0.3s; }
.bz-card.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bz-card-t { margin: 0; text-align: center; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.bz-input { display: block; width: 100%; height: 48px; padding: 0 12px; border: 0; outline: 0; border-radius: 14px; background: rgba(120, 120, 128, 0.12); text-align: center; font: inherit; font-size: 18px; font-weight: 600; color: #000; }
.bz-err { min-height: 18px; margin: 0; text-align: center; font-size: 13px; font-weight: 600; color: #ff3b30; }
.bz-card-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bz-btn { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 23px; background: rgba(120, 120, 128, 0.14); font-size: 17px; font-weight: 600; color: #000; text-align: center; }
.bz-btn.primary { background: linear-gradient(#3b93ff, #0a7cff); color: #fff; font-weight: 700; }

/* ===== 회색 리퀴드 글라스: 돈 보내기 시트와 같은 재질 (어두운 회색 유리 + 흰 테두리 빛). 많은 조작 칸에 씀 ===== */
:root { --gg: rgba(112, 117, 130, 0.52); --gg-rim: inset 0 0 0 0.8px rgba(255, 255, 255, 0.38), inset 0 2px 1.5px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(255, 255, 255, 0.12); --spring: cubic-bezier(0.2, 0.9, 0.25, 1.06); }
.gg { background: var(--gg); -webkit-backdrop-filter: blur(38px) saturate(180%); backdrop-filter: blur(38px) saturate(180%); box-shadow: var(--gg-rim); color: #000; }
/* 고르는 칸: 회색 유리 바닥에 흰 칸이 미끄러져 가요 (--n 칸 수, --i 고른 칸 번호) */
.gseg { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); padding: 4px; border-radius: 999px; background: var(--gg); -webkit-backdrop-filter: blur(38px) saturate(180%); backdrop-filter: blur(38px) saturate(180%); box-shadow: var(--gg-rim); }
.gseg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2)); border-radius: 999px; background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); transform: translate3d(calc(var(--i, 0) * 100%), 0, 0); transition: transform 0.5s var(--spring); }
.gseg > button { position: relative; z-index: 1; height: 40px; min-width: 0; border-radius: 999px; font-size: 16px; font-weight: 700; color: #000; text-align: center; transition: color 0.3s; }
.gseg > button:disabled { color: rgba(0, 0, 0, 0.4); }
.gseg > button span { margin-left: 5px; font-size: 11px; font-weight: 700; color: rgba(0, 0, 0, 0.55); }
.field-l { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.found-kinds { margin: 0 0 16px; }

/* 사업: 직원 채용 */
.card.hire { display: grid; gap: 16px; padding: 22px; }
.hire-stat { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.hire-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hire-label { margin: 0; font-size: 17px; font-weight: 700; }
.stepper { display: flex; align-items: center; gap: 14px; }
.hire-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; transition: transform 0.25s var(--spring), opacity 0.25s; }
.hire-btn:not(:disabled):active { transform: scale(0.9); }
.hire-btn:disabled { opacity: 0.35; }
.hire-btn svg { width: 22px; height: 22px; }
.hire-num { min-width: 36px; text-align: center; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hire-num.pop, .wk-count.pop { animation: wkPop 0.45s var(--spring); }
.hire-note { margin: -4px 0 0; font-size: 14px; line-height: 19px; color: var(--text-secondary); }
.btn.busy, .wk-quit.busy, .wk-apply.busy { opacity: 0.6; pointer-events: none; }

/* 일: 취업 목록 */
.wk-kinds { margin: 14px var(--gutter) 0; }
.wk-search { display: flex; align-items: center; gap: 10px; height: 46px; margin: 14px var(--gutter) 0; padding: 0 16px; border-radius: 999px; }
.wk-search svg { flex: none; width: 18px; height: 18px; }
.wk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 17px; color: #000; }
.wk-search input::placeholder { color: rgba(0, 0, 0, 0.5); }
.wk-sorts { display: flex; gap: 10px; margin-top: 14px; padding: 4px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; }
.wk-sorts::-webkit-scrollbar { display: none; }
.wk-pill { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 700; color: #000; text-align: center; white-space: nowrap; transition: transform 0.25s var(--spring), background-color 0.3s, box-shadow 0.3s; }
.wk-pill:active { transform: scale(0.95); }
.wk-pill[aria-pressed="true"] { background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); }
.wk-meta { margin: 12px var(--gutter) 10px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.wk-list { overflow: hidden; transition: opacity 0.25s; }
.wk-list.loading { opacity: 0.55; }
.wk-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; text-align: left; border-top: 0.5px solid var(--hairline); animation: wkIn 0.5s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 40ms); transition: background-color 0.2s; }
.wk-row:first-child { border-top: 0; }
.wk-row:active { background: rgba(120, 120, 128, 0.08); }
.wk-av { flex: none; width: 46px; height: 46px; font-size: 17px; }
.wk-av.big { width: 68px; height: 68px; font-size: 24px; }
.wk-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.wk-body b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-body > span { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-tag { flex: none; display: grid; place-items: center; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #0a7cff; background: rgba(10, 124, 255, 0.14); }
.wk-tag.off { color: #000; background: var(--gg); }
.wk-empty { margin: 0; padding: 28px 20px; text-align: center; font-size: 16px; color: var(--text-secondary); }
.wk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 var(--gutter) 16px; }
.wk-stat { display: grid; justify-items: center; gap: 4px; padding: 14px 6px; border-radius: 22px; }
.wk-stat b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wk-stat span { font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, 0.7); }

/* 일: 회사 창 (아래에서 올라와요) */
.wk-dim { position: absolute; inset: 0; z-index: 120; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.35s; }
.wk-dim.on { opacity: 1; }
.wk-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 121; display: grid; gap: 16px; padding: 8px 20px calc(env(safe-area-inset-bottom, 0px) + 22px); border-radius: 32px 32px 0 0; background: var(--bg-card); box-shadow: 0 -12px 40px rgba(20, 30, 60, 0.18); transform: translate3d(0, 105%, 0); transition: transform 0.5s var(--spring); }
.wk-sheet.on { transform: none; }
.wk-sheet .grabber { margin: 0 auto 4px; }
.wk-sheet .wk-stats { margin: 0; }
.wk-sheet-head { display: flex; align-items: center; gap: 16px; }
.wk-sheet-head h2 { margin: 0; font-size: 24px; line-height: 29px; font-weight: 800; letter-spacing: -0.02em; }
.wk-sheet-head p { margin: 3px 0 0; font-size: 15px; color: var(--text-secondary); }
.wk-why { margin: 0; text-align: center; font-size: 15px; line-height: 21px; color: var(--text-secondary); }
.wk-apply { width: 100%; }
.wk-apply:disabled { opacity: 0.4; }
.wk-cancel { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; padding: 0 20px; border-radius: 25px; font-size: 17px; font-weight: 700; text-align: center; }

/* 일: 사장이거나 직원일 때 */
.wk-hero { display: flex; align-items: center; gap: 16px; padding: 22px; }
.wk-hero h2 { margin: 0; font-size: 24px; line-height: 29px; font-weight: 800; letter-spacing: -0.02em; }
.wk-role { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #0a7cff; }
.wk-since { margin: 4px 0 0; font-size: 14px; color: var(--text-secondary); }
.wk-work { display: grid; gap: 14px; padding: 22px; }
.wk-head { margin: 0; font-size: 22px; line-height: 27px; font-weight: 800; letter-spacing: -0.02em; }
.wk-note { margin: 0; font-size: 15px; line-height: 21px; color: var(--text-secondary); }
.wk-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wk-step { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 8px; border-radius: 26px; font-size: 16px; font-weight: 700; text-align: center; transition: transform 0.25s var(--spring), background-color 0.3s, color 0.3s, opacity 0.3s, box-shadow 0.3s; }
.wk-step:not(:disabled):active { transform: scale(0.95); }
.wk-step:disabled { opacity: 0.45; }
.wk-step.done { color: #ffffff; background: #0a7cff; box-shadow: 0 6px 16px rgba(10, 124, 255, 0.3); }
.wk-bar { position: relative; height: 10px; border-radius: 999px; overflow: hidden; }
.wk-bar i { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, #3b93ff, #0a7cff); transform-origin: left center; transform: scaleX(0); transition: transform 0.6s var(--spring); }
.wk-count { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.wk-fake { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 999px; }
.wk-fake svg { flex: none; width: 18px; height: 18px; }
.wk-fake input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: #000; }
.wk-fake input::placeholder { color: rgba(0, 0, 0, 0.5); }
.wk-hits { list-style: none; margin: 0; padding: 0; }
.wk-hit { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 0.5px solid var(--hairline); animation: wkIn 0.5s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.wk-hit:first-child { border-top: 0; }
.wk-hit-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wk-hit-t b { font-size: 16px; font-weight: 700; }
.wk-hit-t span { font-size: 13px; color: var(--text-secondary); }
.wk-get { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 96px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 700; transition: transform 0.25s var(--spring), background-color 0.3s, color 0.3s; }
.wk-get:not(:disabled):active { transform: scale(0.95); }
.wk-get.done { color: #ffffff; background: #0a7cff; }
.wk-get svg { width: 16px; height: 16px; }
.wk-get em { font-style: normal; font-size: 13px; font-variant-numeric: tabular-nums; }
.wk-meter { position: relative; width: 56px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); overflow: hidden; }
.wk-meter i { position: absolute; inset: 0; background: #0a7cff; transform-origin: left center; transform: scaleX(0); }
.wk-soon { justify-items: center; text-align: center; }
.wk-soon-ic { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 30px; }
.wk-soon-ic svg { width: 42px; height: 42px; }
.wk-quit { display: flex; align-items: center; justify-content: center; width: calc(100% - 2 * var(--gutter)); margin: 0 auto; height: 52px; padding: 0 20px; border-radius: 26px; font-size: 17px; font-weight: 700; text-align: center; color: #ff3b30; }

/* 일: 로그인 전 */
#work-guest { display: none; }
.screen[data-screen="work"].guest { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 0; padding-bottom: var(--dock-clearance); }
.screen[data-screen="work"].guest > .large-title { display: none; }
.screen[data-screen="work"].guest #work-guest { display: grid; justify-items: center; gap: 22px; text-align: center; }
.screen[data-screen="work"].guest #work-root { display: none; }
#work-guest .btn { width: 220px; height: 52px; }

@keyframes wkIn { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes wkPop { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes bizIn { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }

/* 상품 그림 선: 검은 윤곽선 (화면이 커져도 선 굵기가 같아요) */
.pk-body { stroke: #111; stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pk-ext { stroke: #111; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.pk-win { stroke: #111; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.pk-det { fill: none; stroke: #111; stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pk-hl { fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; opacity: 0.75; vector-effect: non-scaling-stroke; }
.pkv svg, .pk-tile svg { overflow: visible; }

/* 회색 리퀴드 글라스: 흰 바탕 위에서 버튼과 카드에만 쓰고, 나머지는 흰색 그대로 */
.pk-glass, .pk-row, .pk-card, .pk-tile, .pk-step, .pk-chip {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(224, 227, 234, 0.72) 56%, rgba(200, 205, 214, 0.62));
}
.pk-tile { background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(234, 236, 241, 0.85)); }
.pk-chip { color: #0a7cff; }
.pk-done i { background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(214, 218, 226, 0.72)); }

/* 사업: 회사 고르기, 회사 더 만들기, 업종 */
.biz-switch { display: flex; gap: 10px; margin: 4px var(--gutter) 12px; overflow-x: auto; scrollbar-width: none; }
.biz-switch::-webkit-scrollbar { display: none; }
.biz-switch[hidden] { display: none; }
#biz-more { margin: 0 var(--gutter) 20px; width: calc(100% - 2 * var(--gutter)); }
.biz-kinds { margin: 0 var(--gutter) 20px; }

/* 회사 프로필 창, 창업 때 업종 알약, 업종 줄 */
.found-kinds, .co-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.found-kinds button, .co-kinds button { height: 40px; padding: 0 16px; font-size: 15px; font-weight: 700; color: #000; }
.found-kinds button[aria-pressed="true"], .co-kinds button[aria-pressed="true"] { background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); }
.co-prof { display: grid; justify-items: center; gap: 6px; padding: 6px 0 14px; text-align: center; }
.co-prof h3 { margin: 6px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.co-prof p { margin: 0; font-size: 15px; color: var(--text-secondary); }
.co-mark .avatar { width: 72px; height: 72px; font-size: 24px; }
#co-save:disabled { opacity: 0.4; }
.wk-kinds { margin: 14px 0 0; }

/* 연구실·발전소·부품 검사판 */
.card.biz-lab { display: grid; gap: 12px; padding: 22px; }
.card.biz-lab[hidden] { display: none; }
.lab-t { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-secondary); }
.lab-big { margin: 6px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lab-big small { margin-left: 8px; font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.lab-sub { margin: 4px 0 0; font-size: 15px; line-height: 21px; color: var(--text-secondary); }
.lab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.lab-stats span { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-radius: 16px; background: #f2f2f7; font-size: 13px; color: var(--text-secondary); }
.lab-stats b { font-size: 20px; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; }
.lab-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; font-size: 15px; color: var(--text-secondary); }
.lab-input { width: 120px; padding: 10px 12px; border: 0; border-radius: 14px; background: #f2f2f7; font: inherit; font-size: 20px; font-weight: 800; text-align: right; color: #000; font-variant-numeric: tabular-nums; }
.lab-input:focus { outline: 2px solid #0a7cff; outline-offset: 1px; }
/* 회사 금고와 단가 */
.lab-cash, .lab-price { display: grid; gap: 10px; }
.lab-unit { display: flex; align-items: center; gap: 6px; }
.lab-unit b { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.lab-cashv { color: #000; font-weight: 800; }

/* 시장: 인공지능 회사가 전기와 컴퓨터를 사요 */
.lab-market { display: grid; gap: 12px; }
.lab-row { display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: #f2f2f7; }
.lab-rowt { display: grid; gap: 2px; font-size: 15px; min-width: 0; }
.lab-rowt b { font-weight: 700; color: #000; overflow-wrap: anywhere; }
.lab-rowt span { font-size: 13px; color: var(--text-secondary); }
.lab-rowbuy { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.lab-rowbuy .lab-input { width: 100%; }

/* 핵연료 배합 벤치: 재료 병, 스포이드, 플라스크, 꾹 눌러 섞기 */
.lab-bench { display: grid; gap: 14px; }
.lab-top { display: flex; align-items: center; gap: 14px; }
.lab-sw { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--c, #f2f2f7); transition: background-color 0.4s ease; }
.lab-meta { display: grid; gap: 4px; min-width: 0; font-size: 15px; color: var(--text-secondary); }
.lab-meta b { color: #000; font-weight: 700; }
.lab-meter { display: block; width: 140px; height: 6px; border-radius: 3px; background: #f2f2f7; overflow: hidden; }
.lab-meter i { display: block; height: 100%; width: 0; border-radius: 3px; background: #0a7cff; transition: width 0.3s ease; }
.lab-flaskwrap { position: relative; justify-self: center; width: 150px; height: 200px; }
.lab-flask { position: absolute; left: 0; bottom: 0; width: 150px; height: 190px; padding: 0; border: 0; background: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lab-flask svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lab-liquid { transition: transform 0.45s ease, fill 0.45s ease; }
.lab-dropper { position: absolute; left: 50%; top: 0; width: 34px; height: 70px; margin-left: -17px; pointer-events: none; transform-origin: 50% 0; }
.lab-dropper svg { display: block; width: 100%; height: 100%; }
.lab-dropper-liq { transition: fill 0.3s ease; }
.lab-dropper.dip { animation: labDip 0.5s ease; }
.lab-drop { position: absolute; left: 50%; top: 62px; width: 9px; height: 12px; margin-left: -4.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--c, #0a7cff); pointer-events: none; animation: labDrop 0.55s ease-in forwards; }
.lab-flask.is-stir svg { animation: labStir 0.9s ease-in-out infinite; }
.lab-drops { margin: 0; text-align: center; font-size: 15px; font-weight: 700; color: #000; font-variant-numeric: tabular-nums; }
.lab-reagents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lab-reagent { display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; border: 0; border-radius: 20px; background: #f2f2f7; color: #000; font: inherit; -webkit-tap-highlight-color: transparent; }
.lab-reagent svg { width: 38px; height: 46px; }
.lab-reagent b { font-size: 14px; font-weight: 700; }
.lab-reagent span { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lab-reagent[aria-checked="true"] { background: #fff; box-shadow: inset 0 0 0 2px #0a7cff; }
.lab-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.lab-stir { touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.lab-stirbar { display: block; height: 6px; border-radius: 3px; background: #f2f2f7; overflow: hidden; }
.lab-stirbar i { display: block; height: 100%; width: 0; border-radius: 3px; background: #0a7cff; }
@keyframes labDrop { 0% { transform: translateY(-4px) scale(0.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(var(--fall, 60px)) scale(1); opacity: 0; } }
@keyframes labDip { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(10px) rotate(-8deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes labStir { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
  .lab-liquid, .lab-sw, .lab-meter i, .lab-stirbar i, .lab-dropper-liq { transition: none; }
  .lab-dropper.dip, .lab-drop, .lab-flask.is-stir svg { animation: none; }
}
.wk-nums { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; color: var(--text-secondary); }
.wk-nums b { color: #000; font-variant-numeric: tabular-nums; }
.wk-board { position: relative; height: 240px; border-radius: 28px; overflow: hidden; }
.wk-chip { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; fill: none; stroke: #000; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wk-spot { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; animation: wkSpot 2.2s ease-out forwards; }
.wk-spot.heat { background: radial-gradient(circle, rgba(255, 110, 60, 0.95) 0%, rgba(255, 140, 60, 0.55) 40%, rgba(255, 140, 60, 0) 70%); }
.wk-spot.spark { background: radial-gradient(circle, #fff7b0 0%, rgba(255, 214, 70, 0.9) 30%, rgba(255, 214, 70, 0) 65%); box-shadow: 0 0 14px rgba(255, 214, 70, 0.9); }
.wk-float { position: absolute; margin: -30px 0 0 -12px; font-size: 16px; font-weight: 800; color: #0a7cff; pointer-events: none; animation: wkFloat 0.7s ease-out forwards; }
@keyframes wkSpot { 0% { transform: scale(0.4); opacity: 0; } 15% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(0.9); opacity: 0; } }
@keyframes wkFloat { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }

.section-title[hidden] { display: none; }

/* 상점: 재고가 있는 음식을 두 장씩 나란히 (흰 카드, 그림자 없음. 그림 바탕은 연한 회색) */
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 var(--gutter) 16px; }
.card.shop-card { display: flex; flex-direction: column; margin: 0; animation: bizIn 0.45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.shop-art { display: grid; place-items: center; height: 170px; background: var(--bg-canvas); }
.shop-art .pkv { height: 136px; width: auto; aspect-ratio: 120 / 200; filter: drop-shadow(0 10px 14px rgba(20, 24, 60, 0.18)); }
.shop-body { display: grid; gap: 3px; padding: 14px 14px 16px; }
.shop-name { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-co, .shop-stock { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.shop-price { margin-top: 4px; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--apple-blue); }
.shop-step { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 3px; border-radius: 999px; background: var(--bg-canvas); }
.shop-round { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-card); color: var(--text-primary); transition: opacity 0.2s; }
.shop-round:disabled { opacity: 0.35; }
.shop-round svg { width: 16px; height: 16px; }
.shop-n { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-buy { margin-top: 8px; height: 42px; font-size: 15px; }
.card.shop-note { margin: 0 var(--gutter) 16px; }
.card.shop-note .art.mint { height: 150px; }
.shop-retry { margin-top: 16px; width: 100%; }
@media (max-width: 340px) { .shop-grid { gap: 8px; } }

/* 사업 탭: 창고 음식 꺼내 먹기 (사장만) */
.biz-eat { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--apple-blue-subtle); color: var(--apple-blue); font-size: 13px; font-weight: 700; }
.biz-eat.busy { opacity: 0.6; pointer-events: none; }

/* 인벤토리: 내 음식 칸과 먹기 */
.inv-card { cursor: pointer; }
.inv-card.is-on { box-shadow: inset 0 0 0 2px var(--apple-blue); }
.card.inv-detail { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; margin: 0 var(--gutter) 16px; padding: 14px; }
.card.inv-detail .shop-art { height: 150px; border-radius: 22px; }
.inv-info { display: grid; gap: 3px; }
.inv-effect { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--apple-blue); }
.inv-eat { margin-top: 10px; height: 42px; font-size: 15px; }
.inv-eat:disabled { opacity: 0.4; }
.inv-eat.busy { opacity: 0.6; pointer-events: none; }
.inv-root .shop-grid { margin-top: 0; }

/* 관리 (오너) 와 공지 */
.manage-root .mg-card { display: grid; gap: 12px; padding: 18px; }
.mg-text { min-height: 90px; resize: vertical; }
.mg-danger { color: var(--status-red); }
.mg-notice { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.mg-notice:last-child { border-bottom: 0; }
.mg-notice span { font-size: 13px; color: var(--text-secondary); }
/* 공지 화면 (설정의 공지): 펼치는 카드 목록 */
.notices-root { display: grid; gap: 12px; margin: 0 var(--gutter); }
.notices-root .card { margin: 0; }
.notice-list { display: grid; gap: 12px; }
.notice-item { padding: 0; overflow: hidden; }
.notice-head { appearance: none; border: 0; background: none; font: inherit; color: inherit; text-align: left; display: flex; align-items: center; gap: 10px; width: 100%; padding: 18px 20px; cursor: pointer; }
.notice-head-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.notice-head-text b { font-size: 17px; line-height: 23px; font-weight: 700; overflow-wrap: anywhere; }
.notice-head-text > span { font-size: 13px; color: var(--text-secondary); }
.notice-pill { flex: none; height: 22px; padding: 0 9px; border-radius: 9999px; background: #e5f1ff; color: #0a7cff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }
.notice-chev { flex: none; width: 8px; height: 14px; color: #c7c7cc; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.notice-item.is-open .notice-chev { transform: rotate(90deg); }
.notice-body { padding: 0 20px 18px; }
.notice-body p { margin: 0; font-size: 16px; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; }
.notice-opts { margin: 12px 0 0; padding-left: 20px; font-size: 15px; line-height: 22px; }
.notice-empty { padding: 24px 20px; text-align: center; }
.notice-empty .card-body { margin: 0; }
/* 한 번 보여주는 전체 화면 공지 */
.notice-full { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); background: #f2f2f7; animation: fade 240ms ease both; }
.notice-full-card { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 28px 24px; border-radius: 28px; background: #fff; display: grid; gap: 12px; justify-items: start; }
.notice-full-title { margin: 4px 0 0; font-size: 26px; line-height: 32px; font-weight: 800; overflow-wrap: anywhere; }
.notice-full-date { margin: 0; font-size: 13px; color: var(--text-secondary); }
.notice-full-text { margin: 8px 0 0; font-size: 17px; line-height: 26px; white-space: pre-wrap; overflow-wrap: anywhere; }
.notice-poll { width: 100%; display: grid; gap: 8px; margin-top: 8px; }
.notice-poll-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.notice-opt { appearance: none; border: 0; min-height: 52px; padding: 12px 16px; border-radius: 16px; background: #f2f2f7; color: inherit; font: inherit; font-size: 16px; font-weight: 600; text-align: left; transition: background 180ms, color 180ms; }
.notice-opt.is-on { background: #0a7cff; color: #fff; }
.notice-full-foot { width: 100%; display: grid; gap: 10px; margin-top: 12px; }
.notice-full-foot .btn { width: 100%; }
.notice-ok:disabled { opacity: 0.4; }
.notice-skip { appearance: none; border: 0; background: none; height: 40px; color: var(--text-secondary); font: inherit; font-size: 14px; }
.notice-hint { margin: 0; text-align: center; font-size: 13px; color: var(--text-secondary); }
/* 관리 탭의 공지 글쓰기: 가운데 정렬 */
.mg-center, .mg-center::placeholder { text-align: center; }
.manage-root .mg-compose .lab-field { display: grid; grid-template-columns: 1fr; gap: 8px; }
.manage-root .mg-compose .lab-input { width: 100%; box-sizing: border-box; }
.mg-opts { min-height: 88px; }

/* 글씨 모션: 애플이 새 기기에서 hello 를 손으로 쓰듯 보여주는 움직임. 빈 화면에서 empty 를 같은 방식으로 써요 */
.card.inv-empty { margin: 0 var(--gutter) 16px; padding: 0; overflow: hidden; }
.inv-empty-art { position: relative; height: 230px; display: grid; place-items: center;
  background:
    repeating-linear-gradient(88deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 7px, rgba(0,0,0,0.35) 7px 12px, transparent 12px 19px),
    radial-gradient(120% 90% at 40% 30%, #4a4a4a 0%, #222 45%, #0b0b0b 100%); }
.script-write { display: inline-block; font: 400 72px/1 "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive; letter-spacing: 0.02em;
  color: #ffffff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
  -webkit-mask: linear-gradient(90deg, #000 0 55%, transparent 72%) 100% 0 / 260% 100% no-repeat;
          mask: linear-gradient(90deg, #000 0 55%, transparent 72%) 100% 0 / 260% 100% no-repeat;
  animation: scriptWrite 2.6s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes scriptWrite { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.inv-empty-glass { height: 96px; background: var(--gg); -webkit-backdrop-filter: blur(38px) saturate(180%); backdrop-filter: blur(38px) saturate(180%); box-shadow: var(--gg-rim); }
@media (prefers-reduced-motion: reduce) { .script-write { animation: none; -webkit-mask-position: 0 0; mask-position: 0 0; } }

/* hidden 속성이 버튼의 표시 규칙에 져서 보이던 문제를 막아요 (관리 버튼 등) */
.glass-btn[hidden], .nav-set [hidden] { display: none !important; }

/* 인벤토리가 비었을 때: 작은 회색 글씨만 */
.inv-empty-text { margin: 0; padding: 40px 0; text-align: center; font-size: 14px; color: #8e8e93; }

/* 로그인 전 화면(돈·일·랭킹·사업·계정)의 로그인 버튼: 글씨가 잘리지 않는 알약 모양 */
#money-guest .btn, #work-guest .btn, #rank-guest .btn, #biz-guest .btn, #auth-card .btn { width: auto; min-width: 176px; height: 52px; padding: 0 28px; border-radius: 9999px; white-space: nowrap; font-size: 17px; font-weight: 700; }

/* 관리: 아이디·이름 자동 검색 목록 */
.mg-sug { display: grid; gap: 6px; margin-top: -4px; }
.mg-sug[hidden] { display: none; }
.mg-sug-row { appearance: none; border: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; background: #f2f2f7; color: inherit; font: inherit; text-align: left; }
.mg-sug-row b { font-weight: 700; }
.mg-sug-row span { font-size: 13px; color: var(--text-secondary); }

/* 사업 탭: 꾹 눌러 옮기는 블록 */
.biz-blk { position: relative; transition: box-shadow 0.25s var(--ease); -webkit-touch-callout: none; }
.biz-blk.is-lift { z-index: 30; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); transition: none; }
.biz-drop { height: 4px; margin: 0 22px; border-radius: 4px; background: #0a7cff; animation: fade 0.2s ease both; }

/* 사업 탭: 회사를 바꿀 때 물러났다가 들어오는 움직임 */
#biz-dash { transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); }
#biz-dash.swap-out { opacity: 0; transform: translateX(-16px); }
#biz-dash.swap-in { animation: bizIn 0.38s var(--ease) both; }
@keyframes bizIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #biz-dash.swap-in { animation: none; } #biz-dash { transition: none; } }