/* 오른쪽 아래 바로가기: 회원 바로가기 + 카카오톡 문의 + 접속 현황·대화. 되돌리려면 이 파일의 <link>와 render.mjs 의 dockHtml 만 빼면 된다. */
.dock2 { position: fixed; right: 22px; bottom: 26px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.dock2 .member-dock { position: static; }
.dk-kakao { display: inline-flex; align-items: center; flex-direction: row-reverse; gap: 0; height: 52px; min-width: 52px; padding: 0 14px; border-radius: 999px; overflow: hidden; background: #fee500; color: #191600; font: 700 15px/1 var(--sans); text-decoration: none; box-shadow: 0 14px 30px -14px rgba(120, 100, 0, .65); transition: gap .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.dk-kakao svg { width: 26px; height: 26px; flex: none; }
.dk-kakao span { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .55s var(--ease), opacity .4s var(--ease); }
.dk-kakao:hover, .dk-kakao:focus-visible { gap: 10px; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(120, 100, 0, .75); color: #191600; }
.dk-kakao:hover span, .dk-kakao:focus-visible span { max-width: 130px; opacity: 1; }
.dk-live { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 17px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(14, 27, 44, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #eef3f9; font: 600 14.5px/1 var(--sans); box-shadow: 0 14px 30px -14px rgba(14, 27, 44, .85); cursor: pointer; transition: transform .25s var(--ease), background .2s; }
.dk-live:hover { transform: translateY(-1px); background: rgba(21, 38, 59, .94); }
.dk-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ember); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(168, 224, 74, .55); animation: dk-pulse 2.6s infinite; flex: none; }
.dot.off { background: #5a6b80; animation: none; }
@keyframes dk-pulse { 70% { box-shadow: 0 0 0 7px rgba(168, 224, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(168, 224, 74, 0); } }

.dk-panel, .dk-chat { position: fixed; z-index: 71; display: flex; flex-direction: column; border-radius: 22px; background: rgba(14, 27, 44, .98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); color: #e9eef5; overflow: hidden; animation: dk-in .5s var(--ease); font: 400 14.5px/1.55 var(--sans); }
.dk-panel[hidden], .dk-chat[hidden] { display: none; }
@keyframes dk-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.dk-panel { right: 22px; bottom: var(--dk-bottom, 150px); width: 320px; max-height: min(560px, calc(100vh - var(--dk-bottom, 150px) - 84px)); }
.dk-chat { right: 358px; bottom: var(--dk-bottom, 150px); width: 370px; height: min(480px, calc(100vh - var(--dk-bottom, 150px) - 84px)); }
.dk-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; font-weight: 600; font-size: 15.5px; }
.dk-h small { color: #9fb0c4; font-weight: 400; }
.dk-x { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: inherit; cursor: pointer; }
.dk-x:hover { background: rgba(255, 255, 255, .08); }
.dk-body { overflow-y: auto; padding: 0 8px 8px; flex: 1; }
.dk-sec { margin: 10px 8px 4px; font-size: 12.5px; color: #9fb0c4; font-weight: 500; }
.dk-list { list-style: none; margin: 0; padding: 0; }
.dk-row { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 8px; border: 0; background: transparent; border-radius: 14px; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: background .2s; }
.dk-row:hover, .dk-row:focus-visible { background: rgba(255, 255, 255, .08); outline: 0; }
.dk-av { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #0e1b2c; flex: none; }
.dk-av .dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border: 2px solid #101e30; }
.dk-who { min-width: 0; flex: 1; } .dk-who b { display: block; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-who small { display: block; color: #9fb0c4; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-pill { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; }
.dk-empty { margin: 8px 12px 12px; color: #9fb0c4; font-size: 13.5px; }
.dk-foot { padding: 10px 16px 14px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: #9fb0c4; display: grid; gap: 8px; }
.dk-foot label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.dk-btn { border: 0; border-radius: 999px; background: #e9eef5; color: #0e1b2c; font: 600 13.5px/1 var(--sans); padding: 10px 16px; cursor: pointer; }
.dk-btn.ghost { background: transparent; color: #e9eef5; border: 1px solid rgba(255, 255, 255, .22); }
.dk-group { display: grid; gap: 8px; padding: 8px 12px 12px; }
.dk-group input[type="text"], .dk-compose input { min-width: 0; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 10px 16px; color: #e9eef5; font: inherit; }
.dk-group input:focus, .dk-compose input:focus { outline: 2px solid #dfbd78; outline-offset: 1px; }
.dk-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.dk-b { position: relative; max-width: 80%; padding: 9px 13px; border-radius: 18px; background: rgba(255, 255, 255, .09); overflow-wrap: anywhere; animation: dk-in .2s var(--ease); }
.dk-b.me { align-self: flex-end; background: #dfbd78; color: #2a1f08; }
.dk-b.hid { opacity: .6; font-style: italic; }
.dk-b small { display: block; font-size: 11.5px; opacity: .7; margin-bottom: 1px; }
.dk-t { display: block; margin-top: 2px; font-size: 11px; opacity: .6; }
.dk-rp { position: absolute; right: -4px; top: -8px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: #14263b; color: #e9eef5; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity .2s; }
.dk-b:hover .dk-rp, .dk-rp:focus-visible { opacity: 1; }
.dk-day { align-self: center; font-size: 11.5px; color: #9fb0c4; }
.dk-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.dk-compose input { flex: 1; }
.dk-err { margin: 0; padding: 0 14px 8px; color: #ffb4a8; font-size: 12.5px; min-height: 0; }
.dk-err:empty { display: none; }

@media (max-width: 899px) {
  .dock2 { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); gap: 10px; }
  .dk-kakao { width: 50px; padding: 0; justify-content: center; } .dk-kakao span { display: none; }
  .dk-panel { right: 10px; left: 10px; width: auto; bottom: calc(var(--dk-bottom, 220px)); }
  .dk-chat { right: 10px; left: 10px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom)); height: min(70vh, 520px); z-index: 72; }
}
@media (prefers-reduced-motion: reduce) { .dot, .dk-panel, .dk-chat, .dk-b { animation: none; } .dk-kakao, .dk-live { transition: none; } }

/* 방문자·접속 현황 단추: 접속 중 · 오늘 · 누적을 한 알약에 */
.dk-st { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.dk-st b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dk-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .22); }
.dk-live.is-static { cursor: default; }
.dk-live.is-static:hover { transform: none; background: rgba(14, 27, 44, .9); }
@media (max-width: 899px) { .dk-total, .dk-today + .dk-sep { display: none; } .dk-live { font-size: 13.5px; padding: 0 14px; } }

/* 데스크톱: 방문자 알약도 카카오 단추처럼 작은 동그라미로 접어 두고, 올리면 왼쪽으로 펼친다(오른쪽 아래의 고정 요소를 줄인다) */
.dk-ic { display: none; }
@media (min-width: 900px) {
  .dk-live { flex-direction: row-reverse; gap: 0; height: 52px; min-width: 52px; padding: 0 14px; overflow: hidden; border-radius: 999px; }
  .dk-live .dk-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
  .dk-live > .dot { position: absolute; right: 9px; top: 9px; width: 11px; height: 11px; border: 2px solid #0e1b2c; }
  .dk-live .dk-st { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .65s var(--ease), opacity .45s var(--ease); }
  .dk-live:hover, .dk-live:focus-visible { gap: 12px; }
  .dk-live:hover .dk-st, .dk-live:focus-visible .dk-st { max-width: 340px; opacity: 1; }
  .dk-live .dk-badge { position: absolute; right: 6px; bottom: 6px; min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; padding: 0 5px; }
}

/* 카카오톡 문의: 그림을 다른 동그라미 단추와 같은 비중으로 키운다 */
.dk-kakao { min-width: 52px; padding: 0 10px; }
.dk-kakao svg { width: 32px; height: 32px; }
@media (max-width: 899px) { .dk-kakao { min-width: 50px; } }