/* 대표 앱 전용 스타일. 토큰·기본 컴포넌트는 fds.css (원본 design/fds.css).
   휴대폰 먼저 → 1024px 이상에서 PC 콘솔(왼쪽 메뉴 240 + 목록 360 + 상세). 디자인-시트 4·9절. */

html, body { height: 100%; overflow: hidden; }
body { background: var(--grey-100); overflow: hidden; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--white); padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* 손가락 영역: 보이는 크기보다 눌리는 영역을 48px 로 넓힌다 */
.hit { position: relative; }
.hit::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 48px; min-height: 100%; transform: translateY(-50%); }

/* ───── 뼈대 ───── */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.side { display: none; }
.main { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--bg, var(--grey-100)); -webkit-overflow-scrolling: touch; scroll-padding-top: 60px; }
.main:focus { outline: none; }
.view { min-height: 100%; display: flex; flex-direction: column; }
.view.white { --bg: var(--white); background: var(--white); }
.view.grey { --bg: var(--grey-100); background: var(--grey-100); }
.view > .pad-cta { height: 96px; flex-shrink: 0; }

/* 하단 탭 (휴대폰) */
.tabbar { flex-shrink: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--grey-150); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; font-size: 12px; font-weight: 600; color: var(--grey-500); border-radius: 12px; position: relative; transition: color var(--d2); }
.tabbar a:active { background: var(--grey-100); }
.tabbar a svg { width: 26px; height: 26px; transition: transform var(--d1) var(--ease); }
.tabbar a:active svg { transform: scale(.9); }
.tabbar a[aria-current="page"] { color: var(--grey-900); }
.tabbar .cnt, .snav .cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: var(--white); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.tabbar .cnt { position: absolute; top: 4px; left: 50%; margin-left: 5px; border: 2px solid var(--white); box-sizing: content-box; }
body.deep .tabbar { display: none; }

/* 위 내비 */
.topnav { position: sticky; top: 0; z-index: 10; flex-shrink: 0; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 8px; background: var(--bg); transition: box-shadow var(--d2); }
.topnav.scrolled { box-shadow: 0 1px 0 var(--grey-150); }
.topnav .ttl { position: absolute; left: 60px; right: 60px; text-align: center; font-size: 17px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity var(--d2), transform var(--d2) var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.topnav.scrolled .ttl, .topnav .ttl.always { opacity: 1; transform: none; }
.topnav .sp { flex: 1; }
.ib { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--grey-800); position: relative; flex-shrink: 0; }
.ib:active { background: var(--grey-200); }
.ib svg { width: 24px; height: 24px; }
.ib .nd { position: absolute; top: 11px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg); box-sizing: content-box; }
.wordmark { display: flex; align-items: center; gap: 7px; padding-left: 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.wordmark i { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; background: var(--brand); display: grid; place-items: center; }
.wordmark i::after { content: ""; width: 10px; height: 10px; border-radius: 3px; border: 2.5px solid var(--white); }
.ph { padding: 4px var(--gutter) 16px; } /* 화면 큰 제목 */
.ph p { font-size: 15px; color: var(--grey-600); margin-top: 2px; }
.ph .row { display: flex; align-items: center; gap: 8px; }

/* ───── 시트·덮개·토스트: 화면 전체 기준 ───── */
.dim { position: fixed; z-index: 80; }
.sheet { position: fixed; z-index: 81; max-height: 90%; max-height: 90dvh; }
.sheet:focus, .sheet .s-title:focus { outline: none; }
.sheet .acts { display: flex; gap: 8px; padding: 20px var(--gutter) 4px; }
.sheet .acts .btn-grey { flex: 0 0 34%; }
.sheet .acts .btn-primary, .sheet .acts.one .btn { flex: 1; }
.sheet .s-body { padding-top: 14px; }
.toast { position: fixed; z-index: 95; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; }
body.deep .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
body.sheet-open .toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
.overlay { position: fixed; inset: 0; z-index: 90; background: var(--white); display: flex; flex-direction: column; opacity: 0; transition: opacity var(--d2) var(--ease); overflow-y: auto; }
.overlay.on { opacity: 1; }
.overlay:focus { outline: none; }

/* 버튼 안 아이콘·글자 (로딩 때 숨김) */
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-sm svg { width: 16px; height: 16px; }
.btn .lbl { display: contents; }
.btn-sm.hit { min-height: 36px; }

/* ───── 공용 조각 ───── */
.card { background: var(--white); border-radius: var(--r-lg); margin: 0 12px 12px; }
.card-pad { padding: 18px 20px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 24px 10px; }
.sec-h h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.sec-h span { font-size: 14px; color: var(--grey-600); }
.empty { text-align: center; padding: 48px 24px; color: var(--grey-600); }
.empty b { display: block; color: var(--grey-900); font-size: 18px; margin-bottom: 4px; }
.check circle { fill: var(--brand); transform-origin: center; animation: pop .5s var(--ease) both; }
.check path { fill: none; stroke: var(--white); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .35s .3s var(--ease) forwards; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chip-src { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 13px; font-weight: 600; background: var(--grey-100); color: var(--grey-700); white-space: nowrap; }
.chip-src svg { width: 13px; height: 13px; }
.chip-src.blue { background: var(--brand-weak); color: var(--brand); }
.chip-src.purple { background: var(--purple-weak); color: var(--purple); }
.chip-src.red { background: var(--red-weak); color: var(--red); }
.linkbtn { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--grey-600); }
.linkbtn svg { width: 16px; height: 16px; }
.linkbtn:active { color: var(--brand); }
.qsec .linkbtn { display: flex; margin-top: 8px; }
.saved { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--green); font-weight: 600; white-space: nowrap; }
.saved::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.saved.ing { color: var(--grey-500); } .saved.ing::before { background: var(--grey-400); animation: pulse 1s infinite; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.inp { width: 100%; height: 52px; border: 0; border-radius: 12px; background: var(--grey-100); padding: 0 14px; font: inherit; font-size: 17px; color: var(--grey-900); }
.inp:focus { outline: none; background: var(--white); box-shadow: 0 0 0 2px var(--brand); }
.fl { display: block; font-size: 15px; font-weight: 600; color: var(--grey-600); margin: 16px var(--gutter) 8px; }
.fl + .inp, .sheet .inp { width: calc(100% - 40px); margin: 0 var(--gutter); }
textarea.gsms { display: block; width: calc(100% - 40px); margin: 0 var(--gutter); min-height: 128px; border: 0; border-radius: 14px; background: var(--grey-100); padding: 14px 16px; font: inherit; font-size: 16px; line-height: 1.6; resize: vertical; color: var(--grey-900); }
textarea.gsms:focus { outline: none; background: var(--white); box-shadow: 0 0 0 2px var(--brand); }
.note { padding: 10px var(--gutter) 0; font-size: 14px; color: var(--grey-600); }
.sum-rows { padding: 0 var(--gutter); }
.sum-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 16px; }
.sum-rows > div > span:first-child { color: var(--grey-600); flex-shrink: 0; }
.sum-rows > div > span:last-child { font-weight: 600; text-align: right; }
.linkrow { width: calc(100% - 40px); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; margin: 8px var(--gutter) 0; padding: 12px 16px; border-radius: 14px; background: var(--grey-50); font-size: 15px; font-weight: 600; color: var(--grey-700); text-align: left; }
.linkrow > span { display: flex; gap: 8px; align-items: center; }
.linkrow svg:first-child { width: 20px; height: 20px; color: var(--grey-500); }

/* ───── 오늘 ───── */
.greet { padding: 4px var(--gutter) 16px; }
.greet .who { font-size: 15px; color: var(--grey-600); font-weight: 500; }
.greet h1 { margin-top: 2px; }
.prog { margin-top: 14px; height: 6px; border-radius: 3px; background: var(--grey-200); overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 3px; background: var(--brand); transition: width var(--d3) var(--ease); }
.prog-t { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--grey-600); font-weight: 500; }
.month { display: flex; align-items: center; flex-wrap: wrap; row-gap: 2px; width: calc(100% - 24px); min-height: 52px; margin: 0 12px 12px; padding: 12px 18px; border-radius: var(--r-lg); background: var(--white); font-size: 15px; color: var(--grey-600); font-weight: 500; text-align: left; }
.month > span:first-child { margin-right: 10px; }
.month b { color: var(--grey-900); font-weight: 700; margin: 0 10px 0 4px; }
.month .chev { margin-left: auto; }
.todayrow { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 0 12px 16px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--white); text-align: left; }
.todayrow .body { flex: 1; min-width: 0; }
.todayrow b { display: block; font-size: 16px; }
.todayrow .body > span { font-size: 14px; color: var(--grey-600); }
.datei { flex-shrink: 0; width: 44px; height: 48px; border-radius: 12px; background: var(--brand-weak); color: var(--brand); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.datei small { font-size: 11px; font-weight: 700; }
.datei b { font-size: 18px !important; font-weight: 700; }
.task { background: var(--white); border-radius: var(--r-lg); margin: 0 12px 10px; padding: 18px 20px; overflow: hidden; transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease), max-height var(--d3) var(--ease), margin var(--d3) var(--ease), padding var(--d3) var(--ease); max-height: 640px; }
.task.gone { opacity: 0; transform: scale(.96); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.task .kick { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--grey-600); flex-wrap: wrap; }
.task .kick .badge { height: 22px; font-size: 12px; }
.task .hd { display: flex; gap: 14px; align-items: flex-start; margin-top: 10px; }
.task .hd .body { flex: 1; min-width: 0; }
.task .t { font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -0.015em; }
.task .s { font-size: 15px; line-height: 1.5; color: var(--grey-600); margin-top: 2px; }
.task .s b { color: var(--grey-900); font-weight: 700; }
.task .media { display: flex; gap: 6px; margin: 14px 0 0 58px; }
.task .media img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: var(--grey-100); }
.task .acts { display: flex; gap: 8px; margin-top: 16px; }
.task .acts .btn { flex: 1; height: 48px; font-size: 16px; }
.task .acts .btn-grey { flex: 0 0 34%; }
.task .acts svg { width: 18px; height: 18px; }
.task.sk { padding: 20px; }
.sk-card { display: grid; gap: 10px; }
.morebtn { display: flex; align-items: center; justify-content: center; gap: 4px; width: calc(100% - 24px); height: 52px; margin: 2px 12px 12px; border-radius: var(--r-lg); background: var(--white); font-size: 16px; font-weight: 600; color: var(--grey-700); }
.morebtn svg { width: 18px; height: 18px; transform: rotate(90deg); }
.donebox { margin: 4px 12px 24px; }
.donebox summary { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--grey-600); border-radius: 12px; }
.donebox summary svg { width: 18px; height: 18px; transition: transform var(--d2) var(--ease); }
.donebox[open] summary svg { transform: rotate(180deg); }
.donebox .r { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 15px; color: var(--grey-600); }
.donebox .r i { width: 20px; height: 20px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex-shrink: 0; }
.donebox .r i svg { width: 12px; height: 12px; color: #fff; }
.donebox .r.fresh { animation: rise var(--d3) var(--ease) both; }
.alldone { text-align: center; padding: 28px 20px; margin: 0 12px 10px; border-radius: var(--r-lg); background: var(--white); }
.alldone b { display: block; font-size: 18px; margin-top: 10px; }
.alldone span { font-size: 15px; color: var(--grey-600); }
.today-side { display: none; }
/* 시트 안: 글 고르기 */
.posts { padding: 0 var(--gutter); display: grid; gap: 8px; }
.post { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px; border-radius: 16px; border: 1.5px solid var(--grey-150); text-align: left; transition: border-color var(--d1), background-color var(--d1); }
.post[aria-checked="true"] { border-color: var(--brand); background: var(--brand-weak); }
.post img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.post .body { flex: 1; min-width: 0; }
.post b { display: block; font-size: 15px; line-height: 1.4; }
.post .body > span { font-size: 13px; color: var(--grey-600); }
.post .ck { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--grey-300); display: grid; place-items: center; }
.post[aria-checked="true"] .ck { background: var(--brand); border-color: var(--brand); }
.post .ck svg { width: 14px; height: 14px; color: #fff; }
.chans { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px var(--gutter) 0; }
.chans span { height: 30px; padding: 0 10px; border-radius: 999px; background: var(--grey-100); font-size: 13px; font-weight: 600; color: var(--grey-700); display: inline-flex; align-items: center; gap: 4px; }
.chans span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.cmp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 0 var(--gutter); padding: 18px; border-radius: 16px; background: var(--grey-50); text-align: center; }
.cmp small { display: block; font-size: 13px; color: var(--grey-600); }
.cmp b { font-size: 20px; letter-spacing: -0.02em; }
.cmp .to b { color: var(--brand); }
.cmp svg { width: 20px; height: 20px; color: var(--grey-400); }
.steps { list-style: none; counter-reset: s; display: grid; gap: 12px; padding: 0 var(--gutter); }
.steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.steps li::before { content: counter(s); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-weak); color: var(--brand); font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.steps svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--brand); }

/* ───── 문의함 ───── */
.inbox { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ilist { background: var(--white); flex: 1; }
.filters { display: flex; gap: 6px; padding: 4px var(--gutter) 12px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex-shrink: 0; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--grey-100); font-size: 15px; font-weight: 600; color: var(--grey-700); white-space: nowrap; transition: background-color var(--d1), color var(--d1), transform var(--d1) var(--ease); }
.filters button:active { transform: scale(.96); }
.filters button[aria-pressed="true"] { background: var(--grey-900); color: var(--white); }
.filters button .n { margin-left: 4px; opacity: .7; }
.items { display: block; }
.item { display: flex; gap: 12px; width: 100%; text-align: left; padding: 16px var(--gutter); border-top: 1px solid var(--grey-100); transition: background-color var(--d1); }
.item:active { background: var(--grey-50); }
.item[aria-current="true"] { background: var(--brand-weak); }
.item .ico { width: 44px; height: 44px; }
.item .ico svg { width: 22px; height: 22px; }
.item .body { flex: 1; min-width: 0; display: block; }
.item .r1 { display: flex; align-items: center; gap: 6px; }
.item .r1 .when { margin-left: auto; font-size: 13px; color: var(--grey-600); white-space: nowrap; }
.item .w { display: block; font-size: 17px; font-weight: 700; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .s { display: block; font-size: 14px; color: var(--grey-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idetail { display: none; }
.detail-empty { display: grid; place-items: center; height: 100%; color: var(--grey-600); text-align: center; padding: 40px; }
.detail-empty svg { width: 48px; height: 48px; color: var(--grey-300); margin: 0 auto 10px; display: block; }

/* 문의 상세 */
.dwrap { display: flex; flex-direction: column; }
.qhead { padding: 4px var(--gutter) 20px; }
.qhead .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qhead h1 { margin-top: 10px; }
.qhead p { font-size: 16px; color: var(--grey-600); margin-top: 2px; }
.qhead .hacts { display: none; }
.aisum { margin: 0 var(--gutter); border-radius: var(--r-md); background: linear-gradient(160deg, #F1F5FF, #F6F3FF); padding: 18px 18px 8px; }
.aisum .h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--grey-800); }
.aisum dl { display: grid; grid-template-columns: 76px 1fr; margin-top: 12px; }
.aisum dt, .aisum dd { padding: 9px 0; font-size: 16px; border-top: 1px solid rgba(46,108,246,.10); }
.aisum dt { color: var(--grey-600); }
.aisum dd { font-weight: 600; }
.aisum dd.hl { color: var(--red); }
.photos { display: flex; gap: 8px; padding: 14px var(--gutter) 24px; overflow-x: auto; scrollbar-width: none; }
.photos::-webkit-scrollbar { display: none; }
.photos button { flex: 0 0 112px; height: 112px; border-radius: 14px; overflow: hidden; position: relative; background: var(--grey-100); }
.photos img { width: 100%; height: 100%; object-fit: cover; }
.photos button span { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.55); color: var(--white); font-size: 12px; font-weight: 600; }
.qsec { padding: 24px var(--gutter) 8px; }
.qsec h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.qsec h2 .sp { flex: 1; }
.conds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.conds span { min-height: 34px; padding: 4px 12px; border-radius: 999px; background: var(--grey-100); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; }
.conds-note { margin-top: 10px; font-size: 14px; color: var(--grey-600); display: flex; align-items: center; gap: 6px; }
.lab { font-size: 15px; font-weight: 600; color: var(--grey-600); margin: 22px 0 8px; }
.ask { margin: 22px 0 8px; font-size: 16px; font-weight: 600; color: var(--grey-900); line-height: 1.5; }
.ask::before { content: "“"; color: var(--purple); font-weight: 800; margin-right: 2px; }
.ask::after { content: "”"; color: var(--purple); font-weight: 800; margin-left: 2px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--grey-100); border-radius: 14px; padding: 4px; }
.stepper button { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--grey-700); }
.stepper button:active { background: var(--white); }
.stepper button svg { width: 20px; height: 20px; }
.stepper .val { min-width: 64px; text-align: center; font-size: 19px; font-weight: 700; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills button { position: relative; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--grey-100); font-size: 15px; font-weight: 600; color: var(--grey-700); transition: background-color var(--d1), color var(--d1), transform var(--d1) var(--ease); }
.pills button::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.pills button:active { transform: scale(.96); }
.pills button[aria-pressed="true"] { background: var(--brand); color: var(--white); }
.rooms { display: grid; gap: 6px; }
.room { display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px 12px; border-radius: 12px; background: var(--grey-50); }
.room .rn { width: 52px; flex-shrink: 0; font-size: 15px; font-weight: 600; }
.room .seg { flex: 1; min-width: 0; padding: 3px; }
.room .seg button { height: 42px; font-size: 14px; padding: 0 2px; }
.room .x { width: 44px; height: 44px; border-radius: 10px; color: var(--grey-500); display: grid; place-items: center; flex-shrink: 0; }
.room .x svg { width: 18px; height: 18px; }
.room .x:active { background: var(--grey-150); }
.addrow { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 48px; border-radius: 12px; border: 1.5px dashed var(--grey-300); color: var(--grey-600); font-size: 15px; font-weight: 600; margin-top: 6px; }
.addrow svg { width: 16px; height: 16px; }
.addrow:active { border-color: var(--brand); color: var(--brand); }
.subbox { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--grey-50); display: grid; gap: 10px; }
.subbox .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--grey-700); }
.subbox .seg { flex: 1; min-width: 180px; max-width: 260px; }
.subbox .seg button { height: 40px; font-size: 14px; }
.amt { padding: 24px var(--gutter) 28px; }
.amt .lab0 { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--grey-600); }
.rangebar { position: relative; margin: 46px 6px 8px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #DCE6FF, #B9CEFF); }
.rangebar .pin { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--brand); border: 4px solid var(--white); box-shadow: 0 2px 6px rgba(46,108,246,.4); transition: left var(--d3) var(--ease); }
.rangebar .flag { position: absolute; bottom: 18px; transform: translateX(-50%); padding: 4px 8px; border-radius: 8px; background: var(--grey-900); color: var(--white); font-size: 13px; font-weight: 700; white-space: nowrap; transition: left var(--d3) var(--ease); }
.rangebar .flag::after { content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--grey-900); }
.rangebar .rec { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--brand); opacity: .5; transition: left var(--d3) var(--ease); }
.rangeends { display: flex; justify-content: space-between; font-size: 14px; color: var(--grey-600); font-weight: 500; }
.final { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.final .k { font-size: 15px; font-weight: 600; color: var(--grey-600); }
.final .big { display: flex; align-items: center; gap: 4px; font-size: 34px; line-height: 1.25; font-weight: 700; letter-spacing: -0.03em; border-radius: 10px; }
.final .big svg { width: 22px; height: 22px; color: var(--grey-400); }
.final .adj { display: flex; gap: 6px; }
.final .adj .btn { height: 44px; padding: 0 12px; font-size: 15px; }
.why { margin-top: 10px; font-size: 14px; color: var(--grey-600); }
.why b { color: var(--grey-800); }
.breakdown { margin-top: 14px; border-radius: 12px; background: var(--grey-50); padding: 0 14px; font-size: 15px; }
.breakdown summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 600; color: var(--grey-700); }
.breakdown summary svg { width: 18px; height: 18px; transition: transform var(--d2) var(--ease); }
.breakdown[open] summary svg { transform: rotate(180deg); }
.breakdown .ln { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--grey-700); }
.breakdown .ln span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown .ln:last-child { padding-bottom: 12px; }
.breakdown ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; color: var(--grey-700); }
.qcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; }
.callcard { text-align: center; padding: 8px var(--gutter) 24px; }
.callcard .pn { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.callcard .said { margin: 12px auto 0; display: inline-block; padding: 10px 14px; border-radius: 14px; background: var(--grey-50); font-size: 16px; color: var(--grey-700); }
.callcard .btn { margin-top: 18px; width: 100%; white-space: normal; }
.memo { display: block; width: 100%; min-height: 96px; margin-top: 10px; border: 0; border-radius: 12px; background: var(--grey-100); padding: 12px 14px; font: inherit; font-size: 16px; resize: vertical; color: var(--grey-900); }
.memo:focus { outline: none; background: var(--white); box-shadow: 0 0 0 2px var(--brand); }
.script { list-style: none; display: grid; gap: 2px; padding-bottom: 8px; }
.script button { display: flex; gap: 12px; width: 100%; text-align: left; padding: 10px 6px; border-radius: 12px; }
.script button:active { background: var(--grey-100); }
.script .n { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--grey-300); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--grey-600); }
.script [aria-checked="true"] .n { background: var(--green); border-color: var(--green); color: #fff; }
.script b { display: block; font-size: 15px; }
.script button > span:last-child > span { font-size: 14px; color: var(--grey-600); line-height: 1.5; }
.script [aria-checked="true"] b, .script [aria-checked="true"] > span:last-child > span { color: var(--grey-500); }
.sms { margin-top: 12px; max-width: 360px; padding: 12px 14px; border-radius: 16px 16px 16px 6px; background: var(--grey-100); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.tl { list-style: none; display: grid; gap: 10px; margin-top: 12px; font-size: 15px; color: var(--grey-700); }
.tl li { display: grid; grid-template-columns: 56px 1fr; gap: 8px; }
.tl span { color: var(--grey-600); font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: 84px 1fr; gap: 10px 12px; margin-top: 12px; font-size: 16px; }
.kv dt { color: var(--grey-600); }
.sentbox { text-align: center; padding: 24px var(--gutter) 28px; }
.sentbox .big { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; margin-top: 4px; }
.sentbox .row { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.dpanel { padding: 0; }
.dside .qsec:first-child { padding-top: 8px; }

/* 키패드 */
.kp-show { text-align: center; padding: 4px var(--gutter) 4px; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.kp-show small { font-size: 26px; margin-left: 2px; }
.kp-hint { text-align: center; font-size: 15px; color: var(--grey-600); min-height: 22px; }
.kp-hint.warn { color: var(--orange); font-weight: 600; }
.kp { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 12px 0; }
.kp button { height: 60px; border-radius: 14px; font-size: 26px; font-weight: 500; display: grid; place-items: center; text-align: center; }
.kp button:active { background: var(--grey-100); }
.kp button svg { width: 28px; height: 28px; }

/* 완료 화면 */
.done { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 100%; }
.done .mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 28px; width: 100%; max-width: 480px; }
.done h1 { margin-top: 28px; }
.done h1:focus { outline: none; }
.done p { margin-top: 8px; color: var(--grey-600); font-size: 17px; }
.done .card { margin: 32px 0 0; width: 100%; border-radius: var(--r-md); background: var(--grey-50); text-align: left; }
.done .bottom-cta { width: 100%; max-width: 480px; }

/* 손님 견적서 미리 보기 (대표 얼굴, 강조색은 대표가 고른 색) */
.cust { --accent: #0E7C66; --accent-weak: #E4F3EF; --accent-strong: #0A604F; display: flex; flex-direction: column; min-height: 100%; max-width: 560px; margin: 0 auto; width: 100%; }
.cust .btn-primary { background: var(--accent); }
.prev-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 16px; background: var(--grey-900); color: var(--white); font-size: 14px; font-weight: 600; }
.prev-bar span { flex: 1; }
.prev-bar .ib { color: var(--white); }
.prev-bar .ib:active { background: rgba(255,255,255,.12); }
.c-top { display: flex; align-items: center; gap: 10px; padding: 12px var(--gutter); }
.c-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: var(--white); display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.c-top b { font-size: 17px; font-weight: 700; flex: 1; }
.c-top > span:last-child { font-size: 14px; color: var(--grey-600); }
.c-hero { padding: 20px var(--gutter) 24px; }
.c-hero .for { font-size: 17px; color: var(--grey-700); }
.c-hero .price { display: flex; align-items: baseline; gap: 2px; margin-top: 6px; font-size: 40px; line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; }
.c-hero .price small { font-size: 26px; }
.c-hero .meta { margin-top: 8px; font-size: 15px; color: var(--grey-600); }
.c-rows { padding: 8px 0; }
.c-rows .r { display: flex; justify-content: space-between; gap: 16px; padding: 12px var(--gutter); font-size: 16px; }
.c-rows .r span:first-child { color: var(--grey-600); flex-shrink: 0; }
.c-rows .r span:last-child { font-weight: 600; text-align: right; }
.explain { display: flex; gap: 10px; margin: 4px var(--gutter) 20px; padding: 14px 16px; border-radius: 14px; background: var(--grey-50); font-size: 15px; color: var(--grey-700); }
.explain svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--grey-400); margin-top: 1px; }
.pro { padding: 24px var(--gutter) 8px; }
.pro .h { display: flex; gap: 14px; align-items: center; }
.pro .av { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; font-size: 22px; font-weight: 700; flex-shrink: 0; }
.pro .nm { font-size: 19px; font-weight: 700; }
.pro .tags { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.pro .tags span { font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--grey-100); color: var(--grey-700); }
.pro blockquote { margin-top: 16px; padding: 16px; border-radius: 14px; background: var(--accent-weak); font-size: 16px; line-height: 1.6; color: var(--grey-800); }
.policy { padding: 24px var(--gutter) 8px; }
.policy h2 { font-size: 19px; font-weight: 700; }
.policy ul { list-style: none; margin-top: 12px; display: grid; gap: 10px; font-size: 15px; color: var(--grey-700); }
.policy li { display: flex; gap: 10px; }
.policy li::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--grey-400); margin-top: 9px; }
.powered { text-align: center; font-size: 13px; color: var(--grey-500); padding: 24px 0 12px; }

/* 사진 크게 보기 */
.viewer { flex: 1; display: flex; flex-direction: column; background: #000; min-height: 100%; }
.viewer .vt { color: var(--white); padding: calc(8px + env(safe-area-inset-top)) 8px 8px 20px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.viewer .vt .ib { color: var(--white); }
.viewer img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }

/* ───── 일정 ───── */
.weeknav { display: flex; align-items: center; gap: 8px; padding: 0 var(--gutter) 12px; }
.weeknav .rng-t { flex: 1; font-size: 16px; font-weight: 600; color: var(--grey-700); }
.weeknav .ib { background: var(--white); }
.wlist { padding: 0 12px 24px; display: grid; gap: 8px; }
.wday { background: var(--white); border-radius: var(--r-lg); padding: 14px 16px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
.wday .dn { text-align: center; color: var(--grey-600); font-size: 13px; font-weight: 600; line-height: 1.2; padding-top: 2px; }
.wday .dn b { display: block; font-size: 22px; color: var(--grey-900); margin-top: 2px; }
.wday.today .dn, .wday.today .dn b { color: var(--brand); }
.wday .evs { display: grid; gap: 6px; min-width: 0; }
.ev { display: block; width: 100%; text-align: left; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; background: var(--brand-weak); border-left: 4px solid var(--brand); }
.ev.clean { background: var(--teal-weak); border-color: var(--teal); }
.ev.call { background: var(--purple-weak); border-color: var(--purple); }
.ev.etc { background: var(--grey-100); border-color: var(--grey-400); }
.ev b { display: block; font-size: 15px; }
.ev span { color: var(--grey-700); }
.free { font-size: 14px; color: var(--grey-500); padding: 8px 0; align-self: center; }
.wday.past { opacity: .6; }

/* ───── 더보기·설정 ───── */
.mgrid { display: grid; gap: 8px; padding: 0 12px 24px; }
.mcard { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; background: var(--white); border-radius: var(--r-lg); padding: 16px 18px; min-height: 76px; }
.mcard .body { flex: 1; min-width: 0; }
.mcard b { display: block; font-size: 17px; }
.mcard .body > span { font-size: 14px; color: var(--grey-600); line-height: 1.45; }
.list { margin: 0 12px 12px; background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.list .row-item + .row-item { border-top: 1px solid var(--grey-100); }
.list .row-item .btn { height: 40px; }
.list h3 { padding: 16px 20px 4px; font-size: 14px; font-weight: 600; color: var(--grey-600); }
.prov { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 18px; font-weight: 800; }
.prov.kakao { background: #FEE500; color: #191600; }
.prov.naver { background: #03C75A; color: #fff; }
.prov.google { background: var(--white); border: 1.5px solid var(--grey-200); color: #4285F4; }
.prov.phone { background: var(--grey-100); color: var(--grey-700); }
.prov svg { width: 22px; height: 22px; }
.st { font-size: 14px; font-weight: 600; }
.st.ok { color: var(--green); } .st.err { color: var(--red); } .st.off { color: var(--grey-500); }
.info-box { display: flex; gap: 10px; margin: 0 12px 12px; padding: 14px 16px; border-radius: 14px; background: var(--brand-weak); font-size: 15px; color: var(--grey-800); }
.info-box svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--brand); margin-top: 1px; }

/* 견적 항목 편집 */
.pb { padding: 0 12px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.pb-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.pb-trades { margin: 0 var(--gutter) 16px; }
.panel { background: var(--white); border-radius: var(--r-lg); padding: 18px 20px; }
.panel h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.panel h3 .sp { flex: 1; }
.panel > p.t-cap { margin-top: 4px; }
.modes { display: grid; gap: 8px; margin-top: 12px; }
.mode { border-radius: 14px; border: 1.5px solid var(--grey-150); padding: 12px 14px; }
.mode.off { opacity: .55; }
.mode .top { display: flex; align-items: center; gap: 8px; }
.mode .top b { flex: 1; font-size: 16px; }
.mode .top .tog { width: auto; min-height: 48px; padding: 0; }
.mode .d { font-size: 14px; color: var(--grey-600); }
.mode .base { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--grey-700); flex-wrap: wrap; }
.rng { display: inline-flex; align-items: center; gap: 4px; color: var(--grey-500); font-size: 14px; white-space: nowrap; }
.rng input { width: 64px; height: 44px; border-radius: 10px; border: 0; background: var(--grey-100); text-align: right; padding: 0 8px; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--grey-900); }
.rng input:focus { outline: none; background: var(--white); box-shadow: 0 0 0 2px var(--brand); }
.rng input.changed { background: var(--brand-weak); color: var(--brand); font-weight: 700; }
.vrow { padding: 12px 0; border-top: 1px solid var(--grey-100); }
.vrow:first-of-type { border-top: 0; }
.vrow .nm { font-size: 16px; font-weight: 700; }
.vrow .cells { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 12px; margin-top: 6px; }
.cell > span:first-child { flex-shrink: 0; white-space: nowrap; }
.vrow .cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--grey-600); }
.arow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--grey-100); flex-wrap: wrap; }
.arow:first-of-type { border-top: 0; }
.arow .tog { width: auto; min-height: 48px; padding: 0; }
.arow .nm { flex: 1; min-width: 120px; font-size: 16px; font-weight: 600; }
.arow .nm small { display: block; font-size: 13px; color: var(--grey-600); font-weight: 500; }
.arow.off .nm, .arow.off .rng { opacity: .5; }
.unit { display: inline-flex; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--grey-100); font-size: 12px; font-weight: 600; color: var(--grey-700); align-items: center; white-space: nowrap; }
.subrows { width: 100%; padding-left: 62px; display: grid; gap: 6px; }
.subrows .cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--grey-600); }
.qprev ol { margin-top: 10px; padding-left: 0; list-style: none; display: grid; gap: 8px; counter-reset: q; }
.qprev li { counter-increment: q; display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--grey-800); }
.qprev li::before { content: counter(q); flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--purple-weak); color: var(--purple); font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.qprev summary { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 18px; font-weight: 700; }
.qprev summary svg { width: 18px; height: 18px; margin-left: auto; transition: transform var(--d2) var(--ease); }
.qprev[open] summary svg { transform: rotate(180deg); }

/* ───── 로그인 ───── */
.login { flex: 1; display: flex; flex-direction: column; background: var(--white); min-height: 100%; }
.login .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 28px 24px; max-width: 480px; width: 100%; margin: 0 auto; }
.login .wordmark { padding: 0; font-size: 24px; }
.login .wordmark i { width: 30px; height: 30px; border-radius: 9px; }
.login h1 { font-size: 30px; line-height: 1.35; font-weight: 700; letter-spacing: -0.03em; margin-top: 28px; }
.login .lead { margin-top: 10px; color: var(--grey-600); font-size: 17px; }
.login .pts { list-style: none; margin-top: 28px; display: grid; gap: 12px; }
.login .pts li { display: flex; gap: 12px; align-items: center; font-size: 16px; font-weight: 600; color: var(--grey-800); }
.login .pts .ico { width: 40px; height: 40px; border-radius: 12px; }
.login .pts .ico svg { width: 20px; height: 20px; }
.login .cta { padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); max-width: 480px; width: 100%; margin: 0 auto; }
.btn-kakao { background: #FEE500; color: #191600; }
.btn-kakao:active { background: #F2D900; }
.btn-kakao svg { width: 22px; height: 22px; }
.login .alt { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.login .alt .linkbtn { padding: 0 10px; }
.login .fine { text-align: center; font-size: 13px; color: var(--grey-600); margin-top: 6px; }
body.bare .tabbar { display: none; }

/* ───── 태블릿 (768~1023) ───── */
@media (min-width: 768px) {
  .mgrid { grid-template-columns: 1fr 1fr; }
  .task .media img { width: 72px; height: 72px; }
}

/* ───── PC 콘솔 (1024~) ───── */
@media (min-width: 1024px) {
  body { background: var(--grey-50); }
  .app { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100vh; }
  .tabbar { display: none; }
  .side { display: flex; flex-direction: column; background: var(--white); border-right: 1px solid var(--grey-150); padding: 14px 12px; overflow-y: auto; }
  .side .wordmark { padding: 6px 10px 18px; }
  .ws { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 12px; border-radius: 14px; background: var(--grey-50); }
  .ws b { width: 34px; height: 34px; border-radius: 10px; background: #0E7C66; color: #fff; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
  .ws div { line-height: 1.3; font-size: 15px; font-weight: 700; min-width: 0; }
  .ws small { display: block; font-size: 13px; font-weight: 500; color: var(--grey-600); }
  .snav { display: grid; gap: 2px; }
  .snav a { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border-radius: 12px; font-size: 16px; font-weight: 600; color: var(--grey-600); transition: background-color var(--d1); }
  .snav a:hover { background: var(--grey-50); }
  .snav a[aria-current="page"] { background: var(--grey-100); color: var(--grey-900); }
  .snav a svg { width: 22px; height: 22px; flex-shrink: 0; }
  .snav .cnt { margin-left: auto; min-width: 22px; height: 22px; border-radius: 11px; font-size: 12px; }
  .snav-g { margin: 18px 12px 6px; font-size: 13px; font-weight: 600; color: var(--grey-500); }
  .snav a { height: 44px; }
  .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; width: 100%; text-align: left; }
  .me:hover { background: var(--grey-50); }
  .me .av { width: 36px; height: 36px; border-radius: 50%; background: var(--grey-150); display: grid; place-items: center; font-weight: 700; color: var(--grey-700); flex-shrink: 0; }
  .me div { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.3; min-width: 0; }
  .me small { display: block; font-size: 13px; color: var(--grey-600); font-weight: 500; }
  body.bare .app { grid-template-columns: minmax(0, 1fr); }
  body.bare .side { display: none; }

  .main { --bg: var(--grey-50); }
  .view.grey, .view.white { --bg: var(--grey-50); background: var(--grey-50); }
  .view { padding: 0 0 48px; }
  .view.flush { padding: 0; height: 100vh; min-height: 0; }
  .topnav { height: 64px; padding: 0 24px; background: rgba(249,250,251,.92); backdrop-filter: blur(10px); }
  .topnav .home-only { display: none; }
  .ph, .greet { padding: 8px 40px 20px; }
  .view > .ph:first-child { padding-top: 36px !important; }
  .view > .note, .view .note[style] { padding-left: 44px !important; padding-right: 44px !important; }
  .ph .t-title, .greet h1 { font-size: 28px; }
  .wrap { max-width: 1180px; width: 100%; margin: 0 auto; }
  .card, .month, .todayrow, .task, .morebtn, .alldone, .site-card, .plist, .autos, .list, .info-box { margin-left: 40px; margin-right: 40px; }
  .month, .todayrow, .morebtn { width: calc(100% - 80px); }
  .sec-h { padding: 8px 44px 10px; }
  .toast { left: 50%; right: auto; transform: translate(-50%, 12px); width: max-content; max-width: 520px; bottom: 32px; }
  .toast.on { transform: translate(-50%, 0); }
  body.deep .toast { bottom: 32px; }

  /* 오늘: 카드 + 오른쪽 일정·이번 달 */
  .today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; padding: 0 40px; align-items: start; }
  .today-grid .card, .today-grid .month, .today-grid .todayrow, .today-grid .task, .today-grid .morebtn, .today-grid .alldone { margin-left: 0; margin-right: 0; width: 100%; }
  .today-grid .sec-h { padding: 8px 4px 10px; }
  .today-grid .donebox { margin: 4px 0 24px; }
  .today-grid .m-only { display: none; }
  .today-side { display: grid; gap: 12px; position: sticky; top: 16px; }
  .task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 18px 20px; }
  .task .acts { margin-top: 0; grid-row: 1 / span 3; grid-column: 2; }
  .task .acts .btn { flex: none; min-width: 96px; height: 44px; padding: 0 16px; }
  .task .acts .btn-grey { flex: none; }
  .task .media { margin: 4px 0 0 58px; }
  .task .media img { width: 48px; height: 48px; border-radius: 10px; }
  .task.sk { display: block; }
  .sched { list-style: none; margin-top: 10px; display: grid; }
  .sched li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--grey-100); font-size: 15px; }
  .sched li:first-child { border-top: 0; }
  .sched li > span { color: var(--grey-600); font-variant-numeric: tabular-nums; }
  .sched li b { display: block; font-size: 15px; }
  .sched li small { font-size: 13px; color: var(--grey-600); }
  .funnel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
  .funnel div { border-radius: 14px; background: var(--grey-50); padding: 12px; }
  .funnel small { font-size: 13px; color: var(--grey-600); }
  .funnel b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

  /* 문의함: 목록 360 + 상세 */
  .inbox { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: 100vh; }
  .ilist { position: relative; border-right: 1px solid var(--grey-150); overflow-y: auto; }
  .ilist .ph { padding: 24px 20px 12px; }
  .ilist .filters { padding: 4px 20px 12px; }
  .ilist .item { padding: 16px 20px; }
  .ilist .item:hover { background: var(--grey-50); }
  .ilist .item[aria-current="true"] { background: var(--brand-weak); }
  .idetail { position: relative; display: block; overflow-y: auto; background: var(--grey-50); min-width: 0; }
  .idetail .topnav { display: none; }
  .dwrap.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 16px; padding: 24px 28px 48px; align-items: start; }
  .dwrap .dmain, .dwrap .dside { background: var(--white); border-radius: var(--r-lg); overflow: hidden; min-width: 0; }
  .dwrap .dside { position: sticky; top: 24px; }
  .dwrap .dmain .band, .dwrap .m-band { display: none; }
  .dwrap.cols > .dmain, .dwrap.cols > .dinfo { grid-column: 1; }
  .dwrap.cols > .dside { grid-column: 2; grid-row: 1 / span 2; }
  .dwrap .dinfo { background: var(--white); border-radius: var(--r-lg); padding: 4px 0; }
  .dwrap .dinfo .breakdown { background: none; margin: 0 !important; padding: 0 24px; }
  .qhead { padding: 20px 24px 16px; }
  .qhead .hacts { display: flex; gap: 8px; margin-top: 14px; }
  .aisum { margin: 0 24px; }
  .photos { padding: 14px 24px 24px; }
  .qsec { padding: 20px 24px 8px; }
  .amt { padding: 20px 24px 24px; }
  .qcta { position: static; padding: 0 24px 24px; background: none; }
  .callcard { padding: 24px; }
  .view > .pad-cta { display: none; }
  .sentbox { padding: 32px 24px; }

  /* 시트 → 가운데 대화상자 */
  .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: 520px; max-width: calc(100vw - 40px); max-height: 86vh; border-radius: 24px; padding: 20px 0 20px; transform: translate(-50%, -46%) scale(.98); opacity: 0; transition: transform var(--d3) var(--ease), opacity var(--d2) var(--ease); }
  .sheet.on { transform: translate(-50%, -50%); opacity: 1; }
  .sheet.wide { width: 640px; }
  .sheet .grab { display: none; }
  .sheet .acts { justify-content: flex-end; padding: 24px var(--gutter) 0; }
  .sheet .acts .btn-grey { flex: none; min-width: 120px; }
  .sheet .acts .btn-primary { flex: none; min-width: 160px; }
  .sheet .acts.one .btn { flex: 1; }
  .overlay { background: rgba(0, 12, 30, .48); align-items: center; justify-content: center; padding: 24px; }
  .overlay > * { background: var(--white); border-radius: 24px; max-height: calc(100vh - 48px); overflow-y: auto; width: 520px; max-width: 100%; }
  .overlay > .viewer { width: min(1000px, 100%); background: #000; }
  .done { min-height: 0; flex: none; }
  .done .mid { flex: none; padding: 48px 32px 24px; }
  .done .bottom-cta { padding-bottom: 28px; background: none; }
  .cust { max-width: 520px; min-height: 0; }

  /* 일정: 주간 격자 */
  .weeknav { padding: 0 40px 16px; }
  .wlist { grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 40px 24px; gap: 8px; }
  .wday { grid-template-columns: 1fr; align-content: start; min-height: 420px; padding: 14px 10px; }
  .wday .dn { text-align: left; padding: 0 4px; }
  .wday .free { text-align: center; margin-top: auto; padding: 8px; }
  .ev { padding: 10px; font-size: 13px; }
  .ev b { font-size: 14px; }

  /* 더보기 */
  .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 40px 24px; gap: 12px; }
  .mcard { align-items: flex-start; padding: 20px; min-height: 112px; }
  .pb { grid-template-columns: minmax(0, 1fr) 340px; padding: 0 40px 40px; align-items: start; }
  .pb > .pb-main { display: grid; gap: 12px; min-width: 0; }
  .pb > .qprev { position: sticky; top: 80px; }
  .pb-trades { margin: 0 40px 16px; max-width: 420px; }
  .vrow .cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-wrap { max-width: 760px; }

  .login .hero { padding-top: 80px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .dwrap.cols { grid-template-columns: minmax(0, 1fr); }
  .dwrap.cols > .dside { position: static; grid-column: 1; grid-row: auto; }
  .today-grid { grid-template-columns: minmax(0, 1fr); }
  .today-side { position: static; grid-template-columns: 1fr 1fr; }
  .pb { grid-template-columns: minmax(0, 1fr); }
  .pb > .qprev { position: static; }
}

@media (hover: hover) {
  .item:hover, .press-row:hover { background: var(--grey-50); }
  .btn-grey:hover { background: var(--grey-150); }
  .mcard:hover, .task:hover { box-shadow: var(--shadow-1); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.on { transition: none; }
}

/* ───── 오더 (screens/orders.js) ───── */
.oc-tabs { padding: 0 var(--gutter) 12px; }
.oc-tabs .seg { background: var(--grey-200); }
.oc .t { margin-top: 8px; }
.oc .s { margin-top: 6px; }
.oc .kick .oc-when { margin-left: auto; font-weight: 500; color: var(--grey-500); }
.oc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 14px; color: var(--grey-600); }
.oc-meta b { color: var(--grey-900); font-weight: 700; }
.oc-meta svg.ok { width: 14px; height: 14px; color: var(--green); vertical-align: -2px; }
.oc .acts .btn-grey { flex: 0 0 30%; }
.oc-state { align-self: center; flex: 1; font-size: 14px; font-weight: 600; color: var(--grey-600); }
.oc.sm { padding: 14px 20px; }
.oc-h { font-size: 15px; font-weight: 700; color: var(--grey-600); margin: 16px var(--gutter) 8px; }
.oc-h:first-child { margin-top: 4px; }
.oc-empty { margin: 0 12px 10px; padding: 16px 20px; border-radius: var(--r-lg); background: var(--white); color: var(--grey-600); font-size: 15px; line-height: 1.5; }
.oc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--gutter); }
.oc-chip { height: 48px; padding: 0 18px; border-radius: 14px; background: var(--grey-100); font-size: 17px; font-weight: 600; color: var(--grey-800);
  transition: background-color var(--d1), color var(--d1), transform var(--d1) var(--ease); }
.oc-chip:active { transform: scale(.96); }
.oc-chip[aria-pressed="true"] { background: var(--brand-weak); color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.oc-apps { display: grid; gap: 8px; padding: 0 var(--gutter); }
.oc-app { display: grid; gap: 4px; text-align: left; padding: 16px; border-radius: 16px; background: var(--grey-50); box-shadow: inset 0 0 0 1px var(--grey-200);
  transition: background-color var(--d1), box-shadow var(--d1), transform var(--d1) var(--ease); }
.oc-app:active { transform: scale(.985); }
.oc-app[aria-checked="true"] { background: var(--brand-weak); box-shadow: inset 0 0 0 2px var(--brand); }
.oc-app .nm { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--grey-900); }
.oc-app .nm .badge { height: 22px; font-size: 12px; }
.oc-app .nm svg { width: 12px; height: 12px; }
.oc-app .sub { font-size: 14px; color: var(--grey-600); }
.oc-app .said { font-size: 15px; color: var(--grey-800); }
.oc-msg { height: 150px; padding: 14px; line-height: 1.5; resize: none; font-size: 16px; }
.oc-agree { display: flex; gap: 12px; align-items: flex-start; margin: 16px var(--gutter) 0; padding: 14px 16px; border-radius: 14px; background: var(--grey-50); font-size: 14px; line-height: 1.5; color: var(--grey-600); }
.oc-agree input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--brand); flex-shrink: 0; }
.oc-agree b { display: block; font-size: 16px; color: var(--grey-900); margin-bottom: 2px; }
.oc-won { display: flex; align-items: center; gap: 10px; margin: 0 var(--gutter); }
.oc-won .inp { width: auto; flex: 1; margin: 0; }
.oc-won span { font-size: 17px; font-weight: 600; color: var(--grey-700); }

/* ───── 내 일 (screens/jobs.js) ───── */
.jlist { margin: 0 12px 12px; background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.jlist .item:first-child { border-top: 0; }
.cal { margin: 0 12px 10px; padding: 8px 8px 12px; background: var(--white); border-radius: var(--r-lg); }
.cal-h { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px; }
.cal-h b { font-size: 18px; font-weight: 700; }
.cal-w, .cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-w span { text-align: center; font-size: 13px; font-weight: 600; color: var(--grey-500); padding: 6px 0; }
.cal-w span:first-child { color: var(--red); }
.cd { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 54px; padding-top: 6px; border-radius: 12px; transition: background-color var(--d1), transform var(--d1) var(--ease); }
.cd:active { transform: scale(.94); }
.cd .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 16px; font-weight: 600; color: var(--grey-900); }
.cd.sun .n { color: var(--red); }
.cd.out .n { color: var(--grey-300); }
.cd.today .n { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand); }
.cd[aria-pressed="true"] .n { background: var(--brand); color: var(--white); box-shadow: none; }
.cd .dots { display: flex; gap: 3px; height: 6px; }
.cd .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.cd .dots i.clean { background: var(--green); }
.cd .dots i.etc { background: var(--grey-400); }
.cd .dots i.call { background: var(--purple); }
.cal-day { margin: 0 12px 16px; padding: 16px; background: var(--white); border-radius: var(--r-lg); display: grid; gap: 8px; }
.cal-day .row, .jd-sec .row { display: flex; align-items: center; gap: 8px; }
.cal-day h2, .jd-sec h2 { font-size: 17px; font-weight: 700; }
.cal-day .sp, .jd-sec .sp { flex: 1; }
.cev { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px; border-radius: 14px; background: var(--grey-50); transition: background-color var(--d1), transform var(--d1) var(--ease); }
.cev:active { transform: scale(.985); background: var(--grey-100); }
.cev .tm { flex-shrink: 0; min-width: 48px; font-size: 14px; font-weight: 700; color: var(--brand); line-height: 1.35; }
.cev.clean .tm { color: var(--green); }
.cev.etc .tm, .cev.call .tm { color: var(--grey-700); }
.cev .body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cev .body b { font-size: 16px; font-weight: 700; color: var(--grey-900); }
.cev .body span { font-size: 14px; color: var(--grey-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cev .chev { width: 18px; height: 18px; color: var(--grey-400); }
.jd-sec { padding: 8px var(--gutter) 16px; display: grid; gap: 10px; border-top: 8px solid var(--grey-100); }
.jd-sec h2 + .cev { margin-top: 2px; }
.jd-said { margin-top: 10px; font-size: 16px; color: var(--grey-800); }
.jd-none { font-size: 15px; color: var(--grey-600); }
.jd-edit { flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--brand); }
.jd-quote { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--grey-50); }
.jd-quote > div { flex: 1; display: grid; gap: 2px; }
.jd-quote b { font-size: 24px; font-weight: 700; }
.jd-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.jd-2 .inp { width: calc(100% - 20px); }
.jd-2 > div:first-child .inp { margin-right: 0; }
.jd-2 > div:last-child .inp { margin-left: 0; width: calc(100% - 20px); }
.jd-2 > div:last-child .fl { margin-left: 0; }

/* ───── 오더 더하기: 세 칸·나에게 온 오더·공유·결과·내 사람들·빈 날 (screens/orders.js·people.js·share.js) ───── */
.oc-tabs .seg button { font-size: 15px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc { position: relative; }
.oc-forme { box-shadow: inset 0 0 0 2px var(--orange-weak); }
.oc-trust { margin-left: 6px; color: var(--grey-500); font-weight: 500; }
.oc .kick.oc-pad { padding-right: 36px; }
.oc-more { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; color: var(--grey-500); }
.oc-more svg { width: 20px; height: 20px; }
.oc-out { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--grey-800); }
.oc-out .badge { height: 22px; font-size: 12px; }
.oc-out.red { color: var(--red); }
.oc-free { min-height: 1.4em; }
.oc-free b { color: var(--brand); font-weight: 700; }
.oc-aud[aria-disabled="true"] { opacity: .5; }

/* ───── 일 넘기기 = 메모 한 칸 + 칩 (screens/orders.js openPostSheet) · 문제 있을 때만 결과 · 서로 연락처 ───── */
.sheet .oc-memo { display: block; height: auto; min-height: 96px; padding: 14px; line-height: 1.5; resize: none; font-size: 18px; }
.om-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px var(--gutter) 0; }
.om-chip { height: 36px; padding: 0 12px; border-radius: 10px; background: var(--brand-weak); color: var(--brand); font-size: 15px; font-weight: 700; }
.om-chip.off { background: var(--grey-100); color: var(--grey-600); font-weight: 600; }
.om-chip.bad { background: var(--red-weak, #fdecec); color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.om-chip[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--brand); }
.om-hint { font-size: 14px; color: var(--grey-500); }
.om-edit { margin-top: 10px; padding: 12px 0 4px; border-top: 1px solid var(--grey-100); }
.om-row { display: flex; gap: 8px; align-items: center; padding: 8px var(--gutter) 0; }
.sheet .om-row .inp { flex: 1; width: auto; min-width: 0; margin: 0; }
.om-row .btn { flex-shrink: 0; }
.om-note { padding-top: 14px; }
.oc-ok { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--green); }
.oc-ok svg { width: 16px; height: 16px; }
.oc-quiet { margin-top: 10px; font-size: 14px; color: var(--grey-600); }
.oc .acts .btn-grey.oc-prob { flex: 0 0 auto; padding: 0 16px; }
.oc-ask { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--orange-weak); font-size: 15px; font-weight: 600; color: var(--grey-900); line-height: 1.5; }
.oc-tel { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.oc-tel svg { width: 14px; height: 14px; }
.oc-pickrow .btn { margin-top: 8px; width: 100%; }
.oc-consent { margin-top: 0; margin-bottom: 12px; }
.oc-consent > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand); margin-top: 2px; }

/* ───── 오더·구인 목록 = 내 일 목록과 같은 낮은 두 줄 행 (.jrow 재사용, 줄을 누르면 상세 시트) ───── */
.olist { margin-bottom: 8px; }
.orow { width: 100%; cursor: pointer; text-align: left; }
.orow:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.orow.hot .l b { color: var(--brand); }
.orow .l small .badge { margin-right: 0; }
.o-faint { color: var(--grey-400); font-weight: 500; }
.o-bad { color: var(--red); font-weight: 600; }
.o-unit { margin-right: 3px; font-size: 12px; font-weight: 500; color: var(--grey-500); }
.orow .o-act { height: 34px; padding: 0 14px; font-size: 14px; white-space: nowrap; justify-self: end; }
.orow .jst { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orow .jasg small { display: block; font-size: 12px; color: var(--grey-500); }
.orow .jasg svg.ok { width: 13px; height: 13px; margin-left: 3px; color: var(--green); vertical-align: -1px; }
.od-memo { margin: 0 var(--gutter) 6px; padding: 12px 14px; border-radius: 12px; background: var(--grey-50); font-size: 16px; line-height: 1.5; color: var(--grey-900); }
.od-from { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px var(--gutter) 0; padding: 12px 14px; border-radius: 12px; background: var(--grey-50); font-size: 14px; color: var(--grey-600); }
.od-from b { font-size: 16px; color: var(--grey-900); }
.od-from .badge { height: 22px; font-size: 12px; }
.od-from .badge svg { width: 12px; height: 12px; }
.od-from small { flex-basis: 100%; font-size: 13px; color: var(--grey-500); }
.sheet .oc-ok, .sheet .oc-quiet, .sheet .oc-out, .sheet .oc-ask { margin-left: var(--gutter); margin-right: var(--gutter); }
.sheet .s-title .badge { vertical-align: 3px; height: 22px; font-size: 12px; }
.oc-aud[aria-disabled="true"]:active { transform: none; }
.oc-opt .nm { font-size: 17px; }
.linkrow svg:last-child { width: 18px; height: 18px; color: var(--grey-400); }
button.linkrow + button.linkrow { margin-top: 8px; }

/* 공유 시트 */
.sh-prev { margin: 0 var(--gutter); padding: 14px 16px; border-radius: 14px; background: var(--grey-50); box-shadow: inset 0 0 0 1px var(--grey-150); font-size: 15px; line-height: 1.6; color: var(--grey-800); white-space: pre-wrap; word-break: break-all; max-height: 40vh; overflow-y: auto; user-select: text; -webkit-user-select: text; }
.sh-hint { display: flex; gap: 6px; align-items: flex-start; padding: 10px var(--gutter) 0; font-size: 14px; line-height: 1.5; color: var(--grey-600); }
.sh-hint svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--grey-400); }
.sheet .acts .btn svg { width: 18px; height: 18px; }

/* 내 사람들 */
.pp-acts { display: flex; gap: 8px; margin: 0 12px 10px; }
.pp-acts .btn { flex: 1; height: 52px; font-size: 16px; }
.pp-acts .btn svg { width: 18px; height: 18px; }
.pp-week .s { margin-top: 6px; font-size: 14px; }
.pp-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--grey-900); }
.pp-sum b { color: var(--brand); font-weight: 700; }
.pp-sum i { font-style: normal; color: var(--grey-300); }
.pp-row { padding-right: 8px; }
.pp-row .title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 700; }
.pp-row .title .badge { height: 22px; font-size: 12px; }
.pp-row .title .badge svg { width: 12px; height: 12px; }
.pp-av { font-size: 18px; font-weight: 800; }
.pp-trust { color: var(--grey-500) !important; }
.pp-note { padding-top: 0; margin: -2px 12px 16px; padding-left: 8px; }
.pp-empty b { display: block; color: var(--grey-900); font-size: 16px; margin-bottom: 2px; }

/* 빈 날 고르기 (14일) */
.fd-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 var(--gutter); }
.fd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 58px; border-radius: 14px; background: var(--grey-100); color: var(--grey-800); transition: background-color var(--d1), color var(--d1), transform var(--d1) var(--ease); }
.fd:active { transform: scale(.94); }
.fd small { font-size: 12px; font-weight: 600; color: var(--grey-500); }
.fd b { font-size: 18px; font-weight: 700; }
.fd.sun small { color: var(--red); }
.fd[aria-pressed="true"] { background: var(--brand); color: var(--white); }
.fd[aria-pressed="true"] small { color: rgba(255,255,255,.85); }

/* 링크로 들어온 화면 (screens/link.js) */
.lk { flex: 1; display: flex; flex-direction: column; }
.lk-head { padding: 4px var(--gutter) 8px; }
.lk-from { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--grey-700); }
.lk-from .badge { height: 22px; font-size: 12px; }
.lk-from .badge svg { width: 12px; height: 12px; }
.lk-head h1 { margin-top: 4px; }
.lk-trust { margin-top: 4px; font-size: 14px; color: var(--grey-600); }
.lk-rows { margin: 8px var(--gutter) 0; padding: 4px 16px; border-radius: 16px; background: var(--grey-50); }
.lk-rows > div + div { border-top: 1px solid var(--grey-150); }
.lk-note { padding-top: 12px; }
.lk-state { margin: 16px var(--gutter) 0; padding: 14px 16px; border-radius: 14px; font-size: 16px; font-weight: 700; background: var(--grey-100); color: var(--grey-700); }
.lk-state.blue { background: var(--brand-weak); color: var(--brand); }
.lk-state.green { background: var(--green-weak); color: var(--green); }
.lk-state.orange { background: var(--orange-weak); color: var(--orange); }
.lk-cta { position: sticky; bottom: 0; margin-top: auto; }
.lk-inv { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 28px 24px; }
.lk-av { width: 72px; height: 72px; border-radius: 24px; background: var(--brand-weak); color: var(--brand); display: grid; place-items: center; }
.lk-av svg { width: 36px; height: 36px; }
.lk-inv h1 { margin-top: 20px; }
.lk-inv h1:focus { outline: none; }
.lk-inv > p { margin-top: 8px; font-size: 16px; color: var(--grey-600); }
.lk-card { display: grid; gap: 4px; width: 100%; max-width: 420px; margin-top: 28px; padding: 18px 20px; border-radius: 16px; background: var(--grey-50); text-align: left; }
.lk-card b { display: flex; align-items: center; gap: 6px; font-size: 18px; }
.lk-card b .badge { height: 22px; font-size: 12px; }
.lk-card b .badge svg { width: 12px; height: 12px; }
.lk-card span { font-size: 15px; color: var(--grey-600); }

/* 내 프로필 (screens/profile.js) */
#pf { flex: 1; display: flex; flex-direction: column; }
.pf-sec { padding: 4px 0 20px; }
.pf-sec .fl small { font-weight: 500; color: var(--grey-500); margin-left: 4px; }
.pf-sec .fl .badge { height: 22px; font-size: 12px; margin-left: 4px; vertical-align: 1px; }
.pf-sec .fl .badge svg { width: 12px; height: 12px; }
.pf-sec .fl + .inp, .pf-sec .inp { width: calc(100% - 40px); margin: 0 var(--gutter); }
.pf-area { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-weak); color: var(--brand); }
.pf-area svg { width: 14px; height: 14px; opacity: .7; }
.pf-add { display: inline-flex; align-items: center; gap: 4px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--grey-200); color: var(--grey-700); }
.pf-add svg { width: 16px; height: 16px; }
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 8px; text-align: center; }
.pf-stats div { display: grid; gap: 2px; }
.pf-stats div + div { border-left: 1px solid var(--grey-100); }
.pf-stats b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.pf-stats span { font-size: 13px; color: var(--grey-600); }
.pf-note { padding-top: 0; margin: -2px 12px 8px; padding-left: 8px; }
.pf-cta { position: sticky; bottom: 0; margin-top: auto; }

@media (min-width: 1024px) {
  .pp-acts { margin: 0 40px 12px; max-width: 520px; }
  .pp-note, .pf-note { margin-left: 40px; margin-right: 40px; }
  .oc.has-more .acts { align-self: end; padding-top: 40px; }
  .task.pp-week { display: block; }
  .pf-sec, .pf-stats { max-width: 720px; }
  #pf .oc-h { margin-left: 44px; }
  .pf-cta { max-width: 800px; padding-left: 40px; padding-right: 40px; background: none; }
  .lk-head, .lk-rows, .lk-note, .lk-state { max-width: 640px; }
  .lk-head { padding: 24px 40px 8px; }
  .lk-rows, .lk-state { margin-left: 40px; margin-right: 40px; }
  .lk-note { padding-left: 44px !important; }
  .lk-cta { max-width: 720px; padding-left: 40px; padding-right: 40px; background: none; }
}
.pp-acts .btn-grey { background: var(--white); color: var(--grey-800); }
/* 메뉴가 4개 (app.js MENU) */
.tabbar { grid-template-columns: repeat(4, 1fr); }

/* ───── 신뢰도 ───── */
.badge.purple { background: var(--purple-weak); color: var(--purple); }
.pf-trust { margin: 0 12px 10px; padding: 20px; display: grid; gap: 12px; }
.pf-trust .big { display: flex; align-items: baseline; gap: 8px; }
.pf-trust .big b { font-size: 40px; font-weight: 800; color: var(--brand); letter-spacing: -0.02em; }
.pf-trust .big span { font-size: 15px; color: var(--grey-600); }
.pf-trust .big.new { display: grid; gap: 4px; }
.pf-trust .big.new b { font-size: 22px; color: var(--grey-900); }
.pf-promise { font-size: 15px; line-height: 1.5; color: var(--grey-800); padding: 12px 14px; border-radius: 12px; background: var(--brand-weak); }
.pf-rules { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--grey-700); }

/* ───── + 버튼 (화면의 주 동작 하나) ───── */
.fab { position: fixed; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 6px;
  height: 56px; padding: 0 22px 0 18px; border-radius: 28px; background: var(--brand); color: var(--white); font-size: 17px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(46,108,246,.32), 0 2px 6px rgba(0,20,50,.12); transition: padding var(--d2) var(--ease), transform var(--d1) var(--ease), background-color var(--d1); }
.fab svg { width: 24px; height: 24px; flex-shrink: 0; }
.fab:active { transform: scale(.94); background: var(--brand-strong); }
.fab.mini { padding: 0 16px; }
.fab.mini .lbl { display: none; }
.fab[hidden], .deep .fab, .bare .fab, .sheet-open .fab { display: none; }
@media (min-width: 1024px) {
  .fab { right: 32px; bottom: 32px; height: 60px; padding: 0 26px 0 22px; font-size: 18px; }
  .fab.mini { padding: 0 26px 0 22px; } /* PC 는 글자를 계속 보인다 */
  .fab.mini .lbl { display: inline; }
}
/* + 버튼이 마지막 카드를 가리지 않게 */
.view { padding-bottom: 88px; }


/* ───── 달력 칸 안 일정 이름 (점 대신) ───── */
.cal-g { row-gap: 2px; }
.cd { align-items: stretch; height: auto; min-height: 78px; padding: 4px 2px 6px; gap: 3px; }
.cd .n { align-self: center; width: 26px; height: 26px; font-size: 14px; }
.cd[aria-pressed="true"] { background: var(--grey-50); }
.ces { display: grid; gap: 2px; min-width: 0; }
.ce { display: block; min-width: 0; padding: 1px 3px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1.4; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--brand-weak); color: var(--brand-strong); }
.ce.clean { background: var(--green-weak); color: var(--green); }
.ce.etc { background: var(--grey-100); color: var(--grey-700); }
.ce.call { background: var(--purple-weak); color: var(--purple); }
.ce.more { background: none; color: var(--grey-500); padding: 0 3px; }
.ce i { font-style: normal; margin-right: 4px; opacity: .75; }
.cd.out .ce { opacity: .45; }
@media (min-width: 1024px) {
  .cd { min-height: 116px; padding: 6px 4px 8px; }
  .ce { font-size: 12px; padding: 2px 6px; }
}
/* 휴대폰: 칸이 좁으면 두 줄까지 (예: "도배" / "28평") */
@media (max-width: 1023px) {
  .ce { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; padding: 1px 2px; font-size: 10.5px; line-height: 1.3; }
}
.nj-ph { display: flex; gap: 8px; margin: 0 var(--gutter); }
.nj-ph .inp { width: auto; flex: 1; margin: 0; font-size: 20px; letter-spacing: .02em; }
.nj-ph .btn { height: 52px; flex-shrink: 0; padding: 0 16px; }
.nj-tr { margin-top: 14px; }
.q-auto { margin-top: 8px; font-size: 12.5px; color: var(--grey-500); text-align: center; }
.oc-ref { margin: 0 var(--gutter) 4px; padding: 12px 14px; border-radius: 12px; background: var(--grey-50); font-size: 15px; color: var(--grey-700); }
.oc-ref b { color: var(--grey-900); }

/* ═════ 돈 · 손님 문자 · 자재 · 팀·일당 · 사람 구해요 (screens/money·msg·crew·hire.js) ═════ */
.btn-danger { background: var(--red); color: var(--white); }
.btn-danger:active { filter: brightness(.94); }
.lbl svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.neg { color: var(--red) !important; }

/* 내 일 상세 › 돈 */
.mn-start { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border-radius: 14px; background: var(--grey-50); text-align: left; }
.mn-start > span { flex: 1; display: grid; gap: 2px; font-size: 14px; color: var(--grey-600); }
.mn-start b { font-size: 17px; color: var(--brand); }
.mn-start .chev { width: 20px; height: 20px; color: var(--grey-400); }
.mn-top { display: grid; gap: 6px; padding: 16px; border-radius: 14px; background: var(--grey-50); }
.mn-due { display: grid; gap: 0; }
.mn-due span { font-size: 14px; font-weight: 600; color: var(--grey-600); }
.mn-due b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--grey-900); }
.mn-due.ok span, .mn-due.ok b { color: var(--green); }
.mn-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--grey-600); }
.mn-sub b { color: var(--grey-900); font-weight: 700; }
.mn-price { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 0; font-size: 14px; color: var(--grey-600); }
.mn-price svg { width: 14px; height: 14px; color: var(--brand); }
.mn-more { margin-top: 0; }
.mn-more summary > span { font-weight: 600; color: var(--grey-700); }
.mn-more summary > span b { color: var(--grey-900); }
.mn-h { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 2px; font-size: 13px; font-weight: 700; color: var(--grey-500); }
.mn-add { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 4px; font-size: 14px; font-weight: 700; color: var(--brand); }
.mn-add svg { width: 16px; height: 16px; }
.mn-ln { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 6px 0; text-align: left; font-size: 16px; color: var(--grey-800); border-top: 1px solid var(--grey-150); }
.mn-h + .mn-ln { border-top: 0; }
.mn-ln > span:first-child { display: grid; gap: 1px; min-width: 0; }
.mn-ln small { font-size: 13px; color: var(--grey-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-ln > span:last-child { font-weight: 600; white-space: nowrap; }
button.mn-ln:active, a.mn-ln:active { background: var(--grey-100); }
.mn-ln.total { border-top: 1.5px solid var(--grey-200); margin-top: 4px; font-weight: 700; }
.mn-ln.total b { font-size: 18px; }
.mn-none { padding: 6px 0 8px; font-size: 14px; color: var(--grey-500); }
.mn-foot { padding: 2px 0 14px; font-size: 13px; color: var(--grey-500); }
.mn-won .inp { height: 60px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.mn-echo { min-height: 30px; padding-top: 6px; font-variant-numeric: tabular-nums; }
.mn-hint { display: flex; gap: 6px; align-items: flex-start; margin: 10px var(--gutter) 0; padding: 10px 12px; border-radius: 12px; background: var(--grey-50); font-size: 14px; line-height: 1.5; color: var(--grey-600); }
.mn-hint svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--grey-400); }
a.mn-hint { color: var(--brand); }
a.mn-hint svg { color: var(--brand); }

/* 돈 화면 */
.mn-month { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 var(--gutter) 12px; }
.mn-month b { min-width: 128px; text-align: center; font-size: 19px; font-weight: 700; }
.mn-month .ib:disabled { opacity: .3; }
.mn-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 8px; text-align: center; }
.mn-three > div { display: grid; gap: 2px; }
.mn-three > div + div { border-left: 1px solid var(--grey-100); }
.mn-three span { font-size: 13px; color: var(--grey-600); font-weight: 600; }
.mn-three b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.mn-three small { font-size: 14px; font-weight: 600; margin-left: 1px; color: var(--grey-600); }
.mn-three .hl b { color: var(--brand); }
.mn-split { margin: -4px 20px 4px; font-size: 13px; color: var(--grey-500); }
.mn-sum { margin-left: 6px; color: var(--grey-900); }
.list .row-item .right .chev { width: 18px; height: 18px; color: var(--grey-400); }

/* 홈 위쪽 한 줄 */
.mn-home { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 0 12px 12px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--white); }
.mn-home .ico { width: 36px; height: 36px; border-radius: 12px; }
.mn-home .ico svg { width: 20px; height: 20px; }
.mn-home .body { flex: 1; min-width: 0; font-size: 15px; color: var(--grey-600); }
.mn-home .body b { color: var(--grey-900); font-weight: 700; }
.mn-home .body i { margin: 0 8px; font-style: normal; color: var(--grey-300); }
.mn-home .chev { width: 18px; height: 18px; color: var(--grey-400); }

/* 손님 문자 · 자재 */
.sm-kinds { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.sm-kinds .oc-chip { height: 44px; padding: 0 10px; font-size: 15px; }
textarea.sm-text { min-height: 150px; }
.sm-ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--grey-400); }
.mt-list { margin: 0 var(--gutter); padding: 4px 16px; border-radius: 14px; background: var(--grey-50); }
.mt-ln { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.mt-ln + .mt-ln { border-top: 1px solid var(--grey-150); }
.mt-ln > span { display: grid; gap: 2px; min-width: 0; font-size: 16px; }
.mt-ln small { font-size: 13px; color: var(--grey-500); }
.mt-ln > b { font-size: 20px; font-weight: 800; white-space: nowrap; }

/* 팀·일당 */
.cr-sum { padding: 18px 20px; }
.cr-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cr-sum span { font-size: 15px; font-weight: 600; color: var(--grey-600); }
.cr-sum b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.cr-sum p { margin-top: 2px; font-size: 13px; color: var(--grey-500); }
.cr-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cr-wk { display: inline-flex; align-items: center; gap: 0; color: var(--grey-800); }
.cr-wk .ib { width: 40px; height: 40px; }
.cr-wk .ib svg { width: 20px; height: 20px; }
.cr-wk b { min-width: 76px; text-align: center; font-size: 14px; }
.cr-h .btn { height: 36px; }
.cr-grid { padding: 10px 10px 12px; }
.cr-row { display: grid; grid-template-columns: 62px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; }
.cr-row + .cr-row { margin-top: 6px; }
.cr-head span { display: grid; justify-items: center; font-size: 14px; font-weight: 700; color: var(--grey-700); }
.cr-head small { font-size: 11px; font-weight: 600; color: var(--grey-500); }
.cr-head .sun small { color: var(--red); }
.cr-head .today { color: var(--brand); }
.cr-head .today small { color: var(--brand); }
.cr-row .nm { display: grid; font-size: 14px; font-weight: 700; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cr-row .nm small { font-size: 12px; font-weight: 600; color: var(--grey-500); }
.cr-cell { height: 44px; border-radius: 12px; background: var(--grey-100); display: grid; place-items: center; color: var(--white); transition: background-color var(--d1), transform var(--d1) var(--ease); }
.cr-cell:active { transform: scale(.92); }
.cr-cell.today { box-shadow: inset 0 0 0 2px var(--brand-weak); }
.cr-cell.on { background: var(--brand); }
.cr-cell.paid { background: var(--green); }
.cr-cell svg { width: 18px; height: 18px; }
.cr-cell:disabled { opacity: .5; }
.cr-note { margin-top: 10px; padding: 0 2px; font-size: 13px; color: var(--grey-500); }
.cr-m { gap: 10px; padding-right: 16px; }
.cr-mbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.cr-mbtn .title small { font-size: 13px; font-weight: 600; color: var(--grey-500); margin-left: 2px; }
.cr-mbtn .desc b { color: var(--grey-900); }
.cr-av { font-size: 17px; font-weight: 800; }
.cr-m .btn-sm { flex-shrink: 0; height: 40px; padding: 0 14px; }
.cr-ok { flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--green); }
.cr-line { width: 100%; margin: 0; }
.cr-line b { color: var(--grey-900); }
.cr-job { display: grid; gap: 14px; }
.cr-jd > b { display: block; margin: 0 var(--gutter) 8px; font-size: 15px; color: var(--grey-700); }

/* 사람 구해요 */
.oc-note { font-weight: 500; color: var(--grey-600); }
.hr-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--green-weak); }
.hr-contact > span { display: grid; gap: 1px; min-width: 0; }
.hr-contact b { font-size: 16px; }
.hr-contact small { font-size: 14px; color: var(--grey-700); }
.hr-contact .btn { flex-shrink: 0; height: 40px; background: var(--white); }
.hr-contact.big { margin: 0 var(--gutter); padding: 18px; }
.hr-contact.big b { font-size: 20px; }
.hr-contact.big small { font-size: 18px; }
.hr-choose .oc-app { padding: 18px 16px; }
.hr-choose .nm svg { width: 20px; height: 20px; color: var(--brand); }
.hr-days .oc-chip { min-width: calc(25% - 6px); padding: 0 10px; font-size: 16px; }
.hr-step { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 0 var(--gutter); padding: 8px; border-radius: 16px; background: var(--grey-50); }
.hr-step .ib { background: var(--white); box-shadow: inset 0 0 0 1px var(--grey-200); }
.hr-step b { min-width: 64px; text-align: center; font-size: 24px; font-weight: 800; }
.hr-sum { margin: 14px var(--gutter) 0; padding: 4px 16px; border-radius: 14px; background: var(--grey-50); }
.hr-sum > div + div { border-top: 1px solid var(--grey-150); }

@media (min-width: 1024px) {
  .mn-home { width: auto; max-width: 720px; margin: 0 40px 16px; }
  .mn-month, .mn-three, .mn-split { max-width: 720px; }
  .mn-month { justify-content: flex-start; padding-left: 40px; }
  .mn-split { margin-left: 44px; }
  #tmBody .card, #tmBody .list { max-width: 720px; }
  #tmBody .oc-h, #mnBody .oc-h { max-width: 720px; margin-left: 44px; }
  #mnBody .list, #mnBody .oc-empty { max-width: 720px; }
  .cr-row { grid-template-columns: 96px repeat(7, minmax(0, 1fr)); gap: 8px; }
  .cr-cell { height: 48px; }
}
.oc-won .inp { min-width: 0; }
.oc-won span { flex-shrink: 0; white-space: nowrap; }
.sheet .acts .btn-danger { flex: 1; }
@media (min-width: 1024px) { .sheet .acts .btn-danger { flex: none; min-width: 160px; } }
.cr-mbtn .desc b { white-space: nowrap; }
.hr-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-days .oc-chip { min-width: 0; padding: 0 4px; text-align: center; }

/* ═════ 조직: 직원·팀원 · 초대 받기 · 업체 바꾸기 · 담당 (screens/team.js, jobs.js) ═════ */
.tm-av { width: 44px; height: 44px; font-size: 17px; font-weight: 800; }
.tm-me { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--grey-100); font-size: 12px; font-weight: 700; color: var(--grey-600); vertical-align: 2px; }
.list .row-item .right .badge { height: 24px; font-size: 13px; }
.tm-sw .switch { margin-left: 8px; }
.tm-rules { margin: 4px 12px 12px; }
.tm-rules summary { display: flex; align-items: center; justify-content: space-between; min-height: 32px; font-size: 15px; font-weight: 600; color: var(--grey-700); cursor: pointer; list-style: none; }
.tm-rules summary::-webkit-details-marker { display: none; }
.tm-rules summary svg { width: 18px; height: 18px; color: var(--grey-400); transition: transform var(--d2); }
.tm-rules[open] summary svg { transform: rotate(180deg); }
.tm-kv { grid-template-columns: 72px 1fr; align-items: center; font-size: 15px; }
.tm-kv .badge { height: 24px; font-size: 13px; }
.tm-pick { display: grid; gap: 8px; padding: 0 var(--gutter); }
.tm-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 16px; border-radius: 16px; background: var(--grey-50); text-align: left; }
.tm-opt .body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tm-opt b { font-size: 17px; }
.tm-opt .body span { font-size: 14px; color: var(--grey-600); }
.tm-opt .chev { width: 18px; height: 18px; color: var(--grey-400); }
.tm-opt[aria-current="true"] { background: var(--brand-weak); }
.tm-now { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; color: var(--brand); }
.tm-now svg { width: 16px; height: 16px; }
.tm-roles { display: grid; gap: 8px; padding: 0 var(--gutter); }
.tm-role { display: grid; gap: 2px; width: 100%; padding: 14px 16px; border-radius: 14px; background: var(--grey-50); text-align: left; transition: box-shadow var(--d1), background-color var(--d1); }
.tm-role b { font-size: 17px; }
.tm-role span { font-size: 14px; color: var(--grey-600); }
.tm-role[aria-checked="true"] { background: var(--brand-weak); box-shadow: inset 0 0 0 2px var(--brand); }
.tm-role[aria-checked="true"] b { color: var(--brand); }
/* 홈 위 업체 이름 (소속 업체 2개 이상일 때만) */
.org-btn { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px 0 12px; border-radius: 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.org-btn:active { background: var(--grey-200); }
.org-btn svg { width: 20px; height: 20px; color: var(--grey-500); }
.ws-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border-radius: 12px; }
.ws-btn .ws-chev { width: 18px; height: 18px; margin-left: auto; color: var(--grey-500); flex-shrink: 0; }
.ws:has(.ws-btn):hover { background: var(--grey-100); }
/* 담당 */
.j-asg { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--grey-100); font-size: 12px; font-weight: 600; color: var(--grey-600); }
.jd-asg { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 10px; padding: 0 12px; border-radius: 12px; background: var(--grey-50); font-size: 15px; color: var(--grey-700); }
.jd-asg svg { width: 18px; height: 18px; color: var(--grey-500); }
.jd-asg b { color: var(--grey-900); }
.jd-asg .jd-edit { margin-left: 6px; }
.pf-lp { margin-bottom: 12px; }
.cr-app { width: calc(100% - 24px); margin: 4px 12px 16px; }
@media (min-width: 1024px) {
  #tmBody .list, #tmBody .tm-rules { max-width: 720px; margin-left: 40px; }
  #tmBody .oc-h { margin-left: 44px; }
  .cr-app { max-width: 720px; margin-left: 40px; }
  .pf-lp { max-width: 640px; margin-left: 40px; }
}

/* ═════ 미니 프로필 편집 (screens/page.js) ═════ */
.ico.yellow { background: #FFF6BF; color: #3A2E00; }
.ico.brand { background: var(--brand); color: var(--white); }
.lpe { padding: 0 12px; }
.lpe-main { min-width: 0; }
/* 위 탭: 흰 알약 막대, 고른 탭은 검은 알약 */
.lpe-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; margin-bottom: 12px; border-radius: 999px; background: var(--white); box-shadow: 0 1px 2px rgba(0,20,50,.04); }
.lpe-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--grey-600); transition: background-color var(--d2) var(--ease), color var(--d2); }
.lpe-tabs button svg { width: 18px; height: 18px; }
.lpe-tabs button[aria-selected="true"] { background: #191F28; color: var(--white); }
.lpe-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--brand-weak); font-size: 14px; color: var(--grey-800); }
.lpe-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand); }
.lpe-note.warn { background: var(--orange-weak); }
.lpe-note.warn svg { color: var(--orange); }
.lpe-card { background: var(--white); border-radius: 20px; padding: 18px; margin-bottom: 12px; }
.lpe-card h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.lpe-card h3 small { font-size: 13px; font-weight: 600; color: var(--grey-500); }
.lpe-card .inp { width: 100%; margin: 0; }
/* 맨 위 프로필 줄 */
.lpe-prof { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 14px; align-items: center; }
.lpe-av { width: 64px; height: 64px; border-radius: 22px; object-fit: cover; display: grid; place-items: center; color: var(--white); font-size: 26px; font-weight: 800; background: var(--grey-200); }
.lpe-pf { display: grid; gap: 8px; }
.lpe-pf .inp { height: 46px; font-size: 16px; }
.lpe-pf .inp:first-child { font-weight: 700; font-size: 17px; }
.lpe-photo { grid-column: 1 / -1; }
.lpe-photo summary { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: 14px; font-weight: 600; color: var(--grey-600); cursor: pointer; list-style: none; }
.lpe-photo summary::-webkit-details-marker { display: none; }
.lpe-photo summary svg { width: 16px; height: 16px; transition: transform var(--d2); }
.lpe-photo[open] summary svg { transform: rotate(180deg); }
.lpe-photo .inp { margin-top: 4px; height: 46px; font-size: 15px; }
/* 블록 목록 */
.lbs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lb { background: var(--white); border-radius: 20px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); position: relative; }
.lb.fresh { animation: lbIn .4s var(--ease) both; }
@keyframes lbIn { from { opacity: 0; transform: translateY(10px); } }
.lb-row { display: flex; align-items: center; gap: 4px; min-height: 72px; padding: 0 8px 0 4px; }
.lb-drag { display: none; width: 28px; height: 48px; place-items: center; color: var(--grey-400); cursor: grab; touch-action: none; flex-shrink: 0; }
.lb-drag svg { width: 20px; height: 20px; }
.lb-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 4px 0 8px; text-align: left; border-radius: 14px; transition: transform var(--d1) var(--ease); }
.lb-head:active { transform: scale(.99); }
.lb-ico { width: 40px; height: 40px; border-radius: 13px; transition: opacity var(--d2); }
.lb-ico svg { width: 22px; height: 22px; }
.lb-ico.sm { width: 32px; height: 32px; border-radius: 10px; }
.lb-ico.sm svg { width: 18px; height: 18px; }
.lb-txt { display: grid; min-width: 0; transition: opacity var(--d2); }
.lb-txt b { font-size: 16px; font-weight: 700; }
.lb-txt small { font-size: 13.5px; color: var(--grey-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-txt small.need { color: var(--orange); font-weight: 600; }
.lb.off .lb-ico, .lb.off .lb-txt { opacity: .4; }
.lb-mv { display: flex; }
.lb-mv .ib { width: 32px; height: 44px; color: var(--grey-500); }
.lb-mv .ib svg { width: 18px; height: 18px; }
.lb-mv .ib:disabled { opacity: .25; }
.lb-sw { flex-shrink: 0; display: grid; place-items: center; height: 48px; padding: 0 2px; }
.lb-sw .switch { width: 44px; height: 26px; }
.lb-sw .switch::after { width: 20px; height: 20px; }
.lb-sw[aria-checked="true"] .switch::after { transform: translateX(18px); }
.lb-chev { display: none; width: 36px; color: var(--grey-400); }
.lb-chev svg { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.lb.open .lb-chev svg { transform: rotate(180deg); }
.lb-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--ease); }
.lb.open .lb-body { grid-template-rows: 1fr; }
.lb-in { overflow: hidden; min-height: 0; padding: 0 16px; }
.lb.open .lb-in { padding-bottom: 16px; }
.lb-in .fl { margin: 10px 0 6px; font-size: 14px; }
.lb-in .fl:first-child { margin-top: 0; }
.lb-in .inp { width: 100%; margin: 0; height: 48px; font-size: 16px; }
.lb-in textarea.inp, .lb-ta { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.lb-note, .lb-in .note { margin: 8px 0 0; padding: 0; font-size: 13.5px; line-height: 1.5; color: var(--grey-600); }
.lb-note a { color: var(--brand); font-weight: 600; }
.lb-note.err { color: var(--red); } .lb-note.ok { color: var(--green); }
.lb-pad { padding-top: 2px; }
.lb-li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 40px; gap: 6px; align-items: center; margin-top: 8px; }
.lb-li.sns { grid-template-columns: 84px minmax(0, 1fr) 40px; }
.lb-li .ib, .lb-th .ib { width: 40px; height: 40px; color: var(--grey-500); }
.lb-li .ib svg, .lb-th .ib svg { width: 18px; height: 18px; }
.lb-k { font-size: 14px; font-weight: 700; color: var(--grey-700); }
.lb-more { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--brand); }
.lb-more svg { width: 16px; height: 16px; }
.lb-thumbs { display: grid; gap: 8px; }
.lb-th { display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.lb-th img, .lb-th:not(:has(img))::before { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--grey-100); }
.lb-th:not(:has(img))::before { content: ""; }
.lb-chips { padding: 0; margin-top: 10px; gap: 6px; }
.lb-chips .oc-chip { height: 38px; padding: 0 12px; font-size: 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; }
.lb-chips .oc-chip svg { width: 14px; height: 14px; }
.lb-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.lb-foot .btn { height: 36px; color: var(--grey-700); }
.lbs.sorting .lb:not(.dragging) { transition: transform .2s var(--ease); }
.lb.dragging { z-index: 3; box-shadow: 0 14px 32px rgba(23,29,46,.16); transition: box-shadow .2s; }
.lpe-empty { padding: 20px; text-align: center; font-size: 15px; color: var(--grey-500); }
.lpe-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 56px; margin: 12px 0; border-radius: 16px; background: #191F28; color: var(--white); font-size: 17px; font-weight: 700; }
.lpe-add svg { width: 20px; height: 20px; }
/* 거절 메시지 안내 */
.lpe-tip p { font-size: 14px; line-height: 1.55; color: var(--grey-600); }
.lpe-tip h3 svg { width: 20px; height: 20px; color: var(--green); }
.lpe-msg { margin: 12px 0 10px; padding: 14px; border-radius: 14px; background: var(--grey-50); font-size: 15px; line-height: 1.55; color: var(--grey-800); user-select: all; }
.lpe-tip .btn svg { width: 16px; height: 16px; }
.lpe-how { display: grid; grid-template-columns: 56px 1fr; gap: 6px 10px; margin-top: 14px; font-size: 14px; }
.lpe-how dt { font-weight: 700; color: var(--grey-700); }
.lpe-how dd { color: var(--grey-600); }
/* 디자인 탭 */
.lpe-themes { display: flex; flex-wrap: wrap; gap: 14px; }
.lpe-themes button { display: grid; justify-items: center; gap: 6px; min-width: 52px; }
.lpe-themes span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: transparent; transition: transform var(--d1) var(--ease), box-shadow var(--d1); }
.lpe-themes span svg { width: 22px; height: 22px; }
.lpe-themes button[aria-checked="true"] span { color: var(--white); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--grey-800); }
.lpe-themes button:active span { transform: scale(.94); }
.lpe-themes small { font-size: 13px; font-weight: 600; color: var(--grey-600); }
.lpe-swrow { padding: 4px 0; }
.lpe-swrow .row-item { padding: 12px 18px; }
.lpe-slug { display: flex; align-items: center; gap: 0; height: 52px; padding-left: 14px; border-radius: 12px; background: var(--grey-100); }
.lpe-slug span { font-size: 16px; font-weight: 600; color: var(--grey-500); white-space: nowrap; }
.lpe-slug .inp { flex: 1; min-width: 0; padding-left: 2px; background: transparent; font-weight: 700; }
.lpe-slug:focus-within { background: var(--white); box-shadow: 0 0 0 2px var(--brand); }
.lpe-slug .inp:focus { box-shadow: none; }
.lpe-card > .btn { margin-top: 12px; }
/* 분석 탭 */
.lpe-kpi { display: grid; grid-template-columns: 1fr 1fr; text-align: center; padding: 18px 8px; }
.lpe-kpi > div { display: grid; gap: 2px; }
.lpe-kpi > div + div { border-left: 1px solid var(--grey-100); }
.lpe-kpi span { font-size: 14px; font-weight: 600; color: var(--grey-600); }
.lpe-kpi b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.lpe-kpi small { font-size: 12.5px; color: var(--grey-500); }
.lpe-sample { margin: -4px 4px 12px; font-size: 13px; color: var(--grey-500); }
.lpe-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lpe-bars li { display: flex; align-items: center; gap: 12px; }
.lpe-bt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.lpe-bn { font-size: 15px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.lpe-bn small { font-size: 13px; font-weight: 500; color: var(--grey-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpe-bar { height: 8px; border-radius: 4px; background: var(--grey-100); overflow: hidden; }
.lpe-bar i { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: var(--brand); transition: width var(--d3) var(--ease); }
.lpe-bars b { min-width: 32px; text-align: right; font-size: 17px; font-weight: 800; }
/* 저장 (화면 아래 고정) */
.lpe-cta { position: sticky; bottom: 0; z-index: 6; margin-top: auto; }
.lpe-link { margin: 0 var(--gutter); padding: 18px; border-radius: 16px; background: var(--brand-weak); text-align: center; }
.lpe-link b { font-size: 20px; font-weight: 800; color: var(--brand); word-break: break-all; }
/* 미리보기 */
.lpe-frame { display: block; width: 100%; height: 100%; border: 0; background: #F5F5F8; }
.overlay.lpe-ov { background: var(--white); }
.lpe-ovbar { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 4px 0 16px; flex-shrink: 0; border-bottom: 1px solid var(--grey-150); }
.lpe-ovbar b { font-size: 17px; }
.lpe-ovbar span { flex: 1; font-size: 14px; color: var(--grey-500); }
.lpe-frame.full { flex: 1; height: auto; }
/* 블록 추가 창: 휴대폰 = 아래 시트(3칸), PC = 가운데 창(4칸) */
.lb-addh { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; margin: -8px var(--gutter) 4px; }
.lb-addh h2 { font-size: 20px; font-weight: 800; }
.lb-addh .ib { position: absolute; right: -8px; top: 0; color: var(--grey-600); }
.sheet.lb-addsheet .s-body { padding-top: 0; }
.lb-grp { padding: 8px 12px 4px; }
.lb-grp h3 { padding: 0 8px 6px; font-size: 13px; font-weight: 700; color: var(--grey-500); }
.lb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.lb-tile { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 4px 14px; border-radius: 16px; text-align: center; transition: background-color var(--d1), transform var(--d1) var(--ease); }
.lb-tile:hover { background: var(--grey-50); }
.lb-tile:active { transform: scale(.97); background: var(--grey-100); }
.lb-tile .ico { width: 56px; height: 56px; border-radius: 18px; margin-bottom: 4px; }
.lb-tile .ico svg { width: 28px; height: 28px; }
.lb-tile b { font-size: 15px; font-weight: 700; }
.lb-tile > span:last-child { font-size: 12.5px; line-height: 1.4; color: var(--grey-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-tile:disabled { opacity: .4; }
@media (min-width: 1024px) {
  .lpe-pvbtn { display: none; }
  .lpe { display: grid; grid-template-columns: 360px minmax(0, 640px); gap: 48px; padding: 8px 40px 0; align-items: start; }
  .lpe-side { position: sticky; top: 80px; display: grid; justify-items: center; gap: 12px; }
  .lpe-phone { width: 360px; height: min(740px, calc(100vh - 200px)); border-radius: 46px; border: 10px solid #191F28; overflow: hidden; background: #F5F5F8; box-shadow: 0 20px 48px rgba(23,29,46,.14); }
  .lpe-cap { font-size: 13px; color: var(--grey-500); }
  .lb-drag { display: grid; }
  .lb-mv { display: none; }
  .lb-chev { display: grid; }
  .lb-row { padding-left: 2px; }
  .lb:hover { box-shadow: var(--shadow-1); }
  .lpe-cta { padding-left: calc(40px + 360px + 48px); padding-right: 40px; background: linear-gradient(to top, var(--grey-50) 70%, transparent); }
  .lpe-cta .btn { max-width: 640px; }
  .sheet.lb-addsheet { width: 760px; }
  .lb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lb-grp { padding: 8px 20px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb-body, .lb-head, .lb-chev svg, .lb-tile, .lpe-tabs button, .lpe-bar i, .lbs.sorting .lb:not(.dragging) { transition: none; }
  .lb.fresh { animation: none; }
}

/* ───── 홈: 내 링크 보내기 · 현장 소식 ───── */
.lk-home { text-align: left; }
.lk-sub { font-size: 14px; color: var(--grey-500); }
.mn-cells .body { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.mn-cells .body > span { display: grid; gap: 1px; min-width: 0; }
.mn-cells small { font-size: 12px; color: var(--grey-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-cells b { font-size: 17px; }
.feed { margin-top: 8px; }
.fd-list { display: grid; margin: 0 12px 16px; border-radius: var(--r-lg); background: var(--white); overflow: hidden; }
.fd-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; text-align: left; border-top: 1px solid var(--grey-100); }
.fd-row:first-child { border-top: 0; }
.fd-row .ico { width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0; }
.fd-row .ico svg { width: 19px; height: 19px; }
.fd-row .body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fd-row .body b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-row .body > span { font-size: 13px; color: var(--grey-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-side { display: grid; justify-items: end; gap: 4px; flex-shrink: 0; }
.fd-side small { font-size: 12px; color: var(--grey-500); }
@media (hover: hover) { .fd-row:hover { background: var(--grey-50); } }

/* PC: 돈 한 줄·내 링크·현장 소식도 다른 카드처럼 양옆 40, 전체 폭 */
@media (min-width: 1024px) {
  .fd-list { margin-left: 40px; margin-right: 40px; }
  .mn-home { width: calc(100% - 80px); max-width: none; margin: 0 40px 12px; }
  .feed .sec-h { padding: 8px 44px 10px; }
}

/* ───── 돈 (다시 짬): 한 문장 + 막대 + 버튼 하나 ───── */
.mn-say { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 17px; color: var(--grey-700); }
.mn-say b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--grey-900); }
.mn-say.ok { color: var(--green); font-weight: 700; }
.mn-say.ok b { color: var(--green); }
.mn-say.ok svg { width: 22px; height: 22px; }
.mn-deal { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: var(--grey-600); font-size: 15px; }
.mn-deal b { text-decoration: underline; text-decoration-color: var(--grey-300); text-underline-offset: 4px; }
.mn-deal svg { width: 15px; height: 15px; color: var(--brand); }
.mn-bar { height: 8px; border-radius: 4px; background: var(--grey-150); overflow: hidden; }
.mn-bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand); transition: width var(--d3) var(--ease); }
.mn-left { font-size: 15px; color: var(--grey-600); }
.mn-left b { font-size: 17px; color: var(--grey-900); }
.mn-pay { margin-top: 8px; }
.mn-more summary > span small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--grey-500); }
.mn-more .cr-line { width: 100%; margin: 8px 0 0; }
.mn-big { display: grid; gap: 2px; padding: 20px; }
.mn-big > span { font-size: 15px; font-weight: 600; color: var(--grey-600); }
.mn-big > b { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--brand); }
.mn-big > b.neg { color: var(--red); }
.mn-big p { margin-top: 6px; font-size: 14px; color: var(--grey-600); }
.mn-big p b { color: var(--grey-900); }
.mn-big p small { display: block; margin-top: 2px; font-size: 13px; color: var(--grey-500); }
.mn-sum-h { margin-left: 6px; color: var(--grey-900); }
#mnBody .desc.late { color: var(--red); }
.mn-crew { margin-top: 12px; }

/* ───── 팀 (팀·일당 + 직원·팀원 합침) ───── */
.tm-p { padding: 0 16px 0 0; gap: 8px; }
.tm-pbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 0 14px 16px; text-align: left; }
.tm-pbtn .body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tm-pbtn .title .badge { height: 22px; font-size: 12px; margin-left: 2px; vertical-align: 1px; }
.tm-due { color: var(--orange); font-weight: 700; }
.tm-sum { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--grey-600); }
.tm-sum b { color: var(--grey-900); }
.tm-set { margin-top: 12px; }
.tm-app { width: 100%; margin-top: 16px; border-radius: 14px; background: var(--grey-50); }
@media (min-width: 1024px) {
  .mn-big { max-width: 720px; margin-left: 40px; }
  #tmBody .cr-grid { max-width: 720px; }
  #tmBody .oc-h.cr-h { max-width: 720px; }
  #tmBody .tm-set { max-width: 720px; margin-left: 40px; }
}
/* 안쪽 화면의 주 동작 + 버튼 (돈 › 쓴 돈 적기, 팀 › 사람 추가). 탭 막대가 없으니 더 아래에 */
body.deep .fab.on-deep:not([hidden]) { display: flex; bottom: calc(20px + env(safe-area-inset-bottom)); }
body.sheet-open .fab.on-deep { display: none !important; }
@media (min-width: 1024px) { body.deep .fab.on-deep:not([hidden]) { bottom: 32px; } }
#tmBody > .oc-h:not(.cr-h) { display: flex; align-items: baseline; }
.tm-inv { width: 100%; margin: 16px 0 0; }

/* ───── 내 일 상세: 현장 사진 (screens/photos.js) — 비었을 때 큰 버튼 하나, 있으면 전·후 두 줄 가로 스크롤 ───── */
.jp-empty { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: var(--r-lg); background: var(--grey-50); border: 1.5px dashed var(--grey-300); text-align: left; }
.jp-empty .ico svg { width: 22px; height: 22px; }
.jp-et { display: grid; gap: 2px; min-width: 0; }
.jp-et b { font-size: 17px; font-weight: 700; color: var(--grey-900); }
.jp-et span { font-size: 14px; color: var(--grey-600); line-height: 1.45; }
@media (hover: hover) { .jp-empty:hover { background: var(--brand-weak); border-color: var(--brand-weak-strong); } }
.jp-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jp-lb { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: 14px; font-weight: 700; background: var(--grey-100); color: var(--grey-700); }
.jp-lb.after { background: var(--brand-weak); color: var(--brand); }
.jp-strip { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 0; scrollbar-width: none; }
.jp-strip::-webkit-scrollbar { display: none; }
.jp-th { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--grey-100); scroll-snap-align: start; }
.jp-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-pub { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 8px; background: rgba(25, 31, 40, .72); color: var(--white); font-style: normal; font-size: 11px; font-weight: 700; }
.jp-none { align-self: center; font-size: 14px; color: var(--grey-500); }
.jp-up { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--brand); }
.jp-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brand-weak-strong); border-top-color: var(--brand); animation: spin .7s linear infinite; }
.jp-delimg { display: block; width: 120px; height: 120px; margin: 0 auto 16px; border-radius: 16px; object-fit: cover; background: var(--grey-100); }
/* 크게 보기 (기존 .viewer 덮개 위에 버튼 줄만 더한다) */
.jpv-bar { display: flex; justify-content: center; gap: 8px; padding: 12px 16px 4px; }
.jpv-b { flex: 1; max-width: 160px; display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; color: var(--white); font-size: 14px; font-weight: 600; }
.jpv-b svg { width: 22px; height: 22px; }
.jpv-b .switch { width: 40px; height: 24px; }
.jpv-b .switch::after { width: 18px; height: 18px; }
.jpv-b[aria-checked="true"] > .switch::after { transform: translateX(16px); }
.jpv-b:disabled { opacity: .5; }
@media (hover: hover) { .jpv-b:hover { background: rgba(255, 255, 255, .1); } }
.jpv-note { padding: 4px 20px calc(14px + env(safe-area-inset-bottom)); font-size: 13px; color: rgba(255, 255, 255, .62); text-align: center; }
.jpv .jpv-bar:last-child { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  .jp-th { width: 92px; height: 92px; }
  .overlay > .viewer.jpv { height: min(820px, calc(100vh - 48px)); }
}
@media (prefers-reduced-motion: reduce) { .jp-spin { animation-duration: 1.6s; } }
/* 돈: 기본은 받을 돈만, 장부는 켠 사람만 */
.mn-big > b.zero { color: var(--grey-500); }
.mn-ledger { display: block; margin: 20px auto 8px; min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--grey-500); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .mn-ledger { margin-left: 40px; } }

/* 빠르게 (2026-10-21 사용자: "뭐 할 때마다 애니메이션이 있어서 빠르게 안 돼")
   화면이 열릴 때 하나씩 떠오르는 등장 효과는 없앤다. 누름·시트·스위치처럼 손에 바로 반응하는 짧은 전환만 남긴다 (fds.css --d1~d3 도 80·140·180ms 로 줄임)
   손님이 보는 미니 프로필의 움직임(src/linkpage/render.js)은 그대로 */
.rise, .donebox .r.fresh, .lb.fresh { animation: none !important; }
.check circle, .check path { animation-duration: .2s; animation-delay: 0s; }

/* ───── 알림 (홈 오른쪽 위 종): 처리할 일 목록 ───── */
.ib-cnt { position: absolute; top: 7px; right: 5px; min-width: 14px; height: 15px; padding: 0 4px; border-radius: 8px; border: 2px solid var(--bg, var(--grey-100)); box-sizing: content-box; background: var(--red); color: var(--white); font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.ib-cnt[hidden] { display: none; }
.ib-list { display: grid; padding: 0 var(--gutter); }
.ib-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 0; text-align: left; border-top: 1px solid var(--grey-100); }
.ib-row:first-child { border-top: 0; }
.ib-row .ico { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.ib-row .ico svg { width: 20px; height: 20px; }
.ib-row .body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ib-row b { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-row small { font-size: 13px; color: var(--grey-500); }
.ib-row .chev { width: 18px; height: 18px; color: var(--grey-400); flex-shrink: 0; }
.ib-none { padding: 24px var(--gutter); text-align: center; font-size: 15px; color: var(--grey-500); }
.ib-set { display: block; margin: 12px auto 0; min-height: 40px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--grey-500); text-decoration: underline; text-underline-offset: 3px; }
.sheet .ib-list { max-height: 56vh; overflow-y: auto; }

/* ───── v3 무광 그림 (/img/ill3/app): 아이콘 상자 대신. 크기만 정하고 배경 상자는 없다 ───── */
.emo { display: block; flex-shrink: 0; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.hd-emo { width: 44px; height: 44px; }
.row-emo { width: 36px; height: 36px; }
.mc-emo { width: 48px; height: 48px; }
.big-emo { width: 72px; height: 72px; margin: 0 auto 8px; }
.card-emo { position: absolute; top: 16px; right: 16px; width: 64px; height: 64px; }
.mn-big { position: relative; }
.task .hd { align-items: center; }
.ib-row .row-emo { width: 40px; height: 40px; }

/* ───── 팀: 일당은 자동 (screens/team.js). 매일 칸 누르기 대신 "빠진 날만" 한 사람 달력에서 ───── */
.tm-auto { margin: -2px 12px 8px; padding: 0 8px; font-size: 13px; color: var(--grey-500); }
.sheet .tm-days, .sheet .tm-look { width: calc(100% - 2 * var(--gutter)); margin: 0 var(--gutter); }
.tm-days .tm-dn { gap: 2px; font-size: 14px; font-weight: 600; color: var(--grey-500); }
.sheet .tm-autosw { width: calc(100% - 2 * var(--gutter)); margin: 8px var(--gutter) 4px; }
div.dc { padding: 0 var(--gutter); }
@media (min-width: 1024px) { #tmBody .tm-auto { max-width: 720px; margin-left: 44px; } }
/* 한 사람 한 달 달력 (날짜 칩) */
.dc-nav { display: flex; align-items: center; justify-content: center; gap: 4px; margin: -4px 0 6px; }
.dc-nav .ib { width: 44px; height: 44px; }
.dc-nav .ib svg { width: 20px; height: 20px; }
.dc-nav .ib:disabled { opacity: .3; }
.dc-nav b { min-width: 56px; text-align: center; font-size: 16px; }
.dc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dc-wd { display: grid; place-items: center; height: 24px; font-size: 12px; font-weight: 600; color: var(--grey-500); }
.dc-wd.sun { color: var(--red); }
button.dc { position: relative; display: grid; place-items: center; height: 44px; border-radius: 12px; background: var(--grey-50); font-size: 15px; font-weight: 600; color: var(--grey-700);
  transition: background-color var(--d1), transform var(--d1) var(--ease); }
button.dc:active:not(:disabled) { transform: scale(.92); }
button.dc:disabled { color: var(--grey-400); background: transparent; }
button.dc.plan::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand); }
button.dc.on { background: var(--brand); color: var(--white); }
button.dc.on::after { background: var(--white); }
button.dc.paid { background: var(--green); color: var(--white); }
button.dc.paid::after { background: var(--white); }
button.dc.miss { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--grey-300); color: var(--grey-500); text-decoration: line-through; }
button.dc.today { box-shadow: inset 0 0 0 2px var(--brand-weak); }
button.dc.on.today { box-shadow: inset 0 0 0 2px var(--brand-strong, var(--brand)); }
.dc-sum { margin-top: 12px; text-align: center; font-size: 15px; color: var(--grey-600); }
.dc-sum b { color: var(--grey-900); }
.dc-key { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--grey-500); }
.dc-key .k { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.dc-key .k:first-child { margin-left: 0; }
.dc-key .k.on { background: var(--brand); }
.dc-key .k.paid { background: var(--green); }
.dc-key .k.plan { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }

/* ───── 내 일 목록: 한눈에 (둥근 목록·색 꼬리표는 그대로, 줄 높이만 낮게. 중요한 건 진하게, 나머지는 흐리게) ───── */
.jrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--grey-100); }
.jlist .jrow:first-child { border-top: 0; }
.jdate { display: grid; place-items: center; align-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--grey-100); line-height: 1.1; }
.jdate small { font-size: 11px; font-weight: 600; color: var(--grey-600); }
.jdate b { font-size: 17px; font-weight: 800; color: var(--grey-800); }
.jdate.today { background: var(--brand-weak); } .jdate.today small, .jdate.today b { color: var(--brand); }
.jdate.none b { font-size: 13px; color: var(--grey-600); } .jdate.past b { color: var(--grey-500); }
.jrow .l { min-width: 0; display: grid; gap: 3px; }
.jrow .l b { font-size: 16px; font-weight: 700; color: var(--grey-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jrow .l small { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--grey-600); overflow: hidden; white-space: nowrap; }
.jrow .l small .badge { height: 20px; padding: 0 6px; font-size: 11px; flex-shrink: 0; }
.jrow .jamt { font-size: 16px; font-weight: 700; color: var(--grey-900); text-align: right; white-space: nowrap; }
.jrow .jst, .jrow .jasg { display: none; }
.jtag { display: inline-block; padding: 0 5px; border-radius: 5px; background: var(--brand-weak); color: var(--brand); font-size: 11px; font-weight: 700; line-height: 18px; flex-shrink: 0; }
.jsum { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; border-top: 1px solid var(--grey-100); background: var(--grey-50); font-size: 14px; color: var(--grey-500); }
.jsum b { font-size: 15px; color: var(--grey-800); }
@media (hover: hover) { .jrow:hover { background: var(--grey-50); } }
/* PC: 같은 줄에 상태·담당 칸이 생기고 세로로 맞춘다 (머리줄 없는 목록) */
@media (min-width: 1024px) {
  .jrow { grid-template-columns: 48px minmax(0, 1fr) 110px 110px 120px; gap: 16px; padding: 12px 24px; }
  .jrow .l small .m-only { display: none; }
  .jrow .jst, .jrow .jasg { display: block; }
  .jasg { font-size: 14px; color: var(--grey-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .jasg i { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; background: var(--grey-100); font-style: normal; font-size: 12px; font-weight: 700; color: var(--grey-700); vertical-align: middle; }
  .jsum { padding: 14px 24px; }
}

/* ───── 일 상세: 견적은 접힌 한 줄로 시작, PC 는 두 칸 (왼쪽 견적·사진·손님 / 오른쪽 일정·돈·넘기기) ───── */
.jd-qstart { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 14px; background: var(--brand-weak); text-align: left; }
.jd-qstart > span { flex: 1; display: grid; gap: 2px; }
.jd-qstart b { font-size: 17px; color: var(--brand); }
.jd-qstart small { font-size: 13px; color: var(--grey-600); }
.jd-qstart .chev { width: 18px; height: 18px; color: var(--brand); }
@media (min-width: 1024px) {
  .jd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 24px; padding: 0 40px 40px 24px; align-items: start; }
  .jd-main, .jd-side { display: grid; gap: 12px; min-width: 0; }
  .jd-grid .jd-sec { margin: 0; border: 0; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 0 0 1px var(--grey-150); }
  .jd-side { position: sticky; top: 76px; }
  .jd-grid .seg button { height: 40px; font-size: 15px; }
}

/* ───── 2026-10-21 단순화: 견적 · 오더 · 내 링크 ───── */
/* 일 상세(=견적 하나): PC 도 한 줄. 읽는 순서대로 위에서 아래로, 폭은 읽기 좋은 만큼만 */
@media (min-width: 1024px) {
  .jd-one, #dnav ~ .qhead { max-width: 760px; }
  .jd-one .seg button { height: 40px; font-size: 15px; }
}
/* 내 링크가 아래 탭이 되면서 [저장하기] 줄이 탭 막대 위에 오게 */
@media (max-width: 1023px) { body:not(.deep) .lpe-cta { bottom: calc(64px + env(safe-area-inset-bottom)); } }
/* 일 상세: 상태 꼬리표 = 바꾸기 버튼 */
.st-btn { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.st-btn svg { width: 14px; height: 14px; }
.st-list .nm .badge { height: 24px; font-size: 13px; }
.st-now { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--brand); }
.st-now svg { width: 14px; height: 14px; }
/* 내 일 전체 목록의 묶음 머리줄 ("확정 3") */
.jgrp { display: flex; align-items: center; gap: 6px; padding: 14px 16px 6px; font-size: 13px; font-weight: 700; color: var(--grey-600); border-top: 1px solid var(--grey-100); }
.jlist .jgrp:first-child { border-top: 0; padding-top: 10px; }
.jgrp .num { color: var(--grey-400); font-weight: 600; }
.jgrp + .jrow { border-top: 0; }
@media (min-width: 1024px) { .jgrp { padding: 16px 24px 6px; } }

/* ───── 일 상세 한눈에 보기: 제목 작게, 견적·일정·손님·현장을 카드 한 장에 한 줄씩 ───── */
.jd-h1 { margin-top: 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.35; }
.jd-sub { margin-top: 4px; font-size: 14px; color: var(--grey-600); }
.view.white .qhead { padding-bottom: 12px; }
.jd-card { margin: 4px var(--gutter) 12px; border-radius: 16px; background: var(--grey-50); padding: 4px 0; }
.jc-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px; border-top: 1px solid var(--grey-100); }
.jd-card .jc-row:first-child { border-top: 0; }
.jc-row .k { font-size: 14px; font-weight: 600; color: var(--grey-600); }
.jc-row .v { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--grey-800); }
.jc-row .v b { font-size: 16px; font-weight: 700; color: var(--grey-900); }
.jc-row .v small { font-size: 14px; color: var(--grey-600); }
.jc-row .none { color: var(--grey-400); }
.jc-ev { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-align: left; min-height: 36px; }
.jc-act { min-height: 36px; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.jc-act:active { background: var(--brand-weak); }
.jd-one #jdPhotos.jd-sec, .jd-one #jdQuote.jd-sec { border-top: 0; }
.jd-one #jdQuote[hidden] { display: none; }
.jd-more { display: grid; gap: 4px; padding: 4px 0 16px; }
.jd-more .linkrow { margin-top: 0; min-height: 48px; }
.jd-log { margin: 4px var(--gutter) 0; }
.jd-log summary { font-size: 14px; }
@media (min-width: 1024px) { .jd-card { margin-left: 0; margin-right: 0; } .jd-one { padding: 0 24px; } .jd-log { margin-left: 0; } }
@media (min-width: 1024px) { .jd-card { background: var(--white); box-shadow: 0 0 0 1px var(--grey-150); } }
/* 내 일 목록: 줄은 누르면 상세, 상태 꼬리표·[완료]는 그 자리에서 바꾸기 */
.jrow[data-go] { cursor: pointer; }
.jrow .l small .st-btn { height: 20px; padding: 0 4px 0 6px; font-size: 11px; flex-shrink: 0; }
.jrow .l small .st-btn svg { width: 12px; height: 12px; }
.jamt-w { display: flex; justify-content: flex-end; }
.jdone { height: 34px; padding: 0 14px; font-size: 14px; }
/* 스위치: 버튼 안에 넣으면 span 이라 크기가 0이 되어 동그라미만 보였다 (견적 항목 화면) → 늘 막대 크기를 갖게 */
.switch { display: inline-block; vertical-align: middle; }
.tog { display: inline-flex; align-items: center; flex-shrink: 0; }
/* 견적 항목: 추가 작업 한 줄 = [스위치] 이름·단위 ………… [최소]~[최대] (줄바꿈 없이) */
.arow { flex-wrap: nowrap; gap: 10px; min-height: 60px; }
.arow .nm { min-width: 0; overflow: hidden; }
.arow .nm, .arow .nm small { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.arow .rng { flex-shrink: 0; margin-left: auto; }
.arow .rng input { width: 52px; height: 40px; }
/* 선택지가 있는 추가 작업: 첫 줄 [스위치] 이름, 그 아래 선택지마다 한 줄 (이름 ……… 최소~최대) */
.arow.has-sub { flex-wrap: wrap; }
.arow.has-sub .nm { flex: 1; }
.arow.has-sub .subrows { flex-basis: 100%; display: grid; gap: 4px; padding-left: 62px; }
.arow.has-sub .subrows .cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--grey-600); }
.arow.has-sub .subrows .cell > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .subrows .rng input { width: 52px; height: 40px; }

/* ───── 견적 계산기 정돈: 짧은 이름 + 고르는 칸을 촘촘하게 (PC 는 이름|칸 한 줄) ───── */
.qsec { padding-top: 8px; }
.qgrid { display: grid; gap: 0; }
.qgrid .lab { margin: 14px 0 6px; font-size: 14px; font-weight: 700; color: var(--grey-700); }
.qgrid > .lab:first-child { margin-top: 4px; }
.qgrid .seg button { height: 40px; font-size: 15px; }
.qgrid .stepper { padding: 2px; border-radius: 12px; }
.qgrid .stepper button { width: 38px; height: 38px; }
.qgrid .stepper .val { min-width: 56px; font-size: 17px; }
.qgrid .pills { gap: 6px; }
.qgrid .pills button { height: 36px; padding: 0 12px; font-size: 14px; }
.qgrid .linkbtn { min-height: 36px; margin-top: 2px; font-size: 14px; }
.qgrid .q-script { margin-top: 12px; }
.qgrid .q-script summary { font-size: 14px; }
.qgrid .q-script ol { padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--grey-700); }
.amt { padding: 12px var(--gutter) 16px; }
.final { margin-top: 4px; align-items: center; }
.final .k { font-size: 13px; }
.final .big { font-size: 30px; }
.final .adj .btn { height: 40px; }
.why { margin-top: 4px; font-size: 13px; }
.amt .breakdown { margin-top: 8px; }
@media (min-width: 1024px) {
  .qgrid { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px 16px; }
  .qgrid .lab, .qgrid > .lab:first-child { margin: 0; }
  .qgrid > :not(.lab) { grid-column: 2; }
  .qgrid > .q-script, .qgrid > .subbox { grid-column: 1 / -1; }
  .qgrid .seg { max-width: 480px; }
}
.qgrid .stepper, .qgrid .linkbtn { justify-self: start; }

/* ───── 일 상세 통일: 위 카드(.jd-card)와 견적 계산기를 같은 카드·같은 이름 칸(52px)·같은 시작선으로 ───── */
.jd-one #jdQuote.jd-sec { padding: 0; margin: 0 var(--gutter) 12px; }
.jd-one #jdQuote #qhost { border-radius: 16px; background: var(--grey-50); padding: 4px 0; }
.jd-one #jdQuote .qsec { padding: 0; }
.jd-one #jdQuote .qgrid, .jd-one #jdQuote .amt { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; }
.jd-one #jdQuote .qgrid { gap: 0 10px; }
.jd-one #jdQuote .qgrid > * { grid-column: 2; }
.jd-one #jdQuote .qgrid > .lab, .jd-one #jdQuote .amt > .lab { grid-column: 1; margin: 0; font-size: 14px; font-weight: 600; color: var(--grey-500); }
/* 한 줄 = 이름 | 칸, 줄 사이에 위 카드와 같은 구분선 */
.jd-one #jdQuote .qgrid > .lab, .jd-one #jdQuote .qgrid > .lab + * { padding: 10px 0; border-top: 1px solid var(--grey-100); }
.jd-one #jdQuote .qgrid > .lab:first-child, .jd-one #jdQuote .qgrid > .lab:first-child + * { border-top: 0; }
.jd-one #jdQuote .qgrid > .linkbtn { margin: -6px 0 6px; min-height: 32px; }
.jd-one #jdQuote .qgrid, .jd-one #jdQuote .amt { padding-left: 16px; padding-right: 16px; }
.jd-one #jdQuote .amt { padding-top: 10px; padding-bottom: 6px; border-top: 1px solid var(--grey-100); }
.jd-one #jdQuote .amt > .sr { position: absolute; }
.jd-one #jdQuote .amt-v { min-width: 0; }
.jd-one #jdQuote .final { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.jd-one #jdQuote .final .big { font-size: 24px; }
.jd-one #jdQuote .final .adj .btn { height: 36px; padding: 0 10px; font-size: 14px; }
.jd-one #jdQuote .why { margin-top: 2px; }
/* 접는 줄(통화할 때 물어볼 말 · 계산 내역)도 카드 안의 한 줄 모양 */
.jd-one #jdQuote .breakdown { grid-column: 1 / -1; margin: 0; padding: 0; background: none; border-radius: 0; border-top: 1px solid var(--grey-100); font-size: 14px; }
.jd-one #jdQuote .breakdown summary { min-height: 48px; font-weight: 600; color: var(--grey-600); }
.jd-one #jdQuote .qgrid > .q-script { margin: 0; }
.jd-one #jdQuote .qgrid > .q-script summary, .jd-one #jdQuote .q-lines summary { padding: 0; }
.jd-one #jdQuote .q-lines > div { padding-bottom: 10px; }
.jd-one #jdQuote .seg { max-width: none; }
.jd-one #jdQuote .qcta { padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 1024px) {
  .jd-one #jdQuote.jd-sec { margin-left: 0; margin-right: 0; }
  .jd-one #jdQuote #qhost { background: var(--white); box-shadow: 0 0 0 1px var(--grey-150); }
  .jd-one #jdQuote .qcta { padding: 12px 0 0; }
}
/* 통일 2차: 이름 칸 64px (두 카드 같게), 고르는 칸에는 줄·여백을 넣지 않고 줄 사이만 띄운다 */
.jc-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
.jd-one #jdQuote .qgrid, .jd-one #jdQuote .amt { grid-template-columns: 64px minmax(0, 1fr); }
.jd-one #jdQuote .qgrid { row-gap: 10px; padding-top: 12px; padding-bottom: 4px; }
.jd-one #jdQuote .qgrid > .lab, .jd-one #jdQuote .qgrid > .lab + * { padding: 0; border-top: 0; }
.jd-one #jdQuote .qgrid > .lab { white-space: nowrap; }
.jd-one #jdQuote .qgrid > .linkbtn { margin: -6px 0 0; }
.jd-one #jdQuote .qgrid > .q-script { margin-top: 2px; }
/* 통일 3차: 카드 아래 시공 사진·넘기기·기록도 같은 시작선 */
.jd-one > #jdPhotos.jd-sec { padding: 4px 0 0; margin: 0 var(--gutter) 8px; }
.jd-one > #jdPhotos .row h2 { font-size: 14px; font-weight: 600; color: var(--grey-500); }
.jd-one .jd-more { padding: 0 var(--gutter) 16px; }
.jd-one .jd-more .linkrow { width: 100%; margin: 0; }
.jd-one .jd-log { margin: 4px 0 0; }
@media (min-width: 1024px) {
  .jd-one > #jdPhotos.jd-sec { margin-left: 0; margin-right: 0; }
  .jd-one .jd-more { padding-left: 0; padding-right: 0; }
  .jd-one .jd-log summary { padding: 0 16px; }
}
@media (min-width: 1024px) { .jd-one .jd-log { background: var(--white); box-shadow: 0 0 0 1px var(--grey-150); border-radius: 16px; } .jd-one .jd-more .linkrow { background: var(--white); box-shadow: 0 0 0 1px var(--grey-150); } }

/* ───── 손님 요청 (오더 › 받을 수 있는 일 맨 위 · 내 오더 › 내가 견적 낸 손님 요청) ───── */
.jdate.rq { background: var(--brand-weak); }
.jdate.rq small, .jdate.rq b { color: var(--brand); }
.jdate.rq b { font-size: 15px; }
/* 손님 화면 미리보기 (#/q-demo, mock 전용) */
.qd-top { display: flex; align-items: center; gap: 8px; padding: 12px var(--gutter) 4px; }
.qd-top .t-title { flex: 1; }
.qd-tabs { padding: 4px var(--gutter) 10px; }
.qd-note { margin: 0 var(--gutter) 10px; font-size: 13px; color: var(--grey-600); }
.qd-frame { display: block; width: 100%; max-width: 420px; height: calc(100vh - 170px); min-height: 520px; margin: 0 auto; border: 1px solid var(--grey-200); border-radius: 16px; background: #fff; }
/* 손님 요청: 손님이 고른 조건 칩 · 내 단가로 미리 계산한 금액 안내 */
.rq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 var(--gutter) 10px; }
.rq-chips span { padding: 5px 10px; border-radius: 8px; background: var(--brand-weak); color: var(--brand-strong); font-size: 14px; font-weight: 600; }
.rq-pre { display: flex; align-items: center; gap: 6px; margin: 8px var(--gutter) 0; font-size: 14px; color: var(--green); }
.rq-pre svg { width: 16px; height: 16px; flex-shrink: 0; }
/* 로고 = 말끔 워드마크 그림 */
.wordmark .wm-img { display: block; height: 28px; width: auto; }
.login .wordmark .wm-img { height: 40px; }

/* ───── 포인트 · 성사 소개비 (screens/points.js · orders.js 견적 시트 · jobs.js 소개비 줄) ─────
   큰 숫자 하나 + 짧은 한 줄 + 주인공 버튼 하나. 강조색은 브랜드 파랑만 */
.pt-card { padding: 18px 20px 20px; }
.pt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 600; color: var(--grey-600); }
.pt-more { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; color: var(--grey-500); }
.pt-more svg { width: 16px; height: 16px; }
.pt-num { margin-top: 4px; font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: var(--tight); color: var(--grey-900); }
.pt-num.neg { color: var(--red); }
.pt-sub { margin-top: 4px; font-size: 14px; color: var(--grey-600); }
.pt-wait { display: flex; align-items: center; gap: 4px; color: var(--brand); font-weight: 600; }
.pt-wait svg { width: 16px; height: 16px; }
.pt-go { width: 100%; margin-top: 16px; }
.pt-amts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px var(--gutter) 0; }
.pt-amt { width: 100%; padding: 0 8px; font-size: 18px; }
.pt-amt.is-loading .spin { border-color: var(--brand-weak-strong); border-top-color: var(--brand); }
.pt-soon { display: flex; gap: 10px; align-items: flex-start; margin: 4px var(--gutter) 0; padding: 14px 16px; border-radius: 14px; background: var(--grey-50); font-size: 15px; line-height: 1.5; color: var(--grey-700); }
.pt-soon svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; color: var(--brand); }
.pt-line { margin: 12px var(--gutter) 0; font-size: 14px; color: var(--grey-700); }
.pt-line b { color: var(--grey-900); }
.pt-block { display: grid; gap: 2px; margin: 12px var(--gutter) 0; padding: 14px 16px; border-radius: 14px; background: var(--brand-weak); }
.pt-block b { font-size: 16px; color: var(--brand); }
.pt-block span { font-size: 14px; color: var(--grey-700); }
.pt-row .title small { font-size: 14px; font-weight: 400; color: var(--grey-500); }
.pt-row .right { font-variant-numeric: tabular-nums; }
.pt-amt-plus { color: var(--brand) !important; }
.pt-amt-minus { color: var(--grey-900) !important; }
.pt-amt-zero { color: var(--grey-500) !important; font-weight: 500 !important; }
.list .row-item .right .btn-sm { height: 34px; }
.pt-rule { padding: 4px 28px 32px; font-size: 13px; line-height: 1.55; color: var(--grey-500); }
#ptBox .card, #ptCard .card { margin-top: 0; }
.rq-kind { padding: 0 var(--gutter) 12px; }
.rq-range .inp { text-align: center; }
@media (min-width: 1024px) {
  #ptCard .pt-card { margin: 0 40px 16px; max-width: 420px; }
  #ptBox, #ptList { max-width: 640px; }
  #ptBox .pt-card { margin: 0 40px 16px; }
  #ptList .list { margin: 0 40px 16px; }
  #ptList .pt-rule { padding: 4px 48px 32px; }
}

/* ───── 처음 가입 (#/start, screens/start.js): 한 화면에 한 가지 — 업종 → 지역 → 가입 포인트. 등장 애니메이션 없음 ───── */
.ob { flex: 1; display: flex; flex-direction: column; min-height: 100%; width: 100%; max-width: 520px; margin: 0 auto; background: var(--white); }
.ob-top { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px; }
.ob-prog { display: flex; gap: 6px; }
.ob-prog i { width: 28px; height: 4px; border-radius: 2px; background: var(--grey-200); }
.ob-prog i.on { background: var(--brand); }
.ob-head { padding: 12px var(--gutter) 24px; }
.ob-head h1:focus { outline: none; }
.ob-head p { margin-top: 6px; font-size: 16px; color: var(--grey-600); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--gutter); }
.ob-find { display: flex; gap: 8px; padding: 0 var(--gutter); }
.ob-find .inp { flex: 1; min-width: 0; }
.ob-find .btn { flex: 0 0 auto; height: 52px; padding: 0 18px; }
.ob-hint { min-height: 20px; padding: 8px var(--gutter) 12px; font-size: 14px; color: var(--grey-600); }
.ob-hint.bad { color: var(--orange); }
.ob-cta { margin-top: auto; position: sticky; bottom: 0; }
.ob-done { background: var(--white); }
.ob-ill { width: 200px; height: 200px; }
.ob-done h1 { margin-top: 16px; }

/* ───── 받기 전 확인 (screens/verify.js) ───── */
.vf-how { display: flex; gap: 12px; align-items: center; margin: 0 var(--gutter); padding: 16px; border-radius: 14px; background: var(--grey-50); }
.vf-how > svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--brand); }
.vf-how div { display: grid; gap: 2px; }
.vf-how b { font-size: 16px; color: var(--grey-900); }
.vf-how span { font-size: 14px; color: var(--grey-600); }
.vf-steps { display: flex; gap: 16px; list-style: none; padding: 0 var(--gutter) 14px; font-size: 14px; font-weight: 600; color: var(--grey-500); }
.vf-steps li { display: flex; align-items: center; gap: 6px; }
.vf-steps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--grey-100); color: var(--grey-500); }
.vf-steps i svg { width: 12px; height: 12px; }
.vf-steps li.vf-now { color: var(--grey-900); }
.vf-steps li.vf-now i { background: var(--brand); color: var(--white); }
.vf-steps li.vf-past i { background: var(--brand-weak); color: var(--brand); }
.vf-err { margin: 12px var(--gutter) 0; font-size: 14px; color: var(--red); }
.sheet .inp[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--red); background: var(--white); }
.vf-card { padding: 4px 0; }
.vf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 20px; }
.vf-row + .vf-row { border-top: 1px solid var(--grey-100); }
.vf-row div { display: grid; gap: 2px; min-width: 0; }
.vf-row b { font-size: 16px; color: var(--grey-900); }
.vf-row span:not(.badge) { font-size: 14px; color: var(--grey-600); }
.vf-row .btn { flex-shrink: 0; }
.vf-row .badge svg { width: 12px; height: 12px; }
.view:has(> .ob), .view:has(> .ob-done) { padding-bottom: 0; } /* 가입 화면은 + 버튼 자리를 비우지 않는다 */

/* 포인트 카드: 잔액 오른쪽에 포인트 그림 (img/ill3/app/points) */
.pt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pt-row .pt-ico { width: 52px; height: 52px; flex-shrink: 0; }
/* 업체 표시(왼쪽 메뉴 위 "한"): 초록 → 말끔 파랑 */
.ws b { background: var(--brand); }
@media (min-width: 1024px) {
  /* PC: 제목이 늘 보이는 화면(.ttl.always — 포인트·내 프로필·견적 항목·설정 등)은 내 일·오더·더보기와 같은 큰 제목 (같은 자리·같은 크기 28px).
     위에 붙는 막대가 아니라 화면 머리. 왼쪽 메뉴로 바로 가는 화면은 "더보기로" 화살표가 필요 없다. 다른 뒤로 화살표(로그인 방법 등)는 제목 앞에 그대로 */
  .topnav:has(> .ttl.always) { position: static; height: auto; min-height: 0; padding: 36px 40px 16px; gap: 8px; background: none; backdrop-filter: none; box-shadow: none; }
  .topnav:has(> .ttl.always) > .ib { margin-left: -12px; }
  .topnav .ttl.always { position: static; left: auto; right: auto; text-align: left; font-size: 28px; line-height: 1.38; font-weight: 700; letter-spacing: -.02em; padding: 0; }
  .topnav .ib[href="#/more"] { display: none; }
  .topnav:has(> .ttl.always) + .ph, .topnav:has(> .ttl.always) + * > .ph:first-child { padding-top: 0; }
  .pt-row .pt-ico { width: 60px; height: 60px; }
}

/* ───── 2026-10-22 화면 점검 (말끔: 깔끔·친근·토스처럼) ───── */
/* 초점 테두리는 키보드로 움직일 때만 (ui.js 가 html[data-input] 을 정한다). 시트가 닫히며 [충전하기]에 초점이 돌아와도 테두리가 남지 않게 */
html[data-input="pointer"] :focus-visible { outline: none; }
/* 큰 그림: 빈 화면 · 끝난 순간 · 확인 시트 (목록 줄 안에는 넣지 않는다) */
.art { display: block; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.empty .empty-art { width: 120px; height: 120px; margin: 0 auto 12px; }
.empty { line-height: 1.5; }
.sheet .s-ill { display: block; width: 72px; height: 72px; margin: 0 var(--gutter) 12px; object-fit: contain; }
.sheet .emo.s-ill { width: 56px; height: 56px; }
/* 토스트: 체크는 말끔 파랑, 끝난 순간엔 작은 그림 */
.toast .ok { background: var(--brand); }
.toast .t-emo { width: 28px; height: 28px; margin: -3px 0; }
/* 포인트: 맨 아래 설명은 한 줄 + 자세히 */
details.pt-rule { padding: 4px 28px 32px; font-size: 13px; line-height: 1.55; color: var(--grey-500); }
details.pt-rule summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; min-height: 32px; }
details.pt-rule summary::-webkit-details-marker { display: none; }
details.pt-rule summary span { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; font-weight: 600; color: var(--grey-600); }
details.pt-rule summary svg { width: 14px; height: 14px; transition: transform var(--d2); }
details.pt-rule[open] summary svg { transform: rotate(180deg); }
details.pt-rule ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 4px; }
/* 로그인: 좋은 점 세 줄 앞 그림 (색 칸 대신 v3 무광 그림) */
.login .pts .pt-emo { width: 40px; height: 40px; }
.login .lead { line-height: 1.5; }
/* 내 링크: 탭은 다른 화면 세그먼트와 같은 모양 (검정 알약 → 흰 손잡이) · 아이콘은 말끔 파랑 하나 · [블록 추가]는 보조 버튼 (주 버튼은 저장하기 하나) */
.lpe-tabs { padding: 4px; border-radius: 14px; background: var(--grey-100); box-shadow: none; }
.lpe-tabs button { height: 44px; border-radius: 10px; font-weight: 600; }
.lpe-tabs button svg { display: none; }
.lpe-tabs button[aria-selected="true"] { background: var(--white); color: var(--grey-900); box-shadow: 0 1px 3px rgba(0,20,50,.10), 0 2px 8px rgba(0,20,50,.06); }
.lpe .lb-ico, .lb-tile .ico, .lpe-bars .lb-ico { background: var(--brand-weak); color: var(--brand); }
.lpe-add { background: var(--white); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand-weak-strong); }
.lb-foot { align-items: center; gap: 6px; }
.lb-foot .sp { flex: 1; }
.lb-foot .lb-mv { display: flex; gap: 6px; }
.lb-foot .btn svg { width: 16px; height: 16px; }
.lb-foot .btn:disabled { opacity: .4; }
.lpe-live b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--grey-900); }
.lpe-live .btn { flex-shrink: 0; height: 34px; display: inline-flex; align-items: center; gap: 4px; }
.lpe-live .btn svg { width: 15px; height: 15px; color: var(--brand); }
details.lpe-tip summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; min-height: 28px; font-size: 16px; font-weight: 700; color: var(--grey-900); }
details.lpe-tip summary::-webkit-details-marker { display: none; }
details.lpe-tip summary > svg:first-child { width: 20px; height: 20px; color: var(--brand); }
details.lpe-tip summary span { flex: 1; }
details.lpe-tip summary .chev { width: 18px; height: 18px; color: var(--grey-500); transition: transform var(--d2); }
details.lpe-tip[open] summary .chev { transform: rotate(180deg); }
details.lpe-tip[open] summary { margin-bottom: 8px; }
@media (min-width: 1024px) {
  /* 내 프로필: 모든 칸을 같은 너비로 (받기 전 확인 칸만 넓던 것) · 아래 고정 [저장하기] 뒤로 글이 비치지 않게 */
  #pf { max-width: 800px; }
  .pf-sec, .pf-stats { max-width: none; }
  .pf-lp { max-width: none; margin-left: 40px; margin-right: 40px; }
  #pf > .note:not(.pf-note) { padding-left: 44px; padding-right: 44px; }
  .pf-cta { background: linear-gradient(to top, var(--grey-50) 70%, transparent); }
}
/* 상태 꼬리표(확정·완료 등)가 아닌 "잘 됐어요" 표시는 말끔 파랑 하나로 (초록은 상태 꼬리표에만) */
.saved, .rq-pre, .oc-ok, .lb-note.ok, .st.ok, .oc-meta svg.ok, .orow .jasg svg.ok { color: var(--brand); }
.saved::before { background: var(--brand); }

/* ═════════ 사장님 앱 v2 (2026-10-22, design/사장님앱-v2-설계.md): 탭 3개 · 일 찾기 · 내 일 묶음 · 더보기 · 내 가게 ═════════ */
/* 탭 화면 머리: 큰 제목 + 작은 한 줄 + 오른쪽 아이콘 하나 (종 · 달력) */
.v2-head { display: flex; align-items: flex-start; gap: 8px; padding: 14px 12px 12px var(--gutter); }
.v2-ht { flex: 1; min-width: 0; display: grid; gap: 2px; }
.v2-where { display: inline-flex; align-items: center; gap: 2px; width: fit-content; max-width: 100%; font-size: 14px; font-weight: 600; color: var(--grey-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-where svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--grey-400); }
.v2-bell { margin-top: -6px; color: var(--grey-700); }
.v2-view { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-top: -2px; padding: 0 14px 0 12px; border-radius: 20px; background: var(--white); color: var(--grey-800); font-size: 15px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--grey-200); flex-shrink: 0; }
.v2-view svg { width: 18px; height: 18px; }
.v2-view:active { background: var(--grey-100); }
/* 주인공 버튼 하나: 화면 아래 붙어 있다 */
.v2-cta { position: sticky; bottom: 0; z-index: 6; margin-top: auto; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg, var(--white)) 72%, transparent); }
.v2-bullets { margin: 0 var(--gutter); padding-left: 18px; display: grid; gap: 6px; font-size: 15px; color: var(--grey-800); }
.snav-g:empty { height: 1px; margin: 12px 12px; background: var(--grey-150); }

/* ───── 일 찾기 ───── */
.fd-hint { position: relative; display: grid; gap: 8px; margin: 0 12px 12px; padding: 14px 44px 14px 16px; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--brand-weak-strong); }
.fd-hint p { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--grey-800); line-height: 1.45; }
.fd-hint p > span:last-child { padding-top: 1px; }
.fd-hint .ftag { flex-shrink: 0; }
.fd-hint-x { position: absolute; top: 4px; right: 2px; width: 40px; height: 40px; color: var(--grey-500); }
.fd-hint-x svg { width: 18px; height: 18px; }
.ftag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--grey-100); color: var(--grey-700); font-size: 12px; font-weight: 700; width: fit-content; white-space: nowrap; }
.ftag.req { background: var(--brand-weak); color: var(--brand); }
.fd-list { margin: 0 12px 12px; background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.fcard { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--grey-100); color: inherit; }
/* 왼쪽 아이콘 칸 (내 일 날짜 칸과 같은 크기): 손님 요청 = 연한 파랑 · 사장님 오더 = 회색 — 글자를 안 읽어도 모양으로 나뉜다 */
.fc-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--grey-100); }
.fc-ico.req { background: var(--brand-weak); }
.fc-ico .emo { width: 28px; height: 28px; }
.fc-day { font-weight: 700; color: var(--grey-800); }
.fc-for { font-size: 13px; font-weight: 700; color: var(--brand); }
.fd-seg { padding: 0 12px 12px; }
.fd-seg .seg { background: var(--grey-150); }
.fd-seg .seg button { height: 40px; font-size: 15px; white-space: nowrap; }
.fd-h { margin-top: 16px; }
.fd-hint + #fdList > .fd-h:first-child, .fd-seg + #fdList > .fd-h:first-child { margin-top: 4px; }
/* 내가 넘긴 일 한 줄 */
.fd-sent { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 0 12px 8px; padding: 12px 14px 12px 16px; border-radius: var(--r-lg); background: var(--white); text-align: left; box-shadow: inset 0 0 0 1px var(--grey-150); }
.fd-sent .l { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fd-sent b { font-size: 15px; font-weight: 700; color: var(--grey-900); }
.fd-sent small { font-size: 13px; color: var(--grey-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-sent > svg { width: 16px; height: 16px; color: var(--grey-400); flex-shrink: 0; }
.fd-sent:active { background: var(--grey-50); }
.fd-sl { display: grid; padding: 0 var(--gutter); }
.fd-sl-r { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--grey-100); }
.fd-sl-r:first-child { border-top: 0; }
.fd-sl-r .l { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; }
.fd-sl-r .l b { font-size: 16px; font-weight: 700; color: var(--grey-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-sl-r .l small { font-size: 14px; color: var(--grey-600); }
.fd-sl-r .l small.ok { color: var(--green); font-weight: 600; }
.fd-sl-r .r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fd-call { display: inline-flex; align-items: center; gap: 4px; }
.fd-call svg { width: 16px; height: 16px; }
.fd-list .fcard:first-child { border-top: 0; }
.fcard.sk { display: block; }
.fc-main { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.fc-t { max-width: 100%; font-size: 17px; font-weight: 700; color: var(--grey-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-main small { max-width: 100%; font-size: 14px; color: var(--grey-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-side { font-size: 16px; font-weight: 700; color: var(--grey-900); white-space: nowrap; }
.fc-side.go { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; color: var(--brand); }
.fc-side.go svg { width: 16px; height: 16px; }
.fcard:active { background: var(--grey-50); }
@media (hover: hover) { .fcard:hover { background: var(--grey-50); } }
.fcard[aria-current="true"] { background: var(--brand-weak); }
.fd-empty { padding-top: 32px; }
.fd-next { display: grid; justify-items: center; gap: 10px; margin: 24px auto 0; max-width: 320px; padding: 16px; border-radius: var(--r-lg); background: var(--white); color: var(--grey-700); font-size: 15px; line-height: 1.45; }
.fd-next .btn { display: inline-flex; align-items: center; gap: 6px; }
.fd-next .btn svg { width: 18px; height: 18px; }
.empty .fd-next { background: var(--white); }
/* 상세 */
.fd-d { padding: 4px 0 16px; }
.fd-d > .ftag { margin: 4px var(--gutter) 0; }
.fd-h1 { margin: 8px var(--gutter) 0; font-size: 22px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; }
.fd-sub { margin: 4px var(--gutter) 14px; font-size: 14px; color: var(--grey-600); }
.fd-said { margin: 0 var(--gutter) 12px; padding: 12px 14px; border-radius: 12px; background: var(--grey-50); font-size: 16px; line-height: 1.5; color: var(--grey-900); }
.fd-rows { margin-bottom: 6px; }
.fd-rows .badge { height: 22px; font-size: 12px; margin-left: 4px; vertical-align: 1px; }
.fd-rule { display: flex; gap: 8px; margin: 12px var(--gutter) 0; padding: 12px 14px; border-radius: 12px; background: var(--brand-weak); font-size: 14px; line-height: 1.5; color: var(--grey-800); }
.fd-rule svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--brand); }
.fd-rule b { color: var(--grey-900); }
.fd-quiet { margin: 10px var(--gutter) 0; font-size: 14px; color: var(--grey-600); }
.fd-short { margin-top: 12px; }
@media (min-width: 1024px) {
  .fd-view { padding-bottom: 0; height: 100vh; min-height: 0; }
  .fd-split { display: grid; grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); height: 100%; min-height: 0; }
  .fd-col { overflow-y: auto; padding-bottom: 40px; border-right: 1px solid var(--grey-150); }
  .fd-col .v2-head { padding: 32px 16px 16px 32px; }
  .fd-col .fd-hint, .fd-col .fd-list, .fd-col .fd-other, .fd-col .fd-sent { margin-left: 20px; margin-right: 20px; width: auto; }
  .fd-col .fd-sent, .fd-col .fd-other { width: calc(100% - 40px); }
  .fd-col { padding-bottom: 110px; } /* [+ 일 넘기기]가 마지막 카드를 가리지 않게 */
  .fd-col .fd-seg { padding: 0 20px 14px; }
  .fd-col .wk-h { margin-left: 32px; margin-right: 32px; }
  /* + 버튼: 목록 칸(옆 메뉴 240 + 목록 460) 오른쪽 아래. 오른쪽 칸의 [받을게요]와 겹치지 않게 */
  .fab[data-place="list"] { right: auto; left: calc(240px + 460px - 24px); translate: -100% 0; bottom: 28px; }
  .fd-pane { overflow-y: auto; background: var(--white); display: flex; flex-direction: column; }
  .fd-pane .fd-d { max-width: 640px; padding: 36px 24px 16px; }
  .fd-pane .v2-cta { max-width: 688px; padding: 16px 44px 28px; background: linear-gradient(to top, var(--white) 72%, transparent); }
  .fd-pane-empty { margin: auto; display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--grey-500); font-size: 15px; line-height: 1.5; }
  .fd-pane-empty svg { width: 28px; height: 28px; color: var(--grey-300); }
  .v2-head { padding: 32px 40px 18px; }
  .v2-head .t-title { font-size: 28px; }
}

/* ───── 내 일 ───── */
.wk-h { display: flex; align-items: center; gap: 6px; margin: 8px 24px 8px; font-size: 15px; font-weight: 700; color: var(--grey-700); }
.wk-h .num { color: var(--grey-400); font-weight: 600; }
.wk-none { margin: 4px 24px 12px; font-size: 15px; color: var(--grey-600); }
.wk-row { grid-template-columns: 44px minmax(0, 1fr) auto; cursor: pointer; }
.wk-row .l small { display: block; overflow: hidden; text-overflow: ellipsis; }
.wk-row .l small.hot { color: var(--brand); font-weight: 600; }
.wk-r { display: flex; align-items: center; justify-content: flex-end; }
.jamt.faint { color: var(--grey-600); font-weight: 600; }
.wk-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: calc(100% - 24px); min-height: 52px; margin: 4px 12px 12px; border-radius: 14px; background: var(--white); font-size: 15px; font-weight: 600; color: var(--grey-700); }
.wk-more svg { width: 16px; height: 16px; }
.wk-more:active { background: var(--grey-150); }
.wk-ended .jrow { opacity: .8; }
@media (min-width: 1024px) {
  .wk-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .wk-h { margin: 12px 44px 10px; }
  .wk-none { margin: 4px 44px 12px; }
  #jbody > .jlist, #jbody > .wk-more { margin-left: 40px; margin-right: 40px; width: auto; }
  #jbody { max-width: 980px; }
}
.v2-menu { display: grid; gap: 0; }
.v2-menu .linkrow { margin-top: 6px; }
.nj-ar { margin: 8px 0 0; }
/* 일 상세 머리 */
.jd-head { padding-top: 4px; }
.jd-st { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--grey-800); }
.jd-st .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-400); }
.jd-st .dot.red { background: var(--red); } .jd-st .dot.orange { background: var(--orange); } .jd-st .dot.green { background: var(--green); }
.jd-from { font-weight: 500; color: var(--grey-600); }
.jd-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px 10px 14px; border-radius: 14px; background: var(--grey-50); }
.jd-who > span { min-width: 0; display: grid; gap: 1px; }
.jd-who b { font-size: 16px; }
.jd-who small { font-size: 13px; color: var(--grey-500); }
.jd-who .btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.jd-who .btn svg { width: 16px; height: 16px; }
.jd-addr { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 15px; color: var(--grey-700); }
.jd-addr svg { width: 16px; height: 16px; color: var(--grey-400); flex-shrink: 0; }
.jd-pass { margin: 0 var(--gutter) 12px; padding: 14px 16px; border-radius: 16px; background: var(--brand-weak); display: grid; gap: 6px; font-size: 15px; }
.jd-pass .od-from { margin: 0; background: var(--white); }
.jd-pass .jc-act { justify-self: start; }
.jd-quiet { font-size: 14px; color: var(--grey-600); }
.jd-view .jd-card .jc-row .v small { display: block; width: 100%; }
@media (min-width: 1024px) {
  .jd-view .qhead, .jd-view .jd-pass { max-width: 712px; }
  .jd-view .qhead { padding-left: 44px; padding-right: 24px; }
  .jd-view .jd-pass { margin-left: 44px; }
  .jd-view .jd-one { padding-left: 24px; }
  .jd-view .v2-cta { max-width: 760px; padding: 16px 24px 28px 44px; background: linear-gradient(to top, var(--grey-50) 72%, transparent); }
}

/* ───── 더보기 ───── */
.mo-shop { padding: 4px 0 16px; }
.mo-shop-top { display: flex; align-items: center; gap: 14px; padding: 14px 18px 12px; }
.mo-av { width: 52px; height: 52px; border-radius: 16px; background: var(--brand); color: var(--white); display: grid; place-items: center; font-size: 22px; font-weight: 800; flex-shrink: 0; }
.mo-shop-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mo-shop-t b { font-size: 18px; color: var(--grey-900); }
.mo-shop-t small { font-size: 14px; color: var(--grey-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mo-badges .badge { height: 22px; font-size: 12px; }
.mo-shop-top .chev { width: 18px; height: 18px; color: var(--grey-400); }
.mo-shop-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 18px; }
.mo-shop-acts .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 44px; font-size: 15px; }
.mo-shop-acts .btn svg { width: 16px; height: 16px; }
.mo-list .right { display: flex; align-items: center; gap: 6px; }
.mo-list .row-item .chev { width: 18px; height: 18px; color: var(--grey-400); }
.mo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; }
.mo-ok { font-size: 13px; font-weight: 600; color: var(--green); }
@media (min-width: 1024px) {
  .mo-shop, #ptCard .card, .mo-list { max-width: 640px; }
}

/* ───── 내 가게 ───── */
.sh-pv { display: grid; justify-items: center; gap: 8px; width: 100%; padding: 4px 0 14px; }
.sh-pv-in { display: block; width: 188px; height: 300px; border-radius: 26px; border: 6px solid #191F28; overflow: hidden; background: #F5F5F8; box-shadow: 0 10px 24px rgba(23,29,46,.12); position: relative; }
.lpe-frame.mini { width: 352px; height: 576px; transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.sh-pv-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--grey-600); }
.sh-pv-cap svg { width: 16px; height: 16px; }
.sh-h { margin-left: 8px; }
.sh-basic { padding-bottom: 16px; }
.sh-basic .fl small { font-weight: 500; color: var(--grey-500); margin-left: 4px; }
.sh-basic .oc-chips { padding: 0 var(--gutter); }
.sh-note { padding: 6px var(--gutter) 0; font-size: 13px; color: var(--grey-500); }
.sh-out { padding: 0 8px 4px; }
.sh-photo { margin: 12px var(--gutter) 0; }
.sh-more { margin-top: 12px; }
.sh-more > summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.sh-more > summary::-webkit-details-marker { display: none; }
.sh-more > summary > span { flex: 1; display: grid; gap: 2px; }
.sh-more > summary b { font-size: 16px; color: var(--grey-900); }
.sh-more > summary small { font-size: 13px; color: var(--grey-500); }
.sh-more > summary .chev { width: 18px; height: 18px; color: var(--grey-400); transition: transform var(--d2); }
.sh-more[open] > summary .chev { transform: rotate(180deg); }
.sh-more[open] { padding-bottom: 12px; }
.sh-more .lpe-tabs { margin: 0 12px 12px; }
.sh-more .note { padding: 0 18px 8px; }
.sh-stats { margin: 0 12px 10px; }
.lpe-card.sh-basic { padding: 2px 0 18px; }
.lpe-card.sh-more { padding: 0; }
.lpe-card.sh-more[open] { padding-bottom: 12px; }
.sh-more #lpeBody { padding: 0 12px; }
#fdDetail { flex: 1; display: flex; flex-direction: column; }
.fd-view.white { padding-bottom: 0; }
.fd-rows .badge, .mo-badges .badge, .sh-basic .badge { display: inline-flex; align-items: center; gap: 2px; }
.fd-rows .badge svg, .mo-badges .badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.fd-rows > div > span:last-child { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.lpe .sh-basic .inp { display: block; width: calc(100% - 40px); margin: 0 var(--gutter); }
.lpe .sh-photo .inp { width: 100%; margin: 8px 0 0; }
@media (min-width: 1024px) { .fd-pane .v2-cta { max-width: 640px; padding: 16px 44px 28px; } }
@media (min-width: 1024px) {
  .jd-view .qhead { padding: 8px 24px 16px; max-width: 760px; }
  .jd-view .jd-pass { margin: 0 24px 12px; max-width: 712px; }
  .jd-view .v2-cta { max-width: 760px; padding: 16px 24px 28px; }
  .jd-view .jd-who { background: var(--white); box-shadow: 0 0 0 1px var(--grey-150); }
  .jd-view .jd-h1 { font-size: 24px; }
}
.empty-go { margin-top: 20px; display: flex; justify-content: center; }
.empty-go .btn { padding: 0 28px; }

.nw { white-space: nowrap; }
/* 일 찾기: 마지막 카드가 [+ 일 넘기기] 버튼에 가리지 않게 목록 아래 여유 (휴대폰·PC) */
.fd-col { padding-bottom: 96px; }

/* ───── 내 가게 (2026-10-22 개편): 내 링크 · 시공 사진 보이기 ───── */
.sh-link { display: grid; gap: 12px; }
.sh-link-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sh-link-u { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; color: var(--grey-900); }
.sh-link-u b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-link-u svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--brand); }
.sh-tl { flex-shrink: 0; border: 0; background: none; padding: 6px 2px; font: inherit; font-size: 14px; font-weight: 600; color: var(--grey-600); cursor: pointer; }
.sh-zero { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--grey-800); }
.sh-zero svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--brand); }
.sh-zero b { color: var(--brand); }
.sh-link .note, .sh-cases .note { padding: 0; font-size: 13px; color: var(--grey-500); line-height: 1.5; }
.sh-h small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--grey-500); }
.sh-cases { display: grid; gap: 12px; }
.sh-empty { display: grid; gap: 4px; font-size: 15px; font-weight: 600; color: var(--grey-800); }
.sh-empty small { font-size: 13.5px; font-weight: 500; color: var(--grey-500); }
.sh-ph { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sh-pi { display: grid; gap: 8px; }
.sh-pi.off .sh-pair { opacity: .45; }
.sh-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 14px; overflow: hidden; background: var(--grey-150); }
.sh-th { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--grey-100); }
.sh-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-th i { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 10px; background: rgba(25,31,40,.72); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; }
.sh-th.none i { background: var(--grey-400); }
.sh-pm { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-pm > span { display: grid; min-width: 0; }
.sh-pm b { font-size: 14.5px; }
.sh-pm small { font-size: 12.5px; color: var(--grey-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 시공 전·후 두 칸 (일 완료 [사진 올리기]) */
.pp-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--gutter); }
.pp-slot { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 3 / 4; padding: 10px; border: 1.5px dashed var(--grey-300); border-radius: 16px; background: var(--grey-50); font: inherit; color: var(--grey-700); cursor: pointer; overflow: hidden; }
.pp-slot b { font-size: 16px; }
.pp-slot small { font-size: 12.5px; color: var(--grey-500); }
.pp-plus svg { width: 28px; height: 28px; color: var(--grey-400); }
.pp-slot.on { border: 0; padding: 0; align-content: end; color: #fff; }
.pp-slot.on img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-slot.on b, .pp-slot.on small { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.5); color: #fff; }
.pp-slot.on small { margin-bottom: 10px; }
.pp-slot.on::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.55)); }
.pp-hint { display: flex; gap: 6px; align-items: flex-start; margin: 12px var(--gutter) 0; padding: 10px 12px; border-radius: 12px; background: var(--brand-weak); font-size: 13.5px; line-height: 1.5; color: var(--grey-800); }
.pp-hint svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--brand); }

/* ═════ 채팅 (대화 #/talk/:id · 일 상세 [대화] · 내 일 빨간 점 · 알림 종) — screens/talk.js, 서버 src/chat.js ═════
   말풍선: 내 글 = 말끔 파랑 오른쪽 · 상대 = 연회색 왼쪽 · 시스템 줄 = 가운데 작은 회색. 등장 애니메이션 없음 */
.tk-dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--red, #F04452); vertical-align: 3px; }
.tk-btn { position: relative; gap: 4px; }
.tk-btn .tk-dot { position: absolute; top: 5px; right: 6px; margin: 0; }
.jd-acts, .jd-who > .jd-acts { display: inline-flex; grid-auto-flow: column; gap: 6px; flex-shrink: 0; }
.od-from .tk-btn { margin-top: 8px; }
.tk-role { flex-shrink: 0; padding: 1px 6px; border-radius: 6px; background: var(--grey-100); color: var(--grey-600); font-size: 11.5px; font-style: normal; font-weight: 700; }
.tk-role.gave { background: var(--brand-weak); color: var(--brand); }
.jd-st .tk-role { margin-left: 6px; }
.tk-tile { position: relative; display: block; width: 44px; }
.tk-tile > .tk-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; margin: 0; box-shadow: 0 0 0 2px var(--white); }
.v2-bell { position: relative; }
.tk-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red, #F04452); color: #fff; font-size: 12px; font-weight: 700; font-style: normal; }
.tk-n.bell { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
.tk-n[hidden] { display: none; }
.fd-talk { margin-top: 16px; }
.fd-talk > span { min-width: 0; display: flex; align-items: center; gap: 6px; }
.fd-talk small { margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--grey-500); }
/* 알림 종 시트 */
.tk-bell { display: grid; margin: 0 var(--gutter) 4px; }
.tk-bell-h { padding: 0 0 6px; font-size: 13px; color: var(--grey-500); }
.tk-bell-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 12px 0; text-align: left; border-top: 1px solid var(--grey-100); }
.tk-bell-row:first-of-type { border-top: 0; }
.tk-bell-row .l { min-width: 0; display: grid; gap: 2px; }
.tk-bell-row .l b { font-size: 15.5px; font-weight: 700; color: var(--grey-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-bell-row .l b small { font-weight: 500; color: var(--grey-500); font-size: 13px; }
.tk-bell-row .l > span { font-size: 14px; color: var(--grey-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-bell-row .r { display: grid; justify-items: end; gap: 4px; font-size: 12px; color: var(--grey-500); }
/* 대화 화면 */
.view.tk-view { min-height: 100%; padding-bottom: 0; }
.tk-nav { gap: 6px; box-shadow: 0 1px 0 var(--grey-150); }
.tk-who { min-width: 0; display: grid; line-height: 1.3; }
.tk-who b { font-size: 16.5px; font-weight: 700; color: var(--grey-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-who small { font-size: 12.5px; color: var(--grey-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-call { flex-shrink: 0; margin-right: 4px; }
.tk-log { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; }
.tk-day { display: flex; justify-content: center; margin: 8px 0 4px; }
.tk-day span { padding: 3px 10px; border-radius: 10px; background: var(--grey-100); font-size: 12px; color: var(--grey-600); }
.tk-sys { align-self: center; max-width: 88%; margin: 4px 0; padding: 0 8px; font-size: 13px; line-height: 1.45; color: var(--grey-500); text-align: center; }
.tk-m { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.tk-m time { flex-shrink: 0; font-size: 11px; color: var(--grey-500); padding-bottom: 2px; }
.tk-m.tk-me { flex-direction: row-reverse; align-self: flex-end; }
.tk-m.tk-you { align-self: flex-start; }
.tk-b { max-width: min(76vw, 420px); padding: 9px 13px; border-radius: 18px; font-size: 15.5px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; white-space: normal; }
.tk-m.tk-me .tk-b { background: var(--brand); color: var(--white); border-bottom-right-radius: 6px; }
.tk-m.tk-you .tk-b { background: var(--grey-100); color: var(--grey-900); border-bottom-left-radius: 6px; }
.tk-ph img { display: block; max-width: min(62vw, 260px); max-height: 320px; border-radius: 14px; object-fit: cover; background: var(--grey-100); }
.tk-foot { position: sticky; bottom: 0; z-index: 6; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--white); box-shadow: 0 -1px 0 var(--grey-150); }
.tk-foot.off { padding-top: 12px; }
.tk-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0 4px 8px; font-size: 13px; line-height: 1.45; color: var(--grey-600); }
.tk-foot.off .tk-hint { margin-bottom: 2px; justify-content: center; text-align: left; }
.tk-hint svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; color: var(--brand); }
.tk-comp { display: flex; align-items: flex-end; gap: 6px; }
.tk-comp textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 120px; padding: 10px 14px; border: 0; border-radius: 21px; background: var(--grey-100); font: inherit; font-size: 16px; line-height: 1.4; color: var(--grey-900); resize: none; }
.tk-comp textarea:focus { outline: 2px solid var(--brand-weak-strong); background: var(--white); }
.tk-cam { flex-shrink: 0; width: 42px; height: 42px; color: var(--grey-600); }
.tk-send { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: var(--white); }
.tk-send svg { width: 20px; height: 20px; }
.tk-send:active { background: var(--brand-strong); }
@media (min-width: 1024px) {
  .tk-log, .tk-foot { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
  .tk-log { padding: 20px 28px 12px; }
  .tk-foot { padding: 10px 20px 16px; border-radius: 16px 16px 0 0; }
  .tk-b { max-width: 460px; }
}

/* ───── 연락처 지킴이 (contact-guard.js · photo-cover.js) — 등장 애니메이션 없음 ───── */
.gd-msg { display: grid; gap: 4px; margin: 6px var(--gutter) 0; padding: 10px 12px; border-radius: 12px; background: var(--red-weak); color: var(--red); font-size: 13.5px; line-height: 1.5; font-weight: 600; }
.gd-msg[hidden] { display: none; }
.inp[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--red); }
.gd-re { justify-self: start; min-height: 32px; padding: 0; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--grey-700); text-decoration: underline; cursor: pointer; }
.gd-sent { color: var(--grey-700); font-weight: 500; }
.gd-msg small { font-weight: 500; color: var(--grey-700); }
.gd-ban { margin: 0 0 14px; padding: 16px; border-radius: 18px; background: var(--orange-weak); color: var(--grey-900); }
.gd-ban.stop { background: var(--red-weak); }
.gd-ban b { display: block; font-size: 16px; }
.gd-ban p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--grey-800); }
.gd-ban .btn { margin-top: 12px; }
.pp-cell { display: grid; gap: 6px; }
.pp-cover { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 12px; border: 0; background: var(--grey-100); font: inherit; font-size: 14.5px; font-weight: 700; color: var(--grey-800); cursor: pointer; }
.pp-cover svg { width: 18px; height: 18px; }
.om-guard { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--grey-100); font-size: 13.5px; line-height: 1.5; color: var(--grey-800); }
.om-guard[hidden] { display: none; }
.om-guard svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.od-mask { padding-left: 0; padding-right: 0; font-size: 13px; }
/* 사진 [가리기] 덮개 */
.cv { flex: 1; display: flex; flex-direction: column; min-height: 100%; background: #000; color: var(--white); }
.cv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 8px 8px 20px; font-size: 16px; }
.cv-top .ib { color: var(--white); }
.cv-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 12px; }
.cv-cv { display: block; touch-action: none; border-radius: 8px; cursor: crosshair; }
.cv-hint { margin: 10px 20px 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.78); text-align: center; }
.cv-bar { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.cv-bar .btn-grey { background: rgba(255,255,255,.14); color: var(--white); }
.cv-bar .btn-grey:disabled { opacity: .4; }
.cv-more { margin: -4px auto calc(12px + env(safe-area-inset-bottom)); min-height: 40px; background: none; border: 0; font: inherit; font-size: 14px; color: rgba(255,255,255,.8); text-decoration: underline; }
@media (min-width: 1024px) { .overlay > .cv { width: min(900px, 100%); height: min(820px, calc(100vh - 48px)); border-radius: 20px; overflow: hidden; } }
.gd-msg:not([hidden]) + .sh-note { display: none; } /* 안내가 뜨면 같은 말의 작은 안내는 숨긴다 */
/* 이용약관 동의 (#/start 첫 단계, src/terms.js) — 모두 동의 한 줄 + 필수 셋 */
.tm { padding: 0 var(--gutter); }
.tm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.tm-row label, .tm-row.tm-all { display: flex; align-items: center; gap: 12px; flex: 1; font-size: 16px; color: var(--grey-800); cursor: pointer; }
.tm-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); flex: none; }
.tm-row b { color: var(--brand); font-weight: 600; }
.tm-row a { font-size: 14px; color: var(--grey-600); text-decoration: underline; padding: 8px 0 8px 8px; }
.tm-all { justify-content: flex-start; margin-bottom: 4px; padding: 0 16px; border-radius: 14px; background: var(--grey-50); font-weight: 700; }
.tm-all span { font-weight: 700; color: var(--grey-900); }
.tm-dl { display: grid; gap: 4px; margin: -4px 0 8px 34px; padding: 10px 12px; border-radius: 10px; background: var(--grey-50); font-size: 13px; }
.tm-dl div { display: grid; grid-template-columns: 60px 1fr; gap: 8px; }
.tm-dl dt { color: var(--grey-600); } .tm-dl dd { margin: 0; color: var(--grey-800); }