/* 2026-09-29 슈아 · 헬덤 1판(왓츠앱 커뮤니티 결) — 필터 알약 · 리스트 시트 · 설정 줄 목록 · 알림 카드. 색은 헬덤 변수 그대로 */
.hp-filters{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hp-filters::-webkit-scrollbar{display:none}
.hp-pill{flex:none;min-height:32px;padding:0 13px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:999px;background:var(--paper,#fff);color:var(--ink-2,#55627a);font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap}
.hp-pill[aria-pressed=true]{border-color:var(--aqua-l,var(--hb-point,#D0DFF0));background:var(--aqua-x,var(--hb-light,#DEE9F5));color:var(--aqua-d,var(--hb-deep,#3E4360));font-weight:700}
.hp-pill.hp-plus{width:32px;padding:0;font-size:16px;color:var(--ink-2,#55627a)}
.hp-empty{display:grid;gap:4px;padding:26px 16px;text-align:center;color:var(--ink-3,#8b95a7)}
.hp-empty b{color:var(--ink,var(--hb-deep,#3E4360));font-size:13.5px}.hp-empty small{font-size:11.5px}
/* 시트(리스트 안내 · 리스트 고치기) — 런타임 .press-menu .sheet 위에 */
.press-menu .sheet.hp-sheet{gap:10px;max-height:min(84dvh,720px);overflow:auto;padding-top:8px}
.hp-sheet-head{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:6px}
.hp-sheet-head b{text-align:center;font-size:15px;color:var(--ink,var(--hb-deep,#3E4360))}
.press-menu .sheet .hp-x{min-height:36px;width:40px;padding:0;background:transparent;font-size:22px;color:var(--ink-2,#55627a)}
.press-menu .sheet .hp-ok{min-height:34px;padding:0 14px;border-radius:999px;background:var(--aqua-d,var(--hb-deep,#3E4360));color:#fff;font-weight:700}
.hp-field{display:grid;gap:6px;padding:6px 4px 0}.hp-field span{font-size:11px;color:var(--ink-3,#8b95a7)}
.hp-field input{min-height:44px;padding:0 14px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:14px;background:var(--bg,var(--hb-light,#DEE9F5));color:var(--ink,var(--hb-deep,#3E4360));font-size:14px}
.hp-cap{padding:8px 4px 0;font-size:11px;color:var(--ink-3,#8b95a7);letter-spacing:.04em}
.hp-pick{display:grid;gap:2px}
.hp-pick-row{display:flex;align-items:center;gap:12px;min-height:50px;padding:4px 8px;border-radius:12px}
.hp-pick-row .hp-av{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--aqua-x,var(--hb-light,#DEE9F5));color:var(--ink,var(--hb-deep,#3E4360));font-size:13px;font-weight:700}
.hp-pick-row b{flex:1;font-size:14px;color:var(--ink,var(--hb-deep,#3E4360));font-weight:500}
.hp-pick-row input{width:22px;height:22px;accent-color:var(--aqua-d,var(--hb-deep,#3E4360))}
.press-menu .sheet .hp-primary{min-height:48px;border-radius:999px;background:var(--aqua-d,var(--hb-deep,#3E4360));color:#fff;font-weight:700;text-align:center}
.press-menu .sheet .hp-danger{min-height:44px;background:transparent;color:#c2453f;text-align:center}
.hp-intro{display:grid;justify-items:center;gap:10px;padding:14px 8px 6px;text-align:center}
.hp-intro i{font-style:normal;font-size:30px;letter-spacing:6px;color:var(--aqua-d,var(--hb-deep,#3E4360))}
.hp-intro h3{margin:0;font-size:19px;color:var(--ink,var(--hb-deep,#3E4360))}
.hp-intro ul{display:grid;gap:12px;margin:6px 0 0;padding:0 8px;list-style:none;text-align:left;justify-self:stretch}
.hp-intro li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2,#55627a)}
.hp-intro li span{flex:none;width:26px;text-align:center;font-size:17px}
/* 설정 = 줄 목록 */
.hp-rows{display:grid;gap:12px}
.hp-group{display:grid;overflow:hidden;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:18px;background:var(--paper,#fff)}
.hp-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:54px;padding:8px 14px 8px 12px;border:0;border-top:1px solid var(--line,var(--hb-point,#D0DFF0));background:transparent;color:inherit;text-align:left;text-decoration:none;cursor:pointer}
.hp-group .hp-row:first-child{border-top:0}
.hp-row i{font-style:normal;font-size:18px;text-align:center;color:var(--ink-2,#55627a)}
.hp-row b{display:block;font-size:14.5px;font-weight:600;color:var(--ink,var(--hb-deep,#3E4360))}
.hp-row small{display:block;margin-top:1px;font-size:11px;color:var(--ink-3,#8b95a7)}
.hp-row em{font-style:normal;color:var(--ink-3,#8b95a7);font-size:18px;transition:transform .18s}
.hp-row[aria-expanded=true]{background:var(--aqua-x,var(--hb-light,#DEE9F5))}.hp-row[aria-expanded=true] em{transform:rotate(90deg)}
.hp-group .setting-card.hp-card{border:0;border-top:1px dashed var(--line,var(--hb-point,#D0DFF0));border-radius:0;background:var(--bg,var(--hb-light,#DEE9F5))}
.hp-secondary{margin-top:10px;min-height:40px;padding:0 16px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:999px;background:var(--paper,#fff);color:var(--aqua-d,var(--hb-deep,#3E4360));font-weight:700;cursor:pointer}
@media(max-width:699px){.hp-rows{padding:6px 12px 0}.hp-filters{padding:6px 16px 4px}}
/* ── 2판(카톡 AI 프로필 결 → 헬디) — 프로필 창 ── */
.profile-topbar #hpProfileMore{min-width:34px;padding:4px 8px;font-size:16px;line-height:1}
.hp-note-bubble{position:relative;display:inline-block;max-width:78%;margin:0 0 8px;padding:7px 12px;border:0;border-radius:16px;background:rgba(255,255,255,.94);color:var(--ink,var(--hb-deep,#3E4360));font-size:12.5px;font-weight:600;line-height:1.3;box-shadow:0 4px 14px rgba(var(--hb-deep-rgb,62,67,96),.12);cursor:pointer;text-align:left}
.hp-note-bubble::after{content:"";position:absolute;left:22px;bottom:-6px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
.hp-note-bubble.empty{color:var(--ink-3,#8b95a7);font-weight:500;background:rgba(255,255,255,.72)}
.hp-ai-btn{width:100%;min-height:44px;margin-top:14px;border:1px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(255,255,255,.34);color:var(--ink,var(--hb-deep,#3E4360));font-size:13.5px;font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}
.profile-stage[data-background=night] .hp-ai-btn{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.14)}
.hp-prow{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:8px;overflow:hidden;border:1px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(255,255,255,.7)}
.hp-prow button{min-height:40px;border:0;background:rgba(255,255,255,.34);color:var(--ink,var(--hb-deep,#3E4360));font-size:12.5px;font-weight:600;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.profile-stage[data-background=night] .hp-prow{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.35)}
.profile-stage[data-background=night] .hp-prow button{color:#fff;background:rgba(255,255,255,.14)}
.profile-dialog .profile-actions{margin-top:10px}
.profile-dialog.editing .hp-ai-btn,.profile-dialog.editing .hp-prow,.profile-dialog.editing .hp-note-bubble{display:none}
/* 창 안 시트 */
.hp-dsheet{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end;background:rgba(var(--hb-deep-rgb,62,67,96),.28)}
.hp-dbox{width:100%;max-height:92%;overflow:auto;display:grid;gap:10px;align-content:start;padding:8px 14px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--paper,#fff);box-shadow:0 -10px 40px rgba(var(--hb-deep-rgb,62,67,96),.18)}
.hp-dhead{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;min-height:40px}
.hp-dhead b{text-align:center;font-size:15px;color:var(--ink,var(--hb-deep,#3E4360))}
.hp-dback{width:40px;min-height:36px;border:0;background:transparent;font-size:24px;color:var(--ink-2,#55627a);cursor:pointer}
.hp-hint{margin:-4px 2px 0;color:var(--ink-3,#8b95a7);font-size:12px;line-height:1.45}
.hp-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hp-tile{display:grid;gap:3px;justify-items:start;padding:10px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:16px;background:var(--bg,var(--hb-light,#DEE9F5));text-align:left;cursor:pointer}
.hp-tile b{font-size:13px;color:var(--ink,var(--hb-deep,#3E4360))}.hp-tile small{font-size:11px;color:var(--ink-3,#8b95a7);line-height:1.35}
.hp-tile-pv{display:grid;place-items:center;width:100%;aspect-ratio:1.35;margin-bottom:4px;border-radius:12px;background:var(--aqua-x,var(--hb-light,#DEE9F5));font-size:30px}
.hp-tile-photo .hp-tile-pv{background:linear-gradient(135deg,var(--hb-point,#D0DFF0),#fff)}
.hp-tile.hp-slot{border:1.5px dashed var(--hb-soft,#A9B8D6);background:var(--hb-light,#DEE9F5);cursor:default}.hp-tile.hp-slot .hp-tile-pv{background:var(--hb-light,#DEE9F5)}
.hp-made{display:flex;gap:12px;align-items:center;padding:4px 2px}.hp-made:empty{display:none}
.hp-made .hp-pv,.hp-phone .hp-pv{display:grid;place-items:center;overflow:hidden}
.hp-made .hp-pv{width:56px;height:70px;border-radius:14px;background:var(--aqua-x,var(--hb-light,#DEE9F5))}
.hp-made .hp-pv canvas,.hp-made .hp-pv img,.hp-phone .hp-pv canvas,.hp-phone .hp-pv img,.hp-phone>img{width:100%;height:100%;object-fit:contain}
.hp-made b{display:block;font-size:13px;color:var(--ink,var(--hb-deep,#3E4360))}.hp-made small{font-size:11px;color:var(--ink-3,#8b95a7)}
.hp-making,.hp-done{display:grid;justify-items:center;gap:4px;padding:10px 0 4px;text-align:center}
.hp-making b,.hp-done b{font-size:17px;color:var(--ink,var(--hb-deep,#3E4360))}.hp-making small,.hp-done small{font-size:12px;color:var(--ink-3,#8b95a7)}
.hp-spin{width:22px;height:22px;margin-bottom:6px;border:3px solid var(--aqua-l,var(--hb-point,#D0DFF0));border-top-color:var(--aqua-d,var(--hb-deep,#3E4360));border-radius:50%;animation:hpspin 1s linear infinite}
@keyframes hpspin{to{transform:rotate(360deg)}}
.hp-phone{width:150px;height:200px;margin-top:12px;padding:10px 6px;border-radius:22px;background:#111;overflow:hidden}.hp-phone.big{width:180px;height:240px}
.hp-phone>img,.hp-phone .hp-pv{width:100%;height:100%;border-radius:12px;background:#f5f5f5}
.hp-where{display:grid;gap:6px}
.hp-where-row{display:grid;grid-template-columns:32px 1fr 24px;align-items:center;gap:10px;min-height:52px;padding:6px 10px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:14px;background:var(--paper,#fff);text-align:left;color:inherit;cursor:pointer}
.hp-where-row.on{border-color:var(--aqua-l,var(--hb-point,#D0DFF0));background:var(--aqua-x,var(--hb-light,#DEE9F5));cursor:default}
.hp-where-row .hp-ic{font-size:18px;text-align:center}.hp-where-row b{display:block;font-size:13.5px;color:var(--ink,var(--hb-deep,#3E4360))}.hp-where-row small{font-size:11px;color:var(--ink-3,#8b95a7)}
.hp-where-row i{font-style:normal;color:var(--aqua-d,var(--hb-deep,#3E4360));text-align:center}
.hp-dbox .hp-primary{min-height:46px;border:0;border-radius:999px;background:var(--aqua-d,var(--hb-deep,#3E4360));color:#fff;font-weight:700;cursor:pointer}
.hp-dbox .hp-danger{min-height:40px;border:0;background:transparent;color:#c2453f;cursor:pointer}
.hp-mitem{min-height:46px;padding:0 12px;border:0;border-radius:12px;background:var(--bg,var(--hb-light,#DEE9F5));color:var(--ink,var(--hb-deep,#3E4360));font-size:13.5px;text-align:left;cursor:pointer}
/* 24시 상태 시트 */
.hp-note{display:grid;gap:10px}
.hp-cloud{padding:14px;border-radius:22px;background:var(--aqua-x,var(--hb-light,#DEE9F5))}
.hp-cloud textarea{width:100%;border:0;background:transparent;resize:none;color:var(--ink,var(--hb-deep,#3E4360));font-size:15px;line-height:1.4;outline:none;text-align:center}
.hp-aud{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--ink-2,#55627a)}.hp-aud small{color:var(--ink-3,#8b95a7)}.hp-aud label{display:flex;gap:5px;align-items:center}
/* ── 3판(헬디 스케줄 봇 · 생일 카드 · 답장 추천) ── */
.hp-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 12px 2px;border-top:1px dashed var(--line,var(--hb-point,#D0DFF0));background:var(--paper,#fff)}
.hp-chips::-webkit-scrollbar{display:none}
.hp-chip{flex:none;min-height:32px;padding:0 12px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:999px;background:var(--bg,var(--hb-light,#DEE9F5));color:var(--ink,var(--hb-deep,#3E4360));font-size:12.5px;cursor:pointer;white-space:nowrap}
.hp-chip.hp-chip-heldy{border-color:var(--hb-point,#D0DFF0);background:var(--hb-light,#DEE9F5);color:var(--hb-mid,#6B7290);font-weight:700}
/* 봇 창 */
.hb-wrap{position:fixed;inset:0;z-index:85;display:flex;align-items:flex-end;background:rgba(var(--hb-deep-rgb,62,67,96),.28)}
.hb-box{width:100%;height:min(88dvh,760px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-radius:22px 22px 0 0;background:var(--hb-light,#DEE9F5);overflow:hidden;box-shadow:0 -10px 40px rgba(var(--hb-deep-rgb,62,67,96),.18)}
@media(min-width:700px){.hb-wrap{align-items:center;justify-content:center}.hb-box{width:min(440px,94vw);border-radius:22px}}
.hb-head{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;min-height:48px;padding:0 6px;background:var(--paper,#fff);border-bottom:1px solid var(--line,var(--hb-point,#D0DFF0))}
.hb-head b{text-align:center;font-size:15px;color:var(--ink,var(--hb-deep,#3E4360))}
.hb-x{width:40px;min-height:40px;border:0;background:transparent;font-size:24px;color:var(--ink-2,#55627a);cursor:pointer}
.hb-log{overflow:auto;padding:14px 12px;display:grid;gap:12px;align-content:start}
.hb-row{display:flex;gap:8px;align-items:flex-start}.hb-row.me{justify-content:flex-end}
.hb-av{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:14px;background:#fff;color:var(--hb-mid,#6B7290);font-size:16px;box-shadow:0 2px 8px rgba(var(--hb-deep-rgb,62,67,96),.08)}
.hb-stack{display:grid;gap:6px;max-width:86%}.hb-stack small{font-size:11px;color:var(--ink-3,#8b95a7)}
.hb-bubble{padding:10px 12px;border-radius:4px 16px 16px 16px;background:#fff;color:var(--ink,var(--hb-deep,#3E4360));font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:keep-all;box-shadow:0 1px 3px rgba(var(--hb-deep-rgb,62,67,96),.06)}
.hb-bubble.me{border-radius:16px 4px 16px 16px;background:var(--aqua-x,var(--hb-light,#DEE9F5));max-width:80%}
.hb-btns{display:grid;gap:6px}
.hb-btn{min-height:40px;padding:0 12px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:12px;background:#fff;color:var(--ink,var(--hb-deep,#3E4360));font-size:13px;text-align:center;cursor:pointer}
.hb-btn:active{background:var(--aqua-x,var(--hb-light,#DEE9F5))}
.hb-inline{display:flex;gap:6px;align-items:center}.hb-inline input{flex:1;min-height:40px;padding:0 10px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:12px;background:#fff;font-size:14px}
.hb-msgs{display:grid;gap:6px}
.hb-msg{padding:10px 12px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:14px;background:#fff;color:var(--ink,var(--hb-deep,#3E4360));font-size:12.5px;line-height:1.5;text-align:left;cursor:pointer;word-break:keep-all}
.hb-msg.on{border-color:var(--aqua-d,var(--hb-deep,#3E4360));background:var(--aqua-x,var(--hb-light,#DEE9F5))}
.hb-form{display:grid;grid-template-columns:1fr 44px;gap:8px;padding:8px 10px calc(10px + env(safe-area-inset-bottom));background:var(--paper,#fff);border-top:1px solid var(--line,var(--hb-point,#D0DFF0))}
.hb-form input{min-height:42px;padding:0 14px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:999px;background:var(--bg,var(--hb-light,#DEE9F5));font-size:14px}
.hb-form button{min-height:42px;border:0;border-radius:999px;background:var(--aqua-d,var(--hb-deep,#3E4360));color:#fff;font-size:15px;cursor:pointer}
/* ── 4판(프로필 사진 · 이름 · 링) ── */
.hp-avwrap{position:relative;display:inline-block}
.hp-photo-btn{position:absolute;right:-6px;bottom:-4px;width:30px;height:30px;border:2px solid #fff;border-radius:50%;background:var(--aqua-d,var(--hb-deep,#3E4360));color:#fff;font-size:14px;line-height:1;display:grid;place-items:center;box-shadow:0 3px 10px rgba(var(--hb-deep-rgb,62,67,96),.22);cursor:pointer;z-index:2}
.profile-dialog.editing .hp-photo-btn{display:none}
.avatar.hp-ring-gold{box-shadow:0 0 0 2px var(--gold,#C9A961)!important}
.avatar.hp-ring-aqua,#profileAvatar .avatar.hp-ring-aqua,#myCard .avatar.hp-ring-aqua{box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--held-ring,var(--hb-soft,#A9B8D6)),0 0 10px 2px color-mix(in srgb,var(--held-ring,var(--hb-soft,#A9B8D6)) 45%,transparent)}/* 33판: 링 색 = 설계실 「아바타 링」(color.user.ring · color.heldom.ring) */ /* 17판: 아쿠아 링 = 통일 색(24시 띠·대화창 머리와 같음) · !important 빼서 스토리 반짝임 살림 */
.avatar.hp-ring-none{box-shadow:none!important}
.avatar.hp-ring-story{box-shadow:0 0 0 3px transparent!important;background-clip:padding-box;outline:3px solid transparent;position:relative}
.avatar.hp-ring-story::before{content:"";position:absolute;inset:-5px;border-radius:inherit;padding:3px;background:conic-gradient(#f6d24e,#ff7a59,#c96bd8,var(--hb-soft,#A9B8D6),var(--hb-deep,#3E4360),#f6d24e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.avatar img.hp-photo{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.hp-pv-big{width:110px;height:110px;margin:4px auto 10px;display:grid;place-items:center;overflow:hidden;border-radius:36px;background:var(--aqua-x,var(--hb-light,#DEE9F5));color:var(--ink,var(--hb-deep,#3E4360));font-size:28px;font-weight:700}
.hp-pv-big img{width:100%;height:100%;object-fit:cover}
.hp-rename{display:grid;grid-template-columns:1fr auto;gap:8px;padding:2px 2px 6px}
.hp-rename input{min-height:44px;padding:0 12px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:12px;background:var(--bg,var(--hb-light,#DEE9F5));font:inherit;font-size:14px}
.hp-rename .hp-primary{min-height:44px;padding:0 16px}
.hp-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(118,118,128,.14)}
.hp-seg button{min-width:72px;height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink,var(--hb-deep,#3E4360));font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.hp-seg button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.14);font-weight:800}
.hp-rings{display:flex;flex-wrap:wrap;gap:8px}
.hp-ringchip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px 0 8px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:999px;background:var(--paper,#fff);color:var(--ink,var(--hb-deep,#3E4360));font:inherit;font-size:13px;cursor:pointer}
.hp-ringchip.on{border-color:var(--aqua-d,var(--hb-deep,#3E4360));background:var(--aqua-x,var(--hb-light,#DEE9F5));font-weight:700}
.hp-ringdot{width:22px;height:22px;border-radius:50%;background:var(--aqua-x,var(--hb-light,#DEE9F5));display:inline-block;position:relative}
.hp-ringdot.hp-ring-gold{box-shadow:0 0 0 2px var(--gold,#C9A961)}.hp-ringdot.hp-ring-aqua{box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--held-ring,var(--hb-soft,#A9B8D6))}.hp-ringdot.hp-ring-none{box-shadow:0 0 0 1px var(--line,var(--hb-point,#D0DFF0))}
.hp-ringdot.hp-ring-story{background:conic-gradient(#f6d24e,#ff7a59,#c96bd8,var(--hb-soft,#A9B8D6),var(--hb-deep,#3E4360),#f6d24e)}
.hp-cap small{font-weight:400;letter-spacing:0;margin-left:6px}
/* ── 5판(이웃 소식창 따로 · 카톡 친구|소식) ── */
.hp-ftabs{display:flex;gap:6px;padding:4px 0 10px}
.hp-ftabs button{min-height:32px;padding:0 16px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:999px;background:var(--paper,#fff);color:var(--ink-2,#55627a);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.hp-ftabs button[aria-pressed=true]{background:var(--ink,var(--hb-deep,#3E4360));border-color:var(--ink,var(--hb-deep,#3E4360));color:#fff;font-weight:700}
#friendsView.hp-news-on>*:not(.hp-ftabs):not(#hpNewsView){display:none!important}
#friendsView:not(.hp-news-on) #hpNewsView{display:none}
#friendsView:not(.hp-news-on) #friendNews{display:none!important} /* 소식 띠는 「소식」 화면으로 옮김 */
.hp-news{display:grid;gap:4px}
.hp-uprow .news-person{border:0;background:transparent;font:inherit;cursor:pointer}
.hp-bbox{display:grid;gap:6px;margin:0 0 10px}
.hp-bempty,.hp-brow{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:16px;background:var(--paper,#fff)}
.hp-bcake{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:14px;background:#fdecef;font-size:20px}
.hp-bempty span:last-child b,.hp-bname b{display:block;font-size:14px;color:var(--ink,var(--hb-deep,#3E4360))}
.hp-bempty small,.hp-bname small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-3,#8b95a7)}
.hp-bname{flex:1;min-width:0}
.hp-bcard{min-height:34px;padding:0 12px;border:1px solid #f1c0c8;border-radius:999px;background:#fff;color:#c2453f;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.hp-ncard{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:18px;background:var(--paper,#fff)}
.hp-nhead{display:flex;align-items:center;gap:10px}
.hp-nhead .avatar{width:44px;height:44px;border-radius:16px;flex:none}
.hp-nwho{flex:1;min-width:0}.hp-nwho b{display:block;font-size:14px;color:var(--ink,var(--hb-deep,#3E4360))}.hp-nwho small{display:block;font-size:11.5px;color:var(--ink-3,#8b95a7)}
.hp-nchat{min-height:32px;padding:0 12px;border:1px solid var(--line,var(--hb-point,#D0DFF0));border-radius:999px;background:var(--bg,var(--hb-light,#DEE9F5));color:var(--aqua-d,var(--hb-deep,#3E4360));font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.hp-nnote{padding-left:54px}
.hp-nbubble{position:relative;display:inline-block;padding:7px 12px;border-radius:14px;background:var(--aqua-x,var(--hb-light,#DEE9F5));color:var(--ink,var(--hb-deep,#3E4360));font-size:13px;line-height:1.4}
.hp-nbubble::before{content:"";position:absolute;left:14px;top:-5px;width:10px;height:10px;background:inherit;transform:rotate(45deg);border-radius:2px}
.hp-nhead-line{margin:0 0 0 54px;font-size:13px;color:var(--ink-2,#55627a);line-height:1.45}
@media(max-width:699px){.hp-ftabs{padding:8px 16px 6px}.hp-news{padding:0 12px 24px}.hp-news .section-title{padding-left:4px}}
/* ── 6판(알림 빛 = 아쿠아·은빛 · 빨강 ✗) ── */
.rail button b#unreadBadge,.rail button b{background:linear-gradient(135deg,var(--hb-light,#DEE9F5) 0%,var(--hb-soft,#A9B8D6) 48%,var(--hb-point,#D0DFF0) 100%)!important;color:var(--hb-deep,#3E4360)!important;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 10px rgba(var(--hb-soft-rgb,169,184,214),.75)!important;animation:hpGlow 1.8s ease-in-out infinite}
.list-item .unread{background:linear-gradient(135deg,var(--hb-light,#DEE9F5),var(--hb-soft,#A9B8D6) 50%,var(--hb-point,#D0DFF0))!important;color:var(--hb-deep,#3E4360)!important;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 8px rgba(var(--hb-soft-rgb,169,184,214),.7)}
body.hp-has-unread .rail button[data-tab=chats] i{filter:drop-shadow(0 0 6px rgba(var(--hb-soft-rgb,169,184,214),.95)) drop-shadow(0 0 14px rgba(200,214,222,.7));animation:hpGlowIco 1.8s ease-in-out infinite}
@keyframes hpGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 6px rgba(var(--hb-soft-rgb,169,184,214),.55)}50%{box-shadow:0 0 0 1px rgba(255,255,255,1),0 0 16px rgba(var(--hb-soft-rgb,169,184,214),1),0 0 26px rgba(200,214,222,.6)}}
@keyframes hpGlowIco{0%,100%{filter:drop-shadow(0 0 4px rgba(var(--hb-soft-rgb,169,184,214),.7))}50%{filter:drop-shadow(0 0 10px rgba(var(--hb-soft-rgb,169,184,214),1)) drop-shadow(0 0 18px rgba(200,214,222,.8))}}
@media(prefers-reduced-motion:reduce){.rail button b,body.hp-has-unread .rail button[data-tab=chats] i{animation:none}}
#hpPushRow small{display:block}#hpPushRow .hp-push-state{color:var(--aqua-d,var(--hb-deep,#3E4360));font-weight:700;margin-top:2px}

/* ── 7판(나에게 시험 알림) ── */
#hpPushTestRow small{display:block}#hpPushTestRow .hp-push-test-state{color:var(--aqua-d,var(--hb-deep,#3E4360));font-weight:700;margin-top:2px;min-height:1em}
.hp-push-test-btn{flex:none;border:1px solid rgba(var(--hb-soft-rgb,169,184,214),.7);background:linear-gradient(135deg,var(--hb-light,#DEE9F5),var(--hb-point,#D0DFF0));color:var(--hb-deep,#3E4360);border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;cursor:pointer}
.hp-push-test-btn:disabled{opacity:.55;cursor:default}

/* ── 8판(나와의 채팅 줄) ── */
#hpSelfRow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:6px}
#hpSelfRow .hp-self-ico{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:20px;color:var(--hb-deep,#3E4360);background:linear-gradient(135deg,var(--hb-light,#DEE9F5),var(--hb-point,#D0DFF0) 60%,var(--hb-point,#D0DFF0));box-shadow:0 0 0 1px rgba(255,255,255,.9),0 2px 8px rgba(var(--hb-soft-rgb,169,184,214),.35)}
#hpSelfRow .hp-self-txt{display:flex;flex-direction:column;gap:2px;min-width:0}#hpSelfRow b{font-size:14px}#hpSelfRow small{color:var(--ink-soft,#6b7a90);font-size:12px}
#hpSelfRow:disabled{opacity:.6}

/* ── 11판(글자 대신 도비 아이콘) ── */
.avatar img.hp-dovee{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ── 12판(카톡·왓츠앱 1-7) ── */
.hp-readline{color:var(--aqua-d,var(--hb-deep,#3E4360))!important;font-weight:700;letter-spacing:.02em}
.hp-reply-btn{border:0;background:transparent;color:#8aa0b4;font-size:13px;line-height:1;padding:0 4px;cursor:pointer;opacity:.55}.message:hover .hp-reply-btn,.message:active .hp-reply-btn{opacity:1}
.hp-reply-chip{display:flex;align-items:center;gap:8px;margin:0 12px 6px;padding:8px 10px;border-radius:12px;background:linear-gradient(135deg,var(--hb-light,#DEE9F5),var(--hb-light,#DEE9F5));border:1px solid rgba(var(--hb-soft-rgb,169,184,214),.6);font-size:12px}
.hp-reply-chip b{color:var(--aqua-d,var(--hb-deep,#3E4360));white-space:nowrap}.hp-reply-chip span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4a5378}.hp-reply-x{border:0;background:transparent;font-size:14px;color:#8aa0b4;cursor:pointer}
.hp-quote{display:block;margin:-2px -2px 6px;padding:6px 8px;border-left:3px solid rgba(var(--hb-deep-rgb,62,67,96),.6);border-radius:8px;background:rgba(255,255,255,.55);font-size:12px;line-height:1.35;cursor:pointer}
.message.mine .hp-quote{background:rgba(255,255,255,.35)}.hp-quote b{display:block;color:var(--aqua-d,var(--hb-deep,#3E4360));font-size:11px}.hp-quote span{color:#4a5378;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.hp-flash{animation:hpFlash 1.2s ease}@keyframes hpFlash{0%{background:rgba(var(--hb-soft-rgb,169,184,214),.35)}100%{background:transparent}}
.bubble.hp-media{padding:4px;background:transparent!important;box-shadow:none!important}
.hp-img{display:block;max-width:min(240px,70vw);max-height:320px;width:auto;height:auto;border-radius:14px;object-fit:cover;cursor:zoom-in;box-shadow:0 2px 10px rgba(var(--hb-deep-rgb,62,67,96),.12)}
.hp-file{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--hb-point,#D0DFF0);text-decoration:none;color:var(--hb-deep,#3E4360);max-width:260px}.hp-file i{font-style:normal;font-size:20px}.hp-file span{display:flex;flex-direction:column;min-width:0}.hp-file b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hp-file small{color:#8aa0b4;font-size:11px}
.hp-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(var(--hb-deep-rgb,62,67,96),.88);display:grid;place-items:center;cursor:zoom-out}.hp-lightbox img{max-width:96vw;max-height:92vh;border-radius:12px}
.plus-drawer .hp-attach{position:relative}.plus-drawer .hp-attach input{display:none}
.hp-room-marks{font-size:11px;letter-spacing:-1px;margin-right:4px;opacity:.85}.hp-room-marks .hp-at{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--held-ring,var(--hb-soft,#A9B8D6));color:#fff;font:700 10px/1 Pretendard,sans-serif;font-style:normal;letter-spacing:0;vertical-align:middle;margin-left:2px}/* 35판: @ 언급 배지 */.list-item.hp-pinned{background:linear-gradient(90deg,rgba(var(--hb-light-rgb,222,233,245),.7),transparent)}.list-item.hp-muted .unread{background:var(--hb-point,#D0DFF0)!important;box-shadow:none!important;animation:none!important;color:#4a5378!important}
.hp-link{display:flex;gap:10px;margin-top:6px;max-width:280px;border:1px solid var(--hb-point,#D0DFF0);border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;color:var(--hb-deep,#3E4360)}.hp-link img{width:76px;height:76px;object-fit:cover;flex:none}.hp-link span{display:flex;flex-direction:column;gap:2px;padding:8px 10px;min-width:0}.hp-link b{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hp-link small{font-size:11px;color:#6b7a90;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hp-link i{font-style:normal;font-size:10px;color:#8aa0b4;letter-spacing:.04em}
.hp-status{margin:2px 2px 10px}.hp-status-title{display:block;font-size:11px;letter-spacing:.08em;color:var(--aqua-d,var(--hb-deep,#3E4360));margin:0 4px 6px}.hp-status-row{display:flex;gap:12px;overflow-x:auto;padding:2px 4px 6px;scrollbar-width:none}.hp-status-row::-webkit-scrollbar{display:none}
.hp-status-item{flex:none;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;cursor:pointer;padding:0}.hp-status-item small{font-size:11px;color:#4a5378;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-status-ring{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--hb-soft,#A9B8D6),var(--hb-point,#D0DFF0),var(--hb-light,#DEE9F5),var(--hb-soft,#A9B8D6));padding:2px}.hp-status-ring .avatar{width:50px;height:50px;border-radius:50%;border:2px solid #fff}

/* ── 13판(일상과 신앙 스티커 16종 · 무료) ── */
.sticker-drawer .hp-stk-head{flex:none;align-self:center;writing-mode:vertical-rl;font-size:9px;letter-spacing:.14em;color:var(--aqua-d,var(--hb-deep,#3E4360));padding:0 2px 0 6px;border-left:1px solid var(--hb-point,#D0DFF0);margin-left:4px}
.sticker-drawer button.hp-stk{width:58px;height:58px;padding:3px;border-radius:16px;background:#fff}.sticker-drawer button.hp-stk img{width:100%;height:100%;object-fit:contain;display:block}
.bubble.sticker img.hp-sticker{width:120px;height:120px;object-fit:contain;display:block}/* 10-28 슈아 「카톡 실제 크기」: 360 원본 ÷ 3배 화면 = 120 */
@media(min-width:700px){.bubble.sticker img.hp-sticker{width:120px;height:120px}}

/* ── 14판(링 안 완성 미니미 = 반신 기본 · 전신 선택) ── */
.avatar img[src*="/api/minimi/avatar"]{object-fit:cover;object-position:50% 8%;transform:scale(1.85);transform-origin:50% 12%;image-rendering:auto}
body.hp-mm-full .avatar img[src*="/api/minimi/avatar"]{object-fit:contain;transform:none;object-position:50% 100%}
.hp-tile-room .hp-tile-pv{background:linear-gradient(135deg,var(--hb-light,#DEE9F5),var(--hb-point,#D0DFF0))}

/* ── 15판: 헬덤 내 프로필 창 아이콘 자리(관리자실 「헬덤 내 프로필 아이콘」) · 헬디 탭 보라 점선 ✗ ── */
#profileHeldy{border:0}
.hp-ico{display:inline-block;width:1.15em;height:1.15em;object-fit:contain;vertical-align:-.22em;border-radius:50%}
.profile-actions button .hp-ico{width:28px;height:28px;justify-self:center}
#profileSticker .hp-ico{width:1em;height:1em;vertical-align:middle;border-radius:0}
#hpPhotoBtn .hp-ico{width:16px;height:16px;border-radius:0}
.hp-ai-btn .hp-ico,.hp-prow button .hp-ico,.profile-topbar button .hp-ico{margin-right:2px}

/* ── 16판: 24시 스토리 — 아쿠아 링 + 은빛 반짝 · 뷰어 · 상대 프로필 창 ── */
@keyframes hpShimmer{0%{box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--held-ring,var(--hb-soft,#A9B8D6)),0 0 10px 2px color-mix(in srgb,var(--held-ring,var(--hb-soft,#A9B8D6)) 45%,transparent)}50%{box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--hb-light,#DEE9F5),0 0 14px 3px rgba(var(--hb-light-rgb,222,233,245),.75)}100%{box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--held-ring,var(--hb-soft,#A9B8D6)),0 0 10px 2px color-mix(in srgb,var(--held-ring,var(--hb-soft,#A9B8D6)) 45%,transparent)}}
.avatar.hp-story-live,.hp-status-ring.hp-story-live{animation:hpShimmer 2.6s ease-in-out infinite}
.hp-status-ring.hp-story-live{background:conic-gradient(var(--hb-soft,#A9B8D6),var(--hb-light,#DEE9F5),var(--hb-point,#D0DFF0),var(--hb-light,#DEE9F5),var(--hb-soft,#A9B8D6))}
#hpStatusStrip{display:none}
.hp-story-view{position:fixed;inset:0;z-index:2147483000;display:none;background:var(--hb-deep,#3E4360);color:#fff;-webkit-user-select:none;user-select:none}
.hp-story-view.open{display:block}
body.hp-sv-open{overflow:hidden}
.hp-sv-bg{position:absolute;inset:-40px;background:center/cover no-repeat;filter:blur(28px) brightness(.55);transform:scale(1.1)}
.hp-sv-bars{position:absolute;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top));display:flex;gap:4px;z-index:3}
.hp-sv-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.hp-sv-bars i.done{background:#fff}
.hp-sv-bars i.now::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:hpBar 6s linear forwards}
.hp-story-view.paused .hp-sv-bars i.now::after{animation-play-state:paused}
@keyframes hpBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hp-sv-head{position:absolute;left:12px;right:12px;top:calc(22px + env(safe-area-inset-top));display:flex;align-items:center;gap:10px;z-index:3}
.hp-sv-av .avatar{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.9)}
.hp-sv-who{flex:1;min-width:0;display:grid;line-height:1.25}
.hp-sv-who b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-sv-who small{font-size:12px;opacity:.85}
.hp-sv-more,.hp-sv-x{width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:20px;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hp-sv-body{position:absolute;inset:0;display:grid;place-items:center;padding:calc(84px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));z-index:2}
.hp-sv-body img{max-width:100%;max-height:100%;border-radius:14px;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.hp-sv-note{max-width:82%;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.94);color:var(--hb-deep,#3E4360);font-size:17px;font-weight:600;line-height:1.5;text-align:center;white-space:pre-wrap}
.hp-sv-cap{position:absolute;left:16px;right:16px;bottom:calc(28px + env(safe-area-inset-bottom));text-align:center;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hp-sv-tap{position:absolute;top:96px;bottom:0;width:38%;border:0;background:transparent;z-index:4;cursor:pointer;color:transparent}
.hp-sv-tap.l{left:0}.hp-sv-tap.r{right:0;width:62%}
.hp-friend-dlg{border:0;padding:0;max-width:none;width:100vw;height:100dvh;max-height:none;background:transparent}
.hp-friend-dlg::backdrop{background:rgba(var(--hb-deep-rgb,62,67,96),.4)}
.hp-fd{position:relative;height:100%;color:#fff;background:linear-gradient(170deg,var(--hb-soft,#A9B8D6) 0%,var(--hb-mid,#6B7290) 38%,var(--hb-deep,#3E4360) 100%);display:flex;flex-direction:column;padding:calc(10px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))}
.hp-fd-top{display:flex;align-items:center;justify-content:space-between;height:52px}
.hp-fd-top b{font-size:15px;font-weight:700}
.hp-fd-x,.hp-fd-more{width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:20px;display:grid;place-items:center;cursor:pointer}
.hp-fd-person{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.hp-fd-av{border:0;background:transparent;padding:0;cursor:default}
.hp-fd-av.has{cursor:pointer}
.hp-fd-av .avatar{width:112px;height:112px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--held-ring,var(--hb-soft,#A9B8D6))}
.hp-fd-person h2{margin:6px 0 0;font-size:22px;font-weight:800}
.hp-fd-person p{margin:0;font-size:14px;opacity:.9;min-height:1.2em}
.hp-fd-row{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.5);border-radius:14px;overflow:hidden;margin:10px 0 14px}
.hp-fd-row button,.hp-fd-row a{min-height:48px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:14px;font-weight:700;display:grid;place-items:center;text-decoration:none;cursor:pointer}
.hp-fd-row a{border-left:1px solid rgba(255,255,255,.4)}
.hp-fd-sub{font-size:11px;letter-spacing:.08em;opacity:.85;margin:0 2px 8px}
.hp-fd-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-height:96px;padding-bottom:4px}
.hp-fd-strip::-webkit-scrollbar{display:none}
.hp-fd-strip small{opacity:.8;font-size:12px;align-self:center}
.hp-fd-tile{flex:none;width:96px;height:120px;border:0;padding:0;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.14);cursor:pointer;display:grid;place-items:center}
.hp-fd-tile img{width:100%;height:100%;object-fit:cover;display:block}
.hp-fd-tile.note span{padding:8px;font-size:12px;line-height:1.4;color:#fff;text-align:center}

/* ── 17판 · 스토리 뷰어: 반응 4종 · 수정 폼 ── */
.hp-sv-foot{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));z-index:5;display:grid;justify-items:center;gap:10px;pointer-events:none;padding:0 14px}
.hp-sv-react{display:flex;gap:8px;pointer-events:auto;padding:6px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hp-sv-react[hidden]{display:none}
.hp-sv-react button{width:48px;height:48px;border-radius:50%;border:0;background:transparent;font-size:24px;line-height:1;color:#fff;cursor:pointer;transition:transform .15s,background .15s}
.hp-sv-react button[aria-pressed="true"]{background:rgba(255,255,255,.94);transform:scale(1.12);box-shadow:0 0 0 2px var(--hb-soft,#A9B8D6),0 0 18px rgba(var(--hb-soft-rgb,169,184,214),.7)}
.hp-sv-react.pulse{animation:hpReactPulse .5s ease-out}
@keyframes hpReactPulse{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.hp-story-view.has-react .hp-sv-cap{bottom:calc(92px + env(safe-area-inset-bottom))}
.hp-sv-edit{pointer-events:auto;width:min(100%,440px);display:grid;grid-template-columns:1fr 44px 44px;gap:8px;align-items:end}
.hp-sv-edit[hidden]{display:none}
.hp-sv-edit textarea{width:100%;min-height:52px;resize:none;border:0;border-radius:16px;padding:12px 14px;font:inherit;font-size:15px;line-height:1.4;background:rgba(255,255,255,.96);color:var(--hb-deep,#3E4360);outline:2px solid transparent}
.hp-sv-edit textarea:focus{outline-color:var(--hb-soft,#A9B8D6)}
.hp-sv-ecancel,.hp-sv-esave{width:44px;height:44px;border:0;border-radius:50%;font-size:20px;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(255,255,255,.18)}
.hp-sv-esave{background:var(--hb-soft,#A9B8D6);color:var(--hb-deep,#3E4360)}
/* ── 17판 · 링 색 통일(2026-09-29 슈아 「링은 맞춰줘 · 프로필이랑 위에 24링이랑 대화창링이랑 · 색상만 통일」): 24시 띠 · 내 프로필 · 대화창 머리 — 링 색만 아쿠아+은빛 한 가지 · 모양·크기는 각자 그대로 · 스토리 살아 있으면 같은 링이 반짝 ── */
.hp-status-ring{padding:0;background:transparent}
.hp-status-ring .avatar,#profileAvatar .avatar,.profile-dialog #profileAvatar .avatar,.chat-head .avatar,#chatAvatar{border-color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--held-ring,var(--hb-soft,#A9B8D6)),0 0 10px 2px color-mix(in srgb,var(--held-ring,var(--hb-soft,#A9B8D6)) 45%,transparent)}/* 33b(REV33-004): 프로필 창·채팅 머리 링도 --held-ring */
.hp-status-ring .avatar{width:50px;height:50px}
.hp-status-ring.hp-story-live{animation:none;background:transparent}
.hp-status-ring.hp-story-live .avatar{animation:hpShimmer 2.6s ease-in-out infinite}
.hb-av{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--held-ring,var(--hb-soft,#A9B8D6)),0 0 8px 1px color-mix(in srgb,var(--held-ring,var(--hb-soft,#A9B8D6)) 45%,transparent)} /* 17판: 대화방 헬디 봇 아바타도 같은 링 색 · 모양은 그대로 */

/* ── 18판 · 헬디 놀이 카드 ── */
#hpPlayButton i{filter:drop-shadow(0 1px 2px rgba(var(--hb-soft-rgb,169,184,214),.6))}
.sheet .hp-play-title{margin:4px 0 8px;font-size:13px;font-weight:700;color:var(--hb-deep,#3E4360);text-align:center}

/* ── 19판 · 말풍선 꾹: 답장 · 리액션 ── */
.hp-react-bar{display:flex;gap:6px;flex-wrap:wrap;padding:2px 2px 8px}
.hp-react-bar .hp-react-q{min-height:0;width:44px;height:44px;padding:0;border-radius:50%;background:var(--aqua-x,var(--hb-light,#DEE9F5));font-size:22px;line-height:1;text-align:center;display:grid;place-items:center}
.hp-react-bar .hp-react-q.on{background:#fff;box-shadow:0 0 0 2px var(--hb-soft,#A9B8D6)}
.hp-react-bar .hp-react-plus{background:#fff;border:1px solid var(--line,var(--hb-point,#D0DFF0));font-size:20px;color:var(--ink-2,#55627a)}
.hp-react-bar.all{max-height:212px;overflow:auto}
.hp-react-pills{display:flex;gap:4px;flex-wrap:wrap;margin:3px 0 0}
.message.mine .hp-react-pills{justify-content:flex-end}
.hp-react-pill{border:1px solid var(--hb-point,#D0DFF0);background:#fff;border-radius:999px;padding:1px 7px;font-size:13px;line-height:20px;cursor:pointer}
.hp-react-pill.mine{background:var(--hb-light,#DEE9F5);border-color:var(--hb-soft,#A9B8D6);box-shadow:inset 0 0 0 1px var(--hb-soft,#A9B8D6)}
.message.hp-react-row{display:none}
.sheet .hp-press-reply{font-weight:700}

/* ── 24판(2026-10-02 슈아 「넘치는 것 같아 · 붕 뜨는 느낌 ✗ · 웹 느낌 ✗ 모바일 앱 화면으로」) ── */
#messageList .bubble{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* 꾹 = 우리 메뉴(복사는 메뉴에) · 아이폰 글자 선택 말풍선 ✗ */
@media(max-width:699px){
  html{touch-action:manipulation}
  html,body{overscroll-behavior:none}
  .message-list,.list-pane,.tab-view,.profile-editor{overscroll-behavior:contain}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select{font-size:16px!important} /* 16px 미만이면 아이폰이 눌러질 때 확대 → 화면이 넘친 채 남음 */
  button,a,.list-item,.bubble{-webkit-tap-highlight-color:transparent}
  .list-item,.rail,.chat-head,.pane-head{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}

/* ── 25판 · 알림음 고르기 · 푸시 안내 ── */
.hp-sound-kinds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:8px 0}
.hp-sound-kind{display:grid;justify-items:center;gap:2px;padding:8px 2px 6px;border:1px solid var(--held-line,var(--hb-point,#D0DFF0));border-radius:14px;background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hp-sound-kind i{font-style:normal;font-size:20px;line-height:1}
.hp-sound-kind small{font-size:10px;color:var(--held-mute,#6b7490)}
.hp-sound-kind.on{border-color:var(--hb-soft,#A9B8D6);background:var(--hb-light,#DEE9F5);box-shadow:inset 0 0 0 1px var(--hb-soft,#A9B8D6)}
.hp-push-how{display:flex;gap:6px;align-items:flex-start;margin:6px 2px 0;font-size:11px;line-height:1.5;color:var(--held-mute,#6b7490)}
.hp-push-how i{font-style:normal}
/* 26판: 수정·삭제 시트 · ✎ · 🪪 이름 탭 */
.hp-edit-input{display:block;width:100%;box-sizing:border-box;min-height:84px;margin:4px 0 8px;padding:10px 12px;border:1px solid var(--hb-point,#D0DFF0);border-radius:14px;font:inherit;font-size:16px;line-height:1.5;resize:vertical;background:#fff;color:inherit}
.hp-edit-save,.hp-name-save{font-weight:700}
.hp-del-ask{font-weight:700}
.hp-del-preview{opacity:.7;font-size:13px;overflow-wrap:anywhere}
.hp-msg-delall{color:#c0392b}
.message-meta .hp-edited{font-size:11px;opacity:.6;margin:0 2px}
.hp-name-panel label{display:flex;flex-direction:column;gap:6px}
.hp-name-panel input{font-size:16px}
.hp-name-panel .hp-name-save{margin-top:8px;min-width:48px;padding:6px 14px;border-radius:999px;border:1px solid var(--hb-soft,#A9B8D6);background:var(--hb-light,#DEE9F5)}
/* 28판: 말풍선 손짓 · 영상/음성 말풍선 · 녹음 줄 */
#messageList article.message .bubble{touch-action:pan-y}
#messageList article.message{transition:transform .18s ease}
#messageList article.message.hp-swiping{transition:none}
#messageList article.message.hp-swiping::before{content:'↩';position:absolute;left:-26px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.35}
#messageList article.message.hp-swipe-ready::before{opacity:.9}
#messageList article.message.hp-swiping,#messageList article.message.hp-swipe-ready{position:relative}
.hp-heart-pop{position:absolute;font-size:28px;pointer-events:none;animation:hpHeartPop .7s ease forwards;z-index:3}
.message-stack{position:relative}
@keyframes hpHeartPop{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.15);opacity:1}100%{transform:translateY(-18px) scale(1);opacity:0}}
.plus-drawer .hp-attach-video{position:relative}.plus-drawer .hp-attach-video input{display:none}
.bubble.hp-video-bubble{padding:4px}
.hp-video{position:relative;max-width:min(260px,70vw)}
.hp-video video{display:block;width:100%;max-height:360px;border-radius:14px;background:var(--hb-deep,#3E4360);object-fit:cover}
.hp-video-sound{position:absolute;left:8px;bottom:8px;font-size:13px;background:rgba(0,0,0,.45);color:#fff;border-radius:999px;padding:2px 7px;pointer-events:none}
.hp-video-full{position:absolute;right:6px;bottom:6px;border:0;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:14px;width:30px;height:30px;line-height:30px;padding:0}
.bubble.hp-voice-bubble{padding:8px 10px}
.hp-voice{display:flex;align-items:center;gap:8px;min-width:160px;max-width:min(240px,64vw)}
.hp-voice audio{display:none}
.hp-voice-play{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:0;background:rgba(var(--hb-soft-rgb,169,184,214),.35);font-size:12px;padding:0}
.hp-voice-bar{flex:1;height:4px;border-radius:2px;background:rgba(0,0,0,.12);overflow:hidden}
.hp-voice-bar i{display:block;height:100%;width:0;background:var(--hb-mid,#6B7290)}
.hp-voice-time{flex:0 0 auto;font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
.composer{position:relative}
.hp-rec{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 10px;background:var(--held-paper,#fff);border-radius:inherit;z-index:2}
.hp-rec[hidden]{display:none}
.hp-rec-dot{color:#e0473f;animation:hpRecBlink 1s infinite}
.hp-rec-dot.off{animation:none;opacity:.4}
@keyframes hpRecBlink{50%{opacity:.25}}
.hp-rec-time{font-variant-numeric:tabular-nums;font-size:14px}
.hp-rec-gap{flex:1}
.hp-rec-cancel,.hp-rec-send{border:0;background:none;font-size:18px;min-width:40px;min-height:40px}
.hp-rec-send{color:var(--hb-deep,#3E4360)}
.hp-rec-stop,.hp-rec-play{border:0;background:none;font-size:18px;min-width:40px;min-height:40px} .hp-rec-stop{color:#e0473f} .hp-rec-play{color:var(--hb-deep,#3E4360)} .hp-rec-stop[hidden],.hp-rec-play[hidden],.hp-rec-dot[hidden]{display:none} .hp-rec-stop:disabled{opacity:.4}
.hp-mic{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* 30m: 꾹 눌러 녹음 — 길게 눌러도 선택·메뉴 ✗ */
/* 28판 점검: 입력줄 단추가 6개(＋ · 글 · 🌐 · 헬디 · 🎤 · ➤)라도 한 줄 — 글칸만 늘고 줄며 ➤ 은 🎤 옆 */
#composer.composer.hp-has-mic{display:flex;align-items:center;flex-wrap:nowrap}
#composer.composer.hp-has-mic>textarea{flex:1 1 auto;min-width:0;width:auto}
#composer.composer.hp-has-mic>button{flex:0 0 auto}
/* 음성 말풍선: 내 말(흰 글씨 규칙)·받은 말 모두 읽히게 배경·글색을 직접 */
#messageList .bubble.hp-voice-bubble{background:var(--hb-light,#DEE9F5)!important;color:var(--hb-deep,#3E4360);border-radius:18px;padding:8px 10px}
#messageList .message.mine .bubble.hp-voice-bubble{background:var(--hb-point,#D0DFF0)!important;color:var(--hb-deep,#3E4360)}
#messageList .bubble.hp-voice-bubble .hp-voice-time{color:inherit;opacity:.8}
#messageList .bubble.hp-voice-bubble .hp-voice-play{color:var(--hb-deep,#3E4360)}
.hp-video-play{position:absolute;right:42px;bottom:6px;border:0;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;width:30px;height:30px;line-height:30px;padding:0}
.hp-video-play:focus-visible,.hp-video-full:focus-visible,.hp-voice-play:focus-visible{outline:2px solid var(--hb-soft,#A9B8D6);outline-offset:2px}
.hp-rec.hp-rec-sending .hp-rec-time::after{content:' …'}
.hp-rec-cancel:disabled,.hp-rec-send:disabled{opacity:.4}
/* ── 29판: 입력 중 ··· 말풍선(입력줄 바로 위) · 머리 👁 마지막 확인 ── */
.hp-typing{align-self:flex-start;display:inline-flex;gap:4px;align-items:center;margin:0 14px 6px;padding:9px 12px;border-radius:16px;background:var(--hb-light,#DEE9F5);width:max-content}
.hp-typing[hidden]{display:none}
.hp-typing i{width:6px;height:6px;border-radius:50%;background:#5b6390;opacity:.5;animation:hpTypingDot 1.2s infinite ease-in-out}
.hp-typing i:nth-child(2){animation-delay:.18s}.hp-typing i:nth-child(3){animation-delay:.36s}
@keyframes hpTypingDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hp-typing i{animation:none;opacity:.8}}
.hp-seen{display:block;font-size:11px;line-height:1.3;opacity:.75;margin-top:1px}
/* 33판: 문고 상점 타일의 설계 아이콘은 글자 위 한가운데(옆 스티커와 같은 크기) · 채팅 머리 아바타는 누를 수 있음 */
.tray .grid button.hw .dm-ico{display:block;margin:0 auto 3px;width:26px;height:26px}
#chatAvatar{cursor:pointer}
.hp-seen[hidden]{display:none}
.hp-new-group{margin-left:auto;border:0;background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);border-radius:999px;min-width:40px;height:32px;font-size:14px;padding:0 10px;cursor:pointer}
.hp-new-group:focus-visible,.hp-group-dlg button:focus-visible,.hp-seg button:focus-visible{outline:2px solid var(--hb-soft,#A9B8D6);outline-offset:2px}
.hp-group-dlg{border:0;border-radius:20px;padding:0;width:min(420px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 48px));overflow:hidden;background:#fff;color:var(--hb-deep,#3E4360);box-shadow:0 18px 50px rgba(var(--hb-deep-rgb,62,67,96),.25)}
.hp-group-dlg[open]{display:flex;flex-direction:column}
.hp-group-dlg::backdrop{background:rgba(var(--hb-deep-rgb,62,67,96),.35)}
.hp-g-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--hb-light,#DEE9F5)}
.hp-g-head b{flex:1;text-align:center;font-size:15px}
.hp-g-head button{border:0;background:var(--hb-light,#DEE9F5);border-radius:999px;width:40px;height:40px;font-size:16px;cursor:pointer;color:var(--hb-deep,#3E4360)}
.hp-g-ok:disabled{opacity:.35;cursor:default}
.hp-g-title{margin:12px 14px 4px;padding:10px 12px;border:1px solid var(--hb-point,#D0DFF0);border-radius:12px;font-size:15px}
.hp-g-title[hidden]{display:none}
.hp-g-list{overflow:auto;padding:6px 8px 12px;flex:1}
.hp-g-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 8px;border-radius:12px;cursor:pointer}
.hp-g-row:hover{background:var(--hb-light,#DEE9F5)}
.hp-g-row input{width:20px;height:20px;flex:none}
.hp-g-face{width:36px;height:36px;border-radius:50%;background:var(--hb-light,#DEE9F5);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none;font-weight:600}
.hp-g-face img{width:100%;height:100%;object-fit:cover}
.hp-g-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-g-empty{padding:20px 10px;text-align:center;opacity:.8}
.hp-g-err{margin:4px 14px 2px;padding:8px 10px;border-radius:10px;background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);font-size:12.5px;line-height:1.5}.hp-g-err[hidden]{display:none}/* 10-15 창 안 이유 한 줄(토스트 ✗) */
.hp-seg-row{flex-wrap:wrap;gap:8px}
.hp-seg{display:flex;gap:6px;flex-wrap:wrap}
.hp-seg button{border:1px solid var(--hb-point,#D0DFF0);background:#fff;color:var(--hb-deep,#3E4360);border-radius:999px;padding:6px 10px;font-size:12px;min-height:32px;cursor:pointer}
.hp-seg button[aria-pressed="true"]{background:var(--hb-deep,#3E4360);color:#fff;border-color:var(--hb-deep,#3E4360)}
.hp-seg button:disabled{opacity:.5}
/* ── 헬덤 30판 a(10-03 슈아 「대화창 단추 안 보여」): 폰에서 ➤ 보내기·☰ 메뉴가 화면 밖(375px 폰은 통째로 ✗) — .active-chat 격자의 열이 글쓰기 줄 최소폭(글상자 고유폭 + 단추 6개 = 422px)으로 커져 머리·목록·글쓰기 줄 전부 넘침(28판 flex 전환 뒤) → 열 = minmax(0,1fr) · 자식 min-width 0 */
.active-chat{grid-template-columns:minmax(0,1fr)}.active-chat>*{min-width:0}

/* ── 헬덤 30판 b(10-03): 화면 설정(글씨체·크기·대화 배경) · 보관함 시트 · 꾹 메뉴 📥/📅 — 색은 헬덤 변수 */
html[style*="--hp-fs"] .message .bubble:not(.sticker){font-size:var(--hp-fs)} /* 코덱스 H30B-07: 스티커 크기 그대로 · 30d: 크기를 골랐을 때만(기본은 엔진 13.5px 그대로) */
html[style*="--hp-font"] :is(.heldom,.heldom-dialog,.profile-dialog,.press-menu,.hp-group-dlg,.hp-story-view,.hb-wrap){font-family:var(--hp-font)} /* 코덱스 H30B-02 · 30d: 글씨체를 골랐을 때만 */
#pressMenu .hp-keep-open{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;font-size:15px}
.message-list[style*="--hp-bg"]{background:var(--hp-bg-img,none) center/cover no-repeat,var(--hp-bg,var(--bg,transparent))} /* 30d: 배경을 골랐을 때만(안 골랐으면 엔진 그대로 · 넓은 화면 흰 바탕 유지) */
.hp-seg30{gap:8px}
.hp-swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--hb-point,#D0DFF0);padding:0;font-size:15px;line-height:1;cursor:pointer;background:#fff;color:var(--hb-deep,#3E4360)}
.hp-swatch[aria-pressed="true"]{border-color:var(--hb-deep,#3E4360);box-shadow:0 0 0 2px #fff inset}
#pressMenu .hp-keep-sheet .hp-keep-title{font-weight:700;margin:0 0 6px;text-align:center}
#pressMenu .hp-keep-empty{opacity:.75;margin:4px 0;text-align:center}
#pressMenu .hp-keep-list{max-height:min(60vh,480px);overflow:auto;display:flex;flex-direction:column;gap:4px;margin:4px 0 8px}
#pressMenu .hp-keep-row{display:flex;align-items:center;gap:4px}
#pressMenu .hp-keep-go{flex:1;min-width:0;width:auto;display:flex;align-items:center;gap:10px;text-align:left;border:0;background:var(--hb-light,#DEE9F5);border-radius:12px;padding:8px 10px;min-height:48px;color:inherit;font:inherit;cursor:pointer}
#pressMenu .hp-keep-go i{flex:none;width:36px;height:36px;border-radius:10px;background:var(--hb-light,#DEE9F5);display:inline-flex;align-items:center;justify-content:center;font-style:normal;overflow:hidden}
#pressMenu .hp-keep-go i img{width:100%;height:100%;object-fit:cover}
#pressMenu .hp-keep-go span{min-width:0;display:flex;flex-direction:column}
#pressMenu .hp-keep-go b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
#pressMenu .hp-keep-go small{opacity:.7;font-size:11px}
#pressMenu .hp-keep-rm{flex:none;width:32px;min-width:0;height:32px;padding:0;border:0;border-radius:50%;background:transparent;opacity:.6;cursor:pointer;font:inherit}
/* 30판 b · 그룹방 만들기 창: 사파리는 높이 미정 flex 상자 안 flex:1(basis 0%) 을 0 으로 계산 → 식구 목록이 접혀 방 이름 아래가 비어 보임(슈아 사진) → basis auto + min-height 0 (크롬은 전과 같음) */
.hp-group-dlg .hp-g-list{flex:1 1 auto;min-height:0}
#pressMenu .hp-keep-note,#pressMenu .hp-keep-drive{font-size:15px} /* 30e 갓노트로 · 30j 드라이브로 */
/* 30e 그룹방 목록(슈아 아이폰 사진: 30b flex 보정으로도 접힘) — flex 에 안 기대고 목록 자체 높이로: 내용만큼 크고 화면 높이에서 머리·이름칸 뺀 만큼까지 · 넘치면 안에서 스크롤 */
.hp-group-dlg .hp-g-list{flex:none;height:auto;min-height:56px;max-height:min(440px,calc(100vh - 240px));overflow:auto;-webkit-overflow-scrolling:touch}
.hp-group-dlg{max-height:none}
/* 31판(2026-10-04) 왓츠앱 결: 상태 메시지 머리 · 상태 추가 창 · 이웃 고르기(ㄱㄴㄷ 색인) · 단체 메시지 · 추천 상태 칩 · 뷰어 글 상태 배경 */
.hp-smine{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:10px 14px 8px}
.hp-smine .hp-status-title{grid-column:1/-1}
.hp-smine-row{display:flex;align-items:center;gap:12px;min-width:0;padding:6px 4px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:14px}
.hp-smine-row:active{background:rgba(var(--hb-soft-rgb,169,184,214),.14)}
.hp-smine-av{position:relative;flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.hp-smine-av .avatar{width:48px;height:48px}
.hp-smine-plus{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--hb-deep,#3E4360);color:#fff;font:700 15px/20px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--hp-card-bg,#fff);font-style:normal}
.hp-smine[data-live="1"] .hp-smine-plus{display:none}
.hp-smine-txt{display:flex;flex-direction:column;min-width:0}
.hp-smine-txt b{font-size:15px}
.hp-smine-txt small{color:var(--sub,#6b7490);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-smine-add{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(var(--hb-soft-rgb,169,184,214),.22);color:var(--hb-deep,#3E4360);font-size:18px;display:grid;place-items:center;cursor:pointer}
.hp-smine-add i{font-style:normal}
/* 상태 추가 창 */
.hp-sc .hp-sc-body{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
.hp-sc-card{position:relative;min-height:220px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px 16px;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hp-sc-card textarea{width:100%;min-height:90px;background:transparent;border:0;outline:0;resize:none;color:#fff;text-align:center;font:600 20px/1.35 inherit;font-size:20px;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hp-sc-card textarea::placeholder{color:rgba(255,255,255,.72)}
.hp-sc-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.hp-sc-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:3px 8px 3px 10px;font-size:13px}
.hp-sc-chip-x{border:0;background:rgba(255,255,255,.3);color:#fff;width:18px;height:18px;border-radius:50%;line-height:18px;padding:0;font-size:13px;cursor:pointer}
.hp-sc-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hp-sc-pal{display:flex;gap:8px;flex:1 1 auto}
.hp-sc-swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18);padding:0}
.hp-sc-swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--hb-soft,#A9B8D6),0 1px 4px rgba(0,0,0,.18)}
.hp-sc-mention{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hp-sc-mention i{font-style:normal}
/* 이웃 고르기 */
.hp-pk-search{width:100%;box-sizing:border-box;border:1px solid rgba(var(--hb-deep-rgb,62,67,96),.14);border-radius:12px;padding:9px 12px;font:inherit;font-size:16px;background:rgba(255,255,255,.7);margin:6px 0 8px}
.hp-pk-wrap{position:relative;display:flex;gap:4px}
.hp-pk-list{flex:1 1 auto;min-width:0;max-height:min(52vh,420px);overflow:auto;-webkit-overflow-scrolling:touch;padding-right:16px}
.hp-pk-grp{position:sticky;top:0;z-index:1;font-size:12px;font-weight:700;color:var(--sub,#6b7490);padding:6px 4px 2px;background:var(--hp-sheet-bg,rgba(255,255,255,.92))}
.hp-pk-row .avatar{width:36px;height:36px;flex:none}
.hp-pk-cb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;border:2px solid rgba(var(--hb-deep-rgb,62,67,96),.3);margin-left:auto;flex:none;display:grid;place-items:center;cursor:pointer}
.hp-pk-cb:checked{border-color:var(--hb-deep,#3E4360);background:var(--hb-deep,#3E4360)}
.hp-pk-cb:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.hp-pk-rail{flex:none;width:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 0}
.hp-pk-idx{border:0;background:none;padding:0;font-size:10px;line-height:1.25;color:var(--hb-deep,#3E4360);cursor:pointer;font-weight:700}
/* 단체 메시지 */
.hp-bc-to{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.hp-bc-ta{width:100%;box-sizing:border-box;border:1px solid rgba(var(--hb-deep-rgb,62,67,96),.14);border-radius:14px;padding:10px 12px;font:inherit;font-size:16px;resize:vertical;background:rgba(255,255,255,.75)}
/* 24시 상태 추천 칩 */
.hp-note-pre{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.hp-note-pre .hp-chip{cursor:pointer;font:inherit;font-size:13px}
/* 뷰어: 글 상태 배경 또렷하게 */
.hp-story-view.hp-sv-solid .hp-sv-bg{filter:none;transform:none;inset:0}
.hp-story-view.hp-sv-solid .hp-sv-note{font-size:22px;font-weight:600;line-height:1.4;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hp-sv-mentions{margin:6px 16px 0;text-align:center;font-size:14px;opacity:.9;text-shadow:0 1px 6px rgba(0,0,0,.45)} /* 31b 언급 줄 */
/* 32판(2026-10-04) 「업데이트」 페이지(아래 탭 5번째 · 왓츠앱 업데이트 결) */
.rail button[data-tab=updates] i{font-style:normal}
.hp-up{position:relative;display:flex;flex-direction:column;gap:6px;padding-bottom:96px}
.hp-up-search{display:flex;align-items:center;gap:8px;margin:10px 2px 4px;padding:9px 12px;border-radius:14px;background:rgba(var(--hb-deep-rgb,62,67,96),.06)}
.hp-up-search span{color:#6b7490}
.hp-up-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;outline:0}
.hp-up-sec{display:flex;flex-direction:column;gap:2px}
.hp-up-sec .section-title{margin:10px 2px 2px}
#hpUpSlot .hp-smine{padding:2px 2px 6px;background:none}
#hpUpSlot .hp-smine .hp-status-title{display:none}
.hp-up-list{display:flex;flex-direction:column}
.hp-up-row{display:flex;align-items:center;gap:12px;padding:8px 4px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:14px}
.hp-up-row:active{background:rgba(var(--hb-soft-rgb,169,184,214),.14)}
.hp-up-row .hp-status-ring{width:54px;height:54px;flex:none}
.hp-up-row .avatar{width:46px;height:46px}
.hp-up-txt{display:flex;flex-direction:column;min-width:0}
.hp-up-txt b{font-size:15px}
.hp-up-txt small{color:var(--sub,#6b7490);font-size:12.5px}
.hp-up-news #hpNewsView{display:grid}
.hp-up-news #hpNewsView .hp-ftabs{display:none}
.hp-up-fab{position:sticky;bottom:12px;align-self:flex-end;margin-right:12px;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px;pointer-events:none;z-index:3}
.hp-up-fab button{pointer-events:auto;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px rgba(var(--hb-deep-rgb,62,67,96),.18)}
.hp-up-fab i{font-style:normal}
.hp-up-fab-s{width:44px;height:44px;border-radius:14px;background:#fff;color:var(--hb-deep,#3E4360);font-size:19px}
.hp-up-fab-p{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--hb-soft,#A9B8D6),var(--hb-deep,#3E4360));color:#fff;font-size:19px}/* 36판: 위 셋과 같은 크기 */
/* 33판(2026-10-04) 화면 설정 실제 앱 결 · 💎 잠금 · 프로필 말풍선/배지 다듬기 · 설계 알약은 레일 위로 */
#hpScreenCard .hp-seg-row{display:none}
.hp-s33{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.hp-s33-pv{display:flex;flex-direction:column;gap:8px;padding:14px 12px;border-radius:16px;background:var(--hp-bg-img,none) center/cover no-repeat,var(--hp-bg,var(--bg,var(--hb-light,#DEE9F5)));border:1px solid rgba(var(--hb-deep-rgb,62,67,96),.08)}
.hp-s33-pv .message{display:flex}
.hp-s33-pv .message.mine{justify-content:flex-end}
.hp-s33-pv .bubble{max-width:78%;font-size:var(--hp-fs,13px);font-family:inherit}
.hp-s33-pv[style*="--hp-bub-me"] .message.mine .bubble{background:var(--hp-bub-me);color:var(--hp-bub-me-ink,#1b2430)}
.hp-s33-pv[style*="--hp-bub-them"] .message:not(.mine) .bubble{background:var(--hp-bub-them);color:var(--hp-bub-them-ink,#1b2430)}
.hp-s33-size{display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.hp-s33-cap{display:flex;justify-content:space-between;align-items:baseline}
.hp-s33-cap b{font-size:15px}
.hp-s33-cap output{font-size:13px;color:var(--sub,#6b7490);font-variant-numeric:tabular-nums}
.hp-s33-slider{display:flex;align-items:center;gap:10px}
.hp-s33-slider .s{font-size:12px;color:var(--sub,#6b7490)}
.hp-s33-slider .l{font-size:20px;color:var(--sub,#6b7490)}
.hp-s33-slider input[type=range]{flex:1;min-width:0;height:28px;-webkit-appearance:none;appearance:none;background:transparent}
.hp-s33-slider input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--hb-soft,#A9B8D6),var(--hb-deep,#3E4360))}
.hp-s33-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:#fff;border:2px solid var(--hb-deep,#3E4360);box-shadow:0 2px 8px rgba(var(--hb-deep-rgb,62,67,96),.2)}
.hp-s33-slider input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--hb-soft,#A9B8D6),var(--hb-deep,#3E4360))}
.hp-s33-slider input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--hb-deep,#3E4360);box-shadow:0 2px 8px rgba(var(--hb-deep-rgb,62,67,96),.2)}
.hp-s33-rows{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.7);border:1px solid rgba(var(--hb-deep-rgb,62,67,96),.08)}
.hp-s33-rows .hp-row33{border-radius:0;border-bottom:1px solid rgba(var(--hb-deep-rgb,62,67,96),.08)}
.hp-s33-rows .hp-row33:last-child{border-bottom:0}
.hp-s33-rows .hp-row33 small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.hp-s33-reset{align-self:flex-end}
/* 시트 */
.hp-s33-sheet .hp-s33-list{display:flex;flex-direction:column;max-height:min(60vh,520px);overflow:auto;-webkit-overflow-scrolling:touch}
.hp-s33-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b em" "small em";align-items:center;gap:0 10px;padding:10px 6px;border:0;border-bottom:1px solid rgba(var(--hb-deep-rgb,62,67,96),.08);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.hp-s33-opt b{grid-area:b;font-size:16px}
.hp-s33-opt small{grid-area:small;color:var(--sub,#6b7490);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-s33-opt em{grid-area:em;font-style:normal;color:var(--hb-deep,#3E4360);font-size:16px}
.hp-s33-opt.on b{color:var(--hb-deep,#3E4360)}
.hp-s33-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:6px 0 10px}
.hp-s33-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;position:relative}
.hp-s33-tile span{width:100%;aspect-ratio:1.3;border-radius:14px;border:2px solid rgba(var(--hb-deep-rgb,62,67,96),.1);display:grid;place-items:center;font-size:22px;box-sizing:border-box}
.hp-s33-tile.on span{border-color:var(--hb-deep,#3E4360);box-shadow:0 0 0 2px rgba(var(--hb-soft-rgb,169,184,214),.6)}
.hp-s33-tile small{font-size:12px;color:var(--sub,#6b7490);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hp-s33-tile em{position:absolute;top:6px;right:6px;font-style:normal;font-size:13px;background:rgba(255,255,255,.9);border-radius:999px;padding:1px 5px}
.hp-s33-custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.hp-s33-color{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid rgba(var(--hb-deep-rgb,62,67,96),.08);position:relative;cursor:pointer}
.hp-s33-color .sw{width:34px;height:34px;border-radius:50%;border:2px solid rgba(var(--hb-deep-rgb,62,67,96),.12);flex:none}
.hp-s33-color b{flex:1;font-size:15px}
.hp-s33-color input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
/* 💎 */
.hp-lock-badge{position:absolute;top:-4px;right:-4px;font-style:normal;font-size:12px;background:#fff;border-radius:999px;padding:0 4px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.hp-sound-kind{position:relative}
.hp-lock .hp-lock-item{display:flex;align-items:center;gap:10px;padding:14px 6px 8px;font-size:17px}
.hp-lock .hp-lock-item i{font-style:normal;font-size:26px}
.hp-lock .hp-lock-row{display:flex;justify-content:space-between;padding:8px 6px;border-bottom:1px solid rgba(var(--hb-deep-rgb,62,67,96),.08);font-size:15px}
.hp-lock .hp-primary{margin-top:10px}
/* 말풍선 색(변수 있을 때만) */
.message-list[style*="--hp-bub-them"] .message:not(.mine) .bubble:not(.sticker){background:var(--hp-bub-them);color:var(--hp-bub-them-ink,var(--ink,#1b2430))}
.message-list[style*="--hp-bub-me"] .message.mine .bubble:not(.sticker){background:var(--hp-bub-me);color:var(--hp-bub-me-ink,#1b2430)} /* 33c(R41-04): 변수 있을 때만 · 스티커 ✗ · 글자색 대비 */
/* 프로필 창: 말풍선·📷 배지 */
.profile-dialog .hp-note-bubble{max-width:72%;margin:0 0 10px;padding:8px 14px;border-radius:18px;font-size:13px;line-height:1.3;box-shadow:0 6px 18px rgba(var(--hb-deep-rgb,62,67,96),.12)}
.profile-dialog .hp-note-bubble::after{left:50%;margin-left:-6px;bottom:-5px;width:11px;height:11px}
.profile-dialog .hp-note-bubble.empty{background:rgba(255,255,255,.55);border:1px dashed rgba(var(--hb-deep-rgb,62,67,96),.25);box-shadow:none}
.profile-dialog .hp-photo-btn{display:none} /* 33판 슈아 왓츠앱 「나」 결: 아바타 위 📷 배지 ✗ · 사진·링 바꾸기는 아바타 자체를 누르면(4판) */
/* 설계 알약(관리자만)은 레일 위로 */
@media (max-width:699px){#heldDesignPill:not(.shell){bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
body:has(#pressMenu:not([hidden])) #heldDesignPill:not(.shell),body.hp-sv-open #heldDesignPill:not(.shell){top:calc(12px + env(safe-area-inset-top,0px));bottom:auto}/* 10-16 슈아 「시트가 열리면 아이콘 바꿀 단추가 가려져 못 바꿔」: 숨김 ✗ → 시트 단추를 안 가리는 왼쪽 위로(알약은 관리자만 보임) */ /* 헬덤 설계 1판: 설계 모드 켜져 있으면 시트 위에서도 알약 유지 */ /* 34b: 시트·뷰어 열린 동안 설계 알약 숨김(단추 가림 ✗) */

/* 34판(2026-10-04) 영상·음성 상태 · 뷰어 재생 */
.hp-vc .hp-vc-face{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 0 8px}
.hp-vc .hp-vc-face i{font-style:normal;font-size:44px;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--hb-soft,#A9B8D6),var(--hb-deep,#3E4360));color:#fff;box-shadow:0 8px 24px rgba(var(--hb-mid-rgb,107,114,144),.35)}
.hp-vc.rec .hp-vc-face i{animation:hpVcPulse 1.2s ease-in-out infinite}
@keyframes hpVcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.hp-vc .hp-vc-time{font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink,var(--hb-deep,#3E4360))}
.hp-vc .hp-vc-face small{color:var(--sub,#6b7490);font-size:12.5px}
.hp-vc .hp-aud{justify-content:center;padding:4px 0}
.hp-vc .hp-vc-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:8px 0 4px}
.hp-vc .hp-vc-row button{flex:1 1 40%;min-width:0}
.hp-vc .hp-vc-row button[hidden]{display:none}
.hp-sv-body video.hp-sv-video{max-width:100%;max-height:100%;border-radius:14px;background:#000;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.hp-sv-voice{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(86%,340px);padding:26px 18px;border-radius:22px;background:rgba(255,255,255,.94);color:var(--hb-deep,#3E4360);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.hp-sv-voice i{font-style:normal;font-size:40px}
.hp-sv-voice b{font-size:15px}
.hp-sv-voice audio{width:100%}
.hp-story-view.hp-media .hp-sv-body{z-index:5;pointer-events:none} /* 34b(R44-01): 영상·음성 조작부는 좌우 탭 덧판(z 4) 위로 · 빈 곳은 통과 */
.hp-story-view.hp-media .hp-sv-body>*{pointer-events:auto}

/* 37판: 글쓰기 줄 정리(＋ · 글 · 😊 · ➤) · + 시트 카톡 결 · 지도 카드 · 친구 위치 시트·칩 */
body.hp-tidy37 #composer #composerTranslateButton,body.hp-tidy37 #composer .hp-mic,body.hp-tidy37 #composer #heldyOpenHeldom{display:none}
body.hp-tidy37.hp-mic-row #composer .hp-mic{display:grid}
#composer #stickerButton.hp-stk-tool{font-size:0;padding:0;width:34px;height:34px;border-radius:50%;background:var(--aqua-x,var(--hb-light,#DEE9F5));color:var(--aqua-d,var(--hb-deep,#3E4360));flex:0 0 auto;border:0;display:grid;place-items:center}
#composer #stickerButton.hp-stk-tool i{font-size:20px;font-style:normal;line-height:1}
body.hp-tidy37 #plusDrawer{display:block;padding:0 0 calc(10px + env(safe-area-inset-bottom));max-height:min(72vh,600px);overflow-y:auto;border-radius:18px 18px 0 0;box-shadow:0 -8px 24px rgba(var(--hb-deep-rgb,62,67,96),.08)}
body.hp-tidy37 #plusDrawer[hidden]{display:none}
body.hp-tidy37 #plusDrawer>button{display:none}
.hp-ps{padding:4px 14px 0}
.hp-ps-grip{display:block;width:40px;height:4px;border-radius:2px;background:#cfd8e3;margin:8px auto 10px}
.hp-ps-recent{display:flex;align-items:center;justify-content:space-between;margin:2px 0 8px;font-size:13px;font-weight:700;color:var(--hb-deep,#3E4360)}
.hp-ps-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px;-webkit-overflow-scrolling:touch}.hp-ps-strip::-webkit-scrollbar{display:none}
#plusDrawer .hp-ps-strip button{flex:0 0 auto;width:84px;height:84px;border:0;border-radius:14px;overflow:hidden;background:var(--hb-point,#D0DFF0);padding:0;display:grid;place-items:center;cursor:pointer}
.hp-ps-strip .hp-ps-cam i{font-size:30px;font-style:normal}
.hp-ps-strip img{width:100%;height:100%;object-fit:cover;display:block}
.hp-ps-sec{border-top:1px solid var(--hb-light,#DEE9F5);padding:4px 0}
#plusDrawer .hp-ps-row{display:flex;align-items:center;gap:14px;width:100%;border:0;background:transparent;padding:11px 2px;font-size:15px;line-height:1.2;color:var(--hb-deep,#3E4360);text-align:left;cursor:pointer}/* 37b: 엔진 .plus-drawer button(가운데·10px) 보다 세게 */
.hp-ps-row i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:17px;font-style:normal;background:var(--held-chip,var(--hb-light,#DEE9F5));flex:0 0 auto}
#plusDrawer .hp-ps-row span{flex:1 1 auto;min-width:0;text-align:left}
.hp-ps-row small{color:#8a94a6;font-size:11px;white-space:nowrap}
.hp-ps-tog{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px 4px;border-top:1px solid var(--hb-light,#DEE9F5);font-size:13px;color:#4a5378}
.hp-map{position:relative;overflow:hidden;border-radius:12px;background:var(--hb-light,#DEE9F5)}.hp-map img{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none}
.hp-map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);font-size:26px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.hp-map-credit{position:absolute;right:4px;bottom:2px;font-size:8px;color:#555;background:rgba(255,255,255,.7);padding:0 3px;border-radius:3px}
.hp-link.hp-loc{display:block;width:220px;max-width:100%;text-decoration:none;color:inherit;border:1px solid var(--hb-point,#D0DFF0);border-radius:14px;overflow:hidden;background:#fff}/* 37b: 말풍선이 짧아도 카드 폭 유지 */
.hp-loc .hp-map{border-radius:0;width:100%!important}
.hp-loc .hp-loc-cap{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;font-size:12px}.hp-loc .hp-loc-cap b{font-weight:600;color:var(--hb-deep,#3E4360)}.hp-loc .hp-loc-cap span{color:var(--hb-mid,#6B7290);font-weight:600}
.hp-live-sheet .hp-live-title{margin:6px 0 2px;font-size:17px;text-align:center;color:var(--hb-deep,#3E4360)}
.hp-live-sheet .hp-live-sub{margin:0 0 10px;text-align:center;color:#6f7c99;font-size:12px}
.hp-live-map{position:relative;min-height:170px;display:grid;place-items:center;border-radius:14px;overflow:hidden;margin-bottom:10px;background:var(--hb-light,#DEE9F5)}
.hp-live-map .hp-map{width:100%!important}
.hp-live-me{position:absolute;left:50%;top:calc(50% - 50px);transform:translateX(-50%);background:#fff;border-radius:999px;padding:3px 10px;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.15);white-space:nowrap}
.hp-live-btns{display:flex;gap:8px;margin-bottom:6px}.hp-live-btns button{flex:1;padding:13px 0;border:0;border-radius:14px;background:var(--hb-light,#DEE9F5);font-size:14px;font-weight:600;color:var(--hb-deep,#3E4360);cursor:pointer}.hp-live-btns button:disabled{opacity:.5}
.hp-live-chip{display:flex;align-items:center;gap:8px;margin:0 10px 6px;padding:7px 12px;border-radius:999px;background:var(--hb-light,#DEE9F5);font-size:12px;color:var(--hb-deep,#3E4360)}
.hp-live-chip button{margin-left:auto;border:0;background:#fff;border-radius:999px;padding:4px 10px;font-size:12px;color:var(--hb-deep,#3E4360);cursor:pointer}

/* ══ 헬덤 38판(10-10 슈아): 블루 결 · 아이콘 크기 · 내 프로필 유리결 ══ */
.rail button i{font-size:24px}.rail button span{font-size:11px}
.tabs div i{font-size:24px}.tabs div{font-size:11px}
.icon-button{font-size:22px}.room-translate{width:44px;height:44px;font-size:20px}.mobile-chat-back{font-size:26px}
.list-item .avatar{width:50px;height:50px}.list-item strong{font-size:14px}.list-item small{font-size:12px}.list-item time{font-size:10.5px}.list-item .unread{min-width:22px;height:22px;line-height:22px;font-size:11px;background:var(--hb-deep,#3E4360)}
.rail button b{background:var(--hb-deep,#3E4360)}
.hp-room-marks{font-size:13px}
/* 내 프로필: 바탕 유리결(사진·배경 위 유리) · 제목 글씨 ✗ · 위 단추 유리 */
.profile-stage[data-background=aqua]{background:linear-gradient(170deg,var(--hb-light,#DEE9F5) 0%,var(--hb-light,#DEE9F5) 48%,var(--hb-light,#DEE9F5) 100%)}
.profile-topbar{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.profile-topbar #profileModeTitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.profile-topbar button{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);color:var(--hb-deep,#3E4360);font-size:12px;border-radius:999px;min-height:38px}
.profile-stage .hp-ai-btn{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);color:var(--hb-deep,#3E4360)}
/* 행동 줄 = 두 줄 유리 카드: [나와의 채팅 · 헬디] / [미니룸 · 새 게시물] · 프로필 편집(위 꾸미기와 중복)·프로필 공유 ✗ */
.profile-dialog:not(.editing) .profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:14px 16px 0;width:calc(100% - 32px);max-width:420px;overflow:hidden;border:1px solid rgba(255,255,255,.8);border-radius:16px 16px 0 0;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.profile-dialog:not(.editing) .profile-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;background:rgba(255,255,255,.34);font-size:13px;font-weight:600;color:var(--hb-deep,#3E4360)}
.profile-dialog:not(.editing) .profile-actions button span{font-size:13px}
.profile-dialog:not(.editing) .profile-actions #profileEditAction{display:none}
.profile-dialog:not(.editing) .hp-prow #profileMiniroom{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border:0;background:rgba(255,255,255,.34);font-size:13px;font-weight:600;color:var(--hb-deep,#3E4360);cursor:pointer}.profile-dialog:not(.editing) .hp-prow #profileMiniroom span{font-size:13px}/* 38b(HD38-001) */
.profile-stage[data-background=night] .profile-actions{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}.profile-stage[data-background=night] .profile-actions button,.profile-stage[data-background=night] .hp-prow #profileMiniroom{background:rgba(255,255,255,.1);color:#fff}/* 38b(HD38-003) */
.profile-dialog:not(.editing) .profile-actions #profileSelfRoom[hidden]{display:flex}
.profile-dialog:not(.editing) .hp-prow{margin:0 16px;width:calc(100% - 32px);max-width:420px;border-radius:0 0 16px 16px;border-top:0}
.profile-dialog:not(.editing) .hp-prow [data-share]{display:none}
.profile-dialog:not(.editing) .hp-prow button{min-height:46px;font-size:13px}
.profile-stage .hp-prow button,.profile-stage .profile-actions button{color:var(--hb-deep,#3E4360)}
.profile-stage[data-background=night] .hp-prow button,.profile-stage[data-background=night] .profile-actions button{color:#fff}
/* 스티커 칸: 꾸미기 중이거나 내가 붙인 스티커가 있을 때만(38절 JS 가 data-hp-sticker 표시) */
.profile-dialog:not(.editing) #profileSticker:not([data-hp-sticker="1"]){display:none}

/* ══ 헬덤 39판(10-10): 입력 중 말풍선 · 유리 꾹 메뉴 · 답장 바 · 돌아가기 알약 · 뒤로 배지 · 장소 카드 ══ */
.hp-typing{display:flex;align-items:flex-end;gap:8px;margin:2px 14px 8px;padding:0;background:none;border:0;width:max-content}
.hp-typing .hp-tav{width:30px;height:30px;border-radius:11px;overflow:hidden;flex:none;background:var(--hb-light,#DEE9F5)}.hp-typing .hp-tav img,.hp-typing .hp-tav canvas,.hp-typing .hp-tav .avatar{width:100%;height:100%;object-fit:cover;border-radius:11px}
.hp-typing .hp-tb{display:inline-flex;gap:5px;align-items:center;padding:12px 14px;border-radius:7px 17px 17px 17px;background:#fff;border:1px solid var(--hb-point,#D0DFF0);box-shadow:0 6px 16px rgba(var(--hb-deep-rgb,62,67,96),.08)}
.hp-typing i{width:7px;height:7px;border-radius:50%;background:var(--hb-soft,#A9B8D6);opacity:.45;animation:hpTypingDot 1.2s infinite ease-in-out}
.press-menu{background:rgba(var(--hb-deep-rgb,62,67,96),.18);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.press-menu .sheet{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.85);border-bottom:0;box-shadow:0 -10px 40px rgba(var(--hb-deep-rgb,62,67,96),.12)}
.press-menu .sheet button{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7)}
.press-menu .sheet .hp-react-bar{background:rgba(255,255,255,.6)}
.hp-reply-chip{border-color:var(--hb-point,#D0DFF0);background:rgba(255,255,255,.8)}.hp-reply-chip b{color:var(--hb-deep,#3E4360)}
.hp-back-pill{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(var(--hb-deep-rgb,62,67,96),.14);color:var(--hb-deep,#3E4360);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.hp-back-pill[hidden]{display:none}.composer{position:relative}
.message.hp-flash .bubble{box-shadow:0 0 0 3px rgba(var(--hb-soft-rgb,169,184,214),.45);transition:box-shadow .4s}
#chatBackButton{position:relative}#chatBackButton[data-unread]:not([data-unread="0"])::after{content:attr(data-unread);position:absolute;right:-6px;top:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hb-deep,#3E4360);color:#fff;font-size:10px;font-weight:800;line-height:18px;text-align:center}
.hp-place{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px 12px;border-radius:14px;border:1px solid var(--hb-point,#D0DFF0);background:#fff;max-width:100%}
.hp-place .hp-pin{width:34px;height:34px;border-radius:12px;background:var(--hb-light,#DEE9F5);display:grid;place-items:center;flex:none;color:var(--hb-deep,#3E4360)}.hp-place .hp-pin svg{width:18px;height:18px}
.hp-place .hp-pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.hp-place .hp-pt b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hp-place .hp-pt small{font-size:11px;color:#8b95a7}
.hp-place .hp-go,.hp-link .hp-go{flex:none;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--hb-point,#D0DFF0);background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);font:inherit;font-size:12px;font-weight:700;text-decoration:none;display:inline-grid;place-items:center}
.hp-link .hp-go{margin:6px 10px 10px;align-self:flex-start}
/* ══ 39b ══ */
@media (prefers-reduced-motion:reduce){.hp-typing i,.hp-typing .hp-tb i{animation:none;opacity:.8}}/* HD39-007: 39절 뒤에 다시 */
/* ══ 40판: 커뮤니티 탭(왓츠앱 커뮤니티 결 · 블루) ══ */
.hp-cm{display:flex;flex-direction:column;gap:6px;padding-bottom:24px}
.hp-cm-sec{display:flex;flex-direction:column;gap:2px}.hp-cm-sec .section-title{margin:10px 2px 2px}
#hpCmMine,#hpCmPick{display:flex;flex-direction:column}
.hp-cm-row{display:flex;align-items:center;gap:8px;padding:5px 2px;border-radius:14px}
.hp-cm-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:4px 2px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:12px}.hp-cm-main:active{background:rgba(var(--hb-soft-rgb,169,184,214),.12)}
.hp-cm-av{width:50px;height:50px;flex:none;display:grid;place-items:center;border-radius:18px;border:1px solid var(--hb-point,#D0DFF0);background:linear-gradient(135deg,var(--hb-light,#DEE9F5),var(--hb-light,#DEE9F5));font-size:24px;font-style:normal}
.hp-cm-txt{min-width:0;display:flex;flex-direction:column;gap:2px}.hp-cm-txt b{font-size:15px;color:var(--hb-deep,#3E4360);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hp-cm-txt small{font-size:12px;color:#8b95a7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-cm-act{flex:none;display:flex;gap:6px}
.hp-cm-chat,.hp-cm-go{width:40px;height:40px;border-radius:14px;border:1px solid var(--hb-point,#D0DFF0);background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);font-size:20px;cursor:pointer;display:grid;place-items:center}
.hp-cm-join{height:36px;padding:0 12px;border-radius:999px;border:0;background:var(--hb-deep,#3E4360);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}.hp-cm-join:disabled{opacity:.5}
.hp-cm-chips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}.hp-cm-chips::-webkit-scrollbar{display:none}
.hp-cm-chip{flex:none;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--hb-point,#D0DFF0);background:#fff;color:var(--hb-deep,#3E4360);font:inherit;font-size:13px;cursor:pointer}.hp-cm-chip i{font-style:normal;font-size:15px}.hp-cm-chip.on{background:var(--hb-deep,#3E4360);border-color:var(--hb-deep,#3E4360);color:#fff}
.hp-cm-km{display:flex;gap:6px;padding:2px 2px 6px}.hp-cm-kmb{height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--hb-point,#D0DFF0);background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);font:inherit;font-size:12px;font-weight:700;cursor:pointer}.hp-cm-kmb.on{background:var(--hb-deep,#3E4360);border-color:var(--hb-deep,#3E4360);color:#fff}
.hp-cm-hint{margin:4px 4px 6px;font-size:12px;color:#6b7490}
.hp-cm-allow,.hp-cm-open{align-self:flex-start;margin:6px 2px 8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--hb-point,#D0DFF0);background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
/* ══ 40b ══ */
.rail button i svg{width:24px;height:24px;display:block}
/* ══ 42 ══ */
.list-item .hp-rowtyping{display:none;gap:3px;align-items:center;font-size:13px;color:#5b6390}.list-item.hp-typing-row .hp-rowtyping{display:inline-flex}.list-item.hp-typing-row .copy > small{display:none}.list-item .hp-rowtyping em{font-style:normal;margin-left:5px}
.hp-ttl42{display:flex;align-items:center;gap:6px;min-width:0}.hp-ttl42 > h2{min-width:0}.chat-head>div:not(.avatar){min-width:0}#chatTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hp-ttl42 > .hp-onair-dot{flex-shrink:0}/* 쪼꼬 10-16: 좁은 머리에서 제목 여러 줄 → 한 줄 말줄임(카톡식) */.hp-rowtyping i{width:5px;height:5px;border-radius:50%;background:var(--hb-deep,#3E4360);opacity:.5;animation:hpTypingDot 1.2s infinite ease-in-out}.hp-rowtyping i:nth-child(2){animation-delay:.18s}.hp-rowtyping i:nth-child(3){animation-delay:.36s}
.list-item.hp-onair .avatar{position:relative}.list-item.hp-onair .avatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--hb-deep,#3E4360);border:2px solid #fff;animation:hpOnAir 1.6s infinite}
@keyframes hpOnAir{0%{box-shadow:0 0 0 0 rgba(var(--hb-soft-rgb,169,184,214),.55)}70%{box-shadow:0 0 0 7px rgba(var(--hb-soft-rgb,169,184,214),0)}100%{box-shadow:0 0 0 0 rgba(var(--hb-soft-rgb,169,184,214),0)}}
.hp-onair-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hb-deep,#3E4360);margin-left:6px;vertical-align:middle;animation:hpOnAir 1.6s infinite}.hp-onair-dot[hidden]{display:none}
.hp-notice{display:flex;align-items:center;gap:8px;margin:6px 12px 0;padding:8px 10px;border-radius:12px;background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);font-size:13px}.hp-notice[hidden]{display:none}.hp-notice .hp-nl{flex:none;font-weight:700}.hp-notice .hp-nt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer}.hp-notice .hp-nx{flex:none;border:0;background:none;color:inherit;font-size:18px;line-height:1;padding:0 4px;cursor:pointer}.hp-notice .hp-nx[hidden]{display:none}
body.night .hp-notice{background:var(--hb-deep,#3E4360);color:var(--hb-light,#DEE9F5)}
@media (prefers-reduced-motion:reduce){.hp-rowtyping i,.hp-onair-dot,.list-item.hp-onair .avatar::after{animation:none}}
/* 42 · 10-10 슈아 「헬덤 밑에 아이콘 키워달라고 했는데 그대로야」: 설계실 그림 아이콘은 설계 모드 .dm-ico 가 --dm-size 22px 로 그림(38판 font-size 24px 는 글자에만) → 레일은 그림·SVG·이모지 모두 28px */
.rail button i{font-size:28px}.rail button i svg{width:28px;height:28px}.rail button .dm-ico,.rail button i.dm-ico{--dm-size:28px;width:28px!important;height:28px!important}.rail button{gap:3px}
/* ══ 43 ══ 꾹 메뉴 카드(카톡 결) · 날짜 칩 · 대화창 ↩ ✗ */
#pressMenu.hp-m43{align-items:flex-start;background:rgba(var(--hb-deep-rgb,62,67,96),.3)}
#pressMenu.hp-m43 .sheet{position:absolute;width:300px;max-height:calc(100dvh - 16px);overflow:auto;scrollbar-width:none;padding:0;gap:0;display:flex;flex-direction:column;background:transparent;border-radius:0;box-shadow:none}
#pressMenu.hp-m43 .sheet::-webkit-scrollbar{display:none}
#pressMenu.hp-m43 .sheet > p{display:none}
#pressMenu.hp-m43 .sheet > button{min-height:46px;margin:0;padding:0 14px 0 16px;border-radius:0;background:#fff;color:var(--hb-deep,#3E4360);font-size:15px;font-weight:400;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--hb-light,#DEE9F5);box-shadow:none}
#pressMenu.hp-m43 .sheet > button.hp-first43{border-top:0;border-radius:16px 16px 0 0}
#pressMenu.hp-m43 .sheet > button.hp-last43{border-radius:0 0 16px 16px;box-shadow:0 10px 28px rgba(var(--hb-deep-rgb,62,67,96),.18)}
#pressMenu.hp-m43 .sheet > button.hp-first43.hp-last43{border-radius:16px}
#pressMenu.hp-m43 .sheet > button[data-hp43=close]{display:none}
#pressMenu.hp-m43 .sheet > button > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
#pressMenu.hp-m43 .sheet > button > i{flex:none;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:#4a5378;font-style:normal}
#pressMenu.hp-m43 .sheet > button > i svg{width:22px;height:22px}
#pressMenu.hp-m43 .sheet > button.hp-danger43,#pressMenu.hp-m43 .sheet > button.hp-danger43 > i{color:#d9534f}
#pressMenu.hp-m43 .sheet > button.hp-more43 > span{color:var(--hb-deep,#3E4360)}
#pressMenu.hp-m43 .sheet > button.hp-press-reply{font-weight:400}
#pressMenu.hp-m43 .hp-react-bar{order:99;margin:8px 0 0;padding:6px 8px;background:#fff;border-radius:999px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:space-between;box-shadow:0 8px 24px rgba(var(--hb-deep-rgb,62,67,96),.18)}
#pressMenu.hp-m43 .hp-react-bar.all{border-radius:18px;flex-wrap:wrap;overflow:auto}
#pressMenu.hp-m43 .hp-react-bar .hp-react-q{width:40px;height:40px;background:transparent;font-size:24px;flex:none}
#pressMenu.hp-m43 .hp-react-bar .hp-react-q.on{background:var(--hb-light,#DEE9F5)}
#pressMenu.hp-m43 .hp-react-bar .hp-react-plus{background:#1f2433;color:#fff;border:0;font-size:20px}
#pressMenu.hp-m43.hp-below .hp-react-bar{order:-1;margin:0 0 8px}/* 말 아래로 갈 땐 알약이 말 바로 아래 · 카드는 그 밑 */
#pressMenu.hp-m43 .hp-react-bar .hp-react-custom,.hp-react-pill .hp-react-custom{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--hb-deep,#3E4360)}
.hp-react-pill .hp-react-custom{width:18px;height:18px;font-size:14px}
.hp-notice{position:sticky;top:0;z-index:3;margin:0 0 6px;box-shadow:0 2px 10px rgba(var(--hb-deep-rgb,62,67,96),.08)}/* 43(HD42-001): 목록 안 맨 위 */
.hp-notice-full{white-space:pre-wrap;line-height:1.5;margin:4px 4px 8px;font-size:14px;color:var(--ink,var(--hb-deep,#3E4360))}
body.night #pressMenu.hp-m43 .sheet > button{background:var(--hb-deep,#3E4360);color:var(--hb-light,#DEE9F5);border-color:var(--hb-deep,#3E4360)}body.night #pressMenu.hp-m43 .sheet > button > i{color:var(--hb-point,#D0DFF0)}body.night #pressMenu.hp-m43 .hp-react-bar{background:var(--hb-deep,#3E4360)}
.hp-reply-btn{display:none!important}/* 43: 말마다 ↩ ✗ · 답장은 꾹 메뉴·오른쪽 밀기 */
.bubble-translate{font-size:15px;line-height:1;padding:0 4px}
/* ══ 44 ══ 캡처 모드(카톡 결) */
.hp-cap-top,.hp-cap-bot{position:fixed;left:0;right:0;z-index:70;display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--hb-light,#DEE9F5)}
.hp-cap-top{top:0;padding-top:calc(10px + env(safe-area-inset-top))}.hp-cap-bot{bottom:0;top:auto;border-bottom:0;border-top:1px solid var(--hb-light,#DEE9F5);padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.hp-cap-top .hp-cap-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}.hp-cap-top .hp-cap-t b{font-size:15px;color:var(--hb-deep,#3E4360)}.hp-cap-top .hp-cap-t small{font-size:11px;color:#8b95a7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hp-cap-top button,.hp-cap-bot button{border:0;background:transparent;color:var(--hb-deep,#3E4360);cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:inherit}
.hp-cap-top .hp-cap-x{width:40px;height:40px;border-radius:50%;background:var(--hb-light,#DEE9F5);justify-content:center}.hp-cap-top .hp-cap-x svg{width:20px;height:20px}
.hp-cap-top .hp-cap-clear{height:36px;padding:0 14px;border-radius:999px;background:var(--hb-light,#DEE9F5);font-size:13px}
.hp-cap-bot .hp-cap-opt{height:40px;padding:0 14px;border-radius:999px;background:var(--hb-light,#DEE9F5);font-size:14px}.hp-cap-bot .hp-cap-opt svg{width:20px;height:20px}.hp-cap-bot .hp-cap-sp{flex:1}
.hp-cap-bot .hp-cap-save,.hp-cap-bot .hp-cap-share{width:44px;height:44px;border-radius:50%;background:var(--hb-light,#DEE9F5);justify-content:center}.hp-cap-bot .hp-cap-save svg,.hp-cap-bot .hp-cap-share svg{width:22px;height:22px}
body.hp-capmode #messageList .message{position:relative;padding-left:34px}body.hp-capmode #messageList .message.mine{padding-left:0;padding-right:34px}
body.hp-capmode #messageList .message::before{content:"";position:absolute;left:8px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:2px solid var(--hb-point,#D0DFF0);background:#fff;box-sizing:border-box}
body.hp-capmode #messageList .message.mine::before{left:auto;right:8px}
body.hp-capmode #messageList .message.hp-capsel::before{background:var(--hb-deep,#3E4360);border-color:var(--hb-deep,#3E4360);box-shadow:inset 0 0 0 4px #fff}
body.hp-capmode #messageList .message:not(.hp-capsel){opacity:.55}
body.hp-capmode #messageList .message .bubble{cursor:pointer}
body.hp-capmode .composer,body.hp-capmode .hp-back-pill{visibility:hidden}
#pressMenu .sheet.hp-cap-sheet .hp-cap-h{font-weight:700;font-size:15px;color:var(--hb-deep,#3E4360);text-align:center;margin:4px 0 8px}#pressMenu .sheet.hp-cap-sheet .hp-cap-g{margin:8px 4px 2px;font-size:11px;color:#8b95a7}
#pressMenu .sheet.hp-cap-sheet .hp-cap-o{display:flex;justify-content:space-between;align-items:center}#pressMenu .sheet.hp-cap-sheet .hp-cap-o i{font-style:normal;color:var(--hb-deep,#3E4360);visibility:hidden}#pressMenu .sheet.hp-cap-sheet .hp-cap-o.on i{visibility:visible}
body.night .hp-cap-top,body.night .hp-cap-bot{background:rgba(var(--hb-deep-rgb,62,67,96),.94);border-color:var(--hb-deep,#3E4360)}body.night .hp-cap-top button,body.night .hp-cap-bot button{color:var(--hb-light,#DEE9F5)}body.night .hp-cap-top .hp-cap-x,body.night .hp-cap-top .hp-cap-clear,body.night .hp-cap-bot .hp-cap-opt,body.night .hp-cap-bot .hp-cap-save,body.night .hp-cap-bot .hp-cap-share{background:var(--hb-deep,#3E4360)}
/* ══ 45 ══ *//* 로고 톤 · 변수(설계실 46판에서 바꿈 · 기본값 = 로고 팔레트) · 커뮤니티 아래쪽 유리결(10-10 슈아 「밑에도 차분히 살짝 유리결 · 보라빛 ✗」) · 45b(REVIEW-004): 주석 안으로 */
:root{--hb-deep:#3E4360;--hb-mid:#6B7290;--hb-soft:#A9B8D6;--hb-point:#D0DFF0;--hb-light:#DEE9F5;--hb-deep-rgb:62,67,96;--hb-mid-rgb:107,114,144;--hb-soft-rgb:169,184,214;--hb-point-rgb:208,223,240;--hb-light-rgb:222,233,245}
.hp-cm .hp-cm-chip,.hp-cm .hp-cm-kmb{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(62,67,96,.14);color:#3E4360;box-shadow:none}
.hp-cm .hp-cm-chip.on,.hp-cm .hp-cm-kmb.on{background:#3E4360;border-color:#3E4360;color:#fff}
.hp-cm .hp-cm-row{background:rgba(255,255,255,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(62,67,96,.1)}
.hp-cm .hp-cm-av{background:#DEE9F5;color:#3E4360}
.hp-cm .hp-cm-join,.hp-cm .hp-cm-open,.hp-cm .hp-cm-allow{background:#3E4360;color:#fff;border:0}
.hp-cm .hp-cm-chat,.hp-cm .hp-cm-go{background:rgba(255,255,255,.7);border:1px solid rgba(62,67,96,.16);color:#3E4360}
.hp-cm .hp-cm-hint{color:#6B7290}
body.night .hp-cm .hp-cm-chip,body.night .hp-cm .hp-cm-kmb,body.night .hp-cm .hp-cm-row,body.night .hp-cm .hp-cm-chat,body.night .hp-cm .hp-cm-go{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#DEE9F5}

/* ══ 헬덤 46(10-10 슈아 「위치가 뒤죽박죽」): 상대 아바타는 말 위에(카톡 결) — 엔진은 폰(≤699)에서만 위 맞춤 · 데스크톱은 flex-end 라 공감 알약·링크 카드로 길어진 줄에서 아바타가 시간 줄까지 내려감 ══ */
#messageList .message .message-avatar{align-self:flex-start}

/* ══ 헬덤 46b(10-10): 나와의 채팅 아이콘 = 미니미 얼굴 칸(아래 왼쪽 · 48 기준 1.5/27.5/18) + 공통 말풍선(전체) · 전달 CSS 비율(em) 그대로 · 링·바탕 ✗ ══ */
.avatar.hp-selfchat{position:relative;overflow:visible;border:0;background:transparent;box-shadow:none!important;width:1em;height:1em;font-size:50px;display:block}
@media(max-width:699px){.list-item .avatar.hp-selfchat{font-size:46px}}
#hpSelfRow .avatar.hp-self-av{flex:none;font-size:44px}
.avatar.hp-selfchat .hp-selfpt{position:absolute;z-index:0;left:0;top:.46em;width:.54em;height:.54em;/* 46i: 얼굴 48 기준 26px */box-sizing:border-box;border:.025em solid var(--hb-light,#DEE9F5);border-radius:.1791667em;overflow:hidden;background:#fff;display:block}/* 46f(슈아 「조금만 살짝 키우면」): 48 기준 22px · 모서리 8 */
.avatar.hp-selfchat .hp-selfpt[hidden]{display:none}
.avatar.hp-selfchat .hp-selfpt img,.avatar.hp-selfchat .hp-selfpt canvas{width:100%!important;height:100%!important;object-fit:cover!important;object-position:top;display:block;border-radius:0}
.avatar.hp-selfchat .hp-selfbub{position:absolute;z-index:1;top:0;right:0;width:.82em;height:.82em;pointer-events:none;display:block}/* 46i: 말풍선 조금 작게(오른쪽 위 그대로) */
.avatar.hp-selfchat .hp-selfbub img{width:100%;height:100%;display:block}

/* 46b 레일(10-10 슈아 「밑에 업데이트 아이콘 조금만 더 키워줘 · 설정 아이콘은 조금 줄이구」): 42절 28px 기준 · 업데이트 32 · 설정 24(그림·SVG·이모지 모두) */
.rail button[data-tab="updates"] i{font-size:32px}.rail button[data-tab="updates"] i svg{width:32px;height:32px}.rail button[data-tab="updates"] .dm-ico,.rail button[data-tab="updates"] i.dm-ico{--dm-size:32px;width:32px!important;height:32px!important}
.rail button[data-tab="settings"] i{font-size:24px}.rail button[data-tab="settings"] i svg{width:24px;height:24px}.rail button[data-tab="settings"] .dm-ico,.rail button[data-tab="settings"] i.dm-ico{--dm-size:24px;width:24px!important;height:24px!important}

/* ══ 헬덤 47(10-10): 방 머리 라이브 단추 — 꺼짐 회색 · 상대 접속 중 = 대표색 채움 + 맥박(42절 hpOnAir) · 내 온에어 켜짐 = 테두리 ══ */
.hp-live47{position:relative;color:var(--hb-mid,#6B7290)}.hp-live47 i{display:inline-grid;place-items:center;line-height:0}.hp-live47 svg{width:20px;height:20px}
.hp-live47.on{color:#fff;background:var(--hb-deep,#3E4360)!important;animation:hpOnAir 1.6s infinite}
.hp-live47.me::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--hb-deep,#3E4360);pointer-events:none}
.hp-live47.on.me::after{border-color:var(--hb-point,#D0DFF0)}
@media (prefers-reduced-motion:reduce){.hp-live47.on{animation:none}}

/* 46c(HD46B-002): 설계 모드에선 나와의 채팅 말풍선 자리가 직접 눌리게(줄 슬롯 ✗) */
body.held-design .avatar.hp-selfchat .hp-selfbub{pointer-events:auto;cursor:pointer}
/* 46d(슈아 「사용자 미니미 얼굴 · 사진 없으면 기본 아이콘」): 얼굴 칸 내용별 — 미니미(이미지·five-look 캔버스) = 얼굴 크롭(14판 반신 규칙 · 전신 선택이어도) · 사진 = 위쪽 중심 cover · 기본 아이콘 = 그대로 */
.avatar.hp-selfchat .hp-selfpt.hp-mm img,.avatar.hp-selfchat .hp-selfpt.hp-mm canvas,body.hp-mm-full .avatar.hp-selfchat .hp-selfpt.hp-mm img,body.hp-mm-full .avatar.hp-selfchat .hp-selfpt.hp-mm canvas{object-fit:cover!important;object-position:50% 8%!important;transform:scale(1.85)!important;transform-origin:50% 12%!important}
.avatar.hp-selfchat .hp-selfpt.hp-photo img{object-fit:cover!important;object-position:50% 25%!important;transform:none!important}
.avatar.hp-selfchat .hp-selfpt canvas.hp-face,.avatar.hp-selfchat .hp-selfpt.hp-mm canvas.hp-face,body.hp-mm-full .avatar.hp-selfchat .hp-selfpt.hp-mm canvas.hp-face{width:100%!important;height:100%!important;transform:none!important;object-fit:fill!important;object-position:50% 50%!important;display:block}/* 46e·46g(HD49E-002): 잘라 그린 얼굴엔 옛 1.85 확대 ✗(전신 선택이어도) */
.avatar.hp-selfchat .hp-selfpt.hp-gif img,body.hp-mm-full .avatar.hp-selfchat .hp-selfpt.hp-gif img{object-fit:cover!important;object-position:50% 6%!important;transform:scale(1.45)!important;transform-origin:50% 10%!important}/* 46g: 움직이는 GIF 는 CSS 반신 */
.avatar.hp-selfchat .hp-selfpt.hp-knockout{background:transparent}/* 46e: 바탕을 뺀 얼굴은 칸도 투명(테두리만) */
.avatar.hp-selfchat .hp-selfpt.hp-default img{object-fit:cover!important;object-position:50% 50%!important;transform:none!important}
/* 46d-3: 프로필 시트 「나에게」 = 같은 아이콘(28px) · 옛 아이콘 숨김 */
.profile-actions .avatar.hp-selfchat{font-size:40px;flex:0 0 auto;order:-1}#profileSelfRoom .avatar.hp-selfchat .hp-selfpt,#profileSelfRoom .avatar.hp-selfchat .hp-selfbub{font-size:40px}/* 46i: 프로필 시트도 같은 틀(얼굴 ≈22px) *//* 3g(REV-003): 단추 span 13px 규칙이 아이콘 안 span 에 닿지 않게 */#profileSelfRoom .hp-ico,#profileSelfRoom>:not(span):not(.hp-self-av){display:none!important}/* 46f: 라벨·내 아바타 외 모두 숨김 */

/* ══ 헬덤 48a(10-10): 공지 카드 = 홈 위젯 유리결 · 접힘(종류+제목) · .hp-open 이면 본문 · 접는 표시 ✗ ══ */
#noticeList article.setting-card{position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.12) 60%),rgba(255,255,255,.34);backdrop-filter:blur(26px) saturate(1.6) brightness(1.03);-webkit-backdrop-filter:blur(26px) saturate(1.6) brightness(1.03);box-shadow:0 10px 28px rgba(var(--hb-deep-rgb,62,67,96),.08),inset 0 1px 0 rgba(255,255,255,.8);transition:box-shadow .18s ease}
#noticeList article.setting-card:active{box-shadow:0 4px 14px rgba(var(--hb-deep-rgb,62,67,96),.1),inset 0 1px 0 rgba(255,255,255,.8)}
#noticeList article.setting-card h3{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--hb-deep,#3E4360)}
#noticeList article.setting-card>p{display:none;margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2,#4a5378);font-size:13px;line-height:1.55}
#noticeList article.setting-card.hp-open>p{display:block}
#noticeList article.setting-card:focus-visible{outline:2px solid var(--hb-soft,#A9B8D6);outline-offset:2px}

/* ══ 헬덤 48c(10-10 슈아 「아이콘 크기를 일정하게 · 위치 삐뚤빼뚤」): 레일 아이콘 칸 34×34 고정 · 안 그림 28 가운데 · 46b 탭별 32/24 접음(크기는 설계 모드 크기 띠로 자리마다) ══ */
.rail button{display:grid;place-items:center;align-content:center;justify-items:center;gap:3px}
.rail button i,.rail button[data-tab="updates"] i,.rail button[data-tab="settings"] i{display:grid;place-items:center;width:34px;height:34px;margin:0 auto;line-height:1;font-size:28px;overflow:visible}
.rail button i svg,.rail button i img,.rail button[data-tab="updates"] i svg,.rail button[data-tab="settings"] i svg{width:28px;height:28px;display:block}
.rail button .dm-ico,.rail button i.dm-ico,.rail button[data-tab="updates"] .dm-ico,.rail button[data-tab="updates"] i.dm-ico,.rail button[data-tab="settings"] .dm-ico,.rail button[data-tab="settings"] i.dm-ico{--dm-size:28px;width:28px!important;height:28px!important;margin:0 auto}
.rail button i.dm-ico{width:34px!important;height:34px!important;background-size:28px 28px!important}
.rail button span{line-height:1.1;text-align:center}

/* 48c 얼굴 칸(슈아 「나와의 채팅에 내 미니미 전신으로 나오는 게 아니라 반신 얼굴만」): 나와의 채팅 얼굴 칸 안의 미니미(/api/minimi/avatar 사진 · five-look 캔버스)는 14판 반신 규칙을 늘(전신 선택 hp-mm-full 이어도) · 일반 사진은 위쪽 cover 그대로 */
.avatar.hp-selfchat .hp-selfpt:not(.hp-gif) img[src*="/api/minimi/avatar"],.avatar.hp-selfchat .hp-selfpt canvas.five-look-avatar,body.hp-mm-full .avatar.hp-selfchat .hp-selfpt:not(.hp-gif) img[src*="/api/minimi/avatar"],body.hp-mm-full .avatar.hp-selfchat .hp-selfpt canvas.five-look-avatar{object-fit:cover!important;object-position:50% 8%!important;transform:scale(1.85)!important;transform-origin:50% 12%!important}

/* 48d(HD48-004): 레일 그림 자리(i.dm-ico) 래퍼는 탭별 선택자까지 모두 34 · 그림은 28 */
.rail button i.dm-ico,.rail button[data-tab="updates"] i.dm-ico,.rail button[data-tab="settings"] i.dm-ico{width:34px!important;height:34px!important;background-size:28px 28px!important;background-position:center!important}

/* 10-12 출시 점검: 목록 머리 아이콘(22px) 누르는 자리만 44 높이로 · 모양 그대로 */
@media(max-width:699px){.pane-actions .icon-button{position:relative}.pane-actions .icon-button::after{content:"";position:absolute;inset:-11px -4px}} /* 5b: 폰만(gap 10) · 넓은 화면 gap 2 는 그대로 */

/* ══ 헬덤 50(10-12 슈아 「나와의 채팅 아이콘 정리」 · 「시안 안 봤어? · 얼굴 너무 커 · 배경 투명 · 얼굴 좀만 더 키워」): 배치시안 결 = 통통한 ⋯ 말풍선이 주인공(오른쪽 위) + 내 미니미 반신 얼굴은 아래 왼쪽 · 틀 = 예배이웃 아바타와 같은 50 · 바탕 투명 · 얼굴 28(50 기준 · 슈아 고른 ②안) · 꼬리 안 가리게 말풍선 70% ══ */
.avatar.hp-selfchat,.list-item .avatar.hp-selfchat,#hpSelfRow .avatar.hp-self-av{font-size:50px;width:1em;height:1em;flex:0 0 1em;background:transparent}
.avatar.hp-selfchat .hp-selfpt,.avatar.hp-selfchat .hp-selfpt.hp-knockout{left:.03125em;top:.41em;width:.56em;height:.56em;border:.025em solid #DEE9F5;border-radius:.1791667em;background:transparent}
.avatar.hp-selfchat .hp-selfbub{top:.06em;right:.08em;width:.7em;height:.7em}/* 슈아 「미니미 쪽으로 · 왼쪽 4 · 아래 3」(50 기준) */
/* 설계실 슬롯 그림이 안쪽 img 를 통째로 바꾸던 것(design-mode.js 93 · 「나에게」 사람 말풍선 둘) → 말풍선은 ⋯ · 미니미는 제 그림 · 🌱 자리 dm-ico ✗ · 말풍선 자기 슬롯에 그림을 넣으면 그건 그대로 */
.avatar.hp-selfchat .hp-selfbub:not([data-dm-art]) img{content:url("/rebuild/icons/self-chat-bubble.svg?v=20261010-46b")!important}
.avatar.hp-selfchat .hp-selfpt img{content:normal!important}
.avatar.hp-selfchat .dm-ico,#profileSelfRoom>.dm-ico,#hpSelfRow>.dm-ico{display:none!important}
/* 채팅 탭 맨 아래 줄이 ✦(설계 단추)에 가리지 않게 — 목록 아래 여백만 */
@media(max-width:699px){#roomList{padding-bottom:64px}}
/* 10-13: 업데이트 소식 「대화」 단추가 떠 있는 올리기 단추(.hp-up-fab · 오른쪽 44)에 덮이지 않게 — 폰만 */
@media(max-width:699px){#updatesView .hp-nchat{margin-right:48px}}
/* 10-13: 커뮤니티·공지 카드 양옆 여백 = 설정 카드와 같은 12 — 폰만 */
@media(max-width:699px){.hp-cm-row,#noticeList article.setting-card{margin-left:12px;margin-right:12px}}
/* 10-13 슈아: 라이브 단추 켜짐·방 제목 옆 온에어 점 = 빛 퍼지는 고리 맥박 #A9B8D6→#D0DFF0 · 2초(움직임 줄이기 설정이면 그대로 멈춤) */
@keyframes hpLiveRing{0%{box-shadow:0 0 0 0 rgba(169,184,214,.8)}60%{box-shadow:0 0 0 8px rgba(208,223,240,.45)}100%{box-shadow:0 0 0 13px rgba(208,223,240,0)}}
@media (prefers-reduced-motion:no-preference){.hp-live47.on,.hp-onair-dot{animation:hpLiveRing 2s ease-out infinite}}
/* 10-13 슈아 「네이비 멍 같아 · 세련되게 · 빛나는 실시간 느낌 · 멍 같은 원 빼자」: 켜짐 = 남색 채움 ✗ → 하늘빛 빛 방울(안쪽 흰 빛) + 아이콘 은은한 빛(hpGlowIco 재사용) · 내 온에어 테두리는 얇은 하늘빛 · 제목 옆 점도 빛 점 */
.hp-onair-dot{background:radial-gradient(circle,#fff 0 28%,#A9B8D6 32%);box-shadow:0 0 6px rgba(169,184,214,.9)}
/* 10-13 슈아 「동그란 버튼 말고 · 투박해 · 수신기 따라 빛이 · 카톡 입력 중 점처럼 · 로고 십자가 가운데 빛」: 동그란 틀·채움·고리·테두리 전부 ✗ → 아이콘만 · 켜짐 = ✦ → 안쪽 물결 → 바깥 물결 차례로 빛남(1.4초) + 은은한 빛(hpGlowIco) · 내 온에어 = 아이콘 남색(꺼짐 회색) */
.hp-live47,.hp-live47.on{background:transparent!important;border:0!important;box-shadow:none!important;animation:none!important}.hp-live47::after,.hp-live47.me::after,.hp-live47.on.me::after{content:none!important}
.hp-live47 svg{width:24px;height:24px;overflow:visible}.hp-live47.me,.hp-live47.on{color:var(--hb-deep,#3E4360)}
.hp-live47 .lv-c,.hp-live47 .lv-w1,.hp-live47 .lv-w2{transform-box:view-box;transform-origin:12px 12px}
@keyframes hpLvBeat{0%,100%{opacity:.22;transform:scale(.88);color:#3E4360}24%{opacity:1;transform:scale(1.16);color:#5E86E6}48%{opacity:.55;transform:scale(.98);color:#7F9BD8}}
@keyframes hpLvStar{0%,100%{opacity:.55;transform:scale(.78);color:#3E4360}24%{opacity:1;transform:scale(1.36);color:#4F7BEA}48%{opacity:.85;transform:scale(.96);color:#8FAAE6}}
@keyframes hpLvGlow{0%,100%{filter:drop-shadow(0 0 1px rgba(169,184,214,.5))}24%{filter:drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 7px rgba(110,150,240,.95)) drop-shadow(0 0 14px rgba(208,223,240,1))}48%{filter:drop-shadow(0 0 4px rgba(140,170,235,.7))}}/* 10-13 슈아 「반짝이는 거 티 나게 · 최대한 반짝이는 색감」: 꼭대기에서 밝은 페리윙클 + 흰 빛 겹 */
@media (prefers-reduced-motion:no-preference){.hp-live47.on i{animation:hpLvGlow 1.5s ease-in-out infinite}.hp-live47.on .lv-c{animation:hpLvStar 1.5s ease-in-out infinite}.hp-live47.on .lv-w1{animation:hpLvBeat 1.5s ease-in-out .2s infinite}.hp-live47.on .lv-w2{animation:hpLvBeat 1.5s ease-in-out .4s infinite}}
/* 10-14 슈아 「컴퓨터는 수신기 빛이 안 들어와 · 기본 켬」: 움직임 줄이기(윈도우 애니메이션 끔 · 아이폰 동작 줄이기)여도 켜짐이 보이게 — 반짝임 대신 빛 색·은은한 빛 고정 */
@media (prefers-reduced-motion:reduce){.hp-live47.on i{animation:hpLvGlow 1.5s ease-in-out infinite!important}.hp-live47.on .lv-c{animation:hpLvStar 1.5s ease-in-out infinite!important}.hp-live47.on .lv-w1{animation:hpLvBeat 1.5s ease-in-out .2s infinite!important}.hp-live47.on .lv-w2{animation:hpLvBeat 1.5s ease-in-out .4s infinite!important}}/* 10-14 슈아 「폰처럼 반짝이게」: 움직임 줄이기여도 수신기만은 폰과 같은 반짝임(다른 움직임은 그대로 멈춤) */
/* 10-14 슈아: 목록 온에어 = 사진 칸 밖 ✦ 십자가 빛 배지(잘림 ✗ · 수신기와 같은 빛 · 옛 점 ✗) */
.list-item.hp-onair{position:relative}.list-item.hp-onair .avatar::after{content:none}
.list-item .hp-air{position:absolute;z-index:2;width:18px;height:18px;display:grid;place-items:center;color:#5E86E6;pointer-events:none}.list-item .hp-air svg{width:16px;height:16px;overflow:visible;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 4px rgba(110,150,240,.55))}/* 10-14 슈아 「원이 하나 더 있으니 복잡 · 은은하게」: 흰 원 ✗ · 빛 아이콘만(흰 테두리 빛으로 사진 위에서도 보이게) */
.list-item .hp-air .lv-c,.list-item .hp-air .lv-w1{transform-box:view-box;transform-origin:12px 12px}
.list-item .hp-air svg{animation:hpLvGlow 1.5s ease-in-out infinite}.list-item .hp-air .lv-c{animation:hpLvStar 1.5s ease-in-out infinite}.list-item .hp-air .lv-w1{animation:hpLvBeat 1.5s ease-in-out .2s infinite}
/* 10-15 슈아: 따로 연 헬덤 머리줄 THE HELD 집 아이콘(🔍 왼쪽 · 로고 남색) */
.pane-actions .hp-home{display:inline-grid;place-items:center;color:var(--hb-deep,#3E4360);text-decoration:none}.pane-actions .hp-home svg{width:24px;height:24px}
/* 10-15 슈아 폴더 0단계: 목록 머리줄 QR(⚙ 왼쪽 · 로고 남색) */
.pane-actions .hp-qr{display:inline-grid;place-items:center;color:var(--hb-deep,#3E4360)}.pane-actions .hp-qr[hidden]{display:none}.pane-actions .hp-qr svg{width:23px;height:23px}
/* 10-15 슈아 폴더 5단계: 목록 머리줄 ⋮(채팅 탭 · ⚙ 오른쪽) */
.pane-actions .hp-sortbtn{display:inline-grid;place-items:center;color:var(--hb-deep,#3E4360)}.pane-actions .hp-sortbtn[hidden]{display:none}.pane-actions .hp-sortbtn svg{width:22px;height:22px}
/* 10-15 슈아 폴더 6단계: 새로운 채팅 시트(아이콘 4 · 로고 남색) */
.hp-newchat-title{margin:4px 0 10px;text-align:center;font-weight:700;font-size:15px;color:var(--hb-deep,#3E4360)}.hp-newchat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 10px}.hp-newchat-b{display:grid;justify-items:center;gap:6px;padding:10px 2px;border:0;border-radius:16px;background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);cursor:pointer}.hp-newchat-b[hidden]{display:none}.hp-newchat-b i{display:grid;place-items:center;width:30px;height:30px}.hp-newchat-b svg{width:26px;height:26px}.hp-newchat-b small{font-size:11.5px;font-weight:600;white-space:nowrap}
/* 10-15 슈아 폴더 1단계: 폴더 칩(이모지 + 이름 · 알약과 같은 결) */
.hp-pill.hp-folder{display:inline-flex;align-items:center;gap:5px}.hp-pill.hp-folder i{font-style:normal;font-size:13px;line-height:1}
/* 10-15 슈아 폴더 2~4단계: 관리·만들기·방 선택 시트(카톡 결 · 로고 팔레트) */
.hp-pill.hp-folder-more{min-width:40px;font-weight:700;letter-spacing:.06em}
.hp-fo .hp-fo-head{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:6px;margin-bottom:6px}.hp-fo .hp-fo-head b{text-align:center;font-size:15px;color:var(--hb-deep,#3E4360)}
.hp-fo .hp-fo-reorder{border:0;background:none;color:var(--hb-mid,#6B7290);font-size:13px;font-weight:600;padding:6px 8px;cursor:pointer}
.hp-fo .hp-fo-sec{margin:10px 0}.hp-fo .hp-fo-sec .hp-cap{margin:0 2px 6px;font-size:12px;color:var(--hb-mid,#6B7290)}
.hp-fo .hp-fo-row{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 10px;border:0;border-radius:14px;background:#fff;margin-bottom:6px;text-align:left;font:inherit;color:var(--hb-deep,#3E4360)}
.hp-fo .hp-fo-row b{flex:1;font-weight:600;font-size:14px}.hp-fo .hp-fo-emo{font-style:normal;width:26px;text-align:center;font-size:18px}.hp-fo .hp-fo-n{color:var(--hb-mid,#6B7290);font-size:12px}.hp-fo .hp-fo-go{color:var(--hb-mid,#6B7290);font-size:18px}.hp-fo .hp-fo-tap{cursor:pointer}
.hp-fo .hp-fo-tog{border:1px solid var(--hb-point,#D0DFF0);background:#fff;color:var(--hb-deep,#3E4360);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer}.hp-fo .hp-fo-tog.add{background:var(--hb-deep,#3E4360);border-color:var(--hb-deep,#3E4360);color:#fff}
.hp-fo .hp-fo-mv{width:34px;height:34px;border:0;border-radius:10px;background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);font-size:15px;cursor:pointer}.hp-fo .hp-fo-mv:disabled{opacity:.35}
.hp-fo .hp-fo-create{width:100%;min-height:46px;border:1px dashed var(--hb-soft,#A9B8D6);border-radius:14px;background:none;color:var(--hb-deep,#3E4360);font-weight:600;cursor:pointer;margin:2px 0 6px}
.hp-fo .hp-fo-none{margin:4px 2px 8px;color:var(--hb-mid,#6B7290);font-size:13px}.hp-fo .hp-fo-err{margin:8px 2px;color:#C0392B;font-size:12.5px}
.hp-fo .hp-fo-emopick{display:flex;align-items:center;gap:10px;margin:6px 0}.hp-fo .hp-fo-emocur{width:52px;height:52px;flex:none;border:1px solid var(--hb-point,#D0DFF0);border-radius:16px;background:#fff;font-size:26px;cursor:pointer}.hp-fo .hp-fo-emopick .hp-field{flex:1;margin:0}
.hp-fo .hp-fo-emogrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-height:180px;overflow:auto;padding:6px;margin:4px 0 8px;border-radius:14px;background:#fff}.hp-fo .hp-fo-emogrid[hidden]{display:none}.hp-fo .hp-fo-emogrid button{border:0;background:none;font-size:22px;padding:4px 0;border-radius:8px;cursor:pointer}
.hp-fo .hp-fo-search{width:100%;box-sizing:border-box;min-height:40px;margin:4px 0 8px;padding:0 12px;border:1px solid var(--hb-point,#D0DFF0);border-radius:12px;font:inherit}
.hp-fo .hp-fo-pick{max-height:52vh;overflow:auto}.hp-fo .hp-fo-prow{display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 6px;border-radius:12px;cursor:pointer}.hp-fo .hp-fo-prow b{flex:1;font-weight:600;font-size:14px;color:var(--hb-deep,#3E4360)}
.hp-fo .hp-fo-prow .hp-av{width:40px;height:40px;flex:none;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:var(--hb-light,#DEE9F5);font-size:12px;font-weight:700;color:var(--hb-deep,#3E4360)}.hp-fo .hp-fo-prow .hp-av img{width:100%;height:100%;object-fit:cover}
.hp-fo .hp-fo-prow input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border:1.5px solid var(--hb-soft,#A9B8D6);border-radius:50%;background:#fff;cursor:pointer;display:grid;place-items:center}.hp-fo .hp-fo-prow input:checked{background:var(--hb-deep,#3E4360);border-color:var(--hb-deep,#3E4360)}.hp-fo .hp-fo-prow input:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
/* 10-15 슈아 아이폰 사진: 폴더 시트가 화면 밖으로 넘침 — 사파리는 입력칸 기본 폭을 글꼴 평균 글자폭(한글 글꼴 = 큼)으로 잡아 시트를 밀어냄 → 칸·줄을 시트 폭 안에 묶음 · 기호 → 선 아이콘 가운데 */
.press-menu .sheet.hp-fo{grid-template-columns:minmax(0,1fr);overflow-x:hidden;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.hp-fo .hp-fo-emopick .hp-field{min-width:0;padding:0}.hp-fo .hp-field input{width:100%;min-width:0;font-size:16px}.hp-fo .hp-fo-search{font-size:16px}
.hp-fo .hp-fo-head{grid-template-columns:44px minmax(0,1fr) auto}.hp-fo .hp-fo-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-fo .hp-fo-row b,.hp-fo .hp-fo-prow b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hp-fo .hp-fo-row>*,.hp-fo .hp-fo-prow>*{flex-shrink:0}.hp-fo .hp-fo-row>b,.hp-fo .hp-fo-prow>b{flex-shrink:1}
.press-menu .sheet.hp-fo .hp-fo-head .hp-x{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:var(--hb-deep,#3E4360)}.hp-fo .hp-x svg{width:22px;height:22px;display:block}.press-menu .sheet.hp-fo .hp-fo-head .hp-fo-reorder{min-height:44px;min-width:44px;padding:0 6px;border:0;background:transparent;box-shadow:none;color:var(--hb-deep,#3E4360)}
.hp-fo .hp-fo-go{display:grid;place-items:center;width:20px;height:20px}.hp-fo .hp-fo-go svg{width:18px;height:18px;display:block}
.press-menu .sheet.hp-fo .hp-fo-mv{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0}/* 코덱스 R001 · 애플 44pt 누름 영역 */.hp-fo .hp-fo-mv svg{width:18px;height:18px;display:block}
.hp-fo .hp-fo-emo{display:grid;place-items:center;height:26px}.hp-fo .hp-fo-emo svg{width:22px;height:22px;display:block;color:var(--hb-deep,#3E4360)}
/* 10-15 슈아: 다른 시트 입력칸도 — 사파리 입력칸·글상자 기본 폭(한글 글꼴 평균 글자폭)이 부모보다 넓어지지 ✗ · :where = 이미 폭을 정한 규칙이 이김 · 시트 칸은 시트 폭 안 */
:where(input:not([type=checkbox],[type=radio],[type=file],[type=color],[type=range],[type=hidden]),textarea,select){min-width:0;max-width:100%}
.press-menu .sheet{grid-template-columns:minmax(0,1fr)}.hp-field input{width:100%}
/* 10-15 슈아 그룹방 온에어 사람마다(B안): 대화 속 사진 링 빛(숨 쉬듯) + ✦(목록 배지와 같은 빛) · 수신기 옆 얼굴 줄 · 「지금 함께」·「실시간 로그」 시트 */
.message.hp-oa-row{position:relative}
.message .message-avatar.hp-ring{box-shadow:0 0 0 2.5px #5E86E6,0 0 8px 2px rgba(150,185,250,.45);animation:hpOaRing 2.6s ease-in-out infinite}/* 슈아: 파란 띠 ✗ → 은혜의 바다 반짝 + 블루결 · 수신되듯 물결 퍼짐 */
@keyframes hpOaRing{0%{box-shadow:0 0 0 2.5px #5E86E6,0 0 6px 1px rgba(150,185,250,.35),0 0 0 2.5px rgba(150,185,250,.55)}35%{box-shadow:0 0 0 2.5px #9DBBF5,0 0 14px 4px rgba(170,200,252,.6),0 0 0 7px rgba(150,185,250,.25)}70%,100%{box-shadow:0 0 0 2.5px #6F93EA,0 0 8px 2px rgba(150,185,250,.4),0 0 0 11px rgba(150,185,250,0)}}
.message .hp-air{position:absolute;z-index:2;width:20px;height:20px;display:grid;place-items:center;color:#5E86E6;pointer-events:none;transform:translate(2px,2px)}/* 슈아: 동그라미 ✗ · 프로필 쪽으로 붙임 · 원 대신 빛 */
.message .hp-air::before{content:"";position:absolute;z-index:-1;inset:-7px;border-radius:50%;background:radial-gradient(circle,rgba(170,200,252,.75) 0,rgba(150,185,250,.35) 40%,rgba(150,185,250,0) 70%);animation:hpAirHalo 2.6s ease-in-out infinite}
.message .hp-air::after{content:"";position:absolute;z-index:-1;inset:1px;border-radius:50%;box-shadow:0 0 0 1px rgba(150,185,250,.3),0 0 8px 2px rgba(150,185,250,.45);animation:hpAirPing 2.6s ease-out infinite}
@keyframes hpAirHalo{0%,100%{transform:scale(.8);opacity:.6}35%{transform:scale(1.2);opacity:1}}
@keyframes hpAirPing{0%{transform:scale(.55);opacity:.9}80%,100%{transform:scale(1.9);opacity:0}}
.message .hp-air svg{width:18px;height:18px;overflow:visible;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 4px rgba(110,150,240,.55));animation:hpLvGlow 1.5s ease-in-out infinite}
.message .hp-air .lv-c,.message .hp-air .lv-w1{transform-box:view-box;transform-origin:12px 12px}.message .hp-air .lv-c{animation:hpLvStar 1.5s ease-in-out infinite}.message .hp-air .lv-w1{animation:hpLvBeat 1.5s ease-in-out .2s infinite}
@media (prefers-reduced-motion:reduce){.message .message-avatar.hp-ring{animation:none;box-shadow:0 0 0 2.5px #5E86E6,0 0 8px 2px rgba(150,185,250,.45)}.message .hp-air::before,.message .hp-air::after{animation:none}.message .hp-air::after{opacity:0}}
.hp-oa-faces{display:inline-flex;align-items:center;min-height:44px;padding:0 4px 0 9px;border:0;background:transparent;cursor:pointer}.hp-oa-faces[hidden]{display:none}
.hp-oa-faces .hp-oa-f{width:24px;height:24px;margin-left:-7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px #5E86E6;background:var(--hb-point,#D0DFF0);display:grid;place-items:center;overflow:hidden;font-size:11px;font-weight:700;color:var(--hb-deep,#3E4360)}
.hp-oa-f img{width:100%;height:100%;object-fit:cover}.hp-oa-faces .hp-oa-more{background:var(--hb-deep,#3E4360);color:#fff;font-size:10px}
.hp-oa-sheet .hp-oa-h{margin:6px 4px 2px;font-size:12px;font-weight:600;color:var(--hb-mid,#6B7290)}.hp-oa-sheet .hp-oa-h b{color:var(--hb-deep,#3E4360)}
.hp-oa-sheet .hp-oa-p,.hp-oa-sheet .hp-oa-e{display:flex;align-items:center;gap:10px;min-height:44px;padding:2px 6px}
.hp-oa-sheet .hp-oa-f{width:34px;height:34px;flex:none;border-radius:12px;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(94,134,230,.6);background:var(--hb-point,#D0DFF0);display:grid;place-items:center;overflow:hidden;font-size:13px;font-weight:700;color:var(--hb-deep,#3E4360)}
.hp-oa-sheet .hp-oa-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:var(--hb-deep,#3E4360)}
.hp-oa-sheet .hp-oa-st{width:18px;height:18px;flex:none;display:grid;place-items:center;color:#5E86E6}.hp-oa-sheet .hp-oa-st svg{width:16px;height:16px}
.hp-oa-sheet .hp-oa-t{width:42px;flex:none;font-size:12px;color:var(--hb-mid,#6B7290);font-variant-numeric:tabular-nums}.hp-oa-sheet .hp-oa-x{min-width:0;font-size:13px;color:var(--hb-deep,#3E4360)}.hp-oa-sheet .hp-oa-e:not(.in) .hp-oa-x{color:var(--hb-mid,#6B7290)}
/* 10-15 슈아 「실시간 라이브 온에어챗」 고정 폴더 칩: 02-wifi-cross 아이콘 · 빛나는 방이 있으면 물결이 안→밖 차례로 반짝(수신기 결) */
.hp-pill.hp-folder-onair i{display:inline-grid;place-items:center;width:18px;height:18px}.hp-pill.hp-folder-onair i svg{width:18px;height:18px;display:block;overflow:visible}
.hp-pill.hp-folder-onair.live i svg{animation:hpLvGlow 1.5s ease-in-out infinite}.hp-pill.hp-folder-onair.live .oa-w1{animation:hpOaWave 1.5s ease-in-out infinite}.hp-pill.hp-folder-onair.live .oa-w2{animation:hpOaWave 1.5s ease-in-out .2s infinite}.hp-pill.hp-folder-onair.live .oa-w3{animation:hpOaWave 1.5s ease-in-out .4s infinite}
@keyframes hpOaWave{0%,100%{opacity:.35}30%{opacity:1}}
.hp-fo .hp-fo-ico.live svg{animation:hpLvGlow 1.5s ease-in-out infinite;overflow:visible}.hp-fo .hp-fo-ico.live .oa-w1{animation:hpOaWave 1.5s ease-in-out infinite}.hp-fo .hp-fo-ico.live .oa-w2{animation:hpOaWave 1.5s ease-in-out .2s infinite}.hp-fo .hp-fo-ico.live .oa-w3{animation:hpOaWave 1.5s ease-in-out .4s infinite}/* 관리 시트 줄에서도 빛 */
@media (prefers-reduced-motion:reduce){.hp-pill.hp-folder-onair.live i svg,.hp-pill.hp-folder-onair.live path{animation:none}}
.hp-oa-sheet .hp-oa-log{max-height:38vh;overflow:auto}.hp-oa-sheet .hp-oa-empty{padding:10px 6px;font-size:13px;color:var(--hb-mid,#6B7290)}

/* 10-15 파블·슈아 채팅방 서랍(카톡 문법): 방 ☰ = 꽉 찬 서랍 · 상대 프로필 → 사진/파일/링크/게시판 카드 → 브리핑 보드 → 대화상대 → 원래 ☰ 단추 */
.press-menu .sheet.hp-drawer{height:100dvh;max-height:100dvh;overflow-y:auto;overflow-x:hidden;align-content:start;grid-template-columns:minmax(0,1fr);gap:8px;border-radius:0;padding:calc(8px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right));background:#F2F5FA;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
.press-menu .sheet.hp-drawer .hp-dw-hide{display:none}
.hp-dw{display:grid;gap:12px;min-width:0;color:var(--hb-deep,#3E4360)}
.hp-dw-head{position:relative;display:grid;justify-items:center;gap:10px;padding:6px 0 4px}
.press-menu .sheet .hp-dw-ic{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(62,67,96,.08);color:var(--hb-deep,#3E4360)}
.hp-dw-ic svg{width:22px;height:22px}
.hp-dw-back{position:absolute!important;left:0;top:6px}
.hp-dw-tools{position:absolute;right:0;top:6px;display:flex;gap:8px}
.hp-dw-face .avatar{width:84px;height:84px;border-radius:30px;border:0;box-shadow:0 6px 18px rgba(62,67,96,.12)}
.hp-dw-name{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:700}
.hp-dw-card{display:grid;gap:2px;min-width:0;padding:8px;border-radius:20px;background:#fff;box-shadow:0 1px 6px rgba(62,67,96,.05)}
.press-menu .sheet .hp-dw-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 10px;border:0;border-radius:14px;background:transparent;color:var(--hb-deep,#3E4360);font-size:15px;text-align:left}
.press-menu .sheet .hp-dw-row[hidden]{display:none}
.hp-dw-row i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);flex:none}
.hp-dw-row i svg{width:19px;height:19px}
.hp-dw-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-dw-row em{display:grid;color:var(--hb-soft,#A9B8D6)}.hp-dw-row em svg{width:18px;height:18px}
.hp-dw-strip{display:flex;gap:6px;overflow-x:auto;padding:2px 10px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.hp-dw-strip::-webkit-scrollbar{display:none}
.press-menu .sheet .hp-dw-th{flex:none;width:72px;height:72px;min-height:72px;padding:0;border:1px solid var(--hb-point,#D0DFF0);border-radius:12px;overflow:hidden;background:var(--hb-light,#DEE9F5);display:grid;place-items:center}
.hp-dw-th img{width:100%;height:100%;object-fit:cover;display:block}
.hp-dw-th.vid,.hp-dw-thmore{color:var(--hb-deep,#3E4360)}.hp-dw-vid svg,.hp-dw-thmore svg{width:26px;height:26px}
.hp-dw-cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 10px 4px}.hp-dw-cap b{font-size:15px}.hp-dw-cap small{font-size:13px;color:var(--hb-mid,#6B7290)}
.hp-dw-person{display:flex;align-items:center;gap:10px;min-height:56px;padding:4px 10px}
.hp-dw-person .avatar{width:44px;height:44px;border-radius:16px;border:0;flex:none}
.hp-dw-me{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--hb-deep,#3E4360);color:#fff;font-size:11px;font-weight:700;flex:none}
.hp-dw-pn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.press-menu .sheet.hp-drawer>button{background:#fff;border:0}
.press-menu .sheet .hp-dw-kind{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;background:transparent;border:0;text-align:center;color:var(--hb-deep,#3E4360);font-size:15px}.hp-dw-kind svg{width:18px;height:18px}
.hp-dw-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.hp-dw-chips[hidden]{display:none}
.press-menu .sheet .hp-dw-chip{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--hb-point,#D0DFF0);background:#fff;font-size:13px;text-align:center}.press-menu .sheet .hp-dw-chip.on{background:var(--hb-deep,#3E4360);color:#fff;border-color:var(--hb-deep,#3E4360)}
.hp-dw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.press-menu .sheet .hp-dw-grid .hp-dw-th{width:auto;height:auto;aspect-ratio:1;border-radius:8px}
/* 서랍 2판: 서랍 위에 겹치는 판(‹ = 서랍) · 채팅방 설정 · 파일·링크·게시판·글 작성 */
.press-menu .sheet.hp-drawer{position:relative}
.hp-dw-panel{position:fixed;inset:0;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr);background:#F2F5FA;color:var(--hb-deep,#3E4360);padding-top:env(safe-area-inset-top)}
.hp-dw-phead{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:6px;min-height:56px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
.hp-dw-phead>b{text-align:center;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hp-dw-phead>span{width:44px}
.hp-dw-pbody{overflow-y:auto;overflow-x:hidden;display:grid;align-content:start;gap:12px;padding:4px max(14px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.hp-dw-days{display:grid;gap:6px}.hp-dw-day{padding:8px 2px 2px;font-size:13px;font-weight:700;color:var(--hb-mid,#6B7290)}
.press-menu .sheet .hp-dw-th{position:relative}.hp-dw-dur{position:absolute;right:4px;bottom:4px;padding:1px 5px;border-radius:6px;background:rgba(62,67,96,.72);color:#fff;font-size:10.5px;font-weight:700}
.press-menu .sheet .hp-dw-drive{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:6px;border:0;border-radius:14px;background:#fff;color:var(--hb-deep,#3E4360);font-size:14px;font-weight:600}.hp-dw-drive i{display:grid}.hp-dw-drive svg{width:20px;height:20px}
.hp-dw-li{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 4px 4px 10px;border-radius:14px;background:#fff}
.hp-dw-lia{flex:1;display:flex;align-items:center;gap:10px;min-width:0;min-height:52px;color:var(--hb-deep,#3E4360);text-decoration:none}
.hp-dw-lia i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--hb-light,#DEE9F5);flex:none}.hp-dw-lia i svg{width:20px;height:20px}
.hp-dw-lit{display:grid;min-width:0}.hp-dw-lit b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hp-dw-lit small{font-size:12px;color:var(--hb-mid,#6B7290)}
.hp-dw-dl{display:grid;place-items:center;width:44px;height:44px;flex:none;color:var(--hb-deep,#3E4360)}.hp-dw-dl svg{width:20px;height:20px}
.hp-dw-lcard{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;color:var(--hb-deep,#3E4360);text-decoration:none}
.hp-dw-lpic{display:grid;place-items:center;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--hb-light,#DEE9F5)}.hp-dw-lpic img{width:100%;height:100%;object-fit:cover}.hp-dw-lpic svg{width:24px;height:24px}
.hp-dw-lcap{display:grid;gap:3px;min-width:0}.hp-dw-lcap b{font-size:14px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.hp-dw-lcap small{font-size:12px;color:var(--hb-mid,#6B7290);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-dw-tabs{justify-content:flex-start}
.press-menu .sheet .hp-dw-post{display:grid;gap:6px;min-height:0;padding:14px;border:0;text-align:left;background:#fff}.hp-dw-post p{margin:0;white-space:pre-wrap;font-size:14.5px;line-height:1.5;color:var(--hb-deep,#3E4360)}.hp-dw-post small{font-size:12px;color:var(--hb-mid,#6B7290)}
.hp-dw-tag{justify-self:start;padding:2px 8px;border-radius:999px;background:var(--hb-deep,#3E4360);color:#fff;font-size:11px;font-weight:700}
.hp-dw-empty{margin:24px 0;text-align:center;font-size:14px;color:var(--hb-mid,#6B7290)}
.press-menu .sheet .hp-dw-done{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--hb-deep,#3E4360);color:#fff;font-weight:700;text-align:center}.press-menu .sheet .hp-dw-done:disabled{opacity:.4}
.hp-dw-in,.hp-dw-ta{width:100%;box-sizing:border-box;border:0;border-radius:14px;background:#fff;padding:12px 14px;font:inherit;font-size:16px;color:var(--hb-deep,#3E4360)}.hp-dw-in{font-weight:700}.hp-dw-ta{resize:vertical;min-height:180px;line-height:1.5}
.hp-dw-check{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px}.hp-dw-check[hidden]{display:none}.hp-dw-check input{width:20px;height:20px;accent-color:var(--hb-deep,#3E4360)}
.hp-dw-err{margin:0;font-size:13px;color:#c2453f}.hp-dw-err[hidden]{display:none}
.hp-dw-wbar{display:flex;gap:6px}
.hp-dw-shead{display:grid;justify-items:center;gap:8px;padding:8px 0}.hp-dw-shead .avatar{width:72px;height:72px;border-radius:26px;border:0}
.hp-dw-sw{display:flex;flex-wrap:wrap;gap:8px;padding:4px 10px 12px}.hp-dw-sw[hidden]{display:none}.press-menu .sheet .hp-dw-sw .hp-swatch{width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0;border-radius:50%;background-color:#fff}.hp-dw-sw .hp-swatch svg{width:20px;height:20px}.hp-dw-sw .hp-swatch em{font-style:normal;font-size:13px}
.hp-dw-snd{justify-content:flex-start;padding:4px 10px 12px}
.hp-dw-sub{padding:2px 10px;font-size:12px;color:var(--hb-mid,#6B7290)}
.press-menu .sheet .hp-dw-row.warn{color:#c2453f}
.press-menu .sheet .hp-dw-leave{min-height:52px;border:0;border-radius:16px;background:#fff;color:#c2453f;font-weight:700;text-align:center}
.hp-dw-card[hidden]{display:none}
@keyframes hpDwShake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}.hp-dw-shake{animation:hpDwShake .25s 2}
/* 10-15 파블: 머리 QR 시트 탭 둘 「내 번호 QR | 인식」 */
.press-menu .sheet.hp-qr-sheet{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.press-menu .sheet.hp-qr-sheet button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;border-radius:16px;background:#DEE9F5;color:#3E4360;border:1px solid #D0DFF0;text-align:center}
.press-menu .sheet.hp-qr-sheet button svg{width:28px;height:28px}
/* 10-15 서랍 채팅방 설정 「편집」(방 이름 · 방장만) */
.press-menu .sheet .hp-dw-shead .hp-dw-edit{width:34px;height:34px;min-height:34px;margin-top:-2px}.press-menu .sheet .hp-dw-edit svg{width:17px;height:17px}
.hp-dw-rename{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}.hp-dw-rename[hidden]{display:none}.hp-dw-rename .hp-dw-in{flex:1;min-width:0;width:auto}.hp-dw-rename .hp-dw-err{flex-basis:100%;text-align:center}
.press-menu .sheet .hp-dw-rename .hp-dw-ic:disabled{opacity:.4}

/* ══ 10-16 파블·슈아 사진 「채팅방 머리 1줄 = 카톡 문법」 · 바탕 하나 + 알약들(두 겹 ✗) · 머리 ≤76px · 밑 말풍선 비침
   슈아 추가: iOS 신호등(더헬드 다른 화면과 같은 빨노초) · 제목 = 주소창/검색창 문법 · 결은 「공지 여기서 만나요」 띠처럼 ══ */
:root{--hp-head-bg:var(--dmc-heldom-head-bg,rgba(251,250,246,.58));--hp-head-btn:var(--dmc-heldom-head-btn,rgba(255,255,255,.5));--hp-head-ink:var(--dmc-heldom-head-ink,#3E4360);--hp-title-bg:var(--dmc-heldom-title-bg,var(--hb-light,#DEE9F5));--hp-live-bg:var(--dmc-heldom-live-bg,rgba(222,233,245,.45));--hp-live-ring:var(--dmc-heldom-live-ring,#A9B8D6);--hp-hd-h:76px}/* ⑤ 설계실 색 = --dmc-<이름>(design-mode.js) · 없으면 기본값 */
.active-chat>.chat-head.hp-hd1{grid-row:1;grid-column:1;z-index:4;align-self:start;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-rows:36px 26px;gap:2px 8px;align-items:center;min-height:0;max-height:var(--hp-hd-h);padding:5px 10px;border-bottom:0;background:var(--hp-head-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.active-chat>.chat-head.hp-hd1~.message-list{grid-row:1/3;grid-column:1;padding-top:calc(var(--hp-hd-h) + 6px)}
.hp-hd1>#chatAvatar,.hp-hd1>#roomTranslateButton,.hp-hd1 #chatMeta{display:none!important}
.hp-hd-lights{grid-column:1;grid-row:1;display:flex;gap:6px;padding-left:2px}.hp-hd-lights i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 1px rgba(0,0,0,.25)}
.hp-hd-lights .r{background:#FC615D}.hp-hd-lights .y{background:#FDBC40}.hp-hd-lights .g{background:#34C749}
.hp-hd1>#chatBackButton{grid-column:2;grid-row:1;justify-self:start;align-items:center;gap:1px;width:auto;height:34px;min-width:34px;padding:0 10px 0 5px;border:0;border-radius:999px;background:var(--hp-head-btn);color:var(--hp-head-ink);font-size:14px}
@media(max-width:699px){.hp-hd1>#chatBackButton{display:inline-flex}}
.hp-hd1>#chatBackButton i,.hp-hd-right i,.hp-hd-find i{display:grid;place-items:center;line-height:0}.hp-hd1 svg{width:22px;height:22px}
.hp-hd1>#chatBackButton[data-unread]:not([data-unread="0"])::after{position:static;min-width:0;height:auto;padding:0;border-radius:0;background:none;color:var(--hp-head-ink);font-size:14px;font-weight:700;line-height:1}
.hp-hd1>.hp-hd-mid{grid-column:3;grid-row:1;display:flex;align-items:center;gap:6px;min-width:0;height:34px;padding:0 12px 0 6px;border-radius:12px;background:var(--hp-title-bg);box-shadow:0 2px 10px rgba(var(--hb-deep-rgb,62,67,96),.08);cursor:text}
.hp-hd1 .hp-ttl42{flex:1;min-width:0}.hp-hd1 #chatTitle{color:var(--hp-head-ink);font-size:15px;font-weight:700;line-height:1.3}
.chat-head .hp-hd-mid>.hp-hd-find{flex:none;display:grid;place-items:center;width:26px;height:26px;margin:0;padding:0;border:0;background:transparent;color:var(--hb-mid,#6B7290)}.hp-hd-find svg{width:18px;height:18px}
.hp-hd-right{grid-column:4;grid-row:1;justify-self:end;display:flex;align-items:center;height:34px;padding:0;border-radius:999px;background:var(--hp-head-btn)}
.chat-head .hp-hd-right>button,.chat-head .hp-hd-right>button.room-translate{display:grid;place-items:center;width:34px;height:34px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent!important;box-shadow:none;color:var(--hp-head-ink)}
.hp-lvpill{grid-column:1/-1;grid-row:2;justify-self:start;display:inline-flex;align-items:center;gap:4px;height:26px;max-width:100%;min-width:0;padding:0 10px 0 2px;border-radius:999px;background:var(--hp-live-bg);color:var(--hp-head-ink);overflow:hidden}
.chat-head .hp-lvpill>#hpLiveBtn{flex:none;width:24px;height:24px;min-height:0;margin:0;padding:0}.hp-lvpill #hpLiveBtn svg{width:18px;height:18px}.hp-lvpill #hpLiveBtn:not(.on){opacity:.45}
.hp-lvpill .hp-oa-faces{min-width:0;min-height:0;height:24px;padding:0 0 0 6px;gap:0;color:inherit}
.hp-lvpill .hp-oa-faces .hp-oa-f{flex:none;width:22px;height:22px;margin-left:-6px;border:2px solid var(--hp-live-ring);box-shadow:none;font-size:10px}
.hp-lv-n{margin-left:5px;font-size:12px;font-weight:700}
.hp-lv-names{display:none;min-width:0;margin-left:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}.hp-oa-faces.hp-open .hp-lv-names{display:inline}
.hp-lvpill .hp-seen:not([hidden]){display:inline;margin:0 0 0 4px;white-space:nowrap;font-size:11px}
.hp-hd-q{flex:1;display:flex;align-items:center;gap:2px;min-width:0;height:32px}.hp-hd-q[hidden]{display:none}
.hp-hd-q input{width:100%;min-width:0;border:0;background:transparent;color:var(--hp-head-ink);font-size:14px;outline:0}
.hp-hd-q button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:transparent;color:var(--hp-head-ink)}.hp-hd-q svg{width:18px;height:18px}.hp-hd-qn{flex:none;font-size:11px;color:var(--hb-mid,#6B7290)}
.hp-hd1.hp-q .hp-ttl42{display:none}
.active-chat>.chat-head.hp-hd1~.message-list .hp-notice{top:var(--hp-hd-h)}/* IR-008: 목록이 머리 밑까지 → 고정 공지는 머리 높이만큼 아래에 붙음 */
article.message.hp-hit .bubble{box-shadow:0 0 0 2px var(--hp-live-ring)}
body.night .hp-hd1{--hp-head-bg:var(--dmc-heldom-head-bg,rgba(30,33,48,.6));--hp-head-btn:var(--dmc-heldom-head-btn,rgba(255,255,255,.12));--hp-head-ink:var(--dmc-heldom-head-ink,#DEE9F5);--hp-live-bg:var(--dmc-heldom-live-bg,rgba(222,233,245,.14));--hp-title-bg:var(--dmc-heldom-title-bg,rgba(222,233,245,.16))}/* IR-007: 밤에도 설계실 색 먼저 */
.hp-dw-cap .hp-dw-add{width:32px;height:32px;min-height:0;align-self:center}.hp-dw-cap .hp-dw-add svg{width:18px;height:18px}
#messageList .message-avatar,.hp-lvpill .hp-oa-f,.hp-dw-head .hp-dw-face,.hp-dw-person{cursor:pointer}/* 10-16 ③ 링 → 프로필 */
.hb-brief-n{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.hb-brief-n[hidden],.hb-row[hidden]{display:none}.hb-brief-n span{padding:3px 9px;border-radius:999px;background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);font-size:12px;font-weight:700}/* 10-16 ⑥ 브리핑 숫자 줄(없으면 숨김) */
/* 10-16 슈아 사진: 대화상대 맨 위 「＋ 초대하기」 줄 · 아이콘은 칸 안에서 최대한 크게(설계실 크기 띠로 조절) */
.hp-dw-person.hp-dw-inv{width:100%;border:0;background:transparent;text-align:left;font:inherit;color:var(--hb-deep,#3E4360);cursor:pointer}
.hp-dw-inv-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:16px;/* 슈아: 밑 프로필 모양과 똑같이(44 · 16) */background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360)}.hp-dw-inv-ic svg{width:28px;height:28px}
.hp-hd1>#chatBackButton svg,.hp-hd-right svg{width:28px;height:28px}.chat-head .hp-hd-mid>.hp-hd-find svg{width:24px;height:24px}
.chat-head .hp-lvpill>#hpLiveBtn{width:26px;height:26px}.hp-lvpill #hpLiveBtn svg{width:24px;height:24px}
/* 10-16 오픈채팅 1판(쪼꼬 d4092f6) · 로고 팔레트만 */
.hp-cm .hp-hub-open,.hp-cm .hp-hub-partner{display:none}
.hp-cm[data-hub="open"]>.hp-hub-open,.hp-cm[data-hub="partner"]>.hp-hub-partner{display:block}
.hp-cm[data-hub="open"]>.hp-cm-sec:not(.hp-hub-open),.hp-cm[data-hub="partner"]>.hp-cm-sec:not(.hp-hub-partner){display:none}
.hp-hub{padding:6px 2px 8px}
.hp-newchat{grid-template-columns:repeat(4,minmax(0,1fr))}.hp-newchat-b small{white-space:normal;text-align:center;word-break:keep-all;line-height:1.25}/* 긴 이름(오픈채팅 코드로 입장)이 칸을 밀지 않게 */
.hp-oc-tag{display:inline-flex;align-items:center;gap:2px;margin-left:5px;padding:0 6px;height:18px;border-radius:999px;background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);font-size:11px;font-weight:500;line-height:1;vertical-align:middle;flex:none}
.hp-oc-tag i{display:inline-grid;font-style:normal}.hp-oc-tag svg{width:11px;height:11px}
.chat-head .hp-oc-hd{margin-left:4px}
.press-menu .sheet .hp-oc-line{display:flex;gap:6px}
.press-menu .sheet .hp-oc-in{flex:1;min-width:0;width:100%;box-sizing:border-box;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--hb-point,#D0DFF0);background:#fff;color:var(--hb-deep,#3E4360);font:inherit;font-size:16px}
.press-menu .sheet .hp-oc-go{flex:none;padding:0 18px;border:0;background:var(--hb-deep,#3E4360);color:#fff;font-weight:600;text-align:center}
.press-menu .sheet .hp-oc-go:disabled{opacity:.55}
.press-menu .sheet .hp-cm-chip{min-height:34px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--hb-point,#D0DFF0);background:#fff;color:var(--hb-deep,#3E4360)}
.press-menu .sheet .hp-cm-chip.on{background:var(--hb-deep,#3E4360);border-color:var(--hb-deep,#3E4360);color:#fff}
.hp-oc-err{display:block;margin:2px 4px 0;font-size:12px;color:#6b7490}.hp-oc-err[hidden]{display:none}
.hp-oc-row{cursor:default}
.press-menu .sheet .hp-oc-sw{min-height:0;margin-left:auto;position:relative;flex:none;width:44px;height:26px;padding:0;border:0;border-radius:999px;background:var(--hb-point,#D0DFF0);cursor:pointer}
.hp-oc-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(62,67,96,.2);transition:left .15s}
.press-menu .sheet .hp-oc-sw[aria-checked="true"]{background:var(--hb-deep,#3E4360)}.hp-oc-sw[aria-checked="true"]::after{left:21px}
.hp-oc-codebox{display:flex;align-items:center;gap:6px;padding:2px 8px}.hp-oc-codebox[hidden]{display:none}
.hp-oc-code{flex:1;min-width:0;font-size:19px;letter-spacing:.14em;color:var(--hb-deep,#3E4360);user-select:all}
.press-menu .sheet .hp-oc-ic{min-height:0;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:11px;background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);cursor:pointer}.hp-oc-ic[hidden]{display:none}.hp-oc-ic svg{width:20px;height:20px}
.hp-oc-who{display:flex;align-items:center;gap:6px;margin-top:3px}.hp-oc-who[hidden]{display:none}
.hp-oc-who .hp-oa-f>.avatar{width:100%;height:100%;min-width:0;min-height:0;border-radius:50%}.hp-oc-who .hp-oa-f canvas{width:100%;height:100%;object-fit:cover;object-position:top}/* 미니미 얼굴(사진 없을 때) */
.hp-oc-who .hp-oc-faces{display:flex;align-items:center;padding-left:8px}.hp-oc-who .hp-oa-f{width:22px;height:22px;margin-left:-8px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px #5E86E6;background:var(--hb-point,#D0DFF0);display:grid;place-items:center;overflow:hidden;font-size:10px;font-weight:700;color:var(--hb-deep,#3E4360)}
.hp-oc-who small{font-size:11.5px;color:#6B7290}
.hp-oc-note{display:block;padding:0 8px 2px;font-size:11px;color:#6b7490}

/* ══ 10-16 파블 「📍주변 2판」 지도(기본 화면) · 로고 팔레트만 ══ */
.hp-cm .hp-hub-near{display:none}.hp-cm[data-hub="near"]>.hp-hub-near{display:block}.hp-cm[data-hub="near"]>.hp-cm-sec:not(.hp-hub-near){display:none}
.hp-nr-top{display:flex;align-items:center;gap:10px;padding:6px 4px 10px;color:#3E4360;font-size:14px}.hp-nr-top[hidden],.hp-nr-hint[hidden],.hp-nr-err[hidden],.hp-nr-map[hidden],.hp-nr-list[hidden],.hp-nr-card[hidden],.hp-nr-cerr[hidden]{display:none}
.hp-nr-sw{position:relative;flex:none;margin-left:auto;width:44px;height:26px;min-height:0;padding:0;border:0;border-radius:999px;background:#D0DFF0;cursor:pointer}.hp-nr-sw[aria-checked="true"]{background:#3E4360}.hp-nr-sw:disabled{opacity:.6}.hp-nr-sw.hp-nr-unk{opacity:.35;cursor:default}.hp-nr-km .hp-cm-chip:disabled,.hp-nr-re:disabled{opacity:.5}
.hp-nr-bar{display:flex;align-items:center;gap:8px;padding-bottom:8px}.hp-nr-km{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.hp-nr-tg{flex:none;display:flex;gap:2px;padding:2px;border-radius:999px;background:rgba(222,233,245,.7)}
.hp-nr-mode{display:grid;place-items:center;width:34px;height:30px;min-height:0;padding:0;border:0;border-radius:999px;background:transparent;color:#6B7290;cursor:pointer}.hp-nr-mode.on{background:#fff;color:#3E4360;box-shadow:0 1px 4px rgba(62,67,96,.12)}.hp-nr-mode i{display:grid;line-height:0}.hp-nr-mode svg{width:19px;height:19px}
.hp-nr-hint{margin:0 4px 8px;color:#6B7290;font-size:12.5px}
.hp-nr-map{height:56vh;min-height:280px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(169,184,214,.55),0 8px 24px rgba(62,67,96,.1);background:#DEE9F5;isolation:isolate}
.hp-nr-map .leaflet-control-attribution{font-size:10px;background:rgba(251,250,246,.8)}
.hp-nr-pin{background:none;border:0}
.hp-nr-face{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#D0DFF0;box-shadow:0 0 0 1.5px #A9B8D6,0 2px 8px rgba(62,67,96,.18);border:2px solid #FBFAF6;box-sizing:border-box;color:#3E4360;font-weight:700}
.hp-nr-face>.avatar{width:100%;height:100%;min-width:0;min-height:0;border-radius:50%}.hp-nr-face img,.hp-nr-face canvas{width:100%;height:100%;object-fit:cover;object-position:top}
.hp-nr-list{display:grid;gap:6px}.hp-nr-row .hp-cm-txt small{color:#6B7290}
.hp-nr-talk{flex:none;height:34px;min-height:0;padding:0 14px;border:0;border-radius:999px;background:#3E4360;color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}.hp-nr-talk:disabled{opacity:.55}
.hp-nr-card{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px;padding:12px 40px 12px 12px;border-radius:20px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(169,184,214,.55)}
.hp-nr-big{width:52px;height:52px}.hp-nr-ctx{flex:1;min-width:0;display:grid;gap:2px;color:#3E4360}.hp-nr-ctx small{color:#6B7290;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-nr-x{position:absolute;top:6px;right:6px;width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:#6B7290;font-size:18px;cursor:pointer}
.hp-nr-cerr{flex-basis:100%;color:#6B7290;font-size:12px;text-align:right}
.hp-nr-re{display:grid;place-items:center;width:32px;height:32px;min-height:0;margin:-4px 0 8px 4px;padding:0;border:1px solid rgba(169,184,214,.55);border-radius:50%;background:rgba(255,255,255,.6);color:#3E4360;cursor:pointer}.hp-nr-re svg{width:17px;height:17px}.hp-nr-re[hidden]{display:none}/* HD-REVIEW-004 다시 시도 */

/* ══ 10-16 슈아 캡처 B-1 「투명도 더 올려줘 · 유리결로 채팅 버튼 전부」 = 채팅 탭 위 줄(도우미·스케줄 봇·보관함) + 필터 알약 · 팔레트 그대로 ══ */
#chatsView .helper-door,#chatsView .hp-pill{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 14px rgba(62,67,96,.06)}
#chatsView .hp-pill[aria-pressed=true]{background:rgba(222,233,245,.55);border-color:#3E4360}
/* B-2 「프로필 배경 하얀 바탕 말고 투명」 = 채팅 목록 미니미 그림의 흰 바탕만 목록 바탕에 섞음 · 링(온에어·roomSignal42·1:1)은 그대로 */
#roomList .list-item .avatar:has(img[src*="/api/minimi/avatar"]),#roomList .list-item .avatar:has(canvas.five-look-avatar){background:transparent}#roomList .list-item .avatar img[src*="/api/minimi/avatar"]{mix-blend-mode:multiply}
/* B-3 친구 탭 카톡 결(업데이트 프로필 · 생일인 친구 · 채널) */
.hp-fr-sec[hidden]{display:none}.hp-fr-sec .hp-bbox{margin:0 16px 10px}.hp-fr-uprow .news-person{cursor:pointer}
.hp-fr-ch{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}.hp-fr-chav{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:16px;border:1px solid rgba(169,184,214,.5);background:rgba(255,255,255,.45);font-size:22px;color:#3E4360}#hpFrCh .hp-fr-ch .copy{flex:1;min-width:0;display:grid;gap:2px;text-align:left;justify-items:start}
/* 10-17 「받은 요청 n」(나를 저장한 사람 위) · 📍주변 카드 「요청 보냄」 */
#hpFrReq .hp-fr-rq .copy{flex:1;min-width:0;display:grid;gap:2px;text-align:left;justify-items:start}#hpFrReq .hp-fr-rq .copy small{color:#6B7290}
.hp-fr-rqb{flex:none;display:grid;place-items:center;width:36px;height:36px;min-height:0;padding:0;border-radius:50%;cursor:pointer}.hp-fr-rqb svg{width:18px;height:18px}.hp-fr-rqb:disabled{opacity:.5}
.hp-fr-rq-ok{border:0;background:#3E4360;color:#fff}.hp-fr-rq-no{margin-left:6px;border:1px solid rgba(169,184,214,.7);background:rgba(255,255,255,.55);color:#6B7290}
.hp-fr-rqerr{display:block;padding:2px 16px 8px;color:#6B7290;font-size:12px}.hp-fr-rqerr[hidden]{display:none}
.hp-nr-pend{display:inline-block;justify-self:start;padding:1px 8px;border-radius:999px;background:#DEE9F5;color:#3E4360!important;font-size:11px!important}
/* 10-17 🎂 생일·캘린더 1판(친구 메모 시트 · 프로필 🎂 탭 · 설정 캘린더 연동) */
.hp-bd-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;min-height:0;padding:0;border-radius:50%;cursor:pointer}.hp-bd-ic svg{width:19px;height:19px}.hp-bd-ic:disabled{opacity:.5}.hp-bd-ic[hidden]{display:none}
.hp-bd-ok{border:0;background:#3E4360;color:#fff}.hp-bd-del,.hp-cal-cp{border:1px solid rgba(169,184,214,.7);background:rgba(255,255,255,.6);color:#6B7290}
.press-menu .sheet .hp-bd-in{height:44px}.hp-name-panel .hp-bd-lab{margin-top:10px}.hp-name-panel .hp-bd-in{font-size:16px;height:40px;padding:0 10px;border-radius:12px;border:1px solid #D0DFF0;background:#fff;color:#3E4360;font-family:inherit}.hp-name-panel .hp-bd-row{margin-top:8px;font-size:13px}
.hp-bd-row{display:flex;align-items:center;gap:10px;color:#3E4360;font-size:14px}.hp-bd-row>span{flex:1}.hp-bd-acts{display:flex;gap:8px}
.hp-bd-sw{position:relative;flex:none;width:44px;height:26px;min-height:0;padding:0;border:0;border-radius:999px;background:#D0DFF0;cursor:pointer}.hp-bd-sw[aria-checked="true"]{background:#3E4360}.hp-bd-sw:disabled{opacity:.6}
.hp-cal .hp-oc-err,.hp-name-panel .hp-oc-err{display:block;color:#6B7290;font-size:12px}.hp-cal .hp-oc-err[hidden],.hp-name-panel .hp-oc-err[hidden]{display:none}
.hp-cal-url{display:flex;align-items:center;gap:8px;margin-top:10px}.hp-cal-url[hidden],.hp-cal-qr[hidden],.hp-cal-hint[hidden],.hp-cal .hp-oc-note[hidden]{display:none}
.hp-cal-code{flex:1;min-width:0;padding:8px 10px;border-radius:12px;background:#DEE9F5;color:#3E4360;font-size:11.5px;word-break:break-all;user-select:all}
.hp-cal-qr{width:168px;margin:10px auto 4px;padding:8px;border-radius:16px;background:#fff}.hp-cal-qr svg{display:block;width:100%;height:auto}
.hp-cal-hint,.hp-cal .hp-oc-note{display:block;margin-top:6px;padding:0;color:#6B7290;font-size:12px}
body.night #roomList .list-item .avatar img[src*="/api/minimi/avatar"]{mix-blend-mode:normal}/* B-2 밤 모드: 어두운 바탕 × multiply = 미니미가 검게 가라앉음 → 밤엔 그대로 */
/* 10-18 슈아: 더헬드 고객센터 봇방(스위치 켜면) · 친구 탭 맨 위 줄 · 👍👎 */
.hs-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;border:0;border-bottom:1px solid rgba(62,67,96,.08);background:transparent;color:#3E4360;text-align:left;font:inherit;cursor:pointer}
.hs-row b{flex:1;min-width:0;font-size:15px;font-weight:700}
.hs-row .hs-go{color:#6B7790;font-size:18px}
.hs-av,.hs-wrap .hb-av{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#DEE9F5;color:#3E4360;font-weight:800;font-size:18px;flex:none}
.hs-wrap .hb-av{width:32px;height:32px;font-size:15px}
#friendsView.hp-news-on .hs-row{display:none}
.hs-fb .hb-btn{min-width:44px;min-height:44px}
.hs-fb .hb-btn[aria-pressed="true"]{background:#3E4360;color:#fff}
/* 10-22 헬디 AI 방 카드: 만드는 중 · 그림 + 입히기 · 실패 + 다시/새 사진 */
.hp-ai{display:flex;flex-direction:column;gap:8px;min-width:150px}
.hp-ai-wait{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:14px}
.hp-ai-wait .hp-spin{width:18px;height:18px;margin:0;border-width:2px}
.hp-ai-img{background:#fff;image-rendering:pixelated;object-fit:contain;max-height:220px}
.hp-ai-row{display:flex;gap:6px;flex-wrap:wrap}
.hp-ai-btn{min-height:44px;padding:0 14px;border:1.5px solid rgba(62,67,96,.2);border-radius:22px;background:#fff;color:#3E4360;font:700 13px/1 inherit;font-family:inherit;cursor:pointer}
.hp-ai-btn:disabled{opacity:.6}

/* 10-23 슈아 모임 열기 손맛: 커뮤니티 탭 늘 보이는 ＋(왓츠앱 새 채팅 결) · 목록 위에 떠 있음 */
.hp-cm{position:relative}
.hp-cm .hp-cm-fab{position:sticky;bottom:16px;display:block;margin:8px 4px 0 auto;z-index:5;width:56px;height:56px;border-radius:18px;border:0;background:#3E4360;color:#fff;font-size:28px;line-height:1;box-shadow:0 8px 22px rgba(30,35,60,.28);cursor:pointer}
.hp-cm .hp-cm-new{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin:0 0 8px;padding:10px 12px;border:1.5px dashed #9FB2CC;border-radius:16px;background:#fff;color:#3E4360;text-align:left;font:inherit;cursor:pointer}
.hp-cm .hp-cm-new>i{flex:none;width:44px;height:44px;border-radius:12px;background:#3E4360;color:#fff;display:grid;place-items:center;font-style:normal;font-size:24px}
.hp-cm .hp-cm-new>span{display:flex;flex-direction:column;gap:3px}.hp-cm .hp-cm-new b{font-size:15px}.hp-cm .hp-cm-new small{font-size:12px;color:#6B7790}
.hp-cm .hp-cm-fresh{animation:hpCmFresh 2.4s ease-out 2;border-radius:14px}@keyframes hpCmFresh{0%{background:#DEE9F5}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.hp-cm .hp-cm-fresh{animation:none;background:#DEE9F5}}
/* 10-28 슈아 「이모지는 슈아가 만든 것들로 · 없음·문고 상점 아이콘으로」: 프로필 꾸미기 스티커 칸 */
.tray .grid button.stk{padding:4px;background:var(--bg)}
.tray .grid button.stk img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.tray .grid button.hw.ico{color:var(--ink-2)}
.tray .grid button.hw.ico svg{width:24px;height:24px}
.editor-panel.tray .grid{max-height:min(46vh,340px);overflow-y:auto;padding:3px}
#profileSticker:has(> img.hp-pstk){padding:4px;background:rgba(255,255,255,.88)}
#profileSticker img.hp-pstk{display:block;width:64px;height:64px;object-fit:contain}
/* 이모티콘 1판(10-28): 카톡 문법 이모지 창 · 공감 시트 + 입력창 서랍 같은 판 · 팔레트만 */
.hp-emo{--e-ink:var(--hb-deep,#3E4360);--e-soft:var(--hb-light,#DEE9F5);--e-point:var(--hb-point,#D0DFF0);display:flex;flex-direction:column;min-height:0;color:var(--e-ink)}
.hp-emo-q{display:flex;align-items:center;gap:8px;margin:10px 14px 6px;padding:0 12px;height:38px;border-radius:12px;background:var(--e-soft);color:var(--e-ink)}
.hp-emo-q svg{flex:none;opacity:.6}
.hp-emo-q input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:inherit;outline:0}
.hp-emo-nav{display:flex;gap:6px;overflow-x:auto;padding:2px 14px 8px;scrollbar-width:none;flex:none}
.hp-emo-nav::-webkit-scrollbar{display:none}
.hp-emo-chip{flex:none;border:0;border-radius:999px;padding:6px 12px;background:var(--e-soft);color:var(--e-ink);font:600 12px/1 inherit;cursor:pointer}
.hp-emo-chip.on{background:var(--e-ink);color:#FBFAF6}
.hp-emo-tab{flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--e-ink);font-size:20px;cursor:pointer;padding:3px}
.hp-emo-tab:hover,.hp-emo-tab:focus-visible{background:var(--e-soft)}
.hp-emo-tab img{width:100%;height:100%;object-fit:contain}
.hp-emo-body{flex:1;min-height:0;overflow-y:auto;padding:0 10px 12px;overscroll-behavior:contain;position:relative}
.hp-emo-sec h4{margin:8px 4px 6px;font-size:11px;font-weight:700;letter-spacing:.04em;opacity:.6}
.hp-emo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px}
.hp-emo-grid.big{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
.hp-emo-c{aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:10px;background:none;font-size:26px;line-height:1;cursor:pointer;padding:0}
.hp-emo-c.img{padding:4px}
.hp-emo-c:hover,.hp-emo-c:focus-visible{background:var(--e-soft)}
.hp-emo-c img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.hp-emo-sheet{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center}
.hp-emo-back{position:absolute;inset:0;border:0;padding:0;background:rgba(62,67,96,.28);cursor:default}
.hp-emo-card{position:relative;display:flex;flex-direction:column;width:min(100%,460px);height:min(72dvh,560px);border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -12px 40px rgba(62,67,96,.22);padding-bottom:env(safe-area-inset-bottom)}
.hp-emo-grip{display:block;width:40px;height:4px;margin:8px auto 0;border-radius:4px;background:var(--hb-point,#D0DFF0)}
.sticker-drawer.hp-emo-on{display:block;padding:0;overflow:hidden}
.sticker-drawer.hp-emo-on > :not(.hp-emo){display:none!important}
.sticker-drawer.hp-emo-on > .hp-emo{height:min(42dvh,340px)}
.hp-react-q img.hp-emo-f,.hp-react-pill img.hp-emo-f{display:block;width:1.6em;height:1.6em;object-fit:contain}
/* 이모티콘 1b(10-28): 카톡 크기 — 미니 = 글자만큼(1.1em · 혼자여도 그대로) · iOS 이모지만 1~3개 = 말풍선 없이 크게(1개 46px · 2~3개 36px) · 스티커 120 */
.bubble img.held-mini{display:inline-block;width:1.1em;height:1.1em;object-fit:contain;vertical-align:-.18em;margin:0 1px}
.bubble.hp-jumbo{background:none!important;border:0!important;box-shadow:none!important;padding:0 2px!important;font-size:46px;line-height:1.15;letter-spacing:2px}
.bubble.hp-jumbo[data-jumbo="2"],.bubble.hp-jumbo[data-jumbo="3"]{font-size:36px}
.hp-emo-c.mini{padding:5px}
.hp-emo-tab.mini img{padding:3px}
/* 카톡 문법 미리보기 · 서랍 칸 작게(64) */
.sticker-drawer.hp-emo-on .hp-emo-grid.big{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px}
.hp-emo-pv{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:flex-end;padding:8px 14px;background:rgba(251,250,246,.28);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2)}/* 10-28 슈아 「투명창」: 대화 위에 겹쳐 뜸(밀어 올림 ✗) */
.hp-emo-pv-go{border:0;background:none;padding:0;cursor:pointer}
.hp-emo-pv-go img{display:block;width:120px;height:120px;object-fit:contain}
.hp-emo-pv-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:var(--hb-deep,#3E4360);color:#FBFAF6;cursor:pointer}
/* 나만의 이모지(사용자 등록): 팩 머리 · ＋ 칸 · 편집 × · 새 팩 / 💎 한 팩 더(두 번 눌러 확정) */
.hp-emo-ph{display:flex;align-items:center;gap:8px;margin:6px 4px 4px;font-size:12px}
.hp-emo-ph span{opacity:.55;font-size:11px}
.hp-emo-ed{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--hb-deep,#3E4360);cursor:pointer}
.hp-emo-my.editing .hp-emo-ed{background:var(--hb-light,#DEE9F5)}
.hp-emo-add{border:1.5px dashed var(--hb-point,#D0DFF0)!important;color:var(--hb-deep,#3E4360);font-size:22px}
.hp-emo-c{position:relative}
.hp-emo-del{display:none;position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:var(--hb-deep,#3E4360);color:#FBFAF6;font:700 12px/18px system-ui;font-style:normal;text-align:center}
.hp-emo-my.editing .hp-emo-del{display:block}
.hp-emo-prow{display:flex;align-items:center;gap:8px;margin:6px 4px 10px}
.hp-emo .hp-emo-pbtn{width:auto;height:auto;flex:none;border:0;border-radius:999px;padding:7px 14px;background:var(--hb-light,#DEE9F5);color:var(--hb-deep,#3E4360);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}/* 10-28 엔진 .sticker-drawer button 44px 칸이 덮어 「새 팩」 글자가 넘침 */
.hp-emo-pbtn.dia.sure{background:var(--hb-deep,#3E4360);color:#FBFAF6}
.hp-emo-st{font-size:11px;opacity:.7}
.hp-emo-pv-go{position:relative}.hp-emo-pv.is-busy .hp-emo-pv-go{opacity:.55;pointer-events:none}.hp-emo-pv.is-failed .hp-emo-pv-go::after{content:'⟳';position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--hb-deep,#3E4360);color:#FBFAF6;font-size:15px;line-height:1}/* ui-108 REV-009: 보내는 중 흐림 · 실패 ⟳ */
/* 10-29 슈아 「카톡 문법」: 대화 목록 밀기 — 오른쪽 = ⭐🔔📌 · 왼쪽 = 읽음 · 나가기 */
#roomList .list-item{touch-action:pan-y}#roomList .list-item.hp-sw{position:relative;z-index:2;transition:transform .2s ease}
.hp-swbar{position:absolute;z-index:1;display:flex;align-items:center;justify-content:space-evenly;padding:0 5px;box-sizing:border-box}
.hp-swb{width:42px;height:42px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#B9CBE3,#8FA4C8);color:#fff;cursor:pointer;box-shadow:0 2px 10px rgba(62,67,96,.14)}
.hp-swb svg{width:18px;height:18px}.hp-swb.on{background:var(--hb-deep,#3E4360);color:#FBFAF6}.hp-swb-read{background:#A9B8D6;color:#fff}.hp-swb-leave{background:var(--hb-deep,#3E4360);color:#FBFAF6}
/* 그룹방 얼굴 넷 = 대화 목록만 · 살짝 둥근 네모 · 광채 띠는 바깥 링 그대로 */
#roomList .hp-g4-av .hr-face{background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.hp-g4{position:relative;display:block;width:100%;height:100%}.hp-g4>i{position:absolute;width:48%;height:48%;border-radius:30%;overflow:hidden;display:grid;place-items:center;background:#DEE9F5;box-shadow:0 0 0 1.5px #fff}
.hp-g4>i img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}.hp-g4>i img.hr-dove{width:100%;height:100%;object-fit:cover}
.hp-g4-4>i:nth-child(1){left:0;top:0}.hp-g4-4>i:nth-child(2){right:0;top:0}.hp-g4-4>i:nth-child(3){left:0;bottom:0}.hp-g4-4>i:nth-child(4){right:0;bottom:0}
.hp-g4-3>i:nth-child(1){left:26%;top:0}.hp-g4-3>i:nth-child(2){left:0;bottom:0}.hp-g4-3>i:nth-child(3){right:0;bottom:0}
.hp-g4-2>i{width:58%;height:58%}.hp-g4-2>i:nth-child(1){left:0;top:0}.hp-g4-2>i:nth-child(2){right:0;bottom:0}
/* 기본 사람 아이콘 = 카톡보다 살짝 크게(72% → 58%) · 빛은 그대로 */
body .hring .hr-face img.hr-dove{width:100%;height:100%}
/* 새 대화 빛 = 도형 경계 없는 빛 번짐(은빛 블루 + 샴페인 아주 살짝) · 옛 그림자 빛(아이콘 모양대로 = 네모가 보임) ✗ */
body.hp-has-unread .rail button[data-tab=chats]{isolation:isolate}
body.hp-has-unread .rail button[data-tab=chats] i{filter:none;animation:none;position:relative;overflow:visible!important}/* 10-31 슈아: 설계실 그림 아이콘(.dm-ico overflow:hidden)이 빛을 네모로 자름 → 빛은 밖으로 */
body.hp-has-unread .rail button[data-tab=chats] i::before{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,1) 0,rgba(232,240,250,.95) 14%,rgba(196,213,236,.8) 30%,rgba(156,176,212,.48) 45%,rgba(232,213,170,.2) 57%,rgba(222,233,245,0) 70%);filter:blur(6px);animation:hpHalo29 2.6s ease-in-out infinite}
/* 10-31 슈아: 빛 색 = 원래 그대로(은빛 블루 + 샴페인골드 살짝 포인트) · 채팅 단추 밑 둥근 네모(선택 판) ✗ */
.rail button[aria-current=page]{background:transparent!important;box-shadow:none!important}
@keyframes hpHalo29{0%,100%{opacity:.6;transform:scale(.86)}50%{opacity:1;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){body.hp-has-unread .rail button[data-tab=chats] i::before{animation:none;opacity:.85}}
/* 설정 줄 v170 컬러 아이콘 */
#settingsView .hp-row>i.hp-v170-on{font-size:0;display:grid;place-items:center}#settingsView .hp-row>i .hp-v170{width:26px;height:26px;display:block}#settingsView .hp-row>i[data-art-on] .hp-v170{display:none}
/* 10-29 슈아 「프로필 꾸미기 = 끌어서 자리 · 칸마다 사용 안함」 */
#heldomProfile .hp-placed{position:absolute!important;right:auto!important;bottom:auto!important;margin:0!important;translate:-50% -50%;z-index:3}
#heldomProfile .hm-pill{position:relative}
#heldomProfile .hp-off{display:none}
#heldomProfile.editing .hp-off{position:absolute;top:-8px;right:-8px;z-index:4;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#FBFAF6;color:#3E4360;box-shadow:0 2px 6px rgba(62,67,96,.22);cursor:pointer}
#heldomProfile.editing #profileSticker,#heldomProfile.editing #profileDday,#heldomProfile.editing #profileVerse,#heldomProfile.editing .hm-pill{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;outline:1.5px dashed rgba(62,67,96,.28);outline-offset:3px}
#heldomProfile[data-hp-moff]:not(.editing) .hm-pill{display:none!important}
#heldomProfile[data-hp-moff].editing .hm-pill{opacity:.42}
/* 10-29 슈아 「직접 꾸민 칸만 · 기본으로 나오는 것 ✗」: 빈 스티커·빈 음반·빈 상태 말풍선 = 꾸미기 창에서도 숨김 · 붙이는 순간 보임 · 음반 = 도구줄 ♪ */
#heldomProfile #profileSticker[hidden]{display:none!important}
#heldomProfile .hp-note-bubble.empty{display:none!important}
#heldomProfile .hm-pill .hm-pe{display:grid;place-items:center;color:#3E4360}#heldomProfile .hm-pill .hm-pe svg{width:16px;height:16px}
/* 10-29 슈아 「네 칸 아이콘·글자 균형 · 설계실에서 직접 조절」: 값 = 설계실 「헬덤 프로필 아이콘 자리」(home.heldom.prow.* → --hp-pr-*) · 없으면 아래 기본값
   pad 칸 왼쪽 여백 · gap 아이콘↔글자 · icon 아이콘 크기 · self 미니미 크기 · sx/sy 미니미 자리 · fx 미니미 얼굴만(말풍선 그대로) · ty 나와의 채팅 글자 위아래 */
#heldomProfile{--hp-pr-pad:34px;--hp-pr-gap:8px;--hp-pr-icon:30px;--hp-pr-self:36px;--hp-pr-sx:6px;--hp-pr-sy:-3px;--hp-pr-fx:-3px;--hp-pr-ty:0px}
#heldomProfile:not(.editing) #profileSelfRoom,#heldomProfile:not(.editing) #profileHeldy,#heldomProfile:not(.editing) #profileMiniroom,#heldomProfile:not(.editing) .hp-prow [data-post]{display:flex!important;align-items:center;justify-content:flex-start!important;gap:var(--hp-pr-gap)!important;min-height:46px;padding:0 0 0 var(--hp-pr-pad)!important;font-size:13px;font-weight:600;text-align:left}
#heldomProfile:not(.editing) #profileSelfRoom span:not([class]),#heldomProfile:not(.editing) #profileHeldy span,#heldomProfile:not(.editing) #profileMiniroom span{font-size:13px;margin:0}
#heldomProfile #profileHeldy .hp-ico,#heldomProfile #profileMiniroom .hp-ico,#heldomProfile .hp-prow [data-post] .hp-ico{width:var(--hp-pr-icon);height:var(--hp-pr-icon);margin:0 calc((var(--hp-pr-self) - var(--hp-pr-icon)) / 2)!important;flex:none;object-fit:contain}
#heldomProfile #profileSelfRoom .avatar.hp-selfchat{font-size:var(--hp-pr-self);margin:0;flex:none}
#heldomProfile:not(.editing) #profileSelfRoom .avatar.hp-selfchat{position:relative;top:var(--hp-pr-sy);left:var(--hp-pr-sx)}
#heldomProfile:not(.editing) #profileSelfRoom .avatar.hp-selfchat .hp-selfpt{left:var(--hp-pr-fx)}
#heldomProfile:not(.editing) #profileSelfRoom > span:not([class]){position:relative;top:var(--hp-pr-ty)}
/* 10-30 슈아 카톡 공감 줄: [이모지 n] [+공감] [사람] · 남의 말 = 왼쪽 · 내 말 = 오른쪽 · 리액션 창 = 폰 시트 · 패드·웹 카드 */
.hp-react-pills{gap:4px;align-items:center;margin:4px 0 0}article.message:not(.mine) .hp-react-pills{justify-content:flex-start}
.hp-react-pill{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 8px 0 6px;border:1px solid #E3E6EC;background:#fff;border-radius:12px;font-size:14px;line-height:1;color:#3E4360}.hp-react-pill::after{content:attr(data-n);font-size:12px;font-weight:600;color:#6B7186}
.hp-react-pill.mine{background:#DEE9F5;border-color:#A9B8D6;box-shadow:none}.hp-react-pill img.hp-emo-f{width:18px;height:18px}
.hp-react-add,.hp-react-who{width:24px;height:24px;border-radius:12px;border:1px solid #E3E6EC;background:#fff;display:inline-grid;place-items:center;padding:0;color:#8A90A2;cursor:pointer}.hp-react-add:active,.hp-react-who:active{background:#DEE9F5}
.hp-react-list{position:fixed;z-index:2147483000;width:300px;max-height:420px;display:flex;flex-direction:column;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border:.5px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 14px 40px rgba(62,67,96,.22);color:#3E4360;overflow:hidden}
.hp-react-list.sheet{left:0;right:0;bottom:0;width:auto;max-height:70vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}.hp-rl-grip{display:block;width:36px;height:5px;border-radius:3px;background:#C7CCD6;margin:8px auto 0}
.hp-react-list header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px}.hp-react-list header b{font-size:16px}.hp-rl-x{border:0;background:none;font-size:16px;color:#8A90A2;cursor:pointer;padding:4px}
.hp-react-list nav{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid #E6E9EF;overflow-x:auto}.hp-react-list nav button{flex:none;border:0;background:none;padding:6px 8px 7px;border-bottom:2px solid transparent;cursor:pointer}.hp-react-list nav button[aria-selected="true"]{border-bottom-color:#3E4360}.hp-react-list nav img{width:24px;height:24px;display:block;object-fit:contain}.hp-react-list nav i{font-style:normal;font-size:20px}
.hp-rl-n{margin:10px 14px 4px;font-size:12px;color:#6B7186}.hp-react-list ul{list-style:none;margin:0;padding:2px 6px 10px;overflow:auto}.hp-react-list li{display:flex;align-items:center;gap:10px;padding:6px 8px;font-size:14px}.hp-react-list li .hring,.hp-rl-ph{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover}

/* 10-31 슈아 「안 읽은 숫자 = 동그라미 알약 ✗ · 우리 로고 아이콘 속 시그니처 ✦ 빛 안에 숫자」(헬덤 목록 · 옆 탭 채팅 · held-new 와 같은 ✦) */
.list-item .unread,.rail button b#unreadBadge,.rail button>b{width:24px!important;min-width:0!important;height:24px!important;padding:0!important;border:0!important;border-radius:0!important;display:grid!important;place-items:center;font:800 9px/1 var(--sans,Pretendard,system-ui,sans-serif)!important;letter-spacing:-.03em;color:#3E4360!important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22/%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23E8F0FA%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23A9B8D6%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M12%200C12.9%207.6%2016.4%2011.1%2024%2012%2016.4%2012.9%2012.9%2016.4%2012%2024%2011.1%2016.4%207.6%2012.9%200%2012%207.6%2011.1%2011.1%207.6%2012%200Z%22%20fill%3D%22url%28%23g%29%22/%3E%3C/svg%3E") center/contain no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 3px rgba(169,184,214,.7));animation:hpStarPulse 2.2s ease-in-out infinite}
.rail button>b[hidden],.rail button b#unreadBadge[hidden],.list-item .unread[hidden]{display:none!important}
@keyframes hpStarPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.list-item .unread,.rail button>b{animation:none}}
/* 11-01 슈아 「아래 탭 빛 = 홈 화면에 셋팅한 대로」 = 숫자 = 우리 반짝이 ✦ 안(held-new 홈 결과 같은 별·같은 크기) + 아이콘 뒤 은은한 빛 번짐 · 네모 판 ✗ */
.rail button:has(>b:not([hidden])){position:relative;isolation:isolate}.rail button:has(>b:not([hidden]))::before{content:"";position:absolute;left:50%;top:42%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle closest-side,rgba(255,255,255,.95) 0,rgba(232,240,250,.85) 22%,rgba(196,213,236,.6) 44%,rgba(156,176,212,.28) 66%,rgba(222,233,245,0) 100%);filter:blur(5px);animation:hpTabHalo 2.6s ease-in-out infinite}.rail button b#unreadBadge,.rail button b{width:22px!important;min-width:0!important;height:22px!important;padding:0!important;border:0!important;border-radius:0!important;font:800 9px/22px Pretendard,system-ui,sans-serif!important;letter-spacing:-.02em;text-align:center;color:#3E4360!important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23D4E0F1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238FA5CF%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M12%200C12.9%207.6%2016.4%2011.1%2024%2012%2016.4%2012.9%2012.9%2016.4%2012%2024%2011.1%2016.4%207.6%2012.9%200%2012%207.6%2011.1%2011.1%207.6%2012%200Z%22%20fill%3D%22url(%23g)%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 1px 3px rgba(62,67,96,.35));animation:hpTabPulse 2.2s ease-in-out infinite!important}@keyframes hpTabHalo{0%,100%{opacity:.7}50%{opacity:1}}@keyframes hpTabPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}@media (prefers-reduced-motion:reduce){.rail button::before,.rail button b{animation:none!important}}
/* 11-01 슈아 「기본 프로필 아이콘 = 한 결(둥근네모)」 = 빈자리(미니미·사진 없음) 얼굴만 칸 모양 따라 꽉 · 미니미·사진·파란 띠·광채 ✗ 손대지 않음 */
.list-item .avatar:has(img.hr-dove) .hring,.list-item .avatar:has(img.hr-dove) .hr-face,.my-card .avatar:has(img.hr-dove) .hring,.my-card .avatar:has(img.hr-dove) .hr-face,.news-person .avatar:has(img.hr-dove) .hring,.news-person .avatar:has(img.hr-dove) .hr-face{width:100%!important;height:100%!important;border-radius:inherit!important}
.list-item .avatar:has(img.hr-dove) .hr-face img.hr-dove,.my-card .avatar:has(img.hr-dove) .hr-face img.hr-dove,.news-person .avatar:has(img.hr-dove) .hr-face img.hr-dove{border-radius:inherit!important}
/* ui-164 WT164-004: runtime avatar() = .avatar > img.hr-dove 바로(.hr-face 없음) → 같은 색·모양 */
.list-item .avatar:has(>img.hr-dove),.my-card .avatar:has(>img.hr-dove),.news-person .avatar:has(>img.hr-dove){background:linear-gradient(#C7D1ED,#B8C5E7)!important}.list-item .avatar:has(>img.hr-dove[src*="/profile-empty/a-"]),.my-card .avatar:has(>img.hr-dove[src*="/profile-empty/a-"]),.news-person .avatar:has(>img.hr-dove[src*="/profile-empty/a-"]){background:linear-gradient(#C6D3E4,#B4C6DC)!important}.list-item .avatar:has(>img.hr-dove[src*="/profile-empty/c-"]),.my-card .avatar:has(>img.hr-dove[src*="/profile-empty/c-"]),.news-person .avatar:has(>img.hr-dove[src*="/profile-empty/c-"]){background:linear-gradient(#D9DFE7,#C8D1DE)!important}.list-item .avatar>img.hr-dove,.my-card .avatar>img.hr-dove,.news-person .avatar>img.hr-dove{width:100%!important;height:100%!important;object-fit:cover;border-radius:inherit!important}
/* 11-01 슈아 「프로필 = 지금 쓰던 둥근사각형 결」 · ui-163 WT163-008 = 그림은 설계실 profile.empty.icon 6종 그대로(held-ring.js) · 모양(둥근네모)만 · 그림 밖 모서리 = 설계실 미리보기와 같은 색(A·B·C) */
.list-item .avatar:has(img.hr-dove) .hr-face,.my-card .avatar:has(img.hr-dove) .hr-face,.news-person .avatar:has(img.hr-dove) .hr-face{background:linear-gradient(#C7D1ED,#B8C5E7)!important}.list-item .avatar:has(img.hr-dove[src*="/profile-empty/a-"]) .hr-face,.my-card .avatar:has(img.hr-dove[src*="/profile-empty/a-"]) .hr-face,.news-person .avatar:has(img.hr-dove[src*="/profile-empty/a-"]) .hr-face{background:linear-gradient(#C6D3E4,#B4C6DC)!important}.list-item .avatar:has(img.hr-dove[src*="/profile-empty/c-"]) .hr-face,.my-card .avatar:has(img.hr-dove[src*="/profile-empty/c-"]) .hr-face,.news-person .avatar:has(img.hr-dove[src*="/profile-empty/c-"]) .hr-face{background:linear-gradient(#D9DFE7,#C8D1DE)!important}